@hanzo/rooms 0.1.0

package/dist/RightPane.d.ts

@@ -0,0 +1,13 @@
+import type { ChatMessage } from '@hanzo/ai/react';
+/**
+ * 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
+ * honestly looks like.
+ */
+export declare function RightPane({ said, onClose, }: {
+    said?: ChatMessage[];
+    onClose?: () => void;
+}): import("react").JSX.Element;
+/** 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

@@ -0,0 +1,426 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The column beside a conversation: what it produced, what went into it, and a
+// browser for looking at any of it.
+//
+// WHAT THIS REPLACED. It was a channel tree — `remington`, `selectric`,
+// `zed-student-ambassador`, `londonmaxxing` — none of which are this product's
+// channels, hand-written into the markup beside a roster of eleven agents. It
+// drew a NAVIGATION surface in the one place the frame reserves for a room's
+// own contents, duplicating the rail on the opposite edge, and it did it in
+// sky blue against a design that has no hue in it. Nothing here reads a list
+// somebody typed.
+//
+// OUTPUTS AND SOURCES ARE DERIVED FROM THE TURNS, never from a second list kept
+// in step with them. `LLM.md` already states this rule for `Work` and it is the
+// same rule: the conversation is the record, so a fenced block in an answer IS
+// an output and an image in a question IS a source. There is nothing to sync,
+// nothing to invalidate, and no count that can disagree with the transcript —
+// and switching channels costs no request, because the turns are already in
+// hand. A conversation that has produced nothing says so.
+//
+// THE COLUMN IS STACKED, NOT SPLIT. The reference this follows puts a ~300px
+// summary beside a wide browser, which needs about 900px of column; the frame
+// gives this one 200–480 (`FLOOR`/`CEIL` in `Shell.tsx`), so side by side would
+// leave the browser about 80px wide. Stacked, both are usable at every width
+// the frame allows, and the pin earns its keep — hiding the summary gives the
+// browser the whole height rather than a slightly wider strip.
+//
+// The frame owns the column; this is one of the things a room puts in it. It
+// draws no column of its own — see `Beside` in `Shell.tsx`.
+import { useMemo, useState } from 'react';
+import { ExternalLink, FileCode, Image as ImageMark, Paperclip, PanelRightClose, Plus, RotateCw, X, } from 'lucide-react';
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Text, View, XStack, YStack, } from '@hanzo/ui';
+import { Card, Quiet, Row } from './card.js';
+import { useOpen } from './open.js';
+import { address, channel, hold, name as titleOf, openTab, pickTab, pin, shutTab, usePane, } from './pane.js';
+import { useProviders, useSkills } from './tools.js';
+import { activate, startDevice } from './connect.js';
+/** How many rows a card shows before it offers the rest. */
+const FEW = 5;
+/** Fenced blocks, as a model writes them. The info string is whatever followed
+ *  the ticks — a language, or a path when the answer named one. */
+const FENCE = /```([^\n`]*)\n([\s\S]*?)```/g;
+/** What a fence's info string means for the browser that will render it. */
+const MIME = {
+    html: 'text/html',
+    htm: 'text/html',
+    svg: 'image/svg+xml',
+    css: 'text/css',
+    csv: 'text/csv',
+    json: 'application/json',
+    md: 'text/markdown',
+    markdown: 'text/markdown',
+    txt: 'text/plain',
+};
+/** The extension, lowercased, or '' where a name has none. */
+const suffix = (s) => {
+    const dot = s.lastIndexOf('.');
+    return dot > 0 ? s.slice(dot + 1).toLowerCase() : '';
+};
+/**
+ * What a fence is called.
+ *
+ * AN INFO STRING IS A FILENAME OR A LANGUAGE, and telling them apart is the
+ * whole of it: a model writing to a file names it, and one showing a snippet
+ * names the language. A dot and no spaces is a name; anything else is a
+ * language, said as what it is rather than dressed up as a file that does not
+ * exist.
+ */
+const fenceName = (info, n) => {
+    const word = info.trim().split(/\s+/)[0] ?? '';
+    if (!word)
+        return `Block ${n}`;
+    if (word.includes('.') && suffix(word))
+        return word;
+    return `${word} block`;
+};
+/** The text of a turn, whichever shape the wire used. */
+const words = (m) => typeof m.content === 'string'
+    ? m.content
+    : Array.isArray(m.content)
+        ? m.content.map((p) => (p.type === 'text' ? p.text : '')).join('\n')
+        : '';
+/** Every image a turn carries, as addresses. */
+const pictures = (m) => Array.isArray(m.content)
+    ? m.content.flatMap((p) => (p.type === 'image_url' && p.image_url?.url ? [p.image_url.url] : []))
+    : [];
+/**
+ * What the assistant made in this conversation.
+ *
+ * Fenced blocks and pictures, in the order they were said. The id carries the
+ * turn's index so it survives a re-render without a counter of its own, and so
+ * two identical blocks in one conversation stay two rows.
+ */
+function outputs(said) {
+    const out = [];
+    said.forEach((m, turn) => {
+        if (m.role !== 'assistant')
+            return;
+        let n = 0;
+        for (const [, info, body] of words(m).matchAll(FENCE)) {
+            n += 1;
+            const named = fenceName(info, n);
+            out.push({
+                id: `o${turn}.${n}`,
+                name: named,
+                kind: 'code',
+                body,
+                mime: MIME[suffix(named) || info.trim().toLowerCase()] ?? 'text/plain',
+            });
+        }
+        pictures(m).forEach((href, i) => {
+            out.push({ id: `oi${turn}.${i}`, name: 'Generated image', kind: 'image', href });
+        });
+    });
+    return out;
+}
+/** What went into this conversation: pictures asked about, and files brought in. */
+function sources(said, held) {
+    const out = [];
+    said.forEach((m, turn) => {
+        if (m.role !== 'user')
+            return;
+        pictures(m).forEach((href, i) => {
+            out.push({ id: `s${turn}.${i}`, name: 'Attached image', kind: 'image', href });
+        });
+    });
+    for (const h of held) {
+        out.push({
+            id: h.id,
+            name: h.name,
+            kind: h.type.startsWith('image/') ? 'image' : 'file',
+            href: h.href,
+            mime: h.type,
+        });
+    }
+    return out;
+}
+const GLYPH = {
+    image: ImageMark,
+    code: FileCode,
+    file: Paperclip,
+};
+/**
+ * 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
+ * honestly looks like.
+ */
+export function RightPane({ said = [], onClose, }) {
+    const open = useOpen();
+    // ONE KEY, DERIVED, so the pane follows the conversation without anything
+    // having to tell it that the conversation changed.
+    const at = channel(open);
+    const pane = usePane(at);
+    return (_jsxs(YStack, { flex: 1, minH: 0, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: [pane.pinned ? _jsx(Summary, { at: at, said: said, held: pane.held }) : null, _jsx(Browser, { at: at, pane: pane, onClose: onClose })] }));
+}
+/** The two cards: out of the conversation, and into it. */
+function Summary({ at, said, held }) {
+    // Recomputed only when the turns or the held files change — a channel switch
+    // remounts with different turns and costs one pass over them, never a read.
+    const made = useMemo(() => outputs(said), [said]);
+    const took = useMemo(() => sources(said, held), [said, held]);
+    return (_jsxs(YStack, { shrink: 0, 
+        // A CAP AND NOT A HEIGHT. The summary is as tall as it needs to be until
+        // it would take the browser's half, and scrolls after that — so two rows
+        // do not reserve a screen and thirty do not push the browser off the
+        // bottom of the column.
+        maxH: "45%", overflow: "scroll", p: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Marks, { at: at, kind: "outputs", title: "Outputs", icon: _jsx(FileCode, { size: 16, "aria-hidden": true }), marks: made, children: "This conversation has produced nothing yet." }), _jsx(Marks, { at: at, kind: "sources", title: "Sources", icon: _jsx(Paperclip, { size: 16, "aria-hidden": true }), marks: took, children: "Nothing has been put into this conversation yet." })] }));
+}
+/**
+ * One card of things, the first {@link FEW} of them, and the honest number of
+ * the rest.
+ *
+ * THE COUNT IS THE LIST'S OWN LENGTH. A row reading "Show 30 more" that is not
+ * thirty is the kind of furniture this repo has had to delete twice.
+ */
+function Marks({ at, kind, title, icon, marks, children, }) {
+    const [all, setAll] = useState(false);
+    const shown = all ? marks : marks.slice(0, FEW);
+    const rest = marks.length - shown.length;
+    return (_jsxs(Card, { kind: kind, icon: icon, title: title, action: _jsx(Add, { at: at }), children: [marks.length === 0 ? _jsx(Quiet, { children: children }) : null, shown.map((m) => {
+                const Mark = GLYPH[m.kind];
+                return (_jsx(Row, { icon: _jsx(Mark, { size: 16, "aria-hidden": true }), onPress: () => look(at, m), children: m.name }, m.id));
+            }), rest > 0 ? (_jsxs(Row, { onPress: () => setAll(true), children: ["Show ", rest, " more"] })) : all && marks.length > FEW ? (_jsx(Row, { onPress: () => setAll(false), children: "Show fewer" })) : null] }));
+}
+/**
+ * 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.
+ */
+function look(at, m) {
+    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);
+}
+/**
+ * A menu row's words.
+ *
+ * gui RENDERS NO BARE STRING. Every view is a react-native-web `View`, which
+ * refuses a raw text child — `DropdownMenuItem` happens to wrap one for you and
+ * `DropdownMenuSubTrigger` does not, so a label written the obvious way threw
+ * "Unexpected text node" and took the whole menu down with it. One wrapper for
+ * every row means the difference between those two components stops mattering.
+ */
+const Word = ({ children }) => (_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: children }));
+/** A menu row that is a statement rather than a control — what is being read,
+ *  what was refused, which code to type. Wrapped for the same reason. */
+const Note = ({ children }) => (_jsx(DropdownMenuLabel, { children: _jsx(Text, { fontSize: "$2", color: "$soft", children: children }) }));
+/**
+ * The `+`: everything a reader can bring into this conversation.
+ *
+ * EVERY ROW DOES SOMETHING. Files come off the reader's own disk. Skills are
+ * `GET /v1/tools/skills` and toggling one is `PUT /v1/tools/activation`, which
+ * the schema calls "the ONE write path that turns skills, plugins and
+ * connectors into callable tools". Services are
+ * `GET /v1/integrations/connectors/providers` and connecting one is the device
+ * flow those provider cards declare.
+ *
+ * There is no "Plugins" row. `/v1/tools/plugins` reads like the next one and is
+ * an operator's inventory of what this deployment booted with — see the note in
+ * `tools.ts`. A row offering a reader subsystems they cannot switch is a row
+ * that does nothing.
+ *
+ * ONE PANEL, NOT FLYOUTS, and that is a fact about WHERE this menu is rather
+ * than a preference. The reference has "Use plugins ▸" opening a submenu, which
+ * works when the menu has screen to its side; this one hangs off a `+` at the
+ * right edge of a column that is itself at the right edge of the window.
+ * Measured at 1440: the sub-panel opened at x=1414 and is 190 wide, so 184px of
+ * it — every row in it — was off the screen, and `Menu.SubContent` publishes no
+ * placement to flip it with. Sections in one panel cannot fall off anything,
+ * and they put a skill one press away instead of two.
+ */
+function Add({ at }) {
+    return (_jsxs(DropdownMenu, { placement: "bottom-end", maxHeight: 420, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Box, { render: "button", "aria-label": "Add to this conversation", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(Plus, { size: 16, "aria-hidden": true }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => take(at), children: _jsx(Word, { children: "Attach files" }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Skills, {}), _jsx(DropdownMenuSeparator, {}), _jsx(Services, {})] })] }));
+}
+/**
+ * Asks for files and takes what is given.
+ *
+ * The picker is the browser's, minted and dropped per press rather than kept as
+ * a hidden input in the markup: a menu row is not a form control, and an
+ * `<input type=file>` parked in the tree is one more thing for a screen reader
+ * to walk past.
+ */
+function take(at) {
+    if (typeof document === 'undefined')
+        return;
+    const ask = document.createElement('input');
+    ask.type = 'file';
+    ask.multiple = true;
+    ask.onchange = () => hold(at, Array.from(ask.files ?? []));
+    ask.click();
+}
+/**
+ * What this org's agents can reach for, as a section of this menu.
+ *
+ * A CHECKBOX ROW AND NOT A TICK IN A LABEL. `DropdownMenuCheckboxItem` is
+ * `role="menuitemcheckbox"` with `aria-checked`, so a screen reader says
+ * "checked" where a glyph in the text says nothing at all — and it draws the
+ * mark in gui's own indicator well, which a hand-rolled column beside the label
+ * cannot line up with. Activation is a two-state fact; this is the component
+ * for one.
+ */
+function Skills() {
+    const { rows, trouble } = useSkills();
+    const [busy, setBusy] = useState(null);
+    const [on, setOn] = useState(null);
+    if (trouble)
+        return _jsx(Note, { children: trouble });
+    if (rows === null)
+        return _jsx(Note, { children: "Reading skills." });
+    if (rows.length === 0)
+        return _jsx(Note, { children: "No skills on this account yet." });
+    // The server's set once it has answered, and the list's own flag until then.
+    const isOn = (n, was) => (on ? on.has(n) : was);
+    return (_jsxs(_Fragment, { children: [_jsx(Note, { children: "Skills" }), rows.map((s) => {
+                const lit = isOn(s.name, s.activated);
+                return (_jsx(DropdownMenuCheckboxItem, { checked: lit, 
+                    // HELD OPEN, because switching two skills on is one errand and a
+                    // menu that shuts on the first makes it two.
+                    onSelect: (e) => e?.preventDefault(), onCheckedChange: () => {
+                        setBusy(s.name);
+                        // THE ANSWER IS THE WHOLE SET, so what comes back replaces what
+                        // we hold rather than flipping our own flag: a refusal, a clamp,
+                        // or another tab's change is visible in the reply and invisible
+                        // in an optimistic toggle.
+                        void activate(s.name, !lit)
+                            .then((enabled) => setOn(new Set(enabled)))
+                            .catch(() => { })
+                            .finally(() => setBusy(null));
+                    }, children: _jsx(Word, { children: busy === s.name ? `${s.name}…` : s.name }) }, s.name));
+            })] }));
+}
+/**
+ * What this account could connect.
+ *
+ * NARROWED TO THE ONE INTAKE THIS PANE CAN FINISH. A provider card declares its
+ * methods — `device`, `oauth`, `token` — and the device flow is the only one
+ * that completes without a redirect back into a page this column does not own.
+ * Offering the others here would be offering a press that goes nowhere; they
+ * are connected from the Directory, which is built for it.
+ */
+function Services() {
+    const { rows, trouble } = useProviders();
+    const [step, setStep] = useState(null);
+    if (trouble)
+        return _jsx(Note, { children: trouble });
+    if (rows === null)
+        return _jsx(Note, { children: "Reading." });
+    const can = rows.filter((p) => p.methods.includes('device'));
+    if (can.length === 0)
+        return _jsx(Note, { children: "Nothing to connect from here yet." });
+    return (_jsxs(_Fragment, { children: [_jsx(Note, { children: step ?? 'Connect' }), can.map((p) => (_jsx(DropdownMenuItem, { onSelect: (e) => e?.preventDefault(), onClick: () => {
+                    setStep(`Starting ${p.name}…`);
+                    void startDevice(p.id)
+                        .then((begun) => {
+                        // The code is the reader's to type at the provider's page, so
+                        // it is said here and the page is opened for them.
+                        setStep(`Enter ${begun.userCode} at ${titleOf(begun.verifyUrl)}`);
+                        window.open(begun.verifyUrl, '_blank', 'noopener,noreferrer');
+                    })
+                        .catch((e) => setStep(String(e?.message ?? 'Could not start')));
+                }, children: _jsx(Word, { children: p.name }) }, p.id)))] }));
+}
+/** The tab strip, the address, and whatever the chosen tab is showing. */
+function Browser({ at, pane, onClose, }) {
+    const leaf = pane.tabs.find((t) => t.id === pane.at) ?? null;
+    // Bumping this remounts the frame, which is the only way to reload a document
+    // on an origin we cannot script into.
+    const [again, reload] = useState(0);
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack
+            // 44 IS THE FLOOR A THUMB NEEDS, and the strip scrolls rather than
+            // squeezing its tabs under it — the rule `tabs.tsx` exists to hold.
+            , { 
+                // 44 IS THE FLOOR A THUMB NEEDS, and the strip scrolls rather than
+                // squeezing its tabs under it — the rule `tabs.tsx` exists to hold.
+                minH: 44, shrink: 0, items: "center", gap: "$1", px: "$2", overflow: "scroll", borderBottomWidth: 1, borderColor: "$borderColor", children: [pane.tabs.map((t) => (_jsx(Sheet, { at: at, leaf: t, on: t.id === pane.at }, t.id))), _jsx(Box, { render: "button", onClick: () => openTab(at, 'https://hanzo.ai'), "aria-label": "New tab", p: "$1.5", rounded: "$2", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(Plus, { size: 16, "aria-hidden": true }) }), _jsx(Box, { flex: 1, minW: "$1" }), leaf ? (_jsxs(_Fragment, { children: [_jsx(Box, { render: "button", onClick: () => reload((n) => n + 1), "aria-label": "Reload this tab", p: "$1.5", rounded: "$2", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(RotateCw, { size: 16, "aria-hidden": true }) }), _jsx(Box, { render: "button", onClick: () => window.open(leaf.url, '_blank', 'noopener,noreferrer'), "aria-label": "Open this tab in a new window", p: "$1.5", rounded: "$2", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16, "aria-hidden": true }) })] })) : null, onClose ? (_jsx(Box, { render: "button", onClick: onClose, "aria-label": "Hide side panel", p: "$1.5", rounded: "$2", shrink: 0, hoverStyle: { bg: '$hover' }, children: _jsx(PanelRightClose, { size: 16, "aria-hidden": true }) })) : null] }), leaf ? _jsx(Where, { at: at, leaf: leaf }) : null, _jsx(YStack, { flex: 1, minH: 0, children: leaf ? (_jsx(Preview, { leaf: leaf, held: pane.held }, `${leaf.id}.${again}`)) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(Quiet, { children: "Nothing open here." }), _jsx(Quiet, { children: "Press an output or a source to look at it, or open a tab." })] })) })] }));
+}
+/** One tab: the thing you press, and the cross that shuts it. */
+function Sheet({ at, leaf, on }) {
+    return (_jsxs(XStack, { items: "center", gap: "$1", pl: "$2", pr: "$1", minH: 32, maxW: 140, shrink: 0, rounded: "$2", 
+        // A CHOSEN TAB IS THE ONLY ONE WITH AN OUTLINE. Everything else in the
+        // strip is a plain control that answers to hover, which is the rule the
+        // rest of this pane follows.
+        borderWidth: 1, borderColor: on ? '$borderColor' : 'transparent', bg: on ? '$raised' : 'transparent', hoverStyle: { bg: on ? '$raised' : '$hover' }, children: [_jsx(Box, { render: "button", onClick: () => pickTab(at, leaf.id), "aria-current": on, flex: 1, minW: 0, children: _jsx(Text, { fontSize: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: leaf.title }) }), _jsx(Box, { render: "button", onClick: () => shutTab(at, leaf.id), "aria-label": `Close ${leaf.title}`, p: "$1", rounded: "$1", hoverStyle: { bg: '$edge' }, children: _jsx(X, { size: 16, "aria-hidden": true }) })] }));
+}
+/**
+ * Where the open tab is, and how to go somewhere else.
+ *
+ * A PATH FOR A FILE AND A FIELD FOR A PAGE, because they are different
+ * questions: a blob has no address a reader can retype, so offering one is
+ * offering a control that cannot work. The field is the one place in this pane
+ * with an outline, which is what the house rule reserves an outline for.
+ */
+function Where({ at, leaf }) {
+    const local = leaf.url.startsWith('blob:');
+    const [typed, setTyped] = useState(leaf.url);
+    if (local) {
+        return (_jsx(XStack, { px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: leaf.title }) }));
+    }
+    return (_jsx(XStack, { items: "center", px: "$2", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", children: _jsx(XStack, { flex: 1, minW: 0, items: "center", px: "$2", minH: 28, rounded: "$2", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: _jsx(Text, { render: _jsx("input", { 
+                    // KEYED BY THE TAB at the call site above, so switching tabs starts
+                    // this field at the new tab's address rather than carrying the old
+                    // one's half-typed text across.
+                    defaultValue: leaf.url, onChange: (e) => setTyped(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            openTab(at, address(typed), titleOf(address(typed)));
+                    }, "aria-label": "Address", spellCheck: false }), width: "100%", borderWidth: 0, outlineStyle: "none", bg: "transparent", color: "var(--foreground)", fontSize: "$2" }) }) }));
+}
+/**
+ * What a tab is showing, or why it is not.
+ *
+ * A BROWSER CANNOT SHOW EVERY FILE AND SAYING SO IS THE FEATURE. An archive, a
+ * font, a binary — a frame pointed at one either downloads it or draws nothing,
+ * and drawing nothing is indistinguishable from a broken pane. The type comes
+ * off the held file where there is one, because a blob address carries no
+ * extension to guess from.
+ */
+function Preview({ leaf, held }) {
+    const mine = held.find((h) => h.href === leaf.url);
+    const type = mine?.type ?? '';
+    const ext = suffix(mine?.name ?? leaf.title);
+    if (type.startsWith('image/') || ['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg'].includes(ext)) {
+        return (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflow: "scroll", children: _jsx(View, { render: _jsx("img", { src: leaf.url, alt: leaf.title }), maxW: "100%", maxH: "100%", objectFit: "contain" }) }));
+    }
+    // THE LIST IS OF WHAT A FRAME CAN RENDER, not of what a file might be. A type
+    // absent from it is unsupported, which is the honest default: guessing that
+    // an unknown type will render is how a reader gets a blank rectangle.
+    const shows = !mine ||
+        type.startsWith('text/') ||
+        type === 'application/pdf' ||
+        type === 'application/json' ||
+        ['html', 'htm', 'txt', 'md', 'json', 'csv', 'pdf', 'css', 'js', 'ts'].includes(ext);
+    if (!shows) {
+        return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsxs(Quiet, { children: [(ext || type || 'This').toUpperCase(), " previews aren\u2019t supported yet."] }), _jsx(Quiet, { children: "Open this file in another app to view it." })] }));
+    }
+    return (_jsx(View, { render: _jsx("iframe", { src: leaf.url, title: leaf.title, 
+            // TWO SANDBOXES, BECAUSE THERE ARE TWO KINDS OF DOCUMENT HERE AND ONE
+            // RULE WOULD BE WRONG FOR ONE OF THEM.
+            //
+            // A `blob:` address INHERITS THE ORIGIN OF THE PAGE THAT MINTED IT — this
+            // one. So a model's fenced block granted `allow-same-origin` would run as
+            // us, with our `localStorage`, which is where the IAM access token lives
+            // (`hanzo_iam_access_token`). An answer that wrote a script tag would be
+            // reading the reader's session. It gets `allow-scripts` so a generated
+            // page still lays out and runs, and never the pair.
+            //
+            // A remote page is the opposite case: the iframe takes the REMOTE
+            // origin, so `allow-same-origin` grants it nothing of ours and withholding
+            // it breaks the site — no cookies, no storage, no fonts on many hosts.
+            sandbox: leaf.url.startsWith('blob:')
+                ? 'allow-scripts allow-popups allow-forms'
+                : 'allow-same-origin allow-scripts allow-popups allow-forms' }), width: "100%", height: "100%", borderWidth: 0, bg: "var(--background)" }));
+}
+/** Shows or hides the summary above this conversation's browser. Exported for
+ *  the conversation header, which is where the control belongs. */
+export function usePinned() {
+    const open = useOpen();
+    const at = channel(open);
+    const pane = usePane(at);
+    return [pane.pinned, () => pin(at, !pane.pinned)];
+}

package/dist/Room.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { type Mode } from './Shell.js';
+export declare function Room({ mode, front, children, }: {
+    mode: Mode;
+    /** Home at `/` on a workspace rooted there: a stranger meets the host's Landing (`Orgs`). */
+    front?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/Room.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Workspace } from './Shell.js';
+import { Orgs } from './Orgs.js';
+import { rememberDestination } from './lib/destination.js';
+import { away } from './lib/host.js';
+import { useHost } from './lib/hostname.js';
+import { link } from './lib/tags.js';
+import { useRooms } from './host.js';
+export function Room({ mode, front = false, children, }) {
+    const { router } = useRooms();
+    // A sign-in leaves for the issuer and returns to a FIXED callback that knows
+    // nothing of the room the reader was in. So the room is written down here,
+    // the one place the app meets the router, and the trip `Orgs` starts for a
+    // signed-out reader returns HERE — address, `?q=` and all — rather than to
+    // the host's landing.
+    useEffect(() => {
+        rememberDestination();
+    }, []);
+    // THE APEX KEEPS THE APP AND THE WORKSPACE KEEPS ITS ROOMS. A room asked for
+    // on hanzo.ai is the same path and query on hanzo.team, and the location is
+    // replaced with it once React owns the page: the export is static, so nothing
+    // earlier knows the host. The room draws nothing while it leaves, so `Orgs`
+    // never starts a sign-in on the host being left.
+    const host = useHost();
+    const here = host ? window.location : null;
+    const to = here ? away(host, `${here.pathname}${here.search}${here.hash}`) : null;
+    useEffect(() => {
+        if (to)
+            window.location.replace(link(to));
+    }, [to]);
+    if (to)
+        return null;
+    // A session comes first, then the organization: nothing of the workspace is
+    // drawn until the reader has signed in at hanzo.id, belongs to an
+    // organization that is paid for, and has picked the one they are working in.
+    // Going to a room from the apex is going to hanzo.team, in this tab.
+    return (_jsx(Orgs, { front: front, children: _jsx(Workspace, { mode: mode, navigate: (route) => {
+                // A page of another origin — hanzo.ai's from hanzo.team — is a
+                // document load, not a client route the host's router can take.
+                if (/^https?:\/\//.test(route))
+                    return window.location.assign(link(route));
+                const to = away(window.location.hostname, route);
+                if (to)
+                    window.location.assign(link(to));
+                else
+                    router.push(route);
+            }, back: () => router.back(), forward: () => router.forward(), children: children }) }));
+}

package/dist/Scene.d.ts

@@ -0,0 +1,12 @@
+export declare function Scene({ step, onNext, onSkip }: {
+    step: string;
+    onNext: () => void;
+    onSkip: () => void;
+}): import("react").JSX.Element;
+/** A stop's one primary control, the scene's and the card's. It takes focus when the stop opens, which is what
+ *  `autoFocus` did on the element it replaced; a stop that only relabels it (Next to Done) keeps the focus it has.
+ */
+export declare function Next({ onPress, label }: {
+    onPress: () => void;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/Scene.js

@@ -0,0 +1,105 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The scene: one chat, the team brought in, and the call it turns into — played
+// rather than read. It is drawn on a stage of its own, so nothing typed here
+// reaches the composer, and nothing said here is sent or saved.
+import { useEffect, useRef, useState } from 'react';
+import { Text, View, XStack, YStack } from '@hanzo/gui';
+import { Button } from '@hanzo/ui';
+import { CAST as CREW } from './cast.js';
+const CAST = {
+    you: { name: 'You', part: 'Owner', initial: 'Y', ground: 'var(--neutral-700)' },
+    des: { name: 'Des', part: 'Designer', face: '/agents/des.png', initial: 'D', ground: CREW.des.ground },
+    vi: { name: 'Vi', part: 'Visionary', face: '/agents/vi.png', initial: 'V', ground: CREW.vi.ground },
+    alex: { name: 'Alex', part: 'Teammate', initial: 'A', ground: 'var(--neutral-600)' },
+};
+/** The tour's own prompt: typed for show, never sent. */
+const SAMPLE = 'Help me plan the next version of our app';
+const ADDED = ['des', 'vi', 'alex'];
+const CHAT = [
+    { who: 'you', text: 'We need to create a more immersive experience.' },
+    { who: 'vi', text: 'Should we create UI for wearable glasses?' },
+    { who: 'des', text: 'I love this idea. We could explore the best settings in Roblox and other top games and create some of the best ideas!' },
+    { who: 'alex', text: "What a great idea, let's jump on a call now so we can plan and create deliverables and due dates." },
+];
+const CALL = [
+    { who: 'alex', text: "Let's plan it. Vi, you own the concept. Des, the first mockups. I'll set the deliverables and due dates." },
+    { who: 'vi', text: 'First deliverable: a glasses-ready layout, due Friday.' },
+    { who: 'des', text: "I'll pull references from the top Roblox worlds and draft three directions, due Wednesday." },
+    { who: 'you', text: 'Perfect. Save the transcript and put the deliverables on the Board.' },
+];
+// The beats, in order: the prompt, three people added, four lines of chat, the
+// move to a call, four lines said on it, and the record of it.
+const PROMPT = 0;
+const ADD = 1; // .. 3
+const TALK = 4; // .. 7
+const RING = 8;
+const SAY = 9; // .. 12
+const SAVED = 13;
+const MS = 26;
+/** Text revealed a character at a time; says when it is all there. */
+function Typed({ text, go, onDone }) {
+    const [n, setN] = useState(go ? 0 : text.length);
+    useEffect(() => {
+        if (!go)
+            return;
+        if (n >= text.length) {
+            const t = window.setTimeout(onDone, 520);
+            return () => window.clearTimeout(t);
+        }
+        const t = window.setTimeout(() => setN((k) => k + 1), MS);
+        return () => window.clearTimeout(t);
+    }, [go, n, text, onDone]);
+    return _jsx(_Fragment, { children: text.slice(0, n) });
+}
+function Face({ who, size = 28 }) {
+    const c = CAST[who];
+    return (_jsx(View, { render: "span", "aria-hidden": true, width: size, height: size, rounded: 9999, bg: c.ground, display: "inline-flex", items: "center", justify: "center", overflow: "hidden", shrink: 0, children: c.face ? (_jsx("img", { src: c.face, alt: "", width: size, height: size })) : (_jsx(Text, { fontFamily: "$body", fontSize: size * 0.42, fontWeight: "600", color: "var(--pure-white)", children: c.initial })) }));
+}
+const ink = '$ink';
+const dim = '$soft';
+const line = '$borderColor';
+// The stage is portalled to <body> by the Guide, outside every font scope gui
+// writes, so a `$N` size or leading resolves only on a Text that names `$body`
+// itself — which is why every Text below does.
+/** A line of the scene's own type: the base rung on its own leading. */
+const SAID = { fontSize: '$3', lineHeight: '$3' };
+export function Scene({ step, onNext, onSkip }) {
+    const [beat, setBeat] = useState(PROMPT);
+    const [typed, setTyped] = useState(0);
+    const advance = () => setBeat((b) => Math.min(b + 1, SAVED));
+    const settle = () => setTyped((k) => k + 1);
+    // Beats that type advance themselves when the typing is done; the ones that
+    // only appear advance on a short pause.
+    useEffect(() => {
+        const typing = beat === PROMPT || (beat >= TALK && beat < RING) || (beat >= SAY && beat < SAVED);
+        if (typing)
+            return;
+        if (beat === SAVED)
+            return;
+        const t = window.setTimeout(advance, beat === RING ? 1400 : 900);
+        return () => window.clearTimeout(t);
+    }, [beat]);
+    useEffect(() => {
+        if (typed === 0)
+            return;
+        advance();
+    }, [typed]);
+    const added = ADDED.slice(0, Math.max(0, Math.min(ADDED.length, beat - ADD + 1)));
+    const said = CHAT.slice(0, Math.max(0, Math.min(CHAT.length, beat - TALK + 1)));
+    const onCall = beat >= RING;
+    const spoken = CALL.slice(0, Math.max(0, Math.min(CALL.length, beat - SAY + 1)));
+    const speaker = onCall && beat >= SAY && beat < SAVED ? CALL[beat - SAY].who : null;
+    return (_jsxs(YStack, { role: "group", "aria-label": "A chat that becomes a call", position: "fixed", l: "50%", t: "50%", x: "-50%", y: "-50%", width: "min(720px, calc(100vw - 32px))", maxH: "calc(100vh - 32px)", overflowY: "auto", z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 14, boxShadow: "var(--shadow-floating)", p: 18, children: [_jsxs(XStack, { items: "center", gap: 10, mb: 12, children: [_jsx(Text, { fontFamily: "$body", fontSize: 10, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", children: step }), _jsx(View, { flex: 1, height: 1, bg: line }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: dim, children: onCall ? 'On a call' : 'In chat' })] }), _jsx(Text, { fontFamily: "$body", render: "h2", mb: 4, fontSize: "$6", fontWeight: "600", lineHeight: "$4", color: ink, children: "More than chat" }), _jsx(Text, { fontFamily: "$body", render: "p", mb: 14, ...SAID, color: "$quiet", children: "Start with a bot, bring in the team, and take it to a call. Nothing here is sent or saved." }), !onCall ? (_jsxs(YStack, { borderWidth: 1, borderColor: line, rounded: 12, overflow: "hidden", children: [_jsxs(XStack, { items: "center", gap: 10, px: 12, py: 10, borderBottomWidth: 1, borderColor: line, children: [_jsx(Face, { who: "des" }), _jsxs(YStack, { children: [_jsx(Text, { fontFamily: "$body", fontSize: "$3", fontWeight: "600", lineHeight: "$1", color: ink, children: "des" }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", lineHeight: "$1", color: dim, children: "Designer \u00B7 bot" })] }), _jsx(View, { flex: 1 }), _jsxs(XStack, { gap: 6, flexWrap: "wrap", justify: "flex-end", children: [added.map((w) => (_jsxs(XStack, { items: "center", gap: 6, pl: 4, pr: 8, py: 3, rounded: 999, borderWidth: 1, borderColor: line, children: [_jsx(Face, { who: w, size: 18 }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: ink, children: CAST[w].name }), _jsxs(Text, { fontFamily: "$body", fontSize: "$2", color: dim, children: ["\u00B7 ", CAST[w].part] })] }, w))), beat >= ADD && beat < TALK ? (_jsx(Text, { fontFamily: "$body", px: 8, py: 3, rounded: 999, borderWidth: 1, borderStyle: "dashed", borderColor: line, fontSize: "$2", color: dim, children: "+ Add to chat" })) : null] })] }), _jsxs(View, { display: "grid", p: 12, gap: 10, minH: 168, children: [said.map((m, k) => (_jsxs(XStack, { gap: 10, items: "flex-start", flexDirection: m.who === 'you' ? 'row-reverse' : 'row', children: [_jsx(Face, { who: m.who }), _jsxs(YStack, { maxW: "78%", px: 12, py: 8, rounded: 12, bg: m.who === 'you' ? 'var(--foreground)' : '$hover', children: [m.who !== 'you' ? (_jsx(Text, { fontFamily: "$body", fontSize: "$1", color: dim, mb: 2, children: CAST[m.who].name })) : null, _jsx(Text, { fontFamily: "$body", ...SAID, color: m.who === 'you' ? 'var(--background)' : ink, children: _jsx(Typed, { text: m.text, go: k === said.length - 1 && beat < RING, onDone: settle }) })] })] }, k))), said.length === 0 ? (_jsx(Text, { fontFamily: "$body", fontSize: "$2", color: dim, text: "center", pt: 48, children: beat < ADD ? 'A chat with des, your designer bot.' : 'Bringing the team in…' })) : null] }), _jsxs(Text, { fontFamily: "$body", m: 12, px: 12, py: 10, rounded: 10, borderWidth: 1, borderColor: line, ...SAID, color: beat === PROMPT ? ink : dim, minH: 40, children: [beat === PROMPT ? _jsx(Typed, { text: SAMPLE, go: true, onDone: settle }) : beat < TALK ? SAMPLE : 'Ask anything', _jsx(View, { render: "span", "aria-hidden": true, display: beat === PROMPT ? 'inline-flex' : 'none', width: 1, height: 14, bg: ink, ml: 1, y: 2 })] })] })) : (_jsxs(YStack, { borderWidth: 1, borderColor: line, rounded: 12, overflow: "hidden", children: [_jsx(View, { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, p: 12, borderBottomWidth: 1, borderColor: line, children: ['you', 'des', 'vi', 'alex'].map((w) => (_jsxs(YStack, { items: "center", gap: 6, px: 6, py: 12, rounded: 10, bg: "$hover", outlineWidth: 2, outlineStyle: "solid", outlineColor: speaker === w ? ink : 'transparent', transition: "200ms", children: [_jsx(Face, { who: w, size: 40 }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: ink, children: CAST[w].name })] }, w))) }), _jsxs(YStack, { p: 12, minH: 168, children: [_jsx(Text, { fontFamily: "$body", fontSize: "$1", letterSpacing: 1.1, textTransform: "uppercase", color: dim, mb: 8, children: beat === RING ? 'Calling…' : 'Live transcript' }), _jsx(View, { display: "grid", gap: 8, children: spoken.map((m, k) => (_jsxs(XStack, { gap: 8, children: [_jsx(Text, { fontFamily: "$body", ...SAID, color: dim, shrink: 0, width: 44, children: CAST[m.who].name }), _jsx(Text, { fontFamily: "$body", ...SAID, color: ink, children: _jsx(Typed, { text: m.text, go: k === spoken.length - 1 && beat < SAVED, onDone: settle }) })] }, k))) }), beat === SAVED ? (_jsx(Text, { fontFamily: "$body", mt: 14, px: 10, py: 8, rounded: 8, borderWidth: 1, borderColor: line, fontSize: "$2", color: ink, children: "\u2713 Transcript saved \u00B7 Deliverables and due dates on the Board" })) : null] })] })), _jsxs(XStack, { items: "center", gap: 8, mt: 14, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: onSkip, children: "Skip" }), _jsx(View, { flex: 1 }), beat === SAVED ? (_jsx(Button, { size: "sm", onClick: () => {
+                            setTyped(0);
+                            setBeat(PROMPT);
+                        }, children: "Replay" })) : null, _jsx(Next, { onPress: onNext })] })] }));
+}
+/** A stop's one primary control, the scene's and the card's. It takes focus when the stop opens, which is what
+ *  `autoFocus` did on the element it replaced; a stop that only relabels it (Next to Done) keeps the focus it has.
+ */
+export function Next({ onPress, label = 'Next' }) {
+    const ref = useRef(null);
+    useEffect(() => ref.current?.focus(), []);
+    return (_jsx(Button, { ref: ref, variant: "primary", size: "sm", onClick: onPress, children: label }));
+}