feat(decisions): add desk workflow and retention (#10672)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The Decisions desk shows work that needs a human decision
> - The queue foundation can group and rank decision work
> - Operators also need a focused daily view and a safe way to handle
old work
> - This pull request adds the desk controls, the aging shelf, and
reversible retention
> - It also binds bulk archive decisions to the exact reviewed item set
> - The benefit is a smaller daily queue without lost or orphaned work

## Linked Issues or Issue Description

**Subsystem affected**

Cross-cutting: server, UI, database, and shared contracts.

**Problem or motivation**

Decision work can grow into one large company list. Operators need quick
queue and date controls. Old items also need a safe retention path that
does not delete work.

**Proposed solution**

Add queue and date controls to the Decisions desk. Compute the aging
shelf on the server. Archive idle items after 90 days unless an operator
keeps them. Keep archived items searchable and revivable. Notify origin
agents in one batch per sweep. Bind bulk archive proposals to a signed,
exact item manifest.

**Alternatives considered**

Client-only aging can drift across browsers and source kinds. Deleting
old rows removes audit and recovery paths. An unsigned dynamic bulk
query can archive items that the reviewer did not inspect.

**Roadmap alignment**

This work supports the Work Queues and decision-memory directions in
`ROADMAP.md`. It extends the Decisions and attention-feed foundation
from #10651. Related earlier work includes #9380, #10010, and #10474.

## What Changed

- Added the queue rail, date chips, decide split, triage strip, queue
page, and aging shelf UI.
- Added server-owned shelf state with per-queue retention overrides.
- Added reversible retention state, archive history, and an idempotent
notification outbox.
- Added the 90-day archive sweeper, Keep exemption, archived feed query,
and revive actions.
- Added one origin-agent notification per agent and sweep.
- Added signed bulk archive proposals with exact-set and version checks.
- Persisted queue-exclusion reasons atomically and kept cross-domain
source resolution per-item until it has an exact-set transaction
contract.
- Added API contracts, OpenAPI entries, migration coverage, focused
tests, and Storybook screens.

## Verification

- `pnpm -r typecheck`
- `pnpm test:run` (server: 329 files and 3,453 tests passed; UI: 408
files and 3,362 tests passed)
- `env -u AWS_ACCESS_KEY_ID -u AWS_SECRET_ACCESS_KEY pnpm exec vitest
run cli/src/__tests__/secrets.test.ts`
- `pnpm build`
- `pnpm check:token-gates`
- Focused retention, attention, decisions, migration replay, startup,
and UI API tests.
- Complete queue snapshot regression with 51 items across the normal
50-item page boundary.

The unmodified CLI test reports one warning assertion in this runtime
because the harness injects static AWS credential variables. The
isolated test passes when those two variables are removed.

## Risks

- The migration adds retention and notification outbox tables. It uses
idempotent table, index, and foreign-key creation.
- Retention runs on the heartbeat scheduler interval. Compare-and-set
version checks prevent stale archive writes.
- Bulk archive acceptance fails closed when authority, activity,
version, or the reviewed set changes.
- Archive is reversible and does not delete source records.

> 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 with `gpt-5.6-sol`. The model used tool calls, code
execution, database migration generation, and test execution. The
context-window size is not exposed in this runtime.

## 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 searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

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

ui/src/App.tsx

@@ -45,6 +45,7 @@ import { Activity } from "./pages/Activity";
 import { CompanyAudit } from "./pages/audit/CompanyAudit";
 import { Inbox } from "./pages/Inbox";
 import { WhatNeedsMe } from "./pages/WhatNeedsMe";
+import { DecisionQueuePage } from "./pages/DecisionQueuePage";
 import { TrainingInspector, TrainingLibrary } from "./pages/Training";
 import { BoardChat } from "./pages/BoardChat";
 import { CompanySettings } from "./pages/CompanySettings";
@@ -280,6 +281,7 @@ function boardRoutes() {
         </Route>
       ) : null}
       <Route path="decisions" element={<WhatNeedsMe />} />
+      <Route path="decisions/queues/:key" element={<DecisionQueuePage />} />
       <Route path="decisions/training" element={<TrainingLibrary />} />
       <Route path="decisions/training/:id" element={<TrainingInspector />} />
       <Route path="training" element={<Navigate to="/decisions/training" replace />} />

ui/src/api/attention.test.ts

@@ -15,6 +15,7 @@ describe("attentionApi.list", () => {
   it("encodes feed filters, decide sorting, and cursor pagination", async () => {
     await attentionApi.list("company-1", {
       includeDismissed: true,
+      archived: true,
       activitySince: "2026-08-01T00:00:00.000Z",
       activityUntil: "2026-08-01T23:59:59.999Z",
       queue: "release review",
@@ -24,7 +25,15 @@ describe("attentionApi.list", () => {
     });
 
     expect(mockApi.get).toHaveBeenCalledWith(
-      "/companies/company-1/attention?includeDismissed=true&activitySince=2026-08-01T00%3A00%3A00.000Z&activityUntil=2026-08-01T23%3A59%3A59.999Z&queue=release+review&sort=decide&cursor=next%2Fpage&limit=25",
+      "/companies/company-1/attention?includeDismissed=true&archived=true&activitySince=2026-08-01T00%3A00%3A00.000Z&activityUntil=2026-08-01T23%3A59%3A59.999Z&queue=release+review&sort=decide&cursor=next%2Fpage&limit=25",
+    );
+  });
+
+  it("requests a complete filtered snapshot for complete-set actions", async () => {
+    await attentionApi.list("company-1", { queue: "release review", all: true });
+
+    expect(mockApi.get).toHaveBeenCalledWith(
+      "/companies/company-1/attention?all=true&queue=release+review",
     );
   });
 

ui/src/api/attention.ts

@@ -10,6 +10,8 @@ export const attentionApi = {
   list: (companyId: string, options: AttentionFeedQuery = {}) => {
     const params = new URLSearchParams();
     if (options.includeDismissed) params.set("includeDismissed", "true");
+    if (options.archived) params.set("archived", "true");
+    if (options.all) params.set("all", "true");
     if (options.activitySince) params.set("activitySince", options.activitySince);
     if (options.activityUntil) params.set("activityUntil", options.activityUntil);
     if (options.queue) params.set("queue", options.queue);

ui/src/api/decisionQueues.ts

@@ -0,0 +1,148 @@
+import type {
+  AttentionSourceKind,
+  DecisionQueue,
+  DecisionQueueItem,
+  DecisionQueueSeedRule,
+  DecisionTriage,
+} from "@paperclipai/shared";
+import { api } from "./client";
+
+// The shared types model timestamps as `Date` (the server row shape); over the
+// wire they arrive as ISO strings, so the UI-facing DTOs restate the time
+// fields as strings. Everything else round-trips unchanged.
+export type DecisionQueueDto = Omit<DecisionQueue, "createdAt" | "updatedAt"> & {
+  createdAt: string;
+  updatedAt: string;
+};
+export type DecisionQueueItemDto = Omit<DecisionQueueItem, "createdAt"> & { createdAt: string };
+export type DecisionTriageDto = Omit<DecisionTriage, "createdAt" | "updatedAt" | "snoozedUntil"> & {
+  createdAt: string;
+  updatedAt: string;
+  snoozedUntil: string | null;
+};
+
+/** A seed rule bundled with its owning queue key/title, from the catalog endpoint. */
+export interface DecisionQueueSeedDefinition {
+  key: string;
+  title: string;
+  description: string;
+  rules: DecisionQueueSeedRule[];
+}
+
+export interface CreateDecisionQueueBody {
+  key: string;
+  title: string;
+  description?: string | null;
+  retentionDays?: number | null;
+}
+
+export interface UpdateDecisionQueueBody {
+  title?: string;
+  description?: string | null;
+  retentionDays?: number | null;
+  seedRulesEnabled?: boolean;
+}
+
+export interface UpdateDecisionTriageBody {
+  /** `today` | `this_week` | `whenever` | `YYYY-MM-DD` | null to clear. */
+  decideBy?: string | null;
+  /** ISO timestamp, or null to clear. */
+  snoozedUntil?: string | null;
+}
+
+export interface DecisionRetentionDto {
+  id: string;
+  companyId: string;
+  sourceKind: AttentionSourceKind;
+  sourceId: string;
+  sourceActivityAt: string;
+  keep: boolean;
+  archivedAt: string | null;
+  archivedReason: string | null;
+  version: number;
+  archiveVersion: number;
+  updatedAt: string;
+}
+
+export interface CreateDecisionArchiveProposalBody {
+  items: Array<{ sourceKind: AttentionSourceKind; sourceId: string; reason: string }>;
+  idempotencyKey?: string;
+}
+
+/**
+ * Decision queues + triage (PAP-16039 P1). Queues are named, company-scoped,
+ * durable lists any agent or the board can feed; triage stores the per-source
+ * decide-by / snooze that drives the desk's `sort=decide` ordering. The
+ * attention feed already surfaces `queues[]` and `decideBy` per item — these
+ * routes are the write path and the queue-rail/queue-page read path.
+ */
+export const decisionQueuesApi = {
+  seedRules: (companyId: string) =>
+    api.get<DecisionQueueSeedDefinition[]>(`/companies/${companyId}/decision-queue-seed-rules`),
+
+  list: (companyId: string) => api.get<DecisionQueueDto[]>(`/companies/${companyId}/decision-queues`),
+
+  create: (companyId: string, body: CreateDecisionQueueBody) =>
+    api.post<DecisionQueueDto>(`/companies/${companyId}/decision-queues`, body),
+
+  update: (companyId: string, key: string, body: UpdateDecisionQueueBody) =>
+    api.patch<DecisionQueueDto>(`/companies/${companyId}/decision-queues/${encodeURIComponent(key)}`, body),
+
+  listItems: (companyId: string, key: string) =>
+    api.get<DecisionQueueItemDto[]>(`/companies/${companyId}/decision-queues/${encodeURIComponent(key)}/items`),
+
+  addItem: (companyId: string, key: string, sourceKind: AttentionSourceKind, sourceId: string) =>
+    api.post<DecisionQueueItemDto>(
+      `/companies/${companyId}/decision-queues/${encodeURIComponent(key)}/items`,
+      { sourceKind, sourceId },
+    ),
+
+  removeItem: (
+    companyId: string,
+    key: string,
+    sourceKind: AttentionSourceKind,
+    sourceId: string,
+    reason?: string,
+  ) =>
+    api.delete<DecisionQueueItemDto>(
+      `/companies/${companyId}/decision-queues/${encodeURIComponent(key)}/items/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}`,
+      reason ? { reason } : {},
+    ),
+
+  getTriage: (companyId: string, sourceKind: AttentionSourceKind, sourceId: string) =>
+    api.get<DecisionTriageDto | null>(
+      `/companies/${companyId}/decision-triage/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}`,
+    ),
+
+  updateTriage: (
+    companyId: string,
+    sourceKind: AttentionSourceKind,
+    sourceId: string,
+    body: UpdateDecisionTriageBody,
+  ) =>
+    api.put<DecisionTriageDto>(
+      `/companies/${companyId}/decision-triage/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}`,
+      body,
+    ),
+
+  setKeep: (companyId: string, sourceKind: AttentionSourceKind, sourceId: string, keep: boolean) =>
+    api.patch<DecisionRetentionDto>(
+      `/companies/${companyId}/decision-retention/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}`,
+      { keep },
+    ),
+
+  archive: (companyId: string, sourceKind: AttentionSourceKind, sourceId: string) =>
+    api.post<DecisionRetentionDto>(
+      `/companies/${companyId}/decision-retention/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}/archive`,
+      {},
+    ),
+
+  revive: (companyId: string, sourceKind: AttentionSourceKind, sourceId: string) =>
+    api.post<DecisionRetentionDto>(
+      `/companies/${companyId}/decision-retention/${encodeURIComponent(sourceKind)}/${encodeURIComponent(sourceId)}/revive`,
+      {},
+    ),
+
+  proposeArchive: (companyId: string, body: CreateDecisionArchiveProposalBody) =>
+    api.post(`/companies/${companyId}/decision-archive-proposals`, body),
+};

ui/src/components/AttentionQueueRow.test.tsx

@@ -117,6 +117,11 @@ function buildItem(overrides: Partial<AttentionItem> = {}): AttentionItem {
     ruleKey: overrides.ruleKey ?? null,
     originAgentName: overrides.originAgentName ?? null,
     queues: overrides.queues ?? [],
+    shelf: overrides.shelf ?? false,
+    retentionDays: overrides.retentionDays ?? 30,
+    keep: overrides.keep ?? false,
+    archivedAt: overrides.archivedAt ?? null,
+    retentionVersion: overrides.retentionVersion ?? 1,
     decideBy: overrides.decideBy ?? null,
     decideByAttribution: overrides.decideByAttribution ?? null,
     snoozedUntil: overrides.snoozedUntil ?? null,

ui/src/components/AttentionQueueRow.tsx

@@ -2,6 +2,7 @@ import { memo, useState, type KeyboardEvent, type ReactNode } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   AlarmClock,
+  CalendarClock,
   ChevronDown,
   ChevronUp,
   ExternalLink,
@@ -24,11 +25,13 @@ import {
   attentionImageUrl,
   attentionStatus,
   attentionTaskRef,
+  decideByLabel,
   isInlineResolvable,
   sourceMeta,
 } from "../lib/attention";
 import { isTrainable } from "../lib/decisionTraining";
 import { cn, relativeTime } from "../lib/utils";
+import { DecisionTriageStrip } from "./DecisionTriageStrip";
 import { StatusGlyph } from "./StatusGlyph";
 import { Button } from "./ui/button";
 import { Collapsible, CollapsibleContent } from "./ui/collapsible";
@@ -86,6 +89,10 @@ interface AttentionQueueRowProps {
   /** "active" renders the live queue row; "hidden" renders a curtain row. */
   variant?: "active" | "hidden";
   agentMap?: Map<string, Agent>;
+  /** Company agents, for the triage strip's route-to-agent picker. */
+  agents?: Agent[];
+  /** Render the per-card triage strip (queue/decide-by/snooze/route) when expanded. */
+  showTriage?: boolean;
   currentUserId?: string | null;
   userLabelMap?: ReadonlyMap<string, string> | null;
   selected?: boolean;
@@ -109,6 +116,8 @@ export const AttentionQueueRow = memo(function AttentionQueueRow({
   onRestore,
   variant = "active",
   agentMap,
+  agents,
+  showTriage = false,
   currentUserId,
   userLabelMap,
   selected = false,
@@ -130,10 +139,12 @@ export const AttentionQueueRow = memo(function AttentionQueueRow({
   // "n more" affordance in the expanded gallery.
   const issueHref = item.relatedIssue?.href ?? href;
   // Inline-resolvable active rows expand to reveal their resolver; rows with
-  // images expand to reveal a larger gallery (PAP-13544). Either case gives a
-  // header/thumbnail click somewhere to go. Non-inline, image-less rows keep the
-  // explicit Open button and never toggle on a stray click.
-  const expandable = inline || (!isHidden && hasImages);
+  // images expand to reveal a larger gallery (PAP-13544); triage-enabled rows
+  // expand to reveal the per-card triage strip (PAP-16032 §4.5). Any of these
+  // gives a header/thumbnail click somewhere to go. Non-inline, image-less rows
+  // with no triage keep the explicit Open button and never toggle on a stray click.
+  const triageEnabled = showTriage && !isHidden;
+  const expandable = inline || (!isHidden && hasImages) || triageEnabled;
   // Any issue-anchored approval or interaction is
   // trainable at any time (pending or resolved). Trained/untrained renders
   // purely from the feed's `trainingExampleId` — no per-row fetch.
@@ -256,6 +267,22 @@ export const AttentionQueueRow = memo(function AttentionQueueRow({
               </Link>
             </>
           )}
+          {item.decideBy && (
+            <>
+              <EyebrowSeparator />
+              <span
+                className="inline-flex items-center gap-1 text-(length:--text-nano) text-muted-foreground"
+                data-attention-decide-by={item.decideBy}
+                title={decideByProvenance(item) ? `Set by ${decideByProvenance(item)}` : undefined}
+              >
+                <CalendarClock className="h-3 w-3" />
+                {decideByLabel(item.decideBy)}
+                {decideByProvenance(item) && (
+                  <span className="text-muted-foreground/80">· set by {decideByProvenance(item)}</span>
+                )}
+              </span>
+            </>
+          )}
           {trainable && trained && (
             <button
               type="button"
@@ -378,6 +405,7 @@ export const AttentionQueueRow = memo(function AttentionQueueRow({
         <CollapsibleContent data-decision-disclosure className="-mt-4">
           <div className="flex flex-col gap-4 pt-4">
             {hasImages && <ExpandedImages images={images} issueHref={issueHref} />}
+            {triageEnabled && <DecisionTriageStrip item={item} companyId={companyId} agents={agents} />}
             {inline && (
               <InlineResolver
                 item={item}
@@ -704,6 +732,18 @@ function SnoozeSubmenu({ onSnooze }: { onSnooze: (snoozedUntil: string) => void
   );
 }
 
+/**
+ * Who set this row's decide-by deadline, for the card's provenance line
+ * ("· set by Prioritizer"). Returns null when unattributed so the chip shows
+ * the deadline alone rather than a hollow "set by".
+ */
+function decideByProvenance(item: AttentionItem): string | null {
+  const attribution = item.decideByAttribution;
+  if (!attribution) return null;
+  if (attribution.type === "agent") return attribution.agentName ?? "an agent";
+  return "you";
+}
+
 /** Compact "when does this snooze end" label, e.g. `in 2h`, `in 3d`. */
 function reappearLabel(snoozedUntil: string): string {
   const diffMs = new Date(snoozedUntil).getTime() - Date.now();

ui/src/components/DecisionDateChips.tsx

@@ -0,0 +1,127 @@
+import { cloneElement, isValidElement, useState } from "react";
+import { CalendarRange } from "lucide-react";
+import {
+  ATTENTION_DATE_RANGE_OPTIONS,
+  type AttentionDateRangeId,
+} from "../lib/attention";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+
+export interface AttentionCustomRange {
+  from: string | null;
+  to: string | null;
+}
+
+interface DecisionDateChipsProps {
+  value: AttentionDateRangeId;
+  custom: AttentionCustomRange;
+  onChange: (value: AttentionDateRangeId, custom: AttentionCustomRange) => void;
+}
+
+/**
+ * Date-range chips (PAP-16032 §4.2 / wireframe screen 1, annotation 2). Filter
+ * the desk on activity date; the resolved bounds go to the server
+ * (`activitySince`/`activityUntil`) so the page never ships the whole feed to
+ * filter on the client. "Custom" opens a from/to range picker.
+ */
+export function DecisionDateChips({ value, custom, onChange }: DecisionDateChipsProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5" data-decision-date-chips>
+      {ATTENTION_DATE_RANGE_OPTIONS.map(([id, label]) => (
+        <ChipButton key={id} active={value === id} onClick={() => onChange(id, custom)}>
+          {label}
+        </ChipButton>
+      ))}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <ChipButton active={value === "custom"} asChild>
+            <button type="button">
+              <CalendarRange className="h-3.5 w-3.5" />
+              {value === "custom" && (custom.from || custom.to)
+                ? `${custom.from ?? "…"} → ${custom.to ?? "…"}`
+                : "Custom"}
+            </button>
+          </ChipButton>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-auto space-y-2 p-3">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-(length:--text-nano) font-medium uppercase tracking-wide text-muted-foreground">
+              From
+            </label>
+            <input
+              type="date"
+              value={custom.from ?? ""}
+              max={custom.to ?? undefined}
+              className="rounded-sm border border-border bg-background px-2 py-1 text-xs"
+              onChange={(event) => onChange("custom", { ...custom, from: event.target.value || null })}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-(length:--text-nano) font-medium uppercase tracking-wide text-muted-foreground">
+              To
+            </label>
+            <input
+              type="date"
+              value={custom.to ?? ""}
+              min={custom.from ?? undefined}
+              className="rounded-sm border border-border bg-background px-2 py-1 text-xs"
+              onChange={(event) => onChange("custom", { ...custom, to: event.target.value || null })}
+            />
+          </div>
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              size="xs"
+              onClick={() => {
+                onChange("all", { from: null, to: null });
+                setOpen(false);
+              }}
+            >
+              Clear
+            </Button>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+function ChipButton({
+  active,
+  onClick,
+  asChild,
+  children,
+}: {
+  active: boolean;
+  onClick?: () => void;
+  asChild?: boolean;
+  children: React.ReactNode;
+}) {
+  const className = cn(
+    "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+    active
+      ? "border-primary bg-primary/10 text-primary"
+      : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+  );
+  if (asChild) {
+    // The child is a real <button>; merge the chip class straight onto it so the
+    // flex layout (icon + label inline) lands on the button, not a wrapper span.
+    // A bare wrapper span left the button unstyled → its icon stacked above the
+    // label and the chip grew taller than its siblings.
+    if (isValidElement<{ className?: string }>(children)) {
+      return cloneElement(children, {
+        className: cn(className, children.props.className),
+      });
+    }
+    return <span className={className}>{children}</span>;
+  }
+  return (
+    <button type="button" className={className} onClick={onClick} aria-pressed={active}>
+      {children}
+    </button>
+  );
+}

ui/src/components/DecisionQueueRail.tsx

@@ -0,0 +1,95 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@/lib/router";
+import { decisionQueuesApi } from "../api/decisionQueues";
+import { queryKeys } from "../lib/queryKeys";
+import { cn } from "../lib/utils";
+
+const RECENT_ACTIVITY_MS = 24 * 60 * 60 * 1000;
+
+/** Href for a queue page under the current company prefix, or `/decisions` for All. */
+export function decisionsHref(queueKey?: string | null): string {
+  return queueKey ? `/decisions/queues/${encodeURIComponent(queueKey)}` : "/decisions";
+}
+
+interface DecisionQueueRailProps {
+  companyId: string;
+  /** The active queue key, or null when the desk (All) is active. */
+  activeQueueKey?: string | null;
+}
+
+/**
+ * Queue quicklinks (PAP-16032 §4.1 / wireframe screen 1, annotation 1). The
+ * chips are *this company's queues*, ordered by most-recently-updated (the
+ * server already sorts them that way) — not a hardcoded set of types. "All" is
+ * the only fixed chip. A dot marks a queue with recent activity; the count is
+ * the queue's pending items.
+ */
+export function DecisionQueueRail({ companyId, activeQueueKey = null }: DecisionQueueRailProps) {
+  const { data: queues } = useQuery({
+    queryKey: queryKeys.decisionQueues.list(companyId),
+    queryFn: () => decisionQueuesApi.list(companyId),
+    enabled: !!companyId,
+  });
+
+  // Nothing to show until at least one queue exists — the desk still works
+  // without the rail, so render nothing rather than a lone "All" chip.
+  if (!queues || queues.length === 0) {
+    return null;
+  }
+
+  const now = Date.now();
+
+  return (
+    <nav className="flex flex-wrap items-center gap-1.5" aria-label="Decision queues" data-decision-queue-rail>
+      <Chip href={decisionsHref(null)} active={activeQueueKey == null} label="All" />
+      {queues.map((queue) => {
+        const recent = now - new Date(queue.updatedAt).getTime() < RECENT_ACTIVITY_MS;
+        return (
+          <Chip
+            key={queue.key}
+            href={decisionsHref(queue.key)}
+            active={activeQueueKey === queue.key}
+            label={queue.title}
+            count={queue.itemCount}
+            recent={recent}
+          />
+        );
+      })}
+    </nav>
+  );
+}
+
+function Chip({
+  href,
+  active,
+  label,
+  count,
+  recent,
+}: {
+  href: string;
+  active: boolean;
+  label: string;
+  count?: number;
+  recent?: boolean;
+}) {
+  return (
+    <Link
+      to={href}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+        active
+          ? "border-primary bg-primary/10 text-primary"
+          : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+      aria-current={active ? "page" : undefined}
+    >
+      {recent && (
+        <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-label="Recent activity" />
+      )}
+      <span className="truncate">{label}</span>
+      {count != null && count > 0 && (
+        <span className="tabular-nums text-(length:--text-nano) text-muted-foreground">{count}</span>
+      )}
+    </Link>
+  );
+}

ui/src/components/DecisionTrainingDrawer.test.tsx

@@ -113,6 +113,11 @@ function buildItem(overrides: Partial<AttentionItem> = {}): AttentionItem {
     ruleKey: overrides.ruleKey ?? null,
     originAgentName: overrides.originAgentName ?? null,
     queues: overrides.queues ?? [],
+    shelf: overrides.shelf ?? false,
+    retentionDays: overrides.retentionDays ?? 30,
+    keep: overrides.keep ?? false,
+    archivedAt: overrides.archivedAt ?? null,
+    retentionVersion: overrides.retentionVersion ?? 1,
     decideBy: overrides.decideBy ?? null,
     decideByAttribution: overrides.decideByAttribution ?? null,
     snoozedUntil: overrides.snoozedUntil ?? null,

ui/src/components/DecisionTriageStrip.tsx

@@ -0,0 +1,458 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AlarmClock, CalendarClock, ChevronDown, Loader2, Plus, UserPlus, X } from "lucide-react";
+import { buildAgentMentionHref, type Agent, type AttentionItem, type AttentionSourceKind } from "@paperclipai/shared";
+import { decisionQueuesApi } from "../api/decisionQueues";
+import { issuesApi } from "../api/issues";
+import { useToastActions } from "../context/ToastContext";
+import { queryKeys } from "../lib/queryKeys";
+import {
+  attentionTaskRef,
+  DECIDE_BY_OPTIONS,
+  decideByLabel,
+  type DecideByPreset,
+} from "../lib/attention";
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * HOUR_MS;
+
+/** Snooze presets shared with the row menu, resolved at click time. */
+const SNOOZE_PRESETS: ReadonlyArray<{ label: string; resolve: () => string }> = [
+  { label: "1 hour", resolve: () => new Date(Date.now() + HOUR_MS).toISOString() },
+  { label: "4 hours", resolve: () => new Date(Date.now() + 4 * HOUR_MS).toISOString() },
+  { label: "Tomorrow", resolve: () => {
+    const d = new Date();
+    d.setDate(d.getDate() + 1);
+    d.setHours(9, 0, 0, 0);
+    return d.toISOString();
+  } },
+  { label: "Next week", resolve: () => new Date(Date.now() + 7 * DAY_MS).toISOString() },
+];
+
+/** Slugify a queue title into a URL-safe kebab key the API will accept. */
+function toQueueKey(title: string): string {
+  return title
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}
+
+/** Compact countdown/overdue label for an expiry timestamp. */
+function expiryLabel(expiresAt: string): { text: string; overdue: boolean } {
+  const diff = new Date(expiresAt).getTime() - Date.now();
+  if (!Number.isFinite(diff)) return { text: "", overdue: false };
+  if (diff <= 0) return { text: "Expired", overdue: true };
+  const mins = Math.round(diff / 60000);
+  if (mins < 60) return { text: `Expires in ${mins}m`, overdue: false };
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return { text: `Expires in ${hrs}h`, overdue: false };
+  const days = Math.round(hrs / 24);
+  return { text: `Expires in ${days}d`, overdue: false };
+}
+
+interface DecisionTriageStripProps {
+  item: AttentionItem;
+  companyId: string;
+  /** Company agents, for the route-to-agent picker (optional). */
+  agents?: Agent[];
+}
+
+/**
+ * Per-card triage strip (PAP-16032 §4.5 / wireframe screen 3). Exposes the
+ * write path the "agents alongside" also use: decide-by urgency (drives the
+ * desk's Decide-now / Can-wait split), queue membership, snooze, and
+ * route-to-agent. Every write is attributed and rendered as a setting, never a
+ * silent mutation. Queue/decide-by/snooze go through the P1 triage APIs; the
+ * expiry chip surfaces the underlying decision's TTL read-only.
+ */
+export function DecisionTriageStrip({ item, companyId, agents }: DecisionTriageStripProps) {
+  const queryClient = useQueryClient();
+  const { pushToast } = useToastActions();
+  const sourceKind = item.sourceKind;
+  const sourceId = item.subject.id;
+  const taskRef = attentionTaskRef(item);
+  const relatedIssueId = item.relatedIssue?.id
+    ?? (typeof item.subject.metadata?.issueId === "string" ? item.subject.metadata.issueId : null)
+    ?? (item.subject.kind === "issue" ? item.subject.id : null);
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.attention(companyId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.decisionQueues.list(companyId) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.decisionQueues.triage(companyId, sourceKind, sourceId) });
+  };
+
+  const onError = (verb: string) => (error: unknown) =>
+    pushToast({
+      title: `Could not ${verb}`,
+      body: error instanceof Error ? error.message : "Please try again.",
+      tone: "error",
+    });
+
+  const setDecideBy = useMutation({
+    mutationFn: (decideBy: string | null) =>
+      decisionQueuesApi.updateTriage(companyId, sourceKind, sourceId, { decideBy }),
+    onSuccess: invalidate,
+    onError: onError("set when to decide"),
+  });
+  const setSnooze = useMutation({
+    mutationFn: (snoozedUntil: string | null) =>
+      decisionQueuesApi.updateTriage(companyId, sourceKind, sourceId, { snoozedUntil }),
+    onSuccess: invalidate,
+    onError: onError("snooze"),
+  });
+  const addToQueue = useMutation({
+    mutationFn: (key: string) => decisionQueuesApi.addItem(companyId, key, sourceKind, sourceId),
+    onSuccess: invalidate,
+    onError: onError("add to queue"),
+  });
+  const removeFromQueue = useMutation({
+    mutationFn: (key: string) => decisionQueuesApi.removeItem(companyId, key, sourceKind, sourceId),
+    onSuccess: invalidate,
+    onError: onError("remove from queue"),
+  });
+  const routeToAgent = useMutation({
+    mutationFn: (agent: Agent) => {
+      if (!relatedIssueId) throw new Error("This decision has no linked task to route from.");
+      const mention = `[@${agent.name}](${buildAgentMentionHref(agent.id)})`;
+      const body =
+        `${mention} — could you look at this decision${taskRef ? ` on ${taskRef.identifier}` : ""}, `
+        + `prepare a recommendation, and re-surface it on the decisions desk? (routed from the desk)`;
+      return issuesApi.addComment(relatedIssueId, body);
+    },
+    onSuccess: (_result, agent) => {
+      invalidate();
+      pushToast({ title: `Routed to ${agent.name}`, tone: "success" });
+    },
+    onError: onError("route to agent"),
+  });
+
+  const pending = setDecideBy.isPending || setSnooze.isPending || addToQueue.isPending || removeFromQueue.isPending;
+  const decideBy = item.decideBy;
+  const isDatePreset = decideBy != null && /^\d{4}-\d{2}-\d{2}$/.test(decideBy);
+
+  return (
+    <div
+      className="flex flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3"
+      data-decision-triage-strip
+      // Contained inside the expandable panel; stop the card's expand toggle
+      // from firing when the operator interacts with a control.
+      onClick={(event) => event.stopPropagation()}
+    >
+      {/* Expiry — read-only countdown so a dying confirmation is visible. */}
+      {item.expiresAt && (() => {
+        const { text, overdue } = expiryLabel(item.expiresAt);
+        if (!text) return null;
+        return (
+          <div className="flex items-center gap-1.5 text-xs">
+            <AlarmClock className={cn("h-3.5 w-3.5", overdue ? "text-destructive" : "text-muted-foreground")} />
+            <span className={overdue ? "font-medium text-destructive" : "text-muted-foreground"}>{text}</span>
+          </div>
+        );
+      })()}
+
+      {/* When to decide — the importance signal that drives desk ordering. */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs font-medium text-muted-foreground">When to decide</span>
+        <div className="flex flex-wrap items-center gap-1" role="group" aria-label="When to decide">
+          {DECIDE_BY_OPTIONS.map(([value, label]) => (
+            <SegmentButton
+              key={value}
+              active={decideBy === (value satisfies DecideByPreset)}
+              disabled={pending}
+              onClick={() => setDecideBy.mutate(decideBy === value ? null : value)}
+            >
+              {label}
+            </SegmentButton>
+          ))}
+          <Popover>
+            <PopoverTrigger asChild>
+              <SegmentButton active={isDatePreset} disabled={pending}>
+                <CalendarClock className="h-3.5 w-3.5" />
+                {isDatePreset ? decideByLabel(decideBy) : "Pick date"}
+              </SegmentButton>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-auto p-2">
+              <input
+                type="date"
+                defaultValue={isDatePreset ? decideBy ?? "" : ""}
+                className="rounded-sm border border-border bg-background px-2 py-1 text-xs"
+                onChange={(event) => {
+                  if (event.target.value) setDecideBy.mutate(event.target.value);
+                }}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        {/* Provenance ("· set by …") is rendered once, in the card meta row
+            (AttentionQueueRow), which shows in both collapsed and expanded
+            states — repeating it here duplicated it on the expanded card. */}
+      </div>
+
+      {/* Queues — current membership as removable chips + add/create. */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs font-medium text-muted-foreground">Queues</span>
+        {item.queues.map((queue) => (
+          <span
+            key={queue.key}
+            className="inline-flex items-center gap-1 rounded-sm border border-border bg-background px-1.5 py-0.5 text-xs"
+          >
+            {queue.title}
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-destructive disabled:opacity-50"
+              aria-label={`Remove from ${queue.title}`}
+              disabled={pending}
+              onClick={() => removeFromQueue.mutate(queue.key)}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </span>
+        ))}
+        <QueuePicker
+          companyId={companyId}
+          existingKeys={new Set(item.queues.map((queue) => queue.key))}
+          disabled={pending}
+          onAdd={(key) => addToQueue.mutate(key)}
+        />
+      </div>
+
+      {/* Snooze + route-to-agent. */}
+      <div className="flex flex-wrap items-center gap-2">
+        {item.snoozedUntil ? (
+          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+            <AlarmClock className="h-3.5 w-3.5" />
+            Snoozed until {new Date(item.snoozedUntil).toLocaleString()}
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-foreground"
+              disabled={pending}
+              onClick={() => setSnooze.mutate(null)}
+            >
+              Clear
+            </button>
+          </span>
+        ) : (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button type="button" variant="outline" size="xs" className="h-7 gap-1" disabled={pending}>
+                <AlarmClock className="h-3.5 w-3.5" />
+                Snooze
+                <ChevronDown className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {SNOOZE_PRESETS.map((preset) => (
+                <DropdownMenuItem key={preset.label} onClick={() => setSnooze.mutate(preset.resolve())}>
+                  {preset.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        <RouteToAgentPicker
+          agents={agents ?? []}
+          disabled={routeToAgent.isPending || !relatedIssueId}
+          disabledReason={!relatedIssueId ? "No linked task to route from" : undefined}
+          onRoute={(agent) => routeToAgent.mutate(agent)}
+        />
+        {pending && <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
+      </div>
+    </div>
+  );
+}
+
+function SegmentButton({
+  active,
+  disabled,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      aria-pressed={active}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-sm border px-2 py-1 text-xs transition-colors disabled:opacity-50",
+        active
+          ? "border-primary bg-primary/10 font-medium text-primary"
+          : "border-border text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function QueuePicker({
+  companyId,
+  existingKeys,
+  disabled,
+  onAdd,
+}: {
+  companyId: string;
+  existingKeys: Set<string>;
+  disabled?: boolean;
+  onAdd: (key: string) => void;
+}) {
+  const queryClient = useQueryClient();
+  const { pushToast } = useToastActions();
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [title, setTitle] = useState("");
+  const { data: queues } = useQuery({
+    queryKey: queryKeys.decisionQueues.list(companyId),
+    queryFn: () => decisionQueuesApi.list(companyId),
+    enabled: open,
+  });
+  const create = useMutation({
+    mutationFn: (name: string) =>
+      decisionQueuesApi.create(companyId, { key: toQueueKey(name), title: name.trim() }),
+    onSuccess: (queue) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.decisionQueues.list(companyId) });
+      onAdd(queue.key);
+      setTitle("");
+      setCreating(false);
+      setOpen(false);
+    },
+    onError: (error) =>
+      pushToast({
+        title: "Could not create queue",
+        body: error instanceof Error ? error.message : "Please try again.",
+        tone: "error",
+      }),
+  });
+
+  const available = (queues ?? []).filter((queue) => !existingKeys.has(queue.key));
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="xs" className="h-7 gap-1" disabled={disabled}>
+          <Plus className="h-3.5 w-3.5" />
+          Queue
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-56 p-1">
+        {creating ? (
+          <div className="flex flex-col gap-1.5 p-1">
+            <input
+              autoFocus
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && title.trim()) create.mutate(title);
+                if (event.key === "Escape") setCreating(false);
+              }}
+              placeholder="New queue name…"
+              className="w-full rounded-sm border border-border bg-background px-2 py-1 text-xs"
+            />
+            <div className="flex justify-end gap-1">
+              <Button type="button" variant="ghost" size="xs" onClick={() => setCreating(false)}>
+                Cancel
+              </Button>
+              <Button type="button" size="xs" disabled={!title.trim() || create.isPending} onClick={() => create.mutate(title)}>
+                {create.isPending && <Loader2 className="h-3 w-3 animate-spin" />}
+                Create
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="max-h-64 space-y-0.5 overflow-y-auto">
+            {available.length === 0 && (
+              <p className="px-2 py-1.5 text-xs text-muted-foreground">No other queues yet.</p>
+            )}
+            {available.map((queue) => (
+              <button
+                key={queue.key}
+                type="button"
+                className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+                onClick={() => {
+                  onAdd(queue.key);
+                  setOpen(false);
+                }}
+              >
+                <span className="truncate">{queue.title}</span>
+                {queue.itemCount > 0 && (
+                  <span className="ml-2 shrink-0 text-(length:--text-nano) tabular-nums text-muted-foreground">
+                    {queue.itemCount}
+                  </span>
+                )}
+              </button>
+            ))}
+            <DropdownMenuSeparatorLike />
+            <button
+              type="button"
+              className="flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+              onClick={() => setCreating(true)}
+            >
+              <Plus className="h-3.5 w-3.5" />
+              New queue…
+            </button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function DropdownMenuSeparatorLike() {
+  return <div className="my-1 h-px bg-border" />;
+}
+
+function RouteToAgentPicker({
+  agents,
+  disabled,
+  disabledReason,
+  onRoute,
+}: {
+  agents: Agent[];
+  disabled?: boolean;
+  disabledReason?: string;
+  onRoute: (agent: Agent) => void;
+}) {
+  const active = agents.filter((agent) => agent.status !== "terminated");
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="xs"
+          className="h-7 gap-1"
+          disabled={disabled || active.length === 0}
+          title={disabledReason}
+        >
+          <UserPlus className="h-3.5 w-3.5" />
+          Route to agent
+          <ChevronDown className="h-3 w-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-72 overflow-y-auto">
+        {active.map((agent) => (
+          <DropdownMenuItem key={agent.id} onClick={() => onRoute(agent)}>
+            {agent.name}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

ui/src/lib/attention.test.ts

@@ -49,6 +49,11 @@ function buildItem(overrides: Partial<AttentionItem> = {}): AttentionItem {
     ruleKey: null,
     originAgentName: null,
     queues: [],
+    shelf: false,
+    retentionDays: 30,
+    keep: false,
+    archivedAt: null,
+    retentionVersion: 1,
     decideBy: null,
     decideByAttribution: null,
     snoozedUntil: null,

ui/src/lib/attention.ts

@@ -263,6 +263,193 @@ export function attentionBadgeCount(feed: AttentionFeed | null | undefined): num
   return feed?.decideNowCount ?? 0;
 }
 
+// ---------------------------------------------------------------------------
+// Decide-by / today's desk (PAP-16032 §4.3)
+//
+// The desk splits items into "Decide now" and "Can wait" and orders them by a
+// per-item `decideBy` field. The server owns the authoritative ranking
+// (`sort=decide`) and the badge's `decideNowCount`; these client helpers mirror
+// that logic *exactly* (same UTC day/week boundaries) so the on-page split and
+// the badge never disagree. Keep in lockstep with
+// `server/src/services/attention.ts` (`decideOrder`/`isDecideNow`).
+// ---------------------------------------------------------------------------
+
+const MS_PER_DAY_DECIDE = 24 * 60 * 60 * 1_000;
+
+function startOfUtcDay(now: number): number {
+  const value = new Date(now);
+  return Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate());
+}
+
+function endOfUtcDay(now: number): number {
+  return startOfUtcDay(now) + MS_PER_DAY_DECIDE - 1;
+}
+
+function endOfUtcWeek(now: number): number {
+  const start = startOfUtcDay(now);
+  const weekday = new Date(start).getUTCDay();
+  const daysUntilSunday = weekday === 0 ? 0 : 7 - weekday;
+  return start + (daysUntilSunday + 1) * MS_PER_DAY_DECIDE - 1;
+}
+
+/** [bucket, deadline] — lower bucket / earlier deadline sorts first. */
+export function attentionDecideOrder(item: AttentionItem, now: number): [number, number] {
+  if (item.decideBy === "today") return [0, endOfUtcDay(now)];
+  if (item.decideBy === "this_week") return [0, endOfUtcWeek(now)];
+  if (item.decideBy && /^\d{4}-\d{2}-\d{2}$/.test(item.decideBy)) {
+    const deadline = Date.parse(`${item.decideBy}T23:59:59.999Z`);
+    if (Number.isFinite(deadline)) return [0, deadline];
+  }
+  if (item.decideBy === "whenever") return [1, Number.MAX_SAFE_INTEGER];
+  return [2, Number.MAX_SAFE_INTEGER];
+}
+
+/** Due today or overdue — the "Decide now" shelf, and what the badge counts. */
+export function attentionIsDecideNow(item: AttentionItem, now: number): boolean {
+  const [bucket, deadline] = attentionDecideOrder(item, now);
+  return bucket === 0 && deadline <= endOfUtcDay(now);
+}
+
+/** Split the desk into its two shelves, preserving input order within each. */
+export function partitionDecideNow(
+  items: AttentionItem[],
+  now: number,
+): { decideNow: AttentionItem[]; canWait: AttentionItem[] } {
+  const decideNow: AttentionItem[] = [];
+  const canWait: AttentionItem[] = [];
+  for (const item of items) {
+    if (attentionIsDecideNow(item, now)) decideNow.push(item);
+    else canWait.push(item);
+  }
+  return { decideNow, canWait };
+}
+
+// ---------------------------------------------------------------------------
+// Aging shelf (PAP-16032 §4.4) — items idle past the threshold leave the desk.
+// ---------------------------------------------------------------------------
+
+/** Default idle threshold before an item drops from the desk to the shelf. */
+export const ATTENTION_AGING_DAYS = 30;
+
+/** Milliseconds since the item last saw activity. */
+export function attentionIdleMs(item: AttentionItem, now: number): number {
+  const ts = new Date(item.activityAt).getTime();
+  return Number.isFinite(ts) ? Math.max(0, now - ts) : 0;
+}
+
+/** Server-computed shelf membership, including per-queue retention overrides. */
+export function attentionIsAging(item: AttentionItem): boolean {
+  return item.shelf;
+}
+
+/** Idle duration in whole days, for the shelf's "idle N days" label. */
+export function attentionIdleDays(item: AttentionItem, now: number): number {
+  return Math.floor(attentionIdleMs(item, now) / MS_PER_DAY_DECIDE);
+}
+
+// ---------------------------------------------------------------------------
+// Decide-by control (triage strip) — the segmented options an operator/agent
+// picks from. `date` is handled separately by a date input.
+// ---------------------------------------------------------------------------
+
+export type DecideByPreset = "today" | "this_week" | "whenever";
+
+export const DECIDE_BY_OPTIONS: ReadonlyArray<[DecideByPreset, string]> = [
+  ["today", "Today"],
+  ["this_week", "This week"],
+  ["whenever", "Whenever"],
+];
+
+/** Human label for any stored `decideBy` value (preset or `YYYY-MM-DD`). */
+export function decideByLabel(decideBy: string | null): string {
+  if (!decideBy) return "Not set";
+  if (decideBy === "today") return "Today";
+  if (decideBy === "this_week") return "This week";
+  if (decideBy === "whenever") return "Whenever";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(decideBy)) {
+    const parsed = new Date(`${decideBy}T00:00:00.000Z`);
+    return Number.isFinite(parsed.getTime())
+      ? parsed.toLocaleDateString(undefined, { month: "short", day: "numeric", timeZone: "UTC" })
+      : decideBy;
+  }
+  return decideBy;
+}
+
+// ---------------------------------------------------------------------------
+// Date-range chips (PAP-16032 §4.2) — resolve to server-side activity bounds.
+// The desk filters `activityAt` server-side (activitySince/Until) rather than
+// shipping the whole feed and filtering on the client.
+// ---------------------------------------------------------------------------
+
+export type AttentionDateRangeId = "all" | "today" | "yesterday" | "last_7_days" | "this_month" | "custom";
+
+export const ATTENTION_DATE_RANGE_OPTIONS: ReadonlyArray<[AttentionDateRangeId, string]> = [
+  ["all", "All"],
+  ["today", "Today"],
+  ["yesterday", "Yesterday"],
+  ["last_7_days", "Last 7 days"],
+  ["this_month", "This month"],
+];
+
+export interface AttentionActivityBounds {
+  activitySince?: string;
+  activityUntil?: string;
+}
+
+/**
+ * Resolve a range chip to `{activitySince, activityUntil}` ISO bounds. Uses
+ * local calendar boundaries (what the operator means by "today"); `custom`
+ * takes the caller's explicit from/to dates.
+ */
+export function resolveAttentionDateRange(
+  range: AttentionDateRangeId,
+  now: number,
+  custom?: { from?: string | null; to?: string | null },
+): AttentionActivityBounds {
+  const startOfLocalDay = (ms: number) => {
+    const d = new Date(ms);
+    d.setHours(0, 0, 0, 0);
+    return d;
+  };
+  const endOfLocalDay = (ms: number) => {
+    const d = new Date(ms);
+    d.setHours(23, 59, 59, 999);
+    return d;
+  };
+  switch (range) {
+    case "all":
+      return {};
+    case "today":
+      return { activitySince: startOfLocalDay(now).toISOString() };
+    case "yesterday": {
+      const start = startOfLocalDay(now - MS_PER_DAY_DECIDE);
+      const end = endOfLocalDay(now - MS_PER_DAY_DECIDE);
+      return { activitySince: start.toISOString(), activityUntil: end.toISOString() };
+    }
+    case "last_7_days":
+      return { activitySince: startOfLocalDay(now - 6 * MS_PER_DAY_DECIDE).toISOString() };
+    case "this_month": {
+      const d = new Date(now);
+      const start = new Date(d.getFullYear(), d.getMonth(), 1, 0, 0, 0, 0);
+      return { activitySince: start.toISOString() };
+    }
+    case "custom": {
+      const bounds: AttentionActivityBounds = {};
+      if (custom?.from) {
+        const from = new Date(`${custom.from}T00:00:00`);
+        if (Number.isFinite(from.getTime())) bounds.activitySince = from.toISOString();
+      }
+      if (custom?.to) {
+        const to = new Date(`${custom.to}T23:59:59.999`);
+        if (Number.isFinite(to.getTime())) bounds.activityUntil = to.toISOString();
+      }
+      return bounds;
+    }
+    default:
+      return {};
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Grouping / sorting / filtering (PAP-13408 — Inbox-style toolbar)
 //

ui/src/lib/queryKeys.ts

@@ -395,6 +395,13 @@ export const queryKeys = {
     forTargetIssue: (companyId: string, issueId: string) =>
       ["decisions", companyId, "target", issueId] as const,
   },
+  decisionQueues: {
+    list: (companyId: string) => ["decision-queues", companyId] as const,
+    items: (companyId: string, key: string) => ["decision-queues", companyId, "items", key] as const,
+    seedRules: (companyId: string) => ["decision-queues", companyId, "seed-rules"] as const,
+    triage: (companyId: string, sourceKind: string, sourceId: string) =>
+      ["decision-triage", companyId, sourceKind, sourceId] as const,
+  },
   workTimeline: (companyId: string, lens?: string) => ["work-timeline", companyId, lens ?? "all"] as const,
   userProfile: (companyId: string, userSlug: string) =>
     ["user-profile", companyId, userSlug] as const,

ui/src/pages/DecisionQueuePage.tsx

@@ -0,0 +1,298 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, Loader2, Settings2, X } from "lucide-react";
+import type { Agent, AttentionItem } from "@paperclipai/shared";
+import { useParams } from "@/lib/router";
+import { attentionApi } from "../api/attention";
+import { agentsApi } from "../api/agents";
+import { authApi } from "../api/auth";
+import { decisionQueuesApi } from "../api/decisionQueues";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { useToastActions } from "../context/ToastContext";
+import { useInboxDismissals } from "../hooks/useInboxBadge";
+import { queryKeys } from "../lib/queryKeys";
+import { cn } from "../lib/utils";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { AttentionQueueRow } from "../components/AttentionQueueRow";
+import { DecisionQueueRail } from "../components/DecisionQueueRail";
+import { Button } from "../components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover";
+/**
+ * Queue page (PAP-16032 §4.1 / wireframe screen 2). A homogeneous list of one
+ * queue's pending decisions with per-item resolution, exclusion (with an
+ * optional reason), and the queue's seed-rules card with an enable/disable
+ * toggle. The list reuses the desk's card so a decision looks and resolves the
+ * same wherever it is surfaced.
+ */
+export function DecisionQueuePage() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const { pushToast } = useToastActions();
+  const queryClient = useQueryClient();
+  const params = useParams<{ key: string }>();
+  const queueKey = params.key ?? "";
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const { dismiss, snooze } = useInboxDismissals(selectedCompanyId);
+
+  const { data: queues } = useQuery({
+    queryKey: queryKeys.decisionQueues.list(selectedCompanyId!),
+    queryFn: () => decisionQueuesApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+  const queue = useMemo(() => queues?.find((q) => q.key === queueKey) ?? null, [queues, queueKey]);
+
+  const {
+    data: feed,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: [...queryKeys.attention(selectedCompanyId!), "queue", queueKey],
+    queryFn: () => attentionApi.list(selectedCompanyId!, { queue: queueKey, all: true }),
+    enabled: !!selectedCompanyId && !!queueKey,
+    refetchOnWindowFocus: true,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+  const { data: session } = useQuery({
+    queryKey: queryKeys.auth.session,
+    queryFn: () => authApi.getSession(),
+  });
+  const currentUserId = session?.user?.id ?? session?.session?.userId ?? null;
+
+  const agentMap = useMemo(() => {
+    const map = new Map<string, Agent>();
+    for (const agent of agents ?? []) map.set(agent.id, agent);
+    return map;
+  }, [agents]);
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Decisions", href: "/decisions" }, { label: queue?.title ?? queueKey }]);
+  }, [setBreadcrumbs, queue?.title, queueKey]);
+
+  const items = useMemo(
+    () => (feed?.items ?? []).filter((item) => !(item.dismissal?.isActive ?? false)),
+    [feed],
+  );
+
+  const invalidate = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.attention(selectedCompanyId!) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.decisionQueues.list(selectedCompanyId!) });
+  };
+
+  const toggleSeedRules = useMutation({
+    mutationFn: (enabled: boolean) =>
+      decisionQueuesApi.update(selectedCompanyId!, queueKey, { seedRulesEnabled: enabled }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: queryKeys.decisionQueues.list(selectedCompanyId!) }),
+    onError: (err) =>
+      pushToast({
+        title: "Could not update seeding",
+        body: err instanceof Error ? err.message : "Please try again.",
+        tone: "error",
+      }),
+  });
+
+  if (!selectedCompanyId) {
+    return <p className="text-sm text-muted-foreground">Select a company first.</p>;
+  }
+  if (isLoading) {
+    return <PageSkeleton variant="approvals" />;
+  }
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="min-w-0">
+          <h1 className="text-xl font-bold">{queue?.title ?? queueKey}</h1>
+          {queue?.description && <p className="mt-0.5 text-sm text-muted-foreground">{queue.description}</p>}
+        </div>
+      </div>
+
+      <DecisionQueueRail companyId={selectedCompanyId} activeQueueKey={queueKey} />
+
+      {queue && queue.seedRules.length > 0 && (
+        <SeedRulesCard
+          enabled={queue.seedRulesEnabled}
+          rules={queue.seedRules.map((rule) => rule.description)}
+          pending={toggleSeedRules.isPending}
+          onToggle={() => toggleSeedRules.mutate(!queue.seedRulesEnabled)}
+        />
+      )}
+
+      {error && <p className="text-sm text-destructive">{(error as Error).message}</p>}
+
+      {items.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-border py-14 text-center">
+          <p className="text-sm font-medium text-foreground">This queue is empty.</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Decisions land here when they match the queue's rules or an agent adds them.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {items.map((item) => (
+            <QueueItemRow
+              key={item.id}
+              item={item}
+              companyId={selectedCompanyId}
+              queueKey={queueKey}
+              agentMap={agentMap}
+              agents={agents}
+              currentUserId={currentUserId}
+              expanded={expandedId === item.id}
+              onToggleExpand={(next) => setExpandedId((prev) => (prev === next.id ? null : next.id))}
+              onDismiss={(next) => dismiss(next.dismissalKey)}
+              onSnooze={(next, until) => snooze(next.dismissalKey, until)}
+              onExcluded={invalidate}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SeedRulesCard({
+  enabled,
+  rules,
+  pending,
+  onToggle,
+}: {
+  enabled: boolean;
+  rules: string[];
+  pending: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div className="rounded-xl border border-border bg-muted/20 p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 items-start gap-2">
+          <Settings2 className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+          <div className="min-w-0">
+            <p className="text-sm font-medium text-foreground">Auto-seeding {enabled ? "on" : "off"}</p>
+            <ul className="mt-1 space-y-0.5">
+              {rules.map((rule) => (
+                <li key={rule} className="flex items-start gap-1.5 text-xs text-muted-foreground">
+                  <Check className="mt-0.5 h-3 w-3 shrink-0" />
+                  {rule}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <Button type="button" variant="outline" size="xs" className="h-7 shrink-0" disabled={pending} onClick={onToggle}>
+          {pending && <Loader2 className="h-3 w-3 animate-spin" />}
+          {enabled ? "Disable" : "Enable"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function QueueItemRow({
+  item,
+  companyId,
+  queueKey,
+  agentMap,
+  agents,
+  currentUserId,
+  expanded,
+  onToggleExpand,
+  onDismiss,
+  onSnooze,
+  onExcluded,
+}: {
+  item: AttentionItem;
+  companyId: string;
+  queueKey: string;
+  agentMap: Map<string, Agent>;
+  agents: Agent[] | undefined;
+  currentUserId: string | null;
+  expanded: boolean;
+  onToggleExpand: (item: AttentionItem) => void;
+  onDismiss: (item: AttentionItem) => void;
+  onSnooze: (item: AttentionItem, snoozedUntil: string) => void;
+  onExcluded: () => void;
+}) {
+  const { pushToast } = useToastActions();
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState("");
+  const exclude = useMutation({
+    mutationFn: async () => {
+      await decisionQueuesApi.removeItem(
+        companyId,
+        queueKey,
+        item.sourceKind,
+        item.subject.id,
+        reason.trim() || undefined,
+      );
+    },
+    onSuccess: () => {
+      setOpen(false);
+      setReason("");
+      pushToast({ title: "Removed from queue", body: item.subject.title ?? undefined, tone: "info" });
+      onExcluded();
+    },
+    onError: (err) =>
+      pushToast({
+        title: "Could not exclude",
+        body: err instanceof Error ? err.message : "Please try again.",
+        tone: "error",
+      }),
+  });
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-end px-1">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="ghost" size="xs" className="h-7 gap-1 text-muted-foreground">
+              <X className="h-3.5 w-3.5" />
+              Exclude
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-64 space-y-2 p-3">
+            <p className="text-xs font-medium text-foreground">Remove from this queue</p>
+            <textarea
+              value={reason}
+              onChange={(event) => setReason(event.target.value)}
+              placeholder="Reason (optional)…"
+              className="min-h-16 w-full rounded-sm border border-border bg-background px-2 py-1 text-xs"
+            />
+            <div className="flex justify-end gap-1">
+              <Button type="button" variant="ghost" size="xs" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size="xs"
+                className={cn(exclude.isPending && "opacity-80")}
+                disabled={exclude.isPending}
+                onClick={() => exclude.mutate()}
+              >
+                {exclude.isPending && <Loader2 className="h-3 w-3 animate-spin" />}
+                Exclude
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <AttentionQueueRow
+        item={item}
+        companyId={companyId}
+        expanded={expanded}
+        onToggleExpand={onToggleExpand}
+        onDismiss={onDismiss}
+        onSnooze={onSnooze}
+        agentMap={agentMap}
+        agents={agents}
+        showTriage
+        currentUserId={currentUserId}
+      />
+    </div>
+  );
+}

ui/src/pages/WhatNeedsMe.tsx

@@ -1,8 +1,8 @@
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { ArrowUpDown, Check, CheckCircle2, GraduationCap, Inbox, Layers, ListFilter } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ArrowUpDown, Check, CheckCircle2, GraduationCap, Inbox, Layers, ListFilter, Loader2, Sun } from "lucide-react";
 import type { Agent, AttentionItem, AttentionSubject } from "@paperclipai/shared";
-import { useNavigate } from "@/lib/router";
+import { useNavigate, useSearchParams } from "@/lib/router";
 import { attentionApi } from "../api/attention";
 import { agentsApi } from "../api/agents";
 import { authApi } from "../api/auth";
@@ -13,8 +13,12 @@ import { useToastActions } from "../context/ToastContext";
 import { useInboxDismissals } from "../hooks/useInboxBadge";
 import { queryKeys } from "../lib/queryKeys";
 import {
+  ATTENTION_AGING_DAYS,
   ATTENTION_GROUP_BY_OPTIONS,
   ATTENTION_SORT_OPTIONS,
+  attentionDecideOrder,
+  attentionIdleDays,
+  attentionIsAging,
   buildAttentionFilterOptions,
   countActiveAttentionFilters,
   defaultAttentionFilterState,
@@ -26,22 +30,29 @@ import {
   loadAttentionSortOrder,
   loadCollapsedAttentionGroupKeys,
   NO_GROUP_SENTINEL,
+  partitionDecideNow,
   planAttentionRenderRows,
+  resolveAttentionDateRange,
   saveAttentionFilters,
   saveAttentionGroupBy,
   saveAttentionSortOrder,
   saveCollapsedAttentionGroupKeys,
   sortAttentionItems,
   sourceMeta,
+  type AttentionDateRangeId,
   type AttentionFilterState,
+  type AttentionGroup,
   type AttentionGroupBy,
   type AttentionSortOrder,
 } from "../lib/attention";
+import { decisionQueuesApi } from "../api/decisionQueues";
 import { decisionTrainingHref } from "../lib/decisionTraining";
 import { cn } from "../lib/utils";
 import { hasBlockingShortcutDialog, resolveAttentionQueueKeyAction } from "../lib/keyboardShortcuts";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { AttentionQueueRow } from "../components/AttentionQueueRow";
+import { DecisionQueueRail } from "../components/DecisionQueueRail";
+import { DecisionDateChips, type AttentionCustomRange } from "../components/DecisionDateChips";
 import { DecisionResolver } from "../components/DecisionResolver";
 import { DecisionTrainingDrawer } from "../components/DecisionTrainingDrawer";
 import { IssueGroupHeader } from "../components/IssueGroupHeader";
@@ -116,9 +127,19 @@ export function WhatNeedsMe() {
   const [collapsedGroupKeys, setCollapsedGroupKeys] = useState<Set<string>>(() => new Set());
   const [snoozedOpen, setSnoozedOpen] = useState(false);
   const [dismissedOpen, setDismissedOpen] = useState(false);
+  const [agingOpen, setAgingOpen] = useState(false);
   const [decidedOpen, setDecidedOpen] = useState(false);
   const [expiredOpen, setExpiredOpen] = useState(false);
 
+  // Date-range chips (PAP-16032 §4.2) — resolve to server-side activity bounds.
+  const [dateRange, setDateRange] = useState<AttentionDateRangeId>("all");
+  const [customRange, setCustomRange] = useState<AttentionCustomRange>({ from: null, to: null });
+
+  // `?decisionId=` deep link (PAP-16032 §4.7) — focus/expand the referenced card.
+  const [searchParams, setSearchParams] = useSearchParams();
+  const deepLinkDecisionId = searchParams.get("decisionId");
+  const [deepLinkConsumed, setDeepLinkConsumed] = useState(false);
+
   // Optimistic hide/restore. Reset whenever a fresh feed lands (server truth).
   const [pendingHide, setPendingHide] = useState<Set<string>>(() => new Set());
   const [pendingRestore, setPendingRestore] = useState<Set<string>>(() => new Set());
@@ -126,6 +147,15 @@ export function WhatNeedsMe() {
   const { dismiss, snooze, restore } = useInboxDismissals(selectedCompanyId);
   const { pushToast } = useToastActions();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  // Date chips resolve to server-side activity bounds. Anchored to start-of-day,
+  // so the resolved ISO strings are stable across renders within the same day —
+  // safe to key the feed query on without thrashing.
+  const activityBounds = useMemo(
+    () => resolveAttentionDateRange(dateRange, Date.now(), customRange),
+    [dateRange, customRange],
+  );
 
   useEffect(() => {
     setBreadcrumbs([{ label: "Decisions" }]);
@@ -145,8 +175,13 @@ export function WhatNeedsMe() {
     // Distinct from the sidebar badge's `queryKeys.attention` so dismissed rows
     // (needed for the curtains) never inflate the badge count. Invalidating the
     // `["attention", companyId]` prefix still cascades to this query.
-    queryKey: [...queryKeys.attention(selectedCompanyId!), "with-dismissed"],
-    queryFn: () => attentionApi.list(selectedCompanyId!, { includeDismissed: true }),
+    queryKey: [
+      ...queryKeys.attention(selectedCompanyId!),
+      "with-dismissed",
+      activityBounds.activitySince ?? null,
+      activityBounds.activityUntil ?? null,
+    ],
+    queryFn: () => attentionApi.list(selectedCompanyId!, { includeDismissed: true, ...activityBounds }),
     enabled: !!selectedCompanyId,
     refetchOnWindowFocus: true,
   });
@@ -199,6 +234,19 @@ export function WhatNeedsMe() {
       ),
     [allItems, pendingHide, pendingRestore],
   );
+
+  // The server's clock at feed time — used for the decide-by split and the aging
+  // idle labels so they match `decideNowCount` and the sidebar badge exactly,
+  // and stay stable across renders (Date.now() only as a pre-load fallback).
+  const now = useMemo(
+    () => (feed?.generatedAt ? new Date(feed.generatedAt).getTime() : Date.now()),
+    [feed?.generatedAt],
+  );
+
+  // Aging shelf (§4.4): items the server flags as idle past retention leave the
+  // live desk for their own curtain, so today's desk shows only fresh decisions.
+  const agingItems = useMemo(() => activeItems.filter(attentionIsAging), [activeItems]);
+  const deskItems = useMemo(() => activeItems.filter((item) => !attentionIsAging(item)), [activeItems]);
   const snoozedItems = useMemo(
     () =>
       allItems.filter(
@@ -216,14 +264,37 @@ export function WhatNeedsMe() {
     [allItems, pendingRestore],
   );
 
-  const filterOptions = useMemo(() => buildAttentionFilterOptions(activeItems), [activeItems]);
+  const filterOptions = useMemo(() => buildAttentionFilterOptions(deskItems), [deskItems]);
 
-  // Filter → sort → group, all client-side so switching re-buckets without a refetch.
-  const groups = useMemo(() => {
-    const filtered = filterAttentionItems(activeItems, filters);
+  // Filter → sort → group, all client-side so switching re-buckets without a
+  // refetch. In the default (ungrouped) view the desk splits into the two §4.3
+  // shelves — "Decide now" (due today / overdue) and "Can wait" — ordered by
+  // decide-by; any explicit group-by keeps the Inbox-style activity grouping.
+  const groups = useMemo<AttentionGroup[]>(() => {
+    const filtered = filterAttentionItems(deskItems, filters);
+    if (groupBy === "none") {
+      const ordered = [...filtered].sort((a, b) => {
+        const [aBucket, aDeadline] = attentionDecideOrder(a, now);
+        const [bBucket, bDeadline] = attentionDecideOrder(b, now);
+        if (aBucket !== bBucket) return aBucket - bBucket;
+        if (aDeadline !== bDeadline) return aDeadline - bDeadline;
+        return a.rank - b.rank;
+      });
+      const { decideNow, canWait } = partitionDecideNow(ordered, now);
+      const shelves: AttentionGroup[] = [];
+      if (decideNow.length > 0) shelves.push({ key: "desk:decide-now", label: "Decide now", items: decideNow });
+      if (canWait.length > 0) shelves.push({ key: "desk:can-wait", label: "Can wait", items: canWait });
+      return shelves;
+    }
     const sorted = sortAttentionItems(filtered, sortOrder);
     return groupAttentionItems(sorted, groupBy);
-  }, [activeItems, filters, sortOrder, groupBy]);
+  }, [deskItems, filters, sortOrder, groupBy, now]);
+
+  // "Today is clear" — the desk has decisions but none are due today.
+  const deskClearToday = useMemo(
+    () => groupBy === "none" && deskItems.length > 0 && !groups.some((group) => group.key === "desk:decide-now"),
+    [groupBy, deskItems, groups],
+  );
 
   const visibleCount = useMemo(() => groups.reduce((sum, group) => sum + group.items.length, 0), [groups]);
   const keyboardItems = useMemo(
@@ -317,14 +388,39 @@ export function WhatNeedsMe() {
     document.getElementById(`attention-row-${selectedAttentionId}`)?.scrollIntoView({ block: "nearest" });
   }, [selectedAttentionId]);
 
+  // `?decisionId=` deep link (§4.7): focus and expand the referenced decision
+  // card once the feed lands, then drop the param so a later manual collapse is
+  // not re-forced on the next refetch. Wins over the generic auto-expand below.
+  useEffect(() => {
+    if (deepLinkConsumed || !deepLinkDecisionId || allItems.length === 0) return;
+    const target = allItems.find(
+      (item) => item.sourceKind === "decision" && item.subject.id === deepLinkDecisionId,
+    );
+    setDeepLinkConsumed(true);
+    setAutoExpandDone(true);
+    if (target) {
+      setExpandedId(target.id);
+      setSelectedAttentionId(target.id);
+      setSelectionFromKeyboard(true);
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.delete("decisionId");
+          return next;
+        },
+        { replace: true },
+      );
+    }
+  }, [allItems, deepLinkConsumed, deepLinkDecisionId, setSearchParams]);
+
   // Auto-expand the topmost inline-capable decision, once.
   useEffect(() => {
-    if (autoExpandDone || activeItems.length === 0) return;
-    const sorted = sortAttentionItems(activeItems, sortOrder);
+    if (autoExpandDone || deskItems.length === 0) return;
+    const sorted = sortAttentionItems(deskItems, sortOrder);
     const topInline = sorted.find((item) => isInlineResolvable(item));
     if (topInline) setExpandedId(topInline.id);
     setAutoExpandDone(true);
-  }, [activeItems, autoExpandDone, sortOrder]);
+  }, [deskItems, autoExpandDone, sortOrder]);
 
   const updateGroupBy = (next: AttentionGroupBy) => {
     setGroupBy(next);
@@ -572,6 +668,20 @@ export function WhatNeedsMe() {
         </div>
       </div>
 
+      {/* Queue quicklinks + date-range chips (§4.1–§4.2). The rail self-hides
+          when the company has no queues; the chips filter the desk server-side. */}
+      <div className="space-y-2">
+        <DecisionQueueRail companyId={selectedCompanyId} activeQueueKey={null} />
+        <DecisionDateChips
+          value={dateRange}
+          custom={customRange}
+          onChange={(value, custom) => {
+            setDateRange(value);
+            setCustomRange(custom);
+          }}
+        />
+      </div>
+
       {error && <p className="text-sm text-destructive">{(error as Error).message}</p>}
 
       {!hasAnything ? (
@@ -579,9 +689,11 @@ export function WhatNeedsMe() {
       ) : (
         <div className="space-y-4">
           {visibleCount === 0 ? (
-            <CaughtUpNote filtered={activeItems.length > 0} />
+            <CaughtUpNote filtered={deskItems.length > 0} />
           ) : (
-            groups.map((group) => {
+            <>
+              {deskClearToday && <TodayClearNote />}
+              {groups.map((group) => {
               const groupLabel = group.label;
               const collapsed = groupLabel !== null && collapsedGroupKeys.has(group.key);
               return (
@@ -638,6 +750,8 @@ export function WhatNeedsMe() {
                                   onSnooze={handleSnooze}
                                   onTrain={handleTrain}
                                   agentMap={agentMap}
+                                  agents={agents}
+                                  showTriage
                                   currentUserId={currentUserId}
                                   selected={selectionFromKeyboard && selectedAttentionId === item.id}
                                 />
@@ -650,7 +764,8 @@ export function WhatNeedsMe() {
                   )}
                 </section>
               );
-            })
+              })}
+            </>
           )}
 
           {snoozedItems.length > 0 && (
@@ -701,6 +816,35 @@ export function WhatNeedsMe() {
             </Curtain>
           )}
 
+          {agingItems.length > 0 && (
+            <Curtain
+              label="Aging"
+              count={agingItems.length}
+              open={agingOpen}
+              onToggle={() => setAgingOpen((prev) => !prev)}
+            >
+              <p className="text-xs text-muted-foreground">
+                Idle past {ATTENTION_AGING_DAYS} days — kept off the desk. Keep any you still want surfaced.
+              </p>
+              {agingItems.map((item) => (
+                <AgingItemRow
+                  key={item.id}
+                  item={item}
+                  companyId={selectedCompanyId}
+                  now={now}
+                  agentMap={agentMap}
+                  agents={agents}
+                  currentUserId={currentUserId}
+                  expanded={expandedId === item.id}
+                  onToggleExpand={handleToggleExpand}
+                  onDismiss={handleDismiss}
+                  onSnooze={handleSnooze}
+                  onTrain={handleTrain}
+                />
+              ))}
+            </Curtain>
+          )}
+
         </div>
       )}
 
@@ -964,6 +1108,106 @@ function Curtain({
   );
 }
 
+/**
+ * Slim banner shown at the top of the desk when there are decisions but none
+ * are due today — the "Decide now" shelf is empty, so we say so rather than
+ * leading with a bare "Can wait" header (§4.3 "empty state when today is clear").
+ */
+function TodayClearNote() {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-muted/20 px-4 py-3">
+      <Sun className="h-4 w-4 shrink-0 text-green-500" />
+      <p className="text-sm text-foreground">
+        Nothing needs a decision <span className="font-medium">today</span>. Everything below can wait.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * An aging-shelf row (§4.4): the standard card, prefaced by an idle-duration
+ * label and a "Keep on desk" affordance that clears the shelf flag server-side
+ * (P1 retention `keep`). Archival/sweeper mechanics are P5 — this is the split
+ * plus the Keep stub only.
+ */
+function AgingItemRow({
+  item,
+  companyId,
+  now,
+  agentMap,
+  agents,
+  currentUserId,
+  expanded,
+  onToggleExpand,
+  onDismiss,
+  onSnooze,
+  onTrain,
+}: {
+  item: AttentionItem;
+  companyId: string;
+  now: number;
+  agentMap: Map<string, Agent>;
+  agents: Agent[] | undefined;
+  currentUserId: string | null;
+  expanded: boolean;
+  onToggleExpand: (item: AttentionItem) => void;
+  onDismiss: (item: AttentionItem) => void;
+  onSnooze: (item: AttentionItem, snoozedUntil: string) => void;
+  onTrain: (item: AttentionItem) => void;
+}) {
+  const queryClient = useQueryClient();
+  const { pushToast } = useToastActions();
+  const idleDays = attentionIdleDays(item, now);
+  const keep = useMutation({
+    mutationFn: () => decisionQueuesApi.setKeep(companyId, item.sourceKind, item.subject.id, true),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.attention(companyId) });
+      pushToast({ title: "Kept on desk", body: item.subject.title ?? undefined, tone: "success" });
+    },
+    onError: (error) =>
+      pushToast({
+        title: "Could not keep this decision",
+        body: error instanceof Error ? error.message : "Please try again.",
+        tone: "error",
+      }),
+  });
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-2 px-1">
+        <span className="text-(length:--text-nano) text-muted-foreground">
+          Idle {idleDays} {idleDays === 1 ? "day" : "days"}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="xs"
+          className="h-7 gap-1"
+          disabled={keep.isPending || item.keep}
+          onClick={() => keep.mutate()}
+        >
+          {keep.isPending && <Loader2 className="h-3 w-3 animate-spin" />}
+          <Sun className="h-3.5 w-3.5" />
+          {item.keep ? "Kept" : "Keep on desk"}
+        </Button>
+      </div>
+      <AttentionQueueRow
+        item={item}
+        companyId={companyId}
+        expanded={expanded}
+        onToggleExpand={onToggleExpand}
+        onDismiss={onDismiss}
+        onSnooze={onSnooze}
+        onTrain={onTrain}
+        agentMap={agentMap}
+        agents={agents}
+        showTriage
+        currentUserId={currentUserId}
+      />
+    </div>
+  );
+}
+
 function CaughtUpNote({ filtered }: { filtered: boolean }) {
   return (
     <div className="rounded-xl border border-dashed border-border py-10 text-center">

ui/storybook/stories/decisions-desk.stories.tsx

@@ -0,0 +1,470 @@
+import { useMemo, type ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useQueryClient } from "@tanstack/react-query";
+import type {
+  Agent,
+  AttentionFeed,
+  AttentionItem,
+  AttentionSeverity,
+  AttentionSourceKind,
+} from "@paperclipai/shared";
+import { Routes, Route } from "@/lib/router";
+import { WhatNeedsMe } from "@/pages/WhatNeedsMe";
+import { DecisionQueuePage } from "@/pages/DecisionQueuePage";
+import { AttentionQueueRow } from "@/components/AttentionQueueRow";
+import type { DecisionQueueDto } from "@/api/decisionQueues";
+import { queryKeys } from "@/lib/queryKeys";
+
+// The company id the Storybook providers select (see .storybook/preview.tsx).
+const companyId = "company-storybook";
+
+// A fixed clock so the decide-by split ("today" vs "this week") and the aging
+// "idle N days" labels are deterministic across renders/screenshots.
+const NOW = Date.parse("2026-08-02T15:00:00Z");
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+const iso = (ms: number) => new Date(ms).toISOString();
+
+// --- fixture builders -------------------------------------------------------
+
+/** The board operator, so `route to agent` mentions have someone to hand to. */
+const AGENTS: Agent[] = [
+  { id: "agent-prioritizer", name: "Prioritizer", status: "idle" },
+  { id: "agent-coder", name: "ClaudeCoder", status: "working" },
+  { id: "agent-qa", name: "QA", status: "idle" },
+] as unknown as Agent[];
+
+function attribution(agentName: string) {
+  return {
+    type: "agent" as const,
+    agentId: "agent-prioritizer",
+    agentName,
+    userId: null,
+    runId: "run-prio-1",
+    responsibleUserId: null,
+    updatedAt: iso(NOW - 2 * HOUR),
+  };
+}
+
+function item(
+  id: string,
+  sourceKind: AttentionSourceKind,
+  severity: AttentionSeverity,
+  title: string,
+  whyNow: string,
+  overrides: Partial<AttentionItem> = {},
+): AttentionItem {
+  const base: AttentionItem = {
+    id,
+    companyId,
+    sourceKind,
+    subject: {
+      kind: "issue",
+      id: `${id}-subject`,
+      companyId,
+      title,
+      identifier: null,
+      status: "pending",
+      href: "/PAP/issues/PAP-1000",
+      metadata: {},
+    },
+    whyNow,
+    decisionVerbs: [
+      { id: "approve", label: "Approve", description: null },
+      { id: "reject", label: "Reject", description: null },
+    ],
+    inlineResolvable: false,
+    entryRule: "",
+    exitRule: "",
+    dedupKey: `${id}-dedup`,
+    dismissalKey: `attention:${id}-dedup`,
+    dismissal: null,
+    severity,
+    rank: 0,
+    activityAt: iso(NOW - HOUR),
+    createdAt: iso(NOW - 3 * DAY),
+    updatedAt: iso(NOW - HOUR),
+    relatedIssue: {
+      kind: "issue",
+      id: "issue-1000",
+      companyId,
+      title: "Ship the decisions desk",
+      identifier: "PAP-1000",
+      status: "in_progress",
+      href: "/PAP/issues/PAP-1000",
+      metadata: {},
+    },
+    project: null,
+    workspace: null,
+    expiresAt: null,
+    ruleKey: null,
+    originAgentName: null,
+    queues: [],
+    shelf: false,
+    retentionDays: 30,
+    keep: false,
+    archivedAt: null,
+    retentionVersion: 1,
+    decideBy: null,
+    decideByAttribution: null,
+    snoozedUntil: null,
+    detail: null,
+    trainingExampleId: null,
+  };
+  return { ...base, ...overrides };
+}
+
+/** Approval-shaped item (symmetric accept/reject → bulk-eligible on a queue). */
+function approval(id: string, title: string, whyNow: string, overrides: Partial<AttentionItem> = {}) {
+  return item(id, "approval", "high", title, whyNow, {
+    inlineResolvable: true,
+    subject: {
+      kind: "approval",
+      id: `${id}-approval`,
+      companyId,
+      title,
+      identifier: null,
+      status: "pending",
+      href: `/PAP/approvals/${id}`,
+      metadata: { type: "merge_pr" },
+    },
+    decisionVerbs: [
+      { id: "approve", label: "Approve", description: null },
+      { id: "reject", label: "Reject", description: null },
+    ],
+    ...overrides,
+  });
+}
+
+function feed(items: AttentionItem[]): AttentionFeed {
+  const decideNowCount = items.filter(
+    (it) => it.decideBy === "today" && !it.shelf,
+  ).length;
+  return {
+    companyId,
+    generatedAt: iso(NOW),
+    totalCount: items.length,
+    decideNowCount,
+    nextCursor: null,
+    countsBySourceKind: {} as AttentionFeed["countsBySourceKind"],
+    items,
+  };
+}
+
+const PRS_QUEUE: DecisionQueueDto = {
+  id: "queue-prs",
+  companyId,
+  key: "prs",
+  title: "PRs to review",
+  description: "Pull requests waiting on a merge decision.",
+  createdByType: "agent",
+  createdByAgentId: "agent-prioritizer",
+  createdByUserId: null,
+  createdByRunId: "run-1",
+  retentionDays: 30,
+  seedRules: [
+    {
+      key: "pr-work-product",
+      description: "Issues that reach in-review with a pull-request work product",
+      signal: "issue_has_pull_request_work_product",
+    },
+  ],
+  seedRulesEnabled: true,
+  itemCount: 4,
+  createdAt: iso(NOW - 9 * DAY),
+  updatedAt: iso(NOW - 20 * 60 * 1000),
+};
+
+const QUEUES: DecisionQueueDto[] = [
+  PRS_QUEUE,
+  {
+    ...PRS_QUEUE,
+    id: "queue-plans",
+    key: "plan-approvals",
+    title: "Plan approvals",
+    description: "Plan documents awaiting board sign-off.",
+    seedRules: [
+      {
+        key: "plan-confirmation",
+        description: "Plan-document confirmations opened on an issue",
+        signal: "plan_document_confirmation",
+      },
+    ],
+    itemCount: 2,
+    updatedAt: iso(NOW - 3 * HOUR),
+  },
+  {
+    ...PRS_QUEUE,
+    id: "queue-questions",
+    key: "questions",
+    title: "Questions",
+    description: "Open questions from agents that need an answer.",
+    seedRules: [
+      {
+        key: "ask-user-questions",
+        description: "Agents asking the board a structured question",
+        signal: "ask_user_questions",
+      },
+    ],
+    seedRulesEnabled: false,
+    itemCount: 1,
+    updatedAt: iso(NOW - 30 * HOUR),
+  },
+];
+
+const PRS_QUEUE_REF = { key: "prs", title: "PRs to review" };
+
+// --- desk items -------------------------------------------------------------
+
+const DESK_ITEMS: AttentionItem[] = [
+  approval("pr-1", "Merge PR #10664: decisions desk data layer", "PR passed CI and is waiting on a merge decision.", {
+    decideBy: "today",
+    decideByAttribution: attribution("Prioritizer"),
+    queues: [PRS_QUEUE_REF],
+    expiresAt: iso(NOW + 5 * HOUR),
+    activityAt: iso(NOW - 40 * 60 * 1000),
+    project: { id: "proj-desk", name: "Decisions", urlKey: "decisions", color: "#7c3aed", icon: "layers" },
+  }),
+  item(
+    "conf-1",
+    "issue_thread_interaction",
+    "high",
+    "Approve plan: heartbeat.ts split",
+    "A plan is awaiting your approval before children are created.",
+    {
+      inlineResolvable: true,
+      decideBy: "today",
+      decideByAttribution: attribution("Prioritizer"),
+      queues: [{ key: "plan-approvals", title: "Plan approvals" }],
+      subject: {
+        kind: "interaction",
+        id: "intx-plan",
+        companyId,
+        title: "Approve plan: heartbeat.ts split",
+        identifier: null,
+        status: "pending",
+        href: "/PAP/issues/PAP-1000#plan",
+        metadata: { kind: "request_confirmation", issueId: "issue-1000" },
+      },
+      decisionVerbs: [
+        { id: "approve", label: "Approve plan", description: null },
+        { id: "request_changes", label: "Request changes", description: null },
+      ],
+      activityAt: iso(NOW - 90 * 60 * 1000),
+      detail: { kind: "plan_approval", issueTitle: "heartbeat split", planTitle: "Coverage-first, 5 phases", summaryExcerpt: null, images: [] },
+    },
+  ),
+  approval("pr-2", "Merge PR #10651: prioritized attention feed", "Second review approved; ready to merge.", {
+    decideBy: "this_week",
+    decideByAttribution: attribution("Prioritizer"),
+    queues: [PRS_QUEUE_REF],
+    activityAt: iso(NOW - 5 * HOUR),
+  }),
+  item(
+    "review-1",
+    "review",
+    "medium",
+    "Design review: settings redesign",
+    "In-review issue is waiting on a human reviewer.",
+    {
+      decideBy: "whenever",
+      activityAt: iso(NOW - 26 * HOUR),
+      project: { id: "proj-beta", name: "Beta", urlKey: "beta", color: "#0f766e", icon: "rocket" },
+    },
+  ),
+  item(
+    "budget-1",
+    "budget_alert",
+    "low",
+    "Company budget crossed 85%",
+    "Budget crossed the 85% threshold.",
+    { relatedIssue: null, inlineResolvable: false, activityAt: iso(NOW - 2 * DAY) },
+  ),
+];
+
+// The desk when nothing is due today — every item is deferred ("whenever"), so
+// the "Decide now" shelf is empty and the desk shows the "today is clear" note.
+const CLEAR_TODAY_ITEMS: AttentionItem[] = DESK_ITEMS.filter((it) => it.decideBy !== "today").map((it) => ({
+  ...it,
+  decideBy: "whenever",
+  decideByAttribution: null,
+}));
+
+// Aging shelf: items idle past the 30-day retention leave the desk. The server
+// sets `shelf: true`; here we mirror that plus a couple of live desk items so
+// the shelf renders alongside a populated desk.
+const AGING_ITEMS: AttentionItem[] = [
+  ...DESK_ITEMS.slice(0, 2),
+  item("aging-1", "review", "low", "Old PR review: legacy exporter", "No activity in over a month.", {
+    shelf: true,
+    decideBy: null,
+    activityAt: iso(NOW - 47 * DAY),
+    relatedIssue: {
+      kind: "issue",
+      id: "issue-legacy",
+      companyId,
+      title: "Legacy exporter cleanup",
+      identifier: "PAP-812",
+      status: "backlog",
+      href: "/PAP/issues/PAP-812",
+      metadata: {},
+    },
+  }),
+  item("aging-2", "budget_alert", "low", "Budget alert from last quarter", "Idle 63 days.", {
+    shelf: true,
+    decideBy: null,
+    relatedIssue: null,
+    inlineResolvable: false,
+    activityAt: iso(NOW - 63 * DAY),
+  }),
+];
+
+// A single fully-triaged card, to show the per-card triage strip (wireframe
+// screen 3) with every control populated: decide-by set + attribution, queue
+// membership chip, an expiry countdown and the route-to-agent picker.
+const TRIAGE_ITEM = approval(
+  "triage-1",
+  "Merge PR #10664: decisions desk data layer",
+  "PR passed CI and is waiting on a merge decision.",
+  {
+    decideBy: "today",
+    decideByAttribution: attribution("Prioritizer"),
+    queues: [PRS_QUEUE_REF, { key: "plan-approvals", title: "Plan approvals" }],
+    expiresAt: iso(NOW + 4 * HOUR),
+    project: { id: "proj-desk", name: "Decisions", urlKey: "decisions", color: "#7c3aed", icon: "layers" },
+  },
+);
+
+// --- seeding wrapper --------------------------------------------------------
+
+/**
+ * Seed the react-query cache the desk/queue pages read from. The Storybook
+ * QueryClient uses `staleTime: Infinity` + `retry: false`, so seeded queries
+ * render immediately and never hit the network — the pages run their real code
+ * paths against fixture data.
+ */
+function PrimeDeskFixtures({
+  items,
+  queueItems,
+  children,
+}: {
+  items?: AttentionItem[];
+  queueItems?: AttentionItem[];
+  children: ReactNode;
+}) {
+  const queryClient = useQueryClient();
+  useMemo(() => {
+    queryClient.setQueryData(queryKeys.decisionQueues.list(companyId), QUEUES);
+    queryClient.setQueryData(queryKeys.agents.list(companyId), AGENTS);
+    if (items) {
+      queryClient.setQueryData(
+        [...queryKeys.attention(companyId), "with-dismissed", null, null],
+        feed(items),
+      );
+    }
+    if (queueItems) {
+      queryClient.setQueryData(
+        [...queryKeys.attention(companyId), "queue", "prs"],
+        feed(queueItems),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryClient]);
+  return <>{children}</>;
+}
+
+const meta: Meta = {
+  title: "Pages/Decisions Desk",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/**
+ * Screen 1 — today's desk. Queue rail + date chips on top, then the desk split
+ * into "Decide now" (due today) and "Can wait", with decide-by + provenance
+ * ("set by Prioritizer") on the cards.
+ */
+export const TodaysDesk: Story = {
+  render: () => (
+    <PrimeDeskFixtures items={DESK_ITEMS}>
+      <div className="p-6">
+        <WhatNeedsMe />
+      </div>
+    </PrimeDeskFixtures>
+  ),
+};
+
+/** Screen 1 variant — the desk when today is clear (nothing due today). */
+export const DeskClearToday: Story = {
+  render: () => (
+    <PrimeDeskFixtures items={CLEAR_TODAY_ITEMS}>
+      <div className="p-6">
+        <WhatNeedsMe />
+      </div>
+    </PrimeDeskFixtures>
+  ),
+};
+
+/** Screen 1 variant — the aging shelf; the "Aging" curtain holds idle items. */
+export const AgingShelf: Story = {
+  render: () => (
+    <PrimeDeskFixtures items={AGING_ITEMS}>
+      <div className="p-6">
+        <WhatNeedsMe />
+      </div>
+    </PrimeDeskFixtures>
+  ),
+};
+
+/**
+ * Screen 2 — a queue page. Homogeneous list where each source-native decision
+ * resolves per item (approve/reject on the card, plus Exclude-with-reason);
+ * the queue rail (active chip) and the seed-rules card with its enable/disable
+ * toggle sit above. Bulk accept/reject was pulled until a cross-domain
+ * exact-set transaction can preserve side effects atomically (see PAP-16032
+ * follow-up); screen 2 ships per-item-only for now.
+ */
+export const QueuePage: Story = {
+  render: () => (
+    <PrimeDeskFixtures
+      queueItems={[
+        approval("q-pr-1", "Merge PR #10664: decisions desk data layer", "CI green; ready to merge.", { queues: [PRS_QUEUE_REF] }),
+        approval("q-pr-2", "Merge PR #10651: prioritized attention feed", "Second review approved.", { queues: [PRS_QUEUE_REF] }),
+        approval("q-pr-3", "Merge PR #10636: quieter workspace-ready", "Reviewed and passing.", { queues: [PRS_QUEUE_REF] }),
+        approval("q-pr-4", "Merge PR #10623: inbox sort pinning", "Awaiting a merge decision.", { queues: [PRS_QUEUE_REF] }),
+      ]}
+    >
+      <div className="p-6">
+        <Routes location="/decisions/queues/prs">
+          <Route path="/decisions/queues/:key" element={<DecisionQueuePage />} />
+        </Routes>
+      </div>
+    </PrimeDeskFixtures>
+  ),
+};
+
+/**
+ * Screen 3 — the per-card triage strip. A single card, expanded, showing the
+ * decide-by control (with "set by Prioritizer"), queue chips + picker, snooze
+ * and route-to-agent, plus the read-only expiry countdown.
+ */
+export const CardTriageStrip: Story = {
+  render: () => (
+    <PrimeDeskFixtures>
+      <div className="max-w-3xl space-y-2 p-6">
+        <AttentionQueueRow
+          item={TRIAGE_ITEM}
+          companyId={companyId}
+          agents={AGENTS}
+          showTriage
+          expanded
+          onToggleExpand={() => {}}
+          onDismiss={() => {}}
+          onSnooze={() => {}}
+        />
+      </div>
+    </PrimeDeskFixtures>
+  ),
+};

ui/storybook/stories/what-needs-me.stories.tsx

@@ -82,6 +82,11 @@ function item(
     ruleKey: overrides.ruleKey ?? null,
     originAgentName: overrides.originAgentName ?? null,
     queues: overrides.queues ?? [],
+    shelf: overrides.shelf ?? false,
+    retentionDays: overrides.retentionDays ?? 30,
+    keep: overrides.keep ?? false,
+    archivedAt: overrides.archivedAt ?? null,
+    retentionVersion: overrides.retentionVersion ?? 1,
     decideBy: overrides.decideBy ?? null,
     decideByAttribution: overrides.decideByAttribution ?? null,
     snoozedUntil: overrides.snoozedUntil ?? null,