@lotics/ui 27.17.1 → 28.0.0

package/examples/tpl_record.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useEffect, useRef, useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
 import { Button } from "@lotics/ui/button";
@@ -12,14 +12,10 @@ import type { PickerOption } from "@lotics/ui/picker";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import { DetailRow, DetailTable } from "@lotics/ui/detail_row";
 import { Callout, CalloutText } from "@lotics/ui/callout";
-import { Inset } from "@lotics/ui/inset";
 import { Section, SectionHeading, SectionHeadingMeta, 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 { Checklist, ChecklistActions, ChecklistGroup, ChecklistItem, ChecklistNote } from "@lotics/ui/checklist";
 import { DateStamp } from "@lotics/ui/date_stamp";
-import { TextLink } from "@lotics/ui/text_link";
-import { MemberChip } from "@lotics/ui/member_chip";
-import { TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { MenuButton } from "@lotics/ui/menu_button";
 import { Popover, PopoverContent } from "@lotics/ui/popover";
 import { useSectionNav } from "@lotics/ui/use_section_nav";
@@ -45,7 +41,6 @@ import { InlineSelect } from "@lotics/ui/inline_select";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
 import { MemberSelect, type MemberSelectMember } from "@lotics/ui/member_select";
-import { Drawer } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { FormField } from "@lotics/ui/form_field";
 import { TextInputField } from "@lotics/ui/text_input_field";
@@ -169,19 +164,32 @@ const DESKS: { key: Desk; label: string }[] = [
  * a reader wants to see, and one that gives every step an owner field asks four
  * questions nobody has answers to.
  *
- * `desk` marks the steps that carry facts and the handoff act. The rest are a
- * tick and a date.
+ * So the ladder has TWO LEVELS, not one flat run of eight. Flat, a desk and a
+ * milestone sat at the same altitude while being different kinds of thing — the
+ * ladder claimed "Operations" and "Collected" were peers, and the reader had to
+ * know which names a PLACE and which names an EVENT. Grouping the milestones
+ * under the desk that produces them says it in the shape instead: the desk is
+ * where the record sits, the milestones are what happens while it is there.
+ *
+ * `RUNGS` is the flat ordered spine — the ONLY things that carry a stamp, so
+ * "how far along" has exactly one source. A PHASE has no stamp of its own: its
+ * ring SUMMARISES its rungs (full when all are ticked, half while some are), and
+ * its own facts are the owner and the handoff act.
  */
-const STEPS: { key: string; label: string; desk?: Desk }[] = [
-  { key: "sales", label: "Sales", desk: "sales" },
+const RUNGS: { key: string; label: string }[] = [
   { key: "quoted", label: "Quote sent" },
-  { key: "operations", label: "Operations", desk: "operations" },
   { key: "collected", label: "Collected" },
   { key: "cleared", label: "Customs cleared" },
   { key: "delivered", label: "Delivered" },
-  { key: "accounting", label: "Accounting", desk: "accounting" },
   { key: "pod", label: "POD received" },
 ];
+const rungAt = (key: string) => RUNGS.findIndex((r) => r.key === key);
+
+const PHASES: { desk: Desk; label: string; rungs: string[] }[] = [
+  { desk: "sales", label: "Sales", rungs: ["quoted"] },
+  { desk: "operations", label: "Operations", rungs: ["collected", "cleared", "delivered"] },
+  { desk: "accounting", label: "Accounting", rungs: ["pod"] },
+];
 
 const STAGES: { key: Stage; label: string }[] = [
   ...DESKS,
@@ -365,15 +373,27 @@ const RAIL_GAP = 48;
 /** The reserved gutter: the rail plus its gap. Mirrored empty on the right, this
  *  is what centres the column. */
 const GUTTER = RAIL_W + RAIL_GAP;
-/** The discussion panel's column. A record's comments are not a SECTION — they
- *  are about the whole record, so they do not belong at one position in a
- *  top-to-bottom reading order, and a coworker's note has to stay readable while
- *  you work anywhere on the page. It takes the right gutter, which until now was
- *  reserved purely to balance the rail. */
-const PANEL_W = 360;
+/** The discussion panel's column. A record's comments are not a SECTION when
+ *  there is room beside it — they are about the whole record, so they do not
+ *  belong at one position in a top-to-bottom reading order, and a coworker's note
+ *  has to stay readable while you work anywhere on the page. It takes the right
+ *  gutter, which was otherwise reserved purely to balance the rail.
+ *
+ *  NARROWER than the rail's side and much narrower than the record: the record is
+ *  the SUBJECT and the discussion supports it, so when the two compete the panel
+ *  is what gives way. A column flanked by two of its own width reads as one of
+ *  three equals rather than as the thing the page is about. 300 still seats a
+ *  comment's line comfortably at `sm`. */
+const PANEL_W = 300;
 const PANEL_GUTTER = PANEL_W + RAIL_GAP;
-/** The reading column's ceiling. */
-const CONTENT_MAX = 720;
+/** The reading column's ceiling.
+ *
+ * Narrower than the 720 it started at — which is what buys the discussion its
+ * column on the widths a laptop actually has, instead of folding the thread away
+ * — but still comfortably wider than either gutter. Taken all the way down to a
+ * `Drawer`'s 600 it sat between two columns of its own order and stopped reading
+ * as the thing the page is about. */
+const CONTENT_MAX = 680;
 
 // ── the DOCUMENT DESK — the Agents "Document desk" pattern, carried as the
 // record's documents surface: files feed ONE "Use AI" entry that forks into
@@ -568,14 +588,14 @@ const DOC_COLUMNS: TableColumn[] = [
 // need, grouped PER PARTY; the common ones ship pre-checked, the long tail
 // folds behind "Show all forms". (The Documents section above is the INTAKE
 // register — received files; this registry is what the record can PRODUCE.)
-// READINESS: a form declares which RECORD FIELDS it reads (`needs`). The
-// fields' HOME stays their DATA section (the colocation law). Warning and fix
-// are CO-LOCATED on the row: a not-ready row's mark NAMES what's missing (muted
-// at rest so gaps show without checking, warning once checked), and the fix sits
-// right under it in the `expansion` — an `Inset` (a FORM surface, never a Callout,
-// which is an ARIA alert) with the editors, saved onto the record in place. Drafts
-// are keyed BY FIELD, so a field two checked forms share is entered once and one
-// Save resolves both. A ready form stays silent.
+// READINESS: a form declares which RECORD FIELDS it reads (`needs`). The row
+// NAMES what is missing and says WHERE it lives (muted at rest so gaps show
+// without checking, warning once checked — it now blocks); a ready form stays
+// silent. It does NOT collect: the fields' home is their own DATA section, and a
+// checklist that also edited them made every row two things at once — a status
+// and a form — with nothing to say which one the reader was in, and put an editor
+// beside the field's real home where its description and its neighbours live.
+// A checklist REPORTS; the section that owns a value COLLECTS it.
 type NeedKey = "delivery_address" | "commodity_code" | "hazard_class";
 const NEEDS: Record<NeedKey, { label: string; hint: string }> = {
   delivery_address: { label: "Delivery address", hint: "The consignee's dock — printed on the delivery note" },
@@ -891,7 +911,12 @@ function PartyRow({ role, noun, rec, options, onPick, onOpen, onUnset, onSaveFac
  *  false, so the rail, the panel and the mirrored gutters collapse on their own.
  *  What the flag decides is what a nested surface must NOT do — open comments in
  *  a Drawer inside a Drawer, or draw a back button over the one the Drawer has. */
-export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?: "page" | "drawer"; code?: string } = {}) {
+export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection }: { chrome?: "page" | "drawer"; code?: string;
+  /** Land on this section instead of the top — a register row's comment bubble
+   *  opens the record ON its discussion, because that is the only reason the
+   *  reader pressed it. Applied once the skeleton clears: a jump at mount scrolls
+   *  a layout that is still a placeholder and lands nowhere. */
+  openSection?: string } = {}) {
   const isDrawer = chrome === "drawer";
   const id = useRef(1);
   const nextId = (prefix: string) => `${prefix}_${(id.current += 1)}`;
@@ -905,6 +930,22 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
     return () => clearTimeout(t);
   }, []);
 
+  /**
+   * Land on a section when the caller named one — a register row's comment
+   * bubble opens the record ON its discussion.
+   *
+   * AFTER the skeleton clears, never at mount: the placeholder has different
+   * heights from the real layout, so a jump measured against it scrolls to a
+   * position that stops existing the moment the record renders. The section
+   * registers its offset on layout, so the frame after `booting` flips is the
+   * first one where the target is real.
+   */
+  useEffect(() => {
+    if (booting || !openSection) return;
+    const t = setTimeout(() => nav.jumpTo(openSection as Parameters<typeof nav.jumpTo>[0]), 0);
+    return () => clearTimeout(t);
+  }, [booting, openSection]);
+
   // ── the discussion thread (CommentList + Composer; author-only edit/delete)
   const [comments, setComments] = useState<ThreadComment[]>(SEED_COMMENTS);
   // Files staged on the NEXT comment — consumer-owned, exactly how the
@@ -1270,15 +1311,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   const isEligible = (f: SetForm) => f.id !== "c3" || hazardousGoods;
   const checkedForms = ALL_FORMS.filter((f) => isEligible(f) && chosenForms.has(f.id));
   const blockingNeeds = [...new Set(checkedForms.flatMap(missingOf))];
-  // the per-row fills' DRAFTS — keyed by field, SHARED between the rows of forms that
-  // need the same field, so filling it under one form resolves it for all; Save commits
-  // onto the record and the field's home row shows the value (the need resolves, the
-  // row's mark clears, the fill drops away).
-  const [fillDrafts, setFillDrafts] = useState<Record<string, string>>({});
-  const needSetters: Record<NeedKey, (v: string) => void> = { delivery_address: setDeliveryAddress, commodity_code: setCommodityCode, hazard_class: setHazardClass };
-  const saveNeeds = (keys: NeedKey[]) => {
-    for (const k of keys) needSetters[k]((fillDrafts[k] ?? "").trim());
-  };
   // Generation is DETERMINISTIC template fill — NOT AI, so no AgentRun
   // theater: the CTA carries a brief loading state and the whole set
   // appears at once (a real app awaits its render call the same way).
@@ -1332,22 +1364,77 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   };
 
   // ── 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<string, string>>({ sales: "2026-06-15" });
-  // Which passed stage has been opened for editing. A stage BEHIND the live one
-  // shows its facts and nothing else — the ladder is read far more often than it
-  // is corrected, and a column of live editors on history invites changing it by
-  // accident. "Edit" is the deliberate step that turns one stage back into a form.
-  //
-  // ONE key, so opening a second stage closes the first. That is the intent, not a
-  // limitation: the editors commit as you leave them, so nothing is lost by the
-  // close, and two open stages would put two versions of the same ladder on screen
-  // — one being read, one being changed — with no cue for which is which.
-  const [editingDesk, setEditingDesk] = useState("");
+  // The MILESTONE stamps, keyed by rung. Only rungs are stamped: a phase's ring
+  // is derived from these, so "how far along" cannot be answered two ways.
+  // Editable forever — a date typed wrong must not become unreachable the moment
+  // the record moves on.
+  const [deskSince, setDeskSince] = useState<Record<string, string>>({});
   const [deskOwner, setDeskOwner] = useState<Record<string, string | null>>({ sales: "mem_01" });
 
+  /**
+   * WHERE THE RECORD IS: the highest rung anyone has stamped. Everything below it
+   * is REACHED — you cannot have cleared customs without collecting — so the run
+   * reads done from POSITION, not from each rung carrying its own date.
+   *
+   * That is what lets one click say "everything up to here". Ticking `Delivered`
+   * puts the record there and the two rungs under it read done immediately. The
+   * alternative — writing today onto every rung below — marks the same three
+   * boxes but INVENTS two dates: a record imported in June would show milestones
+   * dated today, and nothing on screen would admit they were guessed.
+   *
+   * A reached rung with no stamp of its own shows a BLANK date, which is the
+   * honest answer to "when" — and it stays one click from being filled in.
+   */
+  const topRung = RUNGS.reduce((top, r, i) => (deskSince[r.key] ? i : top), -1);
+  const rungDone = (i: number) => i <= topRung;
+
+  /**
+   * Which phases the reader has COLLAPSED. Everything is open by default: a
+   * record ladder is read to see the whole route, and a run that opens one phase
+   * at a time answers "where am I" while hiding "what is left". Collapsing is for
+   * folding away a phase you are done with, not a mode you navigate in — so any
+   * number may be closed at once, and none is the resting state.
+   */
+  const [closedPhases, setClosedPhases] = useState<Set<string>>(new Set());
+  const togglePhase = (desk: string) =>
+    setClosedPhases((prev) => {
+      const next = new Set(prev);
+      if (!next.delete(desk)) next.add(desk);
+      return next;
+    });
+
+  /** Tick rung `i` — ONLY rung `i`. Position does the rest. */
+  const stampRung = (i: number) => {
+    const today = new Date().toISOString().slice(0, 10);
+    setDeskSince((prev) => ({ ...prev, [RUNGS[i].key]: today }));
+  };
+
+  /**
+   * Un-tick rung `i`: it and everything above walk back.
+   *
+   * Destructive and invisible from the ring, so it is NAMED before it happens —
+   * which milestones, by their own labels. A rung with nothing recorded above it
+   * needs no warning: there is nothing to lose.
+   */
+  const clearRungsFrom = (i: number, what: string) => {
+    const above = RUNGS.slice(i + 1).filter((x) => deskSince[x.key]);
+    const revert = () =>
+      setDeskSince((prev) => {
+        const next = { ...prev };
+        RUNGS.slice(i).forEach((x) => { next[x.key] = ""; });
+        return next;
+      });
+    if (above.length === 0) { revert(); return; }
+    Alert.alert(
+      `Reopen ${what}?`,
+      `${above.map((x) => x.label).join(" and ")} ${above.length > 1 ? "are" : "is"} recorded after it. Reopening clears their dates. This can't be undone.`,
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Reopen and clear", style: "destructive", onPress: revert },
+      ],
+    );
+  };
+
   const customerOptions: PickerOption<string, Customer>[] = customers.map((c) => ({
     value: c.id,
     label: c.name,
@@ -1553,13 +1640,25 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   // drawer, minus the trigger's padding) and the `wide` threshold. One consumer
   // cannot tell those apart from the contract — two can.
   const SECTIONS = [
+    // PROGRESS leads. The header already IDENTIFIES the record — it titles the
+    // customer and carries the code and city beneath it — so the first section
+    // does not have to introduce it, and what a reader opens a work record to
+    // learn is where it stands and what is owed. General became reference the
+    // moment the identity band stopped leading with the code, and reference
+    // follows state. The facts that GATE progress travel to it anyway: the
+    // overdue warning renders on the row that owes the work, not in a section
+    // above it.
+    //
+    // The rail lists sections in PAGE order, or the scroll-spy highlights one
+    // entry while the reader is looking at another.
+    { key: "progress", label: "Progress", icon: "git-branch" },
     { key: "general", label: "General", icon: "file-text" },
-    // Files sits SECOND: what arrived on the record is read before what the
-    // record is doing, and it puts the intake affordance near the top of the
-    // scroll instead of eight sections down.
+    // Only a SECTION when the page is too narrow to seat the panel — so the wide
+    // rail filters it out rather than offering a jump to something that is not
+    // there.
+    { key: "comments", label: "Comments", icon: "message-square" },
     { key: "files", label: "Files", icon: "folder-closed" },
     { key: "transport", label: "Transport", icon: "map-pin" },
-    { key: "progress", label: "Progress", icon: "git-branch" },
     { key: "fees", label: "Fees", icon: "receipt" },
     { key: "billing", label: "Billing", icon: "credit-card" },
     { key: "docset", label: "Documents", icon: "file-stack" },
@@ -1568,7 +1667,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   ] as const;
   // Kept in step with `SECTIONS` above by hand — a key added there and forgotten
   // here type-errors at every `nav.register` call, which is the cheap failure.
-  const nav = useSectionNav(["general", "files", "transport", "progress", "fees", "billing", "docset", "receipt", "danger"] as const);
+  const nav = useSectionNav(["progress", "general", "comments", "files", "transport", "fees", "billing", "docset", "receipt", "danger"] as const);
   // ONE record, ONE page. A section is a place you SCROLL to, never a
   // destination you swap to: routing a record was tried here and lost, because
   // every fix it needed rebuilt the whole-record view in miniature — a dot to
@@ -1614,16 +1713,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   // only to centre the column — so the panel costs no width the page did not
   // already spend. Both only earn their place while a readable column survives
   // between them; below that they collapse to the pinned bar and its drawer.
-  const wide = pageWidth != null && pageWidth >= GUTTER + PANEL_GUTTER + 560;
+  // The panel appears once the reading column can still hold its FLOOR beside the
+  // two gutters. The floor is what the column needs to stay readable (a label
+  // column plus its values), not what it would like — hold out for the ceiling and
+  // the thread folds away on every screen under ~1220.
+  const wide = pageWidth != null && pageWidth >= GUTTER + PANEL_GUTTER + 420;
   // Narrow: the discussion is one tap off the same bar the sections are on —
   // on the RIGHT, opposite the section picker, since it is about the record as a
   // whole rather than a place in it.
-  const [commentsOpen, setCommentsOpen] = useState(false);
   // Drawer chrome switches the BODY between the record and the discussion. As a
   // section it competed with nine others for one scroll — first it pushed the
   // record down, last it sat 7,466px from the top. They are two things a reader
   // alternates between, so the bar names both and the body shows one.
-  const [commentsView, setCommentsView] = useState(false);
   // The rail floats over its RESERVED gutter rather than sitting in the scroll
   // row, so the ScrollView keeps the FULL page width — wheel anywhere and the
   // record scrolls. (Capping the ScrollView at the column's width instead makes
@@ -1633,6 +1734,53 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   const railLeft = pageWidth == null ? 0 : 28 + Math.max(0, (pageWidth - 28 * 2 - groupW) / 2);
   const panelRight = railLeft;
 
+  /**
+   * The discussion, defined ONCE and rendered wherever it lands — beside the
+   * record when the page can hold a panel, under General when it cannot, and in
+   * place of the body inside a drawer. Two copies of a thread is how two
+   * surfaces drift apart on the day one of them gains attachments.
+   */
+  const commentsThread = (
+    <>
+        <CommentList
+          comments={comments}
+          currentMemberId="mem_01"
+          resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
+          onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
+          onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
+          /* the file-capable edit form — the same injection the product uses */
+          renderEditForm={(p) => <CommentFileEditForm {...p} />}
+          /* attachments render as the SAME thumbnail grid the product uses —
+             press previews in the gallery (the desk's preview state) */
+          renderFiles={(files) => (
+            <FileGrid
+              files={files.map(commentFileToDisplay)}
+              itemSize={84}
+              onFilePress={(f) => setPreview({ files: [f], index: 0 })}
+            />
+          )}
+          /* compact timestamp — the product formats RELATIVE ("2 days ago",
+             date-fns); a template stays dependency-free and deterministic */
+          formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
+        />
+          {/* The pane the toggle switches TO has to be the WHOLE discussion, not
+              half of it: reading without a reply is a dead end, and this is the
+              only surface where the thread has no panel or sheet to fall back on. */}
+        <Composer
+          onSend={(content) => {
+            setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
+            setPendingFiles([]);
+          }}
+          placeholder="Write a comment…"
+          sendLabel="Send"
+          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
+          files={pendingFiles.length > 0 ? (
+            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
+          ) : undefined}
+        />
+    </>
+  );
+
   return (
     // Measure-then-reveal: hidden until the width is known, so the rail/bar
     // choice never visibly reshuffles the page on first paint.
@@ -1665,7 +1813,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
               <Button
                 title={SECTIONS.find((sec) => sec.key === nav.activeKey)?.label ?? "Sections"}
                 color="muted"
-                icon="list-collapse"
                 onPress={() => setSectionsOpen(true)}
               />
             </View>
@@ -1679,10 +1826,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                     current={nav.activeKey === sec.key}
                     onPress={() => {
                       setSectionsOpen(false);
-                      // Leaving comments is part of jumping: in comments view the
-                      // sections are not rendered, so a jump with no exit was a
-                      // control that did nothing.
-                      setCommentsView(false);
                       nav.jumpTo(sec.key);
                     }}
                   />
@@ -1700,21 +1843,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
               it toggles the body; on a narrow page it still opens the sheet, which
               is that layout's panel. The pair reads as a switch: whichever side the
               body is showing wears the filled `secondary`. */}
-          {isDrawer ? (
-            <Button
-              title={commentsView ? "Close comments" : `Comments (${comments.length})`}
-              color="muted"
-              icon="message-square"
-              onPress={() => setCommentsView((v) => !v)}
-            />
-          ) : (
-            <Button
-              title={`Comments (${comments.length})`}
-              color="muted"
-              icon="message-square"
-              onPress={() => setCommentsOpen(true)}
-            />
-          )}
         </View>
       )}
     <View style={{ flex: 1 }}>
@@ -1782,61 +1910,123 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
             slot on RecordSummary at its second consumer. */}
         <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
           <View style={{ flex: 1, minWidth: 0 }}>
+            {/* The SUBJECT leads, the key goes under it. A reader talks about
+                "the Harbor Freight order", never "RC-2026-0418" — the code is how
+                the SYSTEM refers to the record, which makes it a supporting value.
+                The register's identity cell makes the same trade, so the two
+                surfaces name a record the same way. */}
             <RecordSummary
-              title={code}
-              subtitle={customer ? [customer.name, customer.city].filter(Boolean).join(", ") : "No customer"}
+              title={customer ? customer.name : "No customer"}
+              subtitle={[code, customer?.city].filter(Boolean).join(" · ")}
             />
           </View>
         </View>
-      {isDrawer && commentsView ? (
-      <View style={{ gap: 28 }}>
+      <SectionStack>
+
+
+        {/* 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="Notes on this record — everyone with access sees them.">Comments</SectionHeadingTitle>
-            <SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
+            <SectionHeadingTitle description="One desk owns the record at a time. The live desk carries the handoff.">Progress</SectionHeadingTitle>
           </SectionHeading>
-        <CommentList
-          comments={comments}
-          currentMemberId="mem_01"
-          resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
-          onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
-          onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
-          /* the file-capable edit form — the same injection the product uses */
-          renderEditForm={(p) => <CommentFileEditForm {...p} />}
-          /* attachments render as the SAME thumbnail grid the product uses —
-             press previews in the gallery (the desk's preview state) */
-          renderFiles={(files) => (
-            <FileGrid
-              files={files.map(commentFileToDisplay)}
-              itemSize={84}
-              onFilePress={(f) => setPreview({ files: [f], index: 0 })}
-            />
-          )}
-          /* compact timestamp — the product formats RELATIVE ("2 days ago",
-             date-fns); a template stays dependency-free and deterministic */
-          formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
-        />
-          {/* The pane the toggle switches TO has to be the WHOLE discussion, not
-              half of it: reading without a reply is a dead end, and this is the
-              only surface where the thread has no panel or sheet to fall back on. */}
-        <Composer
-          onSend={(content) => {
-            setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
-            setPendingFiles([]);
-          }}
-          placeholder="Write a comment…"
-          sendLabel="Send"
-          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
-          files={pendingFiles.length > 0 ? (
-            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
-          ) : undefined}
-        />
+          <Checklist connected accessibilityLabel="Desk handoff progress">
+            {PHASES.flatMap((p, pi) => {
+              const idxs = p.rungs.map(rungAt);
+              const allDone = idxs.every(rungDone);
+              // The live phase is the first with anything still owed — derived,
+              // like every other position here, from the stamps alone.
+              const firstOpen = PHASES.findIndex((x) => x.rungs.some((k) => !deskSince[k]));
+              const live = !allDone && pi === firstOpen;
+              const shown = !closedPhases.has(p.desk);
+              const owner = deskOwner[p.desk];
+              return [
+                // A PHASE is a name and nothing else: no control, because it owns no
+                // completion of its own, and no body, because a condition hung off a
+                // heading leaves the reader working out which row it was about.
+                <ChecklistGroup
+                  key={p.desk}
+                  title={p.label}
+                  open={shown}
+                  onToggleOpen={() => togglePhase(p.desk)}
+                />,
+                ...(shown ? p.rungs : []).map((k) => {
+                  const i = rungAt(k);
+                  const stamped = deskSince[k] ?? "";
+                  // The one still owed — the rung past the position, read off the
+                  // SAME number everything else here reads.
+                  const isNext = live && i === topRung + 1;
+                  return (
+                    <ChecklistItem
+                      key={k}
+                      title={RUNGS[i].label}
+                      done={rungDone(i)}
+                      current={isNext}
+                      onToggle={(next) => (next ? stampRung(i) : clearRungsFrom(i, RUNGS[i].label))}
+                      // Offered on every REACHED rung, stamped or not: a rung the
+                      // record passed without anyone recording the day is exactly the
+                      // one worth filling in, and a blank date is the honest report
+                      // until someone does. An unreached rung shows nothing — its
+                      // empty ring already says "not yet".
+                      trailing={
+                        rungDone(i) || isNext ? (
+                          <DateStamp
+                            value={stamped || null}
+                            onChange={(iso) => setDeskSince((prev) => ({ ...prev, [k]: iso }))}
+                            locale="en-GB"
+                            accessibilityLabel={"Date for " + RUNGS[i].label}
+                          />
+                        ) : undefined
+                      }
+                      // How long THIS rung has been owed — since the one before it was
+                      // stamped, or since the record opened. Measured at the row rather
+                      // than the phase, because that is the wait a reader asks about.
+                      meta={isNext ? heldFor(i > 0 ? deskSince[RUNGS[i - 1].key] ?? "" : orderDate) : undefined}
+                    >
+                      {isNext ? (
+                        <>
+                          {stage !== "closed" && deliverBy !== "" && new Date(deliverBy) < new Date() ? (
+                            <ChecklistNote tone="warning">Past the due date — chase it or move the date.</ChecklistNote>
+                          ) : null}
+                          {!owner ? (
+                            <ChecklistNote tone="warning" action={{ label: "Set in General", onPress: () => nav.jumpTo("general") }}>
+                              Nobody is assigned to this desk.
+                            </ChecklistNote>
+                          ) : null}
+                          {p.desk === stage && gate ? (
+                            <ChecklistActions>
+                              <Button
+                                title={gate.cta}
+                                color="primary"
+                                onPress={gate.handoff ? () => { setHandoffTo(gate.next); setHandoffOpen(true); } : closeRecord}
+                              />
+                            </ChecklistActions>
+                          ) : null}
+                        </>
+                      ) : null}
+                    </ChecklistItem>
+                  );
+                }),
+              ];
+            })}
+          </Checklist>
         </Section>
-      </View>
-      ) : (
-      <SectionStack>
+        </View>
 
 
+        {/* FEES — the DETAILED money ledger, both directions (charge = billed
+            to the customer, cost = paid to a vendor), distinct from Billing's
+            invoice DOCUMENTS. The drill-down law for a child collection: a
+            compact register row, and EVERY row EXPANDS to its full detail in
+            place — one at a time, no drawer, so the surrounding rows stay
+            readable and coming back costs nothing. Add is create-then-refine —
+            a blank fee appends already open, where it will live. */}
         {/* GENERAL — the MAIN details, FIRST section: the core facts of the
             item; every other section is supplementary. The body is a
             SubsectionStack (space-only beat): a headingless LEAD group (the
@@ -2177,6 +2367,29 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
         </Section>
         </View>
 
+        {/* NO ROOM FOR THE PANEL — so the thread reads as a SECTION, directly
+            under General, because a coworker's note is the first thing to read on
+            a shared record.
+
+            The question is the CONTAINER's width and nothing else: a narrow page
+            and a drawer answer it the same way, and a drawer is simply always
+            narrow. It was briefly a body-SWAP there, behind a toggle — the same
+            fault as the old top-right button in a different shape, since either
+            way the reader has to know a control exists, press it, and give up the
+            record to read a note. Wide keeps the thread beside the record; every
+            other width puts it here. */}
+        {!wide ? (
+          <View onLayout={nav.register("comments")}>
+          <Section>
+            <SectionHeading>
+              <SectionHeadingTitle description="Notes on this record — everyone with access sees them.">Comments</SectionHeadingTitle>
+              <SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
+            </SectionHeading>
+            {commentsThread}
+          </Section>
+          </View>
+        ) : null}
+
         {/* DOCUMENTS — the document desk: the register Table (search, Create
             documents, Add files) whose selection feeds the Use-AI fork below.
             No FileDropTarget of its OWN — the WHOLE-RECORD target above already
@@ -2382,7 +2595,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                 <DetailRow label="Trip no.">
                   <InlineTextInput value={trip} onSave={persist(setTrip)} placeholder="Add trip number…" accessibilityLabel="Trip number" />
                 </DetailRow>
-                {/* A ROUTE IS NOT FIELDS — see `RouteStops` above. It lives in
+        {/* A ROUTE IS NOT FIELDS — see `RouteStops` above. It lives in
                     a `DetailRow` so it keeps the section's label column and the
                     reader's eye stays on one x; what sits in the VALUE is a list,
                     because that is what a route is. */}
@@ -2402,192 +2615,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
         </View>
 
 
-        {/* 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="One desk owns the record at a time. The live desk carries the handoff.">Progress</SectionHeadingTitle>
-          </SectionHeading>
-          <Pipeline accessibilityLabel="Desk handoff progress">
-            {/* The ladder reads its own STAMPS, and nothing else. Driving `status`
-                off the record's `stage` while the tick wrote a date left two
-                sources of truth for one position: the ring could never change
-                state, so pressing it did nothing visible — no fill, no spring, no
-                movement — which is what "the progress is broken" looks like.
-                A rung is done when IT carries a date, independently of its
-                neighbours, so any rung can be ticked and un-ticked on its own. */}
-            {STEPS.map((d, i) => {
-              const stampedAt = deskSince[d.key] ?? "";
-              const firstOpen = STEPS.findIndex((x) => !deskSince[x.key]);
-              const status: "done" | "current" | "upcoming" = stampedAt ? "done" : i === firstOpen ? "current" : "upcoming";
-              const owner = deskOwner[d.key];
-              return (
-                <PipelineStage
-                  key={d.key}
-                  status={status}
-                  title={d.label}
-                  // Prose the reader can't set — how long it has sat here.
-                  meta={status === "current" ? heldFor(stampedAt) : undefined}
-                  // The tick IS the stamp: pressing the ring records today, pressing
-                  // it again clears the stage. ANY ring takes a press (`Pipeline`'s
-                  // default) because this ladder is a RECORD — entering three stages
-                  // that already happened must not cost three presses plus three
-                  // date corrections.
-                  onToggle={(next) => {
-                    if (next) {
-                      // Ticking AHEAD fills the gap. A ladder is a run, not a set
-                      // of independent boxes: leaving 3 and 4 blank because someone
-                      // ticked 5 renders "done, blank, blank, done", which claims a
-                      // record reached the end without passing through the middle.
-                      // Every rung at or below the one pressed that has no stamp
-                      // gets today — the day this is being recorded, which is the
-                      // same thing a single tick already means. Each one is then
-                      // one click away from its real date, and the ones that
-                      // already carry a date are left exactly as they are.
-                      const today = new Date().toISOString().slice(0, 10);
-                      setDeskSince((prev) => {
-                        const filled = { ...prev };
-                        STEPS.slice(0, i + 1).forEach((x) => { if (!filled[x.key]) filled[x.key] = today; });
-                        return filled;
-                      });
-                      return;
-                    }
-                    // Un-ticking walks the record BACK, and everything the stages
-                    // above it recorded goes with it — their dates and the facts
-                    // they own. That is destructive and invisible from the ring,
-                    // so it is named before it happens: which stages, and that it
-                    // is their data too, not just their dates. A stage with
-                    // nothing above it needs no warning — there is nothing to lose.
-                    const above = STEPS.slice(i + 1).filter((x) => deskSince[x.key] || deskOwner[x.key]);
-                    const revert = () =>
-                      STEPS.slice(i).forEach((x) => {
-                        setDeskSince((prev) => ({ ...prev, [x.key]: "" }));
-                        setDeskOwner((prev) => ({ ...prev, [x.key]: "" }));
-                      });
-                    if (above.length === 0) { revert(); return; }
-                    Alert.alert(
-                      `Reopen ${d.label}?`,
-                      `${above.map((x) => x.label).join(" and ")} ${above.length > 1 ? "are" : "is"} recorded after it. Reopening clears their dates and everything they hold — owner included. This can't be undone.`,
-                      [
-                        { text: "Cancel", style: "cancel" },
-                        { text: "Reopen and clear", style: "destructive", onPress: revert },
-                      ],
-                    );
-                  }}
-                  // The date rides the title's own row and READS as text — `bare`
-                  // shows nothing at rest and fades its border in on hover, so the
-                  // ladder stays a column of dates to scan rather than a column of
-                  // controls, and the one that needs correcting is still one click.
-                  //
-                  // That click is how a stamp gets BACKDATED, which the tick alone
-                  // cannot do: ticking always writes today, and a ladder filled in
-                  // after the fact is full of days that already passed. Rendering
-                  // the date as inert text would have cost exactly that.
-                  //
-                  // An unstamped rung shows nothing — its empty ring already says
-                  // "not yet", and a "Not recorded" placeholder on every rung ahead
-                  // says the same thing again in more words.
-                  // What the stage HOLDS, beside its name: the date it was
-                  // stamped, and any value it owns that has actually been set.
-                  // A stage's facts are otherwise only visible once you read down
-                  // into its body, so a ladder of five says nothing but five
-                  // names — the reader has to open each to learn anything. Only
-                  // values that EXIST are shown; an empty one would print a label
-                  // with nothing after it on every rung ahead.
-                  // The stage's own line carries what is ABOUT the stage — when it
-                  // happened, and the way into changing it — while the body holds
-                  // what it CONTAINS. Edit sat under the values, which put the verb
-                  // below the thing it acts on and moved it down every time a stage
-                  // gained a field.
-                  trailing={
-                    <View style={{ flexDirection: "row", alignItems: "baseline", gap: 10 }}>
-                      <DateStamp
-                        value={stampedAt || null}
-                        onChange={(iso) => setDeskSince((prev) => ({ ...prev, [d.key]: iso }))}
-                        locale="en-GB"
-                        accessibilityLabel={"Date for " + d.label}
-                      />
-                      {/* Edit ⇄ Done, one control in one place. It is a text LINK
-                          and not a button on purpose: the inline editors commit on
-                          their own (blur, Enter, a pick), so nothing is pending when
-                          you press this — it only puts the stage back to reading.
-                          A `Button` would promise a SAVE that already happened and
-                          make a reader wonder what they lose by navigating away. */}
-                      {d.desk && status !== "upcoming" && status !== "current" ? (
-                        <Pressable
-                          onPress={() => setEditingDesk(editingDesk === d.key ? "" : d.key)}
-                          accessibilityRole="button"
-                          accessibilityLabel={`${editingDesk === d.key ? "Done editing" : "Edit"} ${d.label}`}
-                        >
-                          <TextLink size="xs">{editingDesk === d.key ? "Done" : "Edit"}</TextLink>
-                        </Pressable>
-                      ) : null}
-                    </View>
-                  }
-                >
-                  {/* A reached desk owns its own facts — and keeps owning them
-                      once the record has moved on. */}
-                  {status !== "upcoming" && d.desk ? (
-                    status === "current" || editingDesk === d.key ? (
-                      <PipelineField label="Owner" maxWidth={260}>
-                        <InlineMemberSelect
-                          members={TEAM}
-                          value={owner}
-                          onSave={(v) => setDeskOwner((p) => ({ ...p, [d.key]: v }))}
-                          placeholder="Unassigned"
-                          accessibilityLabel={`Owner for ${d.label}`}
-                        />
-                      </PipelineField>
-                    ) : (
-                      // Read-only, but still SHOWN — and shown by whatever renders
-                      // that kind of value properly: a member as a `MemberChip`, a
-                      // select as its `Badge`. Collapsing them to muted text would
-                      // make the same fact look different depending on whether the
-                      // stage happened to be the live one, and a reader would have
-                      // to decode two renderings of one field. Only what is SET
-                      // appears; an empty field has nothing to display read-only.
-                      // No label. A label tells you what you are FILLING IN —
-                      // read-only, the value says what it is: a face and a name is
-                      // an owner, a badge is a status. Printing "Owner" over a
-                      // member chip is the field talking about itself, and down a
-                      // ladder it doubles the lines for nothing.
-                      owner ? <MemberChip name={TEAM.find((x) => x.id === owner)?.name ?? owner} size={22} /> : null
-                    )
-                  ) : 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}
-                  {status === "current" && d.desk === stage && gate ? (
-                    <PipelineActions>
-                      <Button
-                        title={gate.cta}
-                        color="primary"
-                        onPress={gate.handoff ? () => { setHandoffTo(gate.next); setHandoffOpen(true); } : closeRecord}
-                      />
-                    </PipelineActions>
-                  ) : null}
-                </PipelineStage>
-              );
-            })}
-          </Pipeline>
-        </Section>
-        </View>
-
-
-        {/* FEES — the DETAILED money ledger, both directions (charge = billed
-            to the customer, cost = paid to a vendor), distinct from Billing's
-            invoice DOCUMENTS. The drill-down law for a child collection: a
-            compact register row, and EVERY row EXPANDS to its full detail in
-            place — one at a time, no drawer, so the surrounding rows stay
-            readable and coming back costs nothing. Add is create-then-refine —
-            a blank fee appends already open, where it will live. */}
         <View onLayout={nav.register("fees")}>
         <Section>
           <SectionHeading>
@@ -2987,74 +3014,40 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                   <SubsectionHeading>
                     <SubsectionHeadingTitle>{g.party(customer?.name ?? null)}</SubsectionHeadingTitle>
                   </SubsectionHeading>
-                  {/* the PICKER rows ride the Task compound — IT owns the
-                      geometry (the row band, the two gutters, the indent
-                      everything hung under a row takes); hand-rolling this
-                      anatomy is how alignment drifts. controlWidth 24 =
-                      CheckboxInput; and no row here carries a ⋯, so the list
-                      declines the action gutter and its captions run to the
-                      surface's edge. */}
-                  <TaskList controlWidth={24} actionWidth={0}>
+                  {/* A SELECTION, not a run of work: which forms to produce. So the
+                      mark is the SQUARE the kit spends on picking — a filled RING
+                      here would read as "already done" to anyone who has learned
+                      what a ring means one section above. And UNCONNECTED, because
+                      a line between them would claim an order the work does not
+                      have. Same compound as the Progress ladder, two axes apart —
+                      and the compound owns the geometry (the row band, the marker
+                      gutter, the indent anything hung under a row takes), because
+                      hand-rolling that anatomy is how alignment drifts. */}
+                  <Checklist connected={false} mark="select">
                     {shown.map((f) => {
-                      // READINESS per row, CO-LOCATED: a not-ready row's mark NAMES what's
-                      // missing (muted at rest — discoverable without checking; warning once
-                      // checked, it now blocks), and the FIX sits right under it in the
-                      // `expansion` — an `Inset` (a FORM surface, never a Callout, which is an
-                      // ARIA alert) with the editor for each gap, saved onto the record in
-                      // place. Drafts are keyed BY FIELD, so a field two checked forms share
-                      // is entered once and one Save resolves both. A ready form stays SILENT.
+                      // READINESS per row: a not-ready row NAMES what is missing and
+                      // points at the section that owns it. Nothing is collected here
+                      // — see the section header for why a checklist reports.
                       const missing = missingOf(f);
                       const checked = chosenForms.has(f.id);
                       return (
-                        <TaskItem key={f.id}>
-                          <TaskStatus>
-                            <CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />
-                          </TaskStatus>
-                          {/* A STRING title carries the cell inset and the row's band from the
-                              compound, so it sits in line with the editable titles elsewhere on
-                              the page and the checkbox stays beside it above its caption. */}
-                          <TaskTitle>{f.label}</TaskTitle>
-                          {/* "Needs: Tax ID, Delivery address" is a SENTENCE about this row, so it
-                              is a `TaskCaption` — its own line under the title. Not a
-                              `TaskSubRow`, which is a NAMED value the reader SETS: prose given a
-                              label reads as a field nobody can edit. */}
+                        <ChecklistItem
+                          key={f.id}
+                          title={f.label}
+                          done={checked}
+                          onToggle={(on) => toggleForm(f.id, on)}
+                        >
                           {missing.length > 0 ? (
-                            <TaskCaption>
-                              <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>
-                                <Icon name="circle-alert" size={13} color={checked ? colors.amber[500] : colors.zinc[400]} />
-                                <Text size="xs" color={checked ? "warning" : "muted"} style={{ flexShrink: 1 }}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
-                              </View>
-                            </TaskCaption>
-                          ) : null}
-                          {checked && missing.length > 0 ? (
-                            <TaskDetail>
-                            <Inset>
-                              <Text size="xs" color="muted">These values save onto the order and unlock the form.</Text>
-                              {missing.map((k) => (
-                                <FormTextInput
-                                  key={k}
-                                  label={NEEDS[k].label}
-                                  description={NEEDS[k].hint}
-                                  value={fillDrafts[k] ?? ""}
-                                  onChangeText={(t) => setFillDrafts((d) => ({ ...d, [k]: t }))}
-                                  accessibilityLabel={NEEDS[k].label}
-                                />
-                              ))}
-                              <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-                                <Button
-                                  title="Save fields"
-                                  color="secondary"
-                                  disabled={missing.every((k) => !(fillDrafts[k] ?? "").trim())}
-                                  onPress={() => saveNeeds(missing)}
-                                />
-                              </View>
-                            </Inset>
-                            </TaskDetail>
+                            // Muted at rest — discoverable without checking; WARNING
+                            // once checked, because it now blocks.
+                            <ChecklistNote tone={checked ? "warning" : "muted"}>
+                              {`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")} — fill these in Customer`}
+                            </ChecklistNote>
                           ) : null}
-                        </TaskItem>
+                        </ChecklistItem>
                       );
                     })}
-                  </TaskList>
+                  </Checklist>
                   {hidden > 0 ? (
                     <View style={{ flexDirection: "row" }}>
                       <Button
@@ -3087,7 +3080,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                 {blockingNeeds.length > 0 ? (
                   <Callout tone="warning">
                     <CalloutText>
-                      {`The checked forms still need ${blockingNeeds.map((k) => NEEDS[k].label.toLowerCase()).join(" and ")} — ${blockingNeeds.length === 1 ? "it prints" : "they print"} blank unless filled above.`}
+                      {`The checked forms still need ${blockingNeeds.map((k) => NEEDS[k].label.toLowerCase()).join(" and ")} — ${blockingNeeds.length === 1 ? "it prints" : "they print"} blank until filled on the record.`}
                     </CalloutText>
                   </Callout>
                 ) : null}
@@ -3222,7 +3215,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
         </View>
 
       </SectionStack>
-      )}
       </View>
       </FileDropTarget>
       </>
@@ -3358,53 +3350,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
       </View>
     </ScrollView>
 
-    {/* Narrow: the same thread, in the panel shape a small screen has — a
-        right-docked Drawer off the bar's own comments control. Never in drawer
-        mode: a Drawer inside a Drawer traps the reader one layer deeper than the
-        record they opened. */}
-    <Drawer open={commentsOpen && !isDrawer} onOpenChange={setCommentsOpen} title="Comments" width={380}>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 20, gap: 12 }}>
-        <CommentList
-          comments={comments}
-          currentMemberId="mem_01"
-          resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
-          onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
-          onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
-          /* the file-capable edit form — the same injection the product uses */
-          renderEditForm={(p) => <CommentFileEditForm {...p} />}
-          /* attachments render as the SAME thumbnail grid the product uses —
-             press previews in the gallery (the desk's preview state) */
-          renderFiles={(files) => (
-            <FileGrid
-              files={files.map(commentFileToDisplay)}
-              itemSize={84}
-              onFilePress={(f) => setPreview({ files: [f], index: 0 })}
-            />
-          )}
-          /* compact timestamp — the product formats RELATIVE ("2 days ago",
-             date-fns); a template stays dependency-free and deterministic */
-          formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
-        />
-        
-      </ScrollView>
-      <View style={{ padding: 20, paddingTop: 0 }}>
-{/* THE kit Composer — the one composing surface everywhere (chat,
-            agent prompts, comments): attach via actionsButton, the staged
-            files (removable until Send) ride the files slot. */}
-        <Composer
-          onSend={(content) => {
-            setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
-            setPendingFiles([]);
-          }}
-          placeholder="Write a comment…"
-          sendLabel="Send"
-          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
-          files={pendingFiles.length > 0 ? (
-            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
-          ) : undefined}
-        />
-      </View>
-    </Drawer>
 
     {/* ── the document desk's overlays */}
     <FloatingActionBar count={sel.count} label={sel.count === 1 ? "file selected" : "files selected"} onClear={sel.clear}>
@@ -3695,45 +3640,12 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
           <SectionHeadingTitle>Comments</SectionHeadingTitle>
           <SectionHeadingMeta>{`${comments.length} ${comments.length === 1 ? "comment" : "comments"}`}</SectionHeadingMeta>
         </SectionHeading>
+        {/* The panel's OWN scroller, so a long thread scrolls inside itself and
+            never lengthens the record. The thread inside it is the same one the
+            section renders — defined once, so the two cannot drift. */}
         <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12, paddingBottom: 8 }}>
-        <CommentList
-          comments={comments}
-          currentMemberId="mem_01"
-          resolveMember={(mid) => { const m = TEAM.find((x) => x.id === mid); return m ? { id: m.id, name: m.name ?? null } : null; }}
-          onEdit={(cid, content, efiles) => setComments((prev) => prev.map((c) => (c.id === cid ? { ...c, content, files: efiles ?? undefined, updated_at: new Date().toISOString() } : c)))}
-          onDelete={(cid) => setComments((prev) => prev.filter((c) => c.id !== cid))}
-          /* the file-capable edit form — the same injection the product uses */
-          renderEditForm={(p) => <CommentFileEditForm {...p} />}
-          /* attachments render as the SAME thumbnail grid the product uses —
-             press previews in the gallery (the desk's preview state) */
-          renderFiles={(files) => (
-            <FileGrid
-              files={files.map(commentFileToDisplay)}
-              itemSize={84}
-              onFilePress={(f) => setPreview({ files: [f], index: 0 })}
-            />
-          )}
-          /* compact timestamp — the product formats RELATIVE ("2 days ago",
-             date-fns); a template stays dependency-free and deterministic */
-          formatTimestamp={(iso) => { const d = new Date(iso); return `${d.toLocaleDateString("en-GB", { day: "numeric", month: "short" })}, ${d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`; }}
-        />
-        
+          {commentsThread}
         </ScrollView>
-{/* THE kit Composer — the one composing surface everywhere (chat,
-            agent prompts, comments): attach via actionsButton, the staged
-            files (removable until Send) ride the files slot. */}
-        <Composer
-          onSend={(content) => {
-            setComments((prev) => [...prev, { id: `cm_${(commentSeq += 1)}`, member_id: "mem_01", content, files: pendingFiles.length > 0 ? pendingFiles : undefined, created_at: new Date().toISOString(), updated_at: new Date().toISOString() }]);
-            setPendingFiles([]);
-          }}
-          placeholder="Write a comment…"
-          sendLabel="Send"
-          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
-          files={pendingFiles.length > 0 ? (
-            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
-          ) : undefined}
-        />
       </View>
     )}
 
@@ -3747,7 +3659,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
             real app), visually apart from the outline items. */}
         <BackButton label="Records" onPress={() => {}} />
         <View style={{ gap: 2 }}>
-          {SECTIONS.map((sec) => (
+          {SECTIONS.filter((sec) => sec.key !== "comments").map((sec) => (
             <MenuButton
               key={sec.key}
               icon={sec.icon}