[codex] Polish issue and operator workflow UI (#4090)

## Thinking Path

> - Paperclip operators spend much of their time in issues, inboxes,
selectors, and rich comment threads.
> - Small interaction problems in those surfaces slow down supervision
of AI-agent work.
> - The branch included related operator quality-of-life fixes for issue
layout, inbox actions, recent selectors, mobile inputs, and chat
rendering stability.
> - These changes are UI-focused and can land independently from
workspace navigation and access-profile work.
> - This pull request groups the operator QoL fixes into one standalone
branch.
> - The benefit is a more stable and efficient board workflow for issue
triage and task editing.

## What Changed

- Widened issue detail content and added a desktop inbox archive action.
- Fixed mobile text-field zoom by keeping touch input font sizes at
16px.
- Prioritized recent picker selections for assignees/projects in issue
and routine flows.
- Showed actionable approvals in the Mine inbox model.
- Fixed issue chat renderer state crashes and hardened tests.

## Verification

- `pnpm install --frozen-lockfile`
- `pnpm exec vitest run ui/src/components/IssueChatThread.test.tsx
ui/src/lib/inbox.test.ts ui/src/lib/recent-selections.test.ts`
- Split integration check: merged last after the other
[PAP-1614](/PAP/issues/PAP-1614) branches with no merge conflicts.
- Confirmed this branch does not include `pnpm-lock.yaml`.

## Risks

- Low to medium risk: mostly UI state, layout, and selection-priority
behavior.
- Visual layout and mobile zoom behavior may need browser/device QA
beyond component tests.
- No database migrations are included.

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

## Model Used

- OpenAI Codex, GPT-5.4 tool-enabled coding model, agentic
code-editing/runtime with local shell and GitHub CLI access; exact
context window and reasoning mode are not exposed by the Paperclip
harness.

## Checklist

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/src/lib/inbox.test.ts

@@ -406,7 +406,7 @@ describe("inbox helpers", () => {
     expect(issues).toHaveLength(2);
   });
 
-  it("shows only my approvals on mine, while recent and unread stay company-wide", () => {
+  it("shows actionable approvals on mine, while recent and unread stay company-wide", () => {
     const approvals = [
       {
         ...makeApprovalWithTimestamps("approval-approved", "approved", "2026-03-11T02:00:00.000Z"),
@@ -425,6 +425,7 @@ describe("inbox helpers", () => {
     expect(getApprovalsForTab(approvals, "mine", "all", "user-1").map((approval) => approval.id)).toEqual([
       "approval-revision",
       "approval-approved",
+      "approval-pending",
     ]);
     expect(getApprovalsForTab(approvals, "recent", "all").map((approval) => approval.id)).toEqual([
       "approval-revision",
@@ -440,13 +441,21 @@ describe("inbox helpers", () => {
     ]);
   });
 
-  it("keeps unrelated approvals out of a new user's badge and mine tab", () => {
+  it("surfaces agent-requested actionable approvals in mine and the badge", () => {
     const approvals = [
-      { ...makeApproval("pending"), requestedByUserId: "user-2" },
-      { ...makeApproval("revision_requested"), decidedByUserId: "user-3" },
+      {
+        ...makeApprovalWithTimestamps("approval-agent-requested", "pending", "2026-03-11T02:00:00.000Z"),
+        requestedByUserId: null,
+      },
+      {
+        ...makeApprovalWithTimestamps("approval-unrelated-resolved", "approved", "2026-03-11T03:00:00.000Z"),
+        requestedByUserId: "user-2",
+      },
     ];
 
-    expect(getApprovalsForTab(approvals, "mine", "all", "user-1")).toEqual([]);
+    expect(getApprovalsForTab(approvals, "mine", "all", "user-1").map((approval) => approval.id)).toEqual([
+      "approval-agent-requested",
+    ]);
 
     const result = computeInboxBadgeData({
       approvals,
@@ -459,7 +468,7 @@ describe("inbox helpers", () => {
       currentUserId: "user-1",
     });
 
-    expect(result.approvals).toBe(0);
+    expect(result.approvals).toBe(1);
   });
 
   it("does not count company-wide alerts in the personal inbox badge", () => {

ui/src/lib/inbox.ts

@@ -706,11 +706,7 @@ export function getApprovalsForTab(
   );
 
   if (tab === "mine") {
-    if (!currentUserId) return [];
-    return sortedApprovals.filter(
-      (approval) =>
-        approval.requestedByUserId === currentUserId || approval.decidedByUserId === currentUserId,
-    );
+    return sortedApprovals.filter((approval) => isApprovalVisibleInMine(approval, currentUserId));
   }
   if (tab === "recent") return sortedApprovals;
   if (tab === "unread") {
@@ -724,6 +720,15 @@ export function getApprovalsForTab(
   });
 }
 
+export function isApprovalVisibleInMine(
+  approval: Approval,
+  currentUserId?: string | null,
+): boolean {
+  if (ACTIONABLE_APPROVAL_STATUSES.has(approval.status)) return true;
+  if (!currentUserId) return false;
+  return approval.requestedByUserId === currentUserId || approval.decidedByUserId === currentUserId;
+}
+
 export function approvalActivityTimestamp(approval: Approval): number {
   const updatedAt = normalizeTimestamp(approval.updatedAt);
   if (updatedAt > 0) return updatedAt;
@@ -1030,8 +1035,7 @@ export function computeInboxBadgeData({
 }): InboxBadgeData {
   const actionableApprovals = approvals.filter(
     (approval) =>
-      !!currentUserId &&
-      (approval.requestedByUserId === currentUserId || approval.decidedByUserId === currentUserId) &&
+      isApprovalVisibleInMine(approval, currentUserId) &&
       ACTIONABLE_APPROVAL_STATUSES.has(approval.status) &&
       !isInboxEntityDismissed(dismissedAtByKey, `approval:${approval.id}`, approval.updatedAt),
   ).length;

ui/src/lib/recent-assignees.ts

@@ -1,30 +1,51 @@
+import {
+  RECENT_SELECTION_DISPLAY_LIMIT,
+  readRecentSelectionIds,
+  trackRecentSelectionId,
+} from "./recent-selections";
+
 const STORAGE_KEY = "paperclip:recent-assignees";
-const MAX_RECENT = 10;
+
+function agentSelectionId(agentId: string): string {
+  return `agent:${agentId}`;
+}
+
+function userSelectionId(userId: string): string {
+  return `user:${userId}`;
+}
+
+function agentIdFromSelectionId(id: string): string | null {
+  if (id.startsWith("agent:")) return id.slice("agent:".length);
+  if (!id.includes(":")) return id;
+  return null;
+}
 
 export function getRecentAssigneeIds(): string[] {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
+  return readRecentSelectionIds(STORAGE_KEY)
+    .map(agentIdFromSelectionId)
+    .filter((id): id is string => Boolean(id));
+}
+
+export function getRecentAssigneeSelectionIds(): string[] {
+  return readRecentSelectionIds(STORAGE_KEY).map((id) => {
+    if (id.includes(":")) return id;
+    return agentSelectionId(id);
+  });
 }
 
 export function trackRecentAssignee(agentId: string): void {
-  if (!agentId) return;
-  const recent = getRecentAssigneeIds().filter((id) => id !== agentId);
-  recent.unshift(agentId);
-  if (recent.length > MAX_RECENT) recent.length = MAX_RECENT;
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(recent));
+  trackRecentSelectionId(STORAGE_KEY, agentSelectionId(agentId));
+}
+
+export function trackRecentAssigneeUser(userId: string): void {
+  trackRecentSelectionId(STORAGE_KEY, userSelectionId(userId));
 }
 
 export function sortAgentsByRecency<T extends { id: string; name: string }>(
   agents: T[],
   recentIds: string[],
 ): T[] {
-  const recentIndex = new Map(recentIds.map((id, i) => [id, i]));
+  const recentIndex = new Map(recentIds.slice(0, RECENT_SELECTION_DISPLAY_LIMIT).map((id, i) => [id, i]));
   return [...agents].sort((a, b) => {
     const aRecent = recentIndex.get(a.id);
     const bRecent = recentIndex.get(b.id);

ui/src/lib/recent-projects.ts

@@ -0,0 +1,14 @@
+import {
+  readRecentSelectionIds,
+  trackRecentSelectionId,
+} from "./recent-selections";
+
+const STORAGE_KEY = "paperclip:recent-projects";
+
+export function getRecentProjectIds(): string[] {
+  return readRecentSelectionIds(STORAGE_KEY);
+}
+
+export function trackRecentProject(projectId: string): void {
+  trackRecentSelectionId(STORAGE_KEY, projectId);
+}

ui/src/lib/recent-selections.test.ts

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  getRecentAssigneeIds,
+  getRecentAssigneeSelectionIds,
+  sortAgentsByRecency,
+  trackRecentAssignee,
+  trackRecentAssigneeUser,
+} from "./recent-assignees";
+import { getRecentProjectIds, trackRecentProject } from "./recent-projects";
+import { orderItemsBySelectedAndRecent } from "./recent-selections";
+
+describe("recent selection ordering", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("keeps the selected option first, then three recent options, then default order", () => {
+    const ordered = orderItemsBySelectedAndRecent(
+      [
+        { id: "", label: "No project" },
+        { id: "alpha", label: "Alpha" },
+        { id: "bravo", label: "Bravo" },
+        { id: "charlie", label: "Charlie" },
+        { id: "delta", label: "Delta" },
+        { id: "echo", label: "Echo" },
+      ],
+      "charlie",
+      ["echo", "bravo", "delta", "alpha"],
+    );
+
+    expect(ordered.map((item) => item.id)).toEqual(["charlie", "echo", "bravo", "delta", "", "alpha"]);
+  });
+
+  it("keeps the no-value option first when it is selected", () => {
+    const ordered = orderItemsBySelectedAndRecent(
+      [
+        { id: "", label: "No assignee" },
+        { id: "agent-1", label: "Agent 1" },
+        { id: "agent-2", label: "Agent 2" },
+      ],
+      "",
+      ["agent-2"],
+    );
+
+    expect(ordered.map((item) => item.id)).toEqual(["", "agent-2", "agent-1"]);
+  });
+
+  it("only promotes the latest three assignees before default alphabetical order", () => {
+    const agents = [
+      { id: "alpha", name: "Alpha" },
+      { id: "bravo", name: "Bravo" },
+      { id: "charlie", name: "Charlie" },
+      { id: "delta", name: "Delta" },
+      { id: "echo", name: "Echo" },
+    ];
+
+    const sorted = sortAgentsByRecency(agents, ["delta", "bravo", "echo", "charlie"]);
+
+    expect(sorted.map((agent) => agent.id)).toEqual(["delta", "bravo", "echo", "alpha", "charlie"]);
+  });
+
+  it("tracks recent project ids newest first without duplicates", () => {
+    trackRecentProject("project-1");
+    trackRecentProject("project-2");
+    trackRecentProject("project-1");
+
+    expect(getRecentProjectIds()).toEqual(["project-1", "project-2"]);
+  });
+
+  it("tracks recent user and agent assignee selections with prefixed ids", () => {
+    trackRecentAssignee("agent-1");
+    trackRecentAssigneeUser("user-1");
+
+    expect(getRecentAssigneeSelectionIds()).toEqual(["user:user-1", "agent:agent-1"]);
+    expect(getRecentAssigneeIds()).toEqual(["agent-1"]);
+  });
+});

ui/src/lib/recent-selections.ts

@@ -0,0 +1,50 @@
+export const RECENT_SELECTION_DISPLAY_LIMIT = 3;
+const MAX_STORED_RECENT_SELECTIONS = 10;
+
+export function readRecentSelectionIds(storageKey: string): string[] {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function trackRecentSelectionId(storageKey: string, id: string): void {
+  if (!id) return;
+  const recent = readRecentSelectionIds(storageKey).filter((candidate) => candidate !== id);
+  recent.unshift(id);
+  if (recent.length > MAX_STORED_RECENT_SELECTIONS) recent.length = MAX_STORED_RECENT_SELECTIONS;
+  localStorage.setItem(storageKey, JSON.stringify(recent));
+}
+
+export function orderItemsBySelectedAndRecent<T extends { id: string }>(
+  items: T[],
+  selectedId: string | null | undefined,
+  recentIds: string[],
+  recentLimit = RECENT_SELECTION_DISPLAY_LIMIT,
+): T[] {
+  const itemById = new Map(items.map((item) => [item.id, item]));
+  const ordered: T[] = [];
+  const seen = new Set<string>();
+
+  const push = (id: string | null | undefined) => {
+    if (id === null || id === undefined || seen.has(id)) return;
+    const item = itemById.get(id);
+    if (!item) return;
+    ordered.push(item);
+    seen.add(id);
+  };
+
+  push(selectedId);
+  for (const recentId of recentIds.slice(0, recentLimit)) {
+    push(recentId);
+  }
+  for (const item of items) {
+    push(item.id);
+  }
+
+  return ordered;
+}