[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/components/WorkspaceRuntimeControls.test.tsx

@@ -76,6 +76,74 @@ describe("buildWorkspaceRuntimeControlSections", () => {
       workspaceCommandId: "db-migrate",
     });
   });
+
+  it("keeps stopped stale runtime services from masking updated inherited commands", () => {
+    const sections = buildWorkspaceRuntimeControlSections({
+      runtimeConfig: {
+        commands: [
+          { id: "web", name: "web", kind: "service", command: "pnpm dev:once --tailscale-auth" },
+        ],
+      },
+      runtimeServices: [
+        createRuntimeService({
+          id: "service-web",
+          serviceName: "web",
+          status: "stopped",
+          command: "pnpm dev",
+        }),
+      ],
+      canStartServices: true,
+      canRunJobs: true,
+    });
+
+    expect(sections.services).toEqual([
+      expect.objectContaining({
+        title: "web",
+        statusLabel: "stopped",
+        command: "pnpm dev:once --tailscale-auth",
+        runtimeServiceId: null,
+      }),
+    ]);
+    expect(sections.otherServices).toEqual([]);
+  });
+
+  it("surfaces running stale runtime services separately from updated commands", () => {
+    const sections = buildWorkspaceRuntimeControlSections({
+      runtimeConfig: {
+        commands: [
+          { id: "web", name: "web", kind: "service", command: "pnpm dev:once --tailscale-auth" },
+        ],
+      },
+      runtimeServices: [
+        createRuntimeService({
+          id: "service-web",
+          serviceName: "web",
+          status: "running",
+          command: "pnpm dev",
+        }),
+      ],
+      canStartServices: true,
+      canRunJobs: true,
+    });
+
+    expect(sections.services).toEqual([
+      expect.objectContaining({
+        title: "web",
+        statusLabel: "stopped",
+        command: "pnpm dev:once --tailscale-auth",
+        runtimeServiceId: null,
+      }),
+    ]);
+    expect(sections.otherServices).toEqual([
+      expect.objectContaining({
+        title: "web",
+        statusLabel: "running",
+        command: "pnpm dev",
+        runtimeServiceId: "service-web",
+        disabledReason: "This runtime service no longer matches a configured workspace command.",
+      }),
+    ]);
+  });
 });
 
 describe("buildWorkspaceRuntimeControlItems", () => {
@@ -237,6 +305,42 @@ describe("WorkspaceRuntimeControls", () => {
     act(() => root.unmount());
   });
 
+  it("can render square plain surfaces for embedded configuration pages", () => {
+    const sections = buildWorkspaceRuntimeControlSections({
+      runtimeConfig: {
+        commands: [
+          { id: "web", name: "web", kind: "service", command: "pnpm dev" },
+        ],
+      },
+      runtimeServices: [],
+      canStartServices: true,
+    });
+
+    const root = createRoot(container);
+    act(() => {
+      root.render(
+        <WorkspaceRuntimeControls
+          sections={sections}
+          square
+          onAction={vi.fn()}
+        />,
+      );
+    });
+
+    const summaryPanel = container.querySelector(".border.border-border\\/70");
+    const servicePanel = Array.from(container.querySelectorAll(".border.border-border\\/80"))
+      .find((element) => element.textContent?.includes("web"));
+    const startButton = Array.from(container.querySelectorAll("button"))
+      .find((button) => button.textContent?.trim() === "Start");
+
+    expect(summaryPanel?.className).toContain("rounded-none");
+    expect(summaryPanel?.className).not.toContain("bg-background/60");
+    expect(servicePanel?.className).toContain("rounded-none");
+    expect(startButton?.className).toContain("rounded-none");
+
+    act(() => root.unmount());
+  });
+
   it("accepts the legacy items prop without crashing", () => {
     const items = buildWorkspaceRuntimeControlItems({
       runtimeConfig: {