@lotics/ui 43.1.0 → 43.3.0

package/examples/tpl_record.tsx

@@ -1,14 +1,13 @@
 import { Fragment, useEffect, useRef, useState, type ReactNode, useMemo } from "react";
 import { Pressable, ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { colors, solid } from "@lotics/ui/colors";
+import { colors, solid, withAlpha } from "@lotics/ui/colors";
 import { DRAWER_GUTTER } from "@lotics/ui/drawer";
 import { Button } from "@lotics/ui/button";
 import { BackButton } from "@lotics/ui/back_button";
 import { Divider } from "@lotics/ui/divider";
 import { Link } from "@lotics/ui/link";
 import { Icon, type IconName } from "@lotics/ui/icon";
-import { Timeline, type TimelineItem } from "@lotics/ui/timeline";
 import { MediaPlayer } from "@lotics/ui/media_player";
 import { Markdown } from "@lotics/ui/markdown";
 import { TextDisclosure } from "@lotics/ui/text_disclosure";
@@ -40,6 +39,7 @@ import { FileBadge } from "@lotics/ui/file_badge";
 import { FileRows } from "@lotics/ui/file_rows";
 import { InlineFiles } from "@lotics/ui/inline_files";
 import { FileGrid } from "@lotics/ui/file_grid";
+import { FilesEditor } from "@lotics/ui/files_editor";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { InlineStatic } from "@lotics/ui/inline_static";
 import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
@@ -52,12 +52,9 @@ import { MemberSelect, type MemberSelectMember } from "@lotics/ui/member_select"
 import { EmptyState } from "@lotics/ui/empty_state";
 import { FormField } from "@lotics/ui/form_field";
 import { TextInputField } from "@lotics/ui/text_input_field";
-import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { FileThumbnail, THUMBNAIL_SIZE, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
-import { MemberChip } from "@lotics/ui/member_chip";
-import { WaveAvatar } from "@lotics/ui/wave_avatar";
 import { Inset } from "@lotics/ui/inset";
-import { isImageMimeType } from "@lotics/ui/mime";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { FileRow } from "@lotics/ui/file_row";
@@ -330,19 +327,9 @@ interface ActivityEntry {
    * and the row has to say so rather than borrow a phrase from the enums.
    */
   gist?: string;
-  direction: "in" | "out";
   /** The medium as a person would say it, not an enum: "Zalo", "Google Meet". */
   over: string;
   when: string;
-  /**
-   * WHO put this here — and this feed has two kinds of author, so the type has
-   * two shapes. A person gets a `MemberChip`; an automation, an extraction or an
-   * agent gets `WaveAvatar`, the kit's mark for a non-human identity. Modelling
-   * both as one string forces the surface to give a recording bot a face and two
-   * initials, which is a small fabrication every reader notices and no test
-   * catches.
-   */
-  by: { kind: "member"; name: string; image?: string } | { kind: "system"; name: string };
   /** An unanswered outreach is a real state and reads differently from a reply. */
   awaiting?: boolean;
 
@@ -370,15 +357,16 @@ interface ActivityEntry {
    * Two rules, both learned by getting this wrong. It must be CAPTURABLE: a
    * call's attendees are stored nowhere, so a line naming them can only be
    * invented, and a block with no source teaches app authors to fabricate one.
-   * And it must be ADDITIVE: the record IS the counterparty, the supporting line
-   * gives the direction and the footer names who logged it, so "From <them>, to
-   * <us>" is three facts the row already carries. What is left is the third
-   * party — which is the entire value of the block.
+   * And it must be ADDITIVE: the record IS the counterparty, so "From <them>, to
+   * <us>" is a fact the surface already carries. What is left is the third party
+   * — which is the entire value of the block.
    */
   participants?: string;
   /** An email's subject — the one thing an email has that nothing else does. */
   subject?: string;
-  /** Prose a PERSON wrote: an email body, a note. Markdown. */
+  /** The message a COUNTERPARTY sent — an email body. Markdown, and read-only:
+   *  it is a record of what they said, which is the same reason a transcript is
+   *  not editable. Our own write-up of an entry is `gist`, which is a field. */
   body?: string;
   /** Prose a MODEL wrote. Separate from `body` rather than a flag on it, because
    *  one entry routinely holds both — a rep's own note and the machine's reading
@@ -459,10 +447,8 @@ const ACTIVITY: ActivityEntry[] = [
     // Note the author: a bot, which is why `by` is not a name string.
     key: "a0",
     kind: "call",
-    direction: "in",
     over: "Phone",
     when: "Today, 11:40",
-    by: { kind: "system", name: "Recording bot" },
     media: { src: "/sample-audio.mp3", label: "Call recording" },
     transcript: CALL_TRANSCRIPT,
   },
@@ -473,10 +459,8 @@ const ACTIVITY: ActivityEntry[] = [
     key: "a3",
     kind: "video",
     gist: "Demo — the reconciliation step is what sold it; pricing still open",
-    direction: "out",
     over: "Google Meet",
     when: "Today, 10:15",
-    by: { kind: "member", name: "Sarah Chen" },
     media: { src: "/sample-video.webm", label: "Demo recording" },
     transcript: TRANSCRIPT,
     // NO human note on this entry, deliberately. It carried "the person who
@@ -494,24 +478,21 @@ const ACTIVITY: ActivityEntry[] = [
     key: "a1",
     kind: "note",
     gist: "They want the integration layer built and maintained, not the platform replaced",
-    direction: "out",
     over: "Note",
     when: "Today, 09:12",
-    by: { kind: "member", name: "Sarah Chen" },
   },
   {
     key: "a1b",
     kind: "note",
-    // The gist and the body are the SAME string on purpose: the row clamps it to
-    // two lines and the detail carries it whole. That is a truncation and its
-    // source — the drill-down every expandable register row makes — not a second
-    // copy of one value.
+    // A LONG one, to prove the entry grows with its prose instead of clamping it.
+    // This used to be stored twice — the same string as `gist` AND as `body` —
+    // on the argument that one was a truncation of the other. It was not: both
+    // rendered, one under the other, and the reader saw the sentence twice. The
+    // field auto-grows, so the long form IS the value and there is nothing to
+    // drill into.
     gist: LONG_NOTE,
-    body: LONG_NOTE,
-    direction: "in",
     over: "Site visit",
     when: "Today, 08:05",
-    by: { kind: "member", name: "Sarah Chen" },
   },
   {
     // AN EMAIL carries three things nothing else does: who it was between, what
@@ -523,10 +504,8 @@ const ACTIVITY: ActivityEntry[] = [
     subject: "Re: Pricing for the customs documentation module",
     participants: "Copied to accounts@",
     gist: "Asked for the per-document price in writing before the board meeting",
-    direction: "in",
     over: "Email",
     when: "Yesterday, 16:40",
-    by: { kind: "system", name: "Mailbox sync" },
     body:
       "Thanks for the walkthrough. Before I take this to the board on Thursday I need the " +
       "per-document price **in writing**, and confirmation that the customs forms come out of " +
@@ -542,10 +521,8 @@ const ACTIVITY: ActivityEntry[] = [
     key: "a6",
     kind: "message",
     gist: "Asked in the forwarders' group who handles Japan customs paperwork",
-    direction: "in",
     over: "Facebook Group",
     when: "10 Aug, 21:30",
-    by: { kind: "system", name: "Capture" },
     files: [
       { id: "s1", filename: "post.png", mimeType: "image/png", url: img("Post", "#3f3f46") },
       { id: "s2", filename: "profile.png", mimeType: "image/png", url: img("Profile", "#52525b") },
@@ -556,10 +533,8 @@ const ACTIVITY: ActivityEntry[] = [
     key: "a4",
     kind: "call",
     gist: "34 minutes — locked into their current platform for six months, wants us to sit on top of it",
-    direction: "out",
     over: "Phone",
     when: "3 Aug, 11:20",
-    by: { kind: "member", name: "Sarah Chen" },
     media: { src: "/sample-audio.mp3", label: "Call recording" },
     transcript: CALL_TRANSCRIPT,
     bodyByAi:
@@ -573,50 +548,13 @@ const ACTIVITY: ActivityEntry[] = [
     key: "a5",
     kind: "message",
     gist: "Sent the one-page summary; no reply yet",
-    direction: "out",
     over: "Zalo",
     when: "28 Jul, 18:05",
-    by: { kind: "member", name: "Sarah Chen" },
     awaiting: true,
     files: [{ id: "f-sum", filename: "Summary — one page.pdf", mimeType: "application/pdf", url: "/sample.pdf" }],
   },
 ];
 
-/**
- * What came WITH the entry, as a clause for the supporting line.
- *
- * A sentence rather than a row of glyphs: an icon run is compact but needs a key
- * the reader has to learn before the first row means anything, and the line it
- * would save already exists.
- *
- * ONLY on an entry with no gist. There, the attachments ARE the content — "not
- * written up yet" is useless without "there is a recording to write it up from".
- * Anywhere else it repeats what the body shows one press away, and it is not
- * free: measured at 375 the supporting line already fills the two lines
- * `Timeline` clamps it at, so an unconditional clause clips the date it was
- * appended to. The clause APPEARING is therefore itself the signal that the row
- * is otherwise empty.
- */
-function arrivedWith(a: ActivityEntry): string {
-  if (a.gist) return "";
-  // Name the thing, not its relation to the sentence: "Attachment attached" is
-  // the shape a templated clause produces and it reads as a stutter.
-  // Lower case throughout, capitalised once at the end — joining already-capital
-  // words gave "Recording, Transcript and file attached." the moment a third
-  // artifact appeared, which no fixture reached and every real row eventually
-  // will. The type guard rather than `filter(Boolean)` is what removes the `!`
-  // on the last element: `Boolean` does not narrow.
-  const parts = [
-    a.media ? "recording" : null,
-    a.transcript ? "transcript" : null,
-    a.files?.length ? "file" : null,
-  ].filter((x): x is string => x !== null);
-  if (parts.length === 0) return "";
-  const list =
-    parts.length === 1 ? parts[0] : `${parts.slice(0, -1).join(", ")} and ${parts.at(-1)}`;
-  return ` ${list[0].toUpperCase()}${list.slice(1)} attached.`;
-}
-
 /**
  * THE ACTIVITY BODY — one component, every block, each rendered only if the
  * entry carries it.
@@ -628,60 +566,201 @@ function arrivedWith(a: ActivityEntry): string {
  * source, then what people made of it, then what came with it, then where it
  * came from and who filed it.
  */
-function ActivityBody({
+/**
+ * ONE ENTRY in the activity feed — a comment, not a log line.
+ *
+ * `Timeline` renders its label INSIDE the row's press target. That is right for
+ * an event whose text is derived and read-only ("Stage changed to Won"), and
+ * wrong here, because the gist is the one thing on an entry a PERSON wrote, and
+ * text inside a button cannot be edited where it sits. Four repairs came out of
+ * working around that — the verbs moved off the row, the label learned to
+ * un-clamp, the body's second copy of the gist came out, and the Edit verb ended
+ * up a scroll away from the sentence it edits. None were independent: each was
+ * the arrangement pushing back.
+ *
+ * So the gist stops being a label. It is a RESIDENT field, always editable in
+ * place, with no mode and no Edit verb — the same treatment every other authored
+ * value on this record gets. The old argument against a resident editor here
+ * ("the gist is already the row's label, so it renders the sentence twice")
+ * disappears the moment it stops being one.
+ */
+function ActivityEntryRow({
   a,
-  editing,
   onEdit,
-  onToggleEdit,
   onDelete,
 }: {
   a: ActivityEntry;
-  /** Set by the footer's Edit verb — see the fields below for why it is a MODE
-   *  here rather than the resident editors every other section uses. */
-  editing: boolean;
-  onEdit: (patch: Partial<Pick<ActivityEntry, "gist" | "body">>) => void;
-  onToggleEdit: () => void;
+  onEdit: (patch: Partial<Pick<ActivityEntry, "gist" | "files">>) => void;
   onDelete: () => void;
 }) {
   const [showTranscript, setShowTranscript] = useState(false);
-  const images = (a.files ?? []).filter((f) => isImageMimeType(f.mimeType));
-  const docs = (a.files ?? []).filter((f) => !isImageMimeType(f.mimeType));
+  const files = a.files ?? [];
+  // ONE function behind every way in — the menu verb, and a drop onto the entry.
+  // Two paths that append to the same list must not be two implementations of
+  // appending: that is where one of them ends up REPLACING instead, silently,
+  // months later.
+  const addFiles = (picked: File[]) => {
+    if (picked.length === 0) return;
+    onEdit({ files: [...files, ...picked.map(asDisplayFile)] });
+  };
+  // The menu verb exists because it has to work on an entry that has NO files
+  // yet — that entry has no list to hang a CTA off, and no obvious place to aim
+  // a drag either.
+  const attach = () => { void pickFiles({ accept: ATTACH_ACCEPT, multiple: true }).then(addFiles); };
+  const accent = a.awaiting ? solid("amber") : colors.zinc[400];
+  // What the fold contains, named so the reader can decide without opening it.
+  // NOT `arrivedWith` — that answers a different question (it speaks only when
+  // the entry has no gist, because there the attachments are the whole content)
+  // and reusing it here left the fold unrendered, and the recording unreachable,
+  // on every entry somebody had written up.
 
   return (
-    <View style={{ gap: 12 }}>
-      {/* THE WORDS A PERSON WROTE — the only editable thing on an entry, and the
-          one place this template does NOT use a resident editor.
-
-          Exactly two blocks were authored by a person: the gist and the note.
-          Everything else is derived (participants, off a header), verbatim (the
-          transcript), an artifact (the media, the files) or a machine's output
-          (the summary — you re-run that, you do not hand-edit it). So the verb
-          is "Edit", not "Edit entry": an entry is not an editable thing, the
-          words typed into it are.
-
-          WHY A MODE, when every other section on this record is a resident
-          `InlineTextInput`. Those sections show each value ONCE. Here the gist is
-          already the row's label, so a resident field renders the same sentence
-          twice, stacked and identical — which is what it looked like, and no
-          amount of quieting the frame fixes a sentence appearing twice.
-
-          THE EXCEPTION IS AN EMPTY GIST, and it is the important half: an
-          automation files an entry the moment a recording lands, the row says
-          "Not written up yet", and there is nothing to duplicate. The field shows
-          itself and invites the sentence. Without that the feed can RECEIVE an
-          entry it gives you no way to finish — a dead end on the most common row
-          a multi-writer feed produces. An empty value shows its field; a filled
-          one waits to be asked. */}
-      {editing || !a.gist ? (
+    /* AN ENTRY IS ITS OWN DROP REGION — a file dropped on THIS conversation
+       attaches to it, rather than travelling to the record's Documents intake
+       and leaving the reader to relate the two by hand.
+
+       Nesting inside the whole-record target is sound rather than lucky:
+       `FileDropTarget` stops propagation on every drag/drop event, so the
+       innermost region wins and the outer one neither fires nor lights. The
+       target paints its own affordance from a plain child, which is what makes
+       the destination legible mid-drag — with two live regions the drag has to
+       say WHICH one it is about to land in. */
+    <FileDropTarget onFiles={addFiles} accept={ATTACH_ACCEPT} style={{ flexDirection: "row", gap: 12 }}>
+      {/* The medium as a glyph, replacing the disc and spine. A feed of ENTRIES
+          reads as a stack; a spine drawn past an editable field reads as
+          decoration rather than as sequence. */}
+      <View
+        style={{
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: withAlpha(accent, 0.1),
+        }}
+      >
+        <Icon name={ACTIVITY_ICON[a.kind]} size={16} color={accent} />
+      </View>
+
+      <View style={{ flex: 1, gap: 8 }}>
+        {/* THE BYLINE — over what, and when. Derived, so none of it is editable,
+            and none of it repeats the prose below.
+
+            NO DIRECTION. "From us over Note" is a category error — a note has no
+            counterparty to be from — and the shape that produces it is the tell:
+            direction was being stamped on every entry whether or not the medium
+            had two ends. On the media that do have two ends it is real but
+            already said twice over: its one ACTIONABLE consequence (we reached
+            out, nobody answered) is the amber `awaiting` mark on the glyph, and
+            the rest is history the gist states in words — "Sent the one-page
+            summary", "They want the integration layer built". Eight characters
+            of chrome down the whole column to restate the sentence beneath.
+
+            NO AUTHOR. It carried one for a while, in two shapes: a face for a
+            person, `WaveAvatar` for an automation. Both are gone, and the reason
+            the machine one was wrong is the reason the human one had to go with
+            it. A recording is MADE by the people in the meeting and merely
+            transcribed by a service, so "Recording bot" named the plumbing and
+            not the author — a fabricated byline on somebody else's conversation.
+            Once that shape is refused, showing an author on the entries that
+            happen to have one is worse than showing none: the reader learns that
+            the byline is present when we know it, which is a fact about our
+            pipeline. The record has an Owner, and an entry on a customer's
+            history does not restate it eight times.
+
+            What a machine actually TOUCHED is still visible where it changes how
+            you read something — the fold names an "AI summary", and a transcript
+            is labelled verbatim. That is attribution of the CONTENT, which is
+            the only kind that was ever load-bearing here.
+
+            The actions sit at the TOP RIGHT rather than a footer — a footer put
+            Edit a scroll away from the sentence it edits. The menu is a SIBLING
+            of the content, so it nests no button inside another. */}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+            <Text size="xs" color="muted">
+              {`${a.over}, ${a.when}`}
+            </Text>
+            {a.sourceUrl ? <Link size="xs" onPress={() => {}}>{a.sourceUrl}</Link> : null}
+          </View>
+          <ActionMenu
+            accessibilityLabel="Entry actions"
+            items={[
+              {
+                key: "attach",
+                label: "Attach files",
+                icon: "paperclip",
+                onPress: attach,
+              },
+              {
+                key: "delete",
+                label: "Delete",
+                icon: "trash",
+                danger: true,
+                onPress: () =>
+                  Alert.alert(
+                    "Delete this entry?",
+                    "It leaves the customer's history and stops counting toward the activity total. This cannot be undone.",
+                    [
+                      { text: "Cancel", style: "cancel" },
+                      { text: "Delete", style: "destructive", onPress: onDelete },
+                    ],
+                  ),
+              },
+            ]}
+          />
+        </View>
+
+        {/* THE WORDS A PERSON WROTE — resident, always editable in place. An
+            entry nobody has written up shows the field and invites the sentence;
+            one that has been written up simply reads. That empty case is the
+            common one on a feed more than one writer fills: an automation files
+            an entry the moment a recording lands, with no words in it at all. */}
+        {/* THE VARIANT FOLLOWS THE VALUE, because the two states are asking for
+            different things. Written up, this is CONTENT: `bare`, reading as
+            prose, editable where it sits. Empty, it is a REQUEST for content —
+            and bare grey placeholder text on an invisible box does not read as
+            somewhere you can type, which is exactly the complaint. `framed`
+            gives it the resting border every other empty field on the record
+            has, so it is recognisable as an input from across the page.
+
+            A button ("Add a summary") was the other candidate and loses on the
+            click: `InlineTextInput` deliberately has no `autoFocus` (mounted
+            permanently it would have every field on a record fight for focus on
+            load), so a revealed field cannot take the caret — press the button,
+            then click the field, then type. The framed box is one click, and it
+            spends its extra ink only on the entries that actually want words. */}
         <InlineTextInput
+          variant={a.gist ? "bare" : "framed"}
           value={a.gist ?? ""}
           onSave={(v) => onEdit({ gist: v.trim() || undefined })}
           placeholder="What came of it?"
           accessibilityLabel="What came of it"
-          numberOfLines={2}
+          // ONE line is the floor, not two. `autoGrow` takes care of the ceiling,
+          // so a minimum of 2 bought nothing and cost an empty second line on
+          // every entry nobody had written up — which is most of them on a feed
+          // an automation also files into, and precisely what made a stack of
+          // entries read as a stack of form fields.
+          numberOfLines={1}
           autoGrow
         />
-      ) : null}
+
+        {/* WHAT CAME WITH IT — SHOWN, not folded. These blocks ARE the entry;
+            a control that hides them makes the reader click to discover what the
+            entry already told them is there, on every entry, forever.
+
+            The fold was defended as "each is tall enough to bury the next
+            entry", which measurement did not support: an audio player is 54px,
+            a file tile row is 96. Hiding 54px behind a 20px disclosure buys 34px
+            and costs a click. Only two things here are genuinely unbounded, and
+            only ONE of them stays folded — see the transcript below.
+
+            A video is the honest counter-case at 358px, and it still shows: it
+            is the single most informative thing on a recorded call, the feed
+            already folds its own tail, and the byline and gist stay at the top
+            of every entry so the scan survives a tall one. */}
+        <View style={{ gap: 12, alignSelf: "stretch" }}>
+
 
       {/* HEADER — who it was between, and what it was called. A subject line
           never says who was on it, and on a call there is no subject at all, so
@@ -739,26 +818,16 @@ function ActivityBody({
         </View>
       ) : null}
 
-      {/* PROSE A PERSON WROTE — a note of their own. It sits on the page's own
-          ground, which is what makes the recessed block below legible as "not
-          written here", and it is EDITABLE for the same reason the gist is:
-          somebody typed it.
-
-          The exception is a body that arrived FROM the counterparty — an email
-          they sent is a record of what they said, so it renders as markdown and
-          is not ours to rewrite. */}
-      {a.kind === "email" ? (
-        a.body ? <Markdown variant="embedded">{a.body}</Markdown> : null
-      ) : editing ? (
-        <InlineTextInput
-          value={a.body ?? ""}
-          onSave={(v) => onEdit({ body: v.trim() || undefined })}
-          placeholder="Add a note…"
-          accessibilityLabel="Note"
-          numberOfLines={2}
-          autoGrow
-        />
-      ) : a.body ? (
+      {/* THE COUNTERPARTY'S OWN WORDS, on an email. It is a record of what THEY
+          sent, so it renders as markdown and is not ours to rewrite — the same
+          reason the transcript is not editable.
+
+          There is NO second prose field beside it. An entry used to offer a
+          gist AND a "note", two free-text boxes for one event with nothing to
+          tell a writer which to use; the gist auto-grows, so it already carries
+          whatever length someone wants. Two fields for one thought is a choice
+          the surface was making the reader make. */}
+      {a.kind === "email" && a.body ? (
         <Markdown variant="embedded">{a.body}</Markdown>
       ) : null}
 
@@ -786,90 +855,53 @@ function ActivityBody({
         </Inset>
       ) : null}
 
-      {/* WHAT CAME WITH IT, split by what IDENTIFIES each file. A document is its
-          NAME — every PDF thumbnail is the same grey page — so documents are
-          rows. A photo is its CONTENT (`IMG_4471.jpg` tells nobody anything), so
-          images are tiles. One `files` array, two surfaces, decided by the data
-          rather than by a prop the caller has to remember. */}
-      {docs.length ? <FileRows files={docs} /> : null}
-      {images.length ? <FileThumbnailGrid files={images} itemSize={88} /> : null}
-
-      {/* PROVENANCE — where it happened, and who filed it. Two shapes for the
-          author because there are two kinds: a person gets a face, and an
-          automation gets `WaveAvatar`, the kit's mark for a non-human identity.
-          Giving a bot initials and an avatar is a small fabrication that every
-          reader notices and no test catches. */}
-      {/* THE FOOTER — provenance on the left, the entry's verbs on the right.
-          Two kinds of thing on one line, so they are two GROUPS pushed apart by
-          the space between them rather than a uniform gap that would make them
-          peers.
-
-          THE VERBS LIVE HERE, NOT ON THE ROW, and the reason is not tidiness.
-          A control in the row's trailing slot produced three separate defects in
-          a row: it nested a button inside the row's own button (invalid HTML,
-          one click reaching two handlers), it needed a fixed-height box of its
-          own to stay on the label's first line, and it sat close enough to the
-          disclosure chevron to read as one cluster with it. All three exist only
-          because something interactive shares the row with the press target.
-          Down here there is no press target to share with, and the whole class
-          is gone.
-
-          It also puts the verbs where the thing they act on IS. Editing a gist
-          you cannot read is not a real act, and a delete you reach without
-          opening the entry is a delete you make without looking at it — the
-          expansion is the confirmation step, which is why "two clicks" is the
-          feature rather than the cost.
-
-          They are ordinary `Button`s, not the quiet text controls used inside
-          prose above: these MUTATE, so they carry a control surface. Right-
-          aligned in a footer band, they establish no text edge to betray, which
-          is the condition the fill-less rungs need. */}
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-          <Text size="xs" color="muted">Logged by</Text>
-          {a.by.kind === "member" ? (
-            <MemberChip name={a.by.name} image={a.by.image} size="sm" />
-          ) : (
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <WaveAvatar size={24} />
-              <Text size="sm">{a.by.name}</Text>
-            </View>
-          )}
-        </View>
-        {a.sourceUrl ? (
-          <Link size="xs" onPress={() => {}}>{a.sourceUrl}</Link>
-        ) : null}
-        {/* Pushes the verbs to the far edge, so provenance and actions are two
-            groups rather than a run of four items on one gap. */}
-        <View style={{ flex: 1, minWidth: 24 }} />
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <Button
-            title={editing ? "Done" : "Edit"}
-            color="muted"
-            onPress={onToggleEdit}
-          />
-          <Button
-            title="Delete"
-            color="danger-secondary"
-            onPress={() =>
-              Alert.alert(
-                "Delete this entry?",
-                "It leaves the customer's history and stops counting toward the activity total. This cannot be undone.",
-                [
-                  { text: "Cancel", style: "cancel" },
-                  { text: "Delete", style: "destructive", onPress: onDelete },
-                ],
-              )
-            }
-          />
-        </View>
+      {/* WHAT CAME WITH IT — a GRID, the same as a posted chat message's
+          attachments and the same as this record's own Files section.
+
+          It was a row list for a while, on a rule I got wrong: "staged files are
+          tiles, filed files are rows". The rule held up only against the fee
+          ledger's "Supplier original", which is a labelled FIELD in a
+          `DetailRow` — a different thing from the attachments on a message. The
+          two real precedents both disagreed with me: `chat_user_message` renders
+          a posted message's files as a `FileGrid`, and so does the record's own
+          Files section. An entry's files are evidence — a scanned PO, a photo of
+          a seal — recognised by looking, which is what a tile is for.
+
+          `FilesEditor`, not a bare `FileGrid`, because a filed attachment must be
+          HARD to lose. The grid's ✕ sits on every tile, one click from gone; the
+          editor's default view never draws one at all, and the only way to
+          remove is to open the file and do it from the gallery — where you are
+          looking at the thing you are about to delete, and it still asks. Three
+          pieces I had hand-rolled on top of `FileGrid` come with it: the
+          confirmation, the full-screen gallery, and the press-to-open wiring.
+
+          NO BAR. `FilesEditor` renders its children as an action row and nothing
+          without them, so a per-entry Select/Remove toolbar is opt-in — and a
+          feed of eight entries does not want eight toolbars. Select mode is
+          reachable only from that bar, so leaving it out removes the mode
+          entirely rather than stranding it. Adding stays on the entry's menu, so
+          there is still exactly one add path. */}
+      {files.length ? (
+        <FilesEditor
+          files={files}
+          itemSize={THUMBNAIL_SIZE}
+          onRemove={(id) => onEdit({ files: files.filter((x) => x.id !== id) })}
+        />
+      ) : null}
+
       </View>
-    </View>
+      </View>
+    </FileDropTarget>
   );
 }
 
 /** The glyph per medium. A medium is a CATEGORY, so it rides the icon and the
  *  supporting line — never a `Badge`, which this kit reserves for status. */
+// What a touchpoint can carry, in ONE place: the entry's menu, a drop onto the
+// entry and the composer's attach button all filter identically, because a file
+// the drag accepts and the picker refuses is a difference nobody can see.
+const ATTACH_ACCEPT = "application/pdf,image/*";
+
 const ACTIVITY_ICON: Record<ActivityKind, IconName> = {
   call: "phone",
   video: "monitor",
@@ -1834,6 +1866,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // ── activity — the feed is state so a logged note appears at the top of it,
   // where it happened, rather than after a refetch.
   const [activity, setActivity] = useState<ActivityEntry[]>(ACTIVITY);
+  // Files staged on the NEXT entry — the feed's own queue, not the comment
+  // thread's. Sharing one would let a file picked for a touchpoint ride out on a
+  // comment instead, which is a data error with no visible symptom: both
+  // surfaces would look correct and the evidence would be filed against the
+  // wrong thing. A product swaps these two lines for its upload queue.
+  const [pendingActivityFiles, setPendingActivityFiles] = useState<DisplayFile[]>([]);
+  const attachToActivity = () => {
+    void pickFiles({ accept: ATTACH_ACCEPT, multiple: true }).then((chosen) => {
+      if (chosen.length === 0) return;
+      setPendingActivityFiles((prev) => [...prev, ...chosen.map(asDisplayFile)]);
+    });
+  };
   // A record's feed is not a register: you do not PAGE it, you fold the tail.
   // The recent entries are what the reader came for, and an unbounded feed makes
   // every other section on the record unreachable by scroll.
@@ -1842,7 +1886,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   // ONE entry at a time. A feed with several rows open in edit mode gives the
   // reader two half-finished sentences and no way to tell which one the next
   // keystroke lands in.
-  const [editingActivity, setEditingActivity] = useState<string | null>(null);
 
   // ── the record — seeded mid-flight so every state is visible
   const [stage, setStage] = useState<Stage>("sales");
@@ -2659,7 +2702,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
           renderFiles={(files) => (
             <FileGrid
               files={files.map(commentFileToDisplay)}
-              itemSize={84}
+              itemSize={THUMBNAIL_SIZE}
               onFilePress={(f) => setPreview({ files: [f], index: 0 })}
             />
           )}
@@ -2677,9 +2720,18 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
           }}
           placeholder="Write a comment…"
           sendLabel="Send"
-          actionsButton={<IconButton size="lg" color="secondary" icon="plus" tooltip="Attach files" onPress={attachToComment} />}
+          actionsButton={<IconButton size="lg" color="secondary" icon="paperclip" tooltip="Attach files" onPress={attachToComment} />}
+          /* Same reason as the activity composer above: a comment that is purely
+             an attachment is an ordinary thing to send, and the default
+             block-on-empty-text refused it. */
+          sendDisabled={pendingFiles.length > 0 ? false : undefined}
+          /* Same surface as the activity composer above, and as chat. */
           files={pendingFiles.length > 0 ? (
-            <FileRows files={pendingFiles.map(commentFileToDisplay)} onRemove={(f) => setPendingFiles((prev) => prev.filter((x) => x.id !== f.id))} />
+            <FileGrid
+              files={pendingFiles.map(commentFileToDisplay)}
+              itemSize={THUMBNAIL_SIZE}
+              onDisplayRemove={(id) => setPendingFiles((prev) => prev.filter((x) => x.id !== id))}
+            />
           ) : undefined}
         />
     </>
@@ -2977,21 +3029,50 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
             placeholder="Log a call, an email, a note…"
             accessibilityLabel="Log an activity"
             sendLabel="Log"
+            /* A touchpoint is very often ABOUT a document — you sent the quote,
+               they sent the PO back — and `ActivityEntry` has carried `files`
+               all along; only the write path was missing, so the feed could
+               display evidence it gave nobody a way to file. The comment
+               composer below already wires exactly this, from the same three
+               kit slots; this one simply did not. */
+            actionsButton={<IconButton size="lg" color="secondary" icon="paperclip" tooltip="Attach files" onPress={attachToActivity} />}
+            /* THE SAME COMPONENT AND SIZE AS CHAT — `FileGrid` at `THUMBNAIL_SIZE`,
+               which is what the product's own composer passes. Two things were
+               wrong with hand-rolling a row of `FileThumbnail` here: it
+               re-implements a component that exists (so it silently lacks the
+               overflow, selection and upload states `FileGrid` carries, and it
+               teaches app authors to hand-roll a grid), and it sized the tiles
+               with a magic 56 copied off a demo file while the kit EXPORTS the
+               size a composer attachment is. A staged file is checked by LOOKING
+               at it; 56px of a scanned PO shows nothing. Rows are for a filed
+               set, which is what an entry's own list is. */
+            files={pendingActivityFiles.length > 0 ? (
+              <FileGrid
+                files={pendingActivityFiles}
+                itemSize={THUMBNAIL_SIZE}
+                onDisplayRemove={(id) => setPendingActivityFiles((prev) => prev.filter((x) => x.id !== id))}
+              />
+            ) : undefined}
+            /* STAGED FILES ARE CONTENT. The composer blocks send on empty text by
+               default, which is right for a message and wrong the moment an
+               attachment is the whole point — "here is the signed PO" needs no
+               sentence. `undefined` keeps the default when nothing is staged. */
+            sendDisabled={pendingActivityFiles.length > 0 ? false : undefined}
             onSend={(text) => {
               const t = text.trim();
-              if (!t) return;
+              if (!t && pendingActivityFiles.length === 0) return;
               setActivity((prev) => [
                 {
                   key: `a-${prev.length + 1}-${t.length}`,
                   kind: "note",
-                  gist: t,
-                  direction: "out",
+                  gist: t || undefined,
                   over: "Note",
                   when: "Just now",
-                  by: { kind: "member", name: "Sarah Chen" },
+                  files: pendingActivityFiles.length > 0 ? pendingActivityFiles : undefined,
                 },
                 ...prev,
               ]);
+              setPendingActivityFiles([]);
             }}
           />
 
@@ -3003,56 +3084,45 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
             />
           ) : (
             <>
-              <Timeline
-                items={(showAllActivity ? activity : activity.slice(0, ACTIVITY_FOLD)).map(
-                  (a): TimelineItem => ({
-                    id: a.key,
-                    icon: ACTIVITY_ICON[a.kind],
-                    // An unanswered outreach is the one state in this feed worth
-                    // a colour: it is the only entry that owes somebody
-                    // something. Everything else is history and reads neutral.
-                    iconColor: a.awaiting ? solid("amber") : colors.zinc[400],
-                    // NEVER a phrase assembled from the enums ("Inbound Call").
-                    // That renders in body ink and so claims somebody wrote it;
-                    // `placeholder` is how the row says the words are missing,
-                    // and the medium and direction are already on the line below.
-                    label: a.gist ?? "Not written up yet",
-                    placeholder: a.gist == null,
-                    // The metadata line — a real preposition and a comma, never
-                    // a middot standing in for the relation (§Microcopy) — and
-                    // then WHAT ARRIVED, because a closed row is the scanning
-                    // state and on an entry with no words the attachments are
-                    // the entire content. Written out rather than glyphed: an
-                    // icon run needs a key the reader has to learn first, and
-                    // this line is already here.
-                    description:
-                      `${a.direction === "in" ? "From them" : "From us"} over ${a.over}, ${a.when}.` +
-                      arrivedWith(a),
-                    // The row's verbs. `right` sits BESIDE the press target, so a
-                    // menu here is independently clickable and does not nest a
-                    // button inside the row's own button.
-                    //
-                    details: (
-                      <ActivityBody
-                        a={a}
-                        editing={editingActivity === a.key}
-                        onEdit={(patch) =>
-                          setActivity((prev) =>
-                            prev.map((e) => (e.key === a.key ? { ...e, ...patch } : e)),
-                          )
-                        }
-                        onToggleEdit={() =>
-                          setEditingActivity((cur) => (cur === a.key ? null : a.key))
-                        }
-                        onDelete={() => {
-                          setActivity((prev) => prev.filter((e) => e.key !== a.key));
-                          setEditingActivity((cur) => (cur === a.key ? null : cur));
-                        }}
-                      />
-                    ),
-                  }),
-                )}
-              />
+              {/* AN ENTRY, NOT A LOG LINE — and that distinction is the whole
+                  reason this stopped being a `Timeline`.
+
+                  `Timeline` puts its label INSIDE the row's press target. That
+                  is right for an event ("Stage changed to Won") whose text is
+                  derived and read-only. It is wrong here, because the gist is
+                  the one thing on an entry a person WROTE, and text inside a
+                  button can never be edited where it sits. Four repairs came out
+                  of working around that — the verbs moved off the row, the label
+                  learned to un-clamp, the body's copy of the gist came out, and
+                  the Edit verb ended up a scroll away from the sentence it
+                  edits. They were never independent: each one was the
+                  arrangement pushing back.
+
+                  So the gist is not a label. It is a RESIDENT field — always
+                  editable, in place, no mode and no Edit button, the same as
+                  every other authored value on this record. The old argument
+                  against a resident editor here ("the gist is already the row's
+                  label, so it renders the sentence twice") disappears the moment
+                  it stops being one.
+
+                  What is left is the shape every comment UI converged on: a
+                  metadata header, the prose under it, the row's own actions at
+                  the TOP RIGHT beside the text they act on, and the heavy
+                  artifacts behind their own disclosure. */}
+              <View style={{ gap: 20 }}>
+                {(showAllActivity ? activity : activity.slice(0, ACTIVITY_FOLD)).map((a) => (
+                  <ActivityEntryRow
+                    key={a.key}
+                    a={a}
+                    onEdit={(patch) =>
+                      setActivity((prev) =>
+                        prev.map((e) => (e.key === a.key ? { ...e, ...patch } : e)),
+                      )
+                    }
+                    onDelete={() => setActivity((prev) => prev.filter((e) => e.key !== a.key))}
+                  />
+                ))}
+              </View>
               {/* The tail FOLDS rather than paging. A record's feed is read
                   newest-first and the old entries are reference — but they are
                   still on the record, so the count says how much is behind the
@@ -3486,8 +3556,15 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         {/* 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
-            captures a drop/paste here (and everywhere else on the surface); this
-            section keeps only its explicit Add-files CTA and the affordance line. */}
+            captures a drop/paste here; this section keeps only its explicit
+            Add-files CTA and the affordance line.
+
+            The record-level target is the FALLBACK, not the only one. An
+            activity entry nests its own, because a file dropped on a
+            conversation belongs to that conversation — and `FileDropTarget`
+            stops propagation, so the innermost region wins and this one never
+            sees it. A section adds its own only when the drop MEANS something
+            different there; "the same thing, closer" is not a reason. */}
         <View onLayout={nav.register("files")}>
         <Section>
           <SectionHeading>