From c6779b570f44079a80a360f3c6d6255a92fb55e0 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 6 Apr 2026 21:58:29 -0500
Subject: [PATCH 01/45] feat(ui): add workspace and parent issue grouping to
 issues list

Adds two new groupBy options on the issues page: "Workspace" groups
issues by their projectWorkspaceId, and "Parent Issue" groups by
parentId. Groups with items sort first; sentinel groups (No Workspace /
No Parent) appear last. Creating a new issue from a parent group
pre-fills parentId.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssuesList.tsx | 58 ++++++++++++++++++++++++++++++--
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 4760d360..06718d6e 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -45,7 +45,7 @@ export type IssueViewState = {
   projects: string[];
   sortField: "status" | "priority" | "title" | "created" | "updated";
   sortDir: "asc" | "desc";
-  groupBy: "status" | "priority" | "assignee" | "none";
+  groupBy: "status" | "priority" | "assignee" | "workspace" | "parent" | "none";
   viewMode: "list" | "board";
   collapsedGroups: string[];
   collapsedParents: string[];
@@ -155,6 +155,7 @@ interface Agent {
 interface ProjectOption {
   id: string;
   name: string;
+  workspaces?: { id: string; name: string }[];
 }
 
 interface IssuesListProps {
@@ -265,6 +266,24 @@ export function IssuesList({
     return agents.find((a) => a.id === id)?.name ?? null;
   }, [agents]);
 
+  const workspaceNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const project of projects ?? []) {
+      for (const ws of project.workspaces ?? []) {
+        map.set(ws.id, ws.name || project.name);
+      }
+    }
+    return map;
+  }, [projects]);
+
+  const issueTitleMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const issue of issues) {
+      map.set(issue.id, issue.identifier ? `${issue.identifier}: ${issue.title}` : issue.title);
+    }
+    return map;
+  }, [issues]);
+
   const filtered = useMemo(() => {
     const sourceIssues = normalizedIssueSearch.length > 0 ? searchedIssues : issues;
     const filteredByControls = applyFilters(sourceIssues, viewState, currentUserId);
@@ -295,6 +314,36 @@ export function IssuesList({
         .filter((p) => groups[p]?.length)
         .map((p) => ({ key: p, label: statusLabel(p), items: groups[p]! }));
     }
+    if (viewState.groupBy === "workspace") {
+      const groups = groupBy(filtered, (i) => i.projectWorkspaceId ?? "__no_workspace");
+      return Object.keys(groups)
+        .sort((a, b) => {
+          // Groups with items first, "no workspace" last
+          if (a === "__no_workspace") return 1;
+          if (b === "__no_workspace") return -1;
+          return (groups[b]?.length ?? 0) - (groups[a]?.length ?? 0);
+        })
+        .map((key) => ({
+          key,
+          label: key === "__no_workspace" ? "No Workspace" : (workspaceNameMap.get(key) ?? key.slice(0, 8)),
+          items: groups[key]!,
+        }));
+    }
+    if (viewState.groupBy === "parent") {
+      const groups = groupBy(filtered, (i) => i.parentId ?? "__no_parent");
+      return Object.keys(groups)
+        .sort((a, b) => {
+          // Groups with items first, "no parent" last
+          if (a === "__no_parent") return 1;
+          if (b === "__no_parent") return -1;
+          return (groups[b]?.length ?? 0) - (groups[a]?.length ?? 0);
+        })
+        .map((key) => ({
+          key,
+          label: key === "__no_parent" ? "No Parent" : (issueTitleMap.get(key) ?? key.slice(0, 8)),
+          items: groups[key]!,
+        }));
+    }
     // assignee
     const groups = groupBy(
       filtered,
@@ -310,7 +359,7 @@ export function IssuesList({
             : (agentName(key) ?? key.slice(0, 8)),
       items: groups[key]!,
     }));
-  }, [filtered, viewState.groupBy, agents, agentName, currentUserId]);
+  }, [filtered, viewState.groupBy, agents, agentName, currentUserId, workspaceNameMap, issueTitleMap]);
 
   const newIssueDefaults = useCallback((groupKey?: string) => {
     const defaults: Record<string, string> = {};
@@ -322,6 +371,9 @@ export function IssuesList({
         if (groupKey.startsWith("__user:")) defaults.assigneeUserId = groupKey.slice("__user:".length);
         else defaults.assigneeAgentId = groupKey;
       }
+      else if (viewState.groupBy === "parent" && groupKey !== "__no_parent") {
+        defaults.parentId = groupKey;
+      }
     }
     return defaults;
   }, [projectId, viewState.groupBy]);
@@ -605,6 +657,8 @@ export function IssuesList({
                     ["status", "Status"],
                     ["priority", "Priority"],
                     ["assignee", "Assignee"],
+                    ["workspace", "Workspace"],
+                    ["parent", "Parent Issue"],
                     ["none", "None"],
                   ] as const).map(([value, label]) => (
                     <button

From 93355bae6b08e9c005eddace77ca0d04815b1332 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 09:35:05 -0500
Subject: [PATCH 02/45] Debounce issues search input

---
 ui/src/components/IssuesList.test.tsx | 54 +++++++++++++++++++++
 ui/src/components/IssuesList.tsx      | 67 +++++++++++++++++++++------
 2 files changed, 107 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/IssuesList.test.tsx b/ui/src/components/IssuesList.test.tsx
index a8665118..89b9e422 100644
--- a/ui/src/components/IssuesList.test.tsx
+++ b/ui/src/components/IssuesList.test.tsx
@@ -148,11 +148,13 @@ describe("IssuesList", () => {
     mockIssuesApi.list.mockReset();
     mockIssuesApi.listLabels.mockReset();
     mockAuthApi.getSession.mockReset();
+    mockIssuesApi.list.mockResolvedValue([]);
     mockIssuesApi.listLabels.mockResolvedValue([]);
     mockAuthApi.getSession.mockResolvedValue({ user: null, session: null });
   });
 
   afterEach(() => {
+    vi.useRealTimers();
     container.remove();
   });
 
@@ -184,4 +186,56 @@ describe("IssuesList", () => {
       root.unmount();
     });
   });
+
+  it("debounces search updates so typing does not notify the page on every keystroke", async () => {
+    vi.useFakeTimers();
+
+    const onSearchChange = vi.fn();
+    const localIssue = createIssue({ id: "issue-local", identifier: "PAP-1", title: "Local issue" });
+
+    const { root } = renderWithQueryClient(
+      <IssuesList
+        issues={[localIssue]}
+        agents={[]}
+        projects={[]}
+        viewStateKey="paperclip:test-issues"
+        onSearchChange={onSearchChange}
+        onUpdateIssue={() => undefined}
+      />,
+      container,
+    );
+
+    const input = container.querySelector('input[aria-label="Search issues"]') as HTMLInputElement | null;
+    expect(input).not.toBeNull();
+    const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+    expect(valueSetter).toBeTypeOf("function");
+
+    act(() => {
+      if (!input || !valueSetter) return;
+      valueSetter.call(input, "a");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      valueSetter.call(input, "ab");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    expect(onSearchChange).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(149);
+    });
+
+    expect(onSearchChange).not.toHaveBeenCalled();
+
+    await act(async () => {
+      vi.advanceTimersByTime(1);
+      await Promise.resolve();
+    });
+
+    expect(onSearchChange).toHaveBeenCalledTimes(1);
+    expect(onSearchChange).toHaveBeenCalledWith("ab");
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 06718d6e..8814259d 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -1,4 +1,4 @@
-import { useDeferredValue, useEffect, useMemo, useState, useCallback, useRef } from "react";
+import { startTransition, useDeferredValue, useEffect, useMemo, useState, useCallback, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { useDialog } from "../context/DialogContext";
@@ -30,6 +30,7 @@ import type { Issue } from "@paperclipai/shared";
 
 const statusOrder = ["in_progress", "todo", "backlog", "in_review", "blocked", "done", "cancelled"];
 const priorityOrder = ["critical", "high", "medium", "low"];
+const ISSUE_SEARCH_DEBOUNCE_MS = 150;
 
 function statusLabel(status: string): string {
   return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
@@ -177,6 +178,50 @@ interface IssuesListProps {
   onUpdateIssue: (id: string, data: Record<string, unknown>) => void;
 }
 
+function IssueSearchInput({
+  value,
+  onDebouncedChange,
+}: {
+  value: string;
+  onDebouncedChange?: (search: string) => void;
+}) {
+  const [draftValue, setDraftValue] = useState(value);
+  const lastCommittedValueRef = useRef(value);
+
+  useEffect(() => {
+    setDraftValue(value);
+    lastCommittedValueRef.current = value;
+  }, [value]);
+
+  useEffect(() => {
+    if (!onDebouncedChange || draftValue === lastCommittedValueRef.current) return;
+
+    const timeoutId = window.setTimeout(() => {
+      lastCommittedValueRef.current = draftValue;
+      startTransition(() => {
+        onDebouncedChange(draftValue);
+      });
+    }, ISSUE_SEARCH_DEBOUNCE_MS);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [draftValue, onDebouncedChange]);
+
+  return (
+    <div className="relative w-48 sm:w-64 md:w-80">
+      <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        value={draftValue}
+        onChange={(e) => {
+          setDraftValue(e.target.value);
+        }}
+        placeholder="Search issues..."
+        className="pl-7 text-xs sm:text-sm"
+        aria-label="Search issues"
+      />
+    </div>
+  );
+}
+
 export function IssuesList({
   issues,
   isLoading,
@@ -394,19 +439,13 @@ export function IssuesList({
             <Plus className="h-4 w-4 sm:mr-1" />
             <span className="hidden sm:inline">New Issue</span>
           </Button>
-          <div className="relative w-48 sm:w-64 md:w-80">
-            <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={issueSearch}
-              onChange={(e) => {
-                setIssueSearch(e.target.value);
-                onSearchChange?.(e.target.value);
-              }}
-              placeholder="Search issues..."
-              className="pl-7 text-xs sm:text-sm"
-              aria-label="Search issues"
-            />
-          </div>
+          <IssueSearchInput
+            value={issueSearch}
+            onDebouncedChange={(nextSearch) => {
+              setIssueSearch(nextSearch);
+              onSearchChange?.(nextSearch);
+            }}
+          />
         </div>
 
         <div className="flex items-center gap-0.5 sm:gap-1 shrink-0">

From 1cbb0a5e34e801aa8576cc5ab5e110d43c1d7a0d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 16:33:37 -0500
Subject: [PATCH 03/45] Add execution workspace issues tab

---
 ui/src/App.tsx                            |   4 +
 ui/src/lib/company-routes.test.ts         |   7 +
 ui/src/pages/ExecutionWorkspaceDetail.tsx | 952 ++++++++++++----------
 3 files changed, 532 insertions(+), 431 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 804e8d48..7aac9dfa 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -161,6 +161,8 @@ function boardRoutes() {
       <Route path="routines" element={<Routines />} />
       <Route path="routines/:routineId" element={<RoutineDetail />} />
       <Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
+      <Route path="execution-workspaces/:workspaceId/configuration" element={<ExecutionWorkspaceDetail />} />
+      <Route path="execution-workspaces/:workspaceId/issues" element={<ExecutionWorkspaceDetail />} />
       <Route path="goals" element={<Goals />} />
       <Route path="goals/:goalId" element={<GoalDetail />} />
       <Route path="approvals" element={<Navigate to="/approvals/pending" replace />} />
@@ -349,6 +351,8 @@ export function App() {
           <Route path="projects/:projectId/workspaces/:workspaceId" element={<UnprefixedBoardRedirect />} />
           <Route path="projects/:projectId/configuration" element={<UnprefixedBoardRedirect />} />
           <Route path="execution-workspaces/:workspaceId" element={<UnprefixedBoardRedirect />} />
+          <Route path="execution-workspaces/:workspaceId/configuration" element={<UnprefixedBoardRedirect />} />
+          <Route path="execution-workspaces/:workspaceId/issues" element={<UnprefixedBoardRedirect />} />
           <Route path="tests/ux/chat" element={<UnprefixedBoardRedirect />} />
           <Route path="tests/ux/runs" element={<UnprefixedBoardRedirect />} />
           <Route path=":companyPrefix" element={<Layout />}>
diff --git a/ui/src/lib/company-routes.test.ts b/ui/src/lib/company-routes.test.ts
index ced25744..866b4a62 100644
--- a/ui/src/lib/company-routes.test.ts
+++ b/ui/src/lib/company-routes.test.ts
@@ -9,16 +9,23 @@ import {
 describe("company routes", () => {
   it("treats execution workspace paths as board routes that need a company prefix", () => {
     expect(isBoardPathWithoutPrefix("/execution-workspaces/workspace-123")).toBe(true);
+    expect(isBoardPathWithoutPrefix("/execution-workspaces/workspace-123/issues")).toBe(true);
     expect(extractCompanyPrefixFromPath("/execution-workspaces/workspace-123")).toBeNull();
     expect(applyCompanyPrefix("/execution-workspaces/workspace-123", "PAP")).toBe(
       "/PAP/execution-workspaces/workspace-123",
     );
+    expect(applyCompanyPrefix("/execution-workspaces/workspace-123/issues", "PAP")).toBe(
+      "/PAP/execution-workspaces/workspace-123/issues",
+    );
   });
 
   it("normalizes prefixed execution workspace paths back to company-relative paths", () => {
     expect(toCompanyRelativePath("/PAP/execution-workspaces/workspace-123")).toBe(
       "/execution-workspaces/workspace-123",
     );
+    expect(toCompanyRelativePath("/PAP/execution-workspaces/workspace-123/configuration")).toBe(
+      "/execution-workspaces/workspace-123/configuration",
+    );
   });
 
   /**
diff --git a/ui/src/pages/ExecutionWorkspaceDetail.tsx b/ui/src/pages/ExecutionWorkspaceDetail.tsx
index e5445890..20168b66 100644
--- a/ui/src/pages/ExecutionWorkspaceDetail.tsx
+++ b/ui/src/pages/ExecutionWorkspaceDetail.tsx
@@ -1,15 +1,20 @@
 import { useEffect, useMemo, useState } from "react";
-import { Link, useParams } from "@/lib/router";
+import { Link, Navigate, useLocation, useNavigate, useParams } from "@/lib/router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { ExecutionWorkspace, Project, ProjectWorkspace } from "@paperclipai/shared";
-import { ArrowLeft, Check, Copy, ExternalLink, Loader2 } from "lucide-react";
+import type { ExecutionWorkspace, Issue, Project, ProjectWorkspace } from "@paperclipai/shared";
+import { ArrowLeft, Copy, ExternalLink, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Tabs } from "@/components/ui/tabs";
 import { CopyText } from "../components/CopyText";
 import { ExecutionWorkspaceCloseDialog } from "../components/ExecutionWorkspaceCloseDialog";
+import { agentsApi } from "../api/agents";
 import { executionWorkspacesApi } from "../api/execution-workspaces";
+import { heartbeatsApi } from "../api/heartbeats";
 import { issuesApi } from "../api/issues";
 import { projectsApi } from "../api/projects";
+import { IssuesList } from "../components/IssuesList";
+import { PageTabBar } from "../components/PageTabBar";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
@@ -29,6 +34,18 @@ type WorkspaceFormState = {
   workspaceRuntime: string;
 };
 
+type ExecutionWorkspaceTab = "configuration" | "issues";
+
+function resolveExecutionWorkspaceTab(pathname: string, workspaceId: string): ExecutionWorkspaceTab | null {
+  const segments = pathname.split("/").filter(Boolean);
+  const executionWorkspacesIndex = segments.indexOf("execution-workspaces");
+  if (executionWorkspacesIndex === -1 || segments[executionWorkspacesIndex + 1] !== workspaceId) return null;
+  const tab = segments[executionWorkspacesIndex + 2];
+  if (tab === "issues") return "issues";
+  if (tab === "configuration") return "configuration";
+  return null;
+}
+
 function isSafeExternalUrl(value: string | null | undefined) {
   if (!value) return false;
   try {
@@ -214,8 +231,79 @@ function WorkspaceLink({
   return <Link to={projectWorkspaceUrl(project, workspace.id)} className="hover:underline">{workspace.name}</Link>;
 }
 
+function ExecutionWorkspaceIssuesList({
+  companyId,
+  workspaceId,
+  issues,
+  isLoading,
+  error,
+  project,
+}: {
+  companyId: string;
+  workspaceId: string;
+  issues: Issue[];
+  isLoading: boolean;
+  error: Error | null;
+  project: Project | null;
+}) {
+  const queryClient = useQueryClient();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(companyId),
+    queryFn: () => agentsApi.list(companyId),
+    enabled: !!companyId,
+  });
+
+  const { data: liveRuns } = useQuery({
+    queryKey: queryKeys.liveRuns(companyId),
+    queryFn: () => heartbeatsApi.liveRunsForCompany(companyId),
+    enabled: !!companyId,
+    refetchInterval: 5000,
+  });
+
+  const liveIssueIds = useMemo(() => {
+    const ids = new Set<string>();
+    for (const run of liveRuns ?? []) {
+      if (run.issueId) ids.add(run.issueId);
+    }
+    return ids;
+  }, [liveRuns]);
+
+  const updateIssue = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) => issuesApi.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByExecutionWorkspace(companyId, workspaceId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) });
+      if (project?.id) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.listByProject(companyId, project.id) });
+      }
+    },
+  });
+
+  const projectOptions = useMemo(
+    () => (project ? [{ id: project.id, name: project.name, workspaces: project.workspaces ?? [] }] : undefined),
+    [project],
+  );
+
+  return (
+    <IssuesList
+      issues={issues}
+      isLoading={isLoading}
+      error={error}
+      agents={agents}
+      projects={projectOptions}
+      liveIssueIds={liveIssueIds}
+      projectId={project?.id}
+      viewStateKey={`paperclip:execution-workspace-view:${workspaceId}`}
+      onUpdateIssue={(id, data) => updateIssue.mutate({ id, data })}
+    />
+  );
+}
+
 export function ExecutionWorkspaceDetail() {
   const { workspaceId } = useParams<{ workspaceId: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { setBreadcrumbs } = useBreadcrumbs();
   const { selectedCompanyId, setSelectedCompanyId } = useCompany();
@@ -223,6 +311,7 @@ export function ExecutionWorkspaceDetail() {
   const [closeDialogOpen, setCloseDialogOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [runtimeActionMessage, setRuntimeActionMessage] = useState<string | null>(null);
+  const activeTab = workspaceId ? resolveExecutionWorkspaceTab(location.pathname, workspaceId) : null;
 
   const workspaceQuery = useQuery({
     queryKey: queryKeys.executionWorkspaces.detail(workspaceId!),
@@ -357,6 +446,24 @@ export function ExecutionWorkspaceDetail() {
   }
   if (!workspace || !form || !initialState) return null;
 
+  if (workspaceId && activeTab === null) {
+    let cachedTab: ExecutionWorkspaceTab = "configuration";
+    try {
+      const storedTab = localStorage.getItem(`paperclip:execution-workspace-tab:${workspaceId}`);
+      if (storedTab === "issues" || storedTab === "configuration") {
+        cachedTab = storedTab;
+      }
+    } catch {}
+    return <Navigate to={`/execution-workspaces/${workspaceId}/${cachedTab}`} replace />;
+  }
+
+  const handleTabChange = (tab: ExecutionWorkspaceTab) => {
+    try {
+      localStorage.setItem(`paperclip:execution-workspace-tab:${workspace.id}`, tab);
+    } catch {}
+    navigate(`/execution-workspaces/${workspace.id}/${tab}`);
+  };
+
   const saveChanges = () => {
     const validationError = validateForm(form);
     if (validationError) {
@@ -393,468 +500,451 @@ export function ExecutionWorkspaceDetail() {
           </StatusPill>
         </div>
 
-        <div className="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
-          <div className="min-w-0 space-y-4 sm:space-y-6">
-            <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-              <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
-                <div className="min-w-0 space-y-2">
+        <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+          <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+            <div className="min-w-0 space-y-2">
+              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                Execution workspace
+              </div>
+              <h1 className="truncate text-xl font-semibold sm:text-2xl">{workspace.name}</h1>
+              <p className="max-w-2xl text-sm text-muted-foreground">
+                Configure the concrete runtime workspace that Paperclip reuses for this issue flow.
+                <span className="hidden sm:inline"> These settings stay attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown, and runtime-service behavior in sync with the actual workspace being reused.</span>
+              </p>
+            </div>
+            <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
+              <Button
+                variant="outline"
+                className="w-full sm:w-auto"
+                onClick={() => setCloseDialogOpen(true)}
+                disabled={workspace.status === "archived"}
+              >
+                {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Tabs value={activeTab ?? "configuration"} onValueChange={(value) => handleTabChange(value as ExecutionWorkspaceTab)}>
+          <PageTabBar
+            items={[
+              { value: "configuration", label: "Configuration" },
+              { value: "issues", label: "Issues" },
+            ]}
+            align="start"
+            value={activeTab ?? "configuration"}
+            onValueChange={(value) => handleTabChange(value as ExecutionWorkspaceTab)}
+          />
+        </Tabs>
+
+        {activeTab === "configuration" ? (
+          <div className="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
+            <div className="min-w-0 space-y-4 sm:space-y-6">
+              <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+                <div className="space-y-1">
                   <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                    Execution workspace
+                    Configuration
                   </div>
-                  <h1 className="truncate text-xl font-semibold sm:text-2xl">{workspace.name}</h1>
-                  <p className="max-w-2xl text-sm text-muted-foreground">
-                    Configure the concrete runtime workspace that Paperclip reuses for this issue flow.
-                    <span className="hidden sm:inline"> These settings stay
-                    attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown,
-                    and runtime-service behavior in sync with the actual workspace being reused.</span>
+                  <h2 className="text-lg font-semibold">Workspace settings</h2>
+                  <p className="text-sm text-muted-foreground">
+                    Edit the concrete path, repo, branch, provisioning, teardown, and runtime overrides attached to this execution workspace.
                   </p>
                 </div>
-                <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
+
+                <Separator className="my-5" />
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field label="Workspace name">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
+                      value={form.name}
+                      onChange={(event) => setForm((current) => current ? { ...current, name: event.target.value } : current)}
+                      placeholder="Execution workspace name"
+                    />
+                  </Field>
+                  <Field label="Branch name" hint="Useful for isolated worktrees">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                      value={form.branchName}
+                      onChange={(event) => setForm((current) => current ? { ...current, branchName: event.target.value } : current)}
+                      placeholder="PAP-946-workspace"
+                    />
+                  </Field>
+                </div>
+
+                <div className="mt-4 grid gap-4 md:grid-cols-2">
+                  <Field label="Working directory">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                      value={form.cwd}
+                      onChange={(event) => setForm((current) => current ? { ...current, cwd: event.target.value } : current)}
+                      placeholder="/absolute/path/to/workspace"
+                    />
+                  </Field>
+                  <Field label="Provider path / ref">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                      value={form.providerRef}
+                      onChange={(event) => setForm((current) => current ? { ...current, providerRef: event.target.value } : current)}
+                      placeholder="/path/to/worktree or provider ref"
+                    />
+                  </Field>
+                </div>
+
+                <div className="mt-4 grid gap-4 md:grid-cols-2">
+                  <Field label="Repo URL">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
+                      value={form.repoUrl}
+                      onChange={(event) => setForm((current) => current ? { ...current, repoUrl: event.target.value } : current)}
+                      placeholder="https://github.com/org/repo"
+                    />
+                  </Field>
+                  <Field label="Base ref">
+                    <input
+                      className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
+                      value={form.baseRef}
+                      onChange={(event) => setForm((current) => current ? { ...current, baseRef: event.target.value } : current)}
+                      placeholder="origin/main"
+                    />
+                  </Field>
+                </div>
+
+                <div className="mt-4 grid gap-4 md:grid-cols-2">
+                  <Field label="Provision command" hint="Runs when Paperclip prepares this execution workspace">
+                    <textarea
+                      className="min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-28"
+                      value={form.provisionCommand}
+                      onChange={(event) => setForm((current) => current ? { ...current, provisionCommand: event.target.value } : current)}
+                      placeholder="bash ./scripts/provision-worktree.sh"
+                    />
+                  </Field>
+                  <Field label="Teardown command" hint="Runs when the execution workspace is archived or cleaned up">
+                    <textarea
+                      className="min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-28"
+                      value={form.teardownCommand}
+                      onChange={(event) => setForm((current) => current ? { ...current, teardownCommand: event.target.value } : current)}
+                      placeholder="bash ./scripts/teardown-worktree.sh"
+                    />
+                  </Field>
+                </div>
+
+                <div className="mt-4 grid gap-4">
+                  <Field label="Cleanup command" hint="Workspace-specific cleanup before teardown">
+                    <textarea
+                      className="min-h-16 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-24"
+                      value={form.cleanupCommand}
+                      onChange={(event) => setForm((current) => current ? { ...current, cleanupCommand: event.target.value } : current)}
+                      placeholder="pkill -f vite || true"
+                    />
+                  </Field>
+
+                  <div className="rounded-xl border border-dashed border-border/70 bg-muted/20 px-3 py-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
+                      <div>
+                        <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                          Runtime config source
+                        </div>
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          {runtimeConfigSource === "execution_workspace"
+                            ? "This execution workspace currently overrides the project workspace runtime config."
+                            : runtimeConfigSource === "project_workspace"
+                              ? "This execution workspace is inheriting the project workspace runtime config."
+                              : "No runtime config is currently defined on this execution workspace or its project workspace."}
+                        </p>
+                      </div>
+                      <Button
+                        variant="outline"
+                        className="w-full sm:w-auto"
+                        size="sm"
+                        disabled={!linkedProjectWorkspace?.runtimeConfig?.workspaceRuntime}
+                        onClick={() =>
+                          setForm((current) => current ? {
+                            ...current,
+                            inheritRuntime: true,
+                            workspaceRuntime: "",
+                          } : current)
+                        }
+                      >
+                        Reset to inherit
+                      </Button>
+                    </div>
+                  </div>
+
+                  <Field label="Runtime services JSON" hint="Concrete workspace runtime settings for this execution workspace. Leave this inheriting unless you need a one-off override. If you are missing the right commands, ask your CEO to set them up for you.">
+                    <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+                      <input
+                        id="inherit-runtime-config"
+                        type="checkbox"
+                        checked={form.inheritRuntime}
+                        onChange={(event) => {
+                          const checked = event.target.checked;
+                          setForm((current) => {
+                            if (!current) return current;
+                            if (!checked && !current.workspaceRuntime.trim() && inheritedRuntimeConfig) {
+                              return { ...current, inheritRuntime: checked, workspaceRuntime: formatJson(inheritedRuntimeConfig) };
+                            }
+                            return { ...current, inheritRuntime: checked };
+                          });
+                        }}
+                      />
+                      <label htmlFor="inherit-runtime-config">Inherit project workspace runtime config</label>
+                    </div>
+                    <textarea
+                      className="min-h-32 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-48"
+                      value={form.workspaceRuntime}
+                      onChange={(event) => setForm((current) => current ? { ...current, workspaceRuntime: event.target.value } : current)}
+                      disabled={form.inheritRuntime}
+                      placeholder={'{\n  "services": [\n    {\n      "name": "web",\n      "command": "pnpm dev",\n      "port": 3100\n    }\n  ]\n}'}
+                    />
+                  </Field>
+                </div>
+
+                <div className="mt-5 flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+                  <Button className="w-full sm:w-auto" disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
+                    {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                    Save changes
+                  </Button>
                   <Button
                     variant="outline"
                     className="w-full sm:w-auto"
-                    onClick={() => setCloseDialogOpen(true)}
-                    disabled={workspace.status === "archived"}
+                    disabled={!isDirty || updateWorkspace.isPending}
+                    onClick={() => {
+                      setForm(initialState);
+                      setErrorMessage(null);
+                      setRuntimeActionMessage(null);
+                    }}
                   >
-                    {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
+                    Reset
                   </Button>
+                  {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
+                  {!errorMessage && runtimeActionMessage ? <p className="text-sm text-muted-foreground">{runtimeActionMessage}</p> : null}
+                  {!errorMessage && !isDirty ? <p className="text-sm text-muted-foreground">No unsaved changes.</p> : null}
                 </div>
               </div>
+            </div>
 
-              <Separator className="my-5" />
-
-              <div className="grid gap-4 md:grid-cols-2">
-                <Field label="Workspace name">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
-                    value={form.name}
-                    onChange={(event) => setForm((current) => current ? { ...current, name: event.target.value } : current)}
-                    placeholder="Execution workspace name"
-                  />
-                </Field>
-                <Field label="Branch name" hint="Useful for isolated worktrees">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                    value={form.branchName}
-                    onChange={(event) => setForm((current) => current ? { ...current, branchName: event.target.value } : current)}
-                    placeholder="PAP-946-workspace"
-                  />
-                </Field>
+            <div className="min-w-0 space-y-4 sm:space-y-6">
+              <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+                <div className="space-y-1">
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
+                  <h2 className="text-lg font-semibold">Workspace context</h2>
+                </div>
+                <Separator className="my-4" />
+                <DetailRow label="Project">
+                  {project ? <Link to={`/projects/${projectRef}`} className="hover:underline">{project.name}</Link> : <MonoValue value={workspace.projectId} />}
+                </DetailRow>
+                <DetailRow label="Project workspace">
+                  {project && linkedProjectWorkspace ? (
+                    <WorkspaceLink project={project} workspace={linkedProjectWorkspace} />
+                  ) : workspace.projectWorkspaceId ? (
+                    <MonoValue value={workspace.projectWorkspaceId} />
+                  ) : (
+                    "None"
+                  )}
+                </DetailRow>
+                <DetailRow label="Source issue">
+                  {sourceIssue ? (
+                    <Link to={issueUrl(sourceIssue)} className="hover:underline">
+                      {sourceIssue.identifier ?? sourceIssue.id} · {sourceIssue.title}
+                    </Link>
+                  ) : workspace.sourceIssueId ? (
+                    <MonoValue value={workspace.sourceIssueId} />
+                  ) : (
+                    "None"
+                  )}
+                </DetailRow>
+                <DetailRow label="Derived from">
+                  {derivedWorkspace ? (
+                    <Link to={`/execution-workspaces/${derivedWorkspace.id}/configuration`} className="hover:underline">
+                      {derivedWorkspace.name}
+                    </Link>
+                  ) : workspace.derivedFromExecutionWorkspaceId ? (
+                    <MonoValue value={workspace.derivedFromExecutionWorkspaceId} />
+                  ) : (
+                    "None"
+                  )}
+                </DetailRow>
+                <DetailRow label="Workspace ID">
+                  <MonoValue value={workspace.id} />
+                </DetailRow>
               </div>
 
-              <div className="mt-4 grid gap-4 md:grid-cols-2">
-                <Field label="Working directory">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                    value={form.cwd}
-                    onChange={(event) => setForm((current) => current ? { ...current, cwd: event.target.value } : current)}
-                    placeholder="/absolute/path/to/workspace"
-                  />
-                </Field>
-                <Field label="Provider path / ref">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                    value={form.providerRef}
-                    onChange={(event) => setForm((current) => current ? { ...current, providerRef: event.target.value } : current)}
-                    placeholder="/path/to/worktree or provider ref"
-                  />
-                </Field>
-              </div>
-
-              <div className="mt-4 grid gap-4 md:grid-cols-2">
-                <Field label="Repo URL">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none"
-                    value={form.repoUrl}
-                    onChange={(event) => setForm((current) => current ? { ...current, repoUrl: event.target.value } : current)}
-                    placeholder="https://github.com/org/repo"
-                  />
-                </Field>
-                <Field label="Base ref">
-                  <input
-                    className="w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none"
-                    value={form.baseRef}
-                    onChange={(event) => setForm((current) => current ? { ...current, baseRef: event.target.value } : current)}
-                    placeholder="origin/main"
-                  />
-                </Field>
-              </div>
-
-              <div className="mt-4 grid gap-4 md:grid-cols-2">
-                <Field label="Provision command" hint="Runs when Paperclip prepares this execution workspace">
-                  <textarea
-                    className="min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-28"
-                    value={form.provisionCommand}
-                    onChange={(event) => setForm((current) => current ? { ...current, provisionCommand: event.target.value } : current)}
-                    placeholder="bash ./scripts/provision-worktree.sh"
-                  />
-                </Field>
-                <Field label="Teardown command" hint="Runs when the execution workspace is archived or cleaned up">
-                  <textarea
-                    className="min-h-20 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-28"
-                    value={form.teardownCommand}
-                    onChange={(event) => setForm((current) => current ? { ...current, teardownCommand: event.target.value } : current)}
-                    placeholder="bash ./scripts/teardown-worktree.sh"
-                  />
-                </Field>
-              </div>
-
-              <div className="mt-4 grid gap-4">
-                <Field label="Cleanup command" hint="Workspace-specific cleanup before teardown">
-                  <textarea
-                    className="min-h-16 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none sm:min-h-24"
-                    value={form.cleanupCommand}
-                    onChange={(event) => setForm((current) => current ? { ...current, cleanupCommand: event.target.value } : current)}
-                    placeholder="pkill -f vite || true"
-                  />
-                </Field>
-
-                <div className="rounded-xl border border-dashed border-border/70 bg-muted/20 px-3 py-3">
-                  <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
-                    <div>
-                      <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                        Runtime config source
-                      </div>
-                      <p className="mt-1 text-sm text-muted-foreground">
-                        {runtimeConfigSource === "execution_workspace"
-                          ? "This execution workspace currently overrides the project workspace runtime config."
-                          : runtimeConfigSource === "project_workspace"
-                            ? "This execution workspace is inheriting the project workspace runtime config."
-                            : "No runtime config is currently defined on this execution workspace or its project workspace."}
-                      </p>
+              <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+                <div className="space-y-1">
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
+                  <h2 className="text-lg font-semibold">Concrete location</h2>
+                </div>
+                <Separator className="my-4" />
+                <DetailRow label="Working dir">
+                  {workspace.cwd ? <MonoValue value={workspace.cwd} copy /> : "None"}
+                </DetailRow>
+                <DetailRow label="Provider ref">
+                  {workspace.providerRef ? <MonoValue value={workspace.providerRef} copy /> : "None"}
+                </DetailRow>
+                <DetailRow label="Repo URL">
+                  {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
+                    <div className="inline-flex max-w-full items-start gap-2">
+                      <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex min-w-0 items-center gap-1 break-all hover:underline">
+                        {workspace.repoUrl}
+                        <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                      </a>
+                      <CopyText text={workspace.repoUrl} className="shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Copied">
+                        <Copy className="h-3.5 w-3.5" />
+                      </CopyText>
                     </div>
+                  ) : workspace.repoUrl ? (
+                    <MonoValue value={workspace.repoUrl} copy />
+                  ) : (
+                    "None"
+                  )}
+                </DetailRow>
+                <DetailRow label="Base ref">
+                  {workspace.baseRef ? <MonoValue value={workspace.baseRef} copy /> : "None"}
+                </DetailRow>
+                <DetailRow label="Branch">
+                  {workspace.branchName ? <MonoValue value={workspace.branchName} copy /> : "None"}
+                </DetailRow>
+                <DetailRow label="Opened">{formatDateTime(workspace.openedAt)}</DetailRow>
+                <DetailRow label="Last used">{formatDateTime(workspace.lastUsedAt)}</DetailRow>
+                <DetailRow label="Cleanup">
+                  {workspace.cleanupEligibleAt
+                    ? `${formatDateTime(workspace.cleanupEligibleAt)}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}`
+                    : "Not scheduled"}
+                </DetailRow>
+              </div>
+
+              <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
+                    <h2 className="text-lg font-semibold">Attached services</h2>
+                    <p className="text-sm text-muted-foreground">
+                      Source: {runtimeConfigSource === "execution_workspace"
+                        ? "execution workspace override"
+                        : runtimeConfigSource === "project_workspace"
+                          ? "project workspace default"
+                          : "none"}
+                    </p>
+                  </div>
+                  <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
                     <Button
                       variant="outline"
-                      className="w-full sm:w-auto"
                       size="sm"
-                      disabled={!linkedProjectWorkspace?.runtimeConfig?.workspaceRuntime}
-                      onClick={() =>
-                        setForm((current) => current ? {
-                          ...current,
-                          inheritRuntime: true,
-                          workspaceRuntime: "",
-                        } : current)
-                      }
+                      className="w-full sm:w-auto"
+                      disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
+                      onClick={() => controlRuntimeServices.mutate("start")}
                     >
-                      Reset to inherit
+                      {controlRuntimeServices.isPending ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
+                      Start
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full sm:w-auto"
+                      disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
+                      onClick={() => controlRuntimeServices.mutate("restart")}
+                    >
+                      Restart
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full sm:w-auto"
+                      disabled={controlRuntimeServices.isPending || !hasActiveRuntimeServices(workspace)}
+                      onClick={() => controlRuntimeServices.mutate("stop")}
+                    >
+                      Stop
                     </Button>
                   </div>
                 </div>
-
-                <Field label="Runtime services JSON" hint="Concrete workspace runtime settings for this execution workspace. Leave this inheriting unless you need a one-off override. If you are missing the right commands, ask your CEO to set them up for you.">
-                  <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
-                    <input
-                      id="inherit-runtime-config"
-                      type="checkbox"
-                      checked={form.inheritRuntime}
-                      onChange={(event) => {
-                        const checked = event.target.checked;
-                        setForm((current) => {
-                          if (!current) return current;
-                          // When unchecking "inherit" and the field is empty, copy inherited config as a starting point
-                          if (!checked && !current.workspaceRuntime.trim() && inheritedRuntimeConfig) {
-                            return { ...current, inheritRuntime: checked, workspaceRuntime: formatJson(inheritedRuntimeConfig) };
-                          }
-                          return { ...current, inheritRuntime: checked };
-                        });
-                      }}
-                    />
-                    <label htmlFor="inherit-runtime-config">Inherit project workspace runtime config</label>
+                <Separator className="my-4" />
+                {workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
+                  <div className="space-y-3">
+                    {workspace.runtimeServices.map((service) => (
+                      <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                          <div className="space-y-1">
+                            <div className="text-sm font-medium">{service.serviceName}</div>
+                            <div className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</div>
+                            <div className="space-y-1 text-xs text-muted-foreground">
+                              {service.url ? (
+                                <a href={service.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
+                                  {service.url}
+                                  <ExternalLink className="h-3.5 w-3.5" />
+                                </a>
+                              ) : null}
+                              {service.port ? <div>Port {service.port}</div> : null}
+                              {service.command ? <MonoValue value={service.command} copy /> : null}
+                              {service.cwd ? <MonoValue value={service.cwd} copy /> : null}
+                            </div>
+                          </div>
+                          <StatusPill className="self-start">{service.healthStatus}</StatusPill>
+                        </div>
+                      </div>
+                    ))}
                   </div>
-                  <textarea
-                    className="min-h-32 w-full rounded-lg border border-border bg-background px-3 py-2 font-mono text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-48"
-                    value={form.workspaceRuntime}
-                    onChange={(event) => setForm((current) => current ? { ...current, workspaceRuntime: event.target.value } : current)}
-                    disabled={form.inheritRuntime}
-                    placeholder={'{\n  "services": [\n    {\n      "name": "web",\n      "command": "pnpm dev",\n      "port": 3100\n    }\n  ]\n}'}
-                  />
-                </Field>
-              </div>
-
-              <div className="mt-5 flex flex-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center">
-                <Button className="w-full sm:w-auto" disabled={!isDirty || updateWorkspace.isPending} onClick={saveChanges}>
-                  {updateWorkspace.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-                  Save changes
-                </Button>
-                <Button
-                  variant="outline"
-                  className="w-full sm:w-auto"
-                  disabled={!isDirty || updateWorkspace.isPending}
-                  onClick={() => {
-                    setForm(initialState);
-                    setErrorMessage(null);
-                    setRuntimeActionMessage(null);
-                  }}
-                >
-                  Reset
-                </Button>
-                {errorMessage ? <p className="text-sm text-destructive">{errorMessage}</p> : null}
-                {!errorMessage && runtimeActionMessage ? <p className="text-sm text-muted-foreground">{runtimeActionMessage}</p> : null}
-                {!errorMessage && !isDirty ? <p className="text-sm text-muted-foreground">No unsaved changes.</p> : null}
-              </div>
-            </div>
-          </div>
-
-          <div className="min-w-0 space-y-4 sm:space-y-6">
-            <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-              <div className="space-y-1">
-                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked objects</div>
-                <h2 className="text-lg font-semibold">Workspace context</h2>
-              </div>
-              <Separator className="my-4" />
-              <DetailRow label="Project">
-                {project ? <Link to={`/projects/${projectRef}`} className="hover:underline">{project.name}</Link> : <MonoValue value={workspace.projectId} />}
-              </DetailRow>
-              <DetailRow label="Project workspace">
-                {project && linkedProjectWorkspace ? (
-                  <WorkspaceLink project={project} workspace={linkedProjectWorkspace} />
-                ) : workspace.projectWorkspaceId ? (
-                  <MonoValue value={workspace.projectWorkspaceId} />
                 ) : (
-                  "None"
-                )}
-              </DetailRow>
-              <DetailRow label="Source issue">
-                {sourceIssue ? (
-                  <Link to={issueUrl(sourceIssue)} className="hover:underline">
-                    {sourceIssue.identifier ?? sourceIssue.id} · {sourceIssue.title}
-                  </Link>
-                ) : workspace.sourceIssueId ? (
-                  <MonoValue value={workspace.sourceIssueId} />
-                ) : (
-                  "None"
-                )}
-              </DetailRow>
-              <DetailRow label="Derived from">
-                {derivedWorkspace ? (
-                  <Link to={`/execution-workspaces/${derivedWorkspace.id}`} className="hover:underline">
-                    {derivedWorkspace.name}
-                  </Link>
-                ) : workspace.derivedFromExecutionWorkspaceId ? (
-                  <MonoValue value={workspace.derivedFromExecutionWorkspaceId} />
-                ) : (
-                  "None"
-                )}
-              </DetailRow>
-              <DetailRow label="Workspace ID">
-                <MonoValue value={workspace.id} />
-              </DetailRow>
-            </div>
-
-            <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-              <div className="space-y-1">
-                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Paths and refs</div>
-                <h2 className="text-lg font-semibold">Concrete location</h2>
-              </div>
-              <Separator className="my-4" />
-              <DetailRow label="Working dir">
-                {workspace.cwd ? <MonoValue value={workspace.cwd} copy /> : "None"}
-              </DetailRow>
-              <DetailRow label="Provider ref">
-                {workspace.providerRef ? <MonoValue value={workspace.providerRef} copy /> : "None"}
-              </DetailRow>
-              <DetailRow label="Repo URL">
-                {workspace.repoUrl && isSafeExternalUrl(workspace.repoUrl) ? (
-                  <div className="inline-flex max-w-full items-start gap-2">
-                    <a href={workspace.repoUrl} target="_blank" rel="noreferrer" className="inline-flex min-w-0 items-center gap-1 break-all hover:underline">
-                      {workspace.repoUrl}
-                      <ExternalLink className="h-3.5 w-3.5 shrink-0" />
-                    </a>
-                    <CopyText text={workspace.repoUrl} className="shrink-0 text-muted-foreground hover:text-foreground" copiedLabel="Copied">
-                      <Copy className="h-3.5 w-3.5" />
-                    </CopyText>
-                  </div>
-                ) : workspace.repoUrl ? (
-                  <MonoValue value={workspace.repoUrl} copy />
-                ) : (
-                  "None"
-                )}
-              </DetailRow>
-              <DetailRow label="Base ref">
-                {workspace.baseRef ? <MonoValue value={workspace.baseRef} copy /> : "None"}
-              </DetailRow>
-              <DetailRow label="Branch">
-                {workspace.branchName ? <MonoValue value={workspace.branchName} copy /> : "None"}
-              </DetailRow>
-              <DetailRow label="Opened">{formatDateTime(workspace.openedAt)}</DetailRow>
-              <DetailRow label="Last used">{formatDateTime(workspace.lastUsedAt)}</DetailRow>
-              <DetailRow label="Cleanup">
-                {workspace.cleanupEligibleAt
-                  ? `${formatDateTime(workspace.cleanupEligibleAt)}${workspace.cleanupReason ? ` · ${workspace.cleanupReason}` : ""}`
-                  : "Not scheduled"}
-              </DetailRow>
-            </div>
-
-            <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                <div className="space-y-1">
-                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Runtime services</div>
-                  <h2 className="text-lg font-semibold">Attached services</h2>
                   <p className="text-sm text-muted-foreground">
-                    Source: {runtimeConfigSource === "execution_workspace"
-                      ? "execution workspace override"
-                      : runtimeConfigSource === "project_workspace"
-                        ? "project workspace default"
-                        : "none"}
+                    {effectiveRuntimeConfig
+                      ? "No runtime services are currently running for this execution workspace."
+                      : "No runtime config is defined for this execution workspace yet."}
                   </p>
-                </div>
-                <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-full sm:w-auto"
-                    disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
-                    onClick={() => controlRuntimeServices.mutate("start")}
-                  >
-                    {controlRuntimeServices.isPending ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
-                    Start
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-full sm:w-auto"
-                    disabled={controlRuntimeServices.isPending || !effectiveRuntimeConfig || !workspace.cwd}
-                    onClick={() => controlRuntimeServices.mutate("restart")}
-                  >
-                    Restart
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="w-full sm:w-auto"
-                    disabled={controlRuntimeServices.isPending || !hasActiveRuntimeServices(workspace)}
-                    onClick={() => controlRuntimeServices.mutate("stop")}
-                  >
-                    Stop
-                  </Button>
-                </div>
+                )}
               </div>
-              <Separator className="my-4" />
-              {workspace.runtimeServices && workspace.runtimeServices.length > 0 ? (
-                <div className="space-y-3">
-                  {workspace.runtimeServices.map((service) => (
-                    <div key={service.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
-                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                        <div className="space-y-1">
-                          <div className="text-sm font-medium">{service.serviceName}</div>
-                          <div className="text-xs text-muted-foreground">{service.status} · {service.lifecycle}</div>
-                          <div className="space-y-1 text-xs text-muted-foreground">
-                            {service.url ? (
-                              <a href={service.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 hover:underline">
-                                {service.url}
-                                <ExternalLink className="h-3.5 w-3.5" />
-                              </a>
+
+              <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
+                <div className="space-y-1">
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Recent operations</div>
+                  <h2 className="text-lg font-semibold">Runtime and cleanup logs</h2>
+                </div>
+                <Separator className="my-4" />
+                {workspaceOperationsQuery.isLoading ? (
+                  <p className="text-sm text-muted-foreground">Loading workspace operations…</p>
+                ) : workspaceOperationsQuery.error ? (
+                  <p className="text-sm text-destructive">
+                    {workspaceOperationsQuery.error instanceof Error
+                      ? workspaceOperationsQuery.error.message
+                      : "Failed to load workspace operations."}
+                  </p>
+                ) : workspaceOperationsQuery.data && workspaceOperationsQuery.data.length > 0 ? (
+                  <div className="space-y-3">
+                    {workspaceOperationsQuery.data.slice(0, 6).map((operation) => (
+                      <div key={operation.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                          <div className="space-y-1">
+                            <div className="text-sm font-medium">{operation.command ?? operation.phase}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {formatDateTime(operation.startedAt)}
+                              {operation.finishedAt ? ` → ${formatDateTime(operation.finishedAt)}` : ""}
+                            </div>
+                            {operation.stderrExcerpt ? (
+                              <div className="whitespace-pre-wrap break-words text-xs text-destructive">{operation.stderrExcerpt}</div>
+                            ) : operation.stdoutExcerpt ? (
+                              <div className="whitespace-pre-wrap break-words text-xs text-muted-foreground">{operation.stdoutExcerpt}</div>
                             ) : null}
-                            {service.port ? <div>Port {service.port}</div> : null}
-                            {service.command ? <MonoValue value={service.command} copy /> : null}
-                            {service.cwd ? <MonoValue value={service.cwd} copy /> : null}
                           </div>
+                          <StatusPill className="self-start">{operation.status}</StatusPill>
                         </div>
-                        <StatusPill className="self-start">{service.healthStatus}</StatusPill>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  {effectiveRuntimeConfig
-                    ? "No runtime services are currently running for this execution workspace."
-                    : "No runtime config is defined for this execution workspace yet."}
-                </p>
-              )}
-            </div>
-
-            <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-              <div className="space-y-1">
-                <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Recent operations</div>
-                <h2 className="text-lg font-semibold">Runtime and cleanup logs</h2>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">No workspace operations have been recorded yet.</p>
+                )}
               </div>
-              <Separator className="my-4" />
-              {workspaceOperationsQuery.isLoading ? (
-                <p className="text-sm text-muted-foreground">Loading workspace operations…</p>
-              ) : workspaceOperationsQuery.error ? (
-                <p className="text-sm text-destructive">
-                  {workspaceOperationsQuery.error instanceof Error
-                    ? workspaceOperationsQuery.error.message
-                    : "Failed to load workspace operations."}
-                </p>
-              ) : workspaceOperationsQuery.data && workspaceOperationsQuery.data.length > 0 ? (
-                <div className="space-y-3">
-                  {workspaceOperationsQuery.data.slice(0, 6).map((operation) => (
-                    <div key={operation.id} className="rounded-xl border border-border/80 bg-background px-3 py-2">
-                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                        <div className="space-y-1">
-                          <div className="text-sm font-medium">{operation.command ?? operation.phase}</div>
-                          <div className="text-xs text-muted-foreground">
-                            {formatDateTime(operation.startedAt)}
-                            {operation.finishedAt ? ` → ${formatDateTime(operation.finishedAt)}` : ""}
-                          </div>
-                          {operation.stderrExcerpt ? (
-                            <div className="whitespace-pre-wrap break-words text-xs text-destructive">{operation.stderrExcerpt}</div>
-                          ) : operation.stdoutExcerpt ? (
-                            <div className="whitespace-pre-wrap break-words text-xs text-muted-foreground">{operation.stdoutExcerpt}</div>
-                          ) : null}
-                        </div>
-                        <StatusPill className="self-start">{operation.status}</StatusPill>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-sm text-muted-foreground">No workspace operations have been recorded yet.</p>
-              )}
             </div>
           </div>
-        </div>
-
-        <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
-            <div className="space-y-1">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Linked issues</div>
-              <h2 className="text-lg font-semibold">Issues using this workspace</h2>
-              <p className="text-sm text-muted-foreground">
-                Any issue attached to this execution workspace appears here so you can review the full session context before reusing or closing it.
-              </p>
-            </div>
-            <StatusPill>{linkedIssues.length} linked</StatusPill>
-          </div>
-          <Separator className="my-4" />
-          {linkedIssuesQuery.isLoading ? (
-            <p className="text-sm text-muted-foreground">Loading linked issues…</p>
-          ) : linkedIssuesQuery.error ? (
-            <p className="text-sm text-destructive">
-              {linkedIssuesQuery.error instanceof Error
-                ? linkedIssuesQuery.error.message
-                : "Failed to load linked issues."}
-            </p>
-          ) : linkedIssues.length > 0 ? (
-            <div className="-mx-1 flex flex-col gap-3 px-1 pb-1 sm:flex-row sm:overflow-x-auto">
-              {linkedIssues.map((issue) => (
-                <Link
-                  key={issue.id}
-                  to={issueUrl(issue)}
-                  className="rounded-xl border border-border/80 bg-background px-4 py-3 transition-colors hover:bg-accent/20 sm:min-w-72"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0 space-y-1">
-                      <div className="font-mono text-xs text-muted-foreground">
-                        {issue.identifier ?? issue.id.slice(0, 8)}
-                      </div>
-                      <div className="line-clamp-2 text-sm font-medium">{issue.title}</div>
-                    </div>
-                    <StatusPill className="shrink-0">{issue.status}</StatusPill>
-                  </div>
-                  <div className="mt-3 flex items-center justify-between gap-3 text-xs text-muted-foreground">
-                    <span className="uppercase tracking-[0.16em]">{issue.priority}</span>
-                    <span>{formatDateTime(issue.updatedAt)}</span>
-                  </div>
-                </Link>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No issues are currently linked to this execution workspace.</p>
-          )}
-        </div>
+        ) : (
+          <ExecutionWorkspaceIssuesList
+            companyId={workspace.companyId}
+            workspaceId={workspace.id}
+            issues={linkedIssues}
+            isLoading={linkedIssuesQuery.isLoading}
+            error={linkedIssuesQuery.error as Error | null}
+            project={project}
+          />
+        )}
       </div>
       <ExecutionWorkspaceCloseDialog
         workspaceId={workspace.id}

From ee82a4f2432ec865b3ad6648b8a3e898e91a5db6 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 16:45:57 -0500
Subject: [PATCH 04/45] Reuse inbox issue column controls in issues lists

---
 ui/src/components/IssueColumns.tsx    | 343 +++++++++++++++++++++++
 ui/src/components/IssuesList.test.tsx |  71 ++++-
 ui/src/components/IssuesList.tsx      | 387 ++++++++++++++++----------
 ui/src/pages/Inbox.tsx                | 322 ++-------------------
 ui/src/pages/ProjectDetail.tsx        |   6 +
 5 files changed, 680 insertions(+), 449 deletions(-)
 create mode 100644 ui/src/components/IssueColumns.tsx

diff --git a/ui/src/components/IssueColumns.tsx b/ui/src/components/IssueColumns.tsx
new file mode 100644
index 00000000..277b1e06
--- /dev/null
+++ b/ui/src/components/IssueColumns.tsx
@@ -0,0 +1,343 @@
+import type { ReactNode } from "react";
+import type { Issue } from "@paperclipai/shared";
+import { Columns3 } from "lucide-react";
+import { pickTextColorForPillBg } from "@/lib/color-contrast";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { formatAssigneeUserLabel } from "../lib/assignees";
+import type { InboxIssueColumn } from "../lib/inbox";
+import { cn } from "../lib/utils";
+import { timeAgo } from "../lib/timeAgo";
+import { Identity } from "./Identity";
+import { StatusIcon } from "./StatusIcon";
+
+export const issueTrailingColumns: InboxIssueColumn[] = ["assignee", "project", "workspace", "parent", "labels", "updated"];
+
+const issueColumnLabels: Record<InboxIssueColumn, string> = {
+  status: "Status",
+  id: "ID",
+  assignee: "Assignee",
+  project: "Project",
+  workspace: "Workspace",
+  parent: "Parent issue",
+  labels: "Tags",
+  updated: "Last updated",
+};
+
+const issueColumnDescriptions: Record<InboxIssueColumn, string> = {
+  status: "Issue state chip on the left edge.",
+  id: "Ticket identifier like PAP-1009.",
+  assignee: "Assigned agent or board user.",
+  project: "Linked project pill with its color.",
+  workspace: "Execution or project workspace used for the issue.",
+  parent: "Parent issue identifier and title.",
+  labels: "Issue labels and tags.",
+  updated: "Latest visible activity time.",
+};
+
+export function issueActivityText(issue: Issue): string {
+  return `Updated ${timeAgo(issue.lastActivityAt ?? issue.lastExternalCommentAt ?? issue.updatedAt)}`;
+}
+
+function issueTrailingGridTemplate(columns: InboxIssueColumn[]): string {
+  return columns
+    .map((column) => {
+      if (column === "assignee") return "minmax(7.5rem, 9.5rem)";
+      if (column === "project") return "minmax(6.5rem, 8.5rem)";
+      if (column === "workspace") return "minmax(9rem, 12rem)";
+      if (column === "parent") return "minmax(5rem, 7rem)";
+      if (column === "labels") return "minmax(8rem, 10rem)";
+      return "minmax(4rem, 5.5rem)";
+    })
+    .join(" ");
+}
+
+export function IssueColumnPicker({
+  availableColumns,
+  visibleColumnSet,
+  onToggleColumn,
+  onResetColumns,
+  title,
+}: {
+  availableColumns: InboxIssueColumn[];
+  visibleColumnSet: ReadonlySet<InboxIssueColumn>;
+  onToggleColumn: (column: InboxIssueColumn, enabled: boolean) => void;
+  onResetColumns: () => void;
+  title: string;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="hidden h-8 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground sm:inline-flex"
+        >
+          <Columns3 className="mr-1 h-3.5 w-3.5" />
+          Show / hide columns
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[300px] rounded-xl border-border/70 p-1.5 shadow-xl shadow-black/10">
+        <DropdownMenuLabel className="px-2 pb-1 pt-1.5">
+          <div className="space-y-1">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+              Desktop issue rows
+            </div>
+            <div className="text-sm font-medium text-foreground">
+              {title}
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {availableColumns.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={column}
+            checked={visibleColumnSet.has(column)}
+            onSelect={(event) => event.preventDefault()}
+            onCheckedChange={(checked) => onToggleColumn(column, checked === true)}
+            className="items-start rounded-lg px-3 py-2.5 pl-8"
+          >
+            <span className="flex flex-col gap-0.5">
+              <span className="text-sm font-medium text-foreground">
+                {issueColumnLabels[column]}
+              </span>
+              <span className="text-xs leading-relaxed text-muted-foreground">
+                {issueColumnDescriptions[column]}
+              </span>
+            </span>
+          </DropdownMenuCheckboxItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onSelect={onResetColumns}
+          className="rounded-lg px-3 py-2 text-sm"
+        >
+          Reset defaults
+          <span className="ml-auto text-xs text-muted-foreground">status, id, updated</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function InboxIssueMetaLeading({
+  issue,
+  isLive,
+  showStatus = true,
+  showIdentifier = true,
+  statusSlot,
+}: {
+  issue: Issue;
+  isLive: boolean;
+  showStatus?: boolean;
+  showIdentifier?: boolean;
+  statusSlot?: ReactNode;
+}) {
+  return (
+    <>
+      {showStatus ? (
+        <span className="hidden shrink-0 sm:inline-flex">
+          {statusSlot ?? <StatusIcon status={issue.status} />}
+        </span>
+      ) : null}
+      {showIdentifier ? (
+        <span className="shrink-0 font-mono text-xs text-muted-foreground">
+          {issue.identifier ?? issue.id.slice(0, 8)}
+        </span>
+      ) : null}
+      {isLive && (
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 sm:gap-1.5 sm:px-2",
+            "bg-blue-500/10",
+          )}
+        >
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-75" />
+            <span
+              className={cn(
+                "relative inline-flex h-2 w-2 rounded-full",
+                "bg-blue-500",
+              )}
+            />
+          </span>
+          <span
+            className={cn(
+              "hidden text-[11px] font-medium sm:inline",
+              "text-blue-600 dark:text-blue-400",
+            )}
+          >
+            Live
+          </span>
+        </span>
+      )}
+    </>
+  );
+}
+
+export function InboxIssueTrailingColumns({
+  issue,
+  columns,
+  projectName,
+  projectColor,
+  workspaceName,
+  assigneeName,
+  currentUserId,
+  parentIdentifier,
+  parentTitle,
+  assigneeContent,
+}: {
+  issue: Issue;
+  columns: InboxIssueColumn[];
+  projectName: string | null;
+  projectColor: string | null;
+  workspaceName: string | null;
+  assigneeName: string | null;
+  currentUserId: string | null;
+  parentIdentifier: string | null;
+  parentTitle: string | null;
+  assigneeContent?: ReactNode;
+}) {
+  const activityText = timeAgo(issue.lastActivityAt ?? issue.lastExternalCommentAt ?? issue.updatedAt);
+  const userLabel = formatAssigneeUserLabel(issue.assigneeUserId, currentUserId) ?? "User";
+
+  return (
+    <span
+      className="grid items-center gap-2"
+      style={{ gridTemplateColumns: issueTrailingGridTemplate(columns) }}
+    >
+      {columns.map((column) => {
+        if (column === "assignee") {
+          if (assigneeContent) {
+            return <span key={column} className="min-w-0">{assigneeContent}</span>;
+          }
+
+          if (issue.assigneeAgentId) {
+            return (
+              <span key={column} className="min-w-0 text-xs text-foreground">
+                <Identity
+                  name={assigneeName ?? issue.assigneeAgentId.slice(0, 8)}
+                  size="sm"
+                  className="min-w-0"
+                />
+              </span>
+            );
+          }
+
+          if (issue.assigneeUserId) {
+            return (
+              <span key={column} className="min-w-0 truncate text-xs font-medium text-muted-foreground">
+                {userLabel}
+              </span>
+            );
+          }
+
+          return (
+            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
+              Unassigned
+            </span>
+          );
+        }
+
+        if (column === "project") {
+          if (projectName) {
+            const accentColor = projectColor ?? "#64748b";
+            return (
+              <span
+                key={column}
+                className="inline-flex min-w-0 items-center gap-2 text-xs font-medium"
+                style={{ color: pickTextColorForPillBg(accentColor, 0.12) }}
+              >
+                <span
+                  className="h-1.5 w-1.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: accentColor }}
+                />
+                <span className="truncate">{projectName}</span>
+              </span>
+            );
+          }
+
+          return (
+            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
+              No project
+            </span>
+          );
+        }
+
+        if (column === "labels") {
+          if ((issue.labels ?? []).length > 0) {
+            return (
+              <span key={column} className="flex min-w-0 items-center gap-1 overflow-hidden text-[11px]">
+                {(issue.labels ?? []).slice(0, 2).map((label) => (
+                  <span
+                    key={label.id}
+                    className="inline-flex min-w-0 max-w-full items-center font-medium"
+                    style={{
+                      color: pickTextColorForPillBg(label.color, 0.12),
+                    }}
+                  >
+                    <span className="truncate">{label.name}</span>
+                  </span>
+                ))}
+                {(issue.labels ?? []).length > 2 ? (
+                  <span className="shrink-0 text-[11px] font-medium text-muted-foreground">
+                    +{(issue.labels ?? []).length - 2}
+                  </span>
+                ) : null}
+              </span>
+            );
+          }
+
+          return <span key={column} className="min-w-0" aria-hidden="true" />;
+        }
+
+        if (column === "workspace") {
+          if (!workspaceName) {
+            return <span key={column} className="min-w-0" aria-hidden="true" />;
+          }
+
+          return (
+            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
+              {workspaceName}
+            </span>
+          );
+        }
+
+        if (column === "parent") {
+          if (!issue.parentId) {
+            return <span key={column} className="min-w-0" aria-hidden="true" />;
+          }
+
+          return (
+            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground" title={parentTitle ?? undefined}>
+              {parentIdentifier ? (
+                <span className="font-mono">{parentIdentifier}</span>
+              ) : (
+                <span className="italic">Sub-issue</span>
+              )}
+            </span>
+          );
+        }
+
+        if (column === "updated") {
+          return (
+            <span key={column} className="min-w-0 truncate text-right text-[11px] font-medium text-muted-foreground">
+              {activityText}
+            </span>
+          );
+        }
+
+        return null;
+      })}
+    </span>
+  );
+}
diff --git a/ui/src/components/IssuesList.test.tsx b/ui/src/components/IssuesList.test.tsx
index 89b9e422..d20d81af 100644
--- a/ui/src/components/IssuesList.test.tsx
+++ b/ui/src/components/IssuesList.test.tsx
@@ -25,6 +25,14 @@ const mockAuthApi = vi.hoisted(() => ({
   getSession: vi.fn(),
 }));
 
+const mockExecutionWorkspacesApi = vi.hoisted(() => ({
+  list: vi.fn(),
+}));
+
+const mockInstanceSettingsApi = vi.hoisted(() => ({
+  getExperimental: vi.fn(),
+}));
+
 vi.mock("../context/CompanyContext", () => ({
   useCompany: () => companyState,
 }));
@@ -41,8 +49,30 @@ vi.mock("../api/auth", () => ({
   authApi: mockAuthApi,
 }));
 
+vi.mock("../api/execution-workspaces", () => ({
+  executionWorkspacesApi: mockExecutionWorkspacesApi,
+}));
+
+vi.mock("../api/instanceSettings", () => ({
+  instanceSettingsApi: mockInstanceSettingsApi,
+}));
+
 vi.mock("./IssueRow", () => ({
-  IssueRow: ({ issue }: { issue: Issue }) => <div data-testid="issue-row">{issue.title}</div>,
+  IssueRow: ({
+    issue,
+    desktopMetaLeading,
+    desktopTrailing,
+  }: {
+    issue: Issue;
+    desktopMetaLeading?: ReactNode;
+    desktopTrailing?: ReactNode;
+  }) => (
+    <div data-testid="issue-row">
+      <span>{issue.title}</span>
+      {desktopMetaLeading}
+      {desktopTrailing}
+    </div>
+  ),
 }));
 
 vi.mock("./KanbanBoard", () => ({
@@ -90,6 +120,7 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
     labelIds: [],
     myLastTouchAt: null,
     lastExternalCommentAt: null,
+    lastActivityAt: null,
     isUnreadForMe: false,
     ...overrides,
   };
@@ -148,9 +179,14 @@ describe("IssuesList", () => {
     mockIssuesApi.list.mockReset();
     mockIssuesApi.listLabels.mockReset();
     mockAuthApi.getSession.mockReset();
+    mockExecutionWorkspacesApi.list.mockReset();
+    mockInstanceSettingsApi.getExperimental.mockReset();
     mockIssuesApi.list.mockResolvedValue([]);
     mockIssuesApi.listLabels.mockResolvedValue([]);
     mockAuthApi.getSession.mockResolvedValue({ user: null, session: null });
+    mockExecutionWorkspacesApi.list.mockResolvedValue([]);
+    mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableIsolatedWorkspaces: false });
+    localStorage.clear();
   });
 
   afterEach(() => {
@@ -238,4 +274,37 @@ describe("IssuesList", () => {
       root.unmount();
     });
   });
+
+  it("reuses the inbox issue column controls and persisted column visibility", async () => {
+    localStorage.setItem("paperclip:inbox:issue-columns", JSON.stringify(["id", "assignee"]));
+
+    const assignedIssue = createIssue({
+      id: "issue-assigned",
+      identifier: "PAP-9",
+      title: "Assigned issue",
+      assigneeAgentId: "agent-1",
+    });
+
+    const { root } = renderWithQueryClient(
+      <IssuesList
+        issues={[assignedIssue]}
+        agents={[{ id: "agent-1", name: "Agent One" }]}
+        projects={[]}
+        viewStateKey="paperclip:test-issues"
+        onUpdateIssue={() => undefined}
+      />,
+      container,
+    );
+
+    await waitForAssertion(() => {
+      expect(container.textContent).toContain("Show / hide columns");
+      expect(container.textContent).toContain("PAP-9");
+      expect(container.textContent).toContain("Agent One");
+      expect(container.textContent).not.toContain("Updated");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 8814259d..198a1a16 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -1,15 +1,31 @@
 import { startTransition, useDeferredValue, useEffect, useMemo, useState, useCallback, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
+import { executionWorkspacesApi } from "../api/execution-workspaces";
 import { issuesApi } from "../api/issues";
 import { authApi } from "../api/auth";
+import { instanceSettingsApi } from "../api/instanceSettings";
 import { queryKeys } from "../lib/queryKeys";
 import { formatAssigneeUserLabel } from "../lib/assignees";
 import { groupBy } from "../lib/groupBy";
-import { formatDate, cn } from "../lib/utils";
-import { timeAgo } from "../lib/timeAgo";
+import {
+  DEFAULT_INBOX_ISSUE_COLUMNS,
+  getAvailableInboxIssueColumns,
+  loadInboxIssueColumns,
+  normalizeInboxIssueColumns,
+  resolveIssueWorkspaceName,
+  saveInboxIssueColumns,
+  type InboxIssueColumn,
+} from "../lib/inbox";
+import { cn } from "../lib/utils";
+import {
+  InboxIssueMetaLeading,
+  InboxIssueTrailingColumns,
+  IssueColumnPicker,
+  issueActivityText,
+  issueTrailingColumns,
+} from "./IssueColumns";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { EmptyState } from "./EmptyState";
@@ -24,7 +40,7 @@ import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/component
 import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User, Search } from "lucide-react";
 import { KanbanBoard } from "./KanbanBoard";
 import { buildIssueTree, countDescendants } from "../lib/issue-tree";
-import type { Issue } from "@paperclipai/shared";
+import type { Issue, Project } from "@paperclipai/shared";
 
 /* ── Helpers ── */
 
@@ -153,11 +169,7 @@ interface Agent {
   name: string;
 }
 
-interface ProjectOption {
-  id: string;
-  name: string;
-  workspaces?: { id: string; name: string }[];
-}
+type ProjectOption = Pick<Project, "id" | "name"> & Partial<Pick<Project, "color" | "workspaces" | "executionWorkspacePolicy" | "primaryWorkspace">>;
 
 interface IssuesListProps {
   issues: Issue[];
@@ -244,7 +256,13 @@ export function IssuesList({
     queryKey: queryKeys.auth.session,
     queryFn: () => authApi.getSession(),
   });
+  const { data: experimentalSettings } = useQuery({
+    queryKey: queryKeys.instance.experimentalSettings,
+    queryFn: () => instanceSettingsApi.getExperimental(),
+    retry: false,
+  });
   const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+  const isolatedWorkspacesEnabled = experimentalSettings?.enableIsolatedWorkspaces === true;
 
   // Scope the storage key per company so folding/view state is independent across companies.
   const scopedKey = selectedCompanyId ? `${viewStateKey}:${selectedCompanyId}` : viewStateKey;
@@ -258,6 +276,7 @@ export function IssuesList({
   const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
   const [assigneeSearch, setAssigneeSearch] = useState("");
   const [issueSearch, setIssueSearch] = useState(initialSearch ?? "");
+  const [visibleIssueColumns, setVisibleIssueColumns] = useState<InboxIssueColumn[]>(loadInboxIssueColumns);
   const deferredIssueSearch = useDeferredValue(issueSearch);
   const normalizedIssueSearch = deferredIssueSearch.trim().toLowerCase();
 
@@ -305,22 +324,95 @@ export function IssuesList({
     enabled: !!selectedCompanyId && normalizedIssueSearch.length > 0,
     placeholderData: (previousData) => previousData,
   });
+  const { data: executionWorkspaces = [] } = useQuery({
+    queryKey: selectedCompanyId
+      ? queryKeys.executionWorkspaces.list(selectedCompanyId)
+      : ["execution-workspaces", "__disabled__"],
+    queryFn: () => executionWorkspacesApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && isolatedWorkspacesEnabled,
+  });
 
   const agentName = useCallback((id: string | null) => {
     if (!id || !agents) return null;
     return agents.find((a) => a.id === id)?.name ?? null;
   }, [agents]);
 
-  const workspaceNameMap = useMemo(() => {
-    const map = new Map<string, string>();
+  const projectById = useMemo(() => {
+    const map = new Map<string, { name: string; color: string | null }>();
     for (const project of projects ?? []) {
-      for (const ws of project.workspaces ?? []) {
-        map.set(ws.id, ws.name || project.name);
+      map.set(project.id, { name: project.name, color: project.color ?? null });
+    }
+    return map;
+  }, [projects]);
+
+  const projectWorkspaceById = useMemo(() => {
+    const map = new Map<string, { name: string }>();
+    for (const project of projects ?? []) {
+      for (const workspace of project.workspaces ?? []) {
+        map.set(workspace.id, { name: workspace.name || project.name });
       }
     }
     return map;
   }, [projects]);
 
+  const defaultProjectWorkspaceIdByProjectId = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const project of projects ?? []) {
+      const defaultWorkspaceId =
+        project.executionWorkspacePolicy?.defaultProjectWorkspaceId
+        ?? project.primaryWorkspace?.id
+        ?? null;
+      if (defaultWorkspaceId) map.set(project.id, defaultWorkspaceId);
+    }
+    return map;
+  }, [projects]);
+
+  const executionWorkspaceById = useMemo(() => {
+    const map = new Map<string, {
+      name: string;
+      mode: "shared_workspace" | "isolated_workspace" | "operator_branch" | "adapter_managed" | "cloud_sandbox";
+      projectWorkspaceId: string | null;
+    }>();
+    for (const workspace of executionWorkspaces) {
+      map.set(workspace.id, {
+        name: workspace.name,
+        mode: workspace.mode,
+        projectWorkspaceId: workspace.projectWorkspaceId ?? null,
+      });
+    }
+    return map;
+  }, [executionWorkspaces]);
+
+  const workspaceNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const [workspaceId, workspace] of projectWorkspaceById) {
+      map.set(workspaceId, workspace.name);
+    }
+    for (const [workspaceId, workspace] of executionWorkspaceById) {
+      map.set(workspaceId, workspace.name);
+    }
+    return map;
+  }, [executionWorkspaceById, projectWorkspaceById]);
+
+  const visibleIssueColumnSet = useMemo(() => new Set(visibleIssueColumns), [visibleIssueColumns]);
+  const availableIssueColumns = useMemo(
+    () => getAvailableInboxIssueColumns(isolatedWorkspacesEnabled),
+    [isolatedWorkspacesEnabled],
+  );
+  const availableIssueColumnSet = useMemo(() => new Set(availableIssueColumns), [availableIssueColumns]);
+  const visibleTrailingIssueColumns = useMemo(
+    () => issueTrailingColumns.filter((column) => visibleIssueColumnSet.has(column) && availableIssueColumnSet.has(column)),
+    [availableIssueColumnSet, visibleIssueColumnSet],
+  );
+
+  const issueById = useMemo(() => {
+    const map = new Map<string, Issue>();
+    for (const issue of issues) {
+      map.set(issue.id, issue);
+    }
+    return map;
+  }, [issues]);
+
   const issueTitleMap = useMemo(() => {
     const map = new Map<string, string>();
     for (const issue of issues) {
@@ -423,6 +515,20 @@ export function IssuesList({
     return defaults;
   }, [projectId, viewState.groupBy]);
 
+  const setIssueColumns = useCallback((next: InboxIssueColumn[]) => {
+    const normalized = normalizeInboxIssueColumns(next);
+    setVisibleIssueColumns(normalized);
+    saveInboxIssueColumns(normalized);
+  }, []);
+
+  const toggleIssueColumn = useCallback((column: InboxIssueColumn, enabled: boolean) => {
+    if (enabled) {
+      setIssueColumns([...visibleIssueColumns, column]);
+      return;
+    }
+    setIssueColumns(visibleIssueColumns.filter((value) => value !== column));
+  }, [setIssueColumns, visibleIssueColumns]);
+
   const assignIssue = useCallback((issueId: string, assigneeAgentId: string | null, assigneeUserId: string | null = null) => {
     onUpdateIssue(issueId, { assigneeAgentId, assigneeUserId });
     setAssigneePickerIssueId(null);
@@ -467,6 +573,14 @@ export function IssuesList({
             </button>
           </div>
 
+          <IssueColumnPicker
+            availableColumns={availableIssueColumns}
+            visibleColumnSet={visibleIssueColumnSet}
+            onToggleColumn={toggleIssueColumn}
+            onResetColumns={() => setIssueColumns(DEFAULT_INBOX_ISSUE_COLUMNS)}
+            title="Choose which issue columns stay visible"
+          />
+
           {/* Filter */}
           <Popover>
             <PopoverTrigger asChild>
@@ -777,6 +891,8 @@ export function IssuesList({
                   const hasChildren = children.length > 0;
                   const totalDescendants = hasChildren ? countDescendants(issue.id, childMap) : 0;
                   const isExpanded = !viewState.collapsedParents.includes(issue.id);
+                  const issueProject = issue.projectId ? projectById.get(issue.projectId) ?? null : null;
+                  const parentIssue = issue.parentId ? issueById.get(issue.parentId) ?? null : null;
                   const toggleCollapse = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -821,154 +937,139 @@ export function IssuesList({
                             ) : (
                               <span className="hidden w-3.5 shrink-0 sm:block" />
                             )}
-                            <span
-                              className="hidden shrink-0 sm:inline-flex"
-                              onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
-                            >
-                              <StatusIcon status={issue.status} onChange={(s) => onUpdateIssue(issue.id, { status: s })} />
-                            </span>
-                            <span className="shrink-0 font-mono text-xs text-muted-foreground">
-                              {issue.identifier ?? issue.id.slice(0, 8)}
-                            </span>
-                            {liveIssueIds?.has(issue.id) && (
-                              <span className="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-1.5 py-0.5 sm:gap-1.5 sm:px-2">
-                                <span className="relative flex h-2 w-2">
-                                  <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-75" />
-                                  <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500" />
+                            <InboxIssueMetaLeading
+                              issue={issue}
+                              isLive={liveIssueIds?.has(issue.id) === true}
+                              showStatus={visibleIssueColumnSet.has("status") && availableIssueColumnSet.has("status")}
+                              showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
+                              statusSlot={(
+                                <span onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+                                  <StatusIcon status={issue.status} onChange={(s) => onUpdateIssue(issue.id, { status: s })} />
                                 </span>
-                                <span className="hidden text-[11px] font-medium text-blue-600 dark:text-blue-400 sm:inline">
-                                  Live
-                                </span>
-                              </span>
-                            )}
+                              )}
+                            />
                           </>
                         )}
-                        mobileMeta={timeAgo(issue.updatedAt)}
+                        mobileMeta={issueActivityText(issue).toLowerCase()}
                         desktopTrailing={(
-                          <>
-                            {(issue.labels ?? []).length > 0 && (
-                              <span className="hidden items-center gap-1 overflow-hidden md:flex md:max-w-[240px]">
-                                {(issue.labels ?? []).slice(0, 3).map((label) => (
-                                  <span
-                                    key={label.id}
-                                    className="inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium"
-                                    style={{
-                                      borderColor: label.color,
-                                      color: pickTextColorForPillBg(label.color, 0.12),
-                                      backgroundColor: `${label.color}1f`,
-                                    }}
-                                  >
-                                    {label.name}
-                                  </span>
-                                ))}
-                                {(issue.labels ?? []).length > 3 && (
-                                  <span className="text-[10px] text-muted-foreground">
-                                    +{(issue.labels ?? []).length - 3}
-                                  </span>
-                                )}
-                              </span>
-                            )}
-                            <Popover
-                              open={assigneePickerIssueId === issue.id}
-                              onOpenChange={(open) => {
-                                setAssigneePickerIssueId(open ? issue.id : null);
-                                if (!open) setAssigneeSearch("");
-                              }}
-                            >
-                              <PopoverTrigger asChild>
-                                <button
-                                  className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 transition-colors hover:bg-accent/50"
-                                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                          visibleTrailingIssueColumns.length > 0 ? (
+                            <InboxIssueTrailingColumns
+                              issue={issue}
+                              columns={visibleTrailingIssueColumns}
+                              projectName={issueProject?.name ?? null}
+                              projectColor={issueProject?.color ?? null}
+                              workspaceName={resolveIssueWorkspaceName(issue, {
+                                executionWorkspaceById,
+                                projectWorkspaceById,
+                                defaultProjectWorkspaceIdByProjectId,
+                              })}
+                              assigneeName={agentName(issue.assigneeAgentId)}
+                              currentUserId={currentUserId}
+                              parentIdentifier={parentIssue?.identifier ?? null}
+                              parentTitle={parentIssue?.title ?? null}
+                              assigneeContent={(
+                                <Popover
+                                  open={assigneePickerIssueId === issue.id}
+                                  onOpenChange={(open) => {
+                                    setAssigneePickerIssueId(open ? issue.id : null);
+                                    if (!open) setAssigneeSearch("");
+                                  }}
                                 >
-                                  {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
-                                    <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
-                                  ) : issue.assigneeUserId ? (
-                                    <span className="inline-flex items-center gap-1.5 text-xs">
-                                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
-                                        <User className="h-3 w-3" />
-                                      </span>
-                                      {formatAssigneeUserLabel(issue.assigneeUserId, currentUserId) ?? "User"}
-                                    </span>
-                                  ) : (
-                                    <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-                                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
-                                        <User className="h-3 w-3" />
-                                      </span>
-                                      Assignee
-                                    </span>
-                                  )}
-                                </button>
-                              </PopoverTrigger>
-                              <PopoverContent
-                                className="w-56 p-1"
-                                align="end"
-                                onClick={(e) => e.stopPropagation()}
-                                onPointerDownOutside={() => setAssigneeSearch("")}
-                              >
-                                <input
-                                  className="mb-1 w-full border-b border-border bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground/50"
-                                  placeholder="Search assignees..."
-                                  value={assigneeSearch}
-                                  onChange={(e) => setAssigneeSearch(e.target.value)}
-                                  autoFocus
-                                />
-                                <div className="max-h-48 overflow-y-auto overscroll-contain">
-                                  <button
-                                    className={cn(
-                                      "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
-                                      !issue.assigneeAgentId && !issue.assigneeUserId && "bg-accent",
-                                    )}
-                                    onClick={(e) => {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                      assignIssue(issue.id, null, null);
-                                    }}
-                                  >
-                                    No assignee
-                                  </button>
-                                  {currentUserId && (
+                                  <PopoverTrigger asChild>
                                     <button
-                                      className={cn(
-                                        "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50",
-                                        issue.assigneeUserId === currentUserId && "bg-accent",
-                                      )}
-                                      onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        assignIssue(issue.id, null, currentUserId);
-                                      }}
+                                      className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 transition-colors hover:bg-accent/50"
+                                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
                                     >
-                                      <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                                      <span>Me</span>
+                                      {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
+                                        <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
+                                      ) : issue.assigneeUserId ? (
+                                        <span className="inline-flex items-center gap-1.5 text-xs">
+                                          <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
+                                            <User className="h-3 w-3" />
+                                          </span>
+                                          {formatAssigneeUserLabel(issue.assigneeUserId, currentUserId) ?? "User"}
+                                        </span>
+                                      ) : (
+                                        <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                                          <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
+                                            <User className="h-3 w-3" />
+                                          </span>
+                                          Assignee
+                                        </span>
+                                      )}
                                     </button>
-                                  )}
-                                  {(agents ?? [])
-                                    .filter((agent) => {
-                                      if (!assigneeSearch.trim()) return true;
-                                      return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
-                                    })
-                                    .map((agent) => (
+                                  </PopoverTrigger>
+                                  <PopoverContent
+                                    className="w-56 p-1"
+                                    align="end"
+                                    onClick={(e) => e.stopPropagation()}
+                                    onPointerDownOutside={() => setAssigneeSearch("")}
+                                  >
+                                    <input
+                                      className="mb-1 w-full border-b border-border bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground/50"
+                                      placeholder="Search assignees..."
+                                      value={assigneeSearch}
+                                      onChange={(e) => setAssigneeSearch(e.target.value)}
+                                      autoFocus
+                                    />
+                                    <div className="max-h-48 overflow-y-auto overscroll-contain">
                                       <button
-                                        key={agent.id}
                                         className={cn(
-                                          "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50",
-                                          issue.assigneeAgentId === agent.id && "bg-accent",
+                                          "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
+                                          !issue.assigneeAgentId && !issue.assigneeUserId && "bg-accent",
                                         )}
                                         onClick={(e) => {
                                           e.preventDefault();
                                           e.stopPropagation();
-                                          assignIssue(issue.id, agent.id, null);
+                                          assignIssue(issue.id, null, null);
                                         }}
                                       >
-                                        <Identity name={agent.name} size="sm" className="min-w-0" />
+                                        No assignee
                                       </button>
-                                    ))}
-                                </div>
-                              </PopoverContent>
-                            </Popover>
-                          </>
+                                      {currentUserId && (
+                                        <button
+                                          className={cn(
+                                            "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50",
+                                            issue.assigneeUserId === currentUserId && "bg-accent",
+                                          )}
+                                          onClick={(e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            assignIssue(issue.id, null, currentUserId);
+                                          }}
+                                        >
+                                          <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                                          <span>Me</span>
+                                        </button>
+                                      )}
+                                      {(agents ?? [])
+                                        .filter((agent) => {
+                                          if (!assigneeSearch.trim()) return true;
+                                          return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
+                                        })
+                                        .map((agent) => (
+                                          <button
+                                            key={agent.id}
+                                            className={cn(
+                                              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50",
+                                              issue.assigneeAgentId === agent.id && "bg-accent",
+                                            )}
+                                            onClick={(e) => {
+                                              e.preventDefault();
+                                              e.stopPropagation();
+                                              assignIssue(issue.id, agent.id, null);
+                                            }}
+                                          >
+                                            <Identity name={agent.name} size="sm" className="min-w-0" />
+                                          </button>
+                                        ))}
+                                    </div>
+                                  </PopoverContent>
+                                </Popover>
+                              )}
+                            />
+                          ) : undefined
                         )}
-                        trailingMeta={formatDate(issue.createdAt)}
                       />
                       {hasChildren && isExpanded && children.map((child) => renderIssueRow(child, depth + 1))}
                     </div>
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 238566f7..075c50d7 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -26,17 +26,21 @@ import {
 import { hasBlockingShortcutDialog, isKeyboardShortcutTextInputTarget } from "../lib/keyboardShortcuts";
 import { EmptyState } from "../components/EmptyState";
 import { PageSkeleton } from "../components/PageSkeleton";
+import {
+  InboxIssueMetaLeading,
+  InboxIssueTrailingColumns,
+  IssueColumnPicker,
+  issueActivityText,
+  issueTrailingColumns,
+} from "../components/IssueColumns";
 import { IssueRow } from "../components/IssueRow";
 import { SwipeToArchive } from "../components/SwipeToArchive";
 
 import { StatusIcon } from "../components/StatusIcon";
 import { cn } from "../lib/utils";
 import { StatusBadge } from "../components/StatusBadge";
-import { Identity } from "../components/Identity";
 import { approvalLabel, defaultTypeIcon, typeIcon } from "../components/ApprovalPayload";
-import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { timeAgo } from "../lib/timeAgo";
-import { formatAssigneeUserLabel } from "../lib/assignees";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -48,15 +52,6 @@ import {
 } from "@/components/ui/dialog";
 import { Separator } from "@/components/ui/separator";
 import { Tabs } from "@/components/ui/tabs";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   Select,
   SelectContent,
@@ -71,7 +66,6 @@ import {
   X,
   RotateCcw,
   UserPlus,
-  Columns3,
   Search,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -101,6 +95,8 @@ import {
 } from "../lib/inbox";
 import { useDismissedInboxItems, useReadInboxItems } from "../hooks/useInboxBadge";
 
+export { InboxIssueMetaLeading, InboxIssueTrailingColumns } from "../components/IssueColumns";
+
 type InboxCategoryFilter =
   | "everything"
   | "issues_i_touched"
@@ -141,245 +137,6 @@ function readIssueIdFromRun(run: HeartbeatRun): string | null {
 
 
 type NonIssueUnreadState = "visible" | "fading" | "hidden" | null;
-const trailingIssueColumns: InboxIssueColumn[] = ["assignee", "project", "workspace", "parent", "labels", "updated"];
-const inboxIssueColumnLabels: Record<InboxIssueColumn, string> = {
-  status: "Status",
-  id: "ID",
-  assignee: "Assignee",
-  project: "Project",
-  workspace: "Workspace",
-  parent: "Parent issue",
-  labels: "Tags",
-  updated: "Last updated",
-};
-const inboxIssueColumnDescriptions: Record<InboxIssueColumn, string> = {
-  status: "Issue state chip on the left edge.",
-  id: "Ticket identifier like PAP-1009.",
-  assignee: "Assigned agent or board user.",
-  project: "Linked project pill with its color.",
-  workspace: "Execution or project workspace used for the issue.",
-  parent: "Parent issue identifier and title.",
-  labels: "Issue labels and tags.",
-  updated: "Latest visible activity time.",
-};
-
-export function InboxIssueMetaLeading({
-  issue,
-  isLive,
-  showStatus = true,
-  showIdentifier = true,
-}: {
-  issue: Issue;
-  isLive: boolean;
-  showStatus?: boolean;
-  showIdentifier?: boolean;
-}) {
-  return (
-    <>
-      {showStatus ? (
-        <span className="hidden shrink-0 sm:inline-flex">
-          <StatusIcon status={issue.status} />
-        </span>
-      ) : null}
-      {showIdentifier ? (
-        <span className="shrink-0 font-mono text-xs text-muted-foreground">
-          {issue.identifier ?? issue.id.slice(0, 8)}
-        </span>
-      ) : null}
-      {isLive && (
-        <span
-          className={cn(
-            "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 sm:gap-1.5 sm:px-2",
-            "bg-blue-500/10",
-          )}
-        >
-          <span className="relative flex h-2 w-2">
-            <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-75" />
-            <span
-              className={cn(
-                "relative inline-flex h-2 w-2 rounded-full",
-                "bg-blue-500",
-              )}
-            />
-          </span>
-          <span
-            className={cn(
-              "hidden text-[11px] font-medium sm:inline",
-              "text-blue-600 dark:text-blue-400",
-            )}
-          >
-            Live
-          </span>
-        </span>
-      )}
-    </>
-  );
-}
-
-function issueActivityText(issue: Issue): string {
-  return `Updated ${timeAgo(issue.lastActivityAt ?? issue.lastExternalCommentAt ?? issue.updatedAt)}`;
-}
-
-function issueTrailingGridTemplate(columns: InboxIssueColumn[]): string {
-  return columns
-    .map((column) => {
-      if (column === "assignee") return "minmax(7.5rem, 9.5rem)";
-      if (column === "project") return "minmax(6.5rem, 8.5rem)";
-      if (column === "workspace") return "minmax(9rem, 12rem)";
-      if (column === "parent") return "minmax(5rem, 7rem)";
-      if (column === "labels") return "minmax(8rem, 10rem)";
-      return "minmax(4rem, 5.5rem)";
-    })
-    .join(" ");
-}
-
-export function InboxIssueTrailingColumns({
-  issue,
-  columns,
-  projectName,
-  projectColor,
-  workspaceName,
-  assigneeName,
-  currentUserId,
-  parentIdentifier,
-  parentTitle,
-}: {
-  issue: Issue;
-  columns: InboxIssueColumn[];
-  projectName: string | null;
-  projectColor: string | null;
-  workspaceName: string | null;
-  assigneeName: string | null;
-  currentUserId: string | null;
-  parentIdentifier: string | null;
-  parentTitle: string | null;
-}) {
-  const activityText = timeAgo(issue.lastActivityAt ?? issue.lastExternalCommentAt ?? issue.updatedAt);
-  const userLabel = formatAssigneeUserLabel(issue.assigneeUserId, currentUserId) ?? "User";
-
-  return (
-    <span
-      className="grid items-center gap-2"
-      style={{ gridTemplateColumns: issueTrailingGridTemplate(columns) }}
-    >
-      {columns.map((column) => {
-        if (column === "assignee") {
-          if (issue.assigneeAgentId) {
-            return (
-              <span key={column} className="min-w-0 text-xs text-foreground">
-                <Identity
-                  name={assigneeName ?? issue.assigneeAgentId.slice(0, 8)}
-                  size="sm"
-                  className="min-w-0"
-                />
-              </span>
-            );
-          }
-
-          if (issue.assigneeUserId) {
-            return (
-              <span key={column} className="min-w-0 truncate text-xs font-medium text-muted-foreground">
-                {userLabel}
-              </span>
-            );
-          }
-
-          return (
-            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
-              Unassigned
-            </span>
-          );
-        }
-
-        if (column === "project") {
-          if (projectName) {
-            const accentColor = projectColor ?? "#64748b";
-            return (
-              <span
-                key={column}
-                className="inline-flex min-w-0 items-center gap-2 text-xs font-medium"
-                style={{ color: pickTextColorForPillBg(accentColor, 0.12) }}
-              >
-                <span
-                  className="h-1.5 w-1.5 shrink-0 rounded-full"
-                  style={{ backgroundColor: accentColor }}
-                />
-                <span className="truncate">{projectName}</span>
-              </span>
-            );
-          }
-
-          return (
-            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
-              No project
-            </span>
-          );
-        }
-
-        if (column === "labels") {
-          if ((issue.labels ?? []).length > 0) {
-            return (
-              <span key={column} className="flex min-w-0 items-center gap-1 overflow-hidden text-[11px]">
-                {(issue.labels ?? []).slice(0, 2).map((label) => (
-                  <span
-                    key={label.id}
-                    className="inline-flex min-w-0 max-w-full items-center font-medium"
-                    style={{
-                      color: pickTextColorForPillBg(label.color, 0.12),
-                    }}
-                  >
-                    <span className="truncate">{label.name}</span>
-                  </span>
-                ))}
-                {(issue.labels ?? []).length > 2 ? (
-                  <span className="shrink-0 text-[11px] font-medium text-muted-foreground">
-                    +{(issue.labels ?? []).length - 2}
-                  </span>
-                ) : null}
-              </span>
-            );
-          }
-
-          return <span key={column} className="min-w-0" aria-hidden="true" />;
-        }
-
-        if (column === "workspace") {
-          if (!workspaceName) {
-            return <span key={column} className="min-w-0" aria-hidden="true" />;
-          }
-
-          return (
-            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground">
-              {workspaceName}
-            </span>
-          );
-        }
-
-        if (column === "parent") {
-          if (!issue.parentId) {
-            return <span key={column} className="min-w-0" aria-hidden="true" />;
-          }
-
-          return (
-            <span key={column} className="min-w-0 truncate text-xs text-muted-foreground" title={parentTitle ?? undefined}>
-              {parentIdentifier ? (
-                <span className="font-mono">{parentIdentifier}</span>
-              ) : (
-                <span className="italic">Sub-issue</span>
-              )}
-            </span>
-          );
-        }
-
-        return (
-          <span key={column} className="min-w-0 truncate text-right text-[11px] font-medium text-muted-foreground">
-            {activityText}
-          </span>
-        );
-      })}
-    </span>
-  );
-}
 
 export function FailedRunInboxRow({
   run,
@@ -1027,7 +784,7 @@ export function Inbox() {
   );
   const availableIssueColumnSet = useMemo(() => new Set(availableIssueColumns), [availableIssueColumns]);
   const visibleTrailingIssueColumns = useMemo(
-    () => trailingIssueColumns.filter((column) => visibleIssueColumnSet.has(column) && availableIssueColumnSet.has(column)),
+    () => issueTrailingColumns.filter((column) => visibleIssueColumnSet.has(column) && availableIssueColumnSet.has(column)),
     [availableIssueColumnSet, visibleIssueColumnSet],
   );
   const currentUserId = session?.user.id ?? session?.session.userId ?? null;
@@ -1655,58 +1412,13 @@ export function Inbox() {
               className="h-8 w-[220px] pl-8 text-xs"
             />
           </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="hidden h-8 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground sm:inline-flex"
-              >
-                <Columns3 className="mr-1 h-3.5 w-3.5" />
-                Show / hide columns
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-[300px] rounded-xl border-border/70 p-1.5 shadow-xl shadow-black/10">
-              <DropdownMenuLabel className="px-2 pb-1 pt-1.5">
-                <div className="space-y-1">
-                  <div className="text-[10px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
-                    Desktop issue rows
-                  </div>
-                  <div className="text-sm font-medium text-foreground">
-                    Choose which inbox columns stay visible
-                  </div>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              {availableIssueColumns.map((column) => (
-                <DropdownMenuCheckboxItem
-                  key={column}
-                  checked={visibleIssueColumnSet.has(column)}
-                  onSelect={(event) => event.preventDefault()}
-                  onCheckedChange={(checked) => toggleIssueColumn(column, checked === true)}
-                  className="items-start rounded-lg px-3 py-2.5 pl-8"
-                >
-                  <span className="flex flex-col gap-0.5">
-                    <span className="text-sm font-medium text-foreground">
-                      {inboxIssueColumnLabels[column]}
-                    </span>
-                    <span className="text-xs leading-relaxed text-muted-foreground">
-                      {inboxIssueColumnDescriptions[column]}
-                    </span>
-                  </span>
-                </DropdownMenuCheckboxItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => setIssueColumns(DEFAULT_INBOX_ISSUE_COLUMNS)}
-                className="rounded-lg px-3 py-2 text-sm"
-              >
-                Reset defaults
-                <span className="ml-auto text-xs text-muted-foreground">status, id, updated</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <IssueColumnPicker
+            availableColumns={availableIssueColumns}
+            visibleColumnSet={visibleIssueColumnSet}
+            onToggleColumn={toggleIssueColumn}
+            onResetColumns={() => setIssueColumns(DEFAULT_INBOX_ISSUE_COLUMNS)}
+            title="Choose which inbox columns stay visible"
+          />
           {canMarkAllRead && (
             <>
               <Button
diff --git a/ui/src/pages/ProjectDetail.tsx b/ui/src/pages/ProjectDetail.tsx
index 44ac1e05..1b16e52f 100644
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -173,6 +173,11 @@ function ProjectIssuesList({ projectId, companyId }: { projectId: string; compan
     enabled: !!companyId,
     refetchInterval: 5000,
   });
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(companyId),
+    queryFn: () => projectsApi.list(companyId),
+    enabled: !!companyId,
+  });
 
   const liveIssueIds = useMemo(() => {
     const ids = new Set<string>();
@@ -203,6 +208,7 @@ function ProjectIssuesList({ projectId, companyId }: { projectId: string; compan
       isLoading={isLoading}
       error={error as Error | null}
       agents={agents}
+      projects={projects}
       liveIssueIds={liveIssueIds}
       projectId={projectId}
       viewStateKey={`paperclip:project-view:${projectId}`}

From 30dd2b78e5779c0fcabdf4c20572c3504d48dd80 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 16:59:10 -0500
Subject: [PATCH 05/45] Polish shared issue columns trigger styling

---
 ui/src/components/IssueColumns.tsx    | 4 ++--
 ui/src/components/IssuesList.test.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/IssueColumns.tsx b/ui/src/components/IssueColumns.tsx
index 277b1e06..a1489a7e 100644
--- a/ui/src/components/IssueColumns.tsx
+++ b/ui/src/components/IssueColumns.tsx
@@ -80,10 +80,10 @@ export function IssueColumnPicker({
           type="button"
           variant="ghost"
           size="sm"
-          className="hidden h-8 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground sm:inline-flex"
+          className="hidden h-8 shrink-0 px-2 text-xs sm:inline-flex"
         >
           <Columns3 className="mr-1 h-3.5 w-3.5" />
-          Show / hide columns
+          Columns
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-[300px] rounded-xl border-border/70 p-1.5 shadow-xl shadow-black/10">
diff --git a/ui/src/components/IssuesList.test.tsx b/ui/src/components/IssuesList.test.tsx
index d20d81af..16e6faf5 100644
--- a/ui/src/components/IssuesList.test.tsx
+++ b/ui/src/components/IssuesList.test.tsx
@@ -297,7 +297,7 @@ describe("IssuesList", () => {
     );
 
     await waitForAssertion(() => {
-      expect(container.textContent).toContain("Show / hide columns");
+      expect(container.textContent).toContain("Columns");
       expect(container.textContent).toContain("PAP-9");
       expect(container.textContent).toContain("Agent One");
       expect(container.textContent).not.toContain("Updated");

From db1279dc129278aab06ebaf6b1c7dcd2c0a0a51a Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 17:01:55 -0500
Subject: [PATCH 06/45] Make worktree banner name clickable to copy to
 clipboard

Clicking the worktree name in the banner now copies it to clipboard
and shows "Copied\!" feedback for 1.5 seconds.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/WorktreeBanner.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/WorktreeBanner.tsx b/ui/src/components/WorktreeBanner.tsx
index 6808b2da..e256c406 100644
--- a/ui/src/components/WorktreeBanner.tsx
+++ b/ui/src/components/WorktreeBanner.tsx
@@ -1,7 +1,18 @@
+import { useCallback, useState } from "react";
 import { getWorktreeUiBranding } from "../lib/worktree-branding";
 
 export function WorktreeBanner() {
   const branding = getWorktreeUiBranding();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyName = useCallback(() => {
+    if (!branding) return;
+    navigator.clipboard.writeText(branding.name).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [branding]);
+
   if (!branding) return null;
 
   return (
@@ -18,7 +29,14 @@ export function WorktreeBanner() {
       <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
         <span className="shrink-0 opacity-70">Worktree</span>
         <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-70" aria-hidden="true" />
-        <span className="truncate font-semibold tracking-[0.12em]">{branding.name}</span>
+        <button
+          type="button"
+          onClick={handleCopyName}
+          title="Click to copy worktree name"
+          className="truncate font-semibold tracking-[0.12em] cursor-pointer hover:opacity-80 transition-opacity bg-transparent border-none p-0 text-current uppercase text-[11px]"
+        >
+          {copied ? "Copied!" : branding.name}
+        </button>
       </div>
     </div>
   );

From bac5afa6470e411a711cd6722aa5fcadc04e419d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 17:47:58 -0500
Subject: [PATCH 07/45] Remove "None" text from empty Blocking and Sub-issues
 property rows

When there are no blocking issues or sub-issues, show nothing (or just the
"+ Add sub-issue" button) instead of displaying "None" text.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueProperties.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx
index 937e4628..bb555cce 100644
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -846,15 +846,13 @@ export function IssueProperties({
                 </Link>
               ))}
             </div>
-          ) : (
-            <span className="text-sm text-muted-foreground">None</span>
-          )}
+          ) : null}
         </PropertyRow>
 
         <PropertyRow label="Sub-issues">
           <div className="flex flex-wrap items-center gap-1.5">
-            {childIssues.length > 0 ? (
-              childIssues.map((child) => (
+            {childIssues.length > 0
+              ? childIssues.map((child) => (
                 <Link
                   key={child.id}
                   to={`/issues/${child.identifier ?? child.id}`}
@@ -863,9 +861,7 @@ export function IssueProperties({
                   {child.identifier ?? child.title}
                 </Link>
               ))
-            ) : (
-              <span className="text-sm text-muted-foreground">None</span>
-            )}
+              : null}
             {onAddSubIssue ? (
               <button
                 type="button"

From 038dd2bb82dad47f77fec33b176ea284a9d62aec Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 18:11:41 -0500
Subject: [PATCH 08/45] Improve issue assignee update responsiveness

---
 ui/src/context/LiveUpdatesProvider.test.ts   |  55 +++-
 ui/src/context/LiveUpdatesProvider.tsx       |  11 +-
 ui/src/lib/optimistic-issue-comments.test.ts | 265 +++++++++++++++++++
 ui/src/lib/optimistic-issue-comments.ts      |  82 ++++++
 ui/src/pages/IssueDetail.tsx                 |  88 +++++-
 5 files changed, 491 insertions(+), 10 deletions(-)

diff --git a/ui/src/context/LiveUpdatesProvider.test.ts b/ui/src/context/LiveUpdatesProvider.test.ts
index 8aaa7581..1c7c4ce9 100644
--- a/ui/src/context/LiveUpdatesProvider.test.ts
+++ b/ui/src/context/LiveUpdatesProvider.test.ts
@@ -5,7 +5,7 @@ import { __liveUpdatesTestUtils } from "./LiveUpdatesProvider";
 import { queryKeys } from "../lib/queryKeys";
 
 describe("LiveUpdatesProvider issue invalidation", () => {
-  it("refreshes touched inbox queries for issue activity", () => {
+  it("refreshes touched inbox queries and only the changed issue data for issue updates", () => {
     const invalidations: unknown[] = [];
     const queryClient = {
       invalidateQueries: (input: unknown) => {
@@ -20,6 +20,7 @@ describe("LiveUpdatesProvider issue invalidation", () => {
       {
         entityType: "issue",
         entityId: "issue-1",
+        action: "issue.updated",
         details: null,
       },
     );
@@ -33,6 +34,58 @@ describe("LiveUpdatesProvider issue invalidation", () => {
     expect(invalidations).toContainEqual({
       queryKey: queryKeys.issues.listUnreadTouchedByMe("company-1"),
     });
+    expect(invalidations).toContainEqual({
+      queryKey: queryKeys.issues.detail("issue-1"),
+    });
+    expect(invalidations).toContainEqual({
+      queryKey: queryKeys.issues.activity("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.comments("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.runs("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.documents("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.attachments("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.approvals("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.liveRuns("issue-1"),
+    });
+    expect(invalidations).not.toContainEqual({
+      queryKey: queryKeys.issues.activeRun("issue-1"),
+    });
+  });
+
+  it("still refreshes comments when a comment activity event arrives", () => {
+    const invalidations: unknown[] = [];
+    const queryClient = {
+      invalidateQueries: (input: unknown) => {
+        invalidations.push(input);
+      },
+      getQueryData: () => undefined,
+    };
+
+    __liveUpdatesTestUtils.invalidateActivityQueries(
+      queryClient as never,
+      "company-1",
+      {
+        entityType: "issue",
+        entityId: "issue-1",
+        action: "issue.comment_added",
+        details: null,
+      },
+    );
+
+    expect(invalidations).toContainEqual({
+      queryKey: queryKeys.issues.comments("issue-1"),
+    });
   });
 });
 
diff --git a/ui/src/context/LiveUpdatesProvider.tsx b/ui/src/context/LiveUpdatesProvider.tsx
index 71e6fbc8..4b427ce2 100644
--- a/ui/src/context/LiveUpdatesProvider.tsx
+++ b/ui/src/context/LiveUpdatesProvider.tsx
@@ -487,6 +487,7 @@ function invalidateActivityQueries(
 
   const entityType = readString(payload.entityType);
   const entityId = readString(payload.entityId);
+  const action = readString(payload.action);
 
   if (entityType === "issue") {
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(companyId) });
@@ -498,14 +499,10 @@ function invalidateActivityQueries(
       const issueRefs = resolveIssueQueryRefs(queryClient, companyId, entityId, details);
       for (const ref of issueRefs) {
         queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(ref) });
         queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.documents(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.approvals(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(ref) });
-        queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(ref) });
+        if (action === "issue.comment_added") {
+          queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(ref) });
+        }
       }
     }
     return;
diff --git a/ui/src/lib/optimistic-issue-comments.test.ts b/ui/src/lib/optimistic-issue-comments.test.ts
index 1620d329..12659f61 100644
--- a/ui/src/lib/optimistic-issue-comments.test.ts
+++ b/ui/src/lib/optimistic-issue-comments.test.ts
@@ -1,8 +1,12 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Issue } from "@paperclipai/shared";
 import {
+  applyOptimisticIssueFieldUpdate,
+  applyOptimisticIssueFieldUpdateToCollection,
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
   isQueuedIssueComment,
+  matchesIssueRef,
   mergeIssueComments,
   upsertIssueComment,
 } from "./optimistic-issue-comments";
@@ -177,6 +181,267 @@ describe("optimistic issue comments", () => {
     expect(next?.assigneeUserId).toBe("board-2");
   });
 
+  it("applies optimistic field updates for issue property edits", () => {
+    const next = applyOptimisticIssueFieldUpdate(
+      {
+        id: "issue-1",
+        companyId: "company-1",
+        projectId: "project-1",
+        projectWorkspaceId: "workspace-1",
+        goalId: null,
+        parentId: null,
+        title: "Fix property pane",
+        description: null,
+        status: "todo",
+        priority: "medium",
+        assigneeAgentId: "agent-1",
+        assigneeUserId: null,
+        checkoutRunId: null,
+        executionRunId: null,
+        executionAgentNameKey: null,
+        executionLockedAt: null,
+        createdByAgentId: null,
+        createdByUserId: "board-1",
+        issueNumber: 1,
+        identifier: "PAP-1",
+        originKind: "manual",
+        originId: null,
+        originRunId: null,
+        requestDepth: 0,
+        billingCode: null,
+        assigneeAdapterOverrides: null,
+        executionWorkspaceId: "exec-1",
+        executionWorkspacePreference: "shared_workspace",
+        executionWorkspaceSettings: null,
+        startedAt: null,
+        completedAt: null,
+        cancelledAt: null,
+        hiddenAt: null,
+        labelIds: ["label-1", "label-2"],
+        labels: [
+          {
+            id: "label-1",
+            companyId: "company-1",
+            name: "One",
+            color: "#111111",
+            createdAt: new Date("2026-03-28T14:00:00.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+          },
+          {
+            id: "label-2",
+            companyId: "company-1",
+            name: "Two",
+            color: "#222222",
+            createdAt: new Date("2026-03-28T14:00:00.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+          },
+        ],
+        blockedBy: [
+          {
+            id: "issue-2",
+            identifier: "PAP-2",
+            title: "First blocker",
+            status: "todo",
+            priority: "medium",
+            assigneeAgentId: null,
+            assigneeUserId: null,
+          },
+          {
+            id: "issue-3",
+            identifier: "PAP-3",
+            title: "Second blocker",
+            status: "todo",
+            priority: "medium",
+            assigneeAgentId: null,
+            assigneeUserId: null,
+          },
+        ],
+        blocks: [],
+        project: {
+          id: "project-1",
+          companyId: "company-1",
+          urlKey: "project-one",
+          goalId: null,
+          goalIds: [],
+          goals: [],
+          name: "Project one",
+          description: null,
+          status: "in_progress",
+          leadAgentId: null,
+          targetDate: null,
+          color: null,
+          env: null,
+          pauseReason: null,
+          pausedAt: null,
+          executionWorkspacePolicy: null,
+          codebase: {
+            workspaceId: null,
+            repoUrl: null,
+            repoRef: null,
+            defaultRef: null,
+            repoName: null,
+            localFolder: null,
+            managedFolder: "/tmp/paperclip",
+            effectiveLocalFolder: "/tmp/paperclip",
+            origin: "local_folder",
+          },
+          workspaces: [],
+          primaryWorkspace: null,
+          archivedAt: null,
+          createdAt: new Date("2026-03-28T14:00:00.000Z"),
+          updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+        },
+        currentExecutionWorkspace: {
+          id: "exec-1",
+          companyId: "company-1",
+          projectId: "project-1",
+          projectWorkspaceId: null,
+          sourceIssueId: "issue-1",
+          mode: "shared_workspace",
+          strategyType: "project_primary",
+          branchName: null,
+          status: "active",
+          name: "Execution workspace",
+          cwd: "/tmp/paperclip",
+          repoUrl: null,
+          baseRef: null,
+          providerType: "local_fs",
+          providerRef: null,
+          derivedFromExecutionWorkspaceId: null,
+          lastUsedAt: new Date("2026-03-28T14:00:00.000Z"),
+          cleanupEligibleAt: null,
+          cleanupReason: null,
+          config: null,
+          metadata: null,
+          createdAt: new Date("2026-03-28T14:00:00.000Z"),
+          updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+          openedAt: new Date("2026-03-28T14:00:00.000Z"),
+          closedAt: null,
+        },
+        createdAt: new Date("2026-03-28T14:00:00.000Z"),
+        updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+      },
+      {
+        status: "in_review",
+        assigneeAgentId: null,
+        assigneeUserId: "board-2",
+        labelIds: ["label-2"],
+        blockedByIssueIds: ["issue-3"],
+        projectId: "project-2",
+        executionWorkspaceId: "exec-2",
+      },
+    );
+
+    expect(next?.status).toBe("in_review");
+    expect(next?.assigneeAgentId).toBeNull();
+    expect(next?.assigneeUserId).toBe("board-2");
+    expect(next?.labelIds).toEqual(["label-2"]);
+    expect(next?.labels?.map((label) => label.id)).toEqual(["label-2"]);
+    expect(next?.blockedBy?.map((relation) => relation.id)).toEqual(["issue-3"]);
+    expect(next?.projectId).toBe("project-2");
+    expect(next?.project).toBeNull();
+    expect(next?.executionWorkspaceId).toBe("exec-2");
+    expect(next?.currentExecutionWorkspace).toBeNull();
+  });
+
+  it("matches issues by either uuid or identifier reference", () => {
+    expect(matchesIssueRef({ id: "issue-1", identifier: "PAP-1" } as const, ["issue-1"])).toBe(true);
+    expect(matchesIssueRef({ id: "issue-1", identifier: "PAP-1" } as const, ["PAP-1"])).toBe(true);
+    expect(matchesIssueRef({ id: "issue-1", identifier: "PAP-1" } as const, ["issue-2", "PAP-2"])).toBe(false);
+  });
+
+  it("applies optimistic field updates across cached issue collections", () => {
+    const issues: Issue[] = [
+      {
+        id: "issue-1",
+        companyId: "company-1",
+        projectId: null,
+        projectWorkspaceId: null,
+        goalId: null,
+        parentId: null,
+        title: "Fix property pane",
+        description: null,
+        status: "todo",
+        priority: "medium",
+        assigneeAgentId: "agent-1",
+        assigneeUserId: null,
+        checkoutRunId: null,
+        executionRunId: null,
+        executionAgentNameKey: null,
+        executionLockedAt: null,
+        createdByAgentId: null,
+        createdByUserId: "board-1",
+        issueNumber: 1,
+        identifier: "PAP-1",
+        originKind: "manual",
+        originId: null,
+        originRunId: null,
+        requestDepth: 0,
+        billingCode: null,
+        assigneeAdapterOverrides: null,
+        executionWorkspaceId: null,
+        executionWorkspacePreference: null,
+        executionWorkspaceSettings: null,
+        startedAt: null,
+        completedAt: null,
+        cancelledAt: null,
+        hiddenAt: null,
+        labelIds: [],
+        labels: [],
+        blockedBy: [],
+        blocks: [],
+        createdAt: new Date("2026-03-28T14:00:00.000Z"),
+        updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+      },
+      {
+        id: "issue-2",
+        companyId: "company-1",
+        projectId: null,
+        projectWorkspaceId: null,
+        goalId: null,
+        parentId: null,
+        title: "Leave me alone",
+        description: null,
+        status: "todo",
+        priority: "medium",
+        assigneeAgentId: "agent-2",
+        assigneeUserId: null,
+        checkoutRunId: null,
+        executionRunId: null,
+        executionAgentNameKey: null,
+        executionLockedAt: null,
+        createdByAgentId: null,
+        createdByUserId: "board-1",
+        issueNumber: 2,
+        identifier: "PAP-2",
+        originKind: "manual",
+        originId: null,
+        originRunId: null,
+        requestDepth: 0,
+        billingCode: null,
+        assigneeAdapterOverrides: null,
+        executionWorkspaceId: null,
+        executionWorkspacePreference: null,
+        executionWorkspaceSettings: null,
+        startedAt: null,
+        completedAt: null,
+        cancelledAt: null,
+        hiddenAt: null,
+        labelIds: [],
+        labels: [],
+        blockedBy: [],
+        blocks: [],
+        createdAt: new Date("2026-03-28T14:00:00.000Z"),
+        updatedAt: new Date("2026-03-28T14:00:00.000Z"),
+      },
+    ];
+
+    const next = applyOptimisticIssueFieldUpdateToCollection(issues, ["PAP-1"], { assigneeAgentId: "agent-9" });
+
+    expect(next?.[0]?.assigneeAgentId).toBe("agent-9");
+    expect(next?.[1]?.assigneeAgentId).toBe("agent-2");
+  });
+
   it("treats comments without a run id as queued when they arrive during an active run", () => {
     expect(
       isQueuedIssueComment({
diff --git a/ui/src/lib/optimistic-issue-comments.ts b/ui/src/lib/optimistic-issue-comments.ts
index 1ac6812c..be35ebb8 100644
--- a/ui/src/lib/optimistic-issue-comments.ts
+++ b/ui/src/lib/optimistic-issue-comments.ts
@@ -128,3 +128,85 @@ export function applyOptimisticIssueCommentUpdate(
 
   return nextIssue;
 }
+
+export function applyOptimisticIssueFieldUpdate(
+  issue: Issue | undefined,
+  data: Record<string, unknown>,
+) {
+  if (!issue) return issue;
+
+  const nextIssue: Issue = {
+    ...issue,
+    updatedAt: new Date(),
+  };
+  const hasOwn = (key: string) => Object.prototype.hasOwnProperty.call(data, key);
+  const assign = <K extends keyof Issue>(key: K) => {
+    if (hasOwn(key)) {
+      nextIssue[key] = data[key] as Issue[K];
+    }
+  };
+
+  assign("status");
+  assign("priority");
+  assign("assigneeAgentId");
+  assign("assigneeUserId");
+  assign("projectId");
+  assign("projectWorkspaceId");
+  assign("executionWorkspaceId");
+  assign("executionWorkspacePreference");
+  assign("executionWorkspaceSettings");
+  assign("hiddenAt");
+
+  if (hasOwn("labelIds") && Array.isArray(data.labelIds)) {
+    const nextLabelIds = data.labelIds.filter((value): value is string => typeof value === "string");
+    nextIssue.labelIds = nextLabelIds;
+    if (issue.labels) {
+      nextIssue.labels = issue.labels.filter((label) => nextLabelIds.includes(label.id));
+    }
+  }
+
+  if (hasOwn("blockedByIssueIds") && Array.isArray(data.blockedByIssueIds) && issue.blockedBy) {
+    const nextBlockedByIds = new Set(
+      data.blockedByIssueIds.filter((value): value is string => typeof value === "string"),
+    );
+    nextIssue.blockedBy = issue.blockedBy.filter((relation) => nextBlockedByIds.has(relation.id));
+  }
+
+  if (hasOwn("projectId")) {
+    nextIssue.project = issue.project?.id === nextIssue.projectId ? issue.project : null;
+  }
+
+  if (hasOwn("executionWorkspaceId")) {
+    nextIssue.currentExecutionWorkspace =
+      issue.currentExecutionWorkspace?.id === nextIssue.executionWorkspaceId
+        ? issue.currentExecutionWorkspace
+        : null;
+  }
+
+  return nextIssue;
+}
+
+export function matchesIssueRef(
+  issue: Pick<Issue, "id" | "identifier">,
+  refs: Iterable<string>,
+) {
+  const refSet = refs instanceof Set ? refs : new Set(refs);
+  return refSet.has(issue.id) || (!!issue.identifier && refSet.has(issue.identifier));
+}
+
+export function applyOptimisticIssueFieldUpdateToCollection(
+  issues: Issue[] | undefined,
+  refs: Iterable<string>,
+  data: Record<string, unknown>,
+) {
+  if (!issues) return issues;
+
+  let changed = false;
+  const nextIssues = issues.map((issue) => {
+    if (!matchesIssueRef(issue, refs)) return issue;
+    changed = true;
+    return applyOptimisticIssueFieldUpdate(issue, data) ?? issue;
+  });
+
+  return changed ? nextIssues : issues;
+}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 16346bb5..60b0a9db 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -28,9 +28,12 @@ import {
 } from "../lib/issueDetailBreadcrumb";
 import { hasBlockingShortcutDialog, resolveInboxQuickArchiveKeyAction } from "../lib/keyboardShortcuts";
 import {
+  applyOptimisticIssueFieldUpdate,
+  applyOptimisticIssueFieldUpdateToCollection,
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
   isQueuedIssueComment,
+  matchesIssueRef,
   mergeIssueComments,
   upsertIssueComment,
   type IssueCommentReassignment,
@@ -687,6 +690,42 @@ export function IssueDetail() {
     }
   };
 
+  const invalidateIssueCollections = () => {
+    if (selectedCompanyId) {
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listMineByMe(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
+    }
+  };
+
+  const applyOptimisticIssueCacheUpdate = useCallback((refs: Iterable<string>, data: Record<string, unknown>) => {
+    queryClient.setQueriesData<Issue>(
+      { queryKey: ["issues", "detail"] },
+      (cached) => (cached && matchesIssueRef(cached, refs) ? applyOptimisticIssueFieldUpdate(cached, data) : cached),
+    );
+
+    if (!selectedCompanyId) return;
+    queryClient.setQueryData<Issue[] | undefined>(
+      queryKeys.issues.list(selectedCompanyId),
+      (cached) => applyOptimisticIssueFieldUpdateToCollection(cached, refs, data),
+    );
+  }, [queryClient, selectedCompanyId]);
+
+  const mergeIssueResponseIntoCaches = useCallback((refs: Iterable<string>, nextIssue: Issue) => {
+    queryClient.setQueriesData<Issue>(
+      { queryKey: ["issues", "detail"] },
+      (cached) => (cached && matchesIssueRef(cached, refs) ? { ...cached, ...nextIssue } : cached),
+    );
+
+    if (!selectedCompanyId) return;
+    queryClient.setQueryData<Issue[] | undefined>(
+      queryKeys.issues.list(selectedCompanyId),
+      (cached) => cached?.map((item) => (matchesIssueRef(item, refs) ? { ...item, ...nextIssue } : item)),
+    );
+  }, [queryClient, selectedCompanyId]);
+
   const markIssueRead = useMutation({
     mutationFn: (id: string) => issuesApi.markRead(id),
     onSuccess: () => {
@@ -701,8 +740,53 @@ export function IssueDetail() {
 
   const updateIssue = useMutation({
     mutationFn: (data: Record<string, unknown>) => issuesApi.update(issueId!, data),
-    onSuccess: () => {
-      invalidateIssue();
+    onMutate: async (data) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.issues.detail(issueId!) });
+      if (selectedCompanyId) {
+        await queryClient.cancelQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
+      }
+
+      const previousIssue = queryClient.getQueryData<Issue>(queryKeys.issues.detail(issueId!));
+      const issueRefs = new Set<string>([issueId!]);
+      if (previousIssue?.id) issueRefs.add(previousIssue.id);
+      if (previousIssue?.identifier) issueRefs.add(previousIssue.identifier);
+
+      const previousDetailQueries = queryClient
+        .getQueriesData<Issue>({ queryKey: ["issues", "detail"] })
+        .filter(([, cachedIssue]) => cachedIssue && matchesIssueRef(cachedIssue, issueRefs));
+      const previousList = selectedCompanyId
+        ? queryClient.getQueryData<Issue[]>(queryKeys.issues.list(selectedCompanyId))
+        : undefined;
+
+      applyOptimisticIssueCacheUpdate(issueRefs, data);
+
+      return { previousDetailQueries, previousList, selectedCompanyId };
+    },
+    onSuccess: ({ comment: _comment, ...nextIssue }) => {
+      const issueRefs = new Set<string>([issueId!, nextIssue.id]);
+      if (nextIssue.identifier) issueRefs.add(nextIssue.identifier);
+      mergeIssueResponseIntoCaches(issueRefs, nextIssue);
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(issueId!) });
+      invalidateIssueCollections();
+    },
+    onError: (err, _variables, context) => {
+      for (const [queryKey, previousIssue] of context?.previousDetailQueries ?? []) {
+        queryClient.setQueryData(queryKey, previousIssue);
+      }
+      if (context?.selectedCompanyId) {
+        queryClient.setQueryData(queryKeys.issues.list(context.selectedCompanyId), context.previousList);
+      }
+      pushToast({
+        title: "Issue update failed",
+        body: err instanceof Error ? err.message : "Unable to save issue changes",
+        tone: "error",
+      });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId!) });
+      if (selectedCompanyId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
+      }
     },
   });
   const handleIssuePropertiesUpdate = useCallback((data: Record<string, unknown>) => {

From 1e4ccb2b1fc04f25da8960122bf583ded6f7065d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 7 Apr 2026 19:16:24 -0500
Subject: [PATCH 09/45] Improve mobile comment copy button feedback

---
 ui/src/components/CommentThread.test.tsx | 69 ++++++++++++++++++++++++
 ui/src/components/CommentThread.tsx      | 66 ++++++++++++++++++++---
 2 files changed, 127 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/CommentThread.test.tsx b/ui/src/components/CommentThread.test.tsx
index 41c23bed..0fa73210 100644
--- a/ui/src/components/CommentThread.test.tsx
+++ b/ui/src/components/CommentThread.test.tsx
@@ -61,12 +61,26 @@ vi.mock("@/plugins/slots", () => ({
 
 describe("CommentThread", () => {
   let container: HTMLDivElement;
+  let writeTextMock: ReturnType<typeof vi.fn>;
+  let execCommandMock: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
     container = document.createElement("div");
     document.body.appendChild(container);
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-03-11T12:00:00.000Z"));
+    writeTextMock = vi.fn(async () => {});
+    execCommandMock = vi.fn(() => true);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+    Object.defineProperty(window, "isSecureContext", {
+      value: true,
+      configurable: true,
+    });
+    document.execCommand = execCommandMock;
   });
 
   afterEach(() => {
@@ -234,4 +248,59 @@ describe("CommentThread", () => {
       root.unmount();
     });
   });
+
+  it("uses a larger copy control with feedback and a clipboard fallback", async () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <CommentThread
+            comments={[{
+              id: "comment-1",
+              companyId: "company-1",
+              issueId: "issue-1",
+              authorAgentId: null,
+              authorUserId: "user-1",
+              body: "Hello from the comment body",
+              createdAt: new Date("2026-03-11T11:00:00.000Z"),
+              updatedAt: new Date("2026-03-11T11:00:00.000Z"),
+            }]}
+            onAdd={async () => {}}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    const copyButton = Array.from(container.querySelectorAll("button")).find(
+      (element) => element.getAttribute("aria-label") === "Copy comment as markdown",
+    ) as HTMLButtonElement | undefined;
+
+    expect(copyButton).toBeDefined();
+    expect(copyButton?.className).toContain("min-h-8");
+    expect(copyButton?.textContent).toContain("Copy");
+
+    Object.defineProperty(window, "isSecureContext", {
+      value: false,
+      configurable: true,
+    });
+
+    await act(async () => {
+      copyButton?.click();
+    });
+
+    expect(writeTextMock).not.toHaveBeenCalled();
+    expect(execCommandMock).toHaveBeenCalledWith("copy");
+    expect(copyButton?.textContent).toContain("Copied");
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    expect(copyButton?.textContent).toContain("Copy");
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });
diff --git a/ui/src/components/CommentThread.tsx b/ui/src/components/CommentThread.tsx
index b2125b25..062cbcf7 100644
--- a/ui/src/components/CommentThread.tsx
+++ b/ui/src/components/CommentThread.tsx
@@ -210,21 +210,71 @@ function runStatusClass(status: string) {
   }
 }
 
+async function copyTextWithFallback(text: string) {
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+
+  try {
+    textarea.select();
+    const success = document.execCommand("copy");
+    if (!success) throw new Error("execCommand copy failed");
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
 function CopyMarkdownButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
+  const [status, setStatus] = useState<"idle" | "copied" | "failed">("idle");
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+  }, []);
+
+  const label = status === "copied" ? "Copied" : status === "failed" ? "Copy failed" : "Copy";
+
   return (
     <button
       type="button"
-      className="text-muted-foreground hover:text-foreground transition-colors"
-      title="Copy as markdown"
+      className={cn(
+        "inline-flex min-h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors",
+        status === "copied"
+          ? "bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-300"
+          : status === "failed"
+            ? "bg-destructive/10 text-destructive"
+            : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+      )}
+      title={label}
+      aria-label="Copy comment as markdown"
       onClick={() => {
-        navigator.clipboard.writeText(text).then(() => {
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2000);
-        });
+        void copyTextWithFallback(text)
+          .then(() => setStatus("copied"))
+          .catch(() => setStatus("failed"));
+
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          setStatus("idle");
+          timeoutRef.current = null;
+        }, 1500);
       }}
     >
-      {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+      {status === "copied" ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+      <span className="sm:hidden">{label}</span>
+      <span className="sr-only" aria-live="polite">
+        {label}
+      </span>
     </button>
   );
 }

From 185195201a51f7792b5f51be2a4b2a24702ebb32 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 06:08:35 -0500
Subject: [PATCH 10/45] Adjust execution workspace header layout

---
 ui/src/pages/ExecutionWorkspaceDetail.tsx | 54 +++++++++++------------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/ui/src/pages/ExecutionWorkspaceDetail.tsx b/ui/src/pages/ExecutionWorkspaceDetail.tsx
index 20168b66..743fc077 100644
--- a/ui/src/pages/ExecutionWorkspaceDetail.tsx
+++ b/ui/src/pages/ExecutionWorkspaceDetail.tsx
@@ -500,29 +500,15 @@ export function ExecutionWorkspaceDetail() {
           </StatusPill>
         </div>
 
-        <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-          <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
-            <div className="min-w-0 space-y-2">
-              <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                Execution workspace
-              </div>
-              <h1 className="truncate text-xl font-semibold sm:text-2xl">{workspace.name}</h1>
-              <p className="max-w-2xl text-sm text-muted-foreground">
-                Configure the concrete runtime workspace that Paperclip reuses for this issue flow.
-                <span className="hidden sm:inline"> These settings stay attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown, and runtime-service behavior in sync with the actual workspace being reused.</span>
-              </p>
-            </div>
-            <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
-              <Button
-                variant="outline"
-                className="w-full sm:w-auto"
-                onClick={() => setCloseDialogOpen(true)}
-                disabled={workspace.status === "archived"}
-              >
-                {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
-              </Button>
-            </div>
+        <div className="space-y-2">
+          <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+            Execution workspace
           </div>
+          <h1 className="truncate text-xl font-semibold sm:text-2xl">{workspace.name}</h1>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            Configure the concrete runtime workspace that Paperclip reuses for this issue flow.
+            <span className="hidden sm:inline"> These settings stay attached to the execution workspace so future runs can keep local paths, repo refs, provisioning, teardown, and runtime-service behavior in sync with the actual workspace being reused.</span>
+          </p>
         </div>
 
         <Tabs value={activeTab ?? "configuration"} onValueChange={(value) => handleTabChange(value as ExecutionWorkspaceTab)}>
@@ -541,14 +527,24 @@ export function ExecutionWorkspaceDetail() {
           <div className="grid gap-4 sm:gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,0.95fr)]">
             <div className="min-w-0 space-y-4 sm:space-y-6">
               <div className="rounded-2xl border border-border bg-card p-4 sm:p-5">
-                <div className="space-y-1">
-                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
-                    Configuration
+                <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                      Configuration
+                    </div>
+                    <h2 className="text-lg font-semibold">Workspace settings</h2>
+                    <p className="text-sm text-muted-foreground">
+                      Edit the concrete path, repo, branch, provisioning, teardown, and runtime overrides attached to this execution workspace.
+                    </p>
                   </div>
-                  <h2 className="text-lg font-semibold">Workspace settings</h2>
-                  <p className="text-sm text-muted-foreground">
-                    Edit the concrete path, repo, branch, provisioning, teardown, and runtime overrides attached to this execution workspace.
-                  </p>
+                  <Button
+                    variant="outline"
+                    className="w-full sm:w-auto"
+                    onClick={() => setCloseDialogOpen(true)}
+                    disabled={workspace.status === "archived"}
+                  >
+                    {workspace.status === "cleanup_failed" ? "Retry close" : "Close workspace"}
+                  </Button>
                 </div>
 
                 <Separator className="my-5" />

From f5a87ab14ebb3bc15e3ed677807bce3dc96b1229 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 06:11:34 -0500
Subject: [PATCH 11/45] fix(ui): avoid issue detail ref update loops

---
 ui/src/components/MarkdownEditor.tsx | 12 +-----------
 ui/src/components/ui/button.tsx      | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx
index e8c8838b..0151400f 100644
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@@ -379,16 +379,6 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     return mentions.filter((m) => m.name.toLowerCase().includes(q)).slice(0, 8);
   }, [mentionState, mentions, slashCommands]);
 
-  const setEditorRef = useCallback((instance: MDXEditorMethods | null) => {
-    ref.current = instance;
-    if (instance) {
-      const v = valueRef.current;
-      echoIgnoreMarkdownRef.current = v;
-      instance.setMarkdown(v);
-      latestValueRef.current = v;
-    }
-  }, []);
-
   useImperativeHandle(forwardedRef, () => ({
     focus: () => {
       ref.current?.focus(undefined, { defaultSelection: "rootEnd" });
@@ -808,7 +798,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       onPasteCapture={handlePasteCapture}
     >
       <MDXEditor
-        ref={setEditorRef}
+        ref={ref}
         markdown={value}
         placeholder={placeholder}
         onChange={(next) => {
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index e9933291..fb4efaee 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -38,20 +38,24 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean
+    }
+>(function Button({
   className,
   variant = "default",
   size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
+}, ref) {
   const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       data-variant={variant}
       data-size={size}
@@ -59,6 +63,8 @@ function Button({
       {...props}
     />
   )
-}
+})
+
+Button.displayName = "Button"
 
 export { Button, buttonVariants }

From 9159b44fcc03ac744d9c9fdd774691ee7058fc6d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 06:19:27 -0500
Subject: [PATCH 12/45] fix(ui): update inbox badge test inputs

---
 ui/src/lib/inbox.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/src/lib/inbox.test.ts b/ui/src/lib/inbox.test.ts
index 8bcf0738..f34f2a7b 100644
--- a/ui/src/lib/inbox.test.ts
+++ b/ui/src/lib/inbox.test.ts
@@ -327,6 +327,8 @@ describe("inbox helpers", () => {
       heartbeatRuns: [],
       mineIssues: [makeIssue("1", false), makeIssue("2", false), makeIssue("3", true)],
       dismissed: new Set<string>(),
+      dismissedAlerts: new Set<string>(),
+      dismissedAtByKey: new Map(),
     });
 
     expect(result.mineIssues).toBe(1);

From 2ec2b1f1ebba1e2282ce628465e11e5b8e9a9da7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 06:42:25 -0500
Subject: [PATCH 13/45] fix(ui): improve shimmer gradient and add
 Working/Worked tokens to Chat UX Lab

Rework the shimmer-text CSS to use a Cursor-style sweep: full-opacity base
with a narrow transparent highlight band that slides across, linear timing,
tighter background-size. Add a "Status tokens" section to the Issue Chat UX
Lab showing both the active shimmer "Working" state and the static "Worked"
state side-by-side for quick visual review.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css                | 22 ++++++++++---------
 ui/src/pages/IssueChatUxLab.tsx | 39 ++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 807a1100..625da487 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -294,26 +294,28 @@
   }
 }
 
-/* Shimmer text effect for active "Working" state */
+/* Shimmer text effect for active "Working" state — Cursor-style sweep */
 @keyframes shimmer-text-slide {
-  0% { background-position: 200% center; }
-  100% { background-position: -200% center; }
+  0% { background-position: -100% center; }
+  100% { background-position: 200% center; }
 }
 
 .shimmer-text {
-  --shimmer-base: hsl(var(--foreground) / 0.75);
-  --shimmer-highlight: hsl(var(--foreground) / 0.3);
+  --shimmer-base: hsl(var(--foreground));
+  --shimmer-highlight: hsl(var(--foreground) / 0.35);
   background: linear-gradient(
-    110deg,
-    var(--shimmer-base) 35%,
+    90deg,
+    var(--shimmer-base) 0%,
+    var(--shimmer-base) 40%,
     var(--shimmer-highlight) 50%,
-    var(--shimmer-base) 65%
+    var(--shimmer-base) 60%,
+    var(--shimmer-base) 100%
   );
-  background-size: 250% 100%;
+  background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: shimmer-text-slide 2.5s ease-in-out infinite;
+  animation: shimmer-text-slide 2s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/ui/src/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx
index f752fa90..fa9a889b 100644
--- a/ui/src/pages/IssueChatUxLab.tsx
+++ b/ui/src/pages/IssueChatUxLab.tsx
@@ -17,7 +17,7 @@ import {
   issueChatUxTranscriptsByRunId,
 } from "../fixtures/issueChatUxFixtures";
 import { cn } from "../lib/utils";
-import { Bot, Brain, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
+import { Bot, Brain, FlaskConical, Loader2, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
 
 const noop = async () => {};
 
@@ -216,6 +216,43 @@ export function IssueChatUxLab() {
         </div>
       </LabSection>
 
+      <LabSection
+        id="working-tokens"
+        eyebrow="Status tokens"
+        title="Working / Worked header verb"
+        description='The "Working" token uses the shimmer-text gradient sweep to signal an active run. Once the run completes it becomes the static "Worked" token.'
+        accentClassName="bg-[linear-gradient(180deg,rgba(16,185,129,0.06),transparent_28%),var(--background)]"
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Active run — shimmer
+            </div>
+            <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+                <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+                <span className="shimmer-text">Working</span>
+              </span>
+              <span className="text-xs text-muted-foreground/60">for 12s</span>
+            </div>
+          </div>
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Completed run — static
+            </div>
+            <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
+                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-500/70" />
+                </span>
+                Worked
+              </span>
+              <span className="text-xs text-muted-foreground/60">for 1 min 24s</span>
+            </div>
+          </div>
+        </div>
+      </LabSection>
+
       <LabSection
         id="live-execution"
         eyebrow="Primary preview"

From c830c647276b5d57006a6bbec2759add1a88aec9 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:03:12 -0500
Subject: [PATCH 14/45] fix(ui): fix shimmer text using invalid hsl() wrapper
 on oklch colors

--foreground is defined as oklch(), not HSL channels. Wrapping it in
hsl() produced an invalid color, making the shimmer text invisible.
Use var(--foreground) directly and color-mix() for the highlight band.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 625da487..b14e25ad 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -301,8 +301,8 @@
 }
 
 .shimmer-text {
-  --shimmer-base: hsl(var(--foreground));
-  --shimmer-highlight: hsl(var(--foreground) / 0.35);
+  --shimmer-base: var(--foreground);
+  --shimmer-highlight: color-mix(in oklch, var(--foreground) 35%, transparent);
   background: linear-gradient(
     90deg,
     var(--shimmer-base) 0%,

From d0920da4596eabc1e458873e01d15103856f90b3 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:09:01 -0500
Subject: [PATCH 15/45] feat(ui): open gallery when clicking images in chat
 messages

Clicking an image in a chat message now opens the same ImageGalleryModal
used by the attachments gallery. Matches by contentPath or assetId.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.tsx |  8 +++++++-
 ui/src/components/MarkdownBody.tsx    | 19 +++++++++++++++----
 ui/src/pages/IssueDetail.tsx          | 23 +++++++++++++++++++++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 3650aa81..ed409314 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -80,6 +80,7 @@ interface IssueChatMessageContext {
   ) => Promise<void>;
   onInterruptQueued?: (runId: string) => Promise<void>;
   interruptingQueuedRunId?: string | null;
+  onImageClick?: (src: string) => void;
 }
 
 const IssueChatCtx = createContext<IssueChatMessageContext>({
@@ -184,6 +185,7 @@ interface IssueChatThreadProps {
   includeSucceededRunsWithoutOutput?: boolean;
   onInterruptQueued?: (runId: string) => Promise<void>;
   interruptingQueuedRunId?: string | null;
+  onImageClick?: (src: string) => void;
 }
 
 const DRAFT_DEBOUNCE_MS = 800;
@@ -246,8 +248,9 @@ function commentDateLabel(date: Date | string | undefined): string {
 }
 
 function IssueChatTextPart({ text, recessed }: { text: string; recessed?: boolean }) {
+  const { onImageClick } = useContext(IssueChatCtx);
   return (
-    <MarkdownBody className="text-sm leading-6" style={recessed ? { opacity: 0.55 } : undefined}>
+    <MarkdownBody className="text-sm leading-6" style={recessed ? { opacity: 0.55 } : undefined} onImageClick={onImageClick}>
       {text}
     </MarkdownBody>
   );
@@ -1604,6 +1607,7 @@ export function IssueChatThread({
   includeSucceededRunsWithoutOutput = false,
   onInterruptQueued,
   interruptingQueuedRunId = null,
+  onImageClick,
 }: IssueChatThreadProps) {
   const location = useLocation();
   const hasScrolledRef = useRef(false);
@@ -1731,6 +1735,7 @@ export function IssueChatThread({
       onVote,
       onInterruptQueued,
       interruptingQueuedRunId,
+      onImageClick,
     }),
     [
       feedbackVoteByTargetId,
@@ -1741,6 +1746,7 @@ export function IssueChatThread({
       onVote,
       onInterruptQueued,
       interruptingQueuedRunId,
+      onImageClick,
     ],
   );
 
diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index b5cc12d7..a4542607 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -11,6 +11,8 @@ interface MarkdownBodyProps {
   style?: React.CSSProperties;
   /** Optional resolver for relative image paths (e.g. within export packages) */
   resolveImageSrc?: (src: string) => string | null;
+  /** Called when a user clicks an inline image */
+  onImageClick?: (src: string) => void;
 }
 
 let mermaidLoaderPromise: Promise<typeof import("mermaid").default> | null = null;
@@ -92,7 +94,7 @@ function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: b
   );
 }
 
-export function MarkdownBody({ children, className, style, resolveImageSrc }: MarkdownBodyProps) {
+export function MarkdownBody({ children, className, style, resolveImageSrc, onImageClick }: MarkdownBodyProps) {
   const { theme } = useTheme();
   const components: Components = {
     pre: ({ node: _node, children: preChildren, ...preProps }) => {
@@ -132,10 +134,19 @@ export function MarkdownBody({ children, className, style, resolveImageSrc }: Ma
       );
     },
   };
-  if (resolveImageSrc) {
+  if (resolveImageSrc || onImageClick) {
     components.img = ({ node: _node, src, alt, ...imgProps }) => {
-      const resolved = src ? resolveImageSrc(src) : null;
-      return <img {...imgProps} src={resolved ?? src} alt={alt ?? ""} />;
+      const resolved = resolveImageSrc && src ? resolveImageSrc(src) : null;
+      const finalSrc = resolved ?? src;
+      return (
+        <img
+          {...imgProps}
+          src={finalSrc}
+          alt={alt ?? ""}
+          onClick={onImageClick && finalSrc ? (e) => { e.preventDefault(); onImageClick(finalSrc); } : undefined}
+          style={onImageClick ? { cursor: "pointer", ...(imgProps.style as React.CSSProperties | undefined) } : imgProps.style as React.CSSProperties | undefined}
+        />
+      );
     };
   }
 
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 60b0a9db..066f455b 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -1356,6 +1356,28 @@ export function IssueDetail() {
   const attachmentList = attachments ?? [];
   const imageAttachments = attachmentList.filter(isImageAttachment);
   const nonImageAttachments = attachmentList.filter((a) => !isImageAttachment(a));
+
+  const handleChatImageClick = useCallback(
+    (src: string) => {
+      // Try exact contentPath match first
+      let idx = imageAttachments.findIndex((a) => a.contentPath === src);
+      if (idx < 0) {
+        // Try matching by asset ID extracted from /api/assets/{assetId}/content URLs
+        const assetMatch = src.match(/\/api\/assets\/([^/]+)\/content/);
+        if (assetMatch) {
+          idx = imageAttachments.findIndex((a) => a.assetId === assetMatch[1]);
+        }
+      }
+      if (idx >= 0) {
+        setGalleryIndex(idx);
+        setGalleryOpen(true);
+      } else {
+        // Image not in attachment list — open in new tab
+        window.open(src, "_blank");
+      }
+    },
+    [imageAttachments],
+  );
   const hasAttachments = attachmentList.length > 0;
   const attachmentUploadButton = (
     <>
@@ -1897,6 +1919,7 @@ export function IssueDetail() {
                   await interruptQueuedComment.mutateAsync(runningIssueRun.id);
                 }
               : undefined}
+            onImageClick={handleChatImageClick}
           />
         </TabsContent>
 

From f75c0c317cf2207b7e060ca0e8551dd91b6e418d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:20:24 -0500
Subject: [PATCH 16/45] fix(ui): move useCallback hook before early returns in
 IssueDetail

The handleChatImageClick useCallback (and its dependencies) was defined
after conditional early returns, violating React's rules of hooks and
causing "Rendered more hooks than during the previous render" crashes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/IssueDetail.tsx | 53 ++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 066f455b..9c3a417b 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -1301,6 +1301,33 @@ export function IssueDetail() {
     };
   }, [archiveFromInbox, canQuickArchiveFromInbox, issue?.id]);
 
+  const isImageAttachment = (attachment: IssueAttachment) => attachment.contentType.startsWith("image/");
+  const attachmentList = attachments ?? [];
+  const imageAttachments = attachmentList.filter(isImageAttachment);
+  const nonImageAttachments = attachmentList.filter((a) => !isImageAttachment(a));
+
+  const handleChatImageClick = useCallback(
+    (src: string) => {
+      // Try exact contentPath match first
+      let idx = imageAttachments.findIndex((a) => a.contentPath === src);
+      if (idx < 0) {
+        // Try matching by asset ID extracted from /api/assets/{assetId}/content URLs
+        const assetMatch = src.match(/\/api\/assets\/([^/]+)\/content/);
+        if (assetMatch) {
+          idx = imageAttachments.findIndex((a) => a.assetId === assetMatch[1]);
+        }
+      }
+      if (idx >= 0) {
+        setGalleryIndex(idx);
+        setGalleryOpen(true);
+      } else {
+        // Image not in attachment list — open in new tab
+        window.open(src, "_blank");
+      }
+    },
+    [imageAttachments],
+  );
+
   const copyIssueToClipboard = async () => {
     if (!issue) return;
     const decodeEntities = (text: string) => {
@@ -1352,32 +1379,6 @@ export function IssueDetail() {
     }
   };
 
-  const isImageAttachment = (attachment: IssueAttachment) => attachment.contentType.startsWith("image/");
-  const attachmentList = attachments ?? [];
-  const imageAttachments = attachmentList.filter(isImageAttachment);
-  const nonImageAttachments = attachmentList.filter((a) => !isImageAttachment(a));
-
-  const handleChatImageClick = useCallback(
-    (src: string) => {
-      // Try exact contentPath match first
-      let idx = imageAttachments.findIndex((a) => a.contentPath === src);
-      if (idx < 0) {
-        // Try matching by asset ID extracted from /api/assets/{assetId}/content URLs
-        const assetMatch = src.match(/\/api\/assets\/([^/]+)\/content/);
-        if (assetMatch) {
-          idx = imageAttachments.findIndex((a) => a.assetId === assetMatch[1]);
-        }
-      }
-      if (idx >= 0) {
-        setGalleryIndex(idx);
-        setGalleryOpen(true);
-      } else {
-        // Image not in attachment list — open in new tab
-        window.open(src, "_blank");
-      }
-    },
-    [imageAttachments],
-  );
   const hasAttachments = attachmentList.length > 0;
   const attachmentUploadButton = (
     <>

From 1a82646e9db33ad25ed03b2b6260908a9b8e8bc7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:24:19 -0500
Subject: [PATCH 17/45] fix(ui): fix shimmer animation loop jitter by keeping
 gradient in view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shimmer keyframes animated from -100% to 200%, pushing the gradient
fully off-screen at both extremes. On loop restart the text flashed
invisible for a frame. Changed to 100%→0% so the gradient always
overlaps the visible area — both endpoints show solid base-color text
and the highlight sweeps smoothly through without discontinuity.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index b14e25ad..c1b9026a 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -296,8 +296,8 @@
 
 /* Shimmer text effect for active "Working" state — Cursor-style sweep */
 @keyframes shimmer-text-slide {
-  0% { background-position: -100% center; }
-  100% { background-position: 200% center; }
+  0% { background-position: 100% center; }
+  100% { background-position: 0% center; }
 }
 
 .shimmer-text {
@@ -315,7 +315,7 @@
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: shimmer-text-slide 2s linear infinite;
+  animation: shimmer-text-slide 1.5s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {

From 7edd2f79469929dcd02b44cfd73eef5694e7ee89 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:33:27 -0500
Subject: [PATCH 18/45] fix(ui): add pause between shimmer animation repeats

The sweep now completes at 60% of the cycle and holds for the
remaining 40%, giving a ~1s pause before repeating. Total cycle
duration increased from 1.5s to 2.5s.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index c1b9026a..70f2edb3 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -297,6 +297,7 @@
 /* Shimmer text effect for active "Working" state — Cursor-style sweep */
 @keyframes shimmer-text-slide {
   0% { background-position: 100% center; }
+  60% { background-position: 0% center; }
   100% { background-position: 0% center; }
 }
 
@@ -315,7 +316,7 @@
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: shimmer-text-slide 1.5s linear infinite;
+  animation: shimmer-text-slide 2.5s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {

From 28a28d1cb6505542f2745613c0e4fd770941860d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:44:43 -0500
Subject: [PATCH 19/45] fix(ui): eliminate flash when auto-folding work
 sections on page load

Replace useEffect with synchronous state derivation during render so
the browser never paints the unfolded intermediate state. This prevents
the visible "jump" when loading an issue page with already-completed
work sections like "worked for 4 minutes".

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index ed409314..1372fa1c 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -820,23 +820,24 @@ function IssueChatAssistantMessage() {
   const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call");
   const isFoldable = !isRunning && hasCoT && !!chainOfThoughtLabel;
   const [folded, setFolded] = useState(isFoldable);
-  const previousMessageIdRef = useRef<string | null>(message.id);
-  const previousIsFoldableRef = useRef(isFoldable);
+  const [prevFoldKey, setPrevFoldKey] = useState({ messageId: message.id, isFoldable });
 
-  useEffect(() => {
+  // Derive fold state synchronously during render (not in useEffect) so the
+  // browser never paints the un-folded intermediate state — prevents the
+  // visible "jump" when loading a page with already-folded work sections.
+  if (message.id !== prevFoldKey.messageId || isFoldable !== prevFoldKey.isFoldable) {
     const nextFolded = resolveAssistantMessageFoldedState({
       messageId: message.id,
       currentFolded: folded,
       isFoldable,
-      previousMessageId: previousMessageIdRef.current,
-      previousIsFoldable: previousIsFoldableRef.current,
+      previousMessageId: prevFoldKey.messageId,
+      previousIsFoldable: prevFoldKey.isFoldable,
     });
-    previousMessageIdRef.current = message.id;
-    previousIsFoldableRef.current = isFoldable;
+    setPrevFoldKey({ messageId: message.id, isFoldable });
     if (nextFolded !== folded) {
       setFolded(nextFolded);
     }
-  }, [folded, isFoldable, message.id]);
+  }
 
   const handleVote = async (
     vote: FeedbackVoteValue,

From c5ccafbb8018f0c1dc0a3fa74d9cad7d95489606 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:52:06 -0500
Subject: [PATCH 20/45] fix(ui): show shimmer and icon on initial Working...
 state for new agent runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eliminates two visual glitches when a new agent run starts:
1. The initial "Working..." was rendered as plain text without the shimmer
   animation or agent icon — now matches the proper working state styling.
2. A brief blank flash occurred when transcript chunks arrived but hadn't
   produced parseable parts yet — fixed by deriving waitingText from parts
   availability instead of the hasOutput flag.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.tsx | 13 ++++++++++---
 ui/src/lib/issue-chat-messages.ts     | 12 +++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 1372fa1c..220de8ec 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -818,7 +818,7 @@ function IssueChatAssistantMessage() {
   const runHref = runId && runAgentId ? `/agents/${runAgentId}/runs/${runId}` : null;
   const chainOfThoughtLabel = typeof custom.chainOfThoughtLabel === "string" ? custom.chainOfThoughtLabel : null;
   const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call");
-  const isFoldable = !isRunning && hasCoT && !!chainOfThoughtLabel;
+  const isFoldable = !isRunning && !!chainOfThoughtLabel;
   const [folded, setFolded] = useState(isFoldable);
   const [prevFoldKey, setPrevFoldKey] = useState({ messageId: message.id, isFoldable });
 
@@ -900,8 +900,15 @@ function IssueChatAssistantMessage() {
                   }}
                 />
                 {message.content.length === 0 && waitingText ? (
-                  <div className="rounded-sm bg-accent/20 px-3 py-2 text-sm text-muted-foreground">
-                    {waitingText}
+                  <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
+                    <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+                      {agentIcon ? (
+                        <AgentIcon icon={agentIcon} className="h-4 w-4 shrink-0" />
+                      ) : (
+                        <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+                      )}
+                      <span className="shimmer-text">{waitingText}</span>
+                    </span>
                   </div>
                 ) : null}
                 {notices.length > 0 ? (
diff --git a/ui/src/lib/issue-chat-messages.ts b/ui/src/lib/issue-chat-messages.ts
index 09c615f6..47e0a29e 100644
--- a/ui/src/lib/issue-chat-messages.ts
+++ b/ui/src/lib/issue-chat-messages.ts
@@ -593,22 +593,17 @@ function normalizeLiveRuns(
 function createLiveRunMessage(args: {
   run: LiveRunForIssue;
   transcript: readonly IssueChatTranscriptEntry[];
-  hasOutput: boolean;
 }) {
-  const { run, transcript, hasOutput } = args;
+  const { run, transcript } = args;
   const { parts, notices, segments } = buildAssistantPartsFromTranscript(transcript);
   const waitingText =
     run.status === "queued"
       ? "Queued..."
-      : hasOutput
+      : parts.length > 0
         ? ""
         : "Working...";
 
-  const content = parts.length > 0
-    ? parts
-    : waitingText
-      ? [{ type: "text", text: waitingText } satisfies TextMessagePart]
-      : [];
+  const content = parts;
 
   const message: ThreadAssistantMessage = {
     id: `live-run:${run.id}`,
@@ -712,7 +707,6 @@ export function buildIssueChatMessages(args: {
       message: createLiveRunMessage({
         run,
         transcript: transcriptsByRunId?.get(run.id) ?? [],
-        hasOutput: hasOutputForRun?.(run.id) ?? false,
       }),
     });
   }

From 097f30b1389f9d46ef288791b101e9407d89f411 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 07:52:57 -0500
Subject: [PATCH 21/45] feat(ui): nest parent-child issues in inbox/mine view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Groups child issues under their parent in the inbox, matching the
nesting pattern used on the issues list page. Parent groups sort by
the most recent activity across all family members. Archived parents
don't hide their children — orphans show independently.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/lib/inbox.ts    |  62 ++++++++++++
 ui/src/pages/Inbox.tsx | 210 ++++++++++++++++++++++++++++-------------
 2 files changed, 207 insertions(+), 65 deletions(-)

diff --git a/ui/src/lib/inbox.ts b/ui/src/lib/inbox.ts
index a69bd6c7..d2f9c1be 100644
--- a/ui/src/lib/inbox.ts
+++ b/ui/src/lib/inbox.ts
@@ -314,6 +314,68 @@ export function getInboxWorkItems({
   });
 }
 
+/**
+ * Groups parent-child issues in a flat InboxWorkItem list.
+ *
+ * - Children whose parent is also in the list are removed from the top level
+ *   and stored in `childrenByIssueId`.
+ * - The parent's sort timestamp becomes max(parent, children) so that a group
+ *   with a recently-updated child floats to the top.
+ * - If a parent is absent (e.g. archived), children remain as independent roots.
+ */
+export function buildInboxNesting(items: InboxWorkItem[]): {
+  displayItems: InboxWorkItem[];
+  childrenByIssueId: Map<string, Issue[]>;
+} {
+  const issueItems: (InboxWorkItem & { kind: "issue" })[] = [];
+  const nonIssueItems: InboxWorkItem[] = [];
+  for (const item of items) {
+    if (item.kind === "issue") issueItems.push(item as InboxWorkItem & { kind: "issue" });
+    else nonIssueItems.push(item);
+  }
+
+  const issueIdSet = new Set(issueItems.map((i) => i.issue.id));
+  const childrenByIssueId = new Map<string, Issue[]>();
+  const childIds = new Set<string>();
+
+  for (const item of issueItems) {
+    const { issue } = item;
+    if (issue.parentId && issueIdSet.has(issue.parentId)) {
+      childIds.add(issue.id);
+      const arr = childrenByIssueId.get(issue.parentId) ?? [];
+      arr.push(issue);
+      childrenByIssueId.set(issue.parentId, arr);
+    }
+  }
+
+  // Sort each child list by most recent activity
+  for (const children of childrenByIssueId.values()) {
+    children.sort(sortIssuesByMostRecentActivity);
+  }
+
+  // Build root issue items with group-adjusted timestamps
+  const rootIssueItems: InboxWorkItem[] = issueItems
+    .filter((item) => !childIds.has(item.issue.id))
+    .map((item) => {
+      const children = childrenByIssueId.get(item.issue.id);
+      if (!children?.length) return item;
+      const maxChildTs = Math.max(...children.map(issueLastActivityTimestamp));
+      return { ...item, timestamp: Math.max(item.timestamp, maxChildTs) };
+    });
+
+  // Merge and re-sort
+  const displayItems = [...rootIssueItems, ...nonIssueItems].sort((a, b) => {
+    const diff = b.timestamp - a.timestamp;
+    if (diff !== 0) return diff;
+    if (a.kind === "issue" && b.kind === "issue") {
+      return sortIssuesByMostRecentActivity(a.issue, b.issue);
+    }
+    return 0;
+  });
+
+  return { displayItems, childrenByIssueId };
+}
+
 export function shouldShowInboxSection({
   tab,
   hasItems,
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 075c50d7..d6872ff9 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -62,6 +62,7 @@ import {
 import {
   Inbox as InboxIcon,
   AlertTriangle,
+  ChevronRight,
   XCircle,
   X,
   RotateCcw,
@@ -74,6 +75,7 @@ import type { Approval, HeartbeatRun, Issue, JoinRequest } from "@paperclipai/sh
 import {
   ACTIONABLE_APPROVAL_STATUSES,
   DEFAULT_INBOX_ISSUE_COLUMNS,
+  buildInboxNesting,
   getAvailableInboxIssueColumns,
   getApprovalsForTab,
   getInboxWorkItems,
@@ -900,6 +902,21 @@ export function Inbox() {
     projectWorkspaceById,
   ]);
 
+  // --- Parent-child nesting for inbox issues ---
+  const [collapsedInboxParents, setCollapsedInboxParents] = useState<Set<string>>(new Set());
+  const { displayItems: nestedWorkItems, childrenByIssueId } = useMemo(
+    () => buildInboxNesting(filteredWorkItems),
+    [filteredWorkItems],
+  );
+  const toggleInboxParentCollapse = useCallback((parentId: string) => {
+    setCollapsedInboxParents((prev) => {
+      const next = new Set(prev);
+      if (next.has(parentId)) next.delete(parentId);
+      else next.add(parentId);
+      return next;
+    });
+  }, []);
+
   const agentName = (id: string | null) => {
     if (!id) return null;
     return agentById.get(id) ?? null;
@@ -1169,12 +1186,12 @@ export function Inbox() {
 
   // Keep selection valid when the list shape changes, but do not auto-select on initial load.
   useEffect(() => {
-    setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, filteredWorkItems.length));
-  }, [filteredWorkItems.length]);
+    setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, nestedWorkItems.length));
+  }, [nestedWorkItems.length]);
 
   // Use refs for keyboard handler to avoid stale closures
   const kbStateRef = useRef({
-    workItems: filteredWorkItems,
+    workItems: nestedWorkItems,
     selectedIndex,
     canArchive: canArchiveFromTab,
     archivingIssueIds,
@@ -1183,7 +1200,7 @@ export function Inbox() {
     readItems,
   });
   kbStateRef.current = {
-    workItems: filteredWorkItems,
+    workItems: nestedWorkItems,
     selectedIndex,
     canArchive: canArchiveFromTab,
     archivingIssueIds,
@@ -1339,7 +1356,7 @@ export function Inbox() {
     dashboard.costs.monthUtilizationPercent >= 80 &&
     !dismissed.has("alert:budget");
   const hasAlerts = showAggregateAgentError || showBudgetAlert;
-  const showWorkItemsSection = filteredWorkItems.length > 0;
+  const showWorkItemsSection = nestedWorkItems.length > 0;
   const showAlertsSection = shouldShowInboxSection({
     tab,
     hasItems: hasAlerts,
@@ -1526,7 +1543,7 @@ export function Inbox() {
           {showSeparatorBefore("work_items") && <Separator />}
           <div>
             <div ref={listRef} className="overflow-hidden rounded-xl border border-border bg-card">
-              {filteredWorkItems.flatMap((item, index) => {
+              {nestedWorkItems.flatMap((item, index) => {
                 const wrapItem = (key: string, isSelected: boolean, child: ReactNode) => (
                   <div
                     key={`sel-${key}`}
@@ -1542,7 +1559,7 @@ export function Inbox() {
                   index > 0 &&
                   item.timestamp > 0 &&
                   item.timestamp < todayCutoff &&
-                  filteredWorkItems[index - 1].timestamp >= todayCutoff;
+                  nestedWorkItems[index - 1].timestamp >= todayCutoff;
                 const elements: ReactNode[] = [];
                 if (showTodayDivider) {
                   elements.push(
@@ -1666,72 +1683,135 @@ export function Inbox() {
                 }
 
                 const issue = item.issue;
-                const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id);
-                const isFading = fadingOutIssues.has(issue.id);
-                const isArchiving = archivingIssueIds.has(issue.id);
-                const issueProject = issue.projectId ? projectById.get(issue.projectId) ?? null : null;
-                const row = (
-                  <IssueRow
-                    key={`issue:${issue.id}`}
-                    issue={issue}
-                    issueLinkState={issueLinkState}
-                    selected={isSelected}
-                    className={
-                      isArchiving
-                        ? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
-                        : "transition-all duration-200 ease-out"
-                    }
-                    desktopMetaLeading={
-                      <InboxIssueMetaLeading
-                        issue={issue}
-                        isLive={liveIssueIds.has(issue.id)}
-                        showStatus={visibleIssueColumnSet.has("status") && availableIssueColumnSet.has("status")}
-                        showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
-                      />
-                    }
-                    mobileMeta={issueActivityText(issue).toLowerCase()}
-                    unreadState={
-                      isUnread ? "visible" : isFading ? "fading" : "hidden"
-                    }
-                    onMarkRead={() => markReadMutation.mutate(issue.id)}
-                    onArchive={
-                      canArchiveFromTab
-                        ? () => archiveIssueMutation.mutate(issue.id)
-                        : undefined
-                    }
-                    archiveDisabled={isArchiving || archiveIssueMutation.isPending}
-                    desktopTrailing={
-                      visibleTrailingIssueColumns.length > 0 ? (
-                        <InboxIssueTrailingColumns
-                          issue={issue}
-                          columns={visibleTrailingIssueColumns}
-                          projectName={issueProject?.name ?? null}
-                          projectColor={issueProject?.color ?? null}
-                          workspaceName={resolveIssueWorkspaceName(issue, {
-                            executionWorkspaceById,
-                            projectWorkspaceById,
-                            defaultProjectWorkspaceIdByProjectId,
-                          })}
-                          assigneeName={agentName(issue.assigneeAgentId)}
-                          currentUserId={currentUserId}
-                          parentIdentifier={issue.parentId ? (issueById.get(issue.parentId)?.identifier ?? null) : null}
-                          parentTitle={issue.parentId ? (issueById.get(issue.parentId)?.title ?? null) : null}
-                        />
-                      ) : undefined
-                    }
-                  />
-                );
+                const childIssues = childrenByIssueId.get(issue.id) ?? [];
+                const hasChildren = childIssues.length > 0;
+                const isExpanded = hasChildren && !collapsedInboxParents.has(issue.id);
 
+                const renderInboxIssue = (iss: Issue, depth: number, sel: boolean) => {
+                  const isUnread = iss.isUnreadForMe && !fadingOutIssues.has(iss.id);
+                  const isFading = fadingOutIssues.has(iss.id);
+                  const isArch = archivingIssueIds.has(iss.id);
+                  const proj = iss.projectId ? projectById.get(iss.projectId) ?? null : null;
+                  return (
+                    <IssueRow
+                      key={`issue:${iss.id}`}
+                      issue={iss}
+                      issueLinkState={issueLinkState}
+                      selected={sel}
+                      className={
+                        isArch
+                          ? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
+                          : "transition-all duration-200 ease-out"
+                      }
+                      desktopMetaLeading={
+                        <>
+                          {depth === 0 && hasChildren ? (
+                            <button
+                              type="button"
+                              className="hidden shrink-0 items-center sm:inline-flex"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                toggleInboxParentCollapse(issue.id);
+                              }}
+                            >
+                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
+                            </button>
+                          ) : depth === 0 ? null : (
+                            <span className="hidden w-3.5 shrink-0 sm:block" />
+                          )}
+                          <InboxIssueMetaLeading
+                            issue={iss}
+                            isLive={liveIssueIds.has(iss.id)}
+                            showStatus={visibleIssueColumnSet.has("status") && availableIssueColumnSet.has("status")}
+                            showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
+                          />
+                        </>
+                      }
+                      titleSuffix={hasChildren && !isExpanded && depth === 0 ? (
+                        <span className="ml-1.5 text-xs text-muted-foreground">
+                          ({childIssues.length} sub-task{childIssues.length !== 1 ? "s" : ""})
+                        </span>
+                      ) : undefined}
+                      mobileMeta={issueActivityText(iss).toLowerCase()}
+                      mobileLeading={
+                        depth === 0 && hasChildren ? (
+                          <button type="button" onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            toggleInboxParentCollapse(issue.id);
+                          }}>
+                            <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
+                          </button>
+                        ) : undefined
+                      }
+                      unreadState={
+                        isUnread ? "visible" : isFading ? "fading" : "hidden"
+                      }
+                      onMarkRead={() => markReadMutation.mutate(iss.id)}
+                      onArchive={
+                        canArchiveFromTab
+                          ? () => archiveIssueMutation.mutate(iss.id)
+                          : undefined
+                      }
+                      archiveDisabled={isArch || archiveIssueMutation.isPending}
+                      desktopTrailing={
+                        visibleTrailingIssueColumns.length > 0 ? (
+                          <InboxIssueTrailingColumns
+                            issue={iss}
+                            columns={visibleTrailingIssueColumns}
+                            projectName={proj?.name ?? null}
+                            projectColor={proj?.color ?? null}
+                            workspaceName={resolveIssueWorkspaceName(iss, {
+                              executionWorkspaceById,
+                              projectWorkspaceById,
+                              defaultProjectWorkspaceIdByProjectId,
+                            })}
+                            assigneeName={agentName(iss.assigneeAgentId)}
+                            currentUserId={currentUserId}
+                            parentIdentifier={iss.parentId ? (issueById.get(iss.parentId)?.identifier ?? null) : null}
+                            parentTitle={iss.parentId ? (issueById.get(iss.parentId)?.title ?? null) : null}
+                          />
+                        ) : undefined
+                      }
+                    />
+                  );
+                };
+
+                // Render parent issue
+                const parentRow = renderInboxIssue(issue, 0, isSelected);
                 elements.push(wrapItem(`issue:${issue.id}`, isSelected, canArchiveFromTab ? (
                   <SwipeToArchive
                     key={`issue:${issue.id}`}
                     selected={isSelected}
-                    disabled={isArchiving || archiveIssueMutation.isPending}
+                    disabled={archivingIssueIds.has(issue.id) || archiveIssueMutation.isPending}
                     onArchive={() => archiveIssueMutation.mutate(issue.id)}
                   >
-                    {row}
+                    {parentRow}
                   </SwipeToArchive>
-                ) : row));
+                ) : parentRow));
+
+                // Render children if expanded
+                if (isExpanded) {
+                  for (const child of childIssues) {
+                    const childRow = renderInboxIssue(child, 1, false);
+                    const isChildArchiving = archivingIssueIds.has(child.id);
+                    elements.push(
+                      <div key={`sel-issue:${child.id}`} data-inbox-item className="relative" style={{ paddingLeft: 16 }}>
+                        {canArchiveFromTab ? (
+                          <SwipeToArchive
+                            key={`issue:${child.id}`}
+                            selected={false}
+                            disabled={isChildArchiving || archiveIssueMutation.isPending}
+                            onArchive={() => archiveIssueMutation.mutate(child.id)}
+                          >
+                            {childRow}
+                          </SwipeToArchive>
+                        ) : childRow}
+                      </div>,
+                    );
+                  }
+                }
                 return elements;
               })}
             </div>

From d3e66c789e01b45a1d0c840b92e2ade5228f1cf8 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:07:31 -0500
Subject: [PATCH 22/45] feat(ui): add toggle button for inbox parent-child
 nesting

Adds a ListTree icon button in the inbox top bar to toggle nesting
on/off. Preference is persisted in localStorage. When disabled, all
issues display as a flat list without grouping.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/lib/inbox.ts    | 18 ++++++++++++++++++
 ui/src/pages/Inbox.tsx | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/ui/src/lib/inbox.ts b/ui/src/lib/inbox.ts
index d2f9c1be..925870cb 100644
--- a/ui/src/lib/inbox.ts
+++ b/ui/src/lib/inbox.ts
@@ -7,6 +7,7 @@ export const DISMISSED_KEY = "paperclip:inbox:dismissed";
 export const READ_ITEMS_KEY = "paperclip:inbox:read-items";
 export const INBOX_LAST_TAB_KEY = "paperclip:inbox:last-tab";
 export const INBOX_ISSUE_COLUMNS_KEY = "paperclip:inbox:issue-columns";
+export const INBOX_NESTING_KEY = "paperclip:inbox:nesting";
 export type InboxTab = "mine" | "recent" | "unread" | "all";
 export type InboxApprovalFilter = "all" | "actionable" | "resolved";
 export const inboxIssueColumns = ["status", "id", "assignee", "project", "workspace", "parent", "labels", "updated"] as const;
@@ -151,6 +152,23 @@ export function resolveIssueWorkspaceName(
   return null;
 }
 
+export function loadInboxNesting(): boolean {
+  try {
+    const raw = localStorage.getItem(INBOX_NESTING_KEY);
+    return raw !== "false";
+  } catch {
+    return true;
+  }
+}
+
+export function saveInboxNesting(enabled: boolean) {
+  try {
+    localStorage.setItem(INBOX_NESTING_KEY, String(enabled));
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
 export function loadLastInboxTab(): InboxTab {
   try {
     const raw = localStorage.getItem(INBOX_LAST_TAB_KEY);
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index d6872ff9..79358364 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -68,6 +68,7 @@ import {
   RotateCcw,
   UserPlus,
   Search,
+  ListTree,
 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { PageTabBar } from "../components/PageTabBar";
@@ -84,10 +85,12 @@ import {
   getRecentTouchedIssues,
   isMineInboxTab,
   loadInboxIssueColumns,
+  loadInboxNesting,
   normalizeInboxIssueColumns,
   resolveIssueWorkspaceName,
   resolveInboxSelectionIndex,
   saveInboxIssueColumns,
+  saveInboxNesting,
   InboxApprovalFilter,
   type InboxIssueColumn,
   saveLastInboxTab,
@@ -110,6 +113,11 @@ type SectionKey =
   | "work_items"
   | "alerts";
 
+/** A flat navigation entry for keyboard j/k traversal that includes expanded children. */
+type NavEntry =
+  | { type: "top"; index: number; item: InboxWorkItem }
+  | { type: "child"; parentIndex: number; issue: Issue };
+
 function firstNonEmptyLine(value: string | null | undefined): string | null {
   if (!value) return null;
   const line = value.split("\n").map((chunk) => chunk.trim()).find(Boolean);
@@ -903,10 +911,20 @@ export function Inbox() {
   ]);
 
   // --- Parent-child nesting for inbox issues ---
+  const [nestingEnabled, setNestingEnabled] = useState(() => loadInboxNesting());
+  const toggleNesting = useCallback(() => {
+    setNestingEnabled((prev) => {
+      const next = !prev;
+      saveInboxNesting(next);
+      return next;
+    });
+  }, []);
   const [collapsedInboxParents, setCollapsedInboxParents] = useState<Set<string>>(new Set());
   const { displayItems: nestedWorkItems, childrenByIssueId } = useMemo(
-    () => buildInboxNesting(filteredWorkItems),
-    [filteredWorkItems],
+    () => nestingEnabled
+      ? buildInboxNesting(filteredWorkItems)
+      : { displayItems: filteredWorkItems, childrenByIssueId: new Map<string, Issue[]>() },
+    [filteredWorkItems, nestingEnabled],
   );
   const toggleInboxParentCollapse = useCallback((parentId: string) => {
     setCollapsedInboxParents((prev) => {
@@ -1429,6 +1447,16 @@ export function Inbox() {
               className="h-8 w-[220px] pl-8 text-xs"
             />
           </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className={cn("hidden h-8 w-8 shrink-0 sm:inline-flex", nestingEnabled && "bg-accent")}
+            onClick={toggleNesting}
+            title={nestingEnabled ? "Disable parent-child nesting" : "Enable parent-child nesting"}
+          >
+            <ListTree className="h-3.5 w-3.5" />
+          </Button>
           <IssueColumnPicker
             availableColumns={availableIssueColumns}
             visibleColumnSet={visibleIssueColumnSet}

From 58ae23aa2c6607f9ae86b6064a66c9390fb20da7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:10:06 -0500
Subject: [PATCH 23/45] fix(ui): make j/k keyboard shortcuts traverse nested
 child issues in inbox

Builds a flat navigation list that includes expanded child issues alongside
top-level items, so j/k moves through every visible row including children.
Also adds the NavEntry type and updates archive/read/enter actions to work
with both top-level work items and nested child issues.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/Inbox.tsx | 162 +++++++++++++++++++++++++++++------------
 1 file changed, 115 insertions(+), 47 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 79358364..78fe02ff 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -935,6 +935,25 @@ export function Inbox() {
     });
   }, []);
 
+  // Build flat navigation list including expanded children for keyboard traversal
+  const flatNavItems = useMemo((): NavEntry[] => {
+    const entries: NavEntry[] = [];
+    for (let i = 0; i < nestedWorkItems.length; i++) {
+      const item = nestedWorkItems[i];
+      entries.push({ type: "top", index: i, item });
+      if (item.kind === "issue") {
+        const children = childrenByIssueId.get(item.issue.id);
+        const isExpanded = children?.length && !collapsedInboxParents.has(item.issue.id);
+        if (isExpanded) {
+          for (const child of children) {
+            entries.push({ type: "child", parentIndex: i, issue: child });
+          }
+        }
+      }
+    }
+    return entries;
+  }, [nestedWorkItems, childrenByIssueId, collapsedInboxParents]);
+
   const agentName = (id: string | null) => {
     if (!id) return null;
     return agentById.get(id) ?? null;
@@ -1204,12 +1223,13 @@ export function Inbox() {
 
   // Keep selection valid when the list shape changes, but do not auto-select on initial load.
   useEffect(() => {
-    setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, nestedWorkItems.length));
-  }, [nestedWorkItems.length]);
+    setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, flatNavItems.length));
+  }, [flatNavItems.length]);
 
   // Use refs for keyboard handler to avoid stale closures
   const kbStateRef = useRef({
     workItems: nestedWorkItems,
+    flatNavItems,
     selectedIndex,
     canArchive: canArchiveFromTab,
     archivingIssueIds,
@@ -1219,6 +1239,7 @@ export function Inbox() {
   });
   kbStateRef.current = {
     workItems: nestedWorkItems,
+    flatNavItems,
     selectedIndex,
     canArchive: canArchiveFromTab,
     archivingIssueIds,
@@ -1272,77 +1293,94 @@ export function Inbox() {
       // Keyboard shortcuts are only active on the "mine" tab
       if (!st.canArchive) return;
 
-      const itemCount = st.workItems.length;
-      if (itemCount === 0) return;
+      const navItems = st.flatNavItems;
+      const navCount = navItems.length;
+      if (navCount === 0) return;
+
+      /** Resolve the nav entry at selectedIndex to an issue (for child entries) or work item. */
+      const resolveNavEntry = (idx: number): { issue?: Issue; item?: InboxWorkItem } => {
+        const entry = navItems[idx];
+        if (!entry) return {};
+        if (entry.type === "child") return { issue: entry.issue };
+        return { item: entry.item };
+      };
 
       switch (e.key) {
         case "j": {
           e.preventDefault();
-          setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, itemCount, "next"));
+          setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, navCount, "next"));
           break;
         }
         case "k": {
           e.preventDefault();
-          setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, itemCount, "previous"));
+          setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, navCount, "previous"));
           break;
         }
         case "a":
         case "y": {
-          if (st.selectedIndex < 0 || st.selectedIndex >= itemCount) return;
+          if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
           e.preventDefault();
-          const item = st.workItems[st.selectedIndex];
-          if (item.kind === "issue") {
-            if (!st.archivingIssueIds.has(item.issue.id)) {
-              act.archiveIssue(item.issue.id);
-            }
-          } else {
-            const key = getWorkItemKey(item);
-            if (!st.archivingNonIssueIds.has(key)) {
-              act.archiveNonIssue(key);
+          const { issue, item } = resolveNavEntry(st.selectedIndex);
+          if (issue) {
+            if (!st.archivingIssueIds.has(issue.id)) act.archiveIssue(issue.id);
+          } else if (item) {
+            if (item.kind === "issue") {
+              if (!st.archivingIssueIds.has(item.issue.id)) act.archiveIssue(item.issue.id);
+            } else {
+              const key = getWorkItemKey(item);
+              if (!st.archivingNonIssueIds.has(key)) act.archiveNonIssue(key);
             }
           }
           break;
         }
         case "U": {
-          if (st.selectedIndex < 0 || st.selectedIndex >= itemCount) return;
+          if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
           e.preventDefault();
-          const item = st.workItems[st.selectedIndex];
-          if (item.kind === "issue") {
-            act.markUnreadIssue(item.issue.id);
-          } else {
-            act.markNonIssueUnread(getWorkItemKey(item));
+          const { issue, item } = resolveNavEntry(st.selectedIndex);
+          if (issue) {
+            act.markUnreadIssue(issue.id);
+          } else if (item) {
+            if (item.kind === "issue") act.markUnreadIssue(item.issue.id);
+            else act.markNonIssueUnread(getWorkItemKey(item));
           }
           break;
         }
         case "r": {
-          if (st.selectedIndex < 0 || st.selectedIndex >= itemCount) return;
+          if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
           e.preventDefault();
-          const item = st.workItems[st.selectedIndex];
-          if (item.kind === "issue") {
-            if (item.issue.isUnreadForMe && !st.fadingOutIssues.has(item.issue.id)) {
-              act.markRead(item.issue.id);
-            }
-          } else {
-            const key = getWorkItemKey(item);
-            if (!st.readItems.has(key)) {
-              act.markNonIssueRead(key);
+          const { issue, item } = resolveNavEntry(st.selectedIndex);
+          if (issue) {
+            if (issue.isUnreadForMe && !st.fadingOutIssues.has(issue.id)) act.markRead(issue.id);
+          } else if (item) {
+            if (item.kind === "issue") {
+              if (item.issue.isUnreadForMe && !st.fadingOutIssues.has(item.issue.id)) act.markRead(item.issue.id);
+            } else {
+              const key = getWorkItemKey(item);
+              if (!st.readItems.has(key)) act.markNonIssueRead(key);
             }
           }
           break;
         }
         case "Enter": {
-          if (st.selectedIndex < 0 || st.selectedIndex >= itemCount) return;
+          if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
           e.preventDefault();
-          const item = st.workItems[st.selectedIndex];
-          if (item.kind === "issue") {
-            const pathId = item.issue.identifier ?? item.issue.id;
+          const { issue, item } = resolveNavEntry(st.selectedIndex);
+          if (issue) {
+            const pathId = issue.identifier ?? issue.id;
             const detailState = armIssueDetailInboxQuickArchive(issueLinkState);
             rememberIssueDetailLocationState(pathId, detailState);
             act.navigate(createIssueDetailPath(pathId), { state: detailState });
-          } else if (item.kind === "approval") {
-            act.navigate(`/approvals/${item.approval.id}`);
-          } else if (item.kind === "failed_run") {
-            act.navigate(`/agents/${item.run.agentId}/runs/${item.run.id}`);
+          } else if (item) {
+            if (item.kind === "issue") {
+              const pathId = item.issue.identifier ?? item.issue.id;
+              const detailState = armIssueDetailInboxQuickArchive(issueLinkState);
+              rememberIssueDetailLocationState(pathId, detailState);
+              act.navigate(createIssueDetailPath(pathId), { state: detailState });
+            } else if (item.kind === "approval") {
+              act.navigate(`/approvals/${item.approval.id}`);
+            } else if (item.kind === "failed_run") {
+              act.navigate(`/agents/${item.run.agentId}/runs/${item.run.id}`);
+            }
           }
           break;
         }
@@ -1571,13 +1609,34 @@ export function Inbox() {
           {showSeparatorBefore("work_items") && <Separator />}
           <div>
             <div ref={listRef} className="overflow-hidden rounded-xl border border-border bg-card">
-              {nestedWorkItems.flatMap((item, index) => {
+              {(() => {
+                // Pre-compute flat nav index for each top-level item and child issue
+                let flatIdx = 0;
+                const topFlatIndex = new Map<number, number>();
+                const childFlatIndex = new Map<string, number>();
+                for (let ti = 0; ti < nestedWorkItems.length; ti++) {
+                  topFlatIndex.set(ti, flatIdx);
+                  flatIdx++;
+                  const topItem = nestedWorkItems[ti];
+                  if (topItem.kind === "issue") {
+                    const children = childrenByIssueId.get(topItem.issue.id);
+                    const isExp = children?.length && !collapsedInboxParents.has(topItem.issue.id);
+                    if (isExp) {
+                      for (const c of children) {
+                        childFlatIndex.set(c.id, flatIdx);
+                        flatIdx++;
+                      }
+                    }
+                  }
+                }
+                return nestedWorkItems.flatMap((item, index) => {
+                const navIdx = topFlatIndex.get(index) ?? index;
                 const wrapItem = (key: string, isSelected: boolean, child: ReactNode) => (
                   <div
                     key={`sel-${key}`}
                     data-inbox-item
                     className="relative"
-                    onClick={() => setSelectedIndex(index)}
+                    onClick={() => setSelectedIndex(navIdx)}
                   >
                     {child}
                   </div>
@@ -1599,7 +1658,7 @@ export function Inbox() {
                     </div>,
                   );
                 }
-                const isSelected = selectedIndex === index;
+                const isSelected = selectedIndex === navIdx;
 
                 if (item.kind === "approval") {
                   const approvalKey = `approval:${item.approval.id}`;
@@ -1822,14 +1881,22 @@ export function Inbox() {
                 // Render children if expanded
                 if (isExpanded) {
                   for (const child of childIssues) {
-                    const childRow = renderInboxIssue(child, 1, false);
+                    const cNavIdx = childFlatIndex.get(child.id) ?? -1;
+                    const isChildSelected = selectedIndex === cNavIdx;
+                    const childRow = renderInboxIssue(child, 1, isChildSelected);
                     const isChildArchiving = archivingIssueIds.has(child.id);
                     elements.push(
-                      <div key={`sel-issue:${child.id}`} data-inbox-item className="relative" style={{ paddingLeft: 16 }}>
+                      <div
+                        key={`sel-issue:${child.id}`}
+                        data-inbox-item
+                        className="relative"
+                        style={{ paddingLeft: 16 }}
+                        onClick={() => setSelectedIndex(cNavIdx)}
+                      >
                         {canArchiveFromTab ? (
                           <SwipeToArchive
                             key={`issue:${child.id}`}
-                            selected={false}
+                            selected={isChildSelected}
                             disabled={isChildArchiving || archiveIssueMutation.isPending}
                             onArchive={() => archiveIssueMutation.mutate(child.id)}
                           >
@@ -1841,7 +1908,8 @@ export function Inbox() {
                   }
                 }
                 return elements;
-              })}
+              });
+              })()}
             </div>
           </div>
         </>

From 2cf2a44d68f0496b3354bf6e2b6a99602e87517d Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:15:56 -0500
Subject: [PATCH 24/45] fix(ui): fix inbox nesting column alignment

Move child indentation from wrapper paddingLeft into desktopMetaLeading
so the unread dot stays in the leftmost column regardless of nesting
depth. When nesting is enabled, all issue rows get a fixed-width folding
column (chevron or empty spacer) for consistent alignment. Children
indent after the folding column. When nesting is disabled, no folding
column is rendered.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/Inbox.tsx | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 78fe02ff..9f9704ef 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1792,21 +1792,26 @@ export function Inbox() {
                       }
                       desktopMetaLeading={
                         <>
-                          {depth === 0 && hasChildren ? (
-                            <button
-                              type="button"
-                              className="hidden shrink-0 items-center sm:inline-flex"
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                toggleInboxParentCollapse(issue.id);
-                              }}
-                            >
-                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
-                            </button>
-                          ) : depth === 0 ? null : (
-                            <span className="hidden w-3.5 shrink-0 sm:block" />
-                          )}
+                          {nestingEnabled ? (
+                            depth === 0 && hasChildren ? (
+                              <button
+                                type="button"
+                                className="hidden w-4 shrink-0 items-center justify-center sm:inline-flex"
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  toggleInboxParentCollapse(issue.id);
+                                }}
+                              >
+                                <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
+                              </button>
+                            ) : (
+                              <span className="hidden w-4 shrink-0 sm:block" />
+                            )
+                          ) : null}
+                          {depth > 0 ? (
+                            <span className="hidden w-4 shrink-0 sm:block" />
+                          ) : null}
                           <InboxIssueMetaLeading
                             issue={iss}
                             isLive={liveIssueIds.has(iss.id)}
@@ -1890,7 +1895,6 @@ export function Inbox() {
                         key={`sel-issue:${child.id}`}
                         data-inbox-item
                         className="relative"
-                        style={{ paddingLeft: 16 }}
                         onClick={() => setSelectedIndex(cNavIdx)}
                       >
                         {canArchiveFromTab ? (

From ede320642328bc859a173db81753cacfe91020f7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:27:14 -0500
Subject: [PATCH 25/45] fix(ui): always render transcript message for
 non-succeeded runs

Use createHistoricalTranscriptMessage for failed/cancelled/timed_out
runs even before transcript data loads. This prevents the flash where
a plain "run X failed" status line transforms into a foldable "failed
after X minutes" header when transcripts arrive asynchronously.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/lib/issue-chat-messages.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/lib/issue-chat-messages.ts b/ui/src/lib/issue-chat-messages.ts
index 47e0a29e..82086320 100644
--- a/ui/src/lib/issue-chat-messages.ts
+++ b/ui/src/lib/issue-chat-messages.ts
@@ -679,7 +679,10 @@ export function buildIssueChatMessages(args: {
   for (const run of [...linkedRuns].sort((a, b) => toTimestamp(runTimestamp(a)) - toTimestamp(runTimestamp(b)))) {
     const transcript = transcriptsByRunId?.get(run.runId) ?? [];
     const hasRunOutput = transcript.length > 0 || (hasOutputForRun?.(run.runId) ?? false);
-    if (hasRunOutput) {
+    if (hasRunOutput || run.status !== "succeeded") {
+      // Always use the transcript message for non-succeeded runs (even before
+      // transcript data loads) so the message type and fold header are stable
+      // from initial render — avoids a flash when transcripts arrive later.
       orderedMessages.push({
         createdAtMs: toTimestamp(run.startedAt ?? run.createdAt),
         order: 2,
@@ -692,7 +695,7 @@ export function buildIssueChatMessages(args: {
       });
       continue;
     }
-    if (run.status === "succeeded" && !includeSucceededRunsWithoutOutput) continue;
+    if (!includeSucceededRunsWithoutOutput) continue;
     orderedMessages.push({
       createdAtMs: toTimestamp(runTimestamp(run)),
       order: 2,

From 69ff793c6a68b3434d8eb612899eed432ccb5ea7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:27:34 -0500
Subject: [PATCH 26/45] Add issue-detail g i inbox shortcut

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/lib/keyboardShortcuts.test.ts | 46 +++++++++++++++
 ui/src/lib/keyboardShortcuts.ts      | 33 +++++++++++
 ui/src/pages/IssueDetail.tsx         | 85 +++++++++++++++++++++++++++-
 3 files changed, 163 insertions(+), 1 deletion(-)

diff --git a/ui/src/lib/keyboardShortcuts.test.ts b/ui/src/lib/keyboardShortcuts.test.ts
index 1495fe40..f284a53c 100644
--- a/ui/src/lib/keyboardShortcuts.test.ts
+++ b/ui/src/lib/keyboardShortcuts.test.ts
@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import {
   hasBlockingShortcutDialog,
   isKeyboardShortcutTextInputTarget,
+  resolveGoToInboxKeyAction,
   resolveInboxQuickArchiveKeyAction,
 } from "./keyboardShortcuts";
 
@@ -109,4 +110,49 @@ describe("keyboardShortcuts helpers", () => {
       hasOpenDialog: false,
     })).toBe("disarm");
   });
+
+  it("arms go-to-inbox on a clean g press", () => {
+    const button = document.createElement("button");
+
+    expect(resolveGoToInboxKeyAction({
+      armed: false,
+      defaultPrevented: false,
+      key: "g",
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      target: button,
+      hasOpenDialog: false,
+    })).toBe("arm");
+  });
+
+  it("navigates to inbox on i after g", () => {
+    const button = document.createElement("button");
+
+    expect(resolveGoToInboxKeyAction({
+      armed: true,
+      defaultPrevented: false,
+      key: "i",
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      target: button,
+      hasOpenDialog: false,
+    })).toBe("navigate");
+  });
+
+  it("disarms go-to-inbox instead of firing from an editor", () => {
+    const input = document.createElement("textarea");
+
+    expect(resolveGoToInboxKeyAction({
+      armed: true,
+      defaultPrevented: false,
+      key: "i",
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      target: input,
+      hasOpenDialog: false,
+    })).toBe("disarm");
+  });
 });
diff --git a/ui/src/lib/keyboardShortcuts.ts b/ui/src/lib/keyboardShortcuts.ts
index 7007ea69..ab4cbd73 100644
--- a/ui/src/lib/keyboardShortcuts.ts
+++ b/ui/src/lib/keyboardShortcuts.ts
@@ -11,6 +11,7 @@ export const KEYBOARD_SHORTCUT_TEXT_INPUT_SELECTOR = [
 const MODIFIER_ONLY_KEYS = new Set(["Shift", "Meta", "Control", "Alt"]);
 
 export type InboxQuickArchiveKeyAction = "ignore" | "archive" | "disarm";
+export type GoToInboxKeyAction = "ignore" | "arm" | "navigate" | "disarm";
 
 export function isKeyboardShortcutTextInputTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
@@ -52,3 +53,35 @@ export function resolveInboxQuickArchiveKeyAction({
   if (key === "y") return "archive";
   return "disarm";
 }
+
+export function resolveGoToInboxKeyAction({
+  armed,
+  defaultPrevented,
+  key,
+  metaKey,
+  ctrlKey,
+  altKey,
+  target,
+  hasOpenDialog,
+}: {
+  armed: boolean;
+  defaultPrevented: boolean;
+  key: string;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  target: EventTarget | null;
+  hasOpenDialog: boolean;
+}): GoToInboxKeyAction {
+  if (defaultPrevented) return armed ? "disarm" : "ignore";
+  if (metaKey || ctrlKey || altKey || isModifierOnlyKey(key)) return "ignore";
+  if (hasOpenDialog || isKeyboardShortcutTextInputTarget(target)) {
+    return armed ? "disarm" : "ignore";
+  }
+
+  const normalizedKey = key.toLowerCase();
+  if (!armed) return normalizedKey === "g" ? "arm" : "ignore";
+  if (normalizedKey === "i") return "navigate";
+  if (normalizedKey === "g") return "arm";
+  return "disarm";
+}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 9c3a417b..3719b3a9 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -26,7 +26,11 @@ import {
   rememberIssueDetailLocationState,
   shouldArmIssueDetailInboxQuickArchive,
 } from "../lib/issueDetailBreadcrumb";
-import { hasBlockingShortcutDialog, resolveInboxQuickArchiveKeyAction } from "../lib/keyboardShortcuts";
+import {
+  hasBlockingShortcutDialog,
+  resolveGoToInboxKeyAction,
+  resolveInboxQuickArchiveKeyAction,
+} from "../lib/keyboardShortcuts";
 import {
   applyOptimisticIssueFieldUpdate,
   applyOptimisticIssueFieldUpdateToCollection,
@@ -1232,6 +1236,8 @@ export function IssueDetail() {
   }, [closePanel, handleIssuePropertiesUpdate, issuePanelKey, openNewSubIssue, openPanel]);
 
   const inboxQuickArchiveArmedRef = useRef(false);
+  const goToInboxShortcutArmedRef = useRef(false);
+  const goToInboxShortcutTimeoutRef = useRef<number | null>(null);
   const canQuickArchiveFromInbox =
     keyboardShortcutsEnabled &&
     !issue?.hiddenAt &&
@@ -1301,6 +1307,83 @@ export function IssueDetail() {
     };
   }, [archiveFromInbox, canQuickArchiveFromInbox, issue?.id]);
 
+  useEffect(() => {
+    if (!keyboardShortcutsEnabled) {
+      goToInboxShortcutArmedRef.current = false;
+      if (goToInboxShortcutTimeoutRef.current !== null) {
+        window.clearTimeout(goToInboxShortcutTimeoutRef.current);
+        goToInboxShortcutTimeoutRef.current = null;
+      }
+      return;
+    }
+
+    const clearArmTimeout = () => {
+      if (goToInboxShortcutTimeoutRef.current !== null) {
+        window.clearTimeout(goToInboxShortcutTimeoutRef.current);
+        goToInboxShortcutTimeoutRef.current = null;
+      }
+    };
+
+    const disarm = () => {
+      goToInboxShortcutArmedRef.current = false;
+      clearArmTimeout();
+    };
+
+    const arm = () => {
+      goToInboxShortcutArmedRef.current = true;
+      clearArmTimeout();
+      goToInboxShortcutTimeoutRef.current = window.setTimeout(() => {
+        goToInboxShortcutArmedRef.current = false;
+        goToInboxShortcutTimeoutRef.current = null;
+      }, 1200);
+    };
+
+    const handlePointerDown = () => {
+      disarm();
+    };
+
+    const handleFocusIn = (event: FocusEvent) => {
+      if (event.target instanceof HTMLElement && event.target !== document.body) {
+        disarm();
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const action = resolveGoToInboxKeyAction({
+        armed: goToInboxShortcutArmedRef.current,
+        defaultPrevented: event.defaultPrevented,
+        key: event.key,
+        metaKey: event.metaKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        target: event.target,
+        hasOpenDialog: hasBlockingShortcutDialog(document),
+      });
+
+      if (action === "ignore") return;
+      if (action === "arm") {
+        arm();
+        return;
+      }
+
+      disarm();
+      if (action !== "navigate") return;
+
+      event.preventDefault();
+      navigate(sourceBreadcrumb.href.startsWith("/inbox") ? sourceBreadcrumb.href : "/inbox");
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("focusin", handleFocusIn, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      disarm();
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("focusin", handleFocusIn, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [keyboardShortcutsEnabled, navigate, sourceBreadcrumb.href]);
+
   const isImageAttachment = (attachment: IssueAttachment) => attachment.contentType.startsWith("image/");
   const attachmentList = attachments ?? [];
   const imageAttachments = attachmentList.filter(isImageAttachment);

From fad5634b29af5d1627cb6449519176e01eac71bf Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:27:49 -0500
Subject: [PATCH 27/45] feat(ui): add keyboard shortcut cheatsheet dialog on ?
 keypress
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows a beautiful categorized cheatsheet of all keyboard shortcuts
(inbox, issue detail, global) when the user presses ? with keyboard
shortcuts enabled. Respects text input focus detection — won't trigger
in text fields. Uses the existing Dialog component and Radix UI.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 .../KeyboardShortcutsCheatsheet.tsx           | 100 ++++++++++++++++++
 ui/src/components/Layout.tsx                  |   4 +
 ui/src/hooks/useKeyboardShortcuts.ts          |  11 +-
 3 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/KeyboardShortcutsCheatsheet.tsx

diff --git a/ui/src/components/KeyboardShortcutsCheatsheet.tsx b/ui/src/components/KeyboardShortcutsCheatsheet.tsx
new file mode 100644
index 00000000..9df4ef7f
--- /dev/null
+++ b/ui/src/components/KeyboardShortcutsCheatsheet.tsx
@@ -0,0 +1,100 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+interface ShortcutEntry {
+  keys: string[];
+  label: string;
+}
+
+interface ShortcutSection {
+  title: string;
+  shortcuts: ShortcutEntry[];
+}
+
+const sections: ShortcutSection[] = [
+  {
+    title: "Inbox",
+    shortcuts: [
+      { keys: ["j"], label: "Move down" },
+      { keys: ["k"], label: "Move up" },
+      { keys: ["Enter"], label: "Open selected item" },
+      { keys: ["a"], label: "Archive item" },
+      { keys: ["y"], label: "Archive item" },
+      { keys: ["r"], label: "Mark as read" },
+      { keys: ["U"], label: "Mark as unread" },
+    ],
+  },
+  {
+    title: "Issue detail",
+    shortcuts: [
+      { keys: ["y"], label: "Quick-archive back to inbox" },
+      { keys: ["g", "i"], label: "Go to inbox" },
+    ],
+  },
+  {
+    title: "Global",
+    shortcuts: [
+      { keys: ["c"], label: "New issue" },
+      { keys: ["["], label: "Toggle sidebar" },
+      { keys: ["]"], label: "Toggle panel" },
+      { keys: ["?"], label: "Show keyboard shortcuts" },
+    ],
+  },
+];
+
+function KeyCap({ children }: { children: string }) {
+  return (
+    <kbd className="inline-flex h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-xs font-medium text-foreground shadow-[0_1px_0_1px_hsl(var(--border))]">
+      {children}
+    </kbd>
+  );
+}
+
+export function KeyboardShortcutsCheatsheet({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md gap-0 p-0 overflow-hidden" showCloseButton={false}>
+        <DialogHeader className="px-5 pt-5 pb-3">
+          <DialogTitle className="text-base">Keyboard shortcuts</DialogTitle>
+        </DialogHeader>
+        <div className="divide-y divide-border border-t border-border">
+          {sections.map((section) => (
+            <div key={section.title} className="px-5 py-3">
+              <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                {section.title}
+              </h3>
+              <div className="space-y-1.5">
+                {section.shortcuts.map((shortcut) => (
+                  <div
+                    key={shortcut.label + shortcut.keys.join()}
+                    className="flex items-center justify-between gap-4"
+                  >
+                    <span className="text-sm text-foreground/90">{shortcut.label}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <span key={key} className="flex items-center gap-1">
+                          {i > 0 && <span className="text-xs text-muted-foreground">then</span>}
+                          <KeyCap>{key}</KeyCap>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="border-t border-border px-5 py-3">
+          <p className="text-xs text-muted-foreground">
+            Press <KeyCap>Esc</KeyCap> to close &middot; Shortcuts are disabled in text fields
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index be39adb7..9028d7af 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -12,6 +12,7 @@ import { NewIssueDialog } from "./NewIssueDialog";
 import { NewProjectDialog } from "./NewProjectDialog";
 import { NewGoalDialog } from "./NewGoalDialog";
 import { NewAgentDialog } from "./NewAgentDialog";
+import { KeyboardShortcutsCheatsheet } from "./KeyboardShortcutsCheatsheet";
 import { ToastViewport } from "./ToastViewport";
 import { MobileBottomNav } from "./MobileBottomNav";
 import { WorktreeBanner } from "./WorktreeBanner";
@@ -69,6 +70,7 @@ export function Layout() {
   const lastMainScrollTop = useRef(0);
   const [mobileNavVisible, setMobileNavVisible] = useState(true);
   const [instanceSettingsTarget, setInstanceSettingsTarget] = useState<string>(() => readRememberedInstanceSettingsPath());
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const nextTheme = theme === "dark" ? "light" : "dark";
   const matchedCompany = useMemo(() => {
     if (!companyPrefix) return null;
@@ -151,6 +153,7 @@ export function Layout() {
     onNewIssue: () => openNewIssue(),
     onToggleSidebar: toggleSidebar,
     onTogglePanel: togglePanel,
+    onShowShortcuts: () => setShortcutsOpen(true),
   });
 
   useEffect(() => {
@@ -443,6 +446,7 @@ export function Layout() {
       <NewProjectDialog />
       <NewGoalDialog />
       <NewAgentDialog />
+      <KeyboardShortcutsCheatsheet open={shortcutsOpen} onOpenChange={setShortcutsOpen} />
       <ToastViewport />
       </div>
     </GeneralSettingsProvider>
diff --git a/ui/src/hooks/useKeyboardShortcuts.ts b/ui/src/hooks/useKeyboardShortcuts.ts
index 6f5b33c4..c917ebba 100644
--- a/ui/src/hooks/useKeyboardShortcuts.ts
+++ b/ui/src/hooks/useKeyboardShortcuts.ts
@@ -6,6 +6,7 @@ interface ShortcutHandlers {
   onNewIssue?: () => void;
   onToggleSidebar?: () => void;
   onTogglePanel?: () => void;
+  onShowShortcuts?: () => void;
 }
 
 export function useKeyboardShortcuts({
@@ -13,6 +14,7 @@ export function useKeyboardShortcuts({
   onNewIssue,
   onToggleSidebar,
   onTogglePanel,
+  onShowShortcuts,
 }: ShortcutHandlers) {
   useEffect(() => {
     if (!enabled) return;
@@ -23,6 +25,13 @@ export function useKeyboardShortcuts({
         return;
       }
 
+      // ? → Show keyboard shortcuts cheatsheet
+      if (e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        onShowShortcuts?.();
+        return;
+      }
+
       // C → New Issue
       if (e.key === "c" && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
@@ -44,5 +53,5 @@ export function useKeyboardShortcuts({
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, onNewIssue, onToggleSidebar, onTogglePanel]);
+  }, [enabled, onNewIssue, onToggleSidebar, onTogglePanel, onShowShortcuts]);
 }

From 296033620f6d86410f8390f2e0adac2fe8b22260 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:42:38 -0500
Subject: [PATCH 28/45] Remove main-content focus outline

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 9028d7af..1a2f7764 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -423,7 +423,7 @@ export function Layout() {
               id="main-content"
               tabIndex={-1}
               className={cn(
-                "flex-1 p-4 md:p-6",
+                "flex-1 p-4 outline-none md:p-6",
                 isMobile ? "overflow-visible pb-[calc(5rem+env(safe-area-inset-bottom))]" : "overflow-auto",
               )}
             >

From e21e442033219dc54d0e6e3557853aae4aae98c5 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 08:56:07 -0500
Subject: [PATCH 29/45] Fix issue detail inbox archive shortcut

---
 ui/src/lib/keyboardShortcuts.test.ts |  8 ++---
 ui/src/lib/keyboardShortcuts.ts      |  8 ++---
 ui/src/pages/IssueDetail.tsx         | 45 ++--------------------------
 3 files changed, 11 insertions(+), 50 deletions(-)

diff --git a/ui/src/lib/keyboardShortcuts.test.ts b/ui/src/lib/keyboardShortcuts.test.ts
index f284a53c..f885dfc9 100644
--- a/ui/src/lib/keyboardShortcuts.test.ts
+++ b/ui/src/lib/keyboardShortcuts.test.ts
@@ -55,7 +55,7 @@ describe("keyboardShortcuts helpers", () => {
     })).toBe("archive");
   });
 
-  it("disarms on the first non-y keypress", () => {
+  it("ignores non-y keypresses", () => {
     const button = document.createElement("button");
 
     expect(resolveInboxQuickArchiveKeyAction({
@@ -67,7 +67,7 @@ describe("keyboardShortcuts helpers", () => {
       altKey: false,
       target: button,
       hasOpenDialog: false,
-    })).toBe("disarm");
+    })).toBe("ignore");
   });
 
   it("stays inert for modifier combos before a real keypress", () => {
@@ -96,7 +96,7 @@ describe("keyboardShortcuts helpers", () => {
     })).toBe("ignore");
   });
 
-  it("disarms instead of archiving when typing into an editor", () => {
+  it("ignores input typing instead of archiving", () => {
     const input = document.createElement("input");
 
     expect(resolveInboxQuickArchiveKeyAction({
@@ -108,7 +108,7 @@ describe("keyboardShortcuts helpers", () => {
       altKey: false,
       target: input,
       hasOpenDialog: false,
-    })).toBe("disarm");
+    })).toBe("ignore");
   });
 
   it("arms go-to-inbox on a clean g press", () => {
diff --git a/ui/src/lib/keyboardShortcuts.ts b/ui/src/lib/keyboardShortcuts.ts
index ab4cbd73..7e549c39 100644
--- a/ui/src/lib/keyboardShortcuts.ts
+++ b/ui/src/lib/keyboardShortcuts.ts
@@ -47,11 +47,11 @@ export function resolveInboxQuickArchiveKeyAction({
   hasOpenDialog: boolean;
 }): InboxQuickArchiveKeyAction {
   if (!armed) return "ignore";
-  if (defaultPrevented) return "disarm";
+  if (defaultPrevented) return "ignore";
   if (metaKey || ctrlKey || altKey || isModifierOnlyKey(key)) return "ignore";
-  if (hasOpenDialog || isKeyboardShortcutTextInputTarget(target)) return "disarm";
-  if (key === "y") return "archive";
-  return "disarm";
+  if (hasOpenDialog || isKeyboardShortcutTextInputTarget(target)) return "ignore";
+  if (key.toLowerCase() === "y") return "archive";
+  return "ignore";
 }
 
 export function resolveGoToInboxKeyAction({
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 3719b3a9..76fd06eb 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -24,7 +24,6 @@ import {
   readIssueDetailLocationState,
   readIssueDetailBreadcrumb,
   rememberIssueDetailLocationState,
-  shouldArmIssueDetailInboxQuickArchive,
 } from "../lib/issueDetailBreadcrumb";
 import {
   hasBlockingShortcutDialog,
@@ -1235,46 +1234,17 @@ export function IssueDetail() {
     return () => closePanel();
   }, [closePanel, handleIssuePropertiesUpdate, issuePanelKey, openNewSubIssue, openPanel]);
 
-  const inboxQuickArchiveArmedRef = useRef(false);
   const goToInboxShortcutArmedRef = useRef(false);
   const goToInboxShortcutTimeoutRef = useRef<number | null>(null);
   const canQuickArchiveFromInbox =
     keyboardShortcutsEnabled &&
-    !issue?.hiddenAt &&
-    sourceBreadcrumb.href.startsWith("/inbox") &&
-    shouldArmIssueDetailInboxQuickArchive(location.state);
+    !issue?.hiddenAt;
 
   useEffect(() => {
-    if (!issue?.id || !canQuickArchiveFromInbox) {
-      inboxQuickArchiveArmedRef.current = false;
-      return;
-    }
-
-    inboxQuickArchiveArmedRef.current = true;
-
-    const disarm = () => {
-      inboxQuickArchiveArmedRef.current = false;
-    };
-
-    const handlePointerDown = () => {
-      disarm();
-    };
-
-    const handleFocusIn = (event: FocusEvent) => {
-      if (event.target instanceof HTMLElement && event.target !== document.body) {
-        disarm();
-      }
-    };
-
-    const handleSelectionChange = () => {
-      const selection = window.getSelection();
-      if (!selection || selection.isCollapsed || selection.toString().trim().length === 0) return;
-      disarm();
-    };
-
+    if (!issue?.id || !canQuickArchiveFromInbox) return;
     const handleKeyDown = (event: KeyboardEvent) => {
       const action = resolveInboxQuickArchiveKeyAction({
-        armed: inboxQuickArchiveArmedRef.current,
+        armed: canQuickArchiveFromInbox,
         defaultPrevented: event.defaultPrevented,
         key: event.key,
         metaKey: event.metaKey,
@@ -1284,9 +1254,6 @@ export function IssueDetail() {
         hasOpenDialog: hasBlockingShortcutDialog(document),
       });
 
-      if (action === "ignore") return;
-
-      disarm();
       if (action !== "archive") return;
 
       event.preventDefault();
@@ -1295,14 +1262,8 @@ export function IssueDetail() {
       }
     };
 
-    document.addEventListener("pointerdown", handlePointerDown, true);
-    document.addEventListener("focusin", handleFocusIn, true);
-    document.addEventListener("selectionchange", handleSelectionChange);
     document.addEventListener("keydown", handleKeyDown, true);
     return () => {
-      document.removeEventListener("pointerdown", handlePointerDown, true);
-      document.removeEventListener("focusin", handleFocusIn, true);
-      document.removeEventListener("selectionchange", handleSelectionChange);
       document.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [archiveFromInbox, canQuickArchiveFromInbox, issue?.id]);

From 59d913d04b95a0b841e11a79e8dfebdda4e77ed9 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 09:03:24 -0500
Subject: [PATCH 30/45] Fix issue detail main-pane focus on navigation

---
 ui/src/components/Layout.tsx          |  7 +++
 ui/src/lib/main-content-focus.test.ts | 66 +++++++++++++++++++++++++++
 ui/src/lib/main-content-focus.ts      | 21 +++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 ui/src/lib/main-content-focus.test.ts
 create mode 100644 ui/src/lib/main-content-focus.ts

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index 1a2f7764..b5809f46 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -33,6 +33,7 @@ import {
   normalizeRememberedInstanceSettingsPath,
 } from "../lib/instance-settings";
 import { queryKeys } from "../lib/queryKeys";
+import { scheduleMainContentFocus } from "../lib/main-content-focus";
 import { cn } from "../lib/utils";
 import { NotFoundPage } from "../pages/NotFound";
 import { Button } from "@/components/ui/button";
@@ -268,6 +269,12 @@ export function Layout() {
     }
   }, [location.hash, location.pathname, location.search]);
 
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const mainContent = document.getElementById("main-content");
+    return scheduleMainContentFocus(mainContent);
+  }, [location.pathname]);
+
   return (
     <GeneralSettingsProvider value={{ keyboardShortcutsEnabled }}>
       <div
diff --git a/ui/src/lib/main-content-focus.test.ts b/ui/src/lib/main-content-focus.test.ts
new file mode 100644
index 00000000..7e82f5b5
--- /dev/null
+++ b/ui/src/lib/main-content-focus.test.ts
@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  scheduleMainContentFocus,
+  shouldFocusMainContentAfterNavigation,
+} from "./main-content-focus";
+
+describe("main-content-focus", () => {
+  let originalRequestAnimationFrame: typeof window.requestAnimationFrame;
+  let originalCancelAnimationFrame: typeof window.cancelAnimationFrame;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    originalRequestAnimationFrame = window.requestAnimationFrame;
+    originalCancelAnimationFrame = window.cancelAnimationFrame;
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+      window.setTimeout(() => callback(performance.now()), 0)) as typeof window.requestAnimationFrame;
+    window.cancelAnimationFrame = ((handle: number) => window.clearTimeout(handle)) as typeof window.cancelAnimationFrame;
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame = originalRequestAnimationFrame;
+    window.cancelAnimationFrame = originalCancelAnimationFrame;
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("prefers the main content when navigation leaves focus outside it", async () => {
+    const sidebarButton = document.createElement("button");
+    const main = document.createElement("main");
+    main.tabIndex = -1;
+    document.body.append(sidebarButton, main);
+    sidebarButton.focus();
+
+    scheduleMainContentFocus(main);
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+
+    expect(document.activeElement).toBe(main);
+  });
+
+  it("does not steal focus from an active element already inside main content", async () => {
+    const main = document.createElement("main");
+    const input = document.createElement("input");
+    main.tabIndex = -1;
+    main.appendChild(input);
+    document.body.append(main);
+    input.focus();
+
+    scheduleMainContentFocus(main);
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("treats disconnected elements as needing main-content focus", () => {
+    const main = document.createElement("main");
+    main.tabIndex = -1;
+    document.body.append(main);
+
+    const staleButton = document.createElement("button");
+    staleButton.focus();
+
+    expect(shouldFocusMainContentAfterNavigation(main, staleButton)).toBe(true);
+  });
+});
diff --git a/ui/src/lib/main-content-focus.ts b/ui/src/lib/main-content-focus.ts
new file mode 100644
index 00000000..d96fafc8
--- /dev/null
+++ b/ui/src/lib/main-content-focus.ts
@@ -0,0 +1,21 @@
+export function shouldFocusMainContentAfterNavigation(
+  mainElement: HTMLElement | null,
+  activeElement: Element | null,
+): boolean {
+  if (!(mainElement instanceof HTMLElement)) return false;
+  if (!(activeElement instanceof HTMLElement)) return true;
+  if (!document.contains(activeElement)) return true;
+  if (activeElement === document.body || activeElement === document.documentElement) return true;
+  return !mainElement.contains(activeElement);
+}
+
+export function scheduleMainContentFocus(mainElement: HTMLElement | null): () => void {
+  if (!(mainElement instanceof HTMLElement)) return () => {};
+
+  const frame = window.requestAnimationFrame(() => {
+    if (!shouldFocusMainContentAfterNavigation(mainElement, document.activeElement)) return;
+    mainElement.focus({ preventScroll: true });
+  });
+
+  return () => window.cancelAnimationFrame(frame);
+}

From 15b0f112756aef51f43e41a132a962a1bde035bf Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 09:11:21 -0500
Subject: [PATCH 31/45] Keep issue chat composer visible while typing

---
 ui/src/components/IssueChatThread.test.tsx |  39 +++++
 ui/src/components/IssueChatThread.tsx      | 169 +++++++++++----------
 2 files changed, 127 insertions(+), 81 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index f292646a..17ea34d6 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -52,13 +52,19 @@ vi.mock("./MarkdownEditor", () => ({
     value = "",
     onChange,
     placeholder,
+    className,
+    contentClassName,
   }: {
     value?: string;
     onChange?: (value: string) => void;
     placeholder?: string;
+    className?: string;
+    contentClassName?: string;
   }) => (
     <textarea
       aria-label="Issue chat editor"
+      data-class-name={className}
+      data-content-class-name={contentClassName}
       placeholder={placeholder}
       value={value}
       onChange={(event) => onChange?.(event.target.value)}
@@ -240,6 +246,39 @@ describe("IssueChatThread", () => {
     });
   });
 
+  it("keeps the composer pinned with a capped editor height", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
+    expect(composer).not.toBeNull();
+    expect(composer?.className).toContain("sticky");
+    expect(composer?.className).toContain("bottom-0");
+    expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+0.75rem)]");
+
+    const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
+    expect(editor?.dataset.contentClassName).toContain("max-h-[40dvh]");
+    expect(editor?.dataset.contentClassName).toContain("overflow-y-auto");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("folds chain-of-thought when the same message transitions from running to complete", () => {
     expect(resolveAssistantMessageFoldedState({
       messageId: "message-1",
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 220de8ec..f535b9cf 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -1488,92 +1488,99 @@ function IssueChatComposer({
   }
 
   return (
-    <div className="space-y-2">
-      <MarkdownEditor
-        ref={editorRef}
-        value={body}
-        onChange={setBody}
-        placeholder="Reply"
-        mentions={mentions}
-        onSubmit={handleSubmit}
-        imageUploadHandler={onImageUpload}
-        contentClassName="min-h-[72px] text-sm"
-      />
+    <div
+      data-testid="issue-chat-composer"
+      className="sticky bottom-0 z-10 bg-gradient-to-t from-background via-background/95 to-background/70 pt-4 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] backdrop-blur supports-[backdrop-filter]:from-background/92 supports-[backdrop-filter]:via-background/82"
+    >
+      <div className="space-y-3 rounded-2xl border border-border/70 bg-background/95 p-3 shadow-sm">
+        <MarkdownEditor
+          ref={editorRef}
+          value={body}
+          onChange={setBody}
+          placeholder="Reply"
+          mentions={mentions}
+          onSubmit={handleSubmit}
+          imageUploadHandler={onImageUpload}
+          bordered
+          className="rounded-xl border-border/70 bg-background/95"
+          contentClassName="min-h-[72px] max-h-[40dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
+        />
 
-      <div className="mt-3 flex items-center justify-end gap-3">
-        {(onImageUpload || onAttachImage) ? (
-          <div className="mr-auto flex items-center gap-3">
+        <div className="flex flex-wrap items-center justify-end gap-3 border-t border-border/60 pt-2">
+          {(onImageUpload || onAttachImage) ? (
+            <div className="mr-auto flex items-center gap-3">
+              <input
+                ref={attachInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp,image/gif"
+                className="hidden"
+                onChange={handleAttachFile}
+              />
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => attachInputRef.current?.click()}
+                disabled={attaching}
+                title="Attach image"
+              >
+                <Paperclip className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : null}
+
+          <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
             <input
-              ref={attachInputRef}
-              type="file"
-              accept="image/png,image/jpeg,image/webp,image/gif"
-              className="hidden"
-              onChange={handleAttachFile}
+              type="checkbox"
+              checked={reopen}
+              onChange={(event) => setReopen(event.target.checked)}
+              className="rounded border-border"
             />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              onClick={() => attachInputRef.current?.click()}
-              disabled={attaching}
-              title="Attach image"
-            >
-              <Paperclip className="h-4 w-4" />
-            </Button>
-          </div>
-        ) : null}
+            Re-open
+          </label>
 
-        <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
-          <input
-            type="checkbox"
-            checked={reopen}
-            onChange={(event) => setReopen(event.target.checked)}
-            className="rounded border-border"
-          />
-          Re-open
-        </label>
+          {enableReassign && reassignOptions.length > 0 ? (
+            <InlineEntitySelector
+              value={reassignTarget}
+              options={reassignOptions}
+              placeholder="Assignee"
+              noneLabel="No assignee"
+              searchPlaceholder="Search assignees..."
+              emptyMessage="No assignees found."
+              onChange={setReassignTarget}
+              className="h-8 text-xs"
+              renderTriggerValue={(option) => {
+                if (!option) return <span className="text-muted-foreground">Assignee</span>;
+                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+                const agent = agentId ? agentMap?.get(agentId) : null;
+                return (
+                  <>
+                    {agent ? (
+                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    ) : null}
+                    <span className="truncate">{option.label}</span>
+                  </>
+                );
+              }}
+              renderOption={(option) => {
+                if (!option.id) return <span className="truncate">{option.label}</span>;
+                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+                const agent = agentId ? agentMap?.get(agentId) : null;
+                return (
+                  <>
+                    {agent ? (
+                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    ) : null}
+                    <span className="truncate">{option.label}</span>
+                  </>
+                );
+              }}
+            />
+          ) : null}
 
-        {enableReassign && reassignOptions.length > 0 ? (
-          <InlineEntitySelector
-            value={reassignTarget}
-            options={reassignOptions}
-            placeholder="Assignee"
-            noneLabel="No assignee"
-            searchPlaceholder="Search assignees..."
-            emptyMessage="No assignees found."
-            onChange={setReassignTarget}
-            className="h-8 text-xs"
-            renderTriggerValue={(option) => {
-              if (!option) return <span className="text-muted-foreground">Assignee</span>;
-              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-              const agent = agentId ? agentMap?.get(agentId) : null;
-              return (
-                <>
-                  {agent ? (
-                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  ) : null}
-                  <span className="truncate">{option.label}</span>
-                </>
-              );
-            }}
-            renderOption={(option) => {
-              if (!option.id) return <span className="truncate">{option.label}</span>;
-              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-              const agent = agentId ? agentMap?.get(agentId) : null;
-              return (
-                <>
-                  {agent ? (
-                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  ) : null}
-                  <span className="truncate">{option.label}</span>
-                </>
-              );
-            }}
-          />
-        ) : null}
-
-        <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
-          {submitting ? "Posting..." : "Send"}
-        </Button>
+          <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
+            {submitting ? "Posting..." : "Send"}
+          </Button>
+        </div>
       </div>
     </div>
   );

From 1079f21ac412fab7f17758af9f4ab796bf352b76 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 09:24:32 -0500
Subject: [PATCH 32/45] Add issue detail shortcut for comment composer

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.test.tsx    | 81 ++++++++++++++++---
 ui/src/components/IssueChatThread.tsx         | 63 +++++++++++----
 .../KeyboardShortcutsCheatsheet.tsx           |  1 +
 ui/src/lib/keyboardShortcuts.test.ts          | 25 ++++--
 ui/src/lib/keyboardShortcuts.ts               |  9 ++-
 ui/src/pages/IssueDetail.tsx                  | 29 +++++--
 6 files changed, 164 insertions(+), 44 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index 17ea34d6..aa6267e6 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -1,12 +1,16 @@
 // @vitest-environment jsdom
 
-import { act } from "react";
+import { act, createRef, forwardRef, useImperativeHandle } from "react";
 import type { ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { MemoryRouter } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { IssueChatThread, resolveAssistantMessageFoldedState } from "./IssueChatThread";
 
+const { markdownEditorFocusMock } = vi.hoisted(() => ({
+  markdownEditorFocusMock: vi.fn(),
+}));
+
 vi.mock("@assistant-ui/react", () => ({
   AssistantRuntimeProvider: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   ThreadPrimitive: {
@@ -48,7 +52,7 @@ vi.mock("./MarkdownBody", () => ({
 }));
 
 vi.mock("./MarkdownEditor", () => ({
-  MarkdownEditor: ({
+  MarkdownEditor: forwardRef(({
     value = "",
     onChange,
     placeholder,
@@ -60,16 +64,22 @@ vi.mock("./MarkdownEditor", () => ({
     placeholder?: string;
     className?: string;
     contentClassName?: string;
-  }) => (
-    <textarea
-      aria-label="Issue chat editor"
-      data-class-name={className}
-      data-content-class-name={contentClassName}
-      placeholder={placeholder}
-      value={value}
-      onChange={(event) => onChange?.(event.target.value)}
-    />
-  ),
+  }, ref) => {
+    useImperativeHandle(ref, () => ({
+      focus: markdownEditorFocusMock,
+    }));
+
+    return (
+      <textarea
+        aria-label="Issue chat editor"
+        data-class-name={className}
+        data-content-class-name={contentClassName}
+        placeholder={placeholder}
+        value={value}
+        onChange={(event) => onChange?.(event.target.value)}
+      />
+    );
+  }),
 }));
 
 vi.mock("./InlineEntitySelector", () => ({
@@ -111,6 +121,7 @@ describe("IssueChatThread", () => {
   afterEach(() => {
     container.remove();
     vi.useRealTimers();
+    markdownEditorFocusMock.mockReset();
   });
 
   it("drops the count heading and does not use an internal scrollbox", () => {
@@ -279,6 +290,52 @@ describe("IssueChatThread", () => {
     });
   });
 
+  it("exposes a composer focus handle that forwards to the editor", () => {
+    const root = createRoot(container);
+    const composerRef = createRef<{ focus: () => void }>();
+    const requestAnimationFrameMock = vi
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((callback: FrameRequestCallback) => {
+        callback(0);
+        return 1;
+      });
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            composerRef={composerRef}
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
+    expect(composerRef.current).not.toBeNull();
+    expect(composer).not.toBeNull();
+
+    const scrollIntoViewMock = vi.fn();
+    composer!.scrollIntoView = scrollIntoViewMock;
+
+    act(() => {
+      composerRef.current?.focus();
+    });
+
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: "smooth", block: "end" });
+    expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1);
+    requestAnimationFrameMock.mockRestore();
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("folds chain-of-thought when the same message transitions from running to complete", () => {
     expect(resolveAssistantMessageFoldedState({
       messageId: "message-1",
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index f535b9cf..105762a8 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -8,7 +8,18 @@ import {
   useMessage,
 } from "@assistant-ui/react";
 import type { ToolCallMessagePart } from "@assistant-ui/react";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type Ref,
+} from "react";
 import { Link, useLocation } from "@/lib/router";
 import type {
   Agent,
@@ -145,6 +156,24 @@ interface CommentReassignment {
   assigneeUserId: string | null;
 }
 
+export interface IssueChatComposerHandle {
+  focus: () => void;
+}
+
+interface IssueChatComposerProps {
+  onImageUpload?: (file: File) => Promise<string>;
+  onAttachImage?: (file: File) => Promise<void>;
+  draftKey?: string;
+  enableReassign?: boolean;
+  reassignOptions?: InlineEntityOption[];
+  currentAssigneeValue?: string;
+  suggestedAssigneeValue?: string;
+  mentions?: MentionOption[];
+  agentMap?: Map<string, Agent>;
+  composerDisabledReason?: string | null;
+  issueStatus?: string;
+}
+
 interface IssueChatThreadProps {
   comments: IssueChatComment[];
   feedbackVotes?: FeedbackVote[];
@@ -186,6 +215,7 @@ interface IssueChatThreadProps {
   onInterruptQueued?: (runId: string) => Promise<void>;
   interruptingQueuedRunId?: string | null;
   onImageClick?: (src: string) => void;
+  composerRef?: Ref<IssueChatComposerHandle>;
 }
 
 const DRAFT_DEBOUNCE_MS = 800;
@@ -1361,7 +1391,7 @@ function IssueChatSystemMessage() {
   return null;
 }
 
-function IssueChatComposer({
+const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerProps>(function IssueChatComposer({
   onImageUpload,
   onAttachImage,
   draftKey,
@@ -1373,19 +1403,7 @@ function IssueChatComposer({
   agentMap,
   composerDisabledReason = null,
   issueStatus,
-}: {
-  onImageUpload?: (file: File) => Promise<string>;
-  onAttachImage?: (file: File) => Promise<void>;
-  draftKey?: string;
-  enableReassign?: boolean;
-  reassignOptions?: InlineEntityOption[];
-  currentAssigneeValue?: string;
-  suggestedAssigneeValue?: string;
-  mentions?: MentionOption[];
-  agentMap?: Map<string, Agent>;
-  composerDisabledReason?: string | null;
-  issueStatus?: string;
-}) {
+}, forwardedRef) {
   const api = useAui();
   const [body, setBody] = useState("");
   const [reopen, setReopen] = useState(issueStatus === "done" || issueStatus === "cancelled");
@@ -1395,6 +1413,7 @@ function IssueChatComposer({
   const [reassignTarget, setReassignTarget] = useState(effectiveSuggestedAssigneeValue);
   const attachInputRef = useRef<HTMLInputElement | null>(null);
   const editorRef = useRef<MarkdownEditorRef>(null);
+  const composerContainerRef = useRef<HTMLDivElement | null>(null);
   const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -1420,6 +1439,15 @@ function IssueChatComposer({
     setReassignTarget(effectiveSuggestedAssigneeValue);
   }, [effectiveSuggestedAssigneeValue]);
 
+  useImperativeHandle(forwardedRef, () => ({
+    focus: () => {
+      composerContainerRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+      requestAnimationFrame(() => {
+        editorRef.current?.focus();
+      });
+    },
+  }), []);
+
   async function handleSubmit() {
     const trimmed = body.trim();
     if (!trimmed || submitting) return;
@@ -1489,6 +1517,7 @@ function IssueChatComposer({
 
   return (
     <div
+      ref={composerContainerRef}
       data-testid="issue-chat-composer"
       className="sticky bottom-0 z-10 bg-gradient-to-t from-background via-background/95 to-background/70 pt-4 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] backdrop-blur supports-[backdrop-filter]:from-background/92 supports-[backdrop-filter]:via-background/82"
     >
@@ -1584,7 +1613,7 @@ function IssueChatComposer({
       </div>
     </div>
   );
-}
+});
 
 export function IssueChatThread({
   comments,
@@ -1623,6 +1652,7 @@ export function IssueChatThread({
   onInterruptQueued,
   interruptingQueuedRunId = null,
   onImageClick,
+  composerRef,
 }: IssueChatThreadProps) {
   const location = useLocation();
   const hasScrolledRef = useRef(false);
@@ -1815,6 +1845,7 @@ export function IssueChatThread({
 
         {showComposer ? (
           <IssueChatComposer
+            ref={composerRef}
             onImageUpload={imageUploadHandler}
             onAttachImage={onAttachImage}
             draftKey={draftKey}
diff --git a/ui/src/components/KeyboardShortcutsCheatsheet.tsx b/ui/src/components/KeyboardShortcutsCheatsheet.tsx
index 9df4ef7f..937292ad 100644
--- a/ui/src/components/KeyboardShortcutsCheatsheet.tsx
+++ b/ui/src/components/KeyboardShortcutsCheatsheet.tsx
@@ -28,6 +28,7 @@ const sections: ShortcutSection[] = [
     shortcuts: [
       { keys: ["y"], label: "Quick-archive back to inbox" },
       { keys: ["g", "i"], label: "Go to inbox" },
+      { keys: ["g", "c"], label: "Focus comment composer" },
     ],
   },
   {
diff --git a/ui/src/lib/keyboardShortcuts.test.ts b/ui/src/lib/keyboardShortcuts.test.ts
index f885dfc9..2c463e00 100644
--- a/ui/src/lib/keyboardShortcuts.test.ts
+++ b/ui/src/lib/keyboardShortcuts.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 import {
   hasBlockingShortcutDialog,
   isKeyboardShortcutTextInputTarget,
-  resolveGoToInboxKeyAction,
+  resolveIssueDetailGoKeyAction,
   resolveInboxQuickArchiveKeyAction,
 } from "./keyboardShortcuts";
 
@@ -114,7 +114,7 @@ describe("keyboardShortcuts helpers", () => {
   it("arms go-to-inbox on a clean g press", () => {
     const button = document.createElement("button");
 
-    expect(resolveGoToInboxKeyAction({
+    expect(resolveIssueDetailGoKeyAction({
       armed: false,
       defaultPrevented: false,
       key: "g",
@@ -129,7 +129,7 @@ describe("keyboardShortcuts helpers", () => {
   it("navigates to inbox on i after g", () => {
     const button = document.createElement("button");
 
-    expect(resolveGoToInboxKeyAction({
+    expect(resolveIssueDetailGoKeyAction({
       armed: true,
       defaultPrevented: false,
       key: "i",
@@ -138,13 +138,28 @@ describe("keyboardShortcuts helpers", () => {
       altKey: false,
       target: button,
       hasOpenDialog: false,
-    })).toBe("navigate");
+    })).toBe("navigate_inbox");
+  });
+
+  it("focuses the comment composer on c after g", () => {
+    const button = document.createElement("button");
+
+    expect(resolveIssueDetailGoKeyAction({
+      armed: true,
+      defaultPrevented: false,
+      key: "c",
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      target: button,
+      hasOpenDialog: false,
+    })).toBe("focus_comment");
   });
 
   it("disarms go-to-inbox instead of firing from an editor", () => {
     const input = document.createElement("textarea");
 
-    expect(resolveGoToInboxKeyAction({
+    expect(resolveIssueDetailGoKeyAction({
       armed: true,
       defaultPrevented: false,
       key: "i",
diff --git a/ui/src/lib/keyboardShortcuts.ts b/ui/src/lib/keyboardShortcuts.ts
index 7e549c39..8532ed26 100644
--- a/ui/src/lib/keyboardShortcuts.ts
+++ b/ui/src/lib/keyboardShortcuts.ts
@@ -11,7 +11,7 @@ export const KEYBOARD_SHORTCUT_TEXT_INPUT_SELECTOR = [
 const MODIFIER_ONLY_KEYS = new Set(["Shift", "Meta", "Control", "Alt"]);
 
 export type InboxQuickArchiveKeyAction = "ignore" | "archive" | "disarm";
-export type GoToInboxKeyAction = "ignore" | "arm" | "navigate" | "disarm";
+export type IssueDetailGoKeyAction = "ignore" | "arm" | "navigate_inbox" | "focus_comment" | "disarm";
 
 export function isKeyboardShortcutTextInputTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
@@ -54,7 +54,7 @@ export function resolveInboxQuickArchiveKeyAction({
   return "ignore";
 }
 
-export function resolveGoToInboxKeyAction({
+export function resolveIssueDetailGoKeyAction({
   armed,
   defaultPrevented,
   key,
@@ -72,7 +72,7 @@ export function resolveGoToInboxKeyAction({
   altKey: boolean;
   target: EventTarget | null;
   hasOpenDialog: boolean;
-}): GoToInboxKeyAction {
+}): IssueDetailGoKeyAction {
   if (defaultPrevented) return armed ? "disarm" : "ignore";
   if (metaKey || ctrlKey || altKey || isModifierOnlyKey(key)) return "ignore";
   if (hasOpenDialog || isKeyboardShortcutTextInputTarget(target)) {
@@ -81,7 +81,8 @@ export function resolveGoToInboxKeyAction({
 
   const normalizedKey = key.toLowerCase();
   if (!armed) return normalizedKey === "g" ? "arm" : "ignore";
-  if (normalizedKey === "i") return "navigate";
+  if (normalizedKey === "i") return "navigate_inbox";
+  if (normalizedKey === "c") return "focus_comment";
   if (normalizedKey === "g") return "arm";
   return "disarm";
 }
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 76fd06eb..f9939b9b 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -27,7 +27,7 @@ import {
 } from "../lib/issueDetailBreadcrumb";
 import {
   hasBlockingShortcutDialog,
-  resolveGoToInboxKeyAction,
+  resolveIssueDetailGoKeyAction,
   resolveInboxQuickArchiveKeyAction,
 } from "../lib/keyboardShortcuts";
 import {
@@ -46,7 +46,7 @@ import { useProjectOrder } from "../hooks/useProjectOrder";
 import { relativeTime, cn, formatTokens, visibleRunCostUsd } from "../lib/utils";
 import { ApprovalCard } from "../components/ApprovalCard";
 import { InlineEditor } from "../components/InlineEditor";
-import { IssueChatThread } from "../components/IssueChatThread";
+import { IssueChatThread, type IssueChatComposerHandle } from "../components/IssueChatThread";
 import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
 import { IssueProperties } from "../components/IssueProperties";
 import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
@@ -322,8 +322,10 @@ export function IssueDetail() {
   const [galleryOpen, setGalleryOpen] = useState(false);
   const [galleryIndex, setGalleryIndex] = useState(0);
   const [optimisticComments, setOptimisticComments] = useState<OptimisticIssueComment[]>([]);
+  const [pendingCommentComposerFocusKey, setPendingCommentComposerFocusKey] = useState(0);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const lastMarkedReadIssueIdRef = useRef<string | null>(null);
+  const commentComposerRef = useRef<IssueChatComposerHandle | null>(null);
 
   const { data: issue, isLoading, error } = useQuery({
     queryKey: queryKeys.issues.detail(issueId!),
@@ -1310,7 +1312,7 @@ export function IssueDetail() {
     };
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      const action = resolveGoToInboxKeyAction({
+      const action = resolveIssueDetailGoKeyAction({
         armed: goToInboxShortcutArmedRef.current,
         defaultPrevented: event.defaultPrevented,
         key: event.key,
@@ -1328,10 +1330,16 @@ export function IssueDetail() {
       }
 
       disarm();
-      if (action !== "navigate") return;
-
-      event.preventDefault();
-      navigate(sourceBreadcrumb.href.startsWith("/inbox") ? sourceBreadcrumb.href : "/inbox");
+      if (action === "navigate_inbox") {
+        event.preventDefault();
+        navigate(sourceBreadcrumb.href.startsWith("/inbox") ? sourceBreadcrumb.href : "/inbox");
+        return;
+      }
+      if (action === "focus_comment") {
+        event.preventDefault();
+        setDetailTab("chat");
+        setPendingCommentComposerFocusKey((current) => current + 1);
+      }
     };
 
     document.addEventListener("pointerdown", handlePointerDown, true);
@@ -1345,6 +1353,12 @@ export function IssueDetail() {
     };
   }, [keyboardShortcutsEnabled, navigate, sourceBreadcrumb.href]);
 
+  useEffect(() => {
+    if (pendingCommentComposerFocusKey === 0) return;
+    if (detailTab !== "chat") return;
+    commentComposerRef.current?.focus();
+  }, [detailTab, pendingCommentComposerFocusKey]);
+
   const isImageAttachment = (attachment: IssueAttachment) => attachment.contentType.startsWith("image/");
   const attachmentList = attachments ?? [];
   const imageAttachments = attachmentList.filter(isImageAttachment);
@@ -1933,6 +1947,7 @@ export function IssueDetail() {
 
         <TabsContent value="chat">
           <IssueChatThread
+            composerRef={commentComposerRef}
             comments={commentsWithRunMeta}
             feedbackVotes={feedbackVotes}
             feedbackDataSharingPreference={feedbackDataSharingPreference}

From cbc237311ff27c18c92b1a0451de273d8bcd5a56 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 09:47:11 -0500
Subject: [PATCH 33/45] Fix interrupted issue chat rerender

---
 .../transcript/useLiveRunTranscripts.test.tsx | 118 ++++++++++++++++++
 .../transcript/useLiveRunTranscripts.ts       |  11 +-
 ui/src/lib/issue-chat-messages.test.ts        |  62 ++++++++-
 ui/src/lib/issue-chat-messages.ts             |   4 +-
 4 files changed, 190 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/transcript/useLiveRunTranscripts.test.tsx

diff --git a/ui/src/components/transcript/useLiveRunTranscripts.test.tsx b/ui/src/components/transcript/useLiveRunTranscripts.test.tsx
new file mode 100644
index 00000000..6a5105f0
--- /dev/null
+++ b/ui/src/components/transcript/useLiveRunTranscripts.test.tsx
@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useLiveRunTranscripts } from "./useLiveRunTranscripts";
+
+const { useQueryMock, logMock } = vi.hoisted(() => ({
+  useQueryMock: vi.fn(() => ({ data: { censorUsernameInLogs: false } })),
+  logMock: vi.fn(async () => ({ runId: "run-1", store: "memory", logRef: "log-1", content: "", nextOffset: 0 })),
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: useQueryMock,
+}));
+
+vi.mock("../../api/instanceSettings", () => ({
+  instanceSettingsApi: {
+    getGeneral: vi.fn(),
+  },
+}));
+
+vi.mock("../../api/heartbeats", () => ({
+  heartbeatsApi: {
+    log: logMock,
+  },
+}));
+
+vi.mock("../../adapters", () => ({
+  buildTranscript: (chunks: unknown[]) => chunks,
+  getUIAdapter: () => null,
+  onAdapterChange: () => () => {},
+}));
+
+class FakeWebSocket {
+  static readonly CONNECTING = 0;
+  static readonly OPEN = 1;
+  static readonly CLOSING = 2;
+  static readonly CLOSED = 3;
+  static instances: FakeWebSocket[] = [];
+
+  readonly url: string;
+  readyState = FakeWebSocket.CONNECTING;
+  onopen: ((event: Event) => void) | null = null;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  onerror: ((event: Event) => void) | null = null;
+  onclose: ((event: CloseEvent) => void) | null = null;
+  closeCalls: Array<{ code?: number; reason?: string }> = [];
+
+  constructor(url: string) {
+    this.url = url;
+    FakeWebSocket.instances.push(this);
+  }
+
+  close(code?: number, reason?: string) {
+    this.closeCalls.push({ code, reason });
+    this.readyState = FakeWebSocket.CLOSING;
+  }
+
+  triggerOpen() {
+    this.readyState = FakeWebSocket.OPEN;
+    this.onopen?.(new Event("open"));
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("useLiveRunTranscripts", () => {
+  const OriginalWebSocket = globalThis.WebSocket;
+
+  beforeEach(() => {
+    FakeWebSocket.instances = [];
+    useQueryMock.mockClear();
+    logMock.mockClear();
+    globalThis.WebSocket = FakeWebSocket as unknown as typeof WebSocket;
+  });
+
+  afterEach(() => {
+    globalThis.WebSocket = OriginalWebSocket;
+  });
+
+  it("waits for a connecting socket to open before closing it during cleanup", async () => {
+    function Harness() {
+      useLiveRunTranscripts({
+        companyId: "company-1",
+        runs: [{ id: "run-1", status: "running", adapterType: "codex_local" }],
+      });
+      return null;
+    }
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    await act(async () => {
+      root.render(<Harness />);
+      await Promise.resolve();
+    });
+
+    expect(FakeWebSocket.instances).toHaveLength(1);
+    const socket = FakeWebSocket.instances[0];
+    expect(socket.closeCalls).toHaveLength(0);
+
+    act(() => {
+      root.unmount();
+    });
+
+    expect(socket.closeCalls).toHaveLength(0);
+
+    act(() => {
+      socket.triggerOpen();
+    });
+
+    expect(socket.closeCalls).toEqual([{ code: 1000, reason: "live_run_transcripts_unmount" }]);
+    container.remove();
+  });
+});
diff --git a/ui/src/components/transcript/useLiveRunTranscripts.ts b/ui/src/components/transcript/useLiveRunTranscripts.ts
index 868645d6..6cccb64a 100644
--- a/ui/src/components/transcript/useLiveRunTranscripts.ts
+++ b/ui/src/components/transcript/useLiveRunTranscripts.ts
@@ -281,7 +281,16 @@ export function useLiveRunTranscripts({
         socket.onmessage = null;
         socket.onerror = null;
         socket.onclose = null;
-        socket.close(1000, "live_run_transcripts_unmount");
+        if (socket.readyState === WebSocket.CONNECTING) {
+          // Defer the close until the handshake completes so the browser
+          // does not emit a noisy "closed before the connection is established"
+          // warning during rapid run teardown.
+          socket.onopen = () => {
+            socket?.close(1000, "live_run_transcripts_unmount");
+          };
+        } else if (socket.readyState === WebSocket.OPEN) {
+          socket.close(1000, "live_run_transcripts_unmount");
+        }
       }
     };
   }, [activeRunIds, companyId, runById]);
diff --git a/ui/src/lib/issue-chat-messages.test.ts b/ui/src/lib/issue-chat-messages.test.ts
index f3ae87d7..92585bed 100644
--- a/ui/src/lib/issue-chat-messages.test.ts
+++ b/ui/src/lib/issue-chat-messages.test.ts
@@ -270,7 +270,7 @@ describe("buildIssueChatMessages", () => {
       "system:activity:event-1",
       "user:comment-1",
       "assistant:comment-2",
-      "assistant:live-run:run-live-1",
+      "assistant:run-assistant:run-live-1",
     ]);
 
     const liveRunMessage = messages.at(-1);
@@ -316,7 +316,7 @@ describe("buildIssueChatMessages", () => {
 
     expect(messages).toHaveLength(1);
     expect(messages[0]).toMatchObject({
-      id: "historical-run:run-history-1",
+      id: "run-assistant:run-history-1",
       role: "assistant",
       status: { type: "complete", reason: "stop" },
       metadata: {
@@ -333,6 +333,64 @@ describe("buildIssueChatMessages", () => {
     ]);
   });
 
+  it("keeps the same assistant message id when a live run becomes a cancelled historical run", () => {
+    const liveMessages = buildIssueChatMessages({
+      comments: [],
+      timelineEvents: [],
+      linkedRuns: [],
+      liveRuns: [
+        {
+          id: "run-1",
+          status: "running",
+          invocationSource: "manual",
+          triggerDetail: null,
+          startedAt: "2026-04-06T12:01:00.000Z",
+          finishedAt: null,
+          createdAt: "2026-04-06T12:01:00.000Z",
+          agentId: "agent-1",
+          agentName: "CodexCoder",
+          adapterType: "codex_local",
+        },
+      ],
+      transcriptsByRunId: new Map([
+        ["run-1", [{ kind: "assistant", ts: "2026-04-06T12:01:05.000Z", text: "Working on it." }]],
+      ]),
+      hasOutputForRun: (runId) => runId === "run-1",
+      currentUserId: "user-1",
+    });
+
+    const cancelledMessages = buildIssueChatMessages({
+      comments: [],
+      timelineEvents: [],
+      linkedRuns: [
+        {
+          runId: "run-1",
+          status: "cancelled",
+          agentId: "agent-1",
+          agentName: "CodexCoder",
+          createdAt: new Date("2026-04-06T12:01:00.000Z"),
+          startedAt: new Date("2026-04-06T12:01:00.000Z"),
+          finishedAt: new Date("2026-04-06T12:01:08.000Z"),
+        },
+      ],
+      liveRuns: [],
+      transcriptsByRunId: new Map([
+        ["run-1", [{ kind: "assistant", ts: "2026-04-06T12:01:05.000Z", text: "Working on it." }]],
+      ]),
+      hasOutputForRun: (runId) => runId === "run-1",
+      currentUserId: "user-1",
+    });
+
+    expect(liveMessages).toHaveLength(1);
+    expect(cancelledMessages).toHaveLength(1);
+    expect(liveMessages[0]).toMatchObject({ id: "run-assistant:run-1", status: { type: "running" } });
+    expect(cancelledMessages[0]).toMatchObject({
+      id: "run-assistant:run-1",
+      status: { type: "complete", reason: "stop" },
+      metadata: { custom: { runStatus: "cancelled" } },
+    });
+  });
+
   it("can keep succeeded runs without transcript output for embedded run feeds", () => {
     const messages = buildIssueChatMessages({
       comments: [],
diff --git a/ui/src/lib/issue-chat-messages.ts b/ui/src/lib/issue-chat-messages.ts
index 82086320..4a5e9a30 100644
--- a/ui/src/lib/issue-chat-messages.ts
+++ b/ui/src/lib/issue-chat-messages.ts
@@ -410,7 +410,7 @@ function createHistoricalTranscriptMessage(args: {
       : [];
 
   const message: ThreadAssistantMessage = {
-    id: `historical-run:${run.runId}`,
+    id: `run-assistant:${run.runId}`,
     role: "assistant",
     createdAt: toDate(run.startedAt ?? run.createdAt),
     content,
@@ -606,7 +606,7 @@ function createLiveRunMessage(args: {
   const content = parts;
 
   const message: ThreadAssistantMessage = {
-    id: `live-run:${run.id}`,
+    id: `run-assistant:${run.id}`,
     role: "assistant",
     createdAt: toDate(run.startedAt ?? run.createdAt),
     content,

From ba5cb34bed14358c7974a7f5c4413731aeee10df Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 09:51:45 -0500
Subject: [PATCH 34/45] Tighten issue chat composer height cap

---
 ui/src/components/IssueChatThread.test.tsx | 2 +-
 ui/src/components/IssueChatThread.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index aa6267e6..bc5a9903 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -282,7 +282,7 @@ describe("IssueChatThread", () => {
     expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+0.75rem)]");
 
     const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
-    expect(editor?.dataset.contentClassName).toContain("max-h-[40dvh]");
+    expect(editor?.dataset.contentClassName).toContain("max-h-[28dvh]");
     expect(editor?.dataset.contentClassName).toContain("overflow-y-auto");
 
     act(() => {
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 105762a8..65fcf09c 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -1532,7 +1532,7 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
           imageUploadHandler={onImageUpload}
           bordered
           className="rounded-xl border-border/70 bg-background/95"
-          contentClassName="min-h-[72px] max-h-[40dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
+          contentClassName="min-h-[72px] max-h-[28dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
         />
 
         <div className="flex flex-wrap items-center justify-end gap-3 border-t border-border/60 pt-2">

From e15b5412ec16bc1c0872a26c941d91066b414795 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 11:12:01 -0500
Subject: [PATCH 35/45] Prevent g c from leaking into global shortcuts

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/hooks/useKeyboardShortcuts.test.tsx | 58 ++++++++++++++++++++++
 ui/src/hooks/useKeyboardShortcuts.ts       |  4 ++
 ui/src/pages/IssueDetail.tsx               |  2 +
 3 files changed, 64 insertions(+)
 create mode 100644 ui/src/hooks/useKeyboardShortcuts.test.tsx

diff --git a/ui/src/hooks/useKeyboardShortcuts.test.tsx b/ui/src/hooks/useKeyboardShortcuts.test.tsx
new file mode 100644
index 00000000..9d1c59dc
--- /dev/null
+++ b/ui/src/hooks/useKeyboardShortcuts.test.tsx
@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useKeyboardShortcuts } from "./useKeyboardShortcuts";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function TestHarness({
+  onNewIssue,
+}: {
+  onNewIssue: () => void;
+}) {
+  useKeyboardShortcuts({
+    enabled: true,
+    onNewIssue,
+  });
+
+  return <div>keyboard shortcuts test</div>;
+}
+
+describe("useKeyboardShortcuts", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("ignores events already claimed by another handler", () => {
+    const root = createRoot(container);
+    const onNewIssue = vi.fn();
+
+    act(() => {
+      root.render(<TestHarness onNewIssue={onNewIssue} />);
+    });
+
+    const event = new KeyboardEvent("keydown", {
+      key: "c",
+      bubbles: true,
+      cancelable: true,
+    });
+    event.preventDefault();
+    document.dispatchEvent(event);
+
+    expect(onNewIssue).not.toHaveBeenCalled();
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});
diff --git a/ui/src/hooks/useKeyboardShortcuts.ts b/ui/src/hooks/useKeyboardShortcuts.ts
index c917ebba..1502adde 100644
--- a/ui/src/hooks/useKeyboardShortcuts.ts
+++ b/ui/src/hooks/useKeyboardShortcuts.ts
@@ -20,6 +20,10 @@ export function useKeyboardShortcuts({
     if (!enabled) return;
 
     function handleKeyDown(e: KeyboardEvent) {
+      if (e.defaultPrevented) {
+        return;
+      }
+
       // Don't fire shortcuts when typing in inputs
       if (isKeyboardShortcutTextInputTarget(e.target)) {
         return;
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index f9939b9b..41d0b25f 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -1332,11 +1332,13 @@ export function IssueDetail() {
       disarm();
       if (action === "navigate_inbox") {
         event.preventDefault();
+        event.stopPropagation();
         navigate(sourceBreadcrumb.href.startsWith("/inbox") ? sourceBreadcrumb.href : "/inbox");
         return;
       }
       if (action === "focus_comment") {
         event.preventDefault();
+        event.stopPropagation();
         setDetailTab("chat");
         setPendingCommentComposerFocusKey((current) => current + 1);
       }

From f44c951a225b1d73c9a85ea863738b84cd2a8033 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 11:21:11 -0500
Subject: [PATCH 36/45] Make issue chat composer inline again

---
 ui/src/components/IssueChatThread.test.tsx |   8 +-
 ui/src/components/IssueChatThread.tsx      | 167 ++++++++++-----------
 2 files changed, 86 insertions(+), 89 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index bc5a9903..a4b6f9b2 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -257,7 +257,7 @@ describe("IssueChatThread", () => {
     });
   });
 
-  it("keeps the composer pinned with a capped editor height", () => {
+  it("keeps the composer inline with bottom breathing room and a capped editor height", () => {
     const root = createRoot(container);
 
     act(() => {
@@ -277,9 +277,9 @@ describe("IssueChatThread", () => {
 
     const composer = container.querySelector('[data-testid="issue-chat-composer"]') as HTMLDivElement | null;
     expect(composer).not.toBeNull();
-    expect(composer?.className).toContain("sticky");
-    expect(composer?.className).toContain("bottom-0");
-    expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+0.75rem)]");
+    expect(composer?.className).not.toContain("sticky");
+    expect(composer?.className).not.toContain("bottom-0");
+    expect(composer?.className).toContain("pb-[calc(env(safe-area-inset-bottom)+1.5rem)]");
 
     const editor = container.querySelector('textarea[aria-label="Issue chat editor"]') as HTMLTextAreaElement | null;
     expect(editor?.dataset.contentClassName).toContain("max-h-[28dvh]");
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 65fcf09c..cc0fb09c 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -1519,97 +1519,94 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
     <div
       ref={composerContainerRef}
       data-testid="issue-chat-composer"
-      className="sticky bottom-0 z-10 bg-gradient-to-t from-background via-background/95 to-background/70 pt-4 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] backdrop-blur supports-[backdrop-filter]:from-background/92 supports-[backdrop-filter]:via-background/82"
+      className="space-y-3 pt-4 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"
     >
-      <div className="space-y-3 rounded-2xl border border-border/70 bg-background/95 p-3 shadow-sm">
-        <MarkdownEditor
-          ref={editorRef}
-          value={body}
-          onChange={setBody}
-          placeholder="Reply"
-          mentions={mentions}
-          onSubmit={handleSubmit}
-          imageUploadHandler={onImageUpload}
-          bordered
-          className="rounded-xl border-border/70 bg-background/95"
-          contentClassName="min-h-[72px] max-h-[28dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
-        />
+      <MarkdownEditor
+        ref={editorRef}
+        value={body}
+        onChange={setBody}
+        placeholder="Reply"
+        mentions={mentions}
+        onSubmit={handleSubmit}
+        imageUploadHandler={onImageUpload}
+        bordered
+        contentClassName="min-h-[72px] max-h-[28dvh] overflow-y-auto pr-1 text-sm scrollbar-auto-hide"
+      />
 
-        <div className="flex flex-wrap items-center justify-end gap-3 border-t border-border/60 pt-2">
-          {(onImageUpload || onAttachImage) ? (
-            <div className="mr-auto flex items-center gap-3">
-              <input
-                ref={attachInputRef}
-                type="file"
-                accept="image/png,image/jpeg,image/webp,image/gif"
-                className="hidden"
-                onChange={handleAttachFile}
-              />
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                onClick={() => attachInputRef.current?.click()}
-                disabled={attaching}
-                title="Attach image"
-              >
-                <Paperclip className="h-4 w-4" />
-              </Button>
-            </div>
-          ) : null}
-
-          <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+      <div className="flex flex-wrap items-center justify-end gap-3">
+        {(onImageUpload || onAttachImage) ? (
+          <div className="mr-auto flex items-center gap-3">
             <input
-              type="checkbox"
-              checked={reopen}
-              onChange={(event) => setReopen(event.target.checked)}
-              className="rounded border-border"
+              ref={attachInputRef}
+              type="file"
+              accept="image/png,image/jpeg,image/webp,image/gif"
+              className="hidden"
+              onChange={handleAttachFile}
             />
-            Re-open
-          </label>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => attachInputRef.current?.click()}
+              disabled={attaching}
+              title="Attach image"
+            >
+              <Paperclip className="h-4 w-4" />
+            </Button>
+          </div>
+        ) : null}
 
-          {enableReassign && reassignOptions.length > 0 ? (
-            <InlineEntitySelector
-              value={reassignTarget}
-              options={reassignOptions}
-              placeholder="Assignee"
-              noneLabel="No assignee"
-              searchPlaceholder="Search assignees..."
-              emptyMessage="No assignees found."
-              onChange={setReassignTarget}
-              className="h-8 text-xs"
-              renderTriggerValue={(option) => {
-                if (!option) return <span className="text-muted-foreground">Assignee</span>;
-                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-                const agent = agentId ? agentMap?.get(agentId) : null;
-                return (
-                  <>
-                    {agent ? (
-                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                    ) : null}
-                    <span className="truncate">{option.label}</span>
-                  </>
-                );
-              }}
-              renderOption={(option) => {
-                if (!option.id) return <span className="truncate">{option.label}</span>;
-                const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
-                const agent = agentId ? agentMap?.get(agentId) : null;
-                return (
-                  <>
-                    {agent ? (
-                      <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                    ) : null}
-                    <span className="truncate">{option.label}</span>
-                  </>
-                );
-              }}
-            />
-          ) : null}
+        <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={reopen}
+            onChange={(event) => setReopen(event.target.checked)}
+            className="rounded border-border"
+          />
+          Re-open
+        </label>
 
-          <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
-            {submitting ? "Posting..." : "Send"}
-          </Button>
-        </div>
+        {enableReassign && reassignOptions.length > 0 ? (
+          <InlineEntitySelector
+            value={reassignTarget}
+            options={reassignOptions}
+            placeholder="Assignee"
+            noneLabel="No assignee"
+            searchPlaceholder="Search assignees..."
+            emptyMessage="No assignees found."
+            onChange={setReassignTarget}
+            className="h-8 text-xs"
+            renderTriggerValue={(option) => {
+              if (!option) return <span className="text-muted-foreground">Assignee</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+            renderOption={(option) => {
+              if (!option.id) return <span className="truncate">{option.label}</span>;
+              const agentId = option.id.startsWith("agent:") ? option.id.slice("agent:".length) : null;
+              const agent = agentId ? agentMap?.get(agentId) : null;
+              return (
+                <>
+                  {agent ? (
+                    <AgentIcon icon={agent.icon} className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span className="truncate">{option.label}</span>
+                </>
+              );
+            }}
+          />
+        ) : null}
+
+        <Button size="sm" disabled={!canSubmit} onClick={() => void handleSubmit()}>
+          {submitting ? "Posting..." : "Send"}
+        </Button>
       </div>
     </div>
   );

From 2ebbad656134b339f73a2d22f2c85be7032486ce Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 16:41:13 -0500
Subject: [PATCH 37/45] Add breathing room when focusing comment composer

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.test.tsx | 3 +++
 ui/src/components/IssueChatThread.tsx      | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index a4b6f9b2..85884184 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -293,6 +293,7 @@ describe("IssueChatThread", () => {
   it("exposes a composer focus handle that forwards to the editor", () => {
     const root = createRoot(container);
     const composerRef = createRef<{ focus: () => void }>();
+    const scrollByMock = vi.spyOn(window, "scrollBy").mockImplementation(() => {});
     const requestAnimationFrameMock = vi
       .spyOn(window, "requestAnimationFrame")
       .mockImplementation((callback: FrameRequestCallback) => {
@@ -328,7 +329,9 @@ describe("IssueChatThread", () => {
     });
 
     expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: "smooth", block: "end" });
+    expect(scrollByMock).toHaveBeenCalledWith({ top: 96, behavior: "smooth" });
     expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1);
+    scrollByMock.mockRestore();
     requestAnimationFrameMock.mockRestore();
 
     act(() => {
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index cc0fb09c..c126fe08 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -219,6 +219,7 @@ interface IssueChatThreadProps {
 }
 
 const DRAFT_DEBOUNCE_MS = 800;
+const COMPOSER_FOCUS_SCROLL_PADDING_PX = 96;
 
 function toIsoString(value: string | Date | null | undefined): string | null {
   if (!value) return null;
@@ -1443,6 +1444,7 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
     focus: () => {
       composerContainerRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       requestAnimationFrame(() => {
+        window.scrollBy({ top: COMPOSER_FOCUS_SCROLL_PADDING_PX, behavior: "smooth" });
         editorRef.current?.focus();
       });
     },

From d82468d6e580f6bb35e5f0242fb883a198887994 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 16:50:39 -0500
Subject: [PATCH 38/45] Keep interrupted runs stable in issue chat

---
 ui/src/lib/optimistic-issue-runs.test.ts | 114 +++++++++++++++++++++++
 ui/src/lib/optimistic-issue-runs.ts      |  68 ++++++++++++++
 ui/src/pages/IssueDetail.tsx             |  46 ++++++++-
 3 files changed, 226 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/lib/optimistic-issue-runs.test.ts
 create mode 100644 ui/src/lib/optimistic-issue-runs.ts

diff --git a/ui/src/lib/optimistic-issue-runs.test.ts b/ui/src/lib/optimistic-issue-runs.test.ts
new file mode 100644
index 00000000..8efb9660
--- /dev/null
+++ b/ui/src/lib/optimistic-issue-runs.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+import type { RunForIssue } from "../api/activity";
+import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
+import { removeLiveRunById, upsertInterruptedRun } from "./optimistic-issue-runs";
+
+function createLiveRun(overrides: Partial<LiveRunForIssue> = {}): LiveRunForIssue {
+  return {
+    id: "run-1",
+    status: "running",
+    invocationSource: "manual",
+    triggerDetail: null,
+    startedAt: "2026-04-08T21:00:00.000Z",
+    finishedAt: null,
+    createdAt: "2026-04-08T21:00:00.000Z",
+    agentId: "agent-1",
+    agentName: "CodexCoder",
+    adapterType: "codex_local",
+    ...overrides,
+  };
+}
+
+function createActiveRun(overrides: Partial<ActiveRunForIssue> = {}): ActiveRunForIssue {
+  return {
+    id: "run-1",
+    companyId: "company-1",
+    agentId: "agent-1",
+    agentName: "CodexCoder",
+    adapterType: "codex_local",
+    invocationSource: "on_demand",
+    triggerDetail: null,
+    status: "running",
+    startedAt: new Date("2026-04-08T21:00:00.000Z"),
+    finishedAt: null,
+    error: null,
+    wakeupRequestId: null,
+    exitCode: null,
+    signal: null,
+    usageJson: { inputTokens: 1 },
+    resultJson: { summary: "partial" },
+    sessionIdBefore: null,
+    sessionIdAfter: null,
+    logStore: null,
+    logRef: null,
+    logBytes: null,
+    logSha256: null,
+    logCompressed: false,
+    stdoutExcerpt: null,
+    stderrExcerpt: null,
+    errorCode: null,
+    externalRunId: null,
+    processPid: null,
+    processStartedAt: null,
+    retryOfRunId: null,
+    processLossRetryCount: 0,
+    contextSnapshot: null,
+    createdAt: new Date("2026-04-08T21:00:00.000Z"),
+    updatedAt: new Date("2026-04-08T21:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+describe("upsertInterruptedRun", () => {
+  it("adds a synthetic cancelled historical run when the live run has not reached linkedRuns yet", () => {
+    const runs = upsertInterruptedRun(undefined, createLiveRun(), "2026-04-08T21:00:10.000Z");
+    expect(runs).toEqual([{
+      runId: "run-1",
+      status: "cancelled",
+      agentId: "agent-1",
+      startedAt: "2026-04-08T21:00:00.000Z",
+      finishedAt: "2026-04-08T21:00:10.000Z",
+      createdAt: "2026-04-08T21:00:00.000Z",
+      invocationSource: "manual",
+      usageJson: null,
+      resultJson: null,
+    }]);
+  });
+
+  it("updates an existing linked run in place when the interrupted run is already present", () => {
+    const existing: RunForIssue[] = [{
+      runId: "run-1",
+      status: "running",
+      agentId: "agent-1",
+      startedAt: "2026-04-08T21:00:00.000Z",
+      finishedAt: null,
+      createdAt: "2026-04-08T21:00:00.000Z",
+      invocationSource: "manual",
+      usageJson: { inputTokens: 2 },
+      resultJson: { summary: "partial" },
+    }];
+
+    const runs = upsertInterruptedRun(existing, createActiveRun(), "2026-04-08T21:00:11.000Z");
+    expect(runs).toEqual([{
+      runId: "run-1",
+      status: "cancelled",
+      agentId: "agent-1",
+      startedAt: "2026-04-08T21:00:00.000Z",
+      finishedAt: "2026-04-08T21:00:11.000Z",
+      createdAt: "2026-04-08T21:00:00.000Z",
+      invocationSource: "on_demand",
+      usageJson: { inputTokens: 2 },
+      resultJson: { summary: "partial" },
+    }]);
+  });
+});
+
+describe("removeLiveRunById", () => {
+  it("removes an interrupted live run from the live list", () => {
+    const runs = removeLiveRunById([
+      createLiveRun(),
+      createLiveRun({ id: "run-2" }),
+    ], "run-1");
+    expect(runs?.map((run) => run.id)).toEqual(["run-2"]);
+  });
+});
diff --git a/ui/src/lib/optimistic-issue-runs.ts b/ui/src/lib/optimistic-issue-runs.ts
new file mode 100644
index 00000000..f344868b
--- /dev/null
+++ b/ui/src/lib/optimistic-issue-runs.ts
@@ -0,0 +1,68 @@
+import type { RunForIssue } from "../api/activity";
+import type { ActiveRunForIssue, LiveRunForIssue } from "../api/heartbeats";
+
+export interface InterruptRunSource {
+  id: string;
+  agentId: string;
+  startedAt: Date | string | null;
+  createdAt: Date | string;
+  invocationSource: string;
+  usageJson?: Record<string, unknown> | null;
+  resultJson?: Record<string, unknown> | null;
+}
+
+function toTimestamp(value: Date | string | null | undefined) {
+  if (!value) return 0;
+  return new Date(value).getTime();
+}
+
+function toIsoString(value: Date | string | null | undefined) {
+  if (!value) return null;
+  return value instanceof Date ? value.toISOString() : value;
+}
+
+export function upsertInterruptedRun(
+  runs: RunForIssue[] | undefined,
+  run: InterruptRunSource,
+  finishedAt: string,
+): RunForIssue[] {
+  const nextRun: RunForIssue = {
+    runId: run.id,
+    status: "cancelled",
+    agentId: run.agentId,
+    startedAt: toIsoString(run.startedAt),
+    finishedAt,
+    createdAt: toIsoString(run.createdAt) ?? finishedAt,
+    invocationSource: run.invocationSource,
+    usageJson: run.usageJson ?? null,
+    resultJson: run.resultJson ?? null,
+  };
+
+  const current = runs ?? [];
+  const existingIndex = current.findIndex((entry) => entry.runId === run.id);
+  if (existingIndex === -1) {
+    return [...current, nextRun].sort((a, b) => {
+      const diff = toTimestamp(a.startedAt ?? a.createdAt) - toTimestamp(b.startedAt ?? b.createdAt);
+      if (diff !== 0) return diff;
+      return a.runId.localeCompare(b.runId);
+    });
+  }
+
+  const updated = [...current];
+  updated[existingIndex] = {
+    ...updated[existingIndex],
+    ...nextRun,
+    usageJson: updated[existingIndex]?.usageJson ?? nextRun.usageJson,
+    resultJson: updated[existingIndex]?.resultJson ?? nextRun.resultJson,
+  };
+  return updated;
+}
+
+export function removeLiveRunById(
+  runs: LiveRunForIssue[] | undefined,
+  runId: string,
+) {
+  if (!runs) return runs;
+  const nextRuns = runs.filter((run) => run.id !== runId);
+  return nextRuns.length === runs.length ? runs : nextRuns;
+}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 41d0b25f..dc31159d 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -4,7 +4,7 @@ import { Link, useLocation, useNavigate, useParams } from "@/lib/router";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { issuesApi } from "../api/issues";
 import { approvalsApi } from "../api/approvals";
-import { activityApi } from "../api/activity";
+import { activityApi, type RunForIssue } from "../api/activity";
 import { heartbeatsApi } from "../api/heartbeats";
 import { instanceSettingsApi } from "../api/instanceSettings";
 import { agentsApi } from "../api/agents";
@@ -42,6 +42,7 @@ import {
   type IssueCommentReassignment,
   type OptimisticIssueComment,
 } from "../lib/optimistic-issue-comments";
+import { removeLiveRunById, upsertInterruptedRun } from "../lib/optimistic-issue-runs";
 import { useProjectOrder } from "../hooks/useProjectOrder";
 import { relativeTime, cn, formatTokens, visibleRunCostUsd } from "../lib/utils";
 import { ApprovalCard } from "../components/ApprovalCard";
@@ -988,6 +989,44 @@ export function IssueDetail() {
 
   const interruptQueuedComment = useMutation({
     mutationFn: (runId: string) => heartbeatsApi.cancel(runId),
+    onMutate: async (runId) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.issues.runs(issueId!) });
+      await queryClient.cancelQueries({ queryKey: queryKeys.issues.liveRuns(issueId!) });
+      await queryClient.cancelQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
+
+      const previousRuns = queryClient.getQueryData<RunForIssue[]>(queryKeys.issues.runs(issueId!));
+      const previousLiveRuns = queryClient.getQueryData<typeof liveRuns>(queryKeys.issues.liveRuns(issueId!));
+      const previousActiveRun = queryClient.getQueryData<typeof activeRun>(queryKeys.issues.activeRun(issueId!));
+      const liveRunList = previousLiveRuns ?? liveRuns ?? [];
+      const cachedActiveRun = previousActiveRun ?? activeRun;
+      const targetRun =
+        cachedActiveRun?.id === runId
+          ? cachedActiveRun
+          : liveRunList?.find((run) => run.id === runId) ?? runningIssueRun ?? null;
+
+      if (targetRun) {
+        const interruptedAt = new Date().toISOString();
+        queryClient.setQueryData<RunForIssue[] | undefined>(
+          queryKeys.issues.runs(issueId!),
+          (current) => upsertInterruptedRun(current, targetRun, interruptedAt),
+        );
+      }
+
+      queryClient.setQueryData(
+        queryKeys.issues.liveRuns(issueId!),
+        (current: typeof liveRuns) => removeLiveRunById(current, runId),
+      );
+      queryClient.setQueryData(
+        queryKeys.issues.activeRun(issueId!),
+        (current: typeof activeRun) => (current?.id === runId ? null : current),
+      );
+
+      return {
+        previousRuns,
+        previousLiveRuns,
+        previousActiveRun,
+      };
+    },
     onSuccess: () => {
       invalidateIssue();
       pushToast({
@@ -996,7 +1035,10 @@ export function IssueDetail() {
         tone: "success",
       });
     },
-    onError: (err) => {
+    onError: (err, _runId, context) => {
+      queryClient.setQueryData(queryKeys.issues.runs(issueId!), context?.previousRuns);
+      queryClient.setQueryData(queryKeys.issues.liveRuns(issueId!), context?.previousLiveRuns);
+      queryClient.setQueryData(queryKeys.issues.activeRun(issueId!), context?.previousActiveRun);
       pushToast({
         title: "Interrupt failed",
         body: err instanceof Error ? err.message : "Unable to interrupt the active run",

From efc1e336b0ee6a80685dbbd124bcdb2720efcf29 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 16:56:59 -0500
Subject: [PATCH 39/45] Improve issue detail load stability

---
 ui/src/api/issues.test.ts                     |  26 ++
 ui/src/api/issues.ts                          |   2 +
 ui/src/components/IssueWorkspaceCard.test.tsx | 169 ++++++++
 ui/src/components/IssueWorkspaceCard.tsx      |  29 +-
 ui/src/lib/queryKeys.ts                       |   2 +
 ui/src/pages/IssueDetail.tsx                  | 362 +++++++++++-------
 6 files changed, 449 insertions(+), 141 deletions(-)
 create mode 100644 ui/src/api/issues.test.ts
 create mode 100644 ui/src/components/IssueWorkspaceCard.test.tsx

diff --git a/ui/src/api/issues.test.ts b/ui/src/api/issues.test.ts
new file mode 100644
index 00000000..d0b3fab0
--- /dev/null
+++ b/ui/src/api/issues.test.ts
@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockApi = vi.hoisted(() => ({
+  get: vi.fn(),
+}));
+
+vi.mock("./client", () => ({
+  api: mockApi,
+}));
+
+import { issuesApi } from "./issues";
+
+describe("issuesApi.list", () => {
+  beforeEach(() => {
+    mockApi.get.mockReset();
+    mockApi.get.mockResolvedValue([]);
+  });
+
+  it("passes parentId through to the company issues endpoint", async () => {
+    await issuesApi.list("company-1", { parentId: "issue-parent-1", limit: 25 });
+
+    expect(mockApi.get).toHaveBeenCalledWith(
+      "/companies/company-1/issues?parentId=issue-parent-1&limit=25",
+    );
+  });
+});
diff --git a/ui/src/api/issues.ts b/ui/src/api/issues.ts
index 30bacbb9..a628bde4 100644
--- a/ui/src/api/issues.ts
+++ b/ui/src/api/issues.ts
@@ -24,6 +24,7 @@ export const issuesApi = {
     filters?: {
       status?: string;
       projectId?: string;
+      parentId?: string;
       assigneeAgentId?: string;
       participantAgentId?: string;
       assigneeUserId?: string;
@@ -42,6 +43,7 @@ export const issuesApi = {
     const params = new URLSearchParams();
     if (filters?.status) params.set("status", filters.status);
     if (filters?.projectId) params.set("projectId", filters.projectId);
+    if (filters?.parentId) params.set("parentId", filters.parentId);
     if (filters?.assigneeAgentId) params.set("assigneeAgentId", filters.assigneeAgentId);
     if (filters?.participantAgentId) params.set("participantAgentId", filters.participantAgentId);
     if (filters?.assigneeUserId) params.set("assigneeUserId", filters.assigneeUserId);
diff --git a/ui/src/components/IssueWorkspaceCard.test.tsx b/ui/src/components/IssueWorkspaceCard.test.tsx
new file mode 100644
index 00000000..eef9a88f
--- /dev/null
+++ b/ui/src/components/IssueWorkspaceCard.test.tsx
@@ -0,0 +1,169 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import type { ComponentProps } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { Issue, Project } from "@paperclipai/shared";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { IssueWorkspaceCard } from "./IssueWorkspaceCard";
+
+const mockInstanceSettingsApi = vi.hoisted(() => ({
+  getExperimental: vi.fn(),
+}));
+
+const mockExecutionWorkspacesApi = vi.hoisted(() => ({
+  list: vi.fn(),
+}));
+
+vi.mock("../api/instanceSettings", () => ({
+  instanceSettingsApi: mockInstanceSettingsApi,
+}));
+
+vi.mock("../api/execution-workspaces", () => ({
+  executionWorkspacesApi: mockExecutionWorkspacesApi,
+}));
+
+vi.mock("../context/CompanyContext", () => ({
+  useCompany: () => ({
+    selectedCompanyId: "company-1",
+  }),
+}));
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ children, to, ...props }: ComponentProps<"a"> & { to: string }) => <a href={to} {...props}>{children}</a>,
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function createIssue(overrides: Partial<Issue> = {}): Issue {
+  return {
+    id: "issue-1",
+    companyId: "company-1",
+    projectId: "project-1",
+    projectWorkspaceId: null,
+    goalId: null,
+    parentId: null,
+    title: "Issue workspace",
+    description: null,
+    status: "todo",
+    priority: "medium",
+    assigneeAgentId: null,
+    assigneeUserId: null,
+    checkoutRunId: null,
+    executionRunId: null,
+    executionAgentNameKey: null,
+    executionLockedAt: null,
+    createdByAgentId: null,
+    createdByUserId: null,
+    issueNumber: 1,
+    identifier: "PAP-1",
+    requestDepth: 0,
+    billingCode: null,
+    assigneeAdapterOverrides: null,
+    executionWorkspaceId: null,
+    executionWorkspacePreference: "shared_workspace",
+    executionWorkspaceSettings: { mode: "shared_workspace" },
+    startedAt: null,
+    completedAt: null,
+    cancelledAt: null,
+    hiddenAt: null,
+    createdAt: new Date("2026-04-08T00:00:00.000Z"),
+    updatedAt: new Date("2026-04-08T00:00:00.000Z"),
+    ...overrides,
+  };
+}
+
+function createProject(): Project {
+  return {
+    id: "project-1",
+    companyId: "company-1",
+    urlKey: "project-1",
+    goalId: null,
+    goalIds: [],
+    goals: [],
+    name: "Project 1",
+    description: null,
+    status: "in_progress",
+    leadAgentId: null,
+    targetDate: null,
+    color: "#22c55e",
+    env: null,
+    pauseReason: null,
+    pausedAt: null,
+    archivedAt: null,
+    executionWorkspacePolicy: {
+      enabled: true,
+      defaultMode: "shared_workspace",
+      allowIssueOverride: true,
+    },
+    codebase: {
+      workspaceId: null,
+      repoUrl: null,
+      repoRef: null,
+      defaultRef: null,
+      repoName: null,
+      localFolder: null,
+      managedFolder: "/tmp/project-1",
+      effectiveLocalFolder: "/tmp/project-1",
+      origin: "managed_checkout",
+    },
+    workspaces: [],
+    primaryWorkspace: null,
+    createdAt: new Date("2026-04-08T00:00:00.000Z"),
+    updatedAt: new Date("2026-04-08T00:00:00.000Z"),
+  };
+}
+
+function renderCard(container: HTMLDivElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+  const root = createRoot(container);
+  act(() => {
+    root.render(
+      <QueryClientProvider client={queryClient}>
+        <IssueWorkspaceCard issue={createIssue()} project={createProject()} onUpdate={() => {}} />
+      </QueryClientProvider>,
+    );
+  });
+  return root;
+}
+
+async function flush() {
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+describe("IssueWorkspaceCard", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    mockExecutionWorkspacesApi.list.mockReset();
+    mockExecutionWorkspacesApi.list.mockResolvedValue([]);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders a stable skeleton while workspace settings are still loading", async () => {
+    mockInstanceSettingsApi.getExperimental.mockImplementation(() => new Promise(() => {}));
+
+    const root = renderCard(container);
+    await flush();
+
+    expect(container.querySelector('[data-testid="issue-workspace-card-skeleton"]')).not.toBeNull();
+
+    await act(async () => {
+      root.unmount();
+    });
+  });
+});
diff --git a/ui/src/components/IssueWorkspaceCard.tsx b/ui/src/components/IssueWorkspaceCard.tsx
index 6637c9c3..982f444b 100644
--- a/ui/src/components/IssueWorkspaceCard.tsx
+++ b/ui/src/components/IssueWorkspaceCard.tsx
@@ -8,6 +8,7 @@ import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
 import { cn, projectWorkspaceUrl } from "../lib/utils";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Check, Copy, GitBranch, FolderOpen, Pencil, X } from "lucide-react";
 
 /* -------------------------------------------------------------------------- */
@@ -156,6 +157,25 @@ function statusBadge(status: string) {
   );
 }
 
+function IssueWorkspaceCardSkeleton() {
+  return (
+    <div className="rounded-lg border border-border p-3 space-y-3" data-testid="issue-workspace-card-skeleton">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-4 w-4 rounded-full" />
+          <Skeleton className="h-4 w-36" />
+          <Skeleton className="h-5 w-16 rounded-full" />
+        </div>
+        <Skeleton className="h-6 w-14" />
+      </div>
+      <div className="space-y-2">
+        <Skeleton className="h-3 w-40" />
+        <Skeleton className="h-3 w-full" />
+      </div>
+    </div>
+  );
+}
+
 /* -------------------------------------------------------------------------- */
 /*  Main component                                                             */
 /* -------------------------------------------------------------------------- */
@@ -195,14 +215,15 @@ export function IssueWorkspaceCard({
   const companyId = issue.companyId ?? selectedCompanyId;
   const [editing, setEditing] = useState(initialEditing);
 
-  const { data: experimentalSettings } = useQuery({
+  const { data: experimentalSettings, isLoading: experimentalSettingsLoading } = useQuery({
     queryKey: queryKeys.instance.experimentalSettings,
     queryFn: () => instanceSettingsApi.getExperimental(),
     retry: false,
   });
 
+  const projectWorkspacePolicyEnabled = Boolean(project?.executionWorkspacePolicy?.enabled);
   const policyEnabled = experimentalSettings?.enableIsolatedWorkspaces === true
-    && Boolean(project?.executionWorkspacePolicy?.enabled);
+    && projectWorkspacePolicyEnabled;
 
   const workspace = issue.currentExecutionWorkspace as ExecutionWorkspace | null | undefined;
 
@@ -314,6 +335,10 @@ export function IssueWorkspaceCard({
     setEditing(false);
   }, [currentSelection, issue.executionWorkspaceId]);
 
+  if (project && projectWorkspacePolicyEnabled && experimentalSettingsLoading) {
+    return <IssueWorkspaceCardSkeleton />;
+  }
+
   if (!policyEnabled || !project) return null;
 
   const showEditingControls = livePreview || editing;
diff --git a/ui/src/lib/queryKeys.ts b/ui/src/lib/queryKeys.ts
index c6c8aaed..78b052f8 100644
--- a/ui/src/lib/queryKeys.ts
+++ b/ui/src/lib/queryKeys.ts
@@ -39,6 +39,8 @@ export const queryKeys = {
     labels: (companyId: string) => ["issues", companyId, "labels"] as const,
     listByProject: (companyId: string, projectId: string) =>
       ["issues", companyId, "project", projectId] as const,
+    listByParent: (companyId: string, parentId: string) =>
+      ["issues", companyId, "parent", parentId] as const,
     listByExecutionWorkspace: (companyId: string, executionWorkspaceId: string) =>
       ["issues", companyId, "execution-workspace", executionWorkspaceId] as const,
     detail: (id: string) => ["issues", "detail", id] as const,
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index dc31159d..98c8be4c 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -51,6 +51,7 @@ import { IssueChatThread, type IssueChatComposerHandle } from "../components/Iss
 import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
 import { IssueProperties } from "../components/IssueProperties";
 import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
+import { PageSkeleton } from "../components/PageSkeleton";
 import type { MentionOption } from "../components/MarkdownEditor";
 import { ImageGalleryModal } from "../components/ImageGalleryModal";
 import { ScrollToBottom } from "../components/ScrollToBottom";
@@ -63,6 +64,7 @@ import { Separator } from "@/components/ui/separator";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
@@ -299,9 +301,59 @@ function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<st
   return <Identity name={id || "Unknown"} size="sm" />;
 }
 
+function IssueSectionSkeleton({
+  titleWidth = "w-28",
+  rows = 3,
+}: {
+  titleWidth?: string;
+  rows?: number;
+}) {
+  return (
+    <div className="space-y-3 rounded-lg border border-border p-3">
+      <Skeleton className={cn("h-4", titleWidth)} />
+      <div className="space-y-2">
+        {Array.from({ length: rows }).map((_, index) => (
+          <Skeleton key={index} className="h-12 w-full rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function IssueChatSkeleton() {
+  return (
+    <div className="space-y-3 rounded-lg border border-border p-3">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-8 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-3 w-24" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+        </div>
+        <Skeleton className="h-20 w-full rounded-xl" />
+      </div>
+      <div className="space-y-2">
+        <div className="flex items-center justify-end gap-2">
+          <div className="space-y-2 text-right">
+            <Skeleton className="ml-auto h-3 w-20" />
+            <Skeleton className="ml-auto h-3 w-14" />
+          </div>
+          <Skeleton className="h-8 w-8 rounded-full" />
+        </div>
+        <Skeleton className="ml-auto h-16 w-[85%] rounded-xl" />
+      </div>
+      <div className="space-y-2 border-t border-border pt-3">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-24 w-full rounded-xl" />
+      </div>
+    </div>
+  );
+}
+
 export function IssueDetail() {
   const { issueId } = useParams<{ issueId: string }>();
-  const { selectedCompanyId, selectedCompany } = useCompany();
+  const { selectedCompanyId } = useCompany();
   const { openNewIssue } = useDialog();
   const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
   const { setBreadcrumbs } = useBreadcrumbs();
@@ -341,13 +393,13 @@ export function IssueDetail() {
     return getClosedIsolatedExecutionWorkspaceMessage(issue.currentExecutionWorkspace);
   }, [issue?.currentExecutionWorkspace]);
 
-  const { data: comments } = useQuery({
+  const { data: comments, isLoading: commentsLoading } = useQuery({
     queryKey: queryKeys.issues.comments(issueId!),
     queryFn: () => issuesApi.listComments(issueId!),
     enabled: !!issueId,
   });
 
-  const { data: activity } = useQuery({
+  const { data: activity, isLoading: activityLoading } = useQuery({
     queryKey: queryKeys.issues.activity(issueId!),
     queryFn: () => activityApi.forIssue(issueId!),
     enabled: !!issueId,
@@ -359,13 +411,13 @@ export function IssueDetail() {
     enabled: !!issueId,
   });
 
-  const { data: attachments } = useQuery({
+  const { data: attachments, isLoading: attachmentsLoading } = useQuery({
     queryKey: queryKeys.issues.attachments(issueId!),
     queryFn: () => issuesApi.listAttachments(issueId!),
     enabled: !!issueId,
   });
 
-  const { data: liveRuns } = useQuery({
+  const { data: liveRuns, isLoading: liveRunsLoading } = useQuery({
     queryKey: queryKeys.issues.liveRuns(issueId!),
     queryFn: () => heartbeatsApi.liveRunsForIssue(issueId!),
     enabled: !!issueId,
@@ -377,7 +429,7 @@ export function IssueDetail() {
     },
   });
 
-  const { data: activeRun } = useQuery({
+  const { data: activeRun, isLoading: activeRunLoading } = useQuery({
     queryKey: queryKeys.issues.activeRun(issueId!),
     queryFn: () => heartbeatsApi.activeRunForIssue(issueId!),
     enabled: !!issueId,
@@ -422,10 +474,13 @@ export function IssueDetail() {
     return (linkedRuns ?? []).filter((r) => !liveIds.has(r.runId));
   }, [linkedRuns, liveRuns, activeRun]);
 
-  const { data: allIssues } = useQuery({
-    queryKey: queryKeys.issues.list(selectedCompanyId!),
-    queryFn: () => issuesApi.list(selectedCompanyId!),
-    enabled: !!selectedCompanyId,
+  const { data: rawChildIssues = [], isLoading: childIssuesLoading } = useQuery({
+    queryKey:
+      issue?.id && resolvedCompanyId
+        ? queryKeys.issues.listByParent(resolvedCompanyId, issue.id)
+        : ["issues", "parent", "pending"],
+    queryFn: () => issuesApi.list(resolvedCompanyId!, { parentId: issue!.id }),
+    enabled: !!resolvedCompanyId && !!issue?.id,
   });
 
   const { data: agents } = useQuery({
@@ -511,12 +566,14 @@ export function IssueDetail() {
     return options;
   }, [agents, orderedProjects]);
 
-  const childIssues = useMemo(() => {
-    if (!allIssues || !issue) return [];
-    return allIssues
-      .filter((i) => i.parentId === issue.id)
-      .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
-  }, [allIssues, issue]);
+  const resolvedProject = useMemo(
+    () => (issue?.projectId ? orderedProjects.find((project) => project.id === issue.projectId) ?? issue.project ?? null : null),
+    [issue?.project, issue?.projectId, orderedProjects],
+  );
+  const childIssues = useMemo(
+    () => [...rawChildIssues].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
+    [rawChildIssues],
+  );
   const childIssuesPanelKey = useMemo(
     () => childIssues.map((child) => `${child.id}:${String(child.updatedAt)}`).join("|"),
     [childIssues],
@@ -1446,7 +1503,18 @@ export function IssueDetail() {
     setTimeout(() => setCopied(false), 2000);
   };
 
-  if (isLoading) return <p className="text-sm text-muted-foreground">Loading...</p>;
+  const issueChatInitialLoading =
+    (commentsLoading && comments === undefined)
+    || (activityLoading && activity === undefined)
+    || (linkedRunsLoading && linkedRuns === undefined)
+    || (liveRunsLoading && liveRuns === undefined)
+    || (activeRunLoading && activeRun === undefined);
+  const activityInitialLoading =
+    (activityLoading && activity === undefined)
+    || (linkedRunsLoading && linkedRuns === undefined);
+  const attachmentsInitialLoading = attachmentsLoading && attachments === undefined;
+
+  if (isLoading) return <PageSkeleton variant="detail" />;
   if (error) return <p className="text-sm text-destructive">{error.message}</p>;
   if (!issue) return null;
 
@@ -1586,7 +1654,7 @@ export function IssueDetail() {
               className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors rounded px-1 -mx-1 py-0.5 min-w-0"
             >
               <Hexagon className="h-3 w-3 shrink-0" />
-              <span className="truncate">{(projects ?? []).find((p) => p.id === issue.projectId)?.name ?? issue.projectId.slice(0, 8)}</span>
+              <span className="truncate">{resolvedProject?.name ?? issue.project?.name ?? issue.projectId.slice(0, 8)}</span>
             </Link>
           ) : (
             <span className="inline-flex items-center gap-1 text-xs text-muted-foreground opacity-50 px-1 -mx-1 py-0.5">
@@ -1748,7 +1816,7 @@ export function IssueDetail() {
         missingBehavior="placeholder"
       />
 
-      {childIssues.length > 0 && (
+      {(childIssuesLoading || childIssues.length > 0) && (
         <div className="space-y-3">
           <div className="flex items-center justify-between gap-2">
             <h3 className="text-sm font-medium text-muted-foreground">Sub-issues</h3>
@@ -1758,37 +1826,41 @@ export function IssueDetail() {
               <span className="sm:hidden">Sub-issue</span>
             </Button>
           </div>
-          <div className="border border-border rounded-lg divide-y divide-border">
-            {childIssues.map((child) => (
-              <Link
-                key={child.id}
-                to={createIssueDetailPath(child.identifier ?? child.id)}
-                state={resolvedIssueDetailState ?? location.state}
-                onClickCapture={() =>
-                  rememberIssueDetailLocationState(
-                    child.identifier ?? child.id,
-                    resolvedIssueDetailState ?? location.state,
-                    location.search,
-                  )}
-                className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent/20 transition-colors"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  <StatusIcon status={child.status} />
-                  <PriorityIcon priority={child.priority} />
-                  <span className="font-mono text-muted-foreground shrink-0">
-                    {child.identifier ?? child.id.slice(0, 8)}
-                  </span>
-                  <span className="truncate">{child.title}</span>
-                </div>
-                {child.assigneeAgentId && (() => {
-                  const name = agentMap.get(child.assigneeAgentId)?.name;
-                  return name
-                    ? <Identity name={name} size="sm" />
-                    : <span className="text-muted-foreground font-mono">{child.assigneeAgentId.slice(0, 8)}</span>;
-                })()}
-              </Link>
-            ))}
-          </div>
+          {childIssuesLoading ? (
+            <IssueSectionSkeleton titleWidth="w-24" rows={2} />
+          ) : (
+            <div className="border border-border rounded-lg divide-y divide-border">
+              {childIssues.map((child) => (
+                <Link
+                  key={child.id}
+                  to={createIssueDetailPath(child.identifier ?? child.id)}
+                  state={resolvedIssueDetailState ?? location.state}
+                  onClickCapture={() =>
+                    rememberIssueDetailLocationState(
+                      child.identifier ?? child.id,
+                      resolvedIssueDetailState ?? location.state,
+                      location.search,
+                    )}
+                  className="flex items-center justify-between px-3 py-2 text-sm hover:bg-accent/20 transition-colors"
+                >
+                  <div className="flex items-center gap-2 min-w-0">
+                    <StatusIcon status={child.status} />
+                    <PriorityIcon priority={child.priority} />
+                    <span className="font-mono text-muted-foreground shrink-0">
+                      {child.identifier ?? child.id.slice(0, 8)}
+                    </span>
+                    <span className="truncate">{child.title}</span>
+                  </div>
+                  {child.assigneeAgentId && (() => {
+                    const name = agentMap.get(child.assigneeAgentId)?.name;
+                    return name
+                      ? <Identity name={name} size="sm" />
+                      : <span className="text-muted-foreground font-mono">{child.assigneeAgentId.slice(0, 8)}</span>;
+                  })()}
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
       )}
 
@@ -1827,7 +1899,9 @@ export function IssueDetail() {
         }
       />
 
-      {hasAttachments ? (
+      {attachmentsInitialLoading ? (
+        <IssueSectionSkeleton titleWidth="w-24" rows={2} />
+      ) : hasAttachments ? (
         <div
         className={cn(
           "space-y-3 rounded-lg transition-colors",
@@ -1966,7 +2040,7 @@ export function IssueDetail() {
 
       <IssueWorkspaceCard
         issue={issue}
-        project={orderedProjects.find((p) => p.id === issue.projectId) ?? null}
+        project={resolvedProject}
         onUpdate={(data) => updateIssue.mutate(data)}
       />
 
@@ -1990,100 +2064,110 @@ export function IssueDetail() {
         </TabsList>
 
         <TabsContent value="chat">
-          <IssueChatThread
-            composerRef={commentComposerRef}
-            comments={commentsWithRunMeta}
-            feedbackVotes={feedbackVotes}
-            feedbackDataSharingPreference={feedbackDataSharingPreference}
-            feedbackTermsUrl={FEEDBACK_TERMS_URL}
-            linkedRuns={timelineRuns}
-            timelineEvents={timelineEvents}
-            liveRuns={liveRuns}
-            activeRun={activeRun}
-            companyId={issue.companyId}
-            projectId={issue.projectId}
-            issueStatus={issue.status}
-            agentMap={agentMap}
-            currentUserId={currentUserId}
-            draftKey={`paperclip:issue-comment-draft:${issue.id}`}
-            enableReassign
-            reassignOptions={commentReassignOptions}
-            currentAssigneeValue={actualAssigneeValue}
-            suggestedAssigneeValue={suggestedAssigneeValue}
-            mentions={mentionOptions}
-            onInterruptQueued={handleInterruptQueued}
-            interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
-            composerDisabledReason={commentComposerDisabledReason}
-            onVote={handleCommentVote}
-            onAdd={handleCommentAdd}
-            imageUploadHandler={handleCommentImageUpload}
-            onAttachImage={handleCommentAttachImage}
-            onCancelRun={runningIssueRun
-              ? async () => {
-                  await interruptQueuedComment.mutateAsync(runningIssueRun.id);
-                }
-              : undefined}
-            onImageClick={handleChatImageClick}
-          />
+          {issueChatInitialLoading ? (
+            <IssueChatSkeleton />
+          ) : (
+            <IssueChatThread
+              composerRef={commentComposerRef}
+              comments={commentsWithRunMeta}
+              feedbackVotes={feedbackVotes}
+              feedbackDataSharingPreference={feedbackDataSharingPreference}
+              feedbackTermsUrl={FEEDBACK_TERMS_URL}
+              linkedRuns={timelineRuns}
+              timelineEvents={timelineEvents}
+              liveRuns={liveRuns}
+              activeRun={activeRun}
+              companyId={issue.companyId}
+              projectId={issue.projectId}
+              issueStatus={issue.status}
+              agentMap={agentMap}
+              currentUserId={currentUserId}
+              draftKey={`paperclip:issue-comment-draft:${issue.id}`}
+              enableReassign
+              reassignOptions={commentReassignOptions}
+              currentAssigneeValue={actualAssigneeValue}
+              suggestedAssigneeValue={suggestedAssigneeValue}
+              mentions={mentionOptions}
+              onInterruptQueued={handleInterruptQueued}
+              interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
+              composerDisabledReason={commentComposerDisabledReason}
+              onVote={handleCommentVote}
+              onAdd={handleCommentAdd}
+              imageUploadHandler={handleCommentImageUpload}
+              onAttachImage={handleCommentAttachImage}
+              onCancelRun={runningIssueRun
+                ? async () => {
+                    await interruptQueuedComment.mutateAsync(runningIssueRun.id);
+                  }
+                : undefined}
+              onImageClick={handleChatImageClick}
+            />
+          )}
         </TabsContent>
 
         <TabsContent value="activity">
-          {linkedApprovals && linkedApprovals.length > 0 && (
-            <div className="mb-3 space-y-3">
-              {linkedApprovals.map((approval) => (
-                <ApprovalCard
-                  key={approval.id}
-                  approval={approval}
-                  requesterAgent={approval.requestedByAgentId ? agentMap.get(approval.requestedByAgentId) ?? null : null}
-                  onApprove={() => approvalDecision.mutate({ approvalId: approval.id, action: "approve" })}
-                  onReject={() => approvalDecision.mutate({ approvalId: approval.id, action: "reject" })}
-                  detailLink={`/approvals/${approval.id}`}
-                  isPending={pendingApprovalAction?.approvalId === approval.id}
-                  pendingAction={
-                    pendingApprovalAction?.approvalId === approval.id
-                      ? pendingApprovalAction.action
-                      : null
-                  }
-                />
-              ))}
-            </div>
-          )}
-          {linkedRuns && linkedRuns.length > 0 && (
-            <div className="mb-3 px-3 py-2 rounded-lg border border-border">
-              <div className="text-sm font-medium text-muted-foreground mb-1">Cost Summary</div>
-              {!issueCostSummary.hasCost && !issueCostSummary.hasTokens ? (
-                <div className="text-xs text-muted-foreground">No cost data yet.</div>
-              ) : (
-                <div className="flex flex-wrap gap-3 text-xs text-muted-foreground tabular-nums">
-                  {issueCostSummary.hasCost && (
-                    <span className="font-medium text-foreground">
-                      ${issueCostSummary.cost.toFixed(4)}
-                    </span>
-                  )}
-                  {issueCostSummary.hasTokens && (
-                    <span>
-                      Tokens {formatTokens(issueCostSummary.totalTokens)}
-                      {issueCostSummary.cached > 0
-                        ? ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)}, cached ${formatTokens(issueCostSummary.cached)})`
-                        : ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)})`}
-                    </span>
+          {activityInitialLoading ? (
+            <IssueSectionSkeleton titleWidth="w-20" rows={4} />
+          ) : (
+            <>
+              {linkedApprovals && linkedApprovals.length > 0 && (
+                <div className="mb-3 space-y-3">
+                  {linkedApprovals.map((approval) => (
+                    <ApprovalCard
+                      key={approval.id}
+                      approval={approval}
+                      requesterAgent={approval.requestedByAgentId ? agentMap.get(approval.requestedByAgentId) ?? null : null}
+                      onApprove={() => approvalDecision.mutate({ approvalId: approval.id, action: "approve" })}
+                      onReject={() => approvalDecision.mutate({ approvalId: approval.id, action: "reject" })}
+                      detailLink={`/approvals/${approval.id}`}
+                      isPending={pendingApprovalAction?.approvalId === approval.id}
+                      pendingAction={
+                        pendingApprovalAction?.approvalId === approval.id
+                          ? pendingApprovalAction.action
+                          : null
+                      }
+                    />
+                  ))}
+                </div>
+              )}
+              {linkedRuns && linkedRuns.length > 0 && (
+                <div className="mb-3 px-3 py-2 rounded-lg border border-border">
+                  <div className="text-sm font-medium text-muted-foreground mb-1">Cost Summary</div>
+                  {!issueCostSummary.hasCost && !issueCostSummary.hasTokens ? (
+                    <div className="text-xs text-muted-foreground">No cost data yet.</div>
+                  ) : (
+                    <div className="flex flex-wrap gap-3 text-xs text-muted-foreground tabular-nums">
+                      {issueCostSummary.hasCost && (
+                        <span className="font-medium text-foreground">
+                          ${issueCostSummary.cost.toFixed(4)}
+                        </span>
+                      )}
+                      {issueCostSummary.hasTokens && (
+                        <span>
+                          Tokens {formatTokens(issueCostSummary.totalTokens)}
+                          {issueCostSummary.cached > 0
+                            ? ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)}, cached ${formatTokens(issueCostSummary.cached)})`
+                            : ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)})`}
+                        </span>
+                      )}
+                    </div>
                   )}
                 </div>
               )}
-            </div>
-          )}
-          {!activity || activity.length === 0 ? (
-            <p className="text-xs text-muted-foreground">No activity yet.</p>
-          ) : (
-            <div className="space-y-1.5">
-              {activity.slice(0, 20).map((evt) => (
-                <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <ActorIdentity evt={evt} agentMap={agentMap} />
-                  <span>{formatAction(evt.action, evt.details)}</span>
-                  <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+              {!activity || activity.length === 0 ? (
+                <p className="text-xs text-muted-foreground">No activity yet.</p>
+              ) : (
+                <div className="space-y-1.5">
+                  {activity.slice(0, 20).map((evt) => (
+                    <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <ActorIdentity evt={evt} agentMap={agentMap} />
+                      <span>{formatAction(evt.action, evt.details)}</span>
+                      <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
+              )}
+            </>
           )}
         </TabsContent>
 

From de1cd5858d90b1ce3a4d1176aa9a816cfbdde720 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 17:00:57 -0500
Subject: [PATCH 40/45] Add explicit review start action in issue sidebar

---
 ui/src/components/IssueProperties.test.tsx | 140 +++++++++++++++++++++
 ui/src/components/IssueProperties.tsx      |  22 ++++
 2 files changed, 162 insertions(+)

diff --git a/ui/src/components/IssueProperties.test.tsx b/ui/src/components/IssueProperties.test.tsx
index 4c3a4f72..a1fe7e1c 100644
--- a/ui/src/components/IssueProperties.test.tsx
+++ b/ui/src/components/IssueProperties.test.tsx
@@ -3,6 +3,7 @@
 import { act } from "react";
 import type { ComponentProps, ReactNode } from "react";
 import { createRoot } from "react-dom/client";
+import type { IssueExecutionPolicy, IssueExecutionState } from "@paperclipai/shared";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { Issue } from "@paperclipai/shared";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -143,6 +144,30 @@ function createIssue(overrides: Partial<Issue> = {}): Issue {
   };
 }
 
+function createExecutionPolicy(overrides: Partial<IssueExecutionPolicy> = {}): IssueExecutionPolicy {
+  return {
+    mode: "normal",
+    commentRequired: true,
+    stages: [],
+    ...overrides,
+  };
+}
+
+function createExecutionState(overrides: Partial<IssueExecutionState> = {}): IssueExecutionState {
+  return {
+    status: "changes_requested",
+    currentStageId: "stage-1",
+    currentStageIndex: 0,
+    currentStageType: "review",
+    currentParticipant: { type: "agent", agentId: "agent-1", userId: null },
+    returnAssignee: { type: "agent", agentId: "agent-2", userId: null },
+    completedStageIds: [],
+    lastDecisionId: null,
+    lastDecisionOutcome: "changes_requested",
+    ...overrides,
+  };
+}
+
 function renderProperties(container: HTMLDivElement, props: ComponentProps<typeof IssueProperties>) {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -201,4 +226,119 @@ describe("IssueProperties", () => {
 
     act(() => root.unmount());
   });
+
+  it("shows a run review action after reviewers are configured and starts execution explicitly when clicked", async () => {
+    const onUpdate = vi.fn();
+    const root = renderProperties(container, {
+      issue: createIssue({
+        executionPolicy: createExecutionPolicy({
+          stages: [
+            {
+              id: "review-stage",
+              type: "review",
+              approvalsNeeded: 1,
+              participants: [{ id: "participant-1", type: "agent", agentId: "agent-1", userId: null }],
+            },
+          ],
+        }),
+      }),
+      childIssues: [],
+      onUpdate,
+    });
+    await flush();
+
+    const runReviewButton = Array.from(container.querySelectorAll("button"))
+      .find((button) => button.textContent?.includes("Run review now"));
+    expect(runReviewButton).not.toBeUndefined();
+
+    await act(async () => {
+      runReviewButton!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onUpdate).toHaveBeenCalledWith({ status: "in_review" });
+
+    act(() => root.unmount());
+  });
+
+  it("shows a run approval action when approval is the next runnable stage", async () => {
+    const root = renderProperties(container, {
+      issue: createIssue({
+        executionPolicy: createExecutionPolicy({
+          stages: [
+            {
+              id: "approval-stage",
+              type: "approval",
+              approvalsNeeded: 1,
+              participants: [{ id: "participant-2", type: "user", agentId: null, userId: "user-1" }],
+            },
+          ],
+        }),
+      }),
+      childIssues: [],
+      onUpdate: vi.fn(),
+    });
+    await flush();
+
+    expect(container.textContent).toContain("Run approval now");
+    expect(container.textContent).not.toContain("Run review now");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps the run review action available after changes are requested", async () => {
+    const root = renderProperties(container, {
+      issue: createIssue({
+        status: "in_progress",
+        executionPolicy: createExecutionPolicy({
+          stages: [
+            {
+              id: "review-stage",
+              type: "review",
+              approvalsNeeded: 1,
+              participants: [{ id: "participant-1", type: "agent", agentId: "agent-1", userId: null }],
+            },
+          ],
+        }),
+        executionState: createExecutionState(),
+      }),
+      childIssues: [],
+      onUpdate: vi.fn(),
+    });
+    await flush();
+
+    expect(container.textContent).toContain("Run review now");
+
+    act(() => root.unmount());
+  });
+
+  it("hides the run action while an execution stage is already pending", async () => {
+    const root = renderProperties(container, {
+      issue: createIssue({
+        status: "in_review",
+        executionPolicy: createExecutionPolicy({
+          stages: [
+            {
+              id: "review-stage",
+              type: "review",
+              approvalsNeeded: 1,
+              participants: [{ id: "participant-1", type: "agent", agentId: "agent-1", userId: null }],
+            },
+          ],
+        }),
+        executionState: createExecutionState({
+          status: "pending",
+          currentStageType: "review",
+          lastDecisionOutcome: null,
+        }),
+      }),
+      childIssues: [],
+      onUpdate: vi.fn(),
+    });
+    await flush();
+
+    expect(container.textContent).not.toContain("Run review now");
+    expect(container.textContent).not.toContain("Run approval now");
+
+    act(() => root.unmount());
+  });
 });
diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx
index bb555cce..c6d33ff2 100644
--- a/ui/src/components/IssueProperties.tsx
+++ b/ui/src/components/IssueProperties.tsx
@@ -309,6 +309,26 @@ export function IssueProperties({
   const approverTrigger = approverValues.length > 0
     ? <span className="text-sm truncate">{approverValues.map((value) => executionParticipantLabel(value)).join(", ")}</span>
     : <span className="text-sm text-muted-foreground">None</span>;
+  const nextRunnableExecutionStage = (() => {
+    if (issue.executionState?.status === "changes_requested" && issue.executionState.currentStageType) {
+      return issue.executionState.currentStageType;
+    }
+    if (issue.executionState) return null;
+    if (reviewerValues.length > 0) return "review";
+    if (approverValues.length > 0) return "approval";
+    return null;
+  })();
+  const runExecutionButton = (stageType: "review" | "approval") => (
+    <PropertyRow label="">
+      <button
+        type="button"
+        className="inline-flex items-center rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+        onClick={() => onUpdate({ status: "in_review" })}
+      >
+        {stageType === "review" ? "Run review now" : "Run approval now"}
+      </button>
+    </PropertyRow>
+  );
   const currentExecutionLabel = (() => {
     if (!issue.executionState?.currentStageType) return null;
     const stageLabel = issue.executionState.currentStageType === "review" ? "Review" : "Approval";
@@ -892,6 +912,7 @@ export function IssueProperties({
             () => updateExecutionPolicy([], approverValues),
           )}
         </PropertyPicker>
+        {nextRunnableExecutionStage === "review" && reviewerValues.length > 0 ? runExecutionButton("review") : null}
 
         <PropertyPicker
           inline={inline}
@@ -910,6 +931,7 @@ export function IssueProperties({
             () => updateExecutionPolicy(reviewerValues, []),
           )}
         </PropertyPicker>
+        {nextRunnableExecutionStage === "approval" && approverValues.length > 0 ? runExecutionButton("approval") : null}
 
         {currentExecutionLabel && (
           <PropertyRow label="Execution">

From a4b05d883178515448e260ddb72658cb49d23624 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 17:14:02 -0500
Subject: [PATCH 41/45] Guard issue chat against assistant-ui crashes

---
 ui/src/components/IssueChatThread.test.tsx |  50 +++++-
 ui/src/components/IssueChatThread.tsx      | 187 +++++++++++++++++++--
 2 files changed, 219 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/IssueChatThread.test.tsx b/ui/src/components/IssueChatThread.test.tsx
index 85884184..5ba66f14 100644
--- a/ui/src/components/IssueChatThread.test.tsx
+++ b/ui/src/components/IssueChatThread.test.tsx
@@ -11,6 +11,10 @@ const { markdownEditorFocusMock } = vi.hoisted(() => ({
   markdownEditorFocusMock: vi.fn(),
 }));
 
+const { threadMessagesMock } = vi.hoisted(() => ({
+  threadMessagesMock: vi.fn(() => <div data-testid="thread-messages" />),
+}));
+
 vi.mock("@assistant-ui/react", () => ({
   AssistantRuntimeProvider: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   ThreadPrimitive: {
@@ -21,7 +25,7 @@ vi.mock("@assistant-ui/react", () => ({
       <div data-testid="thread-viewport" className={className}>{children}</div>
     ),
     Empty: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-    Messages: () => <div data-testid="thread-messages" />,
+    Messages: () => threadMessagesMock(),
   },
   MessagePrimitive: {
     Root: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -116,12 +120,14 @@ describe("IssueChatThread", () => {
     container = document.createElement("div");
     document.body.appendChild(container);
     localStorage.clear();
+    threadMessagesMock.mockImplementation(() => <div data-testid="thread-messages" />);
   });
 
   afterEach(() => {
     container.remove();
     vi.useRealTimers();
     markdownEditorFocusMock.mockReset();
+    threadMessagesMock.mockReset();
   });
 
   it("drops the count heading and does not use an internal scrollbox", () => {
@@ -189,6 +195,48 @@ describe("IssueChatThread", () => {
     });
   });
 
+  it("falls back to a safe transcript warning when assistant-ui throws during message rendering", () => {
+    const root = createRoot(container);
+    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    threadMessagesMock.mockImplementation(() => {
+      throw new Error("tapClientLookup: Index 8 out of bounds (length: 8)");
+    });
+
+    act(() => {
+      root.render(
+        <MemoryRouter>
+          <IssueChatThread
+            comments={[{
+              id: "comment-1",
+              companyId: "company-1",
+              issueId: "issue-1",
+              authorAgentId: "agent-1",
+              authorUserId: null,
+              body: "Agent summary",
+              createdAt: new Date("2026-04-06T12:00:00.000Z"),
+              updatedAt: new Date("2026-04-06T12:00:00.000Z"),
+            }]}
+            linkedRuns={[]}
+            timelineEvents={[]}
+            liveRuns={[]}
+            onAdd={async () => {}}
+            showComposer={false}
+            enableLiveTranscriptPolling={false}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Chat renderer hit an internal state error.");
+    expect(container.textContent).toContain("Agent summary");
+    expect(consoleErrorSpy).toHaveBeenCalled();
+
+    consoleErrorSpy.mockRestore();
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("stores and restores the composer draft per issue key", () => {
     vi.useFakeTimers();
     const root = createRoot(container);
diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index c126fe08..884517b4 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -10,6 +10,7 @@ import {
 import type { ToolCallMessagePart } from "@assistant-ui/react";
 import {
   createContext,
+  Component,
   forwardRef,
   useContext,
   useEffect,
@@ -18,7 +19,9 @@ import {
   useRef,
   useState,
   type ChangeEvent,
+  type ErrorInfo,
   type Ref,
+  type ReactNode,
 } from "react";
 import { Link, useLocation } from "@/lib/router";
 import type {
@@ -76,7 +79,7 @@ import { cn, formatDateTime, formatShortDate } from "../lib/utils";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
-import { ArrowRight, Brain, Check, ChevronDown, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, Search, ThumbsDown, ThumbsUp } from "lucide-react";
+import { AlertTriangle, ArrowRight, Brain, Check, ChevronDown, Copy, Hammer, Loader2, MoreHorizontal, Paperclip, Search, ThumbsDown, ThumbsUp } from "lucide-react";
 
 interface IssueChatMessageContext {
   feedbackVoteByTargetId: Map<string, FeedbackVoteValue>;
@@ -218,6 +221,145 @@ interface IssueChatThreadProps {
   composerRef?: Ref<IssueChatComposerHandle>;
 }
 
+type IssueChatErrorBoundaryProps = {
+  resetKey: string;
+  messages: readonly import("@assistant-ui/react").ThreadMessage[];
+  emptyMessage: string;
+  variant: "full" | "embedded";
+  children: ReactNode;
+};
+
+type IssueChatErrorBoundaryState = {
+  hasError: boolean;
+};
+
+class IssueChatErrorBoundary extends Component<IssueChatErrorBoundaryProps, IssueChatErrorBoundaryState> {
+  override state: IssueChatErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): IssueChatErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  override componentDidCatch(error: unknown, info: ErrorInfo): void {
+    console.error("Issue chat renderer failed; falling back to safe transcript view", {
+      error,
+      info: info.componentStack,
+    });
+  }
+
+  override componentDidUpdate(prevProps: IssueChatErrorBoundaryProps): void {
+    if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      return (
+        <IssueChatFallbackThread
+          messages={this.props.messages}
+          emptyMessage={this.props.emptyMessage}
+          variant={this.props.variant}
+        />
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function fallbackAuthorLabel(message: import("@assistant-ui/react").ThreadMessage) {
+  const custom = message.metadata?.custom as Record<string, unknown> | undefined;
+  if (typeof custom?.["authorName"] === "string") return custom["authorName"];
+  if (typeof custom?.["runAgentName"] === "string") return custom["runAgentName"];
+  if (message.role === "assistant") return "Agent";
+  if (message.role === "user") return "You";
+  return "System";
+}
+
+function fallbackTextParts(message: import("@assistant-ui/react").ThreadMessage) {
+  const contentLines: string[] = [];
+  for (const part of message.content) {
+    if (part.type === "text" || part.type === "reasoning") {
+      if (part.text.trim().length > 0) contentLines.push(part.text);
+      continue;
+    }
+    if (part.type === "tool-call") {
+      const lines = [`Tool: ${part.toolName}`];
+      if (part.argsText?.trim()) lines.push(`Args:\n${part.argsText}`);
+      if (typeof part.result === "string" && part.result.trim()) lines.push(`Result:\n${part.result}`);
+      contentLines.push(lines.join("\n\n"));
+    }
+  }
+
+  const custom = message.metadata?.custom as Record<string, unknown> | undefined;
+  if (contentLines.length === 0 && typeof custom?.["waitingText"] === "string" && custom["waitingText"].trim()) {
+    contentLines.push(custom["waitingText"]);
+  }
+  return contentLines;
+}
+
+function IssueChatFallbackThread({
+  messages,
+  emptyMessage,
+  variant,
+}: {
+  messages: readonly import("@assistant-ui/react").ThreadMessage[];
+  emptyMessage: string;
+  variant: "full" | "embedded";
+}) {
+  return (
+    <div className={cn(variant === "embedded" ? "space-y-3" : "space-y-4")}>
+      <div className="rounded-xl border border-amber-300/60 bg-amber-50/80 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/30 dark:bg-amber-950/20 dark:text-amber-200">
+        <div className="flex items-start gap-2">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <div className="space-y-1">
+            <p className="font-medium">Chat renderer hit an internal state error.</p>
+            <p className="text-xs opacity-80">
+              Showing a safe fallback transcript instead of crashing the issues page.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {messages.length === 0 ? (
+        <div className={cn(
+          "text-center text-sm text-muted-foreground",
+          variant === "embedded"
+            ? "rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6"
+            : "rounded-2xl border border-dashed border-border bg-card px-6 py-10",
+        )}>
+          {emptyMessage}
+        </div>
+      ) : (
+        <div className={cn(variant === "embedded" ? "space-y-3" : "space-y-4")}>
+          {messages.map((message) => {
+            const lines = fallbackTextParts(message);
+            return (
+              <div key={message.id} className="rounded-xl border border-border/60 bg-card/70 px-4 py-3">
+                <div className="mb-2 flex items-center gap-2 text-sm">
+                  <span className="font-medium text-foreground">{fallbackAuthorLabel(message)}</span>
+                  {message.createdAt ? (
+                    <span className="text-[11px] text-muted-foreground">
+                      {commentDateLabel(message.createdAt)}
+                    </span>
+                  ) : null}
+                </div>
+                <div className="space-y-2">
+                  {lines.length > 0 ? lines.map((line, index) => (
+                    <MarkdownBody key={`${message.id}:fallback:${index}`}>{line}</MarkdownBody>
+                  )) : (
+                    <p className="text-sm text-muted-foreground">No message content.</p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const DRAFT_DEBOUNCE_MS = 800;
 const COMPOSER_FOCUS_SCROLL_PADDING_PX = 96;
 
@@ -1808,6 +1950,10 @@ export function IssueChatThread({
     ?? (variant === "embedded"
       ? "No run output yet."
       : "This issue conversation is empty. Start with a message below.");
+  const errorBoundaryResetKey = useMemo(
+    () => messages.map((message) => `${message.id}:${message.role}:${message.content.length}:${message.status?.type ?? "none"}`).join("|"),
+    [messages],
+  );
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
@@ -1825,22 +1971,29 @@ export function IssueChatThread({
           </div>
         ) : null}
 
-        <ThreadPrimitive.Root className="">
-          <ThreadPrimitive.Viewport className={variant === "embedded" ? "space-y-3" : "space-y-4"}>
-            <ThreadPrimitive.Empty>
-              <div className={cn(
-                "text-center text-sm text-muted-foreground",
-                variant === "embedded"
-                  ? "rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6"
-                  : "rounded-2xl border border-dashed border-border bg-card px-6 py-10",
-              )}>
-                {resolvedEmptyMessage}
-              </div>
-            </ThreadPrimitive.Empty>
-            <ThreadPrimitive.Messages components={components} />
-            <div ref={bottomAnchorRef} />
-          </ThreadPrimitive.Viewport>
-        </ThreadPrimitive.Root>
+        <IssueChatErrorBoundary
+          resetKey={errorBoundaryResetKey}
+          messages={messages}
+          emptyMessage={resolvedEmptyMessage}
+          variant={variant}
+        >
+          <ThreadPrimitive.Root className="">
+            <ThreadPrimitive.Viewport className={variant === "embedded" ? "space-y-3" : "space-y-4"}>
+              <ThreadPrimitive.Empty>
+                <div className={cn(
+                  "text-center text-sm text-muted-foreground",
+                  variant === "embedded"
+                    ? "rounded-xl border border-dashed border-border/70 bg-background/60 px-4 py-6"
+                    : "rounded-2xl border border-dashed border-border bg-card px-6 py-10",
+                )}>
+                  {resolvedEmptyMessage}
+                </div>
+              </ThreadPrimitive.Empty>
+              <ThreadPrimitive.Messages components={components} />
+              <div ref={bottomAnchorRef} />
+            </ThreadPrimitive.Viewport>
+          </ThreadPrimitive.Root>
+        </IssueChatErrorBoundary>
 
         {showComposer ? (
           <IssueChatComposer

From 9e8cd28f81d7e382cb88b4e231345f51aefe2703 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 17:22:52 -0500
Subject: [PATCH 42/45] Speed up issue detail comments and refreshes

---
 ui/src/api/issues.ts                         |  16 +-
 ui/src/lib/optimistic-issue-comments.test.ts |  87 ++++++++
 ui/src/lib/optimistic-issue-comments.ts      |  31 +++
 ui/src/pages/IssueDetail.tsx                 | 219 ++++++++++++-------
 4 files changed, 276 insertions(+), 77 deletions(-)

diff --git a/ui/src/api/issues.ts b/ui/src/api/issues.ts
index a628bde4..bd604af9 100644
--- a/ui/src/api/issues.ts
+++ b/ui/src/api/issues.ts
@@ -82,7 +82,21 @@ export const issuesApi = {
       expectedStatuses: ["todo", "backlog", "blocked", "in_review"],
     }),
   release: (id: string) => api.post<Issue>(`/issues/${id}/release`, {}),
-  listComments: (id: string) => api.get<IssueComment[]>(`/issues/${id}/comments`),
+  listComments: (
+    id: string,
+    filters?: {
+      after?: string;
+      order?: "asc" | "desc";
+      limit?: number;
+    },
+  ) => {
+    const params = new URLSearchParams();
+    if (filters?.after) params.set("after", filters.after);
+    if (filters?.order) params.set("order", filters.order);
+    if (filters?.limit) params.set("limit", String(filters.limit));
+    const qs = params.toString();
+    return api.get<IssueComment[]>(`/issues/${id}/comments${qs ? `?${qs}` : ""}`);
+  },
   listFeedbackVotes: (id: string) => api.get<FeedbackVote[]>(`/issues/${id}/feedback-votes`),
   listFeedbackTraces: (id: string, filters?: Record<string, string | boolean | undefined>) => {
     const params = new URLSearchParams();
diff --git a/ui/src/lib/optimistic-issue-comments.test.ts b/ui/src/lib/optimistic-issue-comments.test.ts
index 12659f61..2499ce9b 100644
--- a/ui/src/lib/optimistic-issue-comments.test.ts
+++ b/ui/src/lib/optimistic-issue-comments.test.ts
@@ -5,10 +5,12 @@ import {
   applyOptimisticIssueFieldUpdateToCollection,
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
+  flattenIssueCommentPages,
   isQueuedIssueComment,
   matchesIssueRef,
   mergeIssueComments,
   upsertIssueComment,
+  upsertIssueCommentInPages,
 } from "./optimistic-issue-comments";
 
 describe("optimistic issue comments", () => {
@@ -128,6 +130,91 @@ describe("optimistic issue comments", () => {
     expect(next[0]?.body).toBe("Updated");
   });
 
+  it("flattens paged comments into one chronological thread", () => {
+    const flattened = flattenIssueCommentPages([
+      [
+        {
+          id: "comment-3",
+          companyId: "company-1",
+          issueId: "issue-1",
+          authorAgentId: null,
+          authorUserId: "board-1",
+          body: "Newest",
+          createdAt: new Date("2026-03-28T14:00:03.000Z"),
+          updatedAt: new Date("2026-03-28T14:00:03.000Z"),
+        },
+      ],
+      [
+        {
+          id: "comment-1",
+          companyId: "company-1",
+          issueId: "issue-1",
+          authorAgentId: null,
+          authorUserId: "board-1",
+          body: "Oldest",
+          createdAt: new Date("2026-03-28T14:00:01.000Z"),
+          updatedAt: new Date("2026-03-28T14:00:01.000Z"),
+        },
+        {
+          id: "comment-2",
+          companyId: "company-1",
+          issueId: "issue-1",
+          authorAgentId: null,
+          authorUserId: "board-1",
+          body: "Middle",
+          createdAt: new Date("2026-03-28T14:00:02.000Z"),
+          updatedAt: new Date("2026-03-28T14:00:02.000Z"),
+        },
+      ],
+    ]);
+
+    expect(flattened.map((comment) => comment.id)).toEqual(["comment-1", "comment-2", "comment-3"]);
+  });
+
+  it("upserts paged comments without dropping older pages", () => {
+    const nextPages = upsertIssueCommentInPages(
+      [
+        [
+          {
+            id: "comment-3",
+            companyId: "company-1",
+            issueId: "issue-1",
+            authorAgentId: null,
+            authorUserId: "board-1",
+            body: "Newest",
+            createdAt: new Date("2026-03-28T14:00:03.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:03.000Z"),
+          },
+        ],
+        [
+          {
+            id: "comment-1",
+            companyId: "company-1",
+            issueId: "issue-1",
+            authorAgentId: null,
+            authorUserId: "board-1",
+            body: "Oldest",
+            createdAt: new Date("2026-03-28T14:00:01.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:01.000Z"),
+          },
+        ],
+      ],
+      {
+        id: "comment-4",
+        companyId: "company-1",
+        issueId: "issue-1",
+        authorAgentId: null,
+        authorUserId: "board-1",
+        body: "Brand new",
+        createdAt: new Date("2026-03-28T14:00:04.000Z"),
+        updatedAt: new Date("2026-03-28T14:00:04.000Z"),
+      },
+    );
+
+    expect(nextPages[0]?.map((comment) => comment.id)).toEqual(["comment-4", "comment-3"]);
+    expect(nextPages[1]?.map((comment) => comment.id)).toEqual(["comment-1"]);
+  });
+
   it("applies optimistic reopen and reassignment updates to the issue cache", () => {
     const next = applyOptimisticIssueCommentUpdate(
       {
diff --git a/ui/src/lib/optimistic-issue-comments.ts b/ui/src/lib/optimistic-issue-comments.ts
index be35ebb8..c7237bf8 100644
--- a/ui/src/lib/optimistic-issue-comments.ts
+++ b/ui/src/lib/optimistic-issue-comments.ts
@@ -33,6 +33,10 @@ export function sortIssueComments<T extends { createdAt: Date | string; id: stri
   });
 }
 
+function sortIssueCommentsDesc<T extends { createdAt: Date | string; id: string }>(comments: T[]) {
+  return sortIssueComments(comments).reverse();
+}
+
 export function createOptimisticIssueComment(params: {
   companyId: string;
   issueId: string;
@@ -92,6 +96,12 @@ export function mergeIssueComments(
   return sortIssueComments(merged);
 }
 
+export function flattenIssueCommentPages(
+  pages: ReadonlyArray<ReadonlyArray<IssueComment>> | undefined,
+): IssueComment[] {
+  return sortIssueComments((pages ?? []).flatMap((page) => page));
+}
+
 export function upsertIssueComment(
   comments: IssueComment[] | undefined,
   nextComment: IssueComment,
@@ -210,3 +220,24 @@ export function applyOptimisticIssueFieldUpdateToCollection(
 
   return changed ? nextIssues : issues;
 }
+
+export function upsertIssueCommentInPages(
+  pages: ReadonlyArray<ReadonlyArray<IssueComment>> | undefined,
+  nextComment: IssueComment,
+): IssueComment[][] {
+  if (!pages || pages.length === 0) {
+    return [[nextComment]];
+  }
+
+  const nextPages = pages.map((page) => [...page]);
+  for (let pageIndex = 0; pageIndex < nextPages.length; pageIndex += 1) {
+    const existingIndex = nextPages[pageIndex]!.findIndex((comment) => comment.id === nextComment.id);
+    if (existingIndex === -1) continue;
+    nextPages[pageIndex]![existingIndex] = nextComment;
+    nextPages[pageIndex] = sortIssueCommentsDesc(nextPages[pageIndex]!);
+    return nextPages;
+  }
+
+  nextPages[0] = sortIssueCommentsDesc([...nextPages[0]!, nextComment]);
+  return nextPages;
+}
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 98c8be4c..5741b40b 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import { pickTextColorForPillBg } from "@/lib/color-contrast";
 import { Link, useLocation, useNavigate, useParams } from "@/lib/router";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery, useMutation, useQueryClient, type InfiniteData } from "@tanstack/react-query";
 import { issuesApi } from "../api/issues";
 import { approvalsApi } from "../api/approvals";
 import { activityApi, type RunForIssue } from "../api/activity";
@@ -35,10 +35,11 @@ import {
   applyOptimisticIssueFieldUpdateToCollection,
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
+  flattenIssueCommentPages,
   isQueuedIssueComment,
   matchesIssueRef,
   mergeIssueComments,
-  upsertIssueComment,
+  upsertIssueCommentInPages,
   type IssueCommentReassignment,
   type OptimisticIssueComment,
 } from "../lib/optimistic-issue-comments";
@@ -134,6 +135,11 @@ const ACTION_LABELS: Record<string, string> = {
 };
 
 const FEEDBACK_TERMS_URL = import.meta.env.VITE_FEEDBACK_TERMS_URL?.trim() || "https://paperclip.ing/tos";
+const ISSUE_COMMENT_PAGE_SIZE = 50;
+
+function keepPreviousData<T>(previousData: T | undefined) {
+  return previousData;
+}
 
 function humanizeValue(value: unknown): string {
   if (typeof value !== "string") return String(value ?? "none");
@@ -393,28 +399,50 @@ export function IssueDetail() {
     return getClosedIsolatedExecutionWorkspaceMessage(issue.currentExecutionWorkspace);
   }, [issue?.currentExecutionWorkspace]);
 
-  const { data: comments, isLoading: commentsLoading } = useQuery({
+  const {
+    data: commentPages,
+    isLoading: commentsLoading,
+    isFetchingNextPage: commentsLoadingOlder,
+    hasNextPage: hasOlderComments,
+    fetchNextPage: fetchOlderComments,
+  } = useInfiniteQuery({
     queryKey: queryKeys.issues.comments(issueId!),
-    queryFn: () => issuesApi.listComments(issueId!),
+    queryFn: ({ pageParam }) =>
+      issuesApi.listComments(issueId!, {
+        order: "desc",
+        limit: ISSUE_COMMENT_PAGE_SIZE,
+        ...(pageParam ? { after: pageParam } : {}),
+      }),
     enabled: !!issueId,
+    initialPageParam: null as string | null,
+    getNextPageParam: (lastPage) =>
+      lastPage.length === ISSUE_COMMENT_PAGE_SIZE ? lastPage[lastPage.length - 1]?.id : undefined,
+    placeholderData: keepPreviousData,
   });
+  const comments = useMemo(
+    () => flattenIssueCommentPages(commentPages?.pages),
+    [commentPages?.pages],
+  );
 
   const { data: activity, isLoading: activityLoading } = useQuery({
     queryKey: queryKeys.issues.activity(issueId!),
     queryFn: () => activityApi.forIssue(issueId!),
     enabled: !!issueId,
+    placeholderData: keepPreviousData,
   });
 
   const { data: linkedApprovals } = useQuery({
     queryKey: queryKeys.issues.approvals(issueId!),
     queryFn: () => issuesApi.listApprovals(issueId!),
     enabled: !!issueId,
+    placeholderData: keepPreviousData,
   });
 
   const { data: attachments, isLoading: attachmentsLoading } = useQuery({
     queryKey: queryKeys.issues.attachments(issueId!),
     queryFn: () => issuesApi.listAttachments(issueId!),
     enabled: !!issueId,
+    placeholderData: keepPreviousData,
   });
 
   const { data: liveRuns, isLoading: liveRunsLoading } = useQuery({
@@ -427,26 +455,31 @@ export function IssueDetail() {
         ? ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS
         : IDLE_ISSUE_RUN_POLL_INTERVAL_MS;
     },
+    placeholderData: keepPreviousData,
   });
 
   const { data: activeRun, isLoading: activeRunLoading } = useQuery({
     queryKey: queryKeys.issues.activeRun(issueId!),
     queryFn: () => heartbeatsApi.activeRunForIssue(issueId!),
-    enabled: !!issueId,
+    enabled: !!issueId && (!!issue?.executionRunId || issue?.status === "in_progress"),
     refetchInterval: (query) =>
-      query.state.data
-        ? ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS
-        : IDLE_ISSUE_RUN_POLL_INTERVAL_MS,
+      (liveRuns?.length ?? 0) > 0
+        ? false
+        : query.state.data
+          ? ACTIVE_ISSUE_RUN_POLL_INTERVAL_MS
+          : IDLE_ISSUE_RUN_POLL_INTERVAL_MS,
+    placeholderData: keepPreviousData,
   });
 
   const hasLiveRuns = (liveRuns ?? []).length > 0 || !!activeRun;
-  const { data: linkedRuns } = useQuery({
+  const { data: linkedRuns, isLoading: linkedRunsLoading } = useQuery({
     queryKey: queryKeys.issues.runs(issueId!),
     queryFn: () => activityApi.runsForIssue(issueId!),
     enabled: !!issueId,
     refetchInterval: hasLiveRuns
       ? ACTIVE_ISSUE_TIMELINE_POLL_INTERVAL_MS
       : IDLE_ISSUE_TIMELINE_POLL_INTERVAL_MS,
+    placeholderData: keepPreviousData,
   });
   const runningIssueRun = useMemo(
     () => (
@@ -481,6 +514,7 @@ export function IssueDetail() {
         : ["issues", "parent", "pending"],
     queryFn: () => issuesApi.list(resolvedCompanyId!, { parentId: issue!.id }),
     enabled: !!resolvedCompanyId && !!issue?.id,
+    placeholderData: keepPreviousData,
   });
 
   const { data: agents } = useQuery({
@@ -734,26 +768,18 @@ export function IssueDetail() {
     };
   }, [linkedRuns]);
 
-  const invalidateIssue = () => {
+  const invalidateIssueDetail = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId!) });
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(issueId!) });
+  }, [issueId, queryClient]);
+
+  const invalidateIssueRunState = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(issueId!) });
-    queryClient.invalidateQueries({ queryKey: queryKeys.issues.approvals(issueId!) });
-    queryClient.invalidateQueries({ queryKey: queryKeys.issues.feedbackVotes(issueId!) });
-    queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(issueId!) });
-    queryClient.invalidateQueries({ queryKey: queryKeys.issues.documents(issueId!) });
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId!) });
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
-    if (selectedCompanyId) {
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listMineByMe(selectedCompanyId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
-      queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
-    }
-  };
+  }, [issueId, queryClient]);
 
-  const invalidateIssueCollections = () => {
+  const invalidateIssueCollections = useCallback(() => {
     if (selectedCompanyId) {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.listMineByMe(selectedCompanyId) });
@@ -761,7 +787,7 @@ export function IssueDetail() {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
       queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
     }
-  };
+  }, [queryClient, selectedCompanyId]);
 
   const applyOptimisticIssueCacheUpdate = useCallback((refs: Iterable<string>, data: Record<string, unknown>) => {
     queryClient.setQueriesData<Issue>(
@@ -867,7 +893,9 @@ export function IssueDetail() {
       setPendingApprovalAction({ approvalId, action });
     },
     onSuccess: (_approval, variables) => {
-      invalidateIssue();
+      invalidateIssueDetail();
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.approvals(issueId!) });
+      invalidateIssueCollections();
       queryClient.invalidateQueries({ queryKey: queryKeys.approvals.detail(variables.approvalId) });
       if (resolvedCompanyId) {
         queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(resolvedCompanyId) });
@@ -930,9 +958,15 @@ export function IssueDetail() {
           current.filter((entry) => entry.clientId !== context.optimisticCommentId),
         );
       }
-      queryClient.setQueryData<IssueComment[]>(
+      queryClient.setQueryData<InfiniteData<IssueComment[], string | null>>(
         queryKeys.issues.comments(issueId!),
-        (current) => upsertIssueComment(current, comment),
+        (current) => current ? {
+          ...current,
+          pages: upsertIssueCommentInPages(current.pages, comment),
+        } : {
+          pageParams: [null],
+          pages: upsertIssueCommentInPages(undefined, comment),
+        },
       );
     },
     onError: (err, _variables, context) => {
@@ -950,9 +984,14 @@ export function IssueDetail() {
         tone: "error",
       });
     },
-    onSettled: () => {
-      invalidateIssue();
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
+    onSettled: (_result, _error, variables) => {
+      invalidateIssueDetail();
+      if (variables.interrupt) {
+        invalidateIssueRunState();
+      }
+      if (variables.reopen) {
+        invalidateIssueCollections();
+      }
     },
   });
 
@@ -1017,9 +1056,15 @@ export function IssueDetail() {
       const { comment, ...nextIssue } = result;
       queryClient.setQueryData(queryKeys.issues.detail(issueId!), nextIssue);
       if (comment) {
-        queryClient.setQueryData<IssueComment[]>(
+        queryClient.setQueryData<InfiniteData<IssueComment[], string | null>>(
           queryKeys.issues.comments(issueId!),
-          (current) => upsertIssueComment(current, comment),
+          (current) => current ? {
+            ...current,
+            pages: upsertIssueCommentInPages(current.pages, comment),
+          } : {
+            pageParams: [null],
+            pages: upsertIssueCommentInPages(undefined, comment),
+          },
         );
       }
     },
@@ -1038,9 +1083,12 @@ export function IssueDetail() {
         tone: "error",
       });
     },
-    onSettled: () => {
-      invalidateIssue();
-      queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
+    onSettled: (_result, _error, variables) => {
+      invalidateIssueDetail();
+      if (variables.interrupt) {
+        invalidateIssueRunState();
+      }
+      invalidateIssueCollections();
     },
   });
 
@@ -1085,7 +1133,8 @@ export function IssueDetail() {
       };
     },
     onSuccess: () => {
-      invalidateIssue();
+      invalidateIssueDetail();
+      invalidateIssueRunState();
       pushToast({
         title: "Interrupt requested",
         body: "The active run is stopping so queued comments can continue next.",
@@ -1177,7 +1226,7 @@ export function IssueDetail() {
     onSuccess: () => {
       setAttachmentError(null);
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(issueId!) });
-      invalidateIssue();
+      invalidateIssueDetail();
     },
     onError: (err) => {
       setAttachmentError(err instanceof Error ? err.message : "Upload failed");
@@ -1201,7 +1250,8 @@ export function IssueDetail() {
     },
     onSuccess: () => {
       setAttachmentError(null);
-      invalidateIssue();
+      invalidateIssueDetail();
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.documents(issueId!) });
     },
     onError: (err) => {
       setAttachmentError(err instanceof Error ? err.message : "Document import failed");
@@ -1213,7 +1263,7 @@ export function IssueDetail() {
     onSuccess: () => {
       setAttachmentError(null);
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.attachments(issueId!) });
-      invalidateIssue();
+      invalidateIssueDetail();
     },
     onError: (err) => {
       setAttachmentError(err instanceof Error ? err.message : "Delete failed");
@@ -1223,7 +1273,7 @@ export function IssueDetail() {
   const archiveFromInbox = useMutation({
     mutationFn: (id: string) => issuesApi.archiveFromInbox(id),
     onSuccess: () => {
-      invalidateIssue();
+      invalidateIssueCollections();
       navigate(sourceBreadcrumb.href.startsWith("/inbox") ? sourceBreadcrumb.href : "/inbox", { replace: true });
       pushToast({ title: "Issue archived from inbox", tone: "success" });
     },
@@ -1504,7 +1554,7 @@ export function IssueDetail() {
   };
 
   const issueChatInitialLoading =
-    (commentsLoading && comments === undefined)
+    (commentsLoading && commentPages === undefined)
     || (activityLoading && activity === undefined)
     || (linkedRunsLoading && linkedRuns === undefined)
     || (liveRunsLoading && liveRuns === undefined)
@@ -2067,41 +2117,58 @@ export function IssueDetail() {
           {issueChatInitialLoading ? (
             <IssueChatSkeleton />
           ) : (
-            <IssueChatThread
-              composerRef={commentComposerRef}
-              comments={commentsWithRunMeta}
-              feedbackVotes={feedbackVotes}
-              feedbackDataSharingPreference={feedbackDataSharingPreference}
-              feedbackTermsUrl={FEEDBACK_TERMS_URL}
-              linkedRuns={timelineRuns}
-              timelineEvents={timelineEvents}
-              liveRuns={liveRuns}
-              activeRun={activeRun}
-              companyId={issue.companyId}
-              projectId={issue.projectId}
-              issueStatus={issue.status}
-              agentMap={agentMap}
-              currentUserId={currentUserId}
-              draftKey={`paperclip:issue-comment-draft:${issue.id}`}
-              enableReassign
-              reassignOptions={commentReassignOptions}
-              currentAssigneeValue={actualAssigneeValue}
-              suggestedAssigneeValue={suggestedAssigneeValue}
-              mentions={mentionOptions}
-              onInterruptQueued={handleInterruptQueued}
-              interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
-              composerDisabledReason={commentComposerDisabledReason}
-              onVote={handleCommentVote}
-              onAdd={handleCommentAdd}
-              imageUploadHandler={handleCommentImageUpload}
-              onAttachImage={handleCommentAttachImage}
-              onCancelRun={runningIssueRun
-                ? async () => {
-                    await interruptQueuedComment.mutateAsync(runningIssueRun.id);
-                  }
-                : undefined}
-              onImageClick={handleChatImageClick}
-            />
+            <div className="space-y-3">
+              {hasOlderComments ? (
+                <div className="flex justify-center">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={commentsLoadingOlder}
+                    onClick={() => {
+                      void fetchOlderComments();
+                    }}
+                  >
+                    {commentsLoadingOlder ? "Loading earlier comments..." : "Load earlier comments"}
+                  </Button>
+                </div>
+              ) : null}
+              <IssueChatThread
+                composerRef={commentComposerRef}
+                comments={commentsWithRunMeta}
+                feedbackVotes={feedbackVotes}
+                feedbackDataSharingPreference={feedbackDataSharingPreference}
+                feedbackTermsUrl={FEEDBACK_TERMS_URL}
+                linkedRuns={timelineRuns}
+                timelineEvents={timelineEvents}
+                liveRuns={liveRuns}
+                activeRun={activeRun}
+                companyId={issue.companyId}
+                projectId={issue.projectId}
+                issueStatus={issue.status}
+                agentMap={agentMap}
+                currentUserId={currentUserId}
+                draftKey={`paperclip:issue-comment-draft:${issue.id}`}
+                enableReassign
+                reassignOptions={commentReassignOptions}
+                currentAssigneeValue={actualAssigneeValue}
+                suggestedAssigneeValue={suggestedAssigneeValue}
+                mentions={mentionOptions}
+                onInterruptQueued={handleInterruptQueued}
+                interruptingQueuedRunId={interruptQueuedComment.isPending ? interruptQueuedComment.variables ?? null : null}
+                composerDisabledReason={commentComposerDisabledReason}
+                onVote={handleCommentVote}
+                onAdd={handleCommentAdd}
+                imageUploadHandler={handleCommentImageUpload}
+                onAttachImage={handleCommentAttachImage}
+                onCancelRun={runningIssueRun
+                  ? async () => {
+                      await interruptQueuedComment.mutateAsync(runningIssueRun.id);
+                    }
+                  : undefined}
+                onImageClick={handleChatImageClick}
+              />
+            </div>
           )}
         </TabsContent>
 

From 996c7eb7278eabb71780810468ff2eb6ad5b52f6 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 18:32:42 -0500
Subject: [PATCH 43/45] Disable inbox nesting on mobile

---
 ui/src/lib/inbox.test.ts | 14 ++++++++++++++
 ui/src/lib/inbox.ts      |  4 ++++
 ui/src/pages/Inbox.tsx   |  8 ++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ui/src/lib/inbox.test.ts b/ui/src/lib/inbox.test.ts
index f34f2a7b..2ba6b3d9 100644
--- a/ui/src/lib/inbox.test.ts
+++ b/ui/src/lib/inbox.test.ts
@@ -24,6 +24,7 @@ import {
   loadLastInboxTab,
   normalizeInboxIssueColumns,
   RECENT_ISSUES_LIMIT,
+  resolveInboxNestingEnabled,
   resolveIssueWorkspaceName,
   resolveInboxSelectionIndex,
   saveInboxIssueColumns,
@@ -520,6 +521,19 @@ describe("inbox helpers", () => {
     expect(loadLastInboxTab()).toBe("all");
   });
 
+  it("keeps nesting enabled on desktop when the saved preference is on", () => {
+    expect(resolveInboxNestingEnabled(true, false)).toBe(true);
+  });
+
+  it("forces nesting off on mobile even when the saved preference is on", () => {
+    expect(resolveInboxNestingEnabled(true, true)).toBe(false);
+  });
+
+  it("keeps nesting off when the saved preference is off", () => {
+    expect(resolveInboxNestingEnabled(false, false)).toBe(false);
+    expect(resolveInboxNestingEnabled(false, true)).toBe(false);
+  });
+
   it("defaults issue columns to the current inbox layout", () => {
     expect(loadInboxIssueColumns()).toEqual(DEFAULT_INBOX_ISSUE_COLUMNS);
   });
diff --git a/ui/src/lib/inbox.ts b/ui/src/lib/inbox.ts
index 925870cb..4411a215 100644
--- a/ui/src/lib/inbox.ts
+++ b/ui/src/lib/inbox.ts
@@ -169,6 +169,10 @@ export function saveInboxNesting(enabled: boolean) {
   }
 }
 
+export function resolveInboxNestingEnabled(preferenceEnabled: boolean, isMobile: boolean): boolean {
+  return preferenceEnabled && !isMobile;
+}
+
 export function loadLastInboxTab(): InboxTab {
   try {
     const raw = localStorage.getItem(INBOX_LAST_TAB_KEY);
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 9f9704ef..8926dd0e 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -16,6 +16,7 @@ import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { useGeneralSettings } from "../context/GeneralSettingsContext";
+import { useSidebar } from "../context/SidebarContext";
 import { queryKeys } from "../lib/queryKeys";
 import {
   armIssueDetailInboxQuickArchive,
@@ -87,6 +88,7 @@ import {
   loadInboxIssueColumns,
   loadInboxNesting,
   normalizeInboxIssueColumns,
+  resolveInboxNestingEnabled,
   resolveIssueWorkspaceName,
   resolveInboxSelectionIndex,
   saveInboxIssueColumns,
@@ -579,6 +581,7 @@ function JoinRequestInboxRow({
 export function Inbox() {
   const { selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
+  const { isMobile } = useSidebar();
   const navigate = useNavigate();
   const location = useLocation();
   const queryClient = useQueryClient();
@@ -911,9 +914,10 @@ export function Inbox() {
   ]);
 
   // --- Parent-child nesting for inbox issues ---
-  const [nestingEnabled, setNestingEnabled] = useState(() => loadInboxNesting());
+  const [nestingPreferenceEnabled, setNestingPreferenceEnabled] = useState(() => loadInboxNesting());
+  const nestingEnabled = resolveInboxNestingEnabled(nestingPreferenceEnabled, isMobile);
   const toggleNesting = useCallback(() => {
-    setNestingEnabled((prev) => {
+    setNestingPreferenceEnabled((prev) => {
       const next = !prev;
       saveInboxNesting(next);
       return next;

From 327eadb45cc65cc85be4643d68ae19403ac7e7a9 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Thu, 9 Apr 2026 06:12:43 -0500
Subject: [PATCH 44/45] fix(ui): harden issue comment editor sync

---
 ui/src/components/MarkdownEditor.tsx         | 15 ++++++++-
 ui/src/lib/optimistic-issue-comments.test.ts | 35 ++++++++++++++++++++
 ui/src/lib/optimistic-issue-comments.ts      |  8 +++++
 ui/src/pages/IssueDetail.tsx                 |  3 +-
 4 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx
index 0151400f..2ed825b5 100644
--- a/ui/src/components/MarkdownEditor.tsx
+++ b/ui/src/components/MarkdownEditor.tsx
@@ -364,6 +364,19 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
     return map;
   }, [mentions]);
 
+  const setEditorRef = useCallback((instance: MDXEditorMethods | null) => {
+    ref.current = instance;
+    if (!instance) {
+      return;
+    }
+    if (valueRef.current !== latestValueRef.current) {
+      // Re-apply the latest controlled value once MDXEditor exposes its imperative API.
+      echoIgnoreMarkdownRef.current = valueRef.current;
+      instance.setMarkdown(valueRef.current);
+      latestValueRef.current = valueRef.current;
+    }
+  }, []);
+
   const filteredMentions = useMemo<AutocompleteOption[]>(() => {
     if (!mentionState) return [];
     const q = mentionState.query.trim().toLowerCase();
@@ -798,7 +811,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
       onPasteCapture={handlePasteCapture}
     >
       <MDXEditor
-        ref={ref}
+        ref={setEditorRef}
         markdown={value}
         placeholder={placeholder}
         onChange={(next) => {
diff --git a/ui/src/lib/optimistic-issue-comments.test.ts b/ui/src/lib/optimistic-issue-comments.test.ts
index 2499ce9b..bf0cdda5 100644
--- a/ui/src/lib/optimistic-issue-comments.test.ts
+++ b/ui/src/lib/optimistic-issue-comments.test.ts
@@ -6,6 +6,7 @@ import {
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
   flattenIssueCommentPages,
+  getNextIssueCommentPageParam,
   isQueuedIssueComment,
   matchesIssueRef,
   mergeIssueComments,
@@ -171,6 +172,40 @@ describe("optimistic issue comments", () => {
     expect(flattened.map((comment) => comment.id)).toEqual(["comment-1", "comment-2", "comment-3"]);
   });
 
+  it("returns no next page param when the last page is missing", () => {
+    expect(getNextIssueCommentPageParam(undefined, 50)).toBeUndefined();
+  });
+
+  it("returns the oldest id when the last page is full", () => {
+    expect(
+      getNextIssueCommentPageParam(
+        [
+          {
+            id: "comment-2",
+            companyId: "company-1",
+            issueId: "issue-1",
+            authorAgentId: null,
+            authorUserId: "board-1",
+            body: "Second",
+            createdAt: new Date("2026-03-28T14:00:02.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:02.000Z"),
+          },
+          {
+            id: "comment-1",
+            companyId: "company-1",
+            issueId: "issue-1",
+            authorAgentId: null,
+            authorUserId: "board-1",
+            body: "First",
+            createdAt: new Date("2026-03-28T14:00:01.000Z"),
+            updatedAt: new Date("2026-03-28T14:00:01.000Z"),
+          },
+        ],
+        2,
+      ),
+    ).toBe("comment-1");
+  });
+
   it("upserts paged comments without dropping older pages", () => {
     const nextPages = upsertIssueCommentInPages(
       [
diff --git a/ui/src/lib/optimistic-issue-comments.ts b/ui/src/lib/optimistic-issue-comments.ts
index c7237bf8..73d9aea8 100644
--- a/ui/src/lib/optimistic-issue-comments.ts
+++ b/ui/src/lib/optimistic-issue-comments.ts
@@ -102,6 +102,14 @@ export function flattenIssueCommentPages(
   return sortIssueComments((pages ?? []).flatMap((page) => page));
 }
 
+export function getNextIssueCommentPageParam(
+  lastPage: ReadonlyArray<IssueComment> | undefined,
+  pageSize: number,
+): string | undefined {
+  if (!lastPage || lastPage.length < pageSize) return undefined;
+  return lastPage[lastPage.length - 1]?.id;
+}
+
 export function upsertIssueComment(
   comments: IssueComment[] | undefined,
   nextComment: IssueComment,
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 5741b40b..73407936 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -36,6 +36,7 @@ import {
   applyOptimisticIssueCommentUpdate,
   createOptimisticIssueComment,
   flattenIssueCommentPages,
+  getNextIssueCommentPageParam,
   isQueuedIssueComment,
   matchesIssueRef,
   mergeIssueComments,
@@ -416,7 +417,7 @@ export function IssueDetail() {
     enabled: !!issueId,
     initialPageParam: null as string | null,
     getNextPageParam: (lastPage) =>
-      lastPage.length === ISSUE_COMMENT_PAGE_SIZE ? lastPage[lastPage.length - 1]?.id : undefined,
+      getNextIssueCommentPageParam(lastPage, ISSUE_COMMENT_PAGE_SIZE),
     placeholderData: keepPreviousData,
   });
   const comments = useMemo(

From ce3bc329fc3c132addca6cbe742595103dd77660 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Thu, 9 Apr 2026 07:07:16 -0500
Subject: [PATCH 45/45] test(ui): align inbox badge fixture with dismissal
 state

---
 ui/src/lib/inbox.test.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/src/lib/inbox.test.ts b/ui/src/lib/inbox.test.ts
index 2ba6b3d9..b8f6c458 100644
--- a/ui/src/lib/inbox.test.ts
+++ b/ui/src/lib/inbox.test.ts
@@ -328,8 +328,6 @@ describe("inbox helpers", () => {
       heartbeatRuns: [],
       mineIssues: [makeIssue("1", false), makeIssue("2", false), makeIssue("3", true)],
       dismissed: new Set<string>(),
-      dismissedAlerts: new Set<string>(),
-      dismissedAtByKey: new Map(),
     });
 
     expect(result.mineIssues).toBe(1);