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] 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}`}