[codex] Split PR #4692 UI/QoL updates (#4701)

## Thinking Path

> - Paperclip orchestrates AI agents through a company-scoped control
plane.
> - The affected surface is the board UI for issue threads, issue lists,
routines, dialogs, navigation, and issue review indicators.
> - Closed PR #4692 bundled backend, schema, docs, workflow, and UI/QoL
work into one oversized change set.
> - Greptile could not keep reviewing that broad PR because it exceeded
the 100-file review limit and mixed unrelated concerns.
> - This pull request extracts the UI/QoL slice into a fresh branch
under the review limit while leaving workflow and lockfile churn out.
> - The benefit is a focused review path for the board UI performance
and workflow improvements without reopening the oversized PR.

## What Changed

- Added long issue-thread virtualization, scroll-container binding,
anchor preservation, latest-comment jump targeting, and related
regression/perf fixtures.
- Improved issue list scalability with scroll-based loading, server
offset parameters, and pagination-focused UI tests.
- Reduced new issue dialog typing churn and split dialog action
subscriptions so broad layout/nav surfaces avoid unnecessary renders.
- Added routine variables help and routine description mention options
for users, agents, and projects.
- Added productivity review badge/link UI and fixed the badge to use
Paperclip's company-prefixed router link.
- Kept the split PR below Greptile's review limit and excluded
`.github/workflows/pr.yml` and `pnpm-lock.yaml`.

## Verification

- `pnpm install --no-frozen-lockfile` in the clean worktree to install
`@tanstack/react-virtual` locally without committing lockfile churn.
- `pnpm --filter @paperclipai/ui exec vitest run --config
vitest.config.ts src/components/IssueChatThread.test.tsx
src/components/IssuesList.test.tsx
src/components/NewIssueDialog.test.tsx src/pages/Routines.test.tsx
src/pages/Issues.test.tsx` passed: 5 files, 83 tests.
- `pnpm --filter @paperclipai/ui typecheck` passed.
- `git diff --check origin/master..HEAD` passed.
- Split-scope checks: 53 changed files; no `.github/workflows/pr.yml`;
no `pnpm-lock.yaml`.
- Screenshots were not captured in this heartbeat; the changes are
primarily virtualization, routing, pagination, and editor behavior
covered by focused regression tests.

## Risks

- Moderate UI risk because issue-thread virtualization changes scroll
behavior on long conversations; regression tests cover anchor jumps,
latest-comment targeting, row metadata, and short-thread fallback.
- Moderate integration risk because the issue-list offset parameter and
productivity review field depend on matching API behavior.
- Dependency risk: the UI package adds `@tanstack/react-virtual` while
repository policy keeps `pnpm-lock.yaml` out of PRs, so CI must resolve
dependency changes through the repo's normal lockfile policy.

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

## Model Used

- OpenAI Codex, GPT-5 coding agent, tool-enabled local repository and
GitHub workflow. Exact runtime context window was not exposed by the
harness.

## Checklist

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

---------

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

ui/src/context/DialogContext.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { DialogProvider, useDialogActions, useDialogState } from "./DialogContext";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("DialogContext", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("keeps action-only consumers from rerendering when dialog state changes", () => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    let actionRenderCount = 0;
+    let stateRenderCount = 0;
+
+    function ActionOnlyConsumer() {
+      actionRenderCount += 1;
+      const { openNewIssue } = useDialogActions();
+      return <button onClick={() => openNewIssue()}>Open issue</button>;
+    }
+
+    function StateConsumer() {
+      stateRenderCount += 1;
+      const { newIssueOpen } = useDialogState();
+      return <span>{newIssueOpen ? "open" : "closed"}</span>;
+    }
+
+    act(() => {
+      root.render(
+        <DialogProvider>
+          <ActionOnlyConsumer />
+          <StateConsumer />
+        </DialogProvider>,
+      );
+    });
+
+    expect(actionRenderCount).toBe(1);
+    expect(stateRenderCount).toBe(1);
+
+    const button = host.querySelector("button");
+    act(() => {
+      button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(host.textContent).toContain("open");
+    expect(actionRenderCount).toBe(1);
+    expect(stateRenderCount).toBe(2);
+
+    act(() => root.unmount());
+  });
+});

ui/src/context/DialogContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 
 interface NewIssueDefaults {
   status?: string;
@@ -48,7 +48,22 @@ interface DialogContextValue {
   closeOnboarding: () => void;
 }
 
-const DialogContext = createContext<DialogContextValue | null>(null);
+type DialogStateValue = Pick<
+  DialogContextValue,
+  | "newIssueOpen"
+  | "newIssueDefaults"
+  | "newProjectOpen"
+  | "newGoalOpen"
+  | "newGoalDefaults"
+  | "newAgentOpen"
+  | "onboardingOpen"
+  | "onboardingOptions"
+>;
+
+type DialogActionsValue = Omit<DialogContextValue, keyof DialogStateValue>;
+
+const DialogStateContext = createContext<DialogStateValue | null>(null);
+const DialogActionsContext = createContext<DialogActionsValue | null>(null);
 
 export function DialogProvider({ children }: { children: ReactNode }) {
   const [newIssueOpen, setNewIssueOpen] = useState(false);
@@ -106,38 +121,84 @@ export function DialogProvider({ children }: { children: ReactNode }) {
     setOnboardingOptions({});
   }, []);
 
+  const stateValue = useMemo<DialogStateValue>(
+    () => ({
+      newIssueOpen,
+      newIssueDefaults,
+      newProjectOpen,
+      newGoalOpen,
+      newGoalDefaults,
+      newAgentOpen,
+      onboardingOpen,
+      onboardingOptions,
+    }),
+    [
+      newIssueOpen,
+      newIssueDefaults,
+      newProjectOpen,
+      newGoalOpen,
+      newGoalDefaults,
+      newAgentOpen,
+      onboardingOpen,
+      onboardingOptions,
+    ],
+  );
+
+  const actionsValue = useMemo<DialogActionsValue>(
+    () => ({
+      openNewIssue,
+      closeNewIssue,
+      openNewProject,
+      closeNewProject,
+      openNewGoal,
+      closeNewGoal,
+      openNewAgent,
+      closeNewAgent,
+      openOnboarding,
+      closeOnboarding,
+    }),
+    [
+      openNewIssue,
+      closeNewIssue,
+      openNewProject,
+      closeNewProject,
+      openNewGoal,
+      closeNewGoal,
+      openNewAgent,
+      closeNewAgent,
+      openOnboarding,
+      closeOnboarding,
+    ],
+  );
+
   return (
-    <DialogContext.Provider
-      value={{
-        newIssueOpen,
-        newIssueDefaults,
-        openNewIssue,
-        closeNewIssue,
-        newProjectOpen,
-        openNewProject,
-        closeNewProject,
-        newGoalOpen,
-        newGoalDefaults,
-        openNewGoal,
-        closeNewGoal,
-        newAgentOpen,
-        openNewAgent,
-        closeNewAgent,
-        onboardingOpen,
-        onboardingOptions,
-        openOnboarding,
-        closeOnboarding,
-      }}
-    >
-      {children}
-    </DialogContext.Provider>
+    <DialogActionsContext.Provider value={actionsValue}>
+      <DialogStateContext.Provider value={stateValue}>
+        {children}
+      </DialogStateContext.Provider>
+    </DialogActionsContext.Provider>
   );
 }
 
-export function useDialog() {
-  const ctx = useContext(DialogContext);
+export function useDialogActions() {
+  const ctx = useContext(DialogActionsContext);
   if (!ctx) {
-    throw new Error("useDialog must be used within DialogProvider");
+    throw new Error("useDialogActions must be used within DialogProvider");
   }
   return ctx;
 }
+
+export function useDialogState() {
+  const ctx = useContext(DialogStateContext);
+  if (!ctx) {
+    throw new Error("useDialogState must be used within DialogProvider");
+  }
+  return ctx;
+}
+
+export function useDialog() {
+  return {
+    ...useDialogState(),
+    ...useDialogActions(),
+  };
+}

ui/src/context/ToastContext.tsx

@@ -186,6 +186,10 @@ export function useToastActions() {
   return context;
 }
 
+export function useOptionalToastActions() {
+  return useContext(ToastActionsContext);
+}
+
 export function useToast() {
   const toasts = useToastState();
   const actions = useToastActions();