@hanzo/rooms 0.1.32 → 0.1.34

package/dist/Account.d.ts

@@ -1,5 +1,5 @@
 /** The block at the foot of the sidebar: press it for the menu. */
-export declare function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, }?: {
+export declare function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, onKeys, }?: {
     onToggleCollapse?: () => void;
     /** Opens the profile beside the room. Absent, the row goes to hanzo.id. */
     onProfile?: () => void;
@@ -7,4 +7,6 @@ export declare function Account({ onToggleCollapse, onProfile, onAppearance, onU
     onAppearance?: () => void;
     /** Opens the plan's usage settings. Absent, the row is not drawn. */
     onUsage?: () => void;
+    /** Opens the API keys settings. Absent, the row is not drawn. */
+    onKeys?: () => void;
 }): import("react").JSX.Element;

package/dist/Account.js

@@ -3,13 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * WHO YOU ARE, at the foot of the sidebar: the person, and the person's menu.
  *
- * Profile, appearance, usage, security and sign out — the account, and nothing that
- * belongs to the workspace. Which workspace you stand in is the switcher at the
- * TOP of the sidebar, and what it may spend is its Billing, so this card shows
- * neither: a balance here read as the person's money when it is the workspace's.
+ * Profile, appearance, usage, API keys, security and sign out — the account, and
+ * nothing that belongs to the workspace. Which workspace you stand in is the
+ * switcher at the TOP of the sidebar, and what it may spend is its Billing, so
+ * this card shows neither: a balance here read as the person's money when it is
+ * the workspace's.
  */
 import { useEffect, useRef, useState } from 'react';
-import { Activity, ChevronsUpDown, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
+import { Activity, ChevronsUpDown, KeyRound, LogOut, PanelLeftClose, Palette, Shield, UserRound } from 'lucide-react';
 import { XStack, YStack, Text, Box } from '@hanzo/ui';
 import { sheet } from '@hanzo/ui/glass';
 import { useIam } from '@hanzo/iam/react';
@@ -22,7 +23,7 @@ function Row({ icon, onPress, children, }) {
     return (_jsx(Box, { render: "button", onClick: onPress, width: "100%", px: "$3", py: "$2", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", children: [icon, _jsx(Text, { fontSize: "$2", color: "$ink", children: children })] }) }));
 }
 /** The block at the foot of the sidebar: press it for the menu. */
-export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, } = {}) {
+export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, onKeys, } = {}) {
     const { user } = useIam();
     const logout = useSignOut();
     const { user: account } = useAccount();
@@ -54,5 +55,5 @@ export function Account({ onToggleCollapse, onProfile, onAppearance, onUsage, }
     // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
     , { 
         // @ts-expect-error — ref is forwarded to the DOM node by the primitive.
-        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, onUsage ? (_jsx(Row, { icon: _jsx(Activity, { size: 15, "aria-hidden": true }), onPress: act(onUsage), children: "Usage" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
+        ref: holder, position: "relative", borderTopWidth: 1, borderColor: "$borderColor", children: [open ? (_jsxs(YStack, { role: "menu", "aria-label": "Account", position: "absolute", b: "calc(100% + 6px)", l: "$2", r: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", ...sheet(2), py: "$2", gap: "$1", z: "var(--z-modal)", children: [_jsx(Row, { icon: _jsx(UserRound, { size: 15, "aria-hidden": true }), onPress: act(() => (onProfile ? onProfile() : window.location.assign(link(`${iam()}/account`)))), children: "Profile" }), onAppearance ? (_jsx(Row, { icon: _jsx(Palette, { size: 15, "aria-hidden": true }), onPress: act(onAppearance), children: "Appearance" })) : null, onUsage ? (_jsx(Row, { icon: _jsx(Activity, { size: 15, "aria-hidden": true }), onPress: act(onUsage), children: "Usage" })) : null, onKeys ? (_jsx(Row, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), onPress: act(onKeys), children: "API keys" })) : null, _jsx(Row, { icon: _jsx(Shield, { size: 15, "aria-hidden": true }), onPress: act(() => window.location.assign(link(`${iam()}/account/security`))), children: "Security" }), _jsx(Box, { height: 1, bg: "$borderColor", my: "$1" }), _jsx(Row, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), onPress: act(() => void logout()), children: "Sign out" })] })) : null, _jsxs(XStack, { items: "center", width: "100%", children: [_jsx(Box, { render: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, "aria-haspopup": "menu", "aria-label": "Account", flex: 1, minW: 0, px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Face, { src: face, name: called, size: 22 }), _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: "600", color: "$color", numberOfLines: 1, children: called }), email && email !== called ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true })] }) }), onToggleCollapse ? (_jsx(Box, { render: "button", onClick: onToggleCollapse, "aria-label": "Collapse sidebar", p: "$2", mr: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })) : null] })] }));
 }

package/dist/Chat.js

@@ -34,8 +34,8 @@ 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 { carriedIn, compose, partsOf, said as told, weigh } from "./lib/attach.js";
-import { dropped, pct, readable, refOf, retrieve } from "./lib/files.js";
-import { channel, drop, hold, landed, spend, take, usePane, useWorkFile } from "./pane.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 { Crew, HOUSE, useCrew } from "./crew.js";
@@ -52,12 +52,13 @@ 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, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { ArrowUp, AudioLines, FileText, 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";
 import { pane } from "./ground.js";
-import { RightPane, usePinned } from "./RightPane.js";
+import { RightPane, addressOf, look, usePinned } from "./RightPane.js";
+import { useMedia } from "@hanzo/gui";
 import { Take } from "./copy.js";
 import { Share } from "./Share.js";
 import { useStarred } from "./stars.js";
@@ -351,27 +352,113 @@ const STAGE = {
     graph: "linking",
     embed: "vectors",
 };
-/** One chip: the file's glyph, its name, and how far it has got. */
-function Chip({ name, type, state, sent, file, onRemove, }) {
+/** How a file is drawn: a picture, a PDF's tile, or a chip. Read off its type, else its name, since a store may answer with neither. */
+function kindOf(name, type) {
+    if (type.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg)$/i.test(name))
+        return "image";
+    if (type === "application/pdf" || /\.pdf$/i.test(name))
+        return "pdf";
+    return "file";
+}
+// SIGNED ADDRESSES FOR PICTURES, by workspace file: a list of turns mounts and
+// remounts its chips, and asking the store each time would be a request per
+// picture per redraw. Kept for less than a signature lives (the store's are
+// five minutes), so a chip mounted later reads a fresh one; a picture already
+// drawn keeps its pixels whatever becomes of its address.
+const signed = new Map();
+const SIGNED_FOR = 4 * 60_000;
+function signedOf(api, id, file) {
+    const kept = signed.get(id);
+    if (kept && Date.now() - kept.at < SIGNED_FOR)
+        return kept.got;
+    const got = (file?.bucket && file.key ? Promise.resolve(file) : fileOf(api, id)).then((f) => download(api, f.bucket, f.key));
+    signed.set(id, { at: Date.now(), got });
+    got.catch(() => signed.delete(id));
+    return got;
+}
+/**
+ * Where a picture's thumbnail reads from: the bytes on this machine where this
+ * document holds them (the held file's object URL, which outlives its send),
+ * else a signed address for the workspace's copy — a file taken from Drive, or
+ * a turn read back after a reload. '' until there is one.
+ */
+function usePicture(on, href, id, file) {
+    const api = useAi();
+    const near = on ? href || (id ? localOf(id) : "") : "";
+    const [far, setFar] = useState("");
+    const bucket = file?.bucket;
+    useEffect(() => {
+        if (!on || near || !id)
+            return;
+        let live = true;
+        signedOf(api, id, file).then((url) => live && setFar(url), () => { });
+        return () => {
+            live = false;
+        };
+        // The file's record moves with every stage of its ingest; its address does not.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [on, near, id, bucket, api]);
+    return near || far;
+}
+/** Edge of a picture's or a PDF's thumbnail, in px. */
+const THUMB = 48;
+/**
+ * One file put into a message.
+ *
+ * A PICTURE SHOWS ITSELF and a PDF shows a tile, each with its name and size
+ * beside it; any other kind is a chip of its name. Nothing is filled behind
+ * them: a hairline on whatever they sit on, so a file reads alike over the
+ * composer and inside a turn's bubble, in a light room and a dark one. A second
+ * fill on the bubble's was the darker grey that read as a stain. The word for
+ * how far a file has got shows only while it is getting there — a picture of
+ * the file already says it is attached — and `data-state` keeps the index's own
+ * word for whoever reads it.
+ *
+ * Pressing one opens it beside the conversation (`onOpen`).
+ */
+function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove, }) {
+    const kind = kindOf(name, type);
     const bad = state === "failed";
     const why = state === "failed" || state === "stored" ? file?.error : file?.note;
-    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 picture the browser cannot draw (HEIC, a lapsed signature) falls back to its glyph.
+    const [broken, setBroken] = useState("");
+    const word = state === "ready" ? (file?.clipped ? "in part" : "") : progress(state, sent, file);
+    const meta = [kind === "pdf" ? "PDF" : "", size > 0 ? weigh(size) : "", word].filter(Boolean).join(" \u00b7 ");
+    const remove = onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", shrink: 0, hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null;
+    const marks = {
+        role: "listitem",
+        "data-slot": "file-chip",
+        "data-state": state,
+        "data-kind": kind,
+        "data-stage": file?.stage ?? "",
+        ...(why ? { title: why } : null),
+    };
+    if (kind === "file")
+        return (_jsxs(XStack, { ...marks, self: "center", items: "center", gap: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", maxW: 320, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$1.5", pl: "$2.5", py: "$1", minW: 0, cursor: "pointer", children: [_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: meta })) : null] }), remove] }));
+    const drawn = kind === "image" && picture && broken !== picture;
+    const Glyph = kind === "pdf" ? FileText : ImageMark;
+    return (_jsxs(XStack, { ...marks, items: "center", gap: "$1", p: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", maxW: 280, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$2", minW: 0, cursor: "pointer", children: [_jsx(YStack, { "data-slot": "file-thumb", width: THUMB, height: THUMB, shrink: 0, rounded: "$3", overflow: "hidden", items: "center", justify: "center", gap: "$0.5", borderWidth: drawn ? 0 : 1, borderColor: "$borderColor", children: drawn ? (_jsx(View, { render: _jsx("img", { src: picture, alt: "", loading: "lazy", decoding: "async", onError: () => setBroken(picture) }), width: "100%", height: "100%", objectFit: "cover", display: "block" })) : (_jsxs(_Fragment, { children: [_jsx(Glyph, { size: 18, "aria-hidden": true, color: "var(--muted-foreground)" }), kind === "pdf" ? (_jsx(Text, { fontSize: 9, fontWeight: "600", letterSpacing: 0.5, color: "$soft", children: "PDF" })) : null] })) }), _jsxs(YStack, { minW: 0, gap: "$0.5", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, text: "left", children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, text: "left", children: meta })) : null] })] }), remove] }));
 }
 /** A file held for the next message: uploading, then indexing, then ready. */
-function HeldChip({ one, onRemove }) {
+function HeldChip({ one, onOpen, 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 });
+    const picture = usePicture(kindOf(one.name, one.type) === "image", one.href, file?.id, file);
+    // The mark the column's Sources row opens for the same file, so both open it alike.
+    const mark = { id: one.id, name: one.name, kind: kindOf(one.name, one.type) === "image" ? "image" : "file", href: one.href || undefined, file: file?.id, mime: one.type };
+    return (_jsx(Chip, { name: one.name, type: one.type, size: one.size, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), picture: picture, onOpen: () => onOpen(mark), onRemove: onRemove }));
 }
 /** A file a sent turn carried, as the index says of it now. */
-function TurnChip({ f }) {
+function TurnChip({ f, onOpen }) {
     const live = useWorkFile(f.id);
-    return _jsx(Chip, { name: f.name, type: f.type, state: live?.status ?? "ready", sent: 1, file: live });
+    const picture = usePicture(kindOf(f.name, f.type) === "image", "", f.id, live);
+    const mark = { id: f.id, name: f.name, kind: kindOf(f.name, f.type) === "image" ? "image" : "file", file: f.id, mime: f.type };
+    return _jsx(Chip, { name: f.name, type: f.type, size: f.size, state: live?.status ?? "ready", sent: 1, file: live, picture: picture, onOpen: () => onOpen(mark) });
 }
 /** 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] }));
+function Carried({ text, attached, reused, onOpen }) {
+    return (_jsxs(YStack, { gap: "$2", "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, onOpen: onOpen }, 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.
@@ -420,6 +507,29 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // 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`).
+    const wide = useMedia().lg;
+    /**
+     * 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.
+     */
+    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]);
     /**
      * WHO YOU ARE TALKING TO, when it is somebody rather than the plain model.
      *
@@ -1132,7 +1242,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     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 });
+                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused, onOpen: openFile });
                     }
                     // WHILE THE ANSWER HAS NO WORDS YET: who is answering (the agents the
                     // question addresses, or the whole room when it names nobody), and the
@@ -1238,7 +1348,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     },
                     // 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, 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
+                    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
                                     ? worded(talk.refusal)
                                     : talk.reply
                                         ? `Hanzo: ${talk.reply}`

package/dist/Me.js

@@ -8,8 +8,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // switches with `pick()` (lib/auth/session.ts), the one switch the app has.
 // Under the list: Create organization, Organization settings, and Hanzo Team —
 // opened in the same organization for a team, offered as "Create a team" for a
-// personal one. Then the balance with Add funds, Settings, Usage, the plans,
-// help and Log out. A SuperAdmin also gets All organizations (support mode).
+// personal one. Then the balance with Add funds, Settings, Usage, API keys, the
+// plans, help and Log out. A SuperAdmin also gets All organizations (support mode).
 //
 // IAM is the source of every fact here: names and roles from the token's `orgs`
 // claim, display names and which org is personal from `GET /v1/iam/organizations`,
@@ -18,7 +18,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Orgs.tsx); the next load mints a token that carries it.
 import { useEffect, useRef, useState } from 'react';
 import { Popover, SizableText, View, XStack, YStack } from '@hanzo/gui';
-import { Building2, ChevronsUpDown, ExternalLink, Gauge, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
+import { Building2, ChevronsUpDown, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
 import { path, useWho } from '@hanzo/build';
 import { useOrganizations } from '@hanzo/iam/react';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
@@ -39,6 +39,8 @@ import { BAD } from './lib/mix.js';
 const DOCS = 'https://docs.hanzo.ai/docs/dev';
 /** Where an organization's own settings live. */
 const ORG_SETTINGS = '/settings/organization';
+/** The organization's API keys: many per person, each created and revoked on its own. */
+const KEYS = `${ORG_SETTINGS}/keys`;
 /** An organization this tab created, until the token carries it. */
 const MADE = 'hanzo:org:made';
 /** A role as a person reads it: `owner` → Owner. */
@@ -166,7 +168,7 @@ export function Me({ host, narrow = false, onOrg, }) {
                                                 menu.onOpenChange(false);
                                                 if (o.name !== current)
                                                     onOrg(o.name);
-                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "Add funds", sub: typeof tier?.balance?.effectiveAvailable === 'number' ? `Credits ${formatCents(tier.balance.effectiveAvailable)}` : 'Credits', onPress: () => (menu.onOpenChange(false), window.open(payPage(), '_blank', 'noopener')), trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
+                                            } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(ORG_SETTINGS)) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "Add funds", sub: typeof tier?.balance?.effectiveAvailable === 'number' ? `Credits ${formatCents(tier.balance.effectiveAvailable)}` : 'Credits', onPress: () => (menu.onOpenChange(false), window.open(payPage(), '_blank', 'noopener')), trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,

package/dist/RightPane.d.ts

@@ -1,4 +1,23 @@
 import { type ChatMessage } from '@hanzo/ai/react';
+import { type Api } from './lib/files.js';
+/**
+ * One thing the conversation carries.
+ *
+ * `href` is where it can be opened and `body` is the text of something that was
+ * never a file — a fenced block exists only in the transcript until somebody
+ * asks to look at it, at which point `body` becomes a blob and gets an address.
+ */
+export interface Mark {
+    id: string;
+    name: string;
+    kind: 'image' | 'code' | 'file';
+    href?: string;
+    body?: string;
+    /** The type a blob should carry, so a browser renders it rather than downloads it. */
+    mime?: string;
+    /** A workspace file's id: it opens through a signed address minted when it is looked at. */
+    file?: string;
+}
 /**
  * The column. `said` is the conversation it stands beside; without one it draws
  * the same shape with nothing in it, which is what a room nobody has spoken in
@@ -8,6 +27,22 @@ export declare function RightPane({ said, onClose, }: {
     said?: ChatMessage[];
     onClose?: () => void;
 }): import("react").JSX.Element;
+/**
+ * Opens a mark in this conversation's browser.
+ *
+ * A BLOCK BECOMES A FILE THE MOMENT SOMEBODY LOOKS AT IT. It has no address
+ * until then — it is text inside a turn — so one is minted here from its own
+ * bytes, carrying the type its fence declared. That is what makes an answer's
+ * `index.html` something you can actually see rather than something you can
+ * only read the source of.
+ */
+export declare function look(at: string, m: Mark, api: Api): Promise<void>;
+/**
+ * Where a mark can be opened: its own address, a signed one minted for its
+ * workspace file, or one minted from its text. Null when there is none — a file
+ * forgotten or a store unreachable opens nothing, and the row stays.
+ */
+export declare function addressOf(m: Mark, api: Api): Promise<string | null>;
 /** Shows or hides the summary above this conversation's browser. Exported for
  *  the conversation header, which is where the control belongs. */
 export declare function usePinned(): [boolean, () => void];

package/dist/RightPane.js

@@ -210,21 +210,27 @@ function Marks({ at, kind, title, icon, marks, children, }) {
  * `index.html` something you can actually see rather than something you can
  * only read the source of.
  */
-async function look(at, m, api) {
+export async function look(at, m, api) {
+    const href = await addressOf(m, api);
+    if (href)
+        openTab(at, href, m.name);
+}
+/**
+ * Where a mark can be opened: its own address, a signed one minted for its
+ * workspace file, or one minted from its text. Null when there is none — a file
+ * forgotten or a store unreachable opens nothing, and the row stays.
+ */
+export async function addressOf(m, api) {
     if (!m.href && m.file) {
         try {
             const f = await fileOf(api, m.file);
-            openTab(at, await download(api, f.bucket, f.key), m.name);
+            return await download(api, f.bucket, f.key);
         }
         catch {
-            // A file forgotten or a store unreachable opens nothing; the row stays.
+            return null;
         }
-        return;
     }
-    const href = m.href ?? (m.body === undefined ? null : URL.createObjectURL(new Blob([m.body], { type: m.mime })));
-    if (!href)
-        return;
-    openTab(at, href, m.name);
+    return m.href ?? (m.body === undefined ? null : URL.createObjectURL(new Blob([m.body], { type: m.mime })));
 }
 /**
  * A menu row's words.

package/dist/Shell.js

@@ -1223,7 +1223,7 @@ function Frame({ mode, children, navigate, back, forward, }) {
                                 placeholder: "Filter", "aria-label": "Filter sidebar" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }) }), settingsPane ? (_jsx(SidebarScroll, { children: _jsx(SettingsList, { active: settingsPane, filter: filter, onPick: pick, onBack: () => showSettings(null) }) })) : (_jsx(_Fragment, { children: _jsx(SidebarScroll, { children: _jsxs(_Fragment, { children: [settled ? (_jsx(Index, { mode: mode, owner: owner, filter: filter, onPick: onPick, navigate: navigate })) : null, products.length ? (_jsx(SidebarFolder, { name: "Cloud & Platform", open: filter ? true : undefined, children: products.map((prod) => (_jsx(SidebarItem, { icon: _jsx(prod.icon, { size: 13, "aria-hidden": true }), onPress: () => window.open(prod.href, "_blank", "noopener"), children: prod.label }, prod.id))) })) : null, more.length ? (_jsx(SidebarFolder, { name: "More", open: filter ? true : undefined, children: more.map((tool) => (_jsx(SidebarItem, { icon: _jsx(tool.icon, { size: 13, "aria-hidden": true }), onPress: tool.go, children: tool.label }, tool.id))) })) : null] }) }) })), settled && onApex ? _jsx(Leave, { href: signedIn ? ENTRY : WORKSPACE, children: "Workspace" }) : null, settled ? (signedIn ? (_jsxs(_Fragment, { children: [superAdmin() ? (_jsx(SidebarItem, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), onPress: () => setSupporting(true), children: "All organizations" })) : null, _jsx(SidebarItem, { icon: _jsx(UserPlus, { size: 15, "aria-hidden": true }), onPress: () => window.open(invite(), "_blank", "noopener"), children: "Invite Teammates" }), _jsx(SidebarItem, { icon: _jsx(Share2, { size: 15, "aria-hidden": true }), onPress: () => {
                             navigate?.(site("/referral"));
                             dismiss();
-                        }, children: "Share Hanzo" }), _jsx(SidebarItem, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), onPress: () => window.open(BILLING, "_blank", "noopener"), children: "Upgrade" }), _jsx(Account, { onToggleCollapse: toggle, onProfile: () => setProfiling(true), onAppearance: () => showSettings("general"), onUsage: () => showSettings("usage") })] })) : null) : null] }));
+                        }, children: "Share Hanzo" }), _jsx(SidebarItem, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), onPress: () => window.open(BILLING, "_blank", "noopener"), children: "Upgrade" }), _jsx(Account, { onToggleCollapse: toggle, onProfile: () => setProfiling(true), onAppearance: () => showSettings("general"), onUsage: () => showSettings("usage"), onKeys: () => showSettings("keys") })] })) : null) : null] }));
     return (_jsxs(YStack, { "data-slot": "workspace", "data-hydrated": settled ? "true" : undefined, "data-sidebar": asked ? "open" : "shut", display: "grid", gridTemplateColumns: `${asked ? 0 : 64}px auto minmax(0, 1fr) auto`, gridTemplateRows: "44px minmax(0, 1fr)", gridTemplateAreas: '"rail bar bar bar" "rail list pane side"', "$max-md": {
             gridTemplateColumns: "minmax(0, 1fr)",
             gridTemplateRows: `44px minmax(0, 1fr) ${TABS_HEIGHT}`,

package/dist/pane.d.ts

@@ -103,6 +103,8 @@ export declare function shutTab(key: string, id: string): void;
 export declare function pin(key: string, on: boolean): void;
 /** The workspace file `id` as the index last said, or undefined until it has. */
 export declare function useWorkFile(id: string | undefined): WorkFile | undefined;
+/** The object URL over workspace file `id`'s bytes on this machine, or '' where this document never held them. */
+export declare const localOf: (id: string) => string;
 /**
  * Takes files into this conversation: each goes straight to the org's
  * workspace — in parts when it is large, several at once — is registered with

package/dist/pane.js

@@ -229,6 +229,13 @@ export function useWorkFile(id) {
         };
     }, () => (id ? files.get(id) : undefined), () => undefined);
 }
+// THE BYTES ON THIS MACHINE, by the workspace file they became. `spend` leaves a
+// held file's object URL standing, so a turn that carried a picture draws it
+// from here with no request, for as long as this document lives. A reload ends
+// it, and the turn reads the workspace's copy instead.
+const local = new Map();
+/** The object URL over workspace file `id`'s bytes on this machine, or '' where this document never held them. */
+export const localOf = (id) => local.get(id) ?? '';
 // Each held file's upload, by held id: what stops it, and what it settles to.
 const carrying = new Map();
 /** How many files go up at once; each large one also sends several parts at once. */
@@ -294,6 +301,7 @@ export async function hold(key, list, via) {
             const objectKey = chatKey(file);
             await upload(via.api, bucket, objectKey, file, (sent) => patch(key, h.id, { sent }), stop.signal);
             const got = await register(via.api, bucket, objectKey);
+            local.set(got.id, h.href);
             patch(key, h.id, fromFile(got));
             watch(via.api, got, key, h.id);
             land(got);
@@ -363,8 +371,11 @@ export function drop(key, id) {
             return was;
         carrying.get(id)?.stop.abort();
         carrying.delete(id);
-        if (going.href)
+        if (going.href) {
+            if (going.file)
+                local.delete(going.file.id);
             URL.revokeObjectURL(going.href);
+        }
         return { ...was, held: was.held.filter((h) => h.id !== id) };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "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",