@lotics/ui 21.0.0 → 21.2.0

package/examples/tpl_record.tsx

@@ -15,6 +15,8 @@ import { Callout, CalloutText } from "@lotics/ui/callout";
 import { Inset } from "@lotics/ui/inset";
 import { Section, SectionHeading, SectionHeadingTitle, Subsection, SubsectionHeading, SubsectionHeadingTitle } from "@lotics/ui/section_heading";
 import { SectionStack, SubsectionStack } from "@lotics/ui/section_stack";
+import { Pipeline, PipelineActions, PipelineField, PipelineNote, PipelineStage } from "@lotics/ui/pipeline";
+import { TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { MenuButton } from "@lotics/ui/menu_button";
 import { Modal, ModalBody, ModalHeader } from "@lotics/ui/modal";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
@@ -28,15 +30,7 @@ import { Composer } from "@lotics/ui/composer";
 import { IconButton } from "@lotics/ui/icon_button";
 import { FileRows } from "@lotics/ui/file_rows";
 import { FileGrid } from "@lotics/ui/file_grid";
-import { CheckCircle } from "@lotics/ui/check_circle";
-import { ProgressBar } from "@lotics/ui/progress_bar";
-import { FilterChip } from "@lotics/ui/filter_chip";
-import { CaptureRow } from "@lotics/ui/capture_row";
-import { TaskActions, TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskSubRow, TaskTitle } from "@lotics/ui/task";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
-import { SuggestionChip } from "@lotics/ui/suggestion_chip";
-import { OptionList } from "@lotics/ui/option_list";
-import { MemberChip } from "@lotics/ui/member_chip";
 import { InlineStatic } from "@lotics/ui/inline_static";
 import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
@@ -93,7 +87,9 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 //                     groups + Classification (the right-input-per-field
 //                     showcase) + System ids. Always present, first in rail.
 // · Comments        — the discussion thread. When people collaborate here.
-// · Tasks           — the working checklist. Multi-step records with owners.
+// · Progress        — WHERE the record sits: the desks as a `Pipeline`, each
+//                     owning its own facts, the live one owning the act that
+//                     leaves it. Records that move between owners.
 // · Documents       — the INTAKE desk: files that ARRIVE + the ONE "Use AI"
 //                     fork (the Agents "Document desk" pattern — this template
 //                     is its worked example).
@@ -111,9 +107,10 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 //                     table ONCE (creates + links the sibling; Recall undoes).
 // · Danger zone     — destructive lifecycle. Always last.
 //
-// The lifecycle is the HANDOFF CHAIN — per-desk task checklists inform the
-// handoff CTA (never blocking), and the gate is the page's LAST block before
-// the closing `DangerZone`; there is no separate submit step.
+// The lifecycle is the HANDOFF CHAIN, and it reads in TWO places by design:
+// `Progress` carries the position and the act that changes it; `Handoff` near
+// the end carries the RESULT — what each handoff created, and when. There is no
+// separate submit step.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface Customer {
@@ -137,9 +134,9 @@ const KNOWN_CUSTOMERS: Customer[] = [
 
 const TAX_ID_RE = /^\d{10}(\d{3})?$/;
 
-// HANDOFF is a STAGE TRANSITION on the shared record — never a message or a
-// task. Each department owns its sections; the handoff CTA moves the record to
-// the next desk (spine + stage = handoff) — open tasks warn, they never block.
+// HANDOFF is a STAGE TRANSITION on the shared record — never a message. Each
+// department owns its sections; the handoff CTA moves the record to the next
+// desk, and it lives ON that desk's stage in the Progress pipeline.
 type Stage = "sales" | "operations" | "accounting" | "closed";
 type Desk = Exclude<Stage, "closed">;
 const DESKS: { key: Desk; label: string }[] = [
@@ -153,77 +150,15 @@ const STAGES: { key: Stage; label: string }[] = [
 ];
 const stageOf = (st: Stage) => STAGES.find((x) => x.key === st) ?? STAGES[0];
 
-// The handoff is MANAGED as tasks: each desk's checklist INFORMS its handoff
-// CTA (open tasks warn and carry over; the CTA never blocks) — actionable,
-// unlike a decorative progress strip.
-interface StageTask {
-  id: string;
-  label: string;
-  stage: Desk;
-  done: boolean;
-  assignee: string | null;
-  /** ISO date (`""` = no due). It hangs under the row as a named `TaskSubRow`
-   *  field, coloured by urgency (`tone`), press to edit. */
-  due: string;
-  /** The task's CHILD STEPS (`[]` = none). They render as a NESTED `TaskList`,
-   *  so a step is a task: give one a due date, a menu or children of its own and
-   *  it simply works. Collapsing is the app's call — render the list or don't. */
-  subtasks: { key: string; label: string; done: boolean }[];
+// How long the live desk has held the record — the PipelineStage meta line.
+// Prose, derived: the date itself is the stage's own editable field.
+function heldFor(since: string): string | undefined {
+  if (since === "") return undefined;
+  const days = Math.floor((Date.now() - new Date(since).getTime()) / 86_400_000);
+  if (!Number.isFinite(days) || days < 0) return undefined;
+  return days === 0 ? "Arrived today" : days === 1 ? "Here 1 day" : `Here ${days} days`;
 }
 
-// A due date N days from today — keeps the seeded urgency states (overdue / soon /
-// later) correct whenever the gallery is opened.
-const dueIn = (n: number): string => {
-  const d = new Date();
-  d.setDate(d.getDate() + n);
-  return d.toISOString().slice(0, 10);
-};
-// The urgency tone for a due date, fed to the cell's `tone`: red past due, amber within
-// 3 days, else muted — the date text itself is the signal (no separate dot). Done → muted.
-const dueTone = (due: string, done: boolean): "danger" | "warning" | "muted" => {
-  if (!due || done) return "muted";
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const days = Math.round((new Date(due).getTime() - today.getTime()) / 86_400_000);
-  return days < 0 ? "danger" : days <= 3 ? "warning" : "muted";
-};
-// Common-but-OPTIONAL tasks per desk — in a real app, the record type's
-// configured checklist. A NEW record starts with an EMPTY list (tasks truly
-// vary); these commons wait as dismissible suggestion CHIPS under each desk
-// (tap to materialize, ✕ to dismiss) — pills, never rows, so a
-// suggestion can't be mistaken for a task. MANDATORY tasks are a different
-// thing entirely: the app seeds those via a workflow on create — no human
-// types them.
-const SUGGESTED_TASKS: Record<Desk, string[]> = {
-  sales: ["Confirm pricing with the customer", "Attach the signed quote", "Verify the customer's tax ID"],
-  operations: ["Book the carrier", "Attach the delivery documents", "Confirm the delivery window"],
-  accounting: ["Issue every invoice", "Reconcile the receipts"],
-};
-
-// Monotonic id for user-added tasks — a length-derived id would collide after
-// a removal (delete then add) and break keys + patch-by-id.
-let taskSeq = 0;
-const newTaskId = () => `t_${(taskSeq += 1)}`;
-
-// The in-flight demo record's existing checklist (a NEW record gets []).
-const TASK_SEEDS: StageTask[] = [
-  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10), subtasks: [] },
-  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "", subtasks: [] },
-  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2), subtasks: [] },
-  // the one task with SUBTASKS — a booking is a sequence, and its steps carry
-  // nothing but a tick, so they stay child rows instead of four more tasks
-  // (collapsing is the app's call — this template always renders them)
-  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1), subtasks: [
-    { key: "s1", label: "Confirm the pickup window", done: true },
-    { key: "s2", label: "Send the packing list", done: false },
-    { key: "s3", label: "Get the booking reference", done: false },
-    { key: "s4", label: "Share the reference with the customer", done: false },
-  ] },
-  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6), subtasks: [] },
-  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "", subtasks: [] },
-  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14), subtasks: [] },
-];
-
 // The assignable roster — an app feeds `useMembers()` here.
 const TEAM: MemberSelectMember[] = [
   { id: "mem_01", name: "Sarah Chen" },
@@ -552,6 +487,9 @@ const SEED_COMMENTS: ThreadComment[] = [
 // ITS table (OP-…/AC-…) and links it here for reference.
 let siblingSeq = 90;
 
+/** "2026-07-18" — the wire shape every date FIELD on this surface stores. */
+const iso = (d: Date): string => d.toISOString().slice(0, 10);
+
 /** "18 Jul, 4:05 PM" — the trail/audit timestamp format. */
 const stamp = (d: Date): string =>
   `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
@@ -561,6 +499,10 @@ const stamp = (d: Date): string =>
 interface SiblingRecord {
   id: string;
   code: string;
+  /** The desk this handoff OPENED — the key, not just its label, because recall
+   *  has to undo exactly that step: return to the desk before it and clear the
+   *  custody stamp it wrote. A label can't be mapped back without a lookup. */
+  deskKey: Desk;
   desk: string;
   assignee: string;
   note: string;
@@ -835,7 +777,6 @@ export function TplRecord() {
   const [warehouse, setWarehouse] = useState("central");
   const [reference, setReference] = useState("");
   const [weight, setWeight] = useState<number | null>(1250);
-  const [salesOwner, setSalesOwner] = useState<string | null>("mem_01");
 
   // ── customer section — TWO states: attached (read-only card, Remove
   // detaches) or empty (the find-or-create search). The "create" branch opens
@@ -1137,71 +1078,13 @@ export function TplRecord() {
     }, 900);
   };
 
-  // ── the handoff tasks — the current desk's checklist gates its handoff
-  const [tasks, setTasks] = useState<StageTask[]>(TASK_SEEDS);
-  const [newTask, setNewTask] = useState("");
-  const toggleTask = (tid: string, done: boolean) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, done } : t)));
-  const renameTask = (tid: string, label: string) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, label } : t)));
-  // The capture desk: adds land on the current desk; a CLOSED record's adds
-  // land on the last desk (the stage never gates task editing).
-  const captureDesk: Desk = stage === "closed" ? "accounting" : stage;
-  const addTask = () => {
-    const label = newTask.trim();
-    if (!label) return;
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "", subtasks: [] }]);
-    setNewTask("");
-  };
-  const addSuggested = (desk: Desk, label: string) =>
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "", subtasks: [] }]);
-  const removeTask = (tid: string) => setTasks((prev) => prev.filter((t) => t.id !== tid));
-  const moveTask = (tid: string, desk: Desk) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, stage: desk } : t)));
-  const nextDeskOf = (desk: Desk): Desk | null =>
-    desk === "sales" ? "operations" : desk === "operations" ? "accounting" : null;
-  const [dismissed, setDismissed] = useState<string[]>([]);
-  const assignTask = (tid: string, member: string | null) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, assignee: member } : t)));
-  const dueTask = (tid: string, due: string) =>
-    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, due } : t)));
-  // A child step patches by key — the kit owns the expander and the count, the
-  // app owns nothing but the tick.
-  const toggleSubtask = (tid: string, key: string, done: boolean) =>
-    setTasks((prev) =>
-      prev.map((t) => (t.id === tid ? { ...t, subtasks: t.subtasks.map((s) => (s.key === key ? { ...s, done } : s)) } : t)),
-    );
-  // The Task-list grammar: a clearable Group-by + filter chips derive the
-  // sections; empty groups drop (except desks — the journey stays visible).
-  const [taskGroup, setTaskGroup] = useState<"desk" | "assignee" | "status" | null>("desk");
-  const [assigneeFilter, setAssigneeFilter] = useState<string[]>([]);
-  const [statusFilter, setStatusFilter] = useState<"open" | "done" | null>(null);
-  const taskPool = tasks.filter((t) => {
-    if (assigneeFilter.length > 0 && !assigneeFilter.includes(t.assignee ?? "none")) return false;
-    if (statusFilter === "open" && t.done) return false;
-    if (statusFilter === "done" && !t.done) return false;
-    return true;
-  });
-  const suggesting = assigneeFilter.length === 0 && statusFilter === null;
-  const taskSections: { key: string; head: React.ReactNode; items: StageTask[]; desk: Desk | null; ghosts: string[] }[] =
-    taskGroup === "desk"
-      ? DESKS.map((st) => ({
-          key: st.key,
-          head: <Text size="xs" weight="semibold" color="muted">{st.label}</Text>,
-          items: taskPool.filter((t) => t.stage === st.key),
-          desk: st.key,
-          ghosts: suggesting ? SUGGESTED_TASKS[st.key].filter((l) => !tasks.some((t) => t.label === l) && !dismissed.includes(l)) : [],
-        }))
-      : taskGroup === "assignee"
-        ? [...TEAM.map((m) => ({ key: m.id, head: <MemberChip name={m.name ?? m.id} />, items: taskPool.filter((t) => t.assignee === m.id), desk: null, ghosts: [] })),
-           { key: "none", head: <Text size="xs" weight="semibold" color="muted">Unassigned</Text>, items: taskPool.filter((t) => t.assignee == null), desk: null, ghosts: [] },
-          ].filter((g) => g.items.length > 0)
-        : taskGroup === "status"
-          ? [
-              { key: "open", head: <Text size="xs" weight="semibold" color="muted">Open</Text>, items: taskPool.filter((t) => !t.done), desk: null, ghosts: [] },
-              { key: "done", head: <Text size="xs" weight="semibold" color="muted">Done</Text>, items: taskPool.filter((t) => t.done), desk: null, ghosts: [] },
-            ].filter((g) => g.items.length > 0)
-          : [{ key: "all", head: null, items: taskPool, desk: null, ghosts: [] }];
+  // ── desk CUSTODY — what each desk stamps about its own turn
+  // Each desk owns two facts about its own custody: when it took the record and
+  // who holds it. Stored per desk so a passed desk keeps them editable — a date
+  // typed wrong must not become unreachable the moment the record moves on.
+  const [deskSince, setDeskSince] = useState<Record<Desk, string>>({ sales: "2026-06-15", operations: "", accounting: "" });
+  const [deskOwner, setDeskOwner] = useState<Record<Desk, string | null>>({ sales: "mem_01", operations: null, accounting: null });
+
   const customerOptions: PickerOption<string, Customer>[] = customers.map((c) => ({
     value: c.id,
     label: c.name,
@@ -1288,20 +1171,31 @@ export function TplRecord() {
     Alert.alert("Receipt", `Printing receipt for ${formatMoney(grandTotal)}.`, [{ text: "OK" }]);
   };
 
-  // Open tasks INFORM the handoff, they never block it — the count warns and
-  // carries over to the next desk (or stays open on the closed record).
-  const gate =
+  // Where the record SITS — the one index the pipeline reads off, and the act
+  // that leaves that desk. A closed record is past the last desk, so no stage
+  // is current and no gate is offered.
+  const deskIndex = stage === "closed" ? DESKS.length : DESKS.findIndex((x) => x.key === stage);
+  // `handoff` separates the two acts that LOOK alike, as a DISCRIMINATED union
+  // so the difference is in the type and not just a runtime branch: handing off
+  // has a receiving DESK (it asks whom, then stamps that desk), closing has no
+  // receiver at all — hence no `next` to mis-read. Sharing one shape is how it
+  // came to ask "Assignee at Closed" and then confirm nothing.
+  const gate: { cta: string; handoff: true; next: Desk } | { cta: string; handoff: false } | null =
     stage === "sales"
-      ? { cta: "Hand off to Operations", next: "operations" as Stage }
+      ? { cta: "Hand off to Operations", next: "operations", handoff: true }
       : stage === "operations"
-        ? { cta: "Hand off to Accounting", next: "accounting" as Stage }
+        ? { cta: "Hand off to Accounting", next: "accounting", handoff: true }
         : stage === "accounting"
-          ? { cta: "Close record", next: "closed" as Stage }
+          ? { cta: "Close record", handoff: false }
           : null;
 
   // ── the handoff flow — the dialog's fields, the TRAIL of marks, and the
   // SIBLING records the handoffs created (shown as LinkedRecordCards)
   const [handoffOpen, setHandoffOpen] = useState(false);
+  // The desk the OPEN dialog is handing to, captured on press. Not re-derived
+  // from `stage`: confirming advances the stage while the dialog is still fading
+  // out, so a derived title would flip to the NEXT desk's wording on the way out.
+  const [handoffTo, setHandoffTo] = useState<Desk>("operations");
   const [handoffAssignee, setHandoffAssignee] = useState<string | null>(null);
   const [handoffNote, setHandoffNote] = useState("");
   const [handoffs, setHandoffs] = useState<TimelineItem[]>([]);
@@ -1313,13 +1207,18 @@ export function TplRecord() {
   // Confirm MARKS the handoff — whom · where · the note — and, in a real app,
   // CREATES the next desk's record on ITS table, linked here. The mark shows
   // that linked sibling as a reference; its summary lives on the sibling.
+  //
+  // It commits what the DIALOG captured (`handoffTo`), never what `stage` implies
+  // right now: the dialog is a statement about one handoff, and re-deriving the
+  // target at confirm time would give two sources for the same fact.
   const confirmHandoff = () => {
-    if (!gate || gate.next === "closed" || handoffAssignee == null) return;
+    if (handoffAssignee == null) return;
     const to = TEAM.find((m) => m.id === handoffAssignee);
     const at = new Date();
-    const siblingCode = `${gate.next === "operations" ? "OP" : "AC"}-2026-00${(siblingSeq += 1)}`;
+    const deskName = stageOf(handoffTo).label;
+    const siblingCode = `${handoffTo === "operations" ? "OP" : "AC"}-2026-00${(siblingSeq += 1)}`;
     setSiblings((prev) => [
-      { id: siblingCode, code: siblingCode, desk: stageOf(gate.next).label, assignee: to?.name ?? "", note: handoffNote.trim(), at: stamp(at) },
+      { id: siblingCode, code: siblingCode, deskKey: handoffTo, desk: deskName, assignee: to?.name ?? "", note: handoffNote.trim(), at: stamp(at) },
       ...prev,
     ]);
     setHandoffs((prev) => [
@@ -1327,24 +1226,51 @@ export function TplRecord() {
         id: `h_${prev.length + 1}`,
         icon: "send",
         iconColor: colors.blue[500],
-        label: `Handed off to ${stageOf(gate.next).label} — ${to?.name ?? ""}`,
+        label: `Handed off to ${deskName} — ${to?.name ?? ""}`,
         description: handoffNote.trim() || undefined,
         right: <Text size="xs" color="muted">{stamp(at)}</Text>,
       },
       ...prev,
     ]);
-    logActivity("send", `Handed off to ${stageOf(gate.next).label} — ${to?.name ?? ""}`, { iconColor: colors.blue[500], description: `${siblingCode} created and linked` });
-    setStage(gate.next);
+    logActivity("send", `Handed off to ${deskName} — ${to?.name ?? ""}`, { iconColor: colors.blue[500], description: `${siblingCode} created and linked` });
+    // The handoff STAMPS the desk it opens — the dialog already asked whom and
+    // it is happening now, so the receiving stage's own fields must not come up
+    // blank and re-ask. They stay editable there; this is the default, not a lock.
+    setDeskSince((p) => ({ ...p, [handoffTo]: iso(at) }));
+    setDeskOwner((p) => ({ ...p, [handoffTo]: handoffAssignee }));
+    setStage(handoffTo);
     setHandoffOpen(false);
     setHandoffAssignee(null);
     setHandoffNote("");
   };
+  // CLOSING is the pipeline's terminal act, not a handoff — there is no next
+  // desk and nobody to name, so it asks for CONFIRMATION and nothing else. The
+  // record leaves the pipeline: every stage reads done and no stage is current.
+  const closeRecord = () => {
+    Alert.alert("Close this record?", "Accounting is the last desk. The record leaves the pipeline — its stages stay editable.", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Close record",
+        onPress: () => {
+          logActivity("circle-check", "Record closed", { iconColor: colors.emerald[500] });
+          setStage("closed");
+        },
+      },
+    ]);
+  };
   // RECALL — the undo: withdraws the sibling (a real app cancels the sibling
   // record, and gates recall on it being UNTOUCHED at its desk) and returns
   // the desk. History is never erased — the trail keeps the original mark and
   // gains a recall mark; the handoff CTA comes back, so redo is possible.
+  //
+  // It undoes exactly ONE step: back to the desk BEFORE the one this handoff
+  // opened, and it clears that desk's custody stamp. Rewinding to the first desk
+  // instead would silently drop the desks in between, and leaving the stamp
+  // behind would leave `stage` and the custody map disagreeing — an unreached
+  // desk still holding a taken-on date and an owner.
   const recallHandoff = (sb: SiblingRecord) => {
-    Alert.alert(`Recall the handoff?`, `${sb.code} is withdrawn from ${sb.desk} and the record returns to Sales. The trail keeps both marks.`, [
+    const backTo = DESKS[DESKS.findIndex((d) => d.key === sb.deskKey) - 1]?.key ?? "sales";
+    Alert.alert(`Recall the handoff?`, `${sb.code} is withdrawn from ${sb.desk} and the record returns to ${stageOf(backTo).label}. The trail keeps both marks.`, [
       { text: "Cancel", style: "cancel" },
       {
         text: "Recall",
@@ -1352,7 +1278,9 @@ export function TplRecord() {
         onPress: () => {
           setSiblings((prev) => prev.filter((x) => x.id !== sb.id));
           setSiblingOpen(null);
-          setStage("sales");
+          setDeskSince((p) => ({ ...p, [sb.deskKey]: "" }));
+          setDeskOwner((p) => ({ ...p, [sb.deskKey]: null }));
+          setStage(backTo);
           setHandoffs((prev) => [
             { id: `h_${prev.length + 1}`, icon: "x", iconColor: colors.zinc[500], label: `Handoff recalled — ${sb.code} withdrawn`, right: <Text size="xs" color="muted">{stamp(new Date())}</Text> },
             ...prev,
@@ -1369,7 +1297,7 @@ export function TplRecord() {
   const SECTIONS = [
     { key: "general", label: "General", icon: "file-text" },
     { key: "comments", label: "Comments", icon: "message-square" },
-    { key: "tasks", label: "Tasks", icon: "list-checks" },
+    { key: "progress", label: "Progress", icon: "git-branch" },
     { key: "documents", label: "Documents", icon: "folder-closed" },
     { key: "customer", label: "Customer", icon: "building-2" },
     { key: "fees", label: "Fees", icon: "receipt" },
@@ -1380,7 +1308,7 @@ export function TplRecord() {
     { key: "handoff", label: "Handoff", icon: "send" },
     { key: "danger", label: "Danger zone", icon: "circle-alert" },
   ] as const;
-  const nav = useSectionNav(["general", "comments", "tasks", "documents", "customer", "fees", "billing", "docset", "receipt", "activity", "handoff", "danger"] as const);
+  const nav = useSectionNav(["general", "comments", "progress", "documents", "customer", "fees", "billing", "docset", "receipt", "activity", "handoff", "danger"] as const);
   // Narrow: the rail becomes a pinned bar naming the CURRENT section; tapping
   // it opens a full-page section picker (Escape / the close control dismiss).
   const [sectionsOpen, setSectionsOpen] = useState(false);
@@ -1460,8 +1388,8 @@ export function TplRecord() {
           hairline BETWEEN top-level blocks (a conditional block that renders
           null never leaves a stray divider) */}
       <SectionStack style={{ flex: 1, minWidth: 0 }}>
-        {/* header band — identity · attention · a light summary. No stage here
-            (Tasks carries progress, Handoff carries the desk), no breadcrumb,
+        {/* header band — identity · attention · a light summary. No stage chip
+            here (Progress carries the desk and the act), no breadcrumb,
             no create CTA: back lives in the panel, creation belongs to the
             REGISTER (the list owns "new"), the record page only edits. */}
         <View style={{ gap: 16 }}>
@@ -1479,7 +1407,7 @@ export function TplRecord() {
         {/* the light summary — what's on this record, one quiet line */}
         <SummaryLine
           items={[
-            { label: `of ${tasks.length} tasks done`, value: tasks.filter((t) => t.done).length },
+            { label: "desk", value: stageOf(stage).label, format: "none" },
             { label: "documents", value: files.length },
             { label: "to collect", value: grandTotal, format: "currency", compact: true },
           ]}
@@ -1502,11 +1430,15 @@ export function TplRecord() {
           <SubsectionStack>
             <Subsection>
               <DetailTable labelWidth={150} trailingWidth={88}>
+                {/* The SAME fact the Sales stage owns in Progress, shown where
+                    a reader looks for it first — bound to the one source, never
+                    a second copy: two member selects over their own state would
+                    disagree the moment either is edited. */}
                 <DetailRow label="Sales owner">
                   <InlineMemberSelect
                     members={TEAM}
-                    value={salesOwner}
-                    onSave={persist(setSalesOwner)}
+                    value={deskOwner.sales}
+                    onSave={persist((v: string | null) => setDeskOwner((p) => ({ ...p, sales: v })))}
                     placeholder="Assign…"
                     accessibilityLabel="Sales owner"
                   />
@@ -1752,185 +1684,72 @@ export function TplRecord() {
         </Section>
         </View>
 
-        {/* TASKS — the handoff checklist, grouped by the desk that owns
-            them; every row edits (the stage gates the handoff and Billing,
-            never task editing). The CURRENT desk's open tasks warn beside
-            the handoff CTA below. */}
-        <View onLayout={nav.register("tasks")}>
+        {/* PROGRESS — the desk handoff, as the ordered positions it is. Sales →
+            Operations → Accounting: one desk owns the record at a time, the live
+            one carries the act that leaves it, and a passed desk keeps its own
+            facts editable (a date typed wrong must stay reachable). This replaced
+            a per-desk CHECKLIST: ticking boxes described the work, never the
+            record's POSITION, and it put the handoff CTA a section away from the
+            desk it belonged to. */}
+        <View onLayout={nav.register("progress")}>
         <Section>
           <SectionHeading>
-            <SectionHeadingTitle description="Each desk clears its checklist to hand the record off.">Tasks</SectionHeadingTitle>
-            {/* the same compact meter as the register's Tasks column */}
-            {tasks.length > 0 ? (
-              <View style={{ width: 120 }}>
-                <ProgressBar compact value={tasks.filter((t) => t.done).length} max={tasks.length} format="fraction" color={colors.zinc[500]} completeColor={colors.emerald[500]} />
-              </View>
-            ) : null}
+            <SectionHeadingTitle description="One desk owns the record at a time. The live desk carries the handoff.">Progress</SectionHeadingTitle>
           </SectionHeading>
-          {/* the Task-list toolbar grammar: a clearable Group-by FilterChip +
-              filter chips — not a bespoke pill row */}
-          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
-            <FilterChip
-              label="Group by"
-              summary={taskGroup === "desk" ? "Desk" : taskGroup === "assignee" ? "Assignee" : taskGroup === "status" ? "Status" : undefined}
-              onClear={() => setTaskGroup(null)}
-              clearLabel="Clear grouping"
-            >
-              {({ close }) => (
-                <OptionList
-                  search={{ mode: "none" }}
-                  options={[
-                    { value: "desk", label: "Desk" },
-                    { value: "assignee", label: "Assignee" },
-                    { value: "status", label: "Status" },
-                  ]}
-                  value={taskGroup ?? undefined}
-                  onValueChange={(v) => {
-                    if (v) setTaskGroup(v);
-                    close();
-                  }}
-                  onRequestClose={close}
-                />
-              )}
-            </FilterChip>
-            <FilterChip
-              label="Assignee"
-              summary={assigneeFilter.length > 0 ? `${assigneeFilter.length}` : undefined}
-              onClear={() => setAssigneeFilter([])}
-              clearLabel="Clear assignee filter"
-            >
-              <OptionList
-                search={{ mode: "none" }}
-                multi
-                options={[...TEAM.map((m) => ({ value: m.id, label: m.name ?? m.id })), { value: "none", label: "Unassigned" }]}
-                value={assigneeFilter}
-                onValueChange={setAssigneeFilter}
-              />
-            </FilterChip>
-            <FilterChip
-              label="Status"
-              summary={statusFilter === "open" ? "Open" : statusFilter === "done" ? "Done" : undefined}
-              onClear={() => setStatusFilter(null)}
-              clearLabel="Clear status filter"
-            >
-              {({ close }) => (
-                <OptionList
-                  search={{ mode: "none" }}
-                  options={[
-                    { value: "open", label: "Open" },
-                    { value: "done", label: "Done" },
-                  ]}
-                  value={statusFilter ?? undefined}
-                  onValueChange={(v) => {
-                    if (v) setStatusFilter(v);
-                    close();
-                  }}
-                  onRequestClose={close}
-                />
-              )}
-            </FilterChip>
-          </View>
-          {/* the capture row at the TOP — a new task lands on the capture desk
-              (the current one; the last desk once closed) */}
-          <CaptureRow value={newTask} onChangeText={setNewTask} onSubmit={addTask} placeholder={`Add a task for ${stageOf(captureDesk).label}…`} accessibilityLabel="Add a task" />
-          {/* the groups divide via the SubsectionStack beat (space-only) —
-              the head is a SubsectionHeading carrying the group's name + count,
-              the "all" (ungrouped) view a headingless Subsection */}
-          <SubsectionStack>
-            {taskSections.map((g) => {
-              const desk = g.desk;
+          <Pipeline accessibilityLabel="Desk handoff progress">
+            {DESKS.map((d, i) => {
+              const status: "done" | "current" | "upcoming" = i < deskIndex ? "done" : i === deskIndex ? "current" : "upcoming";
+              const owner = deskOwner[d.key];
               return (
-              <Subsection key={g.key}>
-                {g.head ? (
-                  <SubsectionHeading>
-                    {g.head}
-                    {g.items.length > 0 ? (
-                      <Text size="xs" color="muted" tabular>{`${g.items.filter((t) => t.done).length}/${g.items.length}`}</Text>
-                    ) : null}
-                  </SubsectionHeading>
-                ) : null}
-                {/* rows ride the Task compound — one geometry, EVERY
-                    desk's rows fully editable (the stage gates the handoff
-                    and Billing, never task editing — planning ahead on a
-                    later desk is normal work) */}
-                <TaskList>
-                  {g.items.map((t) => {
-                    const next = nextDeskOf(t.stage);
-                    const menuItems: ActionMenuItem[] = [
-                      ...(next !== null
-                        ? [{ key: "chuyen", label: `Move to ${stageOf(next).label}`, icon: "arrow-right" as const, onPress: () => moveTask(t.id, next) }]
-                        : []),
-                      { key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => removeTask(t.id) },
-                    ];
-                    return (
-                      <TaskItem key={t.id}>
-                        <TaskStatus>
-                          {/* Half-filled once any subtask is in: progress the row already
-                              holds, that a binary ring would have hidden. Display only —
-                              the parent's own `done` still wins, and still only it. */}
-                          <CheckCircle
-                            state={t.done ? "done" : t.subtasks.some((s) => s.done) ? "partial" : "none"}
-                            onChange={(on) => toggleTask(t.id, on)}
-                            accessibilityLabel={t.label}
-                          />
-                        </TaskStatus>
-                        <TaskTitle>
-                          <InlineTextInput variant="cell" value={t.label} onSave={(v) => renameTask(t.id, v)} struck={t.done} accessibilityLabel="Task title" />
-                        </TaskTitle>
-                        <TaskActions>
-                          <ActionMenu items={menuItems} accessibilityLabel={`Task options: ${t.label}`} />
-                        </TaskActions>
-                        {/* Due + assignee are the task's own FIELDS, so they hang UNDER it —
-                            each name beside the control it names, indented one step. They were
-                            cells in a value column the LIST declared, which is what put a
-                            two-word label a quarter of the record away from its own editor.
-                            The due keeps its urgency tone; the assignee names the member
-                            rather than showing a bare avatar, because a labelled field has the
-                            room for it. */}
-                        <TaskSubRow label="Due">
-                          <InlineDatePicker tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Not set" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
-                        </TaskSubRow>
-                        <TaskSubRow label="Assignee">
-                          <InlineMemberSelect members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} placeholder="Unassigned" accessibilityLabel={`Assignee · ${t.label}`} />
-                        </TaskSubRow>
-                        {t.subtasks.length > 0 ? (
-                          <TaskList>
-                            {t.subtasks.map((sub) => (
-                              <TaskItem key={sub.key}>
-                                <TaskStatus>
-                                  <CheckCircle state={sub.done ? "done" : "none"} onChange={(on) => toggleSubtask(t.id, sub.key, on)} accessibilityLabel={sub.label} />
-                                </TaskStatus>
-                                {/* A STRING title: the compound insets it like the parent's
-                                    inline editor and seats it in the row's band, so the two
-                                    columns of titles line up and the ring stays beside the
-                                    words even when a long subtask wraps. `struck` for done. */}
-                                <TaskTitle struck={sub.done}>{sub.label}</TaskTitle>
-                              </TaskItem>
-                            ))}
-                          </TaskList>
-                        ) : null}
-                      </TaskItem>
-                    );
-                  })}
-                  {/* SUGGESTIONS are pills, not rows — tap to materialize,
-                      ✕ dismisses for this record; never counted */}
-                  {desk != null && g.ghosts.length > 0 ? (
-                    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6, paddingTop: 2, paddingBottom: 4 }}>
-                      {g.ghosts.map((label) => (
-                        <SuggestionChip
-                          key={label}
-                          label={label}
-                          onAdd={() => addSuggested(desk, label)}
-                          onDismiss={() => setDismissed((prev) => (prev.includes(label) ? prev : [...prev, label]))}
+                <PipelineStage
+                  key={d.key}
+                  status={status}
+                  title={d.label}
+                  // Prose the reader can't set — how long it has sat here. The DATE
+                  // is the field below; repeating it up here would say it twice.
+                  meta={status === "current" ? heldFor(deskSince[d.key]) : undefined}
+                >
+                  {/* A reached desk owns its own facts — and keeps owning them
+                      once the record has moved on. */}
+                  {i <= deskIndex ? (
+                    <>
+                      <PipelineField label="Taken on" maxWidth={200}>
+                        <InlineDatePicker
+                          value={deskSince[d.key] || null}
+                          onSave={(v) => setDeskSince((p) => ({ ...p, [d.key]: v ?? "" }))}
+                          onClear={() => setDeskSince((p) => ({ ...p, [d.key]: "" }))}
+                          placeholder="Not recorded"
+                          accessibilityLabel={`Taken on · ${d.label}`}
                         />
-                      ))}
-                    </View>
+                      </PipelineField>
+                      <PipelineField label="Owner" maxWidth={260}>
+                        <InlineMemberSelect
+                          members={TEAM}
+                          value={owner}
+                          onSave={(v) => setDeskOwner((p) => ({ ...p, [d.key]: v }))}
+                          placeholder="Unassigned"
+                          accessibilityLabel={`Owner · ${d.label}`}
+                        />
+                      </PipelineField>
+                    </>
+                  ) : null}
+                  {/* A condition belongs to the desk it is about. */}
+                  {status === "current" && stage !== "closed" && deliverBy !== "" && new Date(deliverBy) < new Date() ? (
+                    <PipelineNote tone="warning">Past the due date — chase it or move the date.</PipelineNote>
                   ) : null}
-                </TaskList>
-              </Subsection>
+                  {status === "current" && gate ? (
+                    <PipelineActions>
+                      <Button
+                        title={gate.cta}
+                        color="primary"
+                        onPress={gate.handoff ? () => { setHandoffTo(gate.next); setHandoffOpen(true); } : closeRecord}
+                      />
+                    </PipelineActions>
+                  ) : null}
+                </PipelineStage>
               );
             })}
-          </SubsectionStack>
+          </Pipeline>
         </Section>
         </View>
 
@@ -2510,13 +2329,17 @@ export function TplRecord() {
             </View>
           ) : null}
           {handoffs.length > 0 ? <Timeline items={handoffs} /> : null}
-          {/* the handoff happens ONCE — before it, the single CTA; after it,
-              the mark + the linked record ARE the section, no further CTAs */}
-          {siblings.length === 0 && gate ? (
-            <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-              <Button title={gate.cta} color="primary" onPress={() => setHandoffOpen(true)} />
-            </View>
+          {/* Nothing handed off YET is a real state, not an absent section — and
+              its empty state carries NO action: the act lives on the live stage
+              in Progress, so a CTA here would be the second copy this section
+              exists to avoid. */}
+          {siblings.length === 0 && handoffs.length === 0 ? (
+            <EmptyState icon="send" message="Not handed off yet" hint={`${stageOf(stage).label} still holds this record — hand it off from Progress above.`} />
           ) : null}
+          {/* No CTA here. The act that leaves a desk belongs ON that desk — it
+              rides the live stage in the Progress pipeline. This section is the
+              RESULT: what the handoff created and when. A second button here
+              would offer the same act twice, in the place with less context. */}
         </Section>
         </View>
 
@@ -2767,8 +2590,13 @@ export function TplRecord() {
           <View />
         )}
         <DrawerFooter>
-          {/* recall = the semi-destructive undo — behind the details, confirmed */}
-          {openSibling ? <Button title="Recall handoff" color="danger-secondary" onPress={() => recallHandoff(openSibling)} /> : null}
+          {/* Recall = the semi-destructive undo — behind the details, confirmed.
+              Offered ONLY on the handoff that put the record where it is. A
+              superseded one cannot be undone in place: withdrawing the middle
+              step would leave the record behind a sibling that still exists, so
+              `stage` and the linked records would disagree. Walk it back one
+              handoff at a time. */}
+          {openSibling && openSibling.deskKey === stage ? <Button title="Recall handoff" color="danger-secondary" onPress={() => recallHandoff(openSibling)} /> : null}
           {/* a real app navigates to the sibling record's page */}
           <Button title="Open record" color="secondary" onPress={() => {}} />
         </DrawerFooter>
@@ -2778,10 +2606,10 @@ export function TplRecord() {
           exactly WHAT is being handed off. Confirm writes the trail entry. */}
       <Dialog width={480} open={handoffOpen} onOpenChange={(o) => { if (!o) { setHandoffOpen(false); setHandoffAssignee(null); setHandoffNote(""); } }}>
         <DialogHeader>
-          <DialogHeaderTitle>{gate ? gate.cta : "Hand off"}</DialogHeaderTitle>
+          <DialogHeaderTitle>{`Hand off to ${stageOf(handoffTo).label}`}</DialogHeaderTitle>
         </DialogHeader>
         <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 14 }}>
-          <FormField label={gate ? `Assignee at ${stageOf(gate.next).label}` : "Assignee"}>
+          <FormField label={`Assignee at ${stageOf(handoffTo).label}`}>
             <MemberSelect members={TEAM} value={handoffAssignee} onValueChange={setHandoffAssignee} placeholder="Who receives the record…" />
           </FormField>
           <FormTextInput label="Note" optional placeholder="What the next desk should know…" value={handoffNote} onChangeText={setHandoffNote} multiline accessibilityLabel="Handoff note" />
@@ -2790,7 +2618,7 @@ export function TplRecord() {
           <Button title="Cancel" color="muted" onPress={() => { setHandoffOpen(false); setHandoffAssignee(null); setHandoffNote(""); }} />
           {/* one required field, right there — the adjacent-input exception:
               disabled until the receiver is chosen */}
-          <Button title={gate ? gate.cta : "Hand off"} color="primary" disabled={handoffAssignee == null} onPress={confirmHandoff} />
+          <Button title={`Hand off to ${stageOf(handoffTo).label}`} color="primary" disabled={handoffAssignee == null} onPress={confirmHandoff} />
         </DialogFooter>
       </Dialog>
       {/* Balances the rail so the reading column lands dead-centre. In the docs