@hanzo/rooms 0.1.68 → 0.1.70

package/dist/App.js

@@ -1,7 +1,9 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The web app as the whole window, in two modes: Chat, a conversation with the
-// product's AI, and Dev, @hanzo/build's `<Builder>` without a rail of its own.
+// The web app as the whole window, in three modes: Chat, a conversation with
+// the product's AI; Dev, @hanzo/build's `<Builder>` without a rail of its own;
+// and Studio, @hanzo/studio's `<Studio>` the same way, its places (`nav`) in the
+// sidebar where Dev's stand for Dev.
 //
 //   OUTER  the rail (Rail.tsx) and the sidebar beside it (Column.tsx), on the
 //          window's floor, with the window's bar above them where the host has
@@ -14,11 +16,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // search, New, Dev's places and the reader's Recents. The address says the
 // mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are Chat on
 // a new conversation, `/chat/<id>` one of the reader's, and a path under `/dev`
-// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project. Moving
+// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project; a path
+// under `/studio` is Studio, its own address after it (`c/<id>`, `library`). Moving
 // between the modes is a history entry (`go`), never a load, so a host serves
 // this one component for every path under each.
 //
-// Every host draws this: hanzo.ai at `/`, `/chat` and `/dev`, and the desktop
+// Every host draws this: hanzo.ai at `/`, `/chat`, `/dev` and `/studio`, and the desktop
 // app as its main window. The host mounts IamProvider and `<Rooms>` with its
 // router and the path, and draws this only for a signed-in reader; what a
 // stranger sees is the host's.
@@ -46,13 +49,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
 // included.
 //
+// STUDIO LOADS WITH ITS MODE. Its module (and three.js behind a 3D tab) is
+// fetched the first time the reader stands in Studio; its places are a few
+// lines and come with the app. Another organization opens it at its New, so
+// nothing it read under the last one stays.
+//
 // THE PLANS' OWN ADDRESS LEAVES for the pay site in its place (dev.tsx `leave`),
 // so the builder's own plans are never drawn.
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ArrowLeft, ArrowRight, Menu } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { Builder, HostProvider, path as written, route } from '@hanzo/build';
+import { nav as places } from '@hanzo/studio';
 import { SidebarIconButton } from '@hanzo/ui/chat';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
@@ -66,8 +75,10 @@ import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { floor, pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, go, place, talk } from './lib/host.js';
+import { app, go, place, studio, talk } from './lib/host.js';
 import { wordmark } from './where.js';
+/** Studio, fetched the first time the reader stands in it. */
+const Studio = lazy(() => import('@hanzo/studio').then((m) => ({ default: m.Studio })));
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
 /** The bar's height, px: the reference window's title bar. */
@@ -85,7 +96,7 @@ const INSET = {
     left: 'max(var(--pane-gap), var(--safe-left))',
 };
 /** Where each mode was last, so the rail goes back to it. */
-const last = { chat: '', dev: '' };
+const last = { chat: '', dev: '', studio: '' };
 /** Whether a key press is the reader typing, where the app's keys are the field's. */
 const typing = (e) => {
     const el = e.target;
@@ -119,6 +130,22 @@ function Window({ bar }) {
     const at = place(here) ?? HOME;
     const mode = at.mode;
     const where = at.mode === 'dev' ? at.at : null;
+    // Studio's host: Dev's, at Studio's address, its moves under /studio, and
+    // another organization opening Studio's New in it.
+    const made = at.mode === 'studio' ? at.at : '';
+    const maker = useMemo(() => ({
+        ...host,
+        name: 'Hanzo Studio',
+        path: made,
+        go: (to, how) => {
+            shut();
+            go(studio(to), how?.replace);
+        },
+        chooseOrg: (next) => {
+            pick(next);
+            window.location.assign(studio(''));
+        },
+    }), [host, made, shut]);
     // A run floats two panes of its own, so the pane it stands in is not cut.
     const run = where !== null && route(where).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
@@ -202,11 +229,13 @@ function Window({ bar }) {
     }, [bar, router, move]);
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
+    const toStudio = () => move(last.studio || studio(''));
     // Another organization: picked, and the app opened in it at the mode's New.
     const org = (o) => {
         pick(o);
-        window.location.assign(mode === 'dev' ? app('') : talk());
+        window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : talk());
     };
+    const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : undefined;
     const flip = () => setClosed(!closed);
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }) })] })) : null] }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null] }) }) }));
 }

package/dist/Chat.js

@@ -54,13 +54,15 @@ 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 } from "@hanzo/voice";
-import { FileText, Image as ImageMark, Paperclip, X } from "lucide-react";
+import { Check, Clock, FileText, Image as ImageMark, Library as LibraryMark, Paperclip, X } from "lucide-react";
 import { FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
 import { SEED, look, useSections, useSites } from "./RightPane.js";
 import { Share } from "./Share.js";
 import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
+import { Schedule } from "./Schedule.js";
+import { keepFile, useAttach, useKeep } from "./keep.js";
 import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, Summary, useDeck, useKey, useMind, usePanel, frames, name as tabName, } from "@hanzo/build";
 import { checkoutUrl } from './lib/pay.js';
 import { Upgrade, useFree } from './Upgrade.js';
@@ -415,7 +417,7 @@ const THUMB = 48;
  *
  * Pressing one opens it beside the conversation (`onOpen`).
  */
-function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove, }) {
+function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove, onSave, }) {
     const kind = kindOf(name, type);
     const bad = state === "failed";
     const why = state === "failed" || state === "stored" ? file?.error : file?.note;
@@ -423,7 +425,7 @@ function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove,
     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 remove = (_jsxs(_Fragment, { children: [onSave ? _jsx(Keep, { name: name, onSave: onSave }) : null, 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",
@@ -438,26 +440,57 @@ function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove,
     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] }));
 }
+/**
+ * "Save to Library" on a file the reader put into the conversation: pressed, it
+ * keeps the file in their Library and says so; a refusal is its title.
+ */
+function Keep({ name, onSave }) {
+    const [state, setState] = useState("");
+    const [wrong, setWrong] = useState("");
+    const label = state === "saved" ? `${name} is in your Library` : wrong || `Save ${name} to Library`;
+    return (_jsx(Box, { render: "button", "aria-label": label, ...{ title: label }, "data-slot": "keep", "data-state": state || (wrong ? "failed" : ""), "aria-disabled": state !== "", onClick: () => {
+            if (state)
+                return;
+            setState("saving");
+            setWrong("");
+            onSave().then(() => setState("saved"), (e) => {
+                setState("");
+                setWrong(e?.message || `${name} was not saved.`);
+            });
+        }, p: "$1", rounded: "$10", shrink: 0, opacity: state === "saving" ? 0.5 : 1, hoverStyle: { bg: "$hover" }, children: state === "saved" ? _jsx(Check, { size: 12, "aria-hidden": true }) : _jsx(LibraryMark, { size: 12, "aria-hidden": true, color: wrong ? BAD : undefined }) }));
+}
 /** A file held for the next message: uploading, then indexing, then ready. */
-function HeldChip({ one, onOpen, onRemove }) {
+function HeldChip({ one, onOpen, onRemove, onSave }) {
     const live = useWorkFile(one.file?.id);
     const file = live ?? one.file;
     const state = one.state === "uploading" ? one.state : (file?.status ?? one.state);
     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 }));
+    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, 
+        // Its bytes are on this machine until the upload lands, and are kept by the workspace file it became.
+        onSave: onSave && one.href ? () => onSave(one.href, file?.id ?? one.id) : undefined }));
 }
 /** A file a sent turn carried, as the index says of it now. */
-function TurnChip({ f, onOpen }) {
+function TurnChip({ f, onOpen, onSave }) {
+    const api = useAi();
     const live = useWorkFile(f.id);
     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) });
+    // The bytes on this machine where this document still holds them, else the workspace's copy.
+    const save = onSave ? async () => onSave(localOf(f.id) || (await signedOf(api, f.id, live)), f.id) : undefined;
+    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), onSave: save });
 }
 /** A question that carried files: its words, the files put into it, and those read again. */
-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] }));
+function Carried({ text, attached, reused, onOpen, onSave, }) {
+    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, onSave: onSave ? (url, id) => onSave(url, id, f) : undefined }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
+}
+/**
+ * "Schedule this" under a question: the quiet control that opens the dialog
+ * which makes the question run itself (Schedule.tsx).
+ */
+function Plan({ onPress }) {
+    return (_jsx(XStack, { justify: "flex-end", "data-slot": "plan", children: _jsxs(XStack, { render: "button", "aria-label": "Schedule this", onPress: onPress, items: "center", gap: "$1", px: "$1", height: 22, rounded: "$2", cursor: "pointer", opacity: 0.55, hoverStyle: { opacity: 1, bg: "$hover" }, focusStyle: { opacity: 1 }, children: [_jsx(Clock, { size: 12, "aria-hidden": true }), _jsx(Text, { fontSize: "$1", color: "$ink", children: "Schedule this" })] }) }));
 }
 /**
  * The conversation. One component for a visitor and for an account.
@@ -827,6 +860,12 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // read from it for the question.
     const { held: files, refused: turnedAway } = usePane(at);
     const via = useMemo(() => ({ api: ai, org: anonymous ? null : org() }), [ai, anonymous]);
+    // "Use in Chat" from the Library: `?attach=<item>` holds it for the next message.
+    useAttach(at, via);
+    // "Schedule this": the prompt the dialog opens on, or null while it is shut.
+    const [plan, setPlan] = useState(null);
+    // A file the reader keeps from this conversation goes to their Library under it.
+    const keepOne = useCallback((url, id, name, type) => keepFile(ai, { id, name, type, url, thread: kept ?? open }), [ai, kept, open]);
     // 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);
@@ -885,6 +924,16 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     streaming.current = chat.streaming;
     const turns = useRef(chat.messages);
     turns.current = chat.messages;
+    // The conversation's last question as its person wrote it: what the header's
+    // Schedule… opens on.
+    const lastAsked = () => {
+        const q = [...turns.current].reverse().find((m) => m.role === "user");
+        if (!q)
+            return "";
+        if (typeof q.content === "string")
+            return told(q.content).text;
+        return Array.isArray(q.content) ? partsOf(q.content).flatMap((p) => (p.type === "text" ? [p.text] : [])).join("\n") : "";
+    };
     /**
      * WHAT EACH UNANSWERED QUESTION WAS TOLD, by the question's own turn id: the
      * refusal it met, or that its answer came back empty, or that it streamed
@@ -1020,6 +1069,10 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
         const a = lead(artifacts(text));
         return a ? () => see(a) : undefined;
     };
+    // WHAT AN ANSWER MAKES IS KEPT IN THE LIBRARY as it finishes (keep.ts): the
+    // answer that just stopped, once the conversation it belongs to has an id.
+    const [finished, setFinished] = useState(null);
+    useKeep(ai, !anonymous, kept ?? open, finished, artifacts);
     // 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.
@@ -1027,9 +1080,14 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     useEffect(() => {
         const was = writing.current;
         writing.current = chat.streaming;
-        if (!was || chat.streaming || !panel)
+        if (!was || chat.streaming)
             return;
-        const answer = [...turns.current].reverse().find((m) => m.role === "assistant");
+        const done = [...turns.current].reverse().find((m) => m.role === "assistant");
+        if (done && typeof done.content === "string" && done.content)
+            setFinished({ id: String(done.id), text: done.content });
+        if (!panel)
+            return;
+        const answer = done;
         const made = typeof answer?.content === "string" ? artifacts(answer.content).filter(renders) : [];
         if (made.length)
             see(made[made.length - 1]);
@@ -1275,7 +1333,10 @@ 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, { "data-slot": "conversation-head", height: 52, items: "center", justify: "space-between", gap: "$3", pl: "$4", pr: "$2", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, flex: 1, children: [mine ? (_jsx(Text, { fontSize: 15, lineHeight: 20, color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: mine.title || "Untitled" })) : null, 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, { "data-slot": "conversation-controls", items: "center", gap: 2, shrink: 0, children: [open ? _jsx(Share, { thread: open }) : null, mine ? (_jsx(ConversationMenu, { threads: alone, active: open, children: _jsx(XStack, { children: _jsx(ThreadMore, { t: mine }) }) })) : null, _jsx(Summary, { sections: sections, onOpen: () => setPanel(true) }), _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: NONE, onHide: () => setPanel(false), label: "Tabs", ...browsing }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs", ...browsing }) : 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, 
+        }, children: [_jsx(Schedule, { open: plan !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setPlan(null);
+                }, prompt: plan ?? "", model: model, models: models.map((m) => ({ id: m.id, name: nameOf(m.id, listed) })) }), 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, { "data-slot": "conversation-head", height: 52, items: "center", justify: "space-between", gap: "$3", pl: "$4", pr: "$2", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, flex: 1, children: [mine ? (_jsx(Text, { fontSize: 15, lineHeight: 20, color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: mine.title || "Untitled" })) : null, 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, { "data-slot": "conversation-controls", items: "center", gap: 2, shrink: 0, children: [open ? _jsx(Share, { thread: open }) : null, mine ? (_jsx(ConversationMenu, { threads: alone, active: open, onSchedule: anonymous ? undefined : () => setPlan(lastAsked()), children: _jsx(XStack, { children: _jsx(ThreadMore, { t: mine }) }) })) : null, _jsx(Summary, { sections: sections, onOpen: () => setPanel(true) }), _jsx(PanelToggle, { open: panel, onToggle: () => setPanel(!panel) })] })] }), wide && aside !== null ? (_jsx(Beside, { children: _jsx(Panel, { side: deck, kinds: NONE, onHide: () => setPanel(false), label: "Tabs", ...browsing }) })) : null, !wide && panel ? _jsx(Panel, { side: deck, kinds: NONE, sheet: true, onHide: () => setPanel(false), label: "Tabs", ...browsing }) : 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
@@ -1294,15 +1355,18 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                         return question ? failure(question) : null;
                     }
                     // A QUESTION THAT CARRIED PICTURES draws them beside its words.
-                    if (turn.role === "user" && Array.isArray(turn.content))
-                        return _jsx(Parts, { parts: partsOf(turn.content), prose: (text) => _jsx(Prose, { text: text }) });
+                    if (turn.role === "user" && Array.isArray(turn.content)) {
+                        const parts = partsOf(turn.content);
+                        const asked = parts.flatMap((p) => (p.type === "text" ? [p.text] : [])).join("\n");
+                        return (_jsxs(YStack, { gap: "$1", children: [_jsx(Parts, { parts: parts, prose: (text) => _jsx(Prose, { text: text }) }), !anonymous && asked ? _jsx(Plan, { onPress: () => setPlan(asked) }) : null] }));
+                    }
                     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, onOpen: openFile });
+                            return (_jsxs(YStack, { gap: "$1", children: [_jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused, onOpen: openFile, onSave: anonymous ? undefined : (url, id, f) => keepOne(url, id, f.name, f.type) }), !anonymous && read.text ? _jsx(Plan, { onPress: () => setPlan(read.text) }) : null] }));
                     }
                     // 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
@@ -1329,7 +1393,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                             : [];
                         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 ? _jsx(Reply, { text: said, listen: listen(withWhom ?? undefined), onOpen: opener(said) }) : 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, turn.role === "user" && said && !anonymous ? _jsx(Plan, { onPress: () => setPlan(said) }) : 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
@@ -1370,7 +1434,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     },
                     // 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
+                    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), onSave: anonymous ? undefined : (url, id) => keepOne(url, id, one.name, one.type) }, 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/Column.d.ts

@@ -1,9 +1,10 @@
 import { type Host } from '@hanzo/build';
+import { type RailLink } from '@hanzo/ui/chat';
 import { type ReactNode } from 'react';
-import { type Mode } from './recent.js';
-export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, }: {
+import { type Place } from './lib/host.js';
+export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, places, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** The Chat conversation the pane holds, or null. */
     thread: string | null;
     /** Moves the app to an address of this page. */
@@ -16,4 +17,10 @@ export declare function Column({ host, mode, thread, go, onShut, seek, drawer, f
     drawer?: boolean;
     /** What stands at its foot: the drawer's rail, laid flat. */
     foot?: ReactNode;
+    /** The mode's places, where they are not Dev's (Studio's `nav`). */
+    places?: {
+        id: string;
+        label: string;
+        links: RailLink[];
+    }[];
 }): import("react").JSX.Element;

package/dist/Column.js

@@ -89,7 +89,7 @@ function Activity({ host }) {
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "Activity", ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
 }
-export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, }) {
+export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, places, }) {
     const [words, setWords] = useState('');
     // The search field shows once asked for, and while it holds words.
     const [seeking, setSeeking] = useState(false);
@@ -98,7 +98,7 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const groups = nav(host, dev);
+    const groups = places ?? nav(host, dev);
     const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
     // Chat's New; Dev's is the first of its places.
     const create = () => {
@@ -119,13 +119,13 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     }, [seek]);
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), mode === 'studio' ? null : (_jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) }))] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             done();
                                     }, onBlur: () => {
                                         if (!words)
                                             setSeeking(false);
-                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
                 // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Rail.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { type Host } from '@hanzo/build';
-import type { Mode } from './recent.js';
+import { type Place } from './lib/host.js';
 /** The rail's width, px. */
 export declare const RAIL = 48;
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
@@ -18,9 +18,9 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, go, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** Dev's builder address, or null in Chat. */
     at: string | null;
     /** The sidebar beside the rail is open. */
@@ -29,9 +29,10 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     toggle?: () => void;
     /** Laid along the foot of the phone's drawer rather than down the window's edge. */
     flat?: boolean;
-    /** To Chat and to Dev, each where the reader left it. */
+    /** To Chat, Dev and Studio, each where the reader left it. */
     onChat: () => void;
     onDev: () => void;
+    onStudio: () => void;
     /** Moves the app to an address of this page. */
     go: (address: string) => void;
     /** Work in another organization. */

package/dist/Rail.js

@@ -5,8 +5,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // menu of the rest, and the account at the foot. It is how the app moves
 // between its products; there is no switch anywhere else.
 //
-// Studio is its own page, hanzo.ai/studio, opened in this tab: the app draws it
-// there for a signed-in reader.
+// Studio is the app's third mode (@hanzo/studio at /studio), each of the three
+// opened where the reader left it.
 //
 // Library, Scheduled tasks and Customize are Dev's own places (@hanzo/build's
 // Artifacts, Automations and Customize), raised to the rail; each is lit while
@@ -27,8 +27,7 @@ import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { Me } from './Me.js';
-import { app, STUDIO, TABS, WORKSPACE } from './lib/host.js';
-import { site } from './where.js';
+import { app, TABS, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
@@ -72,7 +71,7 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, go, onOrg, }) {
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
     const here = mode === 'dev' ? raised(at) : null;
     const to = (p) => () => go(app(p));
     // Everything else the app reaches, behind More: on a phone the raised places first, then Dev's other places, then the products on hosts of their own.
@@ -95,5 +94,5 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
         { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", onPress: () => window.location.assign(site(STUDIO)), "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
 }

package/dist/Schedule.d.ts

@@ -0,0 +1,14 @@
+/** A model the dialog offers: its id and the name a reader knows it by. */
+export interface Choice {
+    id: string;
+    name: string;
+}
+export declare function Schedule({ open, onOpenChange, prompt, model, models, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The prompt it opens with. */
+    prompt: string;
+    /** The model it opens on: the conversation's. */
+    model: string;
+    models: readonly Choice[];
+}): import("react").JSX.Element;

package/dist/Schedule.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// "Schedule this": a prompt from Chat that runs itself.
+//
+// The dialog holds the prompt, a "When" said in the reader's words — read live
+// by the platform's scheduler (`POST /v1/auto/cron`) in their own time zone and
+// said back with the next run — and the model it thinks with. Create keeps it
+// as an automation made in Chat (lib/auto); its runs land in the Library, and
+// the list of them is Scheduled tasks.
+import { useEffect, useRef, useState } from 'react';
+import { useAi } from '@hanzo/ai/react';
+import { Anchor, Button, Dialog, DialogContent, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SizableText, Text, Textarea, XStack, YStack } from '@hanzo/ui';
+import { cron, schedule, zone } from './lib/auto.js';
+import { app } from './lib/host.js';
+import { site } from './where.js';
+import { BAD } from './lib/mix.js';
+/** How long the "When" field rests before it is read. */
+const REST = 400;
+/** A moment as the reader's clock says it. */
+function local(at) {
+    const d = new Date(at);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    return d.toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+export function Schedule({ open, onOpenChange, prompt, model, models, }) {
+    const ai = useAi();
+    const [words, setWords] = useState('');
+    const [said, setSaid] = useState('');
+    const [chose, setChose] = useState(model);
+    const [read, setRead] = useState(null);
+    const [reading, setReading] = useState(false);
+    const [wrong, setWrong] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [made, setMade] = useState(false);
+    // Each opening starts from what it was opened on; the typing that follows is the reader's.
+    useEffect(() => {
+        if (!open)
+            return;
+        setWords(prompt);
+        setSaid('');
+        setChose(model);
+        setRead(null);
+        setWrong('');
+        setMade(false);
+    }, [open, prompt, model]);
+    // The "When", read once the reader rests, and the last read only.
+    const asked = useRef(0);
+    useEffect(() => {
+        const text = said.trim();
+        if (!open || !text) {
+            setRead(null);
+            setReading(false);
+            return;
+        }
+        const n = ++asked.current;
+        const stop = new AbortController();
+        setReading(true);
+        const t = setTimeout(() => {
+            cron(ai, text, zone(), stop.signal).then((got) => {
+                if (n !== asked.current)
+                    return;
+                setRead(got);
+                setWrong('');
+                setReading(false);
+            }, (e) => {
+                if (n !== asked.current || stop.signal.aborted)
+                    return;
+                setRead(null);
+                setWrong(e?.message || 'That is not a time the scheduler can read.');
+                setReading(false);
+            });
+        }, REST);
+        return () => {
+            clearTimeout(t);
+            stop.abort();
+        };
+    }, [said, open, ai]);
+    const ready = Boolean(words.trim() && read && !reading && !busy);
+    const create = async () => {
+        if (!ready || !read)
+            return;
+        setBusy(true);
+        setWrong('');
+        try {
+            await schedule(ai, words, read.schedule, chose || undefined);
+            setMade(true);
+        }
+        catch (e) {
+            setWrong(e?.message || 'The task was not scheduled.');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const options = models.some((m) => m.id === chose) || !chose ? models : [{ id: chose, name: chose }, ...models];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 520, rounded: "$6", gap: "$3", "data-slot": "schedule", children: [_jsx(DialogTitle, { children: "Schedule this" }), made ? (_jsxs(YStack, { gap: "$3", children: [_jsxs(SizableText, { size: "$3", color: "$ink", role: "status", children: ["Scheduled.", ' ', _jsx(Anchor, { href: site(app('-/automations')), color: "$ink", textDecorationLine: "underline", children: "See it in Scheduled tasks." })] }), _jsx(XStack, { justify: "flex-end", children: _jsx(Button, { size: "sm", rounded: 999, onPress: () => onOpenChange(false), children: "Done" }) })] })) : (_jsxs(YStack, { gap: "$3", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Prompt" }), _jsx(Textarea, { value: words, onChangeText: setWords, rows: 4, "aria-label": "Prompt" })] }), _jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "When" }), _jsx(Input, { autoFocus: true, value: said, onChangeText: setSaid, placeholder: "Every Monday at 9am", "aria-label": "When it runs", "aria-describedby": "schedule-when", onKeyDown: (e) => {
+                                        if (e.key === 'Enter' && !e.nativeEvent?.isComposing)
+                                            void create();
+                                    } }), _jsx(Text, { id: "schedule-when", fontSize: "$1", color: wrong ? BAD : '$soft', role: "status", minH: 18, children: wrong
+                                        ? wrong
+                                        : reading
+                                            ? 'Reading.'
+                                            : read
+                                                ? [read.says, read.next ? `next ${local(read.next)}` : 'when you run it'].filter(Boolean).join(' · ')
+                                                : 'Say it the way you would: every weekday at 8, every 5 minutes, tomorrow at noon.' })] }), options.length ? (_jsxs(YStack, { gap: "$1", children: [_jsx(Text, { fontSize: "$1", color: "$soft", children: "Model" }), _jsxs(Select, { value: chose, onValueChange: setChose, children: [_jsx(SelectTrigger, { "aria-label": "Model", width: "100%", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: options.map((m) => (_jsx(SelectItem, { value: m.id, children: m.name }, m.id))) })] })] })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", rounded: 999, disabled: !ready, onPress: () => void create(), children: busy ? 'Scheduling…' : 'Create' })] })] }))] }) }));
+}

package/dist/keep.d.ts

@@ -0,0 +1,40 @@
+import type { Artifact } from '@hanzo/build';
+import { type Api, type Item } from './lib/library.js';
+import { type Via } from './pane.js';
+/** A picture's still: its SVG drawn onto a canvas, as base64 PNG, with its size. Null where the browser cannot draw it. */
+export declare function still(svg: string): Promise<{
+    png: string;
+    width: number;
+    height: number;
+} | null>;
+/** Keeps what one finished answer made. Each save stands alone: one that fails leaves the rest kept. */
+export declare function keepAnswer(api: Api, thread: string, message: string, blocks: readonly Artifact[]): Promise<Item[]>;
+/**
+ * Keeps each answer's makings once it finishes. `finished` is the answer that
+ * just stopped streaming (its id and its words), `thread` the conversation's
+ * id, which can land a moment after the answer does: the answer waits for it.
+ */
+export declare function useKeep(api: Api, signedIn: boolean, thread: string | null, finished: {
+    id: string;
+    text: string;
+} | null, blocks: (text: string) => Artifact[]): void;
+/** A Library item's bytes as a File, read through its signed address. */
+export declare function fileOf(item: Item): Promise<File>;
+/**
+ * `/chat?attach=<item>`: the Library item, held for the next message in
+ * conversation `at`. The parameter is struck from the address once read, so a
+ * reload does not attach it twice. Answers why it could not be, or ''.
+ */
+export declare function useAttach(at: string, via: Via): string;
+/**
+ * Keeps a file the reader put into the conversation, when they ask: its bytes
+ * read from `url` (the object URL this document holds, or the workspace copy's
+ * signed address), keyed by the workspace file it is, so asking twice keeps one.
+ */
+export declare function keepFile(api: Api, f: {
+    id: string;
+    name: string;
+    type: string;
+    url: string;
+    thread: string | null;
+}): Promise<Item>;

package/dist/keep.js

@@ -0,0 +1,148 @@
+'use client';
+// What Chat keeps in the Library, and what it takes back out.
+//
+// KEPT AS IT IS MADE. When an answer finishes, every page, picture and file it
+// wrote out (lib/library `made`) is saved to the reader's Library under the
+// conversation, keyed `<thread>/<message>/<index>`, so it is kept once whatever
+// redraws it. A picture is kept with a still drawn here, so the Library shows it
+// whatever type its bytes are served as. Nothing is kept for a reader with no
+// account, or before the conversation has an id: the item names where it came
+// from.
+//
+// TAKEN BACK IN by `/chat?attach=<item>` (the Library's "Use in Chat"): the
+// item's bytes are held for the next message by the one road a picked file
+// takes (pane.ts `hold`).
+import { useEffect, useRef, useState } from 'react';
+import { base64, get, keyOf, made, save } from './lib/library.js';
+import { talk } from './lib/host.js';
+import { hold } from './pane.js';
+/** The longest side of a picture's still, px. */
+const STILL = 512;
+/** A picture's still: its SVG drawn onto a canvas, as base64 PNG, with its size. Null where the browser cannot draw it. */
+export async function still(svg) {
+    if (typeof document === 'undefined')
+        return null;
+    const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
+    try {
+        const img = new Image();
+        await new Promise((done, fail) => {
+            img.onload = () => done();
+            img.onerror = () => fail(new Error('undrawable'));
+            img.src = url;
+        });
+        const w = img.naturalWidth || STILL;
+        const h = img.naturalHeight || STILL;
+        const scale = Math.min(1, STILL / Math.max(w, h));
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.round(w * scale));
+        canvas.height = Math.max(1, Math.round(h * scale));
+        canvas.getContext('2d')?.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const blob = await new Promise((done) => canvas.toBlob(done, 'image/png'));
+        return blob ? { png: await base64(blob), width: w, height: h } : null;
+    }
+    catch {
+        return null;
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+}
+/** Keeps what one finished answer made. Each save stands alone: one that fails leaves the rest kept. */
+export async function keepAnswer(api, thread, message, blocks) {
+    const out = [];
+    for (const [i, a] of made(blocks).entries()) {
+        try {
+            const pic = a.mime === 'image/svg+xml' ? await still(a.body) : null;
+            out.push(await save(api, {
+                name: a.name,
+                mime: a.mime,
+                data: new Blob([a.body], { type: a.mime }),
+                ref: thread,
+                origin: talk(thread),
+                key: keyOf(thread, message, i),
+                ...(pic ? { preview: pic.png, width: pic.width, height: pic.height } : {}),
+            }));
+        }
+        catch {
+            // Kept on the next answer that makes it; the conversation holds it meanwhile.
+        }
+    }
+    return out;
+}
+/**
+ * Keeps each answer's makings once it finishes. `finished` is the answer that
+ * just stopped streaming (its id and its words), `thread` the conversation's
+ * id, which can land a moment after the answer does: the answer waits for it.
+ */
+export function useKeep(api, signedIn, thread, finished, blocks) {
+    const waiting = useRef([]);
+    const kept = useRef(new Set());
+    useEffect(() => {
+        if (!signedIn || !finished || kept.current.has(finished.id))
+            return;
+        waiting.current.push(finished);
+        kept.current.add(finished.id);
+    }, [signedIn, finished]);
+    useEffect(() => {
+        if (!thread || !signedIn || !waiting.current.length)
+            return;
+        const now = waiting.current.splice(0);
+        for (const one of now) {
+            const list = blocks(one.text);
+            if (list.length)
+                void keepAnswer(api, thread, one.id, list);
+        }
+    }, [thread, signedIn, finished, api, blocks]);
+}
+/** A Library item's bytes as a File, read through its signed address. */
+export async function fileOf(item) {
+    const res = await fetch(item.url);
+    if (!res.ok)
+        throw new Error(`${item.name} could not be read from your Library.`);
+    const blob = await res.blob();
+    return new File([blob], item.name, { type: item.mime || blob.type });
+}
+/**
+ * `/chat?attach=<item>`: the Library item, held for the next message in
+ * conversation `at`. The parameter is struck from the address once read, so a
+ * reload does not attach it twice. Answers why it could not be, or ''.
+ */
+export function useAttach(at, via) {
+    const [why, setWhy] = useState('');
+    const done = useRef(false);
+    useEffect(() => {
+        if (done.current || typeof window === 'undefined' || !via.org)
+            return;
+        const url = new URL(window.location.href);
+        const id = url.searchParams.get('attach')?.trim();
+        if (!id)
+            return;
+        done.current = true;
+        url.searchParams.delete('attach');
+        window.history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
+        get(via.api, id)
+            .then(fileOf)
+            .then((f) => hold(at, [f], via))
+            .catch((e) => setWhy(e?.message || 'That item could not be attached.'));
+    }, [at, via]);
+    return why;
+}
+/**
+ * Keeps a file the reader put into the conversation, when they ask: its bytes
+ * read from `url` (the object URL this document holds, or the workspace copy's
+ * signed address), keyed by the workspace file it is, so asking twice keeps one.
+ */
+export async function keepFile(api, f) {
+    const res = await fetch(f.url);
+    if (!res.ok)
+        throw new Error(`${f.name} could not be read.`);
+    const blob = await res.blob();
+    return save(api, {
+        name: f.name,
+        mime: f.type || blob.type || 'application/octet-stream',
+        data: blob,
+        ref: f.thread ?? '',
+        origin: f.thread ? talk(f.thread) : talk(),
+        key: `file/${f.id}`,
+    });
+}

package/dist/lib/auto.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SCHEDULED — a prompt from Chat that runs itself (`/v1/auto`).
+ *
+ * The one scheduler is the platform's automations: a schedule said the way a
+ * person says it ("every Monday at 9am") is turned into one by `POST
+ * /v1/auto/cron` in the reader's own time zone, and `POST /v1/auto/automations`
+ * keeps it, made in Chat (`source: "chat"`). Each run's answer lands in the
+ * reader's Library; the list of them is Scheduled tasks in Dev.
+ */
+import type { Api } from './library.js';
+/** When it runs, in the platform's words. */
+export interface Schedule {
+    kind: string;
+    at?: string;
+    day?: string;
+    cron?: string;
+    tz?: string;
+}
+/** A schedule read from words: itself, the words it is said back in, and its next run. */
+export interface When {
+    schedule: Schedule;
+    says: string;
+    /** RFC 3339, or null when it runs only when asked. */
+    next: string | null;
+}
+/** The reader's own time zone, or UTC where the browser will not say. */
+export declare function zone(): string;
+/** Reads a schedule off the wire, or null for one with no kind. */
+export declare function when(raw: unknown): When | null;
+/** Turns words into a schedule, in `tz`. */
+export declare function cron(api: Api, text: string, tz: string, signal?: AbortSignal): Promise<When>;
+/** A schedule's name: the prompt's first line, held to what the platform keeps. */
+export declare function title(prompt: string): string;
+/** Keeps a prompt from Chat as an automation on `schedule`, and answers its id. */
+export declare function schedule(api: Api, prompt: string, at: Schedule, model?: string): Promise<string>;

package/dist/lib/auto.js

@@ -0,0 +1,62 @@
+/**
+ * SCHEDULED — a prompt from Chat that runs itself (`/v1/auto`).
+ *
+ * The one scheduler is the platform's automations: a schedule said the way a
+ * person says it ("every Monday at 9am") is turned into one by `POST
+ * /v1/auto/cron` in the reader's own time zone, and `POST /v1/auto/automations`
+ * keeps it, made in Chat (`source: "chat"`). Each run's answer lands in the
+ * reader's Library; the list of them is Scheduled tasks in Dev.
+ */
+/** The reader's own time zone, or UTC where the browser will not say. */
+export function zone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+}
+const obj = (v) => (v && typeof v === 'object' ? v : {});
+const str = (v) => (typeof v === 'string' ? v : '');
+/** Reads a schedule off the wire, or null for one with no kind. */
+export function when(raw) {
+    const o = obj(raw);
+    const s = obj(o.schedule);
+    if (!str(s.kind))
+        return null;
+    const schedule = { kind: str(s.kind) };
+    for (const k of ['at', 'day', 'cron', 'tz'])
+        if (str(s[k]))
+            schedule[k] = str(s[k]);
+    return { schedule, says: str(o.says), next: str(o.next) || null };
+}
+/** Turns words into a schedule, in `tz`. */
+export async function cron(api, text, tz, signal) {
+    const got = when(await api.http.json({ method: 'POST', path: '/v1/auto/cron', body: { text, tz }, signal }));
+    if (!got)
+        throw new Error('That is not a time the scheduler can read.');
+    return got;
+}
+/** A schedule's name: the prompt's first line, held to what the platform keeps. */
+export function title(prompt) {
+    const first = prompt.trim().split('\n')[0]?.trim() ?? '';
+    return first.length > 80 ? `${first.slice(0, 79).trimEnd()}…` : first || 'Scheduled prompt';
+}
+/** Keeps a prompt from Chat as an automation on `schedule`, and answers its id. */
+export async function schedule(api, prompt, at, model) {
+    const body = {
+        name: title(prompt),
+        instructions: prompt.trim(),
+        schedule: at,
+        source: 'chat',
+        permissions: 'ask',
+        notify: true,
+    };
+    if (model)
+        body.model = model;
+    const got = obj(await api.http.json({ method: 'POST', path: '/v1/auto/automations', body }));
+    const id = str(got.id);
+    if (!id)
+        throw new Error('The scheduler answered with no task.');
+    return id;
+}

package/dist/lib/host.d.ts

@@ -51,6 +51,8 @@ export declare const DEV = "/dev";
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export declare const STUDIO = "/studio";
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export declare const studio: (at: string) => string;
 /** Chat on a conversation, or /chat itself for a new one. */
 export declare const talk: (id?: string | null) => string;
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -62,6 +64,9 @@ export type Place = {
 } | {
     mode: 'dev';
     at: string;
+} | {
+    mode: 'studio';
+    at: string;
 };
 /** The place a path names, or null when it names none of the app's. */
 export declare function place(pathname: string): Place | null;

package/dist/lib/host.js

@@ -54,6 +54,8 @@ export const DEV = '/dev';
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export const STUDIO = '/studio';
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export const studio = (at) => (at ? `${STUDIO}/${at.replace(/^\/+/, '')}` : STUDIO);
 /** Chat on a conversation, or /chat itself for a new one. */
 export const talk = (id) => (id ? `${CHAT}/${encodeURIComponent(id)}` : CHAT);
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -67,6 +69,8 @@ export function place(pathname) {
         return { mode: 'chat', thread: null };
     if (p === DEV || p.startsWith(`${DEV}/`))
         return { mode: 'dev', at: path(parse(p.slice(DEV.length))) };
+    if (p === STUDIO || p.startsWith(`${STUDIO}/`))
+        return { mode: 'studio', at: p.slice(STUDIO.length + 1) };
     if (!p.startsWith(`${CHAT}/`))
         return null;
     const id = p.slice(CHAT.length + 1);
@@ -136,7 +140,8 @@ export function remember(mode) {
 /** Where `/` takes a member: the mode they were last in, Chat when none is kept. */
 export function resume() {
     try {
-        return window.localStorage.getItem(MODE) === 'dev' ? DEV : CHAT;
+        const kept = window.localStorage.getItem(MODE);
+        return kept === 'dev' ? DEV : kept === 'studio' ? STUDIO : CHAT;
     }
     catch {
         return CHAT;

package/dist/lib/library.d.ts

@@ -0,0 +1,72 @@
+/**
+ * THE LIBRARY — everything a person made, in one place (`/v1/library`).
+ *
+ * Chat keeps what its answers make there: a page or a picture an answer wrote
+ * out, a file it wrote out whole, and a file the reader chose to keep. Each is
+ * one POST of its bytes; the item is the reader's alone until they share it.
+ *
+ * A save names itself with a key — `<thread>/<message>/<index>` for what an
+ * answer made — and the Library answers the item already kept for a key it has
+ * seen, so a turn drawn again, a retry, or a second tab files one item, not two.
+ */
+import type { HttpClient } from '@hanzo/ai';
+import type { Artifact } from '@hanzo/build';
+/** The HTTP half of an `@hanzo/ai` client: all this module needs. */
+export interface Api {
+    http: Pick<HttpClient, 'json'>;
+}
+/** One thing in the Library, as it answers. */
+export interface Item {
+    id: string;
+    kind: string;
+    source: string;
+    name: string;
+    mime: string;
+    bytes: number;
+    /** A signed address that opens it in place, for an hour. */
+    url: string;
+    /** A signed address that downloads it. */
+    download: string;
+    /** A signed address of its still, or '' for none. */
+    preview: string;
+    /** The path back to what made it. */
+    origin: string;
+    mine: boolean;
+    shared: boolean;
+}
+/** What a save sends. */
+export interface Keep {
+    name: string;
+    mime: string;
+    /** The bytes: base64, or a Blob read here. */
+    data: string | Blob;
+    /** What made it: the conversation. */
+    ref: string;
+    /** The path back to it. */
+    origin: string;
+    /** Names the save, so the same one twice is one item. */
+    key: string;
+    /** A still that shows it, base64 PNG. */
+    preview?: string;
+    width?: number;
+    height?: number;
+}
+/** The most one save sends; the Library answers 413 past it. */
+export declare const MAX: number;
+/** The key of the `index`th thing message `message` of `thread` made. */
+export declare const keyOf: (thread: string, message: string, index: number) => string;
+/** A Blob's bytes, base64. */
+export declare function base64(blob: Blob): Promise<string>;
+/** Reads an item off the wire, or null for something that is not one. */
+export declare function read(raw: unknown): Item | null;
+/** Keeps one thing from Chat in the reader's Library. */
+export declare function save(api: Api, k: Keep): Promise<Item>;
+/** One item the reader may see — theirs, or shared in their organization. */
+export declare function get(api: Api, id: string): Promise<Item>;
+/**
+ * What an answer made, worth keeping, of the fenced blocks it wrote
+ * (@hanzo/build `artifacts`): a page or a picture, and a file written out under
+ * a file's name. A snippet in a language (`ts block`) is part of the answer,
+ * not a thing it made, so it is not kept.
+ */
+export declare function made(blocks: readonly Artifact[]): Artifact[];

package/dist/lib/library.js

@@ -0,0 +1,83 @@
+/**
+ * THE LIBRARY — everything a person made, in one place (`/v1/library`).
+ *
+ * Chat keeps what its answers make there: a page or a picture an answer wrote
+ * out, a file it wrote out whole, and a file the reader chose to keep. Each is
+ * one POST of its bytes; the item is the reader's alone until they share it.
+ *
+ * A save names itself with a key — `<thread>/<message>/<index>` for what an
+ * answer made — and the Library answers the item already kept for a key it has
+ * seen, so a turn drawn again, a retry, or a second tab files one item, not two.
+ */
+/** The most one save sends; the Library answers 413 past it. */
+export const MAX = 10 * 1024 * 1024;
+/** The key of the `index`th thing message `message` of `thread` made. */
+export const keyOf = (thread, message, index) => `${thread}/${message}/${index}`;
+/** A Blob's bytes, base64. */
+export async function base64(blob) {
+    const bytes = new Uint8Array(await blob.arrayBuffer());
+    let s = '';
+    for (let i = 0; i < bytes.length; i += 0x8000)
+        s += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+    return btoa(s);
+}
+/** Reads an item off the wire, or null for something that is not one. */
+export function read(raw) {
+    const o = (raw && typeof raw === 'object' ? raw : {});
+    const str = (k) => (typeof o[k] === 'string' ? o[k] : '');
+    if (!str('id'))
+        return null;
+    return {
+        id: str('id'),
+        kind: str('kind'),
+        source: str('source'),
+        name: str('name') || str('id'),
+        mime: str('mime'),
+        bytes: typeof o.bytes === 'number' ? o.bytes : 0,
+        url: str('url'),
+        download: str('download'),
+        preview: str('preview'),
+        origin: str('origin'),
+        mine: o.mine === true,
+        shared: o.shared === true,
+    };
+}
+/** Keeps one thing from Chat in the reader's Library. */
+export async function save(api, k) {
+    const data = typeof k.data === 'string' ? k.data : await base64(k.data);
+    if ((data.length * 3) / 4 > MAX)
+        throw new Error(`${k.name} is larger than 10 MB, the most the Library takes from Chat.`);
+    const body = { name: k.name, mime: k.mime, data, source: 'chat', ref: k.ref, origin: k.origin, key: k.key };
+    if (k.preview)
+        body.preview = k.preview;
+    if (k.width)
+        body.width = Math.round(k.width);
+    if (k.height)
+        body.height = Math.round(k.height);
+    const got = read(await api.http.json({ method: 'POST', path: '/v1/library', body }));
+    if (!got)
+        throw new Error('The Library answered with no item.');
+    return got;
+}
+/** One item the reader may see — theirs, or shared in their organization. */
+export async function get(api, id) {
+    const got = read(await api.http.json({ path: `/v1/library/${encodeURIComponent(id)}` }));
+    if (!got)
+        throw new Error('That item is not in your Library.');
+    return got;
+}
+const EXT = { 'text/html': 'html', 'image/svg+xml': 'svg' };
+const FILE = /\.[a-z0-9]{1,8}$/i;
+/** Whether a browser draws it as a page or a picture (@hanzo/build `renders`). */
+const drawn = (a) => a.mime === 'text/html' || a.mime === 'image/svg+xml';
+/**
+ * What an answer made, worth keeping, of the fenced blocks it wrote
+ * (@hanzo/build `artifacts`): a page or a picture, and a file written out under
+ * a file's name. A snippet in a language (`ts block`) is part of the answer,
+ * not a thing it made, so it is not kept.
+ */
+export function made(blocks) {
+    return blocks
+        .filter((a) => drawn(a) || FILE.test(a.name))
+        .map((a, i) => (FILE.test(a.name) ? a : { ...a, name: `${a.mime === 'image/svg+xml' ? 'Picture' : 'Page'} ${i + 1}.${EXT[a.mime] ?? 'txt'}` }));
+}

package/dist/thread.d.ts

@@ -29,12 +29,15 @@ export declare const href: (id: string) => string;
  * child holds the rows (`ThreadRow`). `threads` are the list's conversations by
  * id, `active` the one the pane holds (what the keys act on with no menu open),
  * and `onGone` runs after that one is deleted — the room moves to a new chat —
- * defaulting to emptying the room.
+ * defaulting to emptying the room. `onSchedule`, where the list's host can say
+ * what the conversation asks, adds Schedule…: the conversation's question as a
+ * task that runs itself.
  */
-export declare function ConversationMenu({ threads, active, onGone, children, }: {
+export declare function ConversationMenu({ threads, active, onGone, onSchedule, children, }: {
     threads: Map<string, Thread>;
     active?: string | null;
     onGone?: () => void;
+    onSchedule?: (t: Thread) => void;
     children: ReactElement;
 }): import("react").JSX.Element;
 /**

package/dist/thread.js

@@ -22,7 +22,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // device they sign in on.
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { useAi } from '@hanzo/ai/react';
-import { Archive, ArchiveRestore, ExternalLink, Link2, MoreHorizontal, Pencil, Pin, PinOff, Share2, Trash2 } from 'lucide-react';
+import { Archive, ArchiveRestore, Clock, ExternalLink, Link2, MoreHorizontal, Pencil, Pin, PinOff, Share2, Trash2 } from 'lucide-react';
 import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Input, SizableText, Text, XStack, YStack, toast, } from '@hanzo/ui';
 import { empty } from './open.js';
 import { say } from './lib/org.js';
@@ -182,9 +182,11 @@ const own = (row) => row?.querySelector('[data-slot="sidebar-item"], [role="butt
  * child holds the rows (`ThreadRow`). `threads` are the list's conversations by
  * id, `active` the one the pane holds (what the keys act on with no menu open),
  * and `onGone` runs after that one is deleted — the room moves to a new chat —
- * defaulting to emptying the room.
+ * defaulting to emptying the room. `onSchedule`, where the list's host can say
+ * what the conversation asks, adds Schedule…: the conversation's question as a
+ * task that runs itself.
  */
-export function ConversationMenu({ threads, active = null, onGone = empty, children, }) {
+export function ConversationMenu({ threads, active = null, onGone = empty, onSchedule, children, }) {
     const act = useThreadActions();
     // The conversation the pane holds NOW: a delete answered after the reader moved on leaves the room they moved to.
     const holds = useRef(active);
@@ -280,6 +282,7 @@ export function ConversationMenu({ threads, active = null, onGone = empty, child
                 run: () => void act.pin(subject),
             },
             { key: 'share', label: 'Share…', icon: _jsx(Share2, { size: 16, "aria-hidden": true }), run: () => ask('share', subject) },
+            ...(onSchedule ? [{ key: 'schedule', label: 'Schedule…', icon: _jsx(Clock, { size: 16, "aria-hidden": true }), run: () => onSchedule(subject) }] : []),
             { key: 'copy', label: 'Copy link', icon: _jsx(Link2, { size: 16, "aria-hidden": true }), run: () => void copy(subject.id) },
             { key: 'tab', label: 'Open in new tab', icon: _jsx(ExternalLink, { size: 16, "aria-hidden": true }), run: () => away(subject.id) },
             {

package/dist/where.d.ts

@@ -68,6 +68,6 @@ export declare const where: () => Addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export declare const brand: () => string;
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export declare const wordmark: (mode: 'chat' | 'dev') => string;
+export declare const wordmark: (mode: 'chat' | 'dev' | 'studio') => string;
 /** A page of the app's own, from wherever the rooms are mounted. */
 export declare const site: (path: string) => string;

package/dist/where.js

@@ -12,6 +12,6 @@ export const where = () => addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export const brand = () => addresses.brand ?? 'Hanzo AI';
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : mode === 'studio' ? 'Hanzo Studio' : brand());
 /** A page of the app's own, from wherever the rooms are mounted. */
 export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "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",
@@ -55,6 +55,7 @@
     "@hanzo/gui": "^8.3.5",
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
+    "@hanzo/studio": ">=0.1.0",
     "@hanzo/ui": ">=8.27.67",
     "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.16",
@@ -73,6 +74,7 @@
     "@hanzo/gui": "8.3.5",
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
+    "@hanzo/studio": "0.1.0",
     "@hanzo/ui": "8.27.67",
     "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.16",