@hanzo/rooms 0.1.4 → 0.1.5

package/dist/Chat.js

@@ -33,12 +33,13 @@ import { Prose } from "./Prose.js";
 import { useAgent, useAi, useChat, useModels, } from "@hanzo/ai/react";
 import { freeCopy, grantConsent, hasConsent, isFree, } from "@hanzo/ai";
 import { ASK, Chat as ChatSurface, Code, Failure, Parts, words } from "@hanzo/ui/chat";
-import { compose, hold, images, partsOf } from "./lib/attach.js";
+import { compose, images, partsOf } from "./lib/attach.js";
+import { channel, drop, hold, spend, take, usePane } from "./pane.js";
 import { Face, brief as roomBrief, join, roleOf, roomTurn, roster as rosterLine, rosterOf, speakers, speaksOf, voiceOf } from "./cast.js";
 import { SpeakButton, cleanForSpeech } from "./speech.js";
 import { Crew, HOUSE, useCrew } from "./crew.js";
 import { called } from "./team.js";
-import { Anchor, Box, Button, Text, View, XStack, YStack } from "@hanzo/ui";
+import { Anchor, Box, Button, Text, Tooltip, TooltipContent, TooltipTrigger, View, XStack, YStack } from "@hanzo/ui";
 import { Control } from "@hanzo/composer";
 import { useIam, useIamToken } from "@hanzo/iam/react";
 import { hasSession, org } from "./lib/session.js";
@@ -48,7 +49,7 @@ import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
 import { speech, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { ArrowUp, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
 import { ENSO, FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
@@ -331,7 +332,10 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
     const ai = useAi();
     // In the app's frame the composer floats on the pane as a pane of its own.
     const framed = useContext(Framed);
-    const { thread: open, open: reopen, agents: room, openAgent, seat, emptied, aside, showAside, showSettings } = useOpen();
+    const opened = useOpen();
+    const { thread: open, open: reopen, agents: room, openAgent, seat, emptied, aside, showAside, showSettings } = opened;
+    // The conversation's key in `pane.ts`, the one the column beside it reads.
+    const at = channel(opened);
     // The first of them: what a surface that addresses one person reads.
     const withWhom = room[0] ?? null;
     // Whether the column beside this conversation is showing its summary, and the
@@ -601,23 +605,15 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
     // passing value/onChange/onSend takes that ownership over rather than fighting
     // it.
     const [draft, setDraft] = useState("");
-    // FILES WITH THE NEXT MESSAGE: pressed in through the paperclip, or dropped
-    // anywhere on the room. An image rides as a picture the model reads, a text
-    // file as its words (lib/attach); anything else is refused by name here.
-    const [files, setFiles] = useState([]);
-    const [fileSaid, setFileSaid] = useState(null);
+    // FILES WITH THE NEXT MESSAGE, held by `pane.ts` for this conversation: the
+    // paperclip, a drop anywhere on the room, a paste into the field and the
+    // column's `+` all go through its one `hold`, so the chips here and the rows
+    // under Sources are one list. An image rides as a picture the model reads, a
+    // text file as its words (lib/attach); anything else is refused by name.
+    const { held: files, refused: turnedAway } = usePane(at);
     const [dragging, setDragging] = useState(false);
-    const picker = useRef(null);
     const outgoing = useRef([]);
     const depth = useRef(0);
-    const take = useCallback(async (list) => {
-        if (!list?.length)
-            return;
-        const out = await Promise.all(Array.from(list).map(hold));
-        setFiles((now) => [...now, ...out.filter((one) => typeof one !== "string")]);
-        const refused = out.filter((one) => typeof one === "string");
-        setFileSaid(refused.length ? refused.join(" ") : null);
-    }, []);
     useSeed(initial, setDraft);
     // DICTATION through Hanzo's own ear: the mic records and each pause is
     // posted to /v1/audio/transcriptions (`zen-scribe`). `speech()` defaults to
@@ -798,11 +794,10 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
         const text = draft.trim();
         if (!text && !files.length)
             return;
-        outgoing.current = images(files);
+        const going = spend(at);
+        outgoing.current = images(going);
         setDraft("");
-        setFiles([]);
-        setFileSaid(null);
-        guarded(compose(text, files));
+        guarded(compose(text, going));
     };
     /*
       WHAT AN UNANSWERED QUESTION LOOKS LIKE: a turn of its own directly under it,
@@ -912,8 +907,8 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
             if (!e.dataTransfer.files?.length)
                 return;
             e.preventDefault();
-            void take(e.dataTransfer.files);
-        }, children: [dragging ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: 10, items: "center", justify: "center", bg: "var(--surface-scrim)", borderWidth: 2, borderStyle: "dashed", borderColor: "$borderColor", rounded: "var(--pane-round)", pointerEvents: "none", children: _jsx(Text, { fontSize: "$4", color: "$ink", children: "Drop to attach" }) })) : null, _jsxs(XStack, { height: 48, items: "center", justify: "space-between", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Box, { render: "button", onClick: () => open && star(open), "aria-label": open && starred.has(open) ? "Unstar this conversation" : "Star this conversation", "aria-pressed": !!open && starred.has(open), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(Star, { size: 15, "aria-hidden": true, color: open && starred.has(open) ? "var(--foreground)" : "var(--muted-foreground)", fill: open && starred.has(open) ? "currentColor" : "none" }) }), room.length ? (_jsx(XStack, { role: "list", "aria-label": "Agents in this chat", items: "center", gap: "$1.5", minW: 0, overflowX: "auto", "$platform-web": { scrollbarWidth: "none" }, children: room.map((name) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$1", pr: "$0.5", py: "$0.5", rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Face, { src: faces[name]?.avatar ?? (name === withWhom ? portrait : undefined), emoji: faces[name]?.emoji ?? (name === withWhom ? persona?.emoji : undefined), name: name, size: 22 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, display: "none", $sm: { display: "flex" }, children: name }), _jsx(Box, { render: "button", onClick: () => openAgent(name), "aria-label": `Remove ${name} from this chat`, title: `Remove ${name}`, width: 24, height: 24, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) })] }, name))) })) : null] }), _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Box, { render: "button", onClick: () => {
+            void hold(at, Array.from(e.dataTransfer.files));
+        }, children: [dragging ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: 10, items: "center", justify: "center", bg: "var(--surface-scrim)", borderWidth: 2, borderStyle: "dashed", borderColor: "$borderColor", rounded: "var(--pane-round)", pointerEvents: "none", children: _jsxs(XStack, { items: "center", gap: "$2", px: "$4", py: "$2.5", rounded: "$10", bg: "$background", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Paperclip, { size: 15, "aria-hidden": true }), _jsx(Text, { fontSize: "$4", color: "$ink", children: "Drop files to attach" })] }) })) : null, _jsxs(XStack, { height: 48, items: "center", justify: "space-between", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Box, { render: "button", onClick: () => open && star(open), "aria-label": open && starred.has(open) ? "Unstar this conversation" : "Star this conversation", "aria-pressed": !!open && starred.has(open), p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(Star, { size: 15, "aria-hidden": true, color: open && starred.has(open) ? "var(--foreground)" : "var(--muted-foreground)", fill: open && starred.has(open) ? "currentColor" : "none" }) }), room.length ? (_jsx(XStack, { role: "list", "aria-label": "Agents in this chat", items: "center", gap: "$1.5", minW: 0, overflowX: "auto", "$platform-web": { scrollbarWidth: "none" }, children: room.map((name) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$1", pr: "$0.5", py: "$0.5", rounded: 999, borderWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(Face, { src: faces[name]?.avatar ?? (name === withWhom ? portrait : undefined), emoji: faces[name]?.emoji ?? (name === withWhom ? persona?.emoji : undefined), name: name, size: 22 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, display: "none", $sm: { display: "flex" }, children: name }), _jsx(Box, { render: "button", onClick: () => openAgent(name), "aria-label": `Remove ${name} from this chat`, title: `Remove ${name}`, width: 24, height: 24, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 13, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }) })] }, name))) })) : null] }), _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Box, { render: "button", onClick: () => {
                                     if (aside === null) {
                                         showAside("tasks");
                                         if (!pinned)
@@ -1036,15 +1031,22 @@ function Thread({ placeholder = MESSAGE, initial, anonymous = false, heading, })
                     // package's button and `streaming` still has to become stop; it keeps
                     // `data-slot="composer-send"` so a driver finds it, and it is the same
                     // `Control` circle as the mic, filled.
-                    // THE PAPERCLIP opens the file picker; the same files can be dropped on
-                    // the room.
-                    children: (_jsxs(_Fragment, { children: [_jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", onClick: () => picker.current?.click(), children: _jsx(Paperclip, { size: 15, "aria-hidden": true }) }), _jsx("input", { ref: picker, type: "file", multiple: true, hidden: true, "data-slot": "composer-files", onChange: (e) => {
-                                    void take(e.target.files);
-                                    e.target.value = "";
-                                } })] })),
+                    // THE PAPERCLIP is the column's "Attach files", one press closer: the
+                    // same `take`, into the same `hold`.
+                    children: (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", onClick: () => take(at), children: _jsx(Paperclip, { size: 15, "aria-hidden": true }) }) }), _jsx(TooltipContent, { children: _jsx(Text, { fontSize: "$2", children: "Attach files" }) })] })),
+                    // A file or an image pasted into the field is held like a picked one;
+                    // words paste as words.
+                    field: {
+                        onPaste: (e) => {
+                            if (!e.clipboardData?.files?.length)
+                                return;
+                            e.preventDefault();
+                            void hold(at, Array.from(e.clipboardData.files));
+                        },
+                    },
                     // WHAT GOES WITH THE MESSAGE, above the frame: one chip a file, each
                     // with its own remove, and the reason any file was refused.
-                    head: files.length || fileSaid ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: "$1", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 260, children: [_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: one.name }), _jsx(Box, { render: "button", "aria-label": `Remove ${one.name}`, onClick: () => setFiles((now) => now.filter((f) => f.id !== one.id)), p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })] }, one.id))) })) : null, fileSaid ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: fileSaid })) : null] })) : undefined,
+                    head: files.length || turnedAway ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", gap: "$1.5", children: [files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: "$1", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 260, children: [one.kind === "image" ? (_jsx(ImageMark, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })) : (_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: one.name }), _jsx(Box, { render: "button", "aria-label": `Remove ${one.name}`, onClick: () => drop(at, one.id), p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })] }, one.id))) })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null] })) : undefined,
                     send: (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Enso, { effort: effort, onEffort: setEffort, model: wanted, onModel: choose, models: offered }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: voice, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": chat.streaming ? "Stop" : "Send", opacity: chat.streaming || draft.trim() || files.length ? 1 : 0.4, onClick: () => (chat.streaming ? chat.stop() : submit()), children: chat.streaming ? (_jsx(Square, { size: 13, fill: "currentColor" })) : (_jsx(ArrowUp, { size: 15, strokeWidth: 2.5 })) })] })),
                     // WHAT THE PLAN HAS LEFT, under the frame and at its measure, for a
                     // plan holder only: Free keeps the free lane's own notice.

package/dist/RightPane.js

@@ -14,10 +14,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // OUTPUTS AND SOURCES ARE DERIVED FROM THE TURNS, never from a second list kept
 // in step with them. `LLM.md` already states this rule for `Work` and it is the
 // same rule: the conversation is the record, so a fenced block in an answer IS
-// an output and an image in a question IS a source. There is nothing to sync,
-// nothing to invalidate, and no count that can disagree with the transcript —
-// and switching channels costs no request, because the turns are already in
-// hand. A conversation that has produced nothing says so.
+// an output, and an image in a question or a block in it that names a file IS a
+// source. There is nothing to sync, nothing to invalidate, and no count that
+// can disagree with the transcript — and switching channels costs no request,
+// because the turns are already in hand. The one thing listed that is not yet
+// a turn is what is held for the next message (`hold` in `pane.ts`), which a
+// send spends into one. A conversation that has produced nothing says so.
 //
 // THE COLUMN IS STACKED, NOT SPLIT. The reference this follows puts a ~300px
 // summary beside a wide browser, which needs about 900px of column; the frame
@@ -33,7 +35,7 @@ import { ExternalLink, FileCode, Image as ImageMark, Paperclip, PanelRightClose,
 import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Text, View, XStack, YStack, } from '@hanzo/ui';
 import { Card, Quiet, Row } from './card.js';
 import { useOpen } from './open.js';
-import { address, channel, hold, name as titleOf, openTab, pickTab, pin, shutTab, usePane, } from './pane.js';
+import { address, channel, name as titleOf, openTab, pickTab, pin, shutTab, take, usePane, } from './pane.js';
 import { useProviders, useSkills } from './tools.js';
 import { activate, startDevice } from './connect.js';
 /** How many rows a card shows before it offers the rest. */
@@ -115,7 +117,11 @@ function outputs(said) {
     });
     return out;
 }
-/** What went into this conversation: pictures asked about, and files brought in. */
+/**
+ * What went into this conversation: pictures asked about, files sent fenced
+ * under their names (`compose` in `lib/attach`), and files held for the next
+ * message.
+ */
 function sources(said, held) {
     const out = [];
     said.forEach((m, turn) => {
@@ -124,15 +130,17 @@ function sources(said, held) {
         pictures(m).forEach((href, i) => {
             out.push({ id: `s${turn}.${i}`, name: 'Attached image', kind: 'image', href });
         });
+        let n = 0;
+        for (const [, info, body] of words(m).matchAll(FENCE)) {
+            n += 1;
+            const named = info.trim();
+            if (!suffix(named))
+                continue;
+            out.push({ id: `sf${turn}.${n}`, name: named, kind: 'file', body, mime: MIME[suffix(named)] ?? 'text/plain' });
+        }
     });
     for (const h of held) {
-        out.push({
-            id: h.id,
-            name: h.name,
-            kind: h.type.startsWith('image/') ? 'image' : 'file',
-            href: h.href,
-            mime: h.type,
-        });
+        out.push({ id: h.id, name: h.name, kind: h.kind === 'image' ? 'image' : 'file', href: h.href, mime: h.type });
     }
     return out;
 }
@@ -238,23 +246,6 @@ const Note = ({ children }) => (_jsx(DropdownMenuLabel, { children: _jsx(Text, {
 function Add({ at }) {
     return (_jsxs(DropdownMenu, { placement: "bottom-end", maxHeight: 420, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Box, { render: "button", "aria-label": "Add to this conversation", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(Plus, { size: 16, "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => take(at), children: _jsx(Word, { children: "Attach files" }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Skills, {}), _jsx(DropdownMenuSeparator, {}), _jsx(Services, {})] })] }));
 }
-/**
- * Asks for files and takes what is given.
- *
- * The picker is the browser's, minted and dropped per press rather than kept as
- * a hidden input in the markup: a menu row is not a form control, and an
- * `<input type=file>` parked in the tree is one more thing for a screen reader
- * to walk past.
- */
-function take(at) {
-    if (typeof document === 'undefined')
-        return;
-    const ask = document.createElement('input');
-    ask.type = 'file';
-    ask.multiple = true;
-    ask.onchange = () => hold(at, Array.from(ask.files ?? []));
-    ask.click();
-}
 /**
  * What this org's agents can reach for, as a section of this menu.
  *

package/dist/lib/attach.d.ts

@@ -5,34 +5,39 @@
  * model reads, and nothing else rides that wire, so a file goes one of two
  * ways: an image as a `data:` URI beside the words, a text file as its own
  * words after the message, fenced under its name. Any other kind is refused by
- * name, before anything is sent.
+ * name, before anything is held.
+ *
+ * This module judges and reads a file; `pane.ts` holds what it admits, per
+ * conversation, for the composer's chips and the column's Sources alike.
  */
 import type { MessagePart } from '@hanzo/ui/chat';
-/** A file held for the next message. */
-export interface Held {
-    id: string;
-    name: string;
+/** What a file contributes to a message once admitted. */
+export interface Admitted {
     kind: 'image' | 'text';
     /** A `data:` URI for an image, the words for a text file. */
     data: string;
-    size: number;
 }
+/** A file as it goes with a message. */
+export type Going = Admitted & {
+    name: string;
+};
 export declare const IMAGE_MAX: number;
 export declare const TEXT_MAX: number;
 /** Which way a file goes with a message, or null when it cannot go. */
 export declare function kindOf(file: {
     name: string;
     type: string;
-}): Held['kind'] | null;
-/** A file read and held, or the sentence that says why it cannot go. */
-export declare function hold(file: File): Promise<Held | string>;
+}): Admitted['kind'] | null;
+/** A file read for a message, or the sentence that says why it cannot go. */
+export declare function admit(file: File): Promise<Admitted | string>;
 /**
- * The message as sent: the words, then each text file fenced under its name.
- * With no words and no text file, the images' names, so the turn says what it
- * carries.
+ * The message as sent: the words, then each text file fenced with its name as
+ * the info string — the shape a model writes a file in, and the one the
+ * column's Sources reads back out of the turn. With no words and no text file,
+ * the images' names, so the turn says what it carries.
  */
-export declare function compose(text: string, files: readonly Held[]): string;
+export declare function compose(text: string, files: readonly Going[]): string;
 /** The images of a message, as the URIs @hanzo/ai's `send` takes. */
-export declare const images: (files: readonly Held[]) => string[];
+export declare const images: (files: readonly Going[]) => string[];
 /** A wire turn's parts — text and `image_url` — as the parts `@hanzo/ui/chat` draws. */
 export declare function partsOf(content: readonly unknown[]): MessagePart[];

package/dist/lib/attach.js

@@ -5,7 +5,10 @@
  * model reads, and nothing else rides that wire, so a file goes one of two
  * ways: an image as a `data:` URI beside the words, a text file as its own
  * words after the message, fenced under its name. Any other kind is refused by
- * name, before anything is sent.
+ * name, before anything is held.
+ *
+ * This module judges and reads a file; `pane.ts` holds what it admits, per
+ * conversation, for the composer's chips and the column's Sources alike.
  */
 export const IMAGE_MAX = 8 * 1024 * 1024;
 export const TEXT_MAX = 256 * 1024;
@@ -30,8 +33,8 @@ function read(file, as) {
             reader.readAsText(file);
     });
 }
-/** A file read and held, or the sentence that says why it cannot go. */
-export async function hold(file) {
+/** A file read for a message, or the sentence that says why it cannot go. */
+export async function admit(file) {
     const kind = kindOf(file);
     if (!kind)
         return `${file.name}: only images and text files go with a message.`;
@@ -39,8 +42,7 @@ export async function hold(file) {
     if (file.size > max)
         return `${file.name} is larger than ${kind === 'image' ? '8 MB' : '256 KB'}.`;
     try {
-        const data = await read(file, kind === 'image' ? 'url' : 'text');
-        return { id: crypto.randomUUID(), name: file.name, kind, data, size: file.size };
+        return { kind, data: await read(file, kind === 'image' ? 'url' : 'text') };
     }
     catch {
         return `${file.name} could not be read.`;
@@ -52,16 +54,17 @@ function fence(words) {
     return '`'.repeat(Math.max(3, longest + 1));
 }
 /**
- * The message as sent: the words, then each text file fenced under its name.
- * With no words and no text file, the images' names, so the turn says what it
- * carries.
+ * The message as sent: the words, then each text file fenced with its name as
+ * the info string — the shape a model writes a file in, and the one the
+ * column's Sources reads back out of the turn. With no words and no text file,
+ * the images' names, so the turn says what it carries.
  */
 export function compose(text, files) {
     const blocks = files
         .filter((f) => f.kind === 'text')
         .map((f) => {
         const f3 = fence(f.data);
-        return `${f.name}\n${f3}\n${f.data.replace(/\n$/, '')}\n${f3}`;
+        return `${f3}${f.name}\n${f.data.replace(/\n$/, '')}\n${f3}`;
     });
     const out = [text.trim(), ...blocks].filter(Boolean).join('\n\n');
     return out || files.map((f) => f.name).join(', ');

package/dist/pane.d.ts

@@ -1,3 +1,4 @@
+import { type Admitted } from './lib/attach.js';
 /** One open tab in the pane's browser. */
 export interface Leaf {
     id: string;
@@ -7,13 +8,14 @@ export interface Leaf {
     title: string;
 }
 /**
- * A file the reader put into this conversation from their own disk.
+ * A file the reader put into this conversation from their own disk, read and
+ * waiting to go with the next message.
  *
  * `href` is an object URL and is the reason this is never written down — see
  * the note at the top. Everything else is read off the `File` itself, so a name
  * and a size here are the file system's, never a guess.
  */
-export interface Held {
+export interface Held extends Admitted {
     id: string;
     name: string;
     size: number;
@@ -29,6 +31,8 @@ export interface Pane {
     /** Whether the summary column stands beside the browser. */
     pinned: boolean;
     held: Held[];
+    /** Why the last files offered were refused, in the reader's words, or null. */
+    refused: string | null;
 }
 /**
  * The conversation a pane belongs to.
@@ -83,8 +87,31 @@ export declare function pickTab(key: string, id: string): void;
 export declare function shutTab(key: string, id: string): void;
 /** Shows or hides the summary column beside this conversation's browser. */
 export declare function pin(key: string, on: boolean): void;
-/** Takes files from the reader's disk into this conversation. */
-export declare function hold(key: string, files: File[]): void;
+/**
+ * Takes files from the reader's disk into this conversation.
+ *
+ * Each is judged and read by `admit`; what is refused is said by name in
+ * `refused` and nothing of it is held, so a chip never stands for a file that
+ * cannot go.
+ */
+export declare function hold(key: string, files: readonly File[]): Promise<void>;
+/**
+ * Asks for files and holds what is given.
+ *
+ * The picker is the browser's, minted and dropped per press rather than kept as
+ * a hidden input in the markup: a menu row is not a form control, and an
+ * `<input type=file>` parked in the tree is one more thing for a screen reader
+ * to walk past.
+ */
+export declare function take(key: string): void;
+/**
+ * Hands over everything held to go with a message, and lets go of it.
+ *
+ * The turn carries each file from here — an image as its `data:` URI, a text
+ * file as its words. The object URLs are left standing, so a tab already open
+ * on one keeps showing it.
+ */
+export declare function spend(key: string): Held[];
 /** Lets go of a file, and of the handle the browser minted for it. */
 export declare function drop(key: string, id: string): void;
 /** This conversation's pane, and it alone — a change to another redraws nothing

package/dist/pane.js

@@ -20,10 +20,17 @@
 // with the document that minted it, so a persisted row would come back as a
 // name pointing at nothing. A row that looks like a file and opens nothing is
 // worse than no row, so they are held for the session and no longer.
+//
+// ONE WAY IN FOR A FILE. The composer's paperclip, a drop on the room, a paste
+// into the field and the column's `+` all call `hold`, so a file is judged by
+// one rule (`lib/attach`), shows as a chip over the field and a row under
+// Sources at once, and goes with the next message. Sending spends what is
+// held; from then on the turn itself is the record Sources reads.
 import { useSyncExternalStore } from 'react';
+import { admit } from './lib/attach.js';
 /** A pane nobody has touched. Shared, and never mutated — see `EMPTY` in
  *  `open.ts` for why a fresh object per read is an infinite render. */
-const BARE = { tabs: [], at: null, pinned: true, held: [] };
+const BARE = { tabs: [], at: null, pinned: true, held: [], refused: null };
 const where = (key) => `hanzo.pane.${key}`;
 /**
  * The conversation a pane belongs to.
@@ -90,6 +97,7 @@ function read(key) {
                 at: tabs.some((t) => t.id === kept.at) ? kept.at : (tabs[0]?.id ?? null),
                 pinned: kept.pinned !== false,
                 held: [],
+                refused: null,
             };
         }
     }
@@ -201,18 +209,58 @@ export function shutTab(key, id) {
 export function pin(key, on) {
     edit(key, (was) => (was.pinned === on ? was : { ...was, pinned: on }));
 }
-/** Takes files from the reader's disk into this conversation. */
-export function hold(key, files) {
+/**
+ * Takes files from the reader's disk into this conversation.
+ *
+ * Each is judged and read by `admit`; what is refused is said by name in
+ * `refused` and nothing of it is held, so a chip never stands for a file that
+ * cannot go.
+ */
+export async function hold(key, files) {
     if (!files.length)
         return;
-    const taken = files.map((f) => ({
-        id: mint('h'),
-        name: f.name,
-        size: f.size,
-        type: f.type,
-        href: URL.createObjectURL(f),
-    }));
-    edit(key, (was) => ({ ...was, held: [...was.held, ...taken] }));
+    const judged = await Promise.all(files.map(admit));
+    const taken = [];
+    const refused = [];
+    judged.forEach((one, i) => {
+        const file = files[i];
+        if (typeof one === 'string')
+            refused.push(one);
+        else
+            taken.push({ id: mint('h'), name: file.name, size: file.size, type: file.type, href: URL.createObjectURL(file), ...one });
+    });
+    edit(key, (was) => ({ ...was, held: [...was.held, ...taken], refused: refused.length ? refused.join(' ') : null }));
+}
+/**
+ * Asks for files and holds what is given.
+ *
+ * The picker is the browser's, minted and dropped per press rather than kept as
+ * a hidden input in the markup: a menu row is not a form control, and an
+ * `<input type=file>` parked in the tree is one more thing for a screen reader
+ * to walk past.
+ */
+export function take(key) {
+    if (typeof document === 'undefined')
+        return;
+    const ask = document.createElement('input');
+    ask.type = 'file';
+    ask.multiple = true;
+    ask.onchange = () => void hold(key, Array.from(ask.files ?? []));
+    ask.click();
+}
+/**
+ * Hands over everything held to go with a message, and lets go of it.
+ *
+ * The turn carries each file from here — an image as its `data:` URI, a text
+ * file as its words. The object URLs are left standing, so a tab already open
+ * on one keeps showing it.
+ */
+export function spend(key) {
+    const was = read(key);
+    if (!was.held.length && !was.refused)
+        return [];
+    write(key, { ...was, held: [], refused: null });
+    return was.held;
 }
 /** Lets go of a file, and of the handle the browser minted for it. */
 export function drop(key, id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",