@hanzo/rooms 0.1.63 → 0.1.65

package/dist/App.js

@@ -26,7 +26,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // THE ORGANIZATION COMES FIRST (Orgs.tsx), and the app mounts it itself, so no
 // host draws the app without it: a reader with none makes one and a reader
 // with several picks one. No plan is asked for here: that is the workspace's,
-// behind its own front door.
+// on its own host (hanzo.team) and behind its front door.
 //
 // THE SIDEBAR'S TOGGLE IS AT THE WINDOW'S TOP-LEFT. In a browser tab it leads
 // the rail. A host that is a window of its own (`bar`) has no browser around

package/dist/Chat.js

@@ -58,10 +58,10 @@ import { FileText, Image as ImageMark, 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, Summary, look, useSites } from "./RightPane.js";
+import { SEED, look, useSections, useSites } from "./RightPane.js";
 import { Share } from "./Share.js";
 import { ConversationMenu, ThreadMore, useThreadList } from "./thread.js";
-import { artifacts, lead, nameOf, PAGE, Panel, PanelToggle, prompt, renders, Reply, Served, useDeck, useKey, useMind, usePanel, frames, name as tabName, } from "@hanzo/build";
+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';
 import { enter, LOGIN } from './lib/destination.js';
@@ -1222,6 +1222,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // Dev place goes from a host without it (hanzo.team).
     const pathed = useRooms().path !== null;
     const create = () => (pathed ? go(app("")) : window.location.assign(dev()));
+    const sections = useSections({ at, said, held: files, deck, onCreate: create });
     /** The tabs' browser, as this conversation offers it: the org's sites to start from, and a page asked about, captured or opened in Dev. */
     const browsing = {
         suggested: sites,
@@ -1274,7 +1275,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             e.preventDefault();
             // A dropped folder arrives as entries; each file under it goes up with its path.
             void dropped(e.dataTransfer).then((list) => hold(at, list, via));
-        }, children: [dragging ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: 10, items: "center", justify: "center", bg: "var(--surface-scrim)", borderWidth: 2, borderStyle: "dashed", borderColor: "$borderColor", rounded: "var(--pane-round)", pointerEvents: "none", children: _jsxs(XStack, { items: "center", gap: "$2", px: "$4", py: "$2.5", rounded: "$10", bg: "$background", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Paperclip, { size: 15, "aria-hidden": true }), _jsx(Text, { fontSize: "$4", color: "$ink", children: "Drop files to attach" })] }) })) : null, _jsxs(XStack, { "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, { at: at, said: said, held: files, deck: deck, onOpen: () => setPanel(true), onCreate: create }), _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: [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, 
                 // 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

package/dist/Orgs.js

@@ -8,13 +8,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // request under it then carries that organization (lib/auth/session.ts
 // `scope`, hooks/useAi.ts).
 //
-// NO PLAN STANDS IN FRONT OF CHAT OR DEV. Off the front door every
+// NO PLAN STANDS IN FRONT OF CHAT OR DEV. Off the workspace every
 // organization opens, whatever its plan: what it may spend is the API's to
 // meter, per plan, on every call. The per-seat Team plan is the workspace's to
-// ask for, behind its front door, and nowhere else. It used to be asked of
-// every organization that was not personal and not on a live plan, on every
-// host, which put each member of a team on Free, and every account filed in the
-// shared sign-up organization, in front of a wall at hanzo.ai/chat. Plans are
+// ask for, on its host (hanzo.team) and behind its front door, and nowhere
+// else. It used to be asked of every organization that was not personal and
+// not on a live plan, on every host, which put each member of a team on Free,
+// and every account filed in the shared sign-up organization, in front of a
+// wall at hanzo.ai/chat. Plans are
 // the catalog's, read live and seeded from @hanzo/plans for first paint.
 // Checkout is hanzo.ai/pay in this tab; it returns here, and the tier is read
 // again on return.
@@ -80,8 +81,11 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
     // The team being set up in this page. Once its name is taken the setup owns
     // the screen until checkout, whatever `Orgs` reads of the new organization.
     const [founding, setFounding] = useState(null);
-    // The plan is read behind the front door only: nowhere else does it decide anything.
-    const { tier, wrong, reload } = useTier(Boolean(door && isAuthenticated && current), current);
+    // The workspace asks for the plan, on its host and behind its front door, and
+    // only there is it read: nowhere else does it decide anything.
+    const onTeam = workspace(useHost());
+    const asks = door || onTeam;
+    const { tier, wrong, reload } = useTier(Boolean(asks && isAuthenticated && current), current);
     // A plan is live when billing READ one for this organization and it is not the free rung.
     const live = Boolean(tier?.tier && tier.tier.name !== FREE_TIER);
     // Behind the front door every organization without a live plan is read for
@@ -92,7 +96,7 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
     // plan: support is there to see what the organization has, and what it spends
     // is billed to the operator's own books, never the organization's.
     const supporting = Boolean(current) && assumed() === current;
-    const open = !door || live || supporting;
+    const open = !asks || live || supporting;
     const { client } = useAi();
     useEffect(() => {
         try {
@@ -197,7 +201,7 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
         return _jsx(Pick, { members: members, onPick: choose });
     if (open)
         return forward ? _jsx(Forward, { to: forward }) : _jsx(_Fragment, { children: _jsx(Held, { veiled: false, children: children }) });
-    // BEHIND THE FRONT DOOR NOTHING OPENS WITHOUT A LIVE PLAN. Every branch here
+    // IN THE WORKSPACE NOTHING OPENS WITHOUT A LIVE PLAN. Every branch here
     // used to hand the room over when the answer was anything but a plain
     // "free": an error of any kind, a read still in flight, a document with no
     // plan in it. Each was a way in without paying — a refusal, a slow network,
@@ -208,15 +212,20 @@ export function Orgs({ children, front = false, forward, signup = false, }) {
     if (free && personal === null)
         return _jsxs(_Fragment, { children: [_jsx(Held, { veiled: true, children: children }), _jsx(Veil, {})] });
     const swap = () => setPicked(false);
-    // A billing OUTAGE is ours; the plan is still the condition.
-    if (!tier)
-        return _jsx(Plan, { org: current, members: members, onSwitch: swap, outage: outage(wrong), onRetry: reload });
-    if (personal) {
-        if (front && Landing)
-            return _jsx(Landing, { member: true });
-        return _jsx(Start, { onFounded: setFounding, first: false, members: members, onSwitch: swap });
+    if (door) {
+        // A billing OUTAGE is ours; the plan is still the condition.
+        if (!tier)
+            return _jsx(Plan, { org: current, members: members, onSwitch: swap, outage: outage(wrong), onRetry: reload });
+        if (personal) {
+            if (front && Landing)
+                return _jsx(Landing, { member: true });
+            return _jsx(Start, { onFounded: setFounding, first: false, members: members, onSwitch: swap });
+        }
+        return _jsx(Plan, { org: current, members: members, onSwitch: swap });
     }
-    return _jsx(Plan, { org: current, members: members, onSwitch: swap });
+    // The workspace's host off its front door: no live plan, or none read, does
+    // not open the room.
+    return _jsx(Subscribe, { org: current, members: members, onSwitch: swap });
 }
 /**
  * A link that asks to arrive signed in.
@@ -453,6 +462,12 @@ function CreateDialog({ onClose }) {
 function Pick({ members, onPick }) {
     return (_jsx(Page, { label: "Choose an organization", children: _jsxs(Column, { children: [_jsx(Brand, {}), _jsx(Heading, { title: "Choose an organization", lede: _jsx(_Fragment, { children: "Everything you open \u2014 chats, agents, credit \u2014 is this one's." }) }), _jsx(Rule, {}), _jsx(View, { display: "grid", gap: 10, children: members.map((o) => (_jsx(View, { render: "button", onClick: () => onPick(o), items: "flex-start", px: 16, py: 14, rounded: 12, borderWidth: 1, borderColor: "var(--border)", bg: "transparent", cursor: "pointer", children: _jsx(Text, { fontSize: "$4", color: "var(--foreground)", text: "left", children: o }) }, o))) })] }) }));
 }
+/** On the workspace's host, an organization whose plan is not live: it is offered the per-seat Team plan. */
+function Subscribe({ org, members, onSwitch, }) {
+    const { plan, price } = usePlan('team');
+    const seat = plan?.pricePerUser ? ' / seat' : '';
+    return (_jsx(Page, { label: "Subscribe", children: _jsxs(Column, { children: [_jsx(Brand, {}), _jsx(Heading, { title: org, lead: 22.5, lede: plan ? `This organization runs on the ${plan.name} plan at ${price}${seat} / month, and nothing in it works until that plan is live.` : 'Its plan is not live yet.' }), _jsx(Rule, {}), _jsxs(XStack, { gap: 10, flexWrap: "wrap", children: [plan ? (_jsx(Button, { asChild: true, variant: "primary", size: "lg", children: _jsx("a", { href: checkout(plan), children: `Subscribe — ${price}${seat} / month` }) })) : null, members.length > 1 ? (_jsx(Button, { size: "lg", onClick: onSwitch, children: "Switch organization" })) : null] })] }) }));
+}
 // ── the front door's setup ─────────────────────────────────────────────────────
 /**
  * CREATE YOUR TEAM: its name, then who else is in it, then its plan.

package/dist/Rail.js

@@ -1,9 +1,12 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's rail: its products as marks down the window's left edge, in one
-// order — Chat, Dev, Library, Scheduled tasks, Customize — then More, a menu of
-// the rest, and the account at the foot. It is how the app moves between Chat
-// and Dev; there is no switch anywhere else.
+// order — Chat, Dev, Studio, Library, Scheduled tasks, Customize — then More, a
+// 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.
 //
 // 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
@@ -19,12 +22,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // rail lies along the foot of the drawer (`flat`), the account at its end; the
 // drawer is too narrow for every mark, so Library, Scheduled tasks and
 // Customize lead More there.
-import { Boxes, Clock, Code2, Ellipsis, FolderGit2, LayoutTemplate, Library, ListTodo, MessageSquare, PanelLeft, Puzzle, Server, SquareTerminal, Users } from 'lucide-react';
+import { Boxes, Clock, Code2, Ellipsis, FolderGit2, LayoutTemplate, Library, ListTodo, MessageSquare, PanelLeft, Puzzle, Server, SquareTerminal, Users, WandSparkles } from 'lucide-react';
 import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { Me } from './Me.js';
-import { app, TABS, WORKSPACE } from './lib/host.js';
+import { app, STUDIO, TABS, WORKSPACE } from './lib/host.js';
+import { site } from './where.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
@@ -91,5 +95,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 }) }), 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", 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 })] }));
 }

package/dist/RightPane.d.ts

@@ -1,5 +1,5 @@
 import { type ChatMessage } from '@hanzo/ai/react';
-import { type Deck, type Kind, type Tabs } from '@hanzo/build';
+import { type Deck, type Section, type Tabs } from '@hanzo/build';
 import { type Api } from './lib/files.js';
 import { type Held } from './pane.js';
 /** A conversation's panel before anyone has arranged it. */
@@ -31,28 +31,19 @@ export interface Mark {
  * the bytes this document still holds first (`localOf`).
  */
 export declare function look(deck: Deck, m: Mark, api: Api): Promise<void>;
-/** Chat's kinds of tab, over the conversation `said` and the files `held` for the next message. */
-export declare function useKinds({ at, said, held, deck }: {
-    at: string;
-    said: ChatMessage[];
-    held: Held[];
-    deck: Deck;
-}): Kind[];
 /**
- * The conversation's summary, from the outline mark in its header: what it
+ * The conversation's summary as sections (@hanzo/build `Summary`): what it
  * produced (Outputs, led by Create file or site, which starts a Dev run) and
  * what went into it (Sources, with the `+` that brings more). Each row opens in
- * a tab beside the conversation. A section with nothing in it keeps its heading
- * and one quiet line.
+ * a tab beside the conversation.
  */
-export declare function Summary({ at, said, held, deck, onOpen, onCreate }: {
+export declare function useSections({ at, said, held, deck, onCreate }: {
     at: string;
     said: ChatMessage[];
     held: Held[];
     deck: Deck;
-    onOpen: () => void;
     onCreate: () => void;
-}): import("react").JSX.Element;
+}): Section[];
 /**
  * The organization's sites, as an empty tab suggests them: `GET /v1/projects`,
  * every row with a live address. Read once a conversation; nothing on a refusal.

package/dist/RightPane.js

@@ -17,11 +17,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // @hanzo/build (`useDeck`, scope `chat:<channel>`); the frame owns the column
 // it stands in (`Beside` in `Shell.tsx`).
 import { useEffect, useMemo, useState } from 'react';
-import { FileCode, Globe, Image as ImageMark, ListTodo, Paperclip, Plus, Search } from 'lucide-react';
-import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger, Text, XStack, YStack, } from '@hanzo/ui';
+import { FileCode, Globe, Image as ImageMark, Paperclip, Plus } from 'lucide-react';
+import { Box, DropdownMenu, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Text, } from '@hanzo/ui';
 import { useAi } from '@hanzo/ai/react';
 import { artifacts, name as titleOf, PAGE } from '@hanzo/build';
-import { Card, Quiet, Row } from './card.js';
 import { said as told } from './lib/attach.js';
 import { download, fileOf } from './lib/files.js';
 import { org, scope } from './lib/session.js';
@@ -116,32 +115,6 @@ export async function look(deck, m, api) {
         // A file forgotten or a store unreachable opens nothing; the row stays.
     }
 }
-/** A list of marks, every one of them; pressing one opens it. */
-function Marks({ kind, title, icon, marks, deck, action, children }) {
-    const ai = useAi();
-    return (_jsxs(Card, { kind: kind, icon: icon, title: title, action: action, children: [marks.length === 0 ? _jsx(Quiet, { children: children }) : null, marks.map((m) => {
-                const Glyph = GLYPH[m.kind];
-                return (_jsx(Row, { icon: _jsx(Glyph, { size: 16, "aria-hidden": true }), onPress: () => void look(deck, m, ai), children: m.name }, m.id));
-            })] }));
-}
-/** Chat's kinds of tab, over the conversation `said` and the files `held` for the next message. */
-export function useKinds({ at, said, held, deck }) {
-    const made = useMemo(() => outputs(said), [said]);
-    const took = useMemo(() => sources(said, held), [said, held]);
-    const done = useMemo(() => lookups(said), [said]);
-    return [
-        {
-            id: 'artifacts',
-            label: 'Artifacts',
-            render: () => (_jsx(Marks, { kind: "outputs", title: "Outputs", icon: _jsx(FileCode, { size: 16, "aria-hidden": true }), marks: made, deck: deck, children: "This conversation has produced nothing yet." })),
-        },
-        {
-            id: 'sources',
-            label: 'Sources',
-            render: () => (_jsxs(YStack, { gap: "$3", children: [_jsx(Marks, { kind: "sources", title: "Sources", icon: _jsx(Paperclip, { size: 16, "aria-hidden": true }), marks: took, deck: deck, action: _jsx(Add, { at: at }), children: "Nothing has been put into this conversation yet." }), _jsxs(Card, { kind: "lookups", icon: _jsx(Search, { size: 16, "aria-hidden": true }), title: "Looked up", children: [done.length === 0 ? _jsx(Quiet, { children: "Nothing was looked up for this conversation yet." }) : null, done.map((call) => (_jsxs(YStack, { gap: "$1", p: "$2", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: call.name }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 2, children: call.asked }), _jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 6, children: call.got ?? 'Running…' })] }, call.id)))] })] })),
-        },
-    ];
-}
 /**
  * A menu row's words.
  *
@@ -218,40 +191,31 @@ function Services() {
                         .catch((e) => setStep(String(e?.message ?? 'Could not start')));
                 }, children: _jsx(Word, { children: p.name }) }, p.id)))] }));
 }
-/** A row of the summary: its mark and its name, one press from a tab. */
-function Line({ icon, children, onPress, quiet = false }) {
-    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsx(Text, { flex: 1, minW: 0, fontSize: "$2", color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children })] }));
-}
-/** A heading of the summary, with what it adds at its end. */
-const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: children }), action] }));
 /**
- * The conversation's summary, from the outline mark in its header: what it
+ * The conversation's summary as sections (@hanzo/build `Summary`): what it
  * produced (Outputs, led by Create file or site, which starts a Dev run) and
  * what went into it (Sources, with the `+` that brings more). Each row opens in
- * a tab beside the conversation. A section with nothing in it keeps its heading
- * and one quiet line.
+ * a tab beside the conversation.
  */
-export function Summary({ at, said, held, deck, onOpen, onCreate }) {
+export function useSections({ at, said, held, deck, onCreate }) {
     const ai = useAi();
-    const [open, setOpen] = useState(false);
     const made = useMemo(() => outputs(said), [said]);
     const took = useMemo(() => sources(said, held), [said, held]);
     const done = useMemo(() => lookups(said), [said]);
-    const show = (m) => {
-        setOpen(false);
-        void look(deck, m, ai);
-        onOpen();
-    };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": "Summary", "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: 'Summary' }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsxs(YStack, { "data-slot": "summary", role: "dialog", "aria-label": "Summary", gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: [_jsx(Head, { children: "Outputs" }), _jsx(Line, { quiet: true, onPress: () => {
-                                setOpen(false);
-                                onCreate();
-                            }, children: "Create file or site" }), made.map((m) => {
-                            const Glyph = GLYPH[m.kind];
-                            return (_jsx(Line, { icon: _jsx(Glyph, { size: 15, "aria-hidden": true }), onPress: () => show(m), children: m.name }, m.id));
-                        }), _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }), _jsx(Head, { action: _jsx(Add, { at: at }), children: "Sources" }), done.map((call) => (_jsx(Line, { icon: _jsx(Globe, { size: 15, "aria-hidden": true }), onPress: () => show({ id: call.id, name: call.name, kind: 'file', body: [call.asked, call.got ?? ''].filter(Boolean).join('\n\n'), mime: 'text/plain' }), children: call.name === 'web_search' || call.name === 'search' ? 'Web search' : call.name }, call.id))), took.map((m) => {
-                            const Glyph = GLYPH[m.kind];
-                            return (_jsx(Line, { icon: _jsx(Glyph, { size: 15, "aria-hidden": true }), onPress: () => show(m), children: m.name }, m.id));
-                        }), !done.length && !took.length ? _jsx(Line, { quiet: true, children: "Nothing yet" }) : null] }) })] }));
+    return useMemo(() => {
+        const row = (m) => {
+            const Glyph = GLYPH[m.kind];
+            return { id: m.id, title: m.name, icon: _jsx(Glyph, { size: 15, "aria-hidden": true }), open: () => void look(deck, m, ai) };
+        };
+        const asked = done.map((call) => {
+            const m = { id: call.id, name: call.name, kind: 'file', body: [call.asked, call.got ?? ''].filter(Boolean).join('\n\n'), mime: 'text/plain' };
+            return { ...row(m), title: call.name === 'web_search' || call.name === 'search' ? 'Web search' : call.name, icon: _jsx(Globe, { size: 15, "aria-hidden": true }), detail: call.asked };
+        });
+        return [
+            { id: 'outputs', title: 'Outputs', lead: { title: 'Create file or site', run: onCreate }, entries: made.map(row) },
+            { id: 'sources', title: 'Sources', action: _jsx(Add, { at: at }), empty: 'Nothing yet', entries: [...asked, ...took.map(row)] },
+        ];
+    }, [at, made, took, done, deck, ai, onCreate]);
 }
 /**
  * The organization's sites, as an empty tab suggests them: `GET /v1/projects`,
@@ -267,7 +231,7 @@ export function useSites() {
             if (stop.signal.aborted)
                 return;
             const all = list(Array.isArray(body) ? body : body?.data);
-            setRows(all.filter((p) => typeof p.liveUrl === 'string' && /^https:\/\//.test(p.liveUrl)).map((p) => ({ title: p.name || p.slug || 'Site', url: p.liveUrl })));
+            setRows(all.filter((p) => typeof p.liveUrl === 'string' && p.liveUrl.startsWith('https://')).map((p) => ({ title: p.name || p.slug || 'Site', url: p.liveUrl })));
         })
             .catch(() => { });
         return () => stop.abort();

package/dist/lib/host.d.ts

@@ -46,6 +46,11 @@ export declare const TABS = "https://tabs.hanzo.ai";
  */
 export declare const CHAT = "/chat";
 export declare const DEV = "/dev";
+/**
+ * Studio: making images, audio, video and documents, and editing them.
+ * hanzo.ai/studio, whose page draws the app for a signed-in reader.
+ */
+export declare const STUDIO = "/studio";
 /** 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. */

package/dist/lib/host.js

@@ -49,6 +49,11 @@ export const TABS = 'https://tabs.hanzo.ai';
  */
 export const CHAT = '/chat';
 export const DEV = '/dev';
+/**
+ * Studio: making images, audio, video and documents, and editing them.
+ * hanzo.ai/studio, whose page draws the app for a signed-in reader.
+ */
+export const STUDIO = '/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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "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",
@@ -49,7 +49,7 @@
   "peerDependencies": {
     "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
-    "@hanzo/build": ">=0.2.53",
+    "@hanzo/build": ">=0.2.57",
     "@hanzo/composer": ">=0.2.0",
     "@hanzo/event": ">=0.3.56",
     "@hanzo/gui": "^8.3.5",
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.56",
+    "@hanzo/build": "0.2.57",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",