[codex] Improve issue detail and issue-list UX (#3678)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies
> - A core part of that is the operator experience around reading issue
state, agent chat, and sub-task structure
> - The current branch had a long run of issue-detail and issue-list UX
fixes that all improve how humans follow and steer active work
> - Those changes mostly live in the UI/chat surface and should be
reviewed together instead of mixed with workspace/runtime work
> - This pull request packages the issue-detail, chat, markdown, and
sub-issue list improvements into one standalone change
> - The benefit is a cleaner, less jumpy, more reliable issue workflow
on desktop and mobile without coupling it to unrelated server/runtime
refactors

## What Changed

- Stabilized issue chat runtime wiring, optimistic comment handling,
queued-comment cancellation, and composer anchoring during live updates
- Fixed several issue-detail rendering and navigation regressions
including placeholder bleed, local polling scope, mobile inbox-to-issue
transitions, and visible refresh resets
- Improved markdown and rich-content handling with advisory image
normalization, editor fallback behavior, touch mention recovery, and
`issue:` quicklook links
- Refined sub-issue behavior with parent-derived defaults, current-user
inheritance fixes, empty-state cleanup, and a reusable issue-list
presentation for sub-issues
- Added targeted UI tests for the new issue-detail, chat scroll/message,
placeholder-data, markdown, and issue-list behaviors

## Verification

- `pnpm vitest run ui/src/components/IssueChatThread.test.tsx
ui/src/components/MarkdownEditor.test.tsx
ui/src/components/IssuesList.test.tsx
ui/src/context/LiveUpdatesProvider.test.tsx
ui/src/lib/issue-chat-messages.test.ts
ui/src/lib/issue-chat-scroll.test.ts
ui/src/lib/issue-detail-subissues.test.ts
ui/src/lib/query-placeholder-data.test.tsx
ui/src/hooks/usePaperclipIssueRuntime.test.tsx`

## Risks

- Medium: this branch touches the highest-traffic issue-detail UI paths,
so regressions would show up as chat/thread or sub-issue UX glitches
- The changes are UI-heavy and would benefit from reviewer screenshots
or a quick manual browser pass before merge

## Model Used

- OpenAI Codex coding agent (GPT-5-class runtime in Codex CLI; exact
deployed model ID is not exposed in this environment), reasoning
enabled, tool use and local code execution enabled

## Checklist

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

---------

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

ui/src/hooks/usePaperclipIssueRuntime.test.tsx

@@ -0,0 +1,179 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { AppendMessage, ExternalStoreAdapter, ThreadMessage } from "@assistant-ui/react";
+import { usePaperclipIssueRuntime } from "./usePaperclipIssueRuntime";
+
+const { useExternalStoreRuntimeMock } = vi.hoisted(() => ({
+  useExternalStoreRuntimeMock: vi.fn(() => ({ kind: "runtime" })),
+}));
+
+vi.mock("@assistant-ui/react", () => ({
+  useExternalStoreRuntime: useExternalStoreRuntimeMock,
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function HookHarness({
+  messages,
+  isRunning,
+  onSend,
+  onCancel,
+}: {
+  messages: readonly ThreadMessage[];
+  isRunning: boolean;
+  onSend: (options: { body: string; reopen?: boolean; reassignment?: { assigneeAgentId: string | null; assigneeUserId: string | null } }) => Promise<void>;
+  onCancel?: (() => Promise<void>) | undefined;
+}) {
+  usePaperclipIssueRuntime({
+    messages,
+    isRunning,
+    onSend,
+    onCancel,
+  });
+  return null;
+}
+
+function createAppendMessage(body: string): AppendMessage {
+  return {
+    createdAt: new Date("2026-04-11T14:00:02.000Z"),
+    parentId: null,
+    role: "user",
+    sourceId: null,
+    content: [{ type: "text", text: body }],
+    metadata: { custom: {} },
+    attachments: [],
+    runConfig: undefined,
+  };
+}
+
+function createUserMessage(id: string, text: string): ThreadMessage {
+  return {
+    id,
+    role: "user",
+    content: [{ type: "text", text }],
+    metadata: { custom: {} },
+    attachments: [],
+    createdAt: new Date("2026-04-11T14:00:00.000Z"),
+  } as unknown as ThreadMessage;
+}
+
+function createAssistantMessage(id: string, text: string): ThreadMessage {
+  return {
+    id,
+    role: "assistant",
+    content: [{ type: "text", text }],
+    metadata: { custom: {} },
+    status: { type: "complete", reason: "stop" },
+    createdAt: new Date("2026-04-11T14:00:01.000Z"),
+  } as unknown as ThreadMessage;
+}
+
+describe("usePaperclipIssueRuntime", () => {
+  afterEach(() => {
+    useExternalStoreRuntimeMock.mockReset();
+  });
+
+  it("keeps the external-store adapter stable across unrelated rerenders", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const messages: ThreadMessage[] = [createUserMessage("message-1", "hello")];
+    const firstOnSend = vi.fn(async () => {});
+    const secondOnSend = vi.fn(async () => {});
+
+    act(() => {
+      root.render(
+        <HookHarness
+          messages={messages}
+          isRunning={false}
+          onSend={firstOnSend}
+        />,
+      );
+    });
+
+    const runtimeCalls = useExternalStoreRuntimeMock.mock.calls as unknown as Array<
+      [ExternalStoreAdapter<ThreadMessage>]
+    >;
+    expect(runtimeCalls.length).toBeGreaterThanOrEqual(1);
+    const firstAdapter = runtimeCalls[0]![0];
+    expect(firstAdapter).toBeTruthy();
+
+    act(() => {
+      root.render(
+        <HookHarness
+          messages={messages}
+          isRunning={false}
+          onSend={secondOnSend}
+        />,
+      );
+    });
+
+    expect(runtimeCalls.length).toBeGreaterThanOrEqual(2);
+    const secondAdapter = runtimeCalls[1]![0];
+    expect(secondAdapter).toBe(firstAdapter);
+
+    await act(async () => {
+      await secondAdapter.onNew?.(createAppendMessage("latest callback"));
+    });
+
+    expect(firstOnSend).not.toHaveBeenCalled();
+    expect(secondOnSend).toHaveBeenCalledWith({
+      body: "latest callback",
+      reopen: undefined,
+      reassignment: undefined,
+    });
+
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it("rebuilds the adapter when thread data changes", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const onSend = vi.fn(async () => {});
+    const firstMessages: ThreadMessage[] = [createUserMessage("message-1", "hello")];
+    const secondMessages: ThreadMessage[] = [...firstMessages, createAssistantMessage("message-2", "world")];
+
+    act(() => {
+      root.render(
+        <HookHarness
+          messages={firstMessages}
+          isRunning={false}
+          onSend={onSend}
+        />,
+      );
+    });
+
+    const runtimeCalls = useExternalStoreRuntimeMock.mock.calls as unknown as Array<
+      [ExternalStoreAdapter<ThreadMessage>]
+    >;
+    expect(runtimeCalls.length).toBeGreaterThanOrEqual(1);
+    const firstAdapter = runtimeCalls[0]![0];
+
+    act(() => {
+      root.render(
+        <HookHarness
+          messages={secondMessages}
+          isRunning={false}
+          onSend={onSend}
+        />,
+      );
+    });
+
+    expect(runtimeCalls.length).toBeGreaterThanOrEqual(2);
+    const secondAdapter = runtimeCalls[1]![0];
+    expect(secondAdapter).not.toBe(firstAdapter);
+
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+});

ui/src/hooks/usePaperclipIssueRuntime.ts

@@ -1,4 +1,10 @@
-import { useExternalStoreRuntime, type ThreadMessage, type AppendMessage } from "@assistant-ui/react";
+import { useEffect, useMemo, useRef } from "react";
+import {
+  useExternalStoreRuntime,
+  type ThreadMessage,
+  type AppendMessage,
+  type ExternalStoreAdapter,
+} from "@assistant-ui/react";
 
 export interface PaperclipIssueRuntimeReassignment {
   assigneeAgentId: string | null;
@@ -37,7 +43,18 @@ export function usePaperclipIssueRuntime({
   onSend,
   onCancel,
 }: UsePaperclipIssueRuntimeOptions) {
-  return useExternalStoreRuntime({
+  const onSendRef = useRef(onSend);
+  const onCancelRef = useRef(onCancel);
+
+  useEffect(() => {
+    onSendRef.current = onSend;
+  }, [onSend]);
+
+  useEffect(() => {
+    onCancelRef.current = onCancel;
+  }, [onCancel]);
+
+  const adapter = useMemo<ExternalStoreAdapter<ThreadMessage>>(() => ({
     messages,
     isRunning,
     onNew: async (message) => {
@@ -57,12 +74,18 @@ export function usePaperclipIssueRuntime({
             }
           : undefined;
 
-      await onSend({
+      await onSendRef.current({
         body,
         reopen: custom?.reopen === true ? true : undefined,
         reassignment,
       });
     },
-    ...(onCancel ? { onCancel } : {}),
-  });
+    ...(onCancel ? {
+      onCancel: async () => {
+        await onCancelRef.current?.();
+      },
+    } : {}),
+  }), [messages, isRunning, !!onCancel]);
+
+  return useExternalStoreRuntime(adapter);
 }