[codex] Improve workspace navigation and runtime UI (#4089)

## Thinking Path

> - Paperclip agents do real work in project and execution workspaces.
> - Operators need workspace state to be visible, navigable, and
copyable without digging through raw run logs.
> - The branch included related workspace cards, navigation, runtime
controls, stale-service handling, and issue-property visibility.
> - These changes share the workspace UI and runtime-control surfaces
and can stand alone from unrelated access/profile work.
> - This pull request groups the workspace experience changes into one
standalone branch.
> - The benefit is a clearer workspace overview, better metadata copy
flows, and more accurate runtime service controls.

## What Changed

- Polished project workspace summary cards and made workspace metadata
copyable.
- Added a workspace navigation overview and extracted reusable project
workspace content.
- Squared and polished the execution workspace configuration page.
- Fixed stale workspace command matching and hid stopped stale services
in runtime controls.
- Showed live workspace service context in issue properties.

## Verification

- `pnpm install --frozen-lockfile`
- `pnpm exec vitest run
ui/src/components/ProjectWorkspaceSummaryCard.test.tsx
ui/src/lib/project-workspaces-tab.test.ts
ui/src/components/Sidebar.test.tsx
ui/src/components/WorkspaceRuntimeControls.test.tsx
ui/src/components/IssueProperties.test.tsx`
- `pnpm exec vitest run packages/shared/src/workspace-commands.test.ts
--config /dev/null` because the root Vitest project config does not
currently include `packages/shared` tests.
- Split integration check: merged after runtime/governance,
dev-infra/backups, and access/profiles with no merge conflicts.
- Confirmed this branch does not include `pnpm-lock.yaml`.

## Risks

- Medium risk: touches workspace navigation, runtime controls, and issue
property rendering.
- Visual layout changes may need browser QA, especially around smaller
screens and dense workspace metadata.
- No database migrations are included.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5.4 tool-enabled coding model, agentic
code-editing/runtime with local shell and GitHub CLI access; exact
context window and reasoning mode are not exposed by the Paperclip
harness.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/src/lib/project-workspaces-tab.ts

@@ -16,6 +16,7 @@ export interface ProjectWorkspaceSummary {
   serviceCount: number;
   runningServiceCount: number;
   primaryServiceUrl: string | null;
+  primaryServiceUrlRunning: boolean;
   hasRuntimeConfig: boolean;
   issues: Issue[];
 }
@@ -52,6 +53,24 @@ function isDefaultSharedExecutionWorkspace(input: {
   return input.executionWorkspace.mode === "shared_workspace" && linkedProjectWorkspaceId === input.primaryWorkspaceId;
 }
 
+function runtimeServiceSummary(
+  services: NonNullable<ExecutionWorkspace["runtimeServices"]> | undefined,
+) {
+  const serviceCount = services?.length ?? 0;
+  const runningServiceCount = services?.filter((service) => service.status === "running").length ?? 0;
+  const primaryService =
+    services?.find((service) => service.status === "running" && service.url)
+    ?? services?.find((service) => service.url)
+    ?? null;
+
+  return {
+    serviceCount,
+    runningServiceCount,
+    primaryServiceUrl: primaryService?.url ?? null,
+    primaryServiceUrlRunning: primaryService?.status === "running",
+  };
+}
+
 export function buildProjectWorkspaceSummaries(input: {
   project: ProjectWorkspaceLike;
   issues: Issue[];
@@ -81,6 +100,7 @@ export function buildProjectWorkspaceSummaries(input: {
       const nextIssues = [...(existing?.issues ?? []), issue].sort(
         (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
       );
+      const runtimeSummary = runtimeServiceSummary(executionWorkspace.runtimeServices);
 
       summaries.set(`execution:${executionWorkspace.id}`, {
         key: `execution:${executionWorkspace.id}`,
@@ -98,9 +118,7 @@ export function buildProjectWorkspaceSummaries(input: {
         projectWorkspaceId: executionWorkspace.projectWorkspaceId ?? issue.projectWorkspaceId ?? null,
         executionWorkspaceId: executionWorkspace.id,
         executionWorkspaceStatus: executionWorkspace.status,
-        serviceCount: executionWorkspace.runtimeServices?.length ?? 0,
-        runningServiceCount: executionWorkspace.runtimeServices?.filter((service) => service.status === "running").length ?? 0,
-        primaryServiceUrl: executionWorkspace.runtimeServices?.find((service) => service.url)?.url ?? null,
+        ...runtimeSummary,
         hasRuntimeConfig: Boolean(
           executionWorkspace.config?.workspaceRuntime
           ?? projectWorkspacesById.get(executionWorkspace.projectWorkspaceId ?? issue.projectWorkspaceId ?? "")?.runtimeConfig?.workspaceRuntime,
@@ -118,6 +136,7 @@ export function buildProjectWorkspaceSummaries(input: {
     const nextIssues = [...(existing?.issues ?? []), issue].sort(
       (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
     );
+    const runtimeSummary = runtimeServiceSummary(projectWorkspace.runtimeServices);
 
     summaries.set(`project:${projectWorkspace.id}`, {
       key: `project:${projectWorkspace.id}`,
@@ -130,9 +149,7 @@ export function buildProjectWorkspaceSummaries(input: {
       projectWorkspaceId: projectWorkspace.id,
       executionWorkspaceId: null,
       executionWorkspaceStatus: null,
-      serviceCount: projectWorkspace.runtimeServices?.length ?? 0,
-      runningServiceCount: projectWorkspace.runtimeServices?.filter((service) => service.status === "running").length ?? 0,
-      primaryServiceUrl: projectWorkspace.runtimeServices?.find((service) => service.url)?.url ?? null,
+      ...runtimeSummary,
       hasRuntimeConfig: Boolean(projectWorkspace.runtimeConfig?.workspaceRuntime),
       issues: nextIssues,
     });
@@ -146,6 +163,7 @@ export function buildProjectWorkspaceSummaries(input: {
       || Boolean(projectWorkspace.runtimeConfig?.workspaceRuntime)
       || (projectWorkspace.runtimeServices?.length ?? 0) > 0;
     if (!shouldSurfaceWorkspace) continue;
+    const runtimeSummary = runtimeServiceSummary(projectWorkspace.runtimeServices);
     summaries.set(key, {
       key,
       kind: "project_workspace",
@@ -157,15 +175,15 @@ export function buildProjectWorkspaceSummaries(input: {
       projectWorkspaceId: projectWorkspace.id,
       executionWorkspaceId: null,
       executionWorkspaceStatus: null,
-      serviceCount: projectWorkspace.runtimeServices?.length ?? 0,
-      runningServiceCount: projectWorkspace.runtimeServices?.filter((service) => service.status === "running").length ?? 0,
-      primaryServiceUrl: projectWorkspace.runtimeServices?.find((service) => service.url)?.url ?? null,
+      ...runtimeSummary,
       hasRuntimeConfig: Boolean(projectWorkspace.runtimeConfig?.workspaceRuntime),
       issues: [],
     });
   }
 
   return [...summaries.values()].sort((a, b) => {
+    const liveDiff = Number(b.runningServiceCount > 0) - Number(a.runningServiceCount > 0);
+    if (liveDiff !== 0) return liveDiff;
     const diff = b.lastUpdatedAt.getTime() - a.lastUpdatedAt.getTime();
     return diff !== 0 ? diff : a.workspaceName.localeCompare(b.workspaceName);
   });