@hanzo/rooms 0.1.33 → 0.1.35

package/README.md

@@ -11,13 +11,13 @@ import { CalScheduler } from '@hanzo/rooms/CalScheduler'
 
 configure({ site: '', home: '/home', signUp: '/signup' })
 
-<Rooms router={router} search={search} route={route} Link={Link}>
+<Rooms router={router} search={search} path={pathname} route={route} Link={Link}>
   <Room mode="cal"><CalScheduler /></Room>
 </Rooms>
 ```
 
 `configure()` names the host's addresses (where its own pages live, the
 gateway and IAM, the plan catalogue to paint first). `<Rooms>` carries what
-moves: the router, the query, the route and the link component. The rooms
+moves: the router, the query, the path, the route and the link component. The rooms
 import nothing from a host, and their look comes from `@hanzo/appearance` and
 `@hanzo/design` through `@hanzo/ui`.

package/dist/Chat.js

@@ -34,8 +34,8 @@ import { useAgent, useAi, useChat, useModels, } from "@hanzo/ai/react";
 import { freeCopy, grantConsent, hasConsent, isFree, } from "@hanzo/ai";
 import { ASK, Chat as ChatSurface, Code, Failure, Parts, words } from "@hanzo/ui/chat";
 import { carriedIn, compose, partsOf, said as told, weigh } from "./lib/attach.js";
-import { dropped, pct, readable, refOf, retrieve } from "./lib/files.js";
-import { channel, drop, hold, landed, spend, take, usePane, useWorkFile } from "./pane.js";
+import { download, dropped, fileOf, pct, readable, refOf, retrieve } from "./lib/files.js";
+import { channel, drop, hold, landed, localOf, spend, take, usePane, useWorkFile } from "./pane.js";
 import { Face, brief as roomBrief, join, roleOf, roomTurn, roster as rosterLine, rosterOf, speakers, speaksOf, voiceOf } from "./cast.js";
 import { SpeakButton, cleanForSpeech } from "./speech.js";
 import { Crew, HOUSE, useCrew } from "./crew.js";
@@ -52,12 +52,13 @@ import { useHydrated } from "./lib/hydrated.js";
 import { base, served } from "./lib/ai.js";
 import { onServed } from "./lib/served.js";
 import { refused as worded, speech, useDictation, useTalk, useVoice, Voice } from "@hanzo/voice";
-import { ArrowUp, AudioLines, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
+import { ArrowUp, AudioLines, FileText, Image as ImageMark, Mic, Paperclip, Square, Star, PanelRight, X } from "lucide-react";
 import { ENSO, FREE } from "./lib/ai.js";
 import { openThread, useOpen } from "./open.js";
 import { Beside, Framed } from "./Shell.js";
 import { pane } from "./ground.js";
-import { RightPane, usePinned } from "./RightPane.js";
+import { RightPane, addressOf, look, usePinned } from "./RightPane.js";
+import { useMedia } from "@hanzo/gui";
 import { Take } from "./copy.js";
 import { Share } from "./Share.js";
 import { useStarred } from "./stars.js";
@@ -351,27 +352,113 @@ const STAGE = {
     graph: "linking",
     embed: "vectors",
 };
-/** One chip: the file's glyph, its name, and how far it has got. */
-function Chip({ name, type, state, sent, file, onRemove, }) {
+/** How a file is drawn: a picture, a PDF's tile, or a chip. Read off its type, else its name, since a store may answer with neither. */
+function kindOf(name, type) {
+    if (type.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg)$/i.test(name))
+        return "image";
+    if (type === "application/pdf" || /\.pdf$/i.test(name))
+        return "pdf";
+    return "file";
+}
+// SIGNED ADDRESSES FOR PICTURES, by workspace file: a list of turns mounts and
+// remounts its chips, and asking the store each time would be a request per
+// picture per redraw. Kept for less than a signature lives (the store's are
+// five minutes), so a chip mounted later reads a fresh one; a picture already
+// drawn keeps its pixels whatever becomes of its address.
+const signed = new Map();
+const SIGNED_FOR = 4 * 60_000;
+function signedOf(api, id, file) {
+    const kept = signed.get(id);
+    if (kept && Date.now() - kept.at < SIGNED_FOR)
+        return kept.got;
+    const got = (file?.bucket && file.key ? Promise.resolve(file) : fileOf(api, id)).then((f) => download(api, f.bucket, f.key));
+    signed.set(id, { at: Date.now(), got });
+    got.catch(() => signed.delete(id));
+    return got;
+}
+/**
+ * Where a picture's thumbnail reads from: the bytes on this machine where this
+ * document holds them (the held file's object URL, which outlives its send),
+ * else a signed address for the workspace's copy — a file taken from Drive, or
+ * a turn read back after a reload. '' until there is one.
+ */
+function usePicture(on, href, id, file) {
+    const api = useAi();
+    const near = on ? href || (id ? localOf(id) : "") : "";
+    const [far, setFar] = useState("");
+    const bucket = file?.bucket;
+    useEffect(() => {
+        if (!on || near || !id)
+            return;
+        let live = true;
+        signedOf(api, id, file).then((url) => live && setFar(url), () => { });
+        return () => {
+            live = false;
+        };
+        // The file's record moves with every stage of its ingest; its address does not.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [on, near, id, bucket, api]);
+    return near || far;
+}
+/** Edge of a picture's or a PDF's thumbnail, in px. */
+const THUMB = 48;
+/**
+ * One file put into a message.
+ *
+ * A PICTURE SHOWS ITSELF and a PDF shows a tile, each with its name and size
+ * beside it; any other kind is a chip of its name. Nothing is filled behind
+ * them: a hairline on whatever they sit on, so a file reads alike over the
+ * composer and inside a turn's bubble, in a light room and a dark one. A second
+ * fill on the bubble's was the darker grey that read as a stain. The word for
+ * how far a file has got shows only while it is getting there — a picture of
+ * the file already says it is attached — and `data-state` keeps the index's own
+ * word for whoever reads it.
+ *
+ * Pressing one opens it beside the conversation (`onOpen`).
+ */
+function Chip({ name, type, size, state, sent, file, picture, onOpen, onRemove, }) {
+    const kind = kindOf(name, type);
     const bad = state === "failed";
     const why = state === "failed" || state === "stored" ? file?.error : file?.note;
-    return (_jsxs(XStack, { role: "listitem", items: "center", gap: "$1.5", pl: "$2.5", pr: onRemove ? "$1" : "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", bg: "$hover", maxW: 320, "data-slot": "file-chip", "data-state": state, "data-stage": file?.stage ?? "", ...(why ? { title: why } : null), children: [type.startsWith("image/") ? (_jsx(ImageMark, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })) : (_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" })), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name }), _jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: progress(state, sent, file) }), onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", hoverStyle: { bg: "$raised" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null] }));
+    // A picture the browser cannot draw (HEIC, a lapsed signature) falls back to its glyph.
+    const [broken, setBroken] = useState("");
+    const word = state === "ready" ? (file?.clipped ? "in part" : "") : progress(state, sent, file);
+    const meta = [kind === "pdf" ? "PDF" : "", size > 0 ? weigh(size) : "", word].filter(Boolean).join(" \u00b7 ");
+    const remove = onRemove ? (_jsx(Box, { render: "button", "aria-label": `Remove ${name}`, onClick: onRemove, p: "$1", rounded: "$10", shrink: 0, hoverStyle: { bg: "$hover" }, children: _jsx(X, { size: 12, "aria-hidden": true }) })) : null;
+    const marks = {
+        role: "listitem",
+        "data-slot": "file-chip",
+        "data-state": state,
+        "data-kind": kind,
+        "data-stage": file?.stage ?? "",
+        ...(why ? { title: why } : null),
+    };
+    if (kind === "file")
+        return (_jsxs(XStack, { ...marks, self: "center", items: "center", gap: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", maxW: 320, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$1.5", pl: "$2.5", py: "$1", minW: 0, cursor: "pointer", children: [_jsx(Paperclip, { size: 12, "aria-hidden": true, color: "var(--muted-foreground)" }), _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, shrink: 0, children: meta })) : null] }), remove] }));
+    const drawn = kind === "image" && picture && broken !== picture;
+    const Glyph = kind === "pdf" ? FileText : ImageMark;
+    return (_jsxs(XStack, { ...marks, items: "center", gap: "$1", p: "$1", pr: onRemove ? "$1" : "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", maxW: 280, children: [_jsxs(XStack, { render: "button", "aria-label": `Open ${name}`, onClick: onOpen, items: "center", gap: "$2", minW: 0, cursor: "pointer", children: [_jsx(YStack, { "data-slot": "file-thumb", width: THUMB, height: THUMB, shrink: 0, rounded: "$3", overflow: "hidden", items: "center", justify: "center", gap: "$0.5", borderWidth: drawn ? 0 : 1, borderColor: "$borderColor", children: drawn ? (_jsx(View, { render: _jsx("img", { src: picture, alt: "", loading: "lazy", decoding: "async", onError: () => setBroken(picture) }), width: "100%", height: "100%", objectFit: "cover", display: "block" })) : (_jsxs(_Fragment, { children: [_jsx(Glyph, { size: 18, "aria-hidden": true, color: "var(--muted-foreground)" }), kind === "pdf" ? (_jsx(Text, { fontSize: 9, fontWeight: "600", letterSpacing: 0.5, color: "$soft", children: "PDF" })) : null] })) }), _jsxs(YStack, { minW: 0, gap: "$0.5", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, text: "left", children: name }), meta ? (_jsx(Text, { fontSize: "$1", color: bad ? BAD : "$soft", numberOfLines: 1, text: "left", children: meta })) : null] })] }), remove] }));
 }
 /** A file held for the next message: uploading, then indexing, then ready. */
-function HeldChip({ one, onRemove }) {
+function HeldChip({ one, onOpen, onRemove }) {
     const live = useWorkFile(one.file?.id);
     const file = live ?? one.file;
     const state = one.state === "uploading" ? one.state : (file?.status ?? one.state);
-    return _jsx(Chip, { name: one.name, type: one.type, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), onRemove: onRemove });
+    const picture = usePicture(kindOf(one.name, one.type) === "image", one.href, file?.id, file);
+    // The mark the column's Sources row opens for the same file, so both open it alike.
+    const mark = { id: one.id, name: one.name, kind: kindOf(one.name, one.type) === "image" ? "image" : "file", href: one.href || undefined, file: file?.id, mime: one.type };
+    return (_jsx(Chip, { name: one.name, type: one.type, size: one.size, state: state, sent: one.sent, file: file ?? (one.error ? { error: one.error } : undefined), picture: picture, onOpen: () => onOpen(mark), onRemove: onRemove }));
 }
 /** A file a sent turn carried, as the index says of it now. */
-function TurnChip({ f }) {
+function TurnChip({ f, onOpen }) {
     const live = useWorkFile(f.id);
-    return _jsx(Chip, { name: f.name, type: f.type, state: live?.status ?? "ready", sent: 1, file: live });
+    const picture = usePicture(kindOf(f.name, f.type) === "image", "", f.id, live);
+    const mark = { id: f.id, name: f.name, kind: kindOf(f.name, f.type) === "image" ? "image" : "file", file: f.id, mime: f.type };
+    return _jsx(Chip, { name: f.name, type: f.type, size: f.size, state: live?.status ?? "ready", sent: 1, file: live, picture: picture, onOpen: () => onOpen(mark) });
 }
 /** A question that carried files: its words, the files put into it, and those read again. */
-function Carried({ text, attached, reused }) {
-    return (_jsxs(YStack, { gap: "$1.5", "data-slot": "turn-files", children: [text ? _jsx(Prose, { text: text }) : null, attached.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Files in this message", children: attached.map((f) => (_jsx(TurnChip, { f: f }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
+function Carried({ text, attached, reused, onOpen }) {
+    return (_jsxs(YStack, { gap: "$2", "data-slot": "turn-files", children: [text ? _jsx(Prose, { text: text }) : null, attached.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Files in this message", children: attached.map((f) => (_jsx(TurnChip, { f: f, onOpen: onOpen }, f.id))) })) : null, reused.length ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read again: ", reused.map((f) => `${f.name} (${weigh(f.size)})`).join(", ")] })) : null] }));
 }
 /**
  * The conversation. One component for a visitor and for an account.
@@ -420,6 +507,29 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // switch for it. Kept per conversation by `pane.ts`, so the header's control
     // reflects THIS room rather than the last one that was open.
     const [pinned, flipPin] = usePinned();
+    // The frame draws the column only from `$lg` (Shell.tsx `Paned`).
+    const wide = useMedia().lg;
+    /**
+     * OPENS A FILE A MESSAGE CARRIES, by the road the column's Sources row takes
+     * (`look`): a tab in the browser beside the conversation, the column opened
+     * first when it is shut. A phone has no column — the frame spends the width
+     * on the room — so there the file opens in a tab of the browser's own, minted
+     * before the signed address is asked for, since a window opened after an
+     * await is a popup the browser blocks.
+     */
+    const openFile = useCallback((m) => {
+        if (wide) {
+            if (aside === null)
+                showAside("tasks");
+            void look(at, m, ai);
+            return;
+        }
+        const tab = window.open("", "_blank");
+        if (!tab)
+            return;
+        tab.opener = null;
+        void addressOf(m, ai).then((href) => (href ? tab.location.replace(href) : tab.close()));
+    }, [wide, aside, showAside, at, ai]);
     /**
      * WHO YOU ARE TALKING TO, when it is somebody rather than the plain model.
      *
@@ -1132,7 +1242,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     if (turn.role === "user" && said) {
                         const read = told(said);
                         if (read.carried)
-                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused });
+                            return _jsx(Carried, { text: read.text, attached: read.carried.attached, reused: read.carried.reused, onOpen: openFile });
                     }
                     // WHILE THE ANSWER HAS NO WORDS YET: who is answering (the agents the
                     // question addresses, or the whole room when it names nobody), and the
@@ -1238,7 +1348,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                     },
                     // WHAT GOES WITH THE MESSAGE, above the frame: one chip a file, each
                     // with its own remove, and the reason any file was refused.
-                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 1.5rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
+                    head: files.length || turnedAway || preparing || talk.open || talk.refusal || pause ? (_jsxs(YStack, { width: "calc(100% - 32px)", maxW: `calc(${MEASURE} - 1.5rem)`, mx: "auto", gap: "$1.5", children: [pause ? (_jsx(LimitedBanner, { message: pause.message, actions: pause.actions, onAction: act, onUsage: () => showSettings("usage") })) : null, actWrong ? (_jsx(Text, { role: "alert", "data-slot": "limited-banner-wrong", fontSize: "$2", color: BAD, children: actWrong })) : null, files.length ? (_jsx(XStack, { gap: "$1.5", flexWrap: "wrap", role: "list", "aria-label": "Attached files", "data-slot": "composer-attached", children: files.map((one) => (_jsx(HeldChip, { one: one, onOpen: openFile, onRemove: () => drop(at, one.id) }, one.id))) })) : null, preparing ? (_jsxs(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-preparing", fontSize: "$2", color: "$soft", children: [preparing, "\u2026"] })) : null, turnedAway ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: turnedAway })) : null, talk.open || talk.refusal ? (_jsx(Text, { role: "status", "aria-live": "polite", "data-slot": "composer-talk-reply", fontSize: "$2", color: talk.refusal ? BAD : "$soft", children: talk.refusal
                                     ? worded(talk.refusal)
                                     : talk.reply
                                         ? `Hanzo: ${talk.reply}`

package/dist/RightPane.d.ts

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

package/dist/RightPane.js

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

package/dist/dev.js

@@ -7,12 +7,12 @@
 // to leave. The name drawn at the top left is Hanzo Dev: this host is the
 // dev agent. Chat, on the rooms shell, is Hanzo AI.
 //
-// THE ADDRESS IS THE QUERY. The app is `/` (app/page.tsx), and what it shows
-// rides `?at=` in the builder's own grammar (lib/host.ts `AT`), so a run, a
+// THE ADDRESS IS THE PATH. Dev is `/dev`, and what it shows is the path under
+// it in the builder's own grammar (lib/host.ts `app`, `under`), so a run, a
 // screen, a Settings section, a Customize tab, the plans and a project all
 // survive a reload, and Back steps through them. A move is a native history
-// entry, which the Next router folds into `useSearchParams`, so reading the
-// address and moving it are one query.
+// entry, which the Next router folds into `usePathname`, so reading the address
+// and moving it are one path.
 import { useMemo } from 'react';
 import { useLook, useRooms } from './host.js';
 import { useIam } from '@hanzo/iam/react';
@@ -21,7 +21,7 @@ import { administers, path, route } from '@hanzo/build';
 import { bearer, named, org, orgs, pick } from './lib/session.js';
 import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
-import { app, AT } from './lib/host.js';
+import { app, under } from './lib/host.js';
 import { link } from './lib/tags.js';
 /** Where the builder links out: every one of them an address of this site. */
 const LINKS = {
@@ -32,14 +32,14 @@ const LINKS = {
 };
 /** The person's theme, when they have chosen one the builder can name. */
 const theme = (t) => (t === 'light' || t === 'dark' || t === 'system' ? t : undefined);
-/** The app address a query value names, canonical; '' for anything that is not one. */
+/** The app address a builder path names, canonical; '' for anything that is not one. */
 const canonical = (at) => path(route(at ?? ''));
 /** The host for a signed-in reader. */
 export function useDevHost() {
     const { user, accessToken } = useIam();
     const logout = useSignOut();
-    const { router, search } = useRooms();
-    const here = canonical(search?.get(AT) ?? null);
+    const { router, path: pathname } = useRooms();
+    const here = canonical(under(pathname));
     const look = useLook();
     // The token's claims change only when the token does: a sign-in, a refresh.
     const memberships = useMemo(() => orgs(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -70,7 +70,7 @@ export function useDevHost() {
         path: here,
         go: (to, how) => {
             const next = app(canonical(to));
-            if (`${window.location.pathname}${window.location.search}` === next)
+            if (window.location.pathname === next && !window.location.search)
                 return;
             if (how?.replace)
                 window.history.replaceState(null, '', next);

package/dist/host.d.ts

@@ -7,7 +7,7 @@
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -17,7 +17,7 @@
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query and the route change as the page moves, so they ride
+ * The ROUTER, the query, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
@@ -34,14 +34,18 @@ export interface Router {
 }
 interface Moving {
     router: Router;
-    /** The address's query, for the rooms that read one (Dev's `?at=`). */
+    /** The address's query, for the rooms that read one (Chat's `?chat=`). */
     search: URLSearchParams | null;
+    /** The address's path, for the rooms that read one (Dev's, under `/dev`). */
+    path: string | null;
     route: string;
     Link: Link;
 }
-export interface RoomsProps extends Omit<Moving, 'search'> {
+export interface RoomsProps extends Omit<Moving, 'search' | 'path'> {
     /** Absent where no mounted room reads the query, so a static export needs no Suspense for it. */
     search?: URLSearchParams | null;
+    /** Absent where no mounted room reads the path. */
+    path?: string | null;
     children?: ReactNode;
 }
 /** The router, the query, the route and the link the host mounted the rooms with. */
@@ -72,5 +76,5 @@ export declare function useLook(): {
  * keeps their choice in step with IAM.
  */
 export declare function Look(): any;
-export declare function Rooms({ router, search, route, Link, children }: RoomsProps): import("react").JSX.Element;
+export declare function Rooms({ router, search, path, route, Link, children }: RoomsProps): import("react").JSX.Element;
 export {};

package/dist/host.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  *   configure({ site: 'https://hanzo.ai', home: '/', signUp: '/start' })
  *
- *   <Rooms router={useRouter()} search={useSearchParams()} route={route} Link={Link}>
+ *   <Rooms router={useRouter()} search={useSearchParams()} path={usePathname()} route={route} Link={Link}>
  *     <Room mode="cal" />
  *   </Rooms>
  *
@@ -19,7 +19,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * any component and on pages the rooms never draw. So the host states them once
  * with `configure()`, in a module its root imports, before anything renders.
  *
- * The ROUTER, the query and the route change as the page moves, so they ride
+ * The ROUTER, the query, the path and the route change as the page moves, so they ride
  * React context, and a room reads them with `useRooms()`.
  */
 import { createContext, useContext } from 'react';
@@ -35,6 +35,7 @@ const Context = createContext({
         forward: () => window.history.forward(),
     },
     search: null,
+    path: null,
     route: '/',
     Link: Plain,
 });
@@ -71,6 +72,6 @@ export function Look() {
     useLook();
     return null;
 }
-export function Rooms({ router, search = null, route, Link, children }) {
-    return _jsx(Context.Provider, { value: { router, search, route, Link }, children: children });
+export function Rooms({ router, search = null, path = null, route, Link, children }) {
+    return _jsx(Context.Provider, { value: { router, search, path, route, Link }, children: children });
 }

package/dist/lib/host.d.ts

@@ -30,30 +30,35 @@ export declare const ENTRY = "https://hanzo.team/?signin";
  */
 export declare const START = "https://hanzo.team/start";
 /**
- * The web app, at `/` for a signed-in reader, in two modes. Chat is the default.
- * Dev is @hanzo/build's `<Builder>`, and what it shows rides ONE query, `?at=`,
- * in the builder's own grammar (`route` in @hanzo/build): '' New, `sess_<id>` a
- * run, `-/<screen>`, `-/settings[/<section>]`, `-/customize[/<tab>]`,
- * `-/plans`, `<slug>` a project. A query and not a path, because a static
- * export has no server to answer a path under `/`.
+ * The web app, for a signed-in reader, in two modes. Chat is the default, at
+ * `/`. Dev is @hanzo/build's `<Builder>` at `/dev`, and what it shows is the
+ * PATH under it, in the builder's own grammar (`route` in @hanzo/build): `/dev`
+ * New, `/dev/sess_<id>` a run, `/dev/<org>/<repo>` a project,
+ * `/dev/-/<screen>`, `/dev/-/settings[/<section>]`, `/dev/-/customize[/<tab>]`,
+ * `/dev/<slug>` a deployed site. The export holds one page for all of them,
+ * `/dev`, and the edge serves it for every path under it (hanzo.ai's
+ * lib/edge.ts `APP`).
  */
-export declare const AT = "at";
-/** `/` in Dev at an app address; '' is Dev's New, `/?at=`. The key is the mode. */
+export declare const DEV = "/dev";
+/** Dev at an app address; '' is Dev's New, `/dev` itself. */
 export declare const app: (path: string) => string;
+/** The app address a pathname names under `/dev`, or null for a pathname that is not Dev's. */
+export declare const under: (pathname: string | null | undefined) => string | null;
 /**
  * Chat, the app's default mode: `/` is a new conversation and `?chat=<id>` one
- * of the reader's. So the address says which mode the app is in — `at` for Dev,
- * anything else Chat — and a reload keeps it.
+ * of the reader's. So the address says which mode the app is in — a path under
+ * `/dev` for Dev, anything else Chat — and a reload keeps it.
  */
 export declare const TALK = "chat";
 /** `/` in Chat, on a conversation, or `/` itself for a new one. */
 export declare const talk: (id?: string | null) => string;
 /**
- * The door opened on one run or project: `?run=` or `?project=`, the query the
- * door turns into `?at=` — and the one the console and shared links already
- * carry. Only a value that is exactly a session id or a project slug is
- * carried; anything else opens /dev itself, so no caller can make this name
- * another address.
+ * Dev opened on one run, project or site, from anywhere: every "Try Hanzo Dev"
+ * link, a room's Dev, the console's "open in the builder". It signs a stranger
+ * in on the way (app/(app)/dev/_door.tsx), and is reached through `site()`:
+ * here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value that is
+ * exactly a session id, a repository or a site's slug is carried; anything else
+ * opens /dev itself, so no caller can make this name another address.
  */
 export declare const dev: (ref?: string | null) => string;
 /**

package/dist/lib/host.js

@@ -32,44 +32,59 @@ export const ENTRY = `${WORKSPACE}/?signin`;
  */
 export const START = `${WORKSPACE}/start`;
 /**
- * The web app, at `/` for a signed-in reader, in two modes. Chat is the default.
- * Dev is @hanzo/build's `<Builder>`, and what it shows rides ONE query, `?at=`,
- * in the builder's own grammar (`route` in @hanzo/build): '' New, `sess_<id>` a
- * run, `-/<screen>`, `-/settings[/<section>]`, `-/customize[/<tab>]`,
- * `-/plans`, `<slug>` a project. A query and not a path, because a static
- * export has no server to answer a path under `/`.
+ * The web app, for a signed-in reader, in two modes. Chat is the default, at
+ * `/`. Dev is @hanzo/build's `<Builder>` at `/dev`, and what it shows is the
+ * PATH under it, in the builder's own grammar (`route` in @hanzo/build): `/dev`
+ * New, `/dev/sess_<id>` a run, `/dev/<org>/<repo>` a project,
+ * `/dev/-/<screen>`, `/dev/-/settings[/<section>]`, `/dev/-/customize[/<tab>]`,
+ * `/dev/<slug>` a deployed site. The export holds one page for all of them,
+ * `/dev`, and the edge serves it for every path under it (hanzo.ai's
+ * lib/edge.ts `APP`).
  */
-export const AT = 'at';
-/** `/` in Dev at an app address; '' is Dev's New, `/?at=`. The key is the mode. */
-export const app = (path) => `/?${AT}=${path}`;
+export const DEV = '/dev';
+/** Dev at an app address; '' is Dev's New, `/dev` itself. */
+export const app = (path) => {
+    const p = path.replace(/^\/+|\/+$/g, '');
+    return p ? `${DEV}/${p}` : DEV;
+};
+/** The app address a pathname names under `/dev`, or null for a pathname that is not Dev's. */
+export const under = (pathname) => {
+    if (!pathname)
+        return null;
+    if (pathname === DEV || pathname === `${DEV}/`)
+        return '';
+    if (!pathname.startsWith(`${DEV}/`))
+        return null;
+    try {
+        return decodeURIComponent(pathname.slice(DEV.length + 1));
+    }
+    catch {
+        return '';
+    }
+};
 /**
  * Chat, the app's default mode: `/` is a new conversation and `?chat=<id>` one
- * of the reader's. So the address says which mode the app is in — `at` for Dev,
- * anything else Chat — and a reload keeps it.
+ * of the reader's. So the address says which mode the app is in — a path under
+ * `/dev` for Dev, anything else Chat — and a reload keeps it.
  */
 export const TALK = 'chat';
 /** `/` in Chat, on a conversation, or `/` itself for a new one. */
 export const talk = (id) => (id ? `/?${TALK}=${encodeURIComponent(id)}` : '/');
-/**
- * The door into the app: every "Try Hanzo Dev" link, the rail's Dev, the
- * console's "open in the builder", dev.hanzo.ai. It signs a stranger in and
- * forwards a member to Dev in the app, `/?at=` (app/(app)/dev/_door.tsx). It is
- * the app's page, so it is reached through `site()`: here on hanzo.ai, across
- * to hanzo.ai from hanzo.team.
- */
-const DEV = '/dev';
 /** A run, as the platform mints its id. */
 const SESSION = /^sess_[0-9a-f]{32}$/;
-/** A project, as the Sites plane slugs it. */
+/** A deployed site, as the Sites plane slugs it. */
 const SLUG = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/;
+/** A repository on the forge, `<org>/<name>`. */
+const REPO = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}\/[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
 /**
- * The door opened on one run or project: `?run=` or `?project=`, the query the
- * door turns into `?at=` — and the one the console and shared links already
- * carry. Only a value that is exactly a session id or a project slug is
- * carried; anything else opens /dev itself, so no caller can make this name
- * another address.
+ * Dev opened on one run, project or site, from anywhere: every "Try Hanzo Dev"
+ * link, a room's Dev, the console's "open in the builder". It signs a stranger
+ * in on the way (app/(app)/dev/_door.tsx), and is reached through `site()`:
+ * here on hanzo.ai, across to hanzo.ai from hanzo.team. Only a value that is
+ * exactly a session id, a repository or a site's slug is carried; anything else
+ * opens /dev itself, so no caller can make this name another address.
  */
-export const dev = (ref) => site(!ref ? DEV : SESSION.test(ref) ? `${DEV}?run=${ref}` : SLUG.test(ref) ? `${DEV}?project=${ref}` : DEV);
+export const dev = (ref) => site(ref && (SESSION.test(ref) || REPO.test(ref) || SLUG.test(ref)) ? app(ref) : DEV);
 /** The routes under app/(app) the apex keeps: the app — /chat, a chat shared by link, and /dev. */
 const KEPT = new Set(['/chat', '/chat/shared', '/dev']);
 /** Settings, and every page under it: the person's and the organization's, served wherever the app is. */

package/dist/lib/session.js

@@ -14,7 +14,7 @@
  * who was signed in, which reads as a permissions problem rather than a typo.
  * Two derivations of one name never agree; this is the one derivation.
  */
-import { AT, TALK } from './host.js';
+import { TALK } from './host.js';
 import { api } from './api.js';
 /** The SDK's own keys, `hanzo_iam_`-prefixed. The far side of a boundary. */
 const PREFIX = 'hanzo_iam_';
@@ -59,12 +59,13 @@ export function live() {
 /** The attribute on `<html>` that says `/` is showing the app, not the landing. */
 export const APP = 'data-app';
 /**
- * An address on `/` that names a place in the app — `?at=` in Dev, `?chat` in
- * Chat (lib/host.ts `AT`, `TALK`). The app is signed-in only, so a reader
- * nobody has signed in is sent to hanzo.id with it rather than shown the
- * landing, and it comes back with them.
+ * An address on `/` that names a place in the app — `?chat` in Chat
+ * (lib/host.ts `TALK`; Dev's places are paths under `/dev`, whose own page
+ * signs a stranger in). The app is signed-in only, so a reader nobody has
+ * signed in is sent to hanzo.id with it rather than shown the landing, and it
+ * comes back with them.
  */
-const PLACE = new RegExp(`[?&](?:${AT}|${TALK})(?:[=&]|$)`);
+const PLACE = new RegExp(`[?&]${TALK}(?:[=&]|$)`);
 /** Whether `search` names a place in the app. */
 export const place = (search) => PLACE.test(search);
 /**

package/dist/pane.d.ts

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

package/dist/pane.js

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

package/package.json

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