feat(desktop): add PR workspace and UI Lab

apps/desktop/layout-spec.json

@@ -92,7 +92,25 @@
       "collapseAt": 704,
       "listContentLine": 32,
       "listControlsOuterInset": 16,
-      "listContentBehavior": "Split-list titles, first selection labels, and search icons share the pageSection content line; collapsed-sidebar recovery actions remain shell chrome."
+      "listContentBehavior": "Split-list titles, first selection labels, and search icons share the pageSection content line; collapsed-sidebar recovery actions remain shell chrome.",
+      "pullRequests": {
+        "inspectorMinWidth": 192,
+        "inspectorPreferredWidth": "23cqw",
+        "inspectorMaxWidth": 256,
+        "inspectorCollapseAt": 960,
+        "inspectorInset": 12,
+        "inspectorRadius": "modal",
+        "inspectorElevation": "raised",
+        "behavior": "Show list, primary PR detail, and a reserved floating Inspector at standard widths; collapse the Inspector before the existing list/detail compact transition."
+      }
+    },
+    "uiLab": {
+      "navigationWidth": 196,
+      "catalogMaxWidth": 1160,
+      "scenarioToolbarHeight": 48,
+      "cardMinWidth": 280,
+      "compactAt": 760,
+      "behavior": "Keep a persistent catalog rail at standard widths, move it above content at compact widths, and let each production scenario retain its own container-query breakpoints."
     }
   },
   "verticalRhythm": {

apps/desktop/src/App.tsx

@@ -398,7 +398,7 @@ import {
   type DockTab,
 } from "./dock/Dock";
 import { BrowserPanel } from "./browser/Browser";
-import { GitDockContent } from "./git/GitDockContent";
+import { GitDockContent, PullRequestDockContent } from "./git/GitDockContent";
 import { TerminalDockContent } from "./terminal/TerminalDockContent";
 import { TrajectoryView } from "./session/TrajectoryView";
 import { SessionRail } from "./sidebar/SessionRail";
@@ -5383,6 +5383,7 @@ export default function App() {
       "side-chat",
       ...(componentEnabled("files.surface") ? ["files" as const] : []),
       ...(componentEnabled("git.surface") ? ["git" as const] : []),
+      ...(componentEnabled("git.surface") ? ["pull-request" as const] : []),
     ],
     [componentEnabled],
   );
@@ -5863,6 +5864,7 @@ export default function App() {
         terminal: "terminal.dock",
         files: "files.surface",
         git: "git.surface",
+        "pull-request": "git.surface",
       };
       const componentId = component[t];
       if (componentId && !componentEnabled(componentId)) {
@@ -8641,10 +8643,15 @@ export default function App() {
                 ),
                 git: (
                   <GitDockContent
+                    status={git}
+                    onOpenSourceControl={openSourceControl}
+                  />
+                ),
+                "pull-request": (
+                  <PullRequestDockContent
                     cwd={cwd || null}
                     status={git}
                     onRefresh={refreshGit}
-                    onOpenSourceControl={openSourceControl}
                   />
                 ),
               }}

apps/desktop/src/design/DesignSystemPreview.tsx

@@ -180,11 +180,17 @@ function SectionHeading({ eyebrow, title }: { eyebrow: string; title: string })
   );
 }
 
-export function DesignSystemPreview() {
+export function DesignSystemPreview({
+  catalogHref = "?ui-lab=home",
+  initialThemeMode = "system",
+}: {
+  catalogHref?: string;
+  initialThemeMode?: ThemeMode;
+}) {
   const toast = useToast();
   const systemDark = useSystemDark();
   const appearance = useAppearanceSettings();
-  const [themeMode, setThemeMode] = useState<ThemeMode>("system");
+  const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
   const [boldText, setBoldText] = useState(false);
   const [selectedProvider, setSelectedProvider] = useState("codex");
   const [selectedChoice, setSelectedChoice] = useState("automatic");
@@ -252,6 +258,7 @@ export function DesignSystemPreview() {
       data-ds-theme={resolvedTheme}
     >
       <aside className="ds-preview-sidebar">
+        <a className="ds-lab-link" href={catalogHref}>← UI Lab</a>
         <div className="ds-brand-lockup">
           <span className="ds-brand-mark">C2</span>
           <div>

apps/desktop/src/design/preview.css

@@ -122,6 +122,23 @@
   background: var(--ds-color-fill-hover);
 }
 
+.ds-preview-sidebar > .ds-lab-link {
+  display: flex;
+  min-height: var(--ds-control-normal);
+  align-items: center;
+  padding: 0 var(--ds-space-module-inset);
+  color: var(--ds-color-primary);
+  background: var(--ds-color-fill-quiet);
+  border-radius: var(--ds-radius-control);
+  font-size: var(--ds-type-metadata-size);
+  font-weight: var(--ds-font-weight-medium);
+  text-decoration: none;
+}
+
+.ds-preview-sidebar > .ds-lab-link:hover {
+  background: var(--ds-color-fill-hover);
+}
+
 .ds-version-card {
   display: flex;
   align-items: flex-start;