@hanzo/rooms 0.1.38 → 0.1.39

package/dist/Chat.js

@@ -30,40 +30,36 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { billed, detail, familyOf, planRequired, plainly, refused } from "./failure.js";
 import { Prose } from "./Prose.js";
-import { useAgent, useAi, useChat, useModels, } from "@hanzo/ai/react";
+import { useAgent, useAi, useChat, } 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 { ASK, Chat as ChatSurface, Failure, Parts, words } from "@hanzo/ui/chat";
 import { carriedIn, compose, partsOf, said as told, weigh } from "./lib/attach.js";
 import { download, dropped, fileOf, pct, readable, refOf, retrieve } from "./lib/files.js";
 import { channel, drop, hold, landed, localOf, 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 { cleanForSpeech, speakAgent } from "./speech.js";
 import { Crew, HOUSE, useCrew } from "./crew.js";
 import { called } from "./team.js";
-import { Anchor, Box, Button, Text, Tooltip, TooltipContent, TooltipTrigger, View, XStack, YStack } from "@hanzo/ui";
-import { Control } from "@hanzo/composer";
+import { Anchor, Box, Button, Text, View, XStack, YStack } from "@hanzo/ui";
+import { useMedia } from "@hanzo/gui";
 import { useIam, useIamToken } from "@hanzo/iam/react";
-import { hasSession, org } from "./lib/session.js";
-import { chats, house, paidPlan, setCreditsAfterAllowance, useLimits } from "./lib/limits.js";
-import { parseModels } from "@hanzo/ui/models/catalog";
+import { bearer, hasSession, org } from "./lib/session.js";
+import { api } from "./lib/api.js";
+import { chats, house, paidPlan, paused, setCreditsAfterAllowance, useLimits } from "./lib/limits.js";
 import { LimitedBanner } from "@hanzo/ui/product/LimitedBanner";
 import { WEB } from "./lib/web.js";
 import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
-import { refused as worded, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, AudioLines, FileText, Image as ImageMark, Mic, Paperclip, Pin, Square, PanelRight, X } from "lucide-react";
-import { ENSO, FREE } from "./lib/ai.js";
+import { refused as worded, speech, useDictation, useTalk, useVoice } from "@hanzo/voice";
+import { FileText, Image as ImageMark, Paperclip, Pin, X } from "lucide-react";
+import { FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
-import { pane } from "./ground.js";
-import { RightPane, addressOf, look, usePinned } from "./RightPane.js";
-import { useMedia } from "@hanzo/gui";
-import { Take } from "./copy.js";
+import { SEED, look, useKinds } from "./RightPane.js";
 import { Share } from "./Share.js";
 import { useThreadActions, useThreadList } from "./thread.js";
-import { useModel } from "./model.js";
-import { Enso, nameOf, useEffort } from "./enso.js";
+import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, useDeck, useKey, useMind, usePanel, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
@@ -180,9 +176,6 @@ function useSeed(initial, set) {
             apply.current(initial);
     }, [initial]);
 }
-/** The circle both controls are cut from: @hanzo/composer's `Control`, at the
- *  30px a line of this composer's footer row holds. */
-const ROUND = 30;
 export function Chat() {
     const { isAuthenticated, isLoading } = useIam();
     const hydrated = useHydrated();
@@ -486,10 +479,11 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
      * that settles after mount. Picking from the menu still wins, permanently.
      */
     const [asking, setAsking] = useState(null);
-    // The setter is taken now, not just the value: the override moved from
-    // Settings into the composer's own panel, so this is where it is written.
-    const [preferred, setPreferred] = useModel();
-    const [effort, setEffort] = useEffort();
+    // THE MODEL AND THE EFFORT are the one choice Chat and Dev share
+    // (@hanzo/build `useMind`): the catalog from `GET /v1/models` and what the
+    // reader kept, changed from the composer's chip or from Settings.
+    const target = useMemo(() => ({ api: api(), token: bearer, org: org() }), [anonymous]); // eslint-disable-line react-hooks/exhaustive-deps
+    const mind = useMind(target);
     const ai = useAi();
     // In the app's frame the composer floats on the pane as a pane of its own.
     const framed = useContext(Framed);
@@ -506,33 +500,45 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     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
-    // switch for it. Kept per conversation by `pane.ts`, so the header's control
-    // reflects THIS room rather than the last one that was open.
-    const [pinned, flipPin] = usePinned();
-    // The frame draws the column only from `$lg` (Shell.tsx `Paned`).
+    // THE SIDE PANEL (@hanzo/build `Panel`), the one Dev's runs open too: open or
+    // shut as Chat was left on a laptop, a sheet asked for on a phone, its tabs
+    // kept per conversation. The header's Panel button and ⌘. move it.
     const wide = useMedia().lg;
+    const [panel, setPanel] = usePanel("chat", false, wide);
+    const deck = useDeck(`chat:${at}`, SEED);
+    useKey(() => setPanel(!panel));
+    // On a laptop the frame's column is the panel's; a close from the frame (its
+    // edge pulled shut, the shell's own control) comes back into `panel`.
+    useEffect(() => {
+        if (wide)
+            showAside(panel ? "tasks" : null);
+    }, [panel, wide, showAside]);
+    const wasAside = useRef(aside);
+    useEffect(() => {
+        if (wide && wasAside.current !== aside) {
+            if (aside === null && panel)
+                setPanel(false);
+            else if (aside !== null && !panel)
+                setPanel(true);
+        }
+        wasAside.current = aside;
+        // Answers the frame's moves only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [aside]);
+    /** What an answer wrote, open in the panel as a page rendered from its own bytes. */
+    const see = useCallback((a) => {
+        deck.open({ kind: PAGE, title: a.name, body: a.body, type: a.mime });
+        setPanel(true);
+    }, [deck, setPanel]);
     /**
-     * OPENS A FILE A MESSAGE CARRIES, by the road the column's Sources row takes
-     * (`look`): a tab in the browser beside the conversation, the column opened
-     * first when it is shut. A phone has no column — the frame spends the width
-     * on the room — so there the file opens in a tab of the browser's own, minted
-     * before the signed address is asked for, since a window opened after an
-     * await is a popup the browser blocks.
+     * OPENS A FILE A MESSAGE CARRIES, by the road the Sources tab takes (`look`):
+     * a page tab in the side panel, the panel opened when it is shut — a column on
+     * a laptop, a sheet on a phone.
      */
     const openFile = useCallback((m) => {
-        if (wide) {
-            if (aside === null)
-                showAside("tasks");
-            void look(at, m, ai);
-            return;
-        }
-        const tab = window.open("", "_blank");
-        if (!tab)
-            return;
-        tab.opener = null;
-        void addressOf(m, ai).then((href) => (href ? tab.location.replace(href) : tab.close()));
-    }, [wide, aside, showAside, at, ai]);
+        void look(deck, m, ai);
+        setPanel(true);
+    }, [deck, ai, setPanel]);
     /**
      * WHO YOU ARE TALKING TO, when it is somebody rather than the plain model.
      *
@@ -629,20 +635,16 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // A SPEECH MODEL NEVER ANSWERS A CHAT TURN. The catalog lists the
     // transcriber and the voice beside the chat models; one that names its
     // outputs and names no text (`chats`) is neither offered nor fallen back to.
-    const { models: catalog } = useModels();
-    const models = useMemo(() => catalog.filter(chats), [catalog]);
+    const listed = mind.models;
+    const models = useMemo(() => listed.filter(chats), [listed]);
     // EVERY MODEL THE GATEWAY LISTS is offered here, through the one picker, and
     // read from the catalog's own fields (`parseModels`): its class, its family.
     // A premium model is picked for THIS conversation and never remembered as
-    // the default, so the next chat starts on Enso again; any other pick is the
-    // reader's default. A preference kept from before for a premium model is
-    // not a default either, so the house router is asked for instead. An agent's
-    // own model is sent as it is named; the gateway says which model answered
-    // (`servedBy`).
-    const listed = useMemo(() => parseModels(catalog), [catalog]);
+    // the default (`useMind`), so the next chat starts on what was kept. An
+    // agent's own model is sent as it is named; the gateway says which model
+    // answered (`servedBy`).
     const rowOf = (id) => listed.find((m) => m.id === id);
-    const [picked, setPicked] = useState(null);
-    const wanted = picked ?? (preferred && rowOf(preferred)?.class !== "premium" ? preferred : ENSO);
+    const wanted = mind.model;
     // A model the catalog lists is sent as picked, whatever it answers with; only
     // a name the catalog does not list falls to one that converses (`served`).
     const sent = anonymous ? FREE : wanted;
@@ -652,9 +654,11 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // bars and no near note — those live on Settings → Usage. It says something
     // only once the reader is turned away: a reply answered from a free model, or
     // a refusal.
-    const { limits, notice, reload: reread } = useLimits(!anonymous, org(), (id) => nameOf(catalog, id));
+    const { limits, notice, reload: reread } = useLimits(!anonymous, org(), (id) => nameOf(id, listed));
     const held = paidPlan(limits);
     const pause = notice && (notice.fallback || notice.refused) ? notice : null;
+    // The banner's words and ways: the plan by name, when it comes back, and the two ways on.
+    const banner = pause ? paused(pause, limits?.plan ?? "", (id) => nameOf(id, listed)) : null;
     // EVERY MODEL IS CHOSEN, never asked for: one the plan does not cover still
     // picks, and the gateway answers it with the policy's refusal or from Enso,
     // which the room then shows. A turn the gateway refuses `plan_required`
@@ -662,12 +666,6 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // free-lane notice.
     const free = useFree(!anonymous) && !held;
     const [ask, setAsk] = useState(null);
-    const choose = (id) => {
-        if (rowOf(id)?.class === "premium")
-            return setPicked(id);
-        setPicked(null);
-        setPreferred(id);
-    };
     // KEEPING THE CONVERSATION is the reader's account, not this pane's choice:
     // the store is per-org, so a signed-in reader has somewhere for it to go and
     // an anonymous one does not. `thread` names the conversation being continued
@@ -684,12 +682,12 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         // lookups the platform's assistant uses, run inside the completion by the
         // client's fetch (lib/web.ts), so a question about the weather or the news
         // is answered from what the web says now.
-        params: { reasoning_effort: effort, ...(!anonymous && house(rowOf(model)?.family) ? { tools: WEB } : {}) },
+        params: { reasoning_effort: mind.effort, ...(!anonymous && house(rowOf(model)?.family) ? { tools: WEB } : {}) },
         ...(open ? { thread: open } : {}),
         onError: (e) => {
             const needs = planRequired(e);
             if (needs && free)
-                setAsk({ ...needs, model: nameOf(models, model) });
+                setAsk({ ...needs, model: nameOf(model, listed) });
         },
     });
     const { send, set, error, thread: kept } = chat;
@@ -951,7 +949,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         setActWrong("");
         if (a.kind === "switch") {
             if (a.model)
-                choose(a.model);
+                mind.pick(a.model);
             return;
         }
         if (a.kind !== "credits") {
@@ -970,9 +968,9 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         })
             .catch((e) => setActWrong(e instanceof Error ? e.message : "Credits could not be turned on."));
     }, 
-    // `choose` is rebuilt each render; the handler follows it.
+    // `mind.pick` is rebuilt each render; the handler follows it.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [reread, speak, failures, picked, preferred, listed]);
+    [reread, speak, failures, mind.model, listed]);
     // A TURN THAT NEVER SPEAKS IS STOPPED. A stream that stays open with nothing
     // in it would leave a Stop button and no answer for as long as the upstream
     // holds the connection; after `STALL` it is ended and its question is said to
@@ -1005,8 +1003,31 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         if (!heard || (heard.served === heard.asked && ROUTERS.has(heard.asked)))
             return null;
         const fell = heard.asked && heard.asked !== heard.served && !ROUTERS.has(heard.asked);
-        return (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["answered by ", heard.served, fell ? ` · ${heard.asked} was unavailable` : ""] }));
+        return _jsx(Served, { served: heard.served, asked: fell ? heard.asked : undefined });
+    };
+    // LISTEN reads a part in its speaker's cast voice, through the platform.
+    const listen = useCallback((who) => (text, done) => speakAgent(text, { agent: who, token, onEnd: done, onError: done }), [token]);
+    /** The way to open what a part of an answer wrote, where it wrote something. */
+    const opener = (text) => {
+        const a = lead(artifacts(text));
+        return a ? () => see(a) : undefined;
     };
+    // WHAT AN ANSWER MAKES OPENS BESIDE IT. With the panel open, a page or a
+    // picture an answer just finished writing is opened as a tab; with it shut,
+    // the answer's own Open does it.
+    const writing = useRef(false);
+    useEffect(() => {
+        const was = writing.current;
+        writing.current = chat.streaming;
+        if (!was || chat.streaming || !panel)
+            return;
+        const answer = [...turns.current].reverse().find((m) => m.role === "assistant");
+        const made = typeof answer?.content === "string" ? artifacts(answer.content).filter(renders) : [];
+        if (made.length)
+            see(made[made.length - 1]);
+        // On the turn's end only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chat.streaming]);
     // WHAT WAS SAID, which is not everything the thread holds. The persona rides
     // as a system turn so the wire carries it; drawing it would print a character
     // brief in the transcript as though somebody had typed it, and would make a
@@ -1021,6 +1042,8 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // record's own picture. Its own answer comes first, which is the order
     // `Face` already states for every other surface.
     const portrait = mate?.avatar ?? persona?.avatar ?? roleOf(withWhom)?.portrait;
+    // Chat's kinds of tab in the side panel: Artifacts and Sources, read from the turns.
+    const kinds = useKinds({ at, said, held: files, deck });
     /** Whether the field has focus, so the FRAME can wear the ring the field is
      *  no longer allowed to draw. `:focus-within` would say this in CSS; the
      *  stylesheet that would hold it cannot reach past gui's own rule, so the
@@ -1139,17 +1162,17 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         const said = !failed
             ? "No answer came back for this question."
             : failed.stalled
-                ? `${nameOf(models, model)} sent nothing for ${STALL / 60_000} minutes, so the turn was stopped.`
+                ? `${nameOf(model, listed)} sent nothing for ${STALL / 60_000} minutes, so the turn was stopped.`
                 : failed.empty
-                    ? `${nameOf(models, model)} answered with nothing.`
+                    ? `${nameOf(model, listed)} answered with nothing.`
                     : bill
-                        ? notice?.message ?? (bill.message || plainly(wrong, "this conversation"))
+                        ? banner?.message ?? notice?.message ?? (bill.message || plainly(wrong, "this conversation"))
                         : resign
                             ? anonymous
                                 ? "Sign in to ask this."
                                 : "Your session needs to be refreshed. Sign in to reconnect."
                             : how?.provider
-                                ? `${familyOf(model) || nameOf(models, model)} is unavailable right now.`
+                                ? `${familyOf(model) || nameOf(model, listed)} is unavailable right now.`
                                 : plainly(wrong, "this conversation");
         return (_jsx(Failure, { onRetry: resign || bill?.code === "free_plan_cap" ? undefined : () => speak(text, question.id), children: _jsxs(YStack, { gap: "$2", children: [_jsxs(Text, { fontSize: "$3", color: "$ink", children: [whom.length ? `No answer from ${join(whom)}. ` : "", said] }), how?.provider && wrong ? _jsx(Why, { text: detail(wrong) }) : null, !bill && (resign || lift || how?.wallet || how?.visitor) ? (_jsx(XStack, { gap: "$2", flexWrap: "wrap", children: resign ? (_jsx(Button, { size: "sm", onClick: () => {
                                 if (typeof window !== "undefined") {
@@ -1157,7 +1180,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                                     localStorage.removeItem("hanzo_iam_refresh_token");
                                 }
                                 enter(LOGIN);
-                            }, children: "Sign in" })) : lift ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setAsk({ ...lift, model: nameOf(models, model) }), children: "Upgrade" })) : how?.visitor ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => enter(), children: "Sign in to keep going" })) : (_jsx(Anchor, { href: checkoutUrl(), children: _jsx(Button, { size: "sm", variant: "outline", children: "Add credit" }) })) })) : null] }) }));
+                            }, children: "Sign in" })) : lift ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setAsk({ ...lift, model: nameOf(model, listed) }), children: "Upgrade" })) : how?.visitor ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => enter(), children: "Sign in to keep going" })) : (_jsx(Anchor, { href: checkoutUrl(), children: _jsx(Button, { size: "sm", variant: "outline", children: "Add credit" }) })) })) : null] }) }));
     };
     // The agreement is asked OVER the room, not instead of it. Returning the
     // consent on its own replaced the whole pane: the question the reader had
@@ -1203,22 +1226,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             e.preventDefault();
             // 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: () => mine && void acts.pin(mine), "aria-disabled": !mine, "aria-label": mine?.pinned ? "Unpin this conversation" : "Pin this conversation", "aria-pressed": !!mine?.pinned, p: "$1.5", rounded: "$2", opacity: mine ? 1 : 0.5, hoverStyle: { bg: '$hover' }, children: _jsx(Pin, { size: 15, "aria-hidden": true, color: mine?.pinned ? "var(--foreground)" : "var(--muted-foreground)", fill: mine?.pinned ? "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)
-                                            flipPin();
-                                        return;
-                                    }
-                                    flipPin();
-                                }, "aria-label": "Toggle pinned summary", "aria-pressed": aside !== null && pinned, 
-                                // NOT ON A PHONE, because there is nothing for it to show there.
-                                // The frame draws the column only above `$lg` — it spends the whole
-                                // width on the room below that (`Shell.tsx`) — so this control
-                                // would press, change the stored pin, and move nothing on screen.
-                                // A button whose effect is invisible is a button that does nothing.
-                                // Same breakpoint as the column, so the two cannot drift apart.
-                                display: "none", $lg: { display: "flex" }, p: "$2", rounded: "$2", hoverStyle: { bg: "$hover" }, children: _jsx(PanelRight, { size: 15, color: "var(--soft, var(--muted-foreground))" }) }), open ? _jsx(Share, { thread: open }) : null] })] }), _jsxs(Beside, { children: [_jsx(RightPane, { said: said, onClose: () => showAside(null) }), _jsx(Work, { persona: persona ?? null, room: room, model: model, messages: said })] }), isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
+        }, 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: () => mine && void acts.pin(mine), "aria-disabled": !mine, "aria-label": mine?.pinned ? "Unpin this conversation" : "Pin this conversation", "aria-pressed": !!mine?.pinned, p: "$1.5", rounded: "$2", opacity: mine ? 1 : 0.5, hoverStyle: { bg: '$hover' }, children: _jsx(Pin, { size: 15, "aria-hidden": true, color: mine?.pinned ? "var(--foreground)" : "var(--muted-foreground)", fill: mine?.pinned ? "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: "$2", children: [open ? _jsx(Share, { thread: open }) : null, _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: kinds, onHide: () => setPanel(false), label: "Conversation details" }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: kinds, sheet: true, onHide: () => setPanel(false), label: "Conversation details" }) : null, isFree(model) ? (_jsxs(Text, { fontSize: "$2", color: "$soft", text: "center", maxW: MEASURE, mx: "auto", px: "$4", py: "$2", children: [freeCopy.notice, " ", _jsx(Anchor, { href: site("/legal/privacy"), children: freeCopy.noticeCta })] })) : null, _jsx(ChatSurface, { ...chat, messages: shown, send: guarded, 
                 // AN EMPTY ROOM CENTRES ITS COMPOSER. While nothing has been said the
                 // opening (the heading and the starters) and the composer sit as one
                 // group in the middle of the height, with or without the plan bars in
@@ -1270,9 +1278,9 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                         const silent = room.length > 1 && !(chat.streaming && at === shown.length - 1)
                             ? addressed(words(q?.content), room).filter((name) => !parts.some((part) => part.who?.toLowerCase() === name.toLowerCase()))
                             : [];
-                        return (_jsxs(YStack, { gap: "$3", children: [parts.map((part, i) => (_jsxs(YStack, { gap: "$1", children: [part.who ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Face, { src: faces[part.who]?.avatar, emoji: faces[part.who]?.emoji, name: part.who, size: 20 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: part.who })] })) : null, _jsx(Prose, { text: part.text }), part.text ? (_jsxs(XStack, { ml: "$-1", items: "center", gap: "$2", children: [_jsx(Take, { text: part.text, says: "this answer" }), _jsx(SpeakButton, { text: part.text, agentName: part.who ?? withWhom ?? undefined })] })) : null] }, i))), silent.length ? (_jsxs(Text, { fontSize: "$2", color: "$soft", children: ["No answer from ", join(silent), " in this reply."] })) : null, byline(turn.id)] }));
+                        return (_jsxs(YStack, { gap: "$3", children: [parts.map((part, i) => (_jsxs(YStack, { gap: "$1", children: [part.who ? (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Face, { src: faces[part.who]?.avatar, emoji: faces[part.who]?.emoji, name: part.who, size: 20 }), _jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$ink", children: part.who })] })) : null, _jsx(Prose, { text: part.text }), part.text ? _jsx(Reply, { text: part.text, listen: listen(part.who ?? withWhom ?? undefined), onOpen: opener(part.text) }) : null] }, i))), silent.length ? (_jsxs(Text, { fontSize: "$2", color: "$soft", children: ["No answer from ", join(silent), " in this reply."] })) : null, byline(turn.id)] }));
                     }
-                    return (_jsxs(YStack, { gap: "$1", children: [_jsx(Prose, { text: said }), turn.role === "assistant" && said ? (_jsxs(XStack, { ml: "$-1", items: "center", gap: "$2", children: [_jsx(Take, { text: said, says: "this answer" }), _jsx(SpeakButton, { text: said, agentName: withWhom })] })) : null, turn.role === "assistant" && said ? byline(turn.id) : null] }));
+                    return (_jsxs(YStack, { gap: "$1", children: [_jsx(Prose, { text: said }), turn.role === "assistant" && said ? _jsx(Reply, { text: said, listen: listen(withWhom ?? undefined), onOpen: opener(said) }) : null, turn.role === "assistant" && said ? byline(turn.id) : null] }));
                 }, 
                 // The page's ONE heading, and it belongs to the empty transcript rather
                 // than to a signed-out branch — the branch is gone, and the heading went
@@ -1284,61 +1292,20 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                                 }, px: "$3", py: "$2", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: "$raised" }, children: _jsx(Text, { fontSize: "$2", color: "$soft", children: one }) }, one))) })] })), 
                 // The transcript reads at the same measure. `Thread` defaults to 768
                 // itself; handing it the column here is what lets Width reach it.
-                column: { maxW: MEASURE }, composer: {
+                column: { maxW: MEASURE }, composer: prompt({
                     value: draft,
                     onChange: setDraft,
                     onSend: submit,
-                    // A CHARACTER IS WHO YOU ARE WRITING TO, so the field says so — and
-                    // `label` keeps the accessible name constant while it does, which is
-                    // the reason the component ships both: a placeholder that changes with
-                    // the room would otherwise rename the control every time you switch.
+                    onStop: chat.stop,
+                    busy: chat.streaming,
+                    // Files alone are a message: what is held goes with an empty draft too.
+                    ready: Boolean(draft.trim() || files.length),
+                    // A CHARACTER IS WHO YOU ARE WRITING TO, so the field says so, and
+                    // `label` keeps the accessible name constant while it does.
                     placeholder: room.length ? `Message ${join(room)}` : placeholder,
                     label: ASK,
-                    // CENTRED WHILE NOTHING HAS BEEN SAID, docked once something has —
-                    // `center` on the surface, which spaces the pair from outside it,
-                    // because with a foot the composer is a shell around this frame and
-                    // a margin given here would land inside the shell.
-                    // THE SAME MEASURE THE REST OF THIS FILE READS AT. The transcript's
-                    // text sits at the measure less its own 0.75rem gutters, so the field
-                    // is that wide too and its edges line up with the words above it.
-                    width: "calc(100% - 32px)",
-                    maxW: `calc(${MEASURE} - 1.5rem)`,
-                    mx: "auto",
-                    ...(framed ? pane() : null),
-                    // THE COMPONENT'S OWN SHAPE, and nothing here reaching into it.
-                    //
-                    // This carried about twenty style props that rebuilt it into a single
-                    // capsule: `flexDirection: "row"` above all, which lays the footer row
-                    // BESIDE a `flex: 1` field instead of under it. The footer row has no
-                    // width of its own in that arrangement, so send left the viewport at
-                    // every size but the widest — measured at 1280 it ended at 1315, at
-                    // 834 at 902, at 390 at 466, and on a phone the field stood 200px tall
-                    // where a line is 24. Each override was answering damage from the one
-                    // before it.
-                    //
-                    // Composer is a field over a footer row. CHOOSING a model is a
-                    // preference and not part of every message, so Settings owns the
-                    // choice — but the row still NAMES what is about to answer, because
-                    // `served()` may not send what was asked for.
-                    //
-                    // That fallback is written against this: a preference the gateway
-                    // does not carry gives way to a model it does, "because a chat that
-                    // works on a model the reader can see beats a chat that refuses on a
-                    // name nobody serves". Measured on production, neither `enso` nor
-                    // `free` is in the catalogue — every turn lands on the first served
-                    // model — so without this the substitution happens in silence and the
-                    // sentence justifying it is not true.
-                    //
-                    // Pressing it opens the pane that owns the choice, which is the one
-                    // place to change it.
-                    // Everything that is not the field, at the end of the row: Enso, the
-                    // mic, send. Send is drawn here because this slot replaces the
-                    // 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 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, via), children: _jsx(Paperclip, { size: 15, "aria-hidden": true }) }) }), _jsx(TooltipContent, { children: _jsx(Text, { fontSize: "$2", children: "Attach files" }) })] })),
+                    // In the app's frame the composer floats on the pane as a pane of its own.
+                    framed,
                     // A file or an image pasted into the field is held like a picked one;
                     // words paste as words.
                     field: {
@@ -1349,70 +1316,26 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                             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 || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 1.5rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, 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, onOpen: openFile, 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
+                    // WHAT GOES WITH THE MESSAGE, above the frame and at its width: the
+                    // pause and its ways past, one chip a file, and talk mode's words.
+                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(_Fragment, { children: [banner ? (_jsx(LimitedBanner, { message: banner.message, actions: banner.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, 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, onOpen: openFile, 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
                                     ? worded(talk.refusal)
                                     : 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: listed, limits: limits }), _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 })) })] })),
-                } }), said.length === 0 ? _jsx(Crew, {}) : null, isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                    // THE PAPERCLIP is the Sources tab's "Attach files", one press closer:
+                    // the same `take`, into the same `hold`.
+                    onAttach: () => take(at, via),
+                    // The one model-and-effort chip Dev's composer has (@hanzo/build).
+                    mind,
+                    limits,
+                    voice,
+                    talk,
+                }) }), said.length === 0 ? _jsx(Crew, {}) : null, isFree(model) ? (_jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", children: _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models. ", _jsx(Anchor, { href: site("/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] }) })) : null, consent, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }
 /** The agreement free asks for, in @hanzo/ai's words so every surface says one thing. */
 function Consent({ question, onAgree, onCancel, }) {
     return (_jsx(YStack, { position: "absolute", t: 0, l: 0, r: 0, b: 0, items: "center", justify: "center", p: "$4", z: 40, bg: SCRIM, children: _jsxs(YStack, { width: "100%", maxW: 512, px: "$5", py: "$5", gap: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Text, { render: "h2", fontSize: "$6", fontWeight: "500", color: "$ink", children: freeCopy.consentTitle }), question ? (_jsxs(Text, { fontSize: "$3", color: "$soft", numberOfLines: 2, children: ["Your question is waiting: \u201C", question, "\u201D"] })) : null, _jsx(Text, { fontSize: "$4", color: "$soft", children: freeCopy.consentBody }), _jsx(YStack, { gap: "$2", children: freeCopy.consentPoints.map((point) => (_jsx(Text, { fontSize: "$3", color: "$soft", children: point }, point))) }), _jsxs(XStack, { gap: "$3", flexWrap: "wrap", children: [_jsx(Button, { onClick: onAgree, children: freeCopy.consentAgreeCta }), _jsx(Button, { variant: "outline", onClick: onCancel, children: freeCopy.consentCancelCta })] }), _jsxs(Text, { fontSize: "$2", color: "$soft", children: [freeCopy.termsText, " ", _jsx(Anchor, { href: site("/legal/terms"), children: "Terms" }), " · ", _jsx(Anchor, { href: site("/legal/privacy"), children: "Privacy" })] })] }) }));
 }
-function Work({ persona, room, model, messages, }) {
-    const done = useMemo(() => {
-        // A result arrives as its own turn, keyed back to the call that asked for
-        // it — so the pairing is a lookup and not an assumption about order.
-        const back = new Map();
-        for (const m of messages) {
-            if (m.role === "tool" && m.tool_call_id) {
-                back.set(m.tool_call_id, typeof m.content === "string" ? m.content : "");
-            }
-        }
-        return messages
-            .flatMap((m) => m.tool_calls ?? [])
-            .map((call) => ({
-            id: call.id,
-            name: call.function.name,
-            asked: call.function.arguments,
-            got: back.get(call.id) ?? null,
-        }));
-    }, [messages]);
-    /**
-     * WHAT THE CONVERSATION MADE.
-     *
-     * A fenced block in an answer is a thing rather than a sentence — a file, a
-     * command, a page — and read inline it scrolls away with the talk. Here it
-     * keeps a label and a copy control, which is what somebody came to a code
-     * block to do.
-     *
-     * Read from the turns rather than tracked as it arrives: the transcript is
-     * already the record, and a second list of what was made would be a second
-     * thing to keep in step with it.
-     */
-    const made = useMemo(() => {
-        const out = [];
-        for (const m of messages) {
-            if (m.role !== "assistant")
-                continue;
-            const text = typeof m.content === "string" ? m.content : "";
-            for (const block of text.matchAll(/```([\w.+-]*)\n([\s\S]*?)```/g)) {
-                const code = block[2].replace(/\s+$/, "");
-                if (code)
-                    out.push({ id: `${m.id}-${out.length}`, language: block[1] || "text", code });
-            }
-        }
-        return out;
-    }, [messages]);
-    return (_jsxs(YStack, { p: "$3", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Answering" }), room.length ? (room.map((name) => (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Face, { name: name, size: 22 }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name })] }, name)))) : (_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: model })), room.length === 1 && persona ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 3, children: persona.description || model })) : null] }), made.length > 0 ? (_jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Artifacts" }), made.map((one) => (_jsx(Code, { language: one.language, value: one.code, children: one.code }, one.id)))] })) : null, _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Work" }), done.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Nothing was looked up for this conversation yet." })) : (done.map((call) => (_jsxs(YStack, { gap: "$1", p: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: call.name }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 2, children: call.asked }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 6, children: call.got ?? "Running…" })] }, call.id))))] })] }));
-}