@hanzo/rooms 0.1.88 → 0.1.90

package/dist/App.js

@@ -76,11 +76,13 @@ import { Palette } from './Palette.js';
 import { summons } from './seek.js';
 import { floor, pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, go, place, studio, talk } from './lib/host.js';
+import { app, go, place, studio, talk, TERMINALS } from './lib/host.js';
 import { Top } from './Top.js';
 import { FOOT, HEIGHT, TOP, useView } from './view.js';
 /** Studio, fetched the first time the reader stands in it. */
 const Studio = lazy(() => import('@hanzo/studio').then((m) => ({ default: m.Studio })));
+/** Tabs, the same way: the terminals on the reader's machines (Terminals.tsx). */
+const Terminals = lazy(() => import('./Terminals.js'));
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
 /** The bar's height, px: the reference window's title bar. */
@@ -98,7 +100,7 @@ const INSET = {
     left: 'max(var(--pane-gap), var(--safe-left))',
 };
 /** Where each mode was last, so the rail goes back to it. */
-const last = { chat: '', dev: '', studio: '' };
+const last = { chat: '', dev: '', studio: '', tabs: '' };
 /** Whether a key press is the reader typing, where the app's keys are the field's. */
 const typing = (e) => {
     const el = e.target;
@@ -239,10 +241,11 @@ function Window({ bar }) {
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
     const toStudio = () => move(last.studio || studio(''));
+    const toTabs = () => move(TERMINALS);
     // Another organization: picked, and the app opened in it at the mode's New.
     const org = (o) => {
         pick(o);
-        window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : talk());
+        window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : mode === 'tabs' ? TERMINALS : talk());
     };
     const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : undefined;
     const flip = () => setClosed(!closed);
@@ -250,5 +253,5 @@ function Window({ bar }) {
         shut();
         setFinding(true);
     };
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }), closed || mode === 'tabs' ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'tabs' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(Suspense, { fallback: null, children: _jsx(Terminals, {}) }) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
 }

package/dist/Chat.js

@@ -1169,6 +1169,10 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
             { id: `u-${Date.now()}`, role: "user", content: text },
             { id: `a-${Date.now()}`, role: "assistant", content: reply },
         ]);
+        // A page a plugin's answer carries (a design system's preview) opens beside it at once.
+        const made = artifacts(reply).filter(renders);
+        if (made.length)
+            see(made[made.length - 1]);
         if (!anonymous)
             void ai.threads
                 .record([{ role: "user", content: text }, { role: "assistant", content: reply }], open ?? undefined)

package/dist/Column.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { ArrowLeft, Bell, Search, Settings2, SquarePen } from 'lucide-react';
-import { DOTS, Gutter, NEW, own, path as written, sections, tabs, useSessions } from '@hanzo/build';
+import { DOTS, Gutter, library, NEW, own, path as written, sections, tabs, useScheduled, useSessions } from '@hanzo/build';
 import { tidy } from './lib/title.js';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
@@ -98,7 +98,18 @@ export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
     const at = mode === 'dev' ? spot(host.path) : null;
-    const groups = places ?? (at === 'settings' ? sections(host, dev) : at === 'customize' ? tabs(host, dev) : at ? [] : own(host, dev));
+    // Each place the rail holds lists its own rows: Library its kinds and Upload, Scheduled tasks its tasks and New task.
+    const scheduled = useScheduled(host, dev, at === 'scheduled');
+    const groups = places ??
+        (at === 'settings'
+            ? sections(host, dev)
+            : at === 'customize'
+                ? tabs(host, dev)
+                : at === 'library'
+                    ? library(host, dev)
+                    : at === 'scheduled'
+                        ? scheduled
+                        : own(host, dev));
     const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
     // Chat's New; Dev's is the first of its places.
     const create = () => {
@@ -107,5 +118,5 @@ export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer
     };
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [at ? (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: 2, pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(SidebarIconButton, { label: "Back", "data-slot": "place-back", onPress: onBack, ...HEAD, children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, "data-slot": "place-name", children: TITLE[at] })] })) : (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: "Search", onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] })), mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i && g.label ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i && g.label ? `${uid}-${g.id}` : undefined, "aria-label": i && g.label ? undefined : g.label || (at ? TITLE[at] : g.id), gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' || at ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), at ? null : (_jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] })), foot] }), drawer ? null : (_jsx(Gutter, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar" }))] }));
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [at ? (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: 2, pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(SidebarIconButton, { label: "Back", "data-slot": "place-back", onPress: onBack, ...HEAD, children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, "data-slot": "place-name", children: TITLE[at] })] })) : (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: "Search", onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] })), mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i && g.label ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i && g.label ? `${uid}-${g.id}` : undefined, "aria-label": i && g.label ? undefined : g.label || (at ? TITLE[at] : g.id), gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' || mode === 'tabs' || at ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), at ? null : (_jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] })), foot] }), drawer ? null : (_jsx(Gutter, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar" }))] }));
 }

package/dist/Rail.d.ts

@@ -31,7 +31,7 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, onTabs, go, onOrg, }: {
     host: Host;
     mode: Place['mode'];
     /** Dev's builder address, or null outside Dev. */
@@ -46,6 +46,7 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     onChat: () => void;
     onDev: () => void;
     onStudio: () => void;
+    onTabs: () => void;
     /** Moves the app to an address of this page. */
     go: (address: string) => void;
     /** Work in another organization. */

package/dist/Rail.js

@@ -1,8 +1,8 @@
 '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, Studio, Library, Scheduled tasks, Customize — then More, a
-// menu of the products on hosts of their own, and the account at the foot. It
+// order — Chat, Dev, Studio, Tabs, Library, Scheduled tasks, Customize — then
+// More (Team, on a host of its own), and the account at the foot. It
 // is how the app moves between its products; a phone, which has no rail,
 // switches Chat and Dev in its bar (Top.tsx).
 //
@@ -32,7 +32,7 @@ import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { out } from './help.js';
 import { Me } from './Me.js';
-import { app, TABS, WORKSPACE } from './lib/host.js';
+import { app, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
@@ -64,7 +64,7 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, onTabs, go, onOrg, }) {
     const here = mode === 'dev' ? spot(at) : null;
     const to = (p) => () => go(app(p));
     // The products on hosts of their own, behind More; on a phone the raised places lead it.
@@ -77,9 +77,8 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
                 { type: 'separator', key: 'raised' },
             ]
             : []),
-        { key: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), onSelect: () => out(TABS) },
         { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Tabs", on: mode === 'tabs', onPress: onTabs, "data-slot": "rail-tabs", children: _jsx(SquareTerminal, { 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/Terminals.d.ts

@@ -0,0 +1 @@
+export default function Terminals(): import("react").JSX.Element;

package/dist/Terminals.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tabs in the app: the terminals on the reader's linked machines and sandboxes,
+// tiled (@hanzo/tabs `Workspace`), wired by `useFleet` with the reader's own
+// bearer against this host's cloud. The workspace holds no token; the fleet
+// mints each pane's address. hanzo.ai/tabs draws it for a signed-in reader, the
+// way /studio draws Studio.
+import { Text, YStack } from '@hanzo/gui';
+import { useFleet, Workspace } from '@hanzo/tabs';
+import { api } from './lib/api.js';
+import { bearer } from './lib/session.js';
+export default function Terminals() {
+    const fleet = useFleet(bearer(), api());
+    return (_jsxs(YStack, { "data-slot": "terminals", flex: 1, minH: 0, minW: 0, children: [fleet.error ? (_jsx(Text, { role: "alert", px: "$4", py: "$2", fontSize: "$2", color: "$soft", children: `The machines could not be read: ${fleet.error}` })) : null, _jsx(Workspace, { hosts: fleet.hosts, mint: fleet.mint, onLaunch: fleet.launch })] }));
+}

package/dist/Top.js

@@ -54,5 +54,5 @@ export function Top({ host, mode, places, go, onMenu, onChat, onDev, }) {
             },
         }
         : { label: made?.label ?? 'New', onPress: made?.onPress };
-    return (_jsxs(XStack, { "data-slot": "app-bar", height: `calc(${LINE}px + var(--safe-top))`, pt: "var(--safe-top)", px: "$4.5", items: "center", justify: "space-between", shrink: 0, $md: { display: 'none' }, children: [_jsx(Round, { label: "Open sidebar", "data-slot": "bar-menu", onPress: onMenu, children: _jsx(Lines, {}) }), _jsx(XStack, { "data-slot": "bar-mode", ...GLASS, height: LINE, p: "$1", items: "center", children: _jsxs(ToggleGroup, { type: "single", "aria-label": "App", value: mode === 'studio' ? '' : mode, disableDeactivation: true, onValueChange: (v) => (v === 'chat' ? onChat() : v === 'dev' ? onDev() : undefined), children: [_jsx(Side, { value: "chat", children: "Chat" }), _jsx(Side, { value: "dev", children: "Dev" })] }) }), _jsx(Round, { label: fresh.label, "data-slot": "bar-new", onPress: fresh.onPress, children: _jsx(SquarePen, { size: 20, "aria-hidden": true }) })] }));
+    return (_jsxs(XStack, { "data-slot": "app-bar", height: `calc(${LINE}px + var(--safe-top))`, pt: "var(--safe-top)", px: "$4.5", items: "center", justify: "space-between", shrink: 0, $md: { display: 'none' }, children: [_jsx(Round, { label: "Open sidebar", "data-slot": "bar-menu", onPress: onMenu, children: _jsx(Lines, {}) }), _jsx(XStack, { "data-slot": "bar-mode", ...GLASS, height: LINE, p: "$1", items: "center", children: _jsxs(ToggleGroup, { type: "single", "aria-label": "App", value: mode === 'chat' || mode === 'dev' ? mode : '', disableDeactivation: true, onValueChange: (v) => (v === 'chat' ? onChat() : v === 'dev' ? onDev() : undefined), children: [_jsx(Side, { value: "chat", children: "Chat" }), _jsx(Side, { value: "dev", children: "Dev" })] }) }), _jsx(Round, { label: fresh.label, "data-slot": "bar-new", onPress: fresh.onPress, children: _jsx(SquarePen, { size: 20, "aria-hidden": true }) })] }));
 }

package/dist/lib/host.d.ts

@@ -30,7 +30,7 @@ export declare const ENTRY = "https://hanzo.team/?signin";
  * team's session has to live.
  */
 export declare const START = "https://hanzo.team/start";
-/** Hanzo Tabs, its own origin, opened from the column in a tab of its own. */
+/** Hanzo Tabs on its own origin, which hanzo.team's shell opens; the app draws it in place at `TERMINALS`. */
 export declare const TABS = "https://tabs.hanzo.ai";
 /**
  * THE APP'S ADDRESSES ARE PATHS, in two modes at two roots. Chat is /chat, a
@@ -51,6 +51,11 @@ export declare const DEV = "/dev";
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export declare const STUDIO = "/studio";
+/**
+ * Tabs: the terminals on the reader's linked machines and sandboxes, tiled
+ * (@hanzo/tabs `Workspace`), drawn in the app at hanzo.ai/tabs.
+ */
+export declare const TERMINALS = "/tabs";
 /** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
 export declare const studio: (at: string) => string;
 /** Chat on a conversation, or /chat itself for a new one. */
@@ -67,6 +72,8 @@ export type Place = {
 } | {
     mode: 'studio';
     at: string;
+} | {
+    mode: 'tabs';
 };
 /** The place a path names, or null when it names none of the app's. */
 export declare function place(pathname: string): Place | null;

package/dist/lib/host.js

@@ -33,7 +33,7 @@ export const ENTRY = `${WORKSPACE}/?signin`;
  * team's session has to live.
  */
 export const START = `${WORKSPACE}/start`;
-/** Hanzo Tabs, its own origin, opened from the column in a tab of its own. */
+/** Hanzo Tabs on its own origin, which hanzo.team's shell opens; the app draws it in place at `TERMINALS`. */
 export const TABS = 'https://tabs.hanzo.ai';
 /**
  * THE APP'S ADDRESSES ARE PATHS, in two modes at two roots. Chat is /chat, a
@@ -54,6 +54,11 @@ export const DEV = '/dev';
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export const STUDIO = '/studio';
+/**
+ * Tabs: the terminals on the reader's linked machines and sandboxes, tiled
+ * (@hanzo/tabs `Workspace`), drawn in the app at hanzo.ai/tabs.
+ */
+export const TERMINALS = '/tabs';
 /** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
 export const studio = (at) => (at ? `${STUDIO}/${at.replace(/^\/+/, '')}` : STUDIO);
 /** Chat on a conversation, or /chat itself for a new one. */
@@ -71,6 +76,8 @@ export function place(pathname) {
         return { mode: 'dev', at: path(parse(p.slice(DEV.length))) };
     if (p === STUDIO || p.startsWith(`${STUDIO}/`))
         return { mode: 'studio', at: p.slice(STUDIO.length + 1) };
+    if (p === TERMINALS)
+        return { mode: 'tabs' };
     if (!p.startsWith(`${CHAT}/`))
         return null;
     const id = p.slice(CHAT.length + 1);
@@ -90,6 +97,10 @@ export function page(pathname) {
         return pathname;
     if (at.mode === 'chat')
         return at.thread ? `${CHAT}/:id` : CHAT;
+    if (at.mode === 'tabs')
+        return TERMINALS;
+    if (at.mode === 'studio')
+        return STUDIO;
     const r = route(at.at);
     if (r.kind === 'run')
         return `${DEV}/run/:id`;
@@ -141,7 +152,7 @@ export function remember(mode) {
 export function resume() {
     try {
         const kept = window.localStorage.getItem(MODE);
-        return kept === 'dev' ? DEV : kept === 'studio' ? STUDIO : CHAT;
+        return kept === 'dev' ? DEV : kept === 'studio' ? STUDIO : kept === 'tabs' ? TERMINALS : CHAT;
     }
     catch {
         return CHAT;

package/dist/where.d.ts

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

package/dist/where.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "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,13 +49,14 @@
   "peerDependencies": {
     "@hanzo/ai": ">=0.6.23",
     "@hanzo/appearance": ">=0.2.6",
-    "@hanzo/build": ">=0.2.73",
+    "@hanzo/build": ">=0.2.77",
     "@hanzo/composer": ">=0.2.0",
     "@hanzo/event": ">=0.3.56",
     "@hanzo/gui": "^8.3.5",
     "@hanzo/iam": ">=0.21.33",
     "@hanzo/logo": ">=1.0.26",
     "@hanzo/studio": ">=0.1.0",
+    "@hanzo/tabs": ">=0.1.8",
     "@hanzo/ui": ">=8.29.0",
     "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.16",
@@ -67,7 +68,7 @@
   "devDependencies": {
     "@hanzo/ai": "0.6.23",
     "@hanzo/appearance": "0.2.8",
-    "@hanzo/build": "0.2.73",
+    "@hanzo/build": "0.2.77",
     "@hanzo/composer": "0.2.0",
     "@hanzo/design": "0.5.34",
     "@hanzo/event": "0.3.56",
@@ -75,6 +76,7 @@
     "@hanzo/iam": "0.21.33",
     "@hanzo/logo": "1.0.26",
     "@hanzo/studio": "0.1.0",
+    "@hanzo/tabs": "github:hanzo-apps/tabs#af6f1e4c02a3ef7faa192a8310e193219fa5c1c5",
     "@hanzo/ui": "8.29.0",
     "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.19",