@hanzo/rooms 0.1.10 → 0.1.12

package/dist/Chat.js

@@ -33,8 +33,9 @@ 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, images, partsOf } from "./lib/attach.js";
-import { channel, drop, hold, spend, take, usePane } from "./pane.js";
+import { carriedIn, compose, partsOf, said as told, weigh } from "./lib/attach.js";
+import { dropped, readable, refOf, retrieve } from "./lib/files.js";
+import { channel, drop, hold, landed, spend, take, usePane, useWorkFile } 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";
@@ -48,8 +49,8 @@ import { Meters } from "./meters.js";
 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, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { REFUSED, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
+import { ArrowUp, AudioLines, 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";
@@ -296,6 +297,75 @@ function Why({ text }) {
  * writes, which streams no words while it does.
  */
 const STALL = 300_000;
+/**
+ * How long a send waits for a freshly attached file to have passages before it
+ * goes without them. Long enough for a page or a short document to be read; a
+ * large one keeps indexing, and the turn says it is not readable yet.
+ */
+const READ_WAIT = 45_000;
+/** Files named the way a sentence lists them. */
+function names(list) {
+    const all = list.map((f) => f.name);
+    return all.length <= 2 ? all.join(" and ") : `${all.slice(0, 2).join(", ")} and ${all.length - 2} more`;
+}
+/** Why the files had no passages to give, from what the index last said of each. */
+function unread(list) {
+    const parts = list.map((f) => f.status === "stored"
+        ? `${f.name} is kept but not indexed${f.error ? `: ${f.error}` : ""}`
+        : f.status === "failed"
+            ? `${f.name} could not be indexed${f.error ? `: ${f.error}` : ""}`
+            : f.status !== "ready"
+                ? `${f.name} is still being indexed`
+                : null);
+    const said = parts.filter(Boolean).join("; ");
+    return said || undefined;
+}
+/** How far a file has got, in a word or two. */
+function progress(state, sent, f) {
+    if (state === "uploading")
+        return `${Math.floor(sent * 100)}%`;
+    if (state === "queued")
+        return "queued";
+    if (state === "indexing") {
+        switch (f?.stage) {
+            case "extract":
+                return "reading";
+            case "toc":
+                return "contents";
+            case "passages":
+                return "passages";
+            case "embed":
+                return f.passages ? `indexing ${Math.floor(((f.embedded ?? 0) / f.passages) * 100)}%` : "indexing";
+            case "graph":
+                return "linking";
+            default:
+                return "indexing";
+        }
+    }
+    return state;
+}
+/** One chip: the file's glyph, its name, and how far it has got. */
+function Chip({ name, type, state, sent, file, onRemove, }) {
+    const bad = state === "failed";
+    const why = state === "failed" || state === "stored" ? file?.error : undefined;
+    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: onRemove ? "$1" : "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 320, "data-slot": "file-chip", "data-state": state, "data-stage": file?.stage ?? "", ...(why ? { title: why } : null), children: [type.startsWith("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: name }), _jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: progress(state, sent, file) }), onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null] }));
+}
+/** A file held for the next message: uploading, then indexing, then ready. */
+function HeldChip({ one, onRemove }) {
+    const live = useWorkFile(one.file?.id);
+    const file = live ?? one.file;
+    const state = one.state === "uploading" ? one.state : (file?.status ?? one.state);
+    return _jsx(Chip, { name: one.name, type: one.type, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), onRemove: onRemove });
+}
+/** A file a sent turn carried, as the index says of it now. */
+function TurnChip({ f }) {
+    const live = useWorkFile(f.id);
+    return _jsx(Chip, { name: f.name, type: f.type, state: live?.status ?? "ready", sent: 1, file: live });
+}
+/** A question that carried files: its words, the files put into it, and those read again. */
+function Carried({ text, attached, reused }) {
+    return (_jsxs(YStack, { gap: "$1.5", "data-slot": "turn-files", children: [text ? _jsx(Prose, { text: text }) : null, attached.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Files in this message", children: attached.map((f) => (_jsx(TurnChip, { f: f }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
+}
 /**
  * The conversation. One component for a visitor and for an account.
  *
@@ -598,9 +668,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // identity changes on every `setMessages` — `useChat` closes over `messages` —
     // so an effect depending on it re-runs after each streamed token.
     const latest = useRef(send);
-    // The images held for a turn ride with it at the moment it is sent, queued or
-    // not, and are spent once: a retry is the words again, not the pictures.
-    latest.current = (text) => send(text, outgoing.current.splice(0));
+    latest.current = (text) => send(text);
     // THE COMPOSER'S DRAFT IS HELD HERE, so an arriving question can be typed into
     // it. `Chat` owns a draft of its own and spreads `composer` after it, so
     // passing value/onChange/onSend takes that ownership over rather than fighting
@@ -609,26 +677,33 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // 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.
+    // under Sources are one list. Each goes to the org's workspace and is indexed
+    // there; the turn carries it by reference (lib/attach), with the passages
+    // read from it for the question.
     const { held: files, refused: turnedAway } = usePane(at);
+    const via = useMemo(() => ({ api: ai, org: anonymous ? null : org() }), [ai, anonymous]);
+    // What the send is waiting on — uploads landing, the files being read — said
+    // over the field, and the reason a second press does nothing meanwhile.
+    const [preparing, setPreparing] = useState(null);
     const [dragging, setDragging] = useState(false);
-    const outgoing = useRef([]);
     const depth = useRef(0);
     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
-    // the Hanzo gateway and `base()` is the one place a host is read from, so
-    // pointing a local cloud at one points both. The token is the reader's own —
-    // the package never invents a credential — and a refusal is worn by
-    // `<Voice/>`, never passed off as a transcript.
+    // posted to /v1/audio/transcriptions (`zen-scribe`), and what was said lands
+    // AFTER what the draft already held (`useDictation`) — a pause between two
+    // sentences never loses the first. `speech()` defaults to the Hanzo gateway
+    // and `base()` is the one place a host is read from, so pointing a local
+    // cloud at one points both. The token is the reader's own — the package never
+    // invents a credential — and a refusal is worn by `<Voice/>`, never passed off
+    // as a transcript.
     const { token } = useIamToken();
     const ear = useMemo(() => speech({ ...base(), ...(token ? { token } : {}) }), [token]);
-    const voice = useVoice({
-        speech: ear,
-        onPartial: setDraft,
-        onUtterance: setDraft,
-    });
+    const voice = useVoice({ speech: ear, ...useDictation(draft, setDraft) });
+    // TALK MODE: a hands-free conversation on Hanzo's realtime socket, /v1/voice.
+    // The mic streams up, the answer streams back as speech with its words in
+    // `talk.reply`, and talking over it stops it. Its own conversation, so its
+    // turns are drawn above the composer rather than posted into the thread.
+    const talk = useTalk({ ...base(), ...(token ? { token } : {}), org: org() ?? undefined });
     // WHILE THE MIC IS OPEN, A FINISHED REPLY IS READ ALOUD by the platform's
     // voice, through the conversation's own mouth so speaking over it stops it.
     // A room's reply is read part by part, each in its speaker's cast voice.
@@ -639,11 +714,12 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             const lastMsg = msgs[msgs.length - 1];
             if (lastMsg && lastMsg.role === "assistant" && typeof lastMsg.content === "string") {
                 const parts = room.length > 1 ? speakers(lastMsg.content, room) : [{ who: withWhom, text: lastMsg.content }];
+                // A part spoken over ends the reading rather than handing on to the next.
                 void (async () => {
                     for (const part of parts) {
                         const said = cleanForSpeech(part.text);
-                        if (said)
-                            await voice.say(said, voiceOf(part.who ?? withWhom ?? undefined));
+                        if (said && !(await voice.say(said, voiceOf(part.who ?? withWhom ?? undefined))))
+                            break;
                     }
                 })();
             }
@@ -790,15 +866,63 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         }
         speak(text);
     }, [model, speak]);
-    /** The draft and the held files, sent as one turn. */
+    /**
+     * The draft and the files, sent as one turn.
+     *
+     * A file goes by REFERENCE: the send waits for each held file's upload to
+     * land, then asks the index for the passages that answer the question —
+     * across the files put into this turn and every file earlier turns carried —
+     * and the turn carries their names and those passages, each citing
+     * file › section › ¶n. A file still indexing is waited on for a bounded
+     * while; past it the turn says the file is not readable yet rather than
+     * answering as though it had been read.
+     */
     const submit = () => {
         const text = draft.trim();
-        if (!text && !files.length)
+        if (preparing || (!text && !files.length))
             return;
-        const going = spend(at);
-        outgoing.current = images(going);
+        const holding = files.slice();
+        const earlier = carriedIn(chat.messages);
+        if (!holding.length && !earlier.length) {
+            setDraft("");
+            guarded(text);
+            return;
+        }
         setDraft("");
-        guarded(compose(text, going));
+        void (async () => {
+            try {
+                if (holding.some((h) => !h.file))
+                    setPreparing(`Uploading ${names(holding)}`);
+                const landedFiles = (await Promise.all(holding.map(landed))).filter((f) => !!f);
+                spend(at);
+                const attached = landedFiles.map(refOf);
+                const reused = earlier.filter((f) => !attached.some((a) => a.id === f.id));
+                const all = [...attached, ...reused];
+                if (!all.length) {
+                    if (text)
+                        guarded(text);
+                    else
+                        setDraft(text);
+                    return;
+                }
+                setPreparing(`Reading ${names(all)}`);
+                const now = await readable(ai, landedFiles, READ_WAIT);
+                let grounds = null;
+                let why;
+                try {
+                    grounds = await retrieve(ai, text || `What is in ${names(all)}?`, all.map((f) => f.id), 8);
+                }
+                catch {
+                    why = "the workspace could not be read just now";
+                }
+                if (!grounds?.passages.length)
+                    why = why ?? unread(now);
+                guarded(compose(text, { attached, reused }, grounds, why));
+            }
+            finally {
+                setPreparing(null);
+            }
+        })();
     };
     /*
       WHAT AN UNANSWERED QUESTION LOOKS LIKE: a turn of its own directly under it,
@@ -908,7 +1032,8 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             if (!e.dataTransfer.files?.length)
                 return;
             e.preventDefault();
-            void hold(at, Array.from(e.dataTransfer.files));
+            // A dropped folder arrives as entries; each file under it goes up with its path.
+            void dropped(e.dataTransfer).then((list) => hold(at, list, via));
         }, 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");
@@ -946,6 +1071,13 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     if (turn.role === "user" && Array.isArray(turn.content))
                         return _jsx(Parts, { parts: partsOf(turn.content), prose: (text) => _jsx(Prose, { text: text }) });
                     const said = typeof turn.content === "string" ? turn.content : "";
+                    // A QUESTION THAT CARRIED FILES draws its words and the files' chips;
+                    // the passages it handed the model are the model's to read, not ours.
+                    if (turn.role === "user" && said) {
+                        const read = told(said);
+                        if (read.carried)
+                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused });
+                    }
                     // WHO IS ANSWERING, while the answer has no words yet: the agents the
                     // question addresses, or the whole room when it names nobody.
                     if (turn.role === "assistant" && !said && chat.streaming && room.length) {
@@ -1034,7 +1166,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     // `Control` circle as the mic, filled.
                     // 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" }) })] })),
+                    children: (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", onClick: () => take(at, via), 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: {
@@ -1042,13 +1174,23 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                             if (!e.clipboardData?.files?.length)
                                 return;
                             e.preventDefault();
-                            void hold(at, Array.from(e.clipboardData.files));
+                            void hold(at, Array.from(e.clipboardData.files), via);
                         },
                     },
                     // 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 || 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 })) })] })),
+                    head: files.length || turnedAway || preparing || talk.open || talk.refusal ? (_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) => (_jsx(HeldChip, { one: one, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
+                                    ? REFUSED.lost
+                                    : talk.reply
+                                        ? `Hanzo: ${talk.reply}`
+                                        : talk.state === "listening"
+                                            ? "Listening — speak, and Hanzo answers aloud."
+                                            : "Connecting…" })) : 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, says: { idle: "Dictate", listening: "Dictating — click to stop" }, children: (state) => (_jsx(Mic, { size: 15, fill: state === "idle" ? "none" : "currentColor" })) }) }), _jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: talk, "data-slot": "composer-talk", says: {
+                                        idle: "Talk with Hanzo",
+                                        listening: "In conversation — click to hang up",
+                                        speaking: "Hanzo is speaking — talk to interrupt",
+                                    }, children: () => _jsx(AudioLines, { size: 15 }) }) }), _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.
                     foot: held && limits && (limits.session || limits.day || limits.month) ? (_jsx(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 3rem)`, mx: "auto", children: _jsx(Meters, { limits: limits }) })) : undefined,

package/dist/Contents.d.ts

@@ -0,0 +1,23 @@
+import { type Api, type Passage, type WorkFile } from './lib/files.js';
+/** How far a file's ingest has got, as Drive's badge and this pane's head say it. */
+export declare function standing(f: WorkFile): string;
+/** The badge a Drive row wears for its index state. */
+export declare function Badge({ f }: {
+    f: WorkFile;
+}): import("react").JSX.Element;
+/** Passages of the workspace that match a search, each naming where it is. */
+export declare function Hits({ hits, onOpen }: {
+    hits: Passage[];
+    onOpen: (p: Passage) => void;
+}): import("react").JSX.Element;
+/** The pane: a file's tree, and one section opened from it. */
+export declare function Contents({ api, file, at, onClose, onAsk, onFollow, }: {
+    api: Api;
+    file: WorkFile;
+    /** The section to open on arrival, when a search hit brought the reader here. */
+    at?: number;
+    onClose: () => void;
+    onAsk: (f: WorkFile) => void;
+    /** Follows a link into another file. */
+    onFollow: (file: string, section: number) => void;
+}): import("react").JSX.Element;

package/dist/Contents.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A workspace file's table of contents, opened beside Drive.
+//
+// The index reads every file into sections — a page's headings, a PDF's outline,
+// a document's heading styles, a sheet's rows, a long text cut into parts — each
+// with a one-line summary. This pane draws that tree, opens a section's own
+// text, and follows the graph from it: the sections it links to, the files that
+// cite it, the entities it shares with the rest of the workspace. It is the same
+// tree `retrieve` reads before it picks where to look, so what a person browses
+// here is what an answer cites.
+import { useEffect, useState } from 'react';
+import { ArrowLeft, MessageSquare, X } from 'lucide-react';
+import { Box, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { section as openSection, toc } from './lib/files.js';
+import { BAD } from './lib/mix.js';
+/** How far a file's ingest has got, as Drive's badge and this pane's head say it. */
+export function standing(f) {
+    switch (f.status) {
+        case 'ready':
+            return `Indexed · ${f.sections ?? 0} sections`;
+        case 'stored':
+            return 'Kept, not indexed';
+        case 'failed':
+            return 'Indexing failed';
+        case 'queued':
+            return 'Queued';
+        default:
+            if (f.stage === 'embed' && f.passages)
+                return `Indexing ${Math.floor(((f.embedded ?? 0) / f.passages) * 100)}%`;
+            return `Indexing · ${f.stage ?? 'starting'}`;
+    }
+}
+/** The badge a Drive row wears for its index state. */
+export function Badge({ f }) {
+    const bad = f.status === 'failed';
+    return (_jsx(Text, { fontSize: "$1", color: bad ? BAD : f.status === 'ready' ? '$soft' : '$faint', numberOfLines: 1, "data-slot": "drive-index", "data-state": f.status, "data-stage": f.stage ?? '', ...(f.error ? { title: f.error } : null), children: standing(f) }));
+}
+/** Passages of the workspace that match a search, each naming where it is. */
+export function Hits({ hits, onOpen }) {
+    return (_jsxs(YStack, { gap: "$2", "data-slot": "drive-passages", children: [_jsx(Text, { fontSize: 12, fontWeight: "600", color: "$soft", children: "Passages" }), _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: 8, overflow: "hidden", children: hits.map((p, i) => (_jsxs(YStack, { px: 16, py: 10, gap: "$1", cursor: "pointer", borderBottomWidth: i === hits.length - 1 ? 0 : 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, onPress: () => onOpen(p), "data-slot": "drive-passage", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: p.cite }), _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 3, children: p.text })] }, `${p.file.id}#${p.section.id}.${p.part}.${i}`))) })] }));
+}
+/** The pane: a file's tree, and one section opened from it. */
+export function Contents({ api, file, at, onClose, onAsk, onFollow, }) {
+    const [tree, setTree] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const [open, setOpen] = useState(null);
+    const [reading, setReading] = useState(at ?? null);
+    useEffect(() => {
+        let live = true;
+        setTree(null);
+        setFailed(null);
+        toc(api, file.id)
+            .then((t) => live && setTree(t))
+            .catch((e) => live && setFailed(e?.message || 'The contents could not be read.'));
+        return () => {
+            live = false;
+        };
+    }, [api, file.id]);
+    useEffect(() => {
+        setReading(at ?? null);
+    }, [at, file.id]);
+    useEffect(() => {
+        if (reading === null) {
+            setOpen(null);
+            return;
+        }
+        let live = true;
+        openSection(api, file.id, reading)
+            .then((o) => live && setOpen(o))
+            .catch((e) => live && setFailed(e?.message || 'The section could not be opened.'));
+        return () => {
+            live = false;
+        };
+    }, [api, file.id, reading]);
+    const shown = tree?.file ?? file;
+    return (_jsxs(YStack, { position: "absolute", t: 0, r: 0, b: 0, width: 440, maxW: "100%", bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", boxShadow: "var(--shadow-lg)", z: "var(--z-drawer)", "data-slot": "drive-contents", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", px: "$4", py: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(YStack, { minW: 0, flex: 1, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, children: shown.name }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: standing(shown) })] }), _jsxs(Button, { size: "sm", onClick: () => onAsk(shown), "aria-label": "Ask in chat", children: [_jsx(MessageSquare, { size: 14 }), "Ask in chat"] }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onClose, "aria-label": "Close contents", title: "Close", children: _jsx(X, { size: 15 }) })] }), _jsxs(YStack, { flex: 1, minH: 0, overflowY: "auto", px: "$4", py: "$3", gap: "$2", children: [failed ? (_jsx(Text, { fontSize: "$2", color: BAD, children: failed })) : null, open ? (_jsxs(YStack, { gap: "$3", "data-slot": "drive-section", children: [_jsxs(Button, { variant: "ghost", size: "sm", justify: "flex-start", px: 0, onClick: () => setReading(null), children: [_jsx(ArrowLeft, { size: 13 }), "Contents"] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: open.section.path }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", children: open.section.title }), open.summary ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: open.summary })) : null, _jsx(Text, { fontSize: "$2", color: "$ink", whiteSpace: "pre-wrap", children: open.text }), open.children.length ? (_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: 11, fontWeight: "600", color: "$faint", letterSpacing: 0.6, children: "Subsections" }), open.children.map((c) => (_jsx(Entry, { e: c, onOpen: () => setReading(c.id) }, c.id)))] })) : null, open.links.length ? (_jsxs(YStack, { gap: "$1", "data-slot": "drive-links", children: [_jsx(Text, { fontSize: 11, fontWeight: "600", color: "$faint", letterSpacing: 0.6, children: "Linked" }), open.links.map((l, i) => (_jsxs(Box, { render: "button", items: "flex-start", py: "$1", onClick: () => (l.file.id === file.id ? setReading(l.section.id) : onFollow(l.file.id, l.section.id)), children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: l.file.id === file.id ? l.section.path || l.section.title : `${l.file.name} › ${l.section.path || l.section.title}` }), _jsxs(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: [l.kind, l.label ? ` · ${l.label}` : ''] })] }, `${l.file.id}#${l.section.id}.${i}`)))] })) : null, open.entities.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Names: ", open.entities.map((e) => e.name).join(', ')] })) : null] })) : !tree ? (failed ? null : (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading the contents\u2026" }))) : tree.sections.length <= 1 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: shown.status === 'ready' ? 'This file has no sections.' : 'The contents appear once the file is indexed.' })) : (tree.sections
+                        .filter((e) => e.level > 0)
+                        .map((e) => _jsx(Entry, { e: e, onOpen: () => setReading(e.id) }, e.id)))] })] }));
+}
+/** One line of the tree, indented by its depth. */
+function Entry({ e, onOpen }) {
+    return (_jsxs(Box, { render: "button", items: "flex-start", pl: (Math.max(1, e.level) - 1) * 14, py: "$1", onClick: onOpen, "data-slot": "drive-toc-entry", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: e.title }), e.summary ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 2, children: e.summary })) : null] }));
+}