@hanzo/build 0.2.75 → 0.2.76

package/lib/api/library.d.ts

@@ -13,8 +13,13 @@
  * signed and stop working at `expires`: read the item again for fresh ones.
  */
 import { type Target } from './call.ts';
-export declare const KINDS: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
-export type Kind = (typeof KINDS)[number];
+export declare const KIND_IDS: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export type Kind = (typeof KIND_IDS)[number];
+/** The kinds a reader narrows to, in the order the Library lists them, '' being all. */
+export declare const KINDS: readonly {
+    id: Kind | '';
+    label: string;
+}[];
 export declare const SOURCES: readonly ['chat', 'dev', 'studio', 'workflow'];
 export type Source = (typeof SOURCES)[number];
 export type Scope = 'all' | 'mine' | 'shared';

package/lib/api/library.js

@@ -13,7 +13,19 @@
  * signed and stop working at `expires`: read the item again for fresh ones.
  */
 import { call, query, seg } from './call.js';
-export const KINDS = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export const KIND_IDS = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+/** The kinds a reader narrows to, in the order the Library lists them, '' being all. */
+export const KINDS = [
+    { id: '', label: 'All' },
+    { id: 'image', label: 'Images' },
+    { id: 'video', label: 'Videos' },
+    { id: 'audio', label: 'Audio' },
+    { id: 'document', label: 'Documents' },
+    { id: 'slides', label: 'Slides' },
+    { id: 'model', label: '3D' },
+    { id: 'code', label: 'Code' },
+    { id: 'file', label: 'Files' },
+];
 export const SOURCES = ['chat', 'dev', 'studio', 'workflow'];
 /** A product, as a person names it. */
 export const SOURCE = { chat: 'Chat', dev: 'Dev', studio: 'Studio', workflow: 'Workflow' };
@@ -33,7 +45,7 @@ export function item(raw) {
     const id = str(o.id);
     if (!id)
         return null;
-    const kind = KINDS.includes(str(o.kind)) ? o.kind : 'file';
+    const kind = KIND_IDS.includes(str(o.kind)) ? o.kind : 'file';
     const source = SOURCES.includes(str(o.source)) ? o.source : 'dev';
     return {
         id,

package/lib/index.d.ts

@@ -25,7 +25,7 @@ export { Library, Outputs, Preview, Thumb, want } from './library.tsx';
 export { SOURCE, type Item, type Kind as ItemKind, type Source } from './api/library.ts';
 export { Scheduled, schedule } from './scheduled.tsx';
 export { Editor } from './automations.tsx';
-export { nav, NEW, own, sections, tabs, type Group } from './nav.tsx';
+export { library, nav, NEW, own, sections, tabs, useScheduled, type Group } from './nav.tsx';
 export { DevSection, DOTS, useSessions } from './section.tsx';
 export { HostProvider } from './host.tsx';
 export { Slack, useWho, Who } from './foot.tsx';

package/lib/index.js

@@ -25,7 +25,7 @@ export { Library, Outputs, Preview, Thumb, want } from './library.js';
 export { SOURCE } from './api/library.js';
 export { Scheduled, schedule } from './scheduled.js';
 export { Editor } from './automations.js';
-export { nav, NEW, own, sections, tabs } from './nav.js';
+export { library, nav, NEW, own, sections, tabs, useScheduled } from './nav.js';
 export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
 export { Slack, useWho, Who } from './foot.js';

package/lib/library.js

@@ -18,26 +18,16 @@ import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from
 import { ChipSelect } from '@hanzo/ui/product';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ago } from './ago.js';
-import { change, days, get, items as list, remove, size, SOURCE } from './api/library.js';
+import { change, days, get, items as list, KINDS, remove, size, SOURCE } from './api/library.js';
 import { Confirm, Rename } from './ask.js';
 import { useKept, useProjects, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
+import { KEPT } from './nav.js';
+import { path, route } from './route.js';
 import { Panel } from './panel.js';
 import { gap, pane } from './pane.js';
 import { Sites } from './shelf.js';
 import { useDeck } from './tabs.js';
-/** The kinds a reader narrows to, in the order the chips draw them. */
-const KINDS = [
-    { id: '', label: 'All' },
-    { id: 'image', label: 'Images' },
-    { id: 'video', label: 'Videos' },
-    { id: 'audio', label: 'Audio' },
-    { id: 'document', label: 'Documents' },
-    { id: 'slides', label: 'Slides' },
-    { id: 'model', label: '3D' },
-    { id: 'code', label: 'Code' },
-    { id: 'file', label: 'Files' },
-];
 const FROM = [
     { id: '', label: 'Anywhere' },
     { id: 'chat', label: 'Chat' },
@@ -351,7 +341,10 @@ export function Library() {
     const t = useTarget();
     const signed = Boolean(host.person);
     const wide = useMedia().md;
-    const [kind, setKind] = useState('');
+    // The kind is the address's (-/artifacts/<kind>), so the sidebar, a link and Back all name it.
+    const at = route(host.path);
+    const kind = at.kind === 'screen' && at.of ? at.of : '';
+    const setKind = (k) => host.go(path({ kind: 'screen', screen: 'artifacts', ...(k ? { of: k } : {}) }));
     const [source, setSource] = useState('');
     const [scope, setScope] = useState('all');
     const [typed, setTyped] = useState('');
@@ -368,6 +361,11 @@ export function Library() {
     const load = useMemo(() => (signed ? (cursor, signal) => list(t, { kind, source, scope, q, limit: PAGE, cursor }, { signal }) : null), [signed, t, kind, source, scope, q]);
     const pages = usePages(load, `${kind}|${source}|${scope}|${q}|${t.org}`);
     const end = useEnd(pages.more);
+    const reload = pages.reload;
+    useEffect(() => {
+        window.addEventListener(KEPT, reload);
+        return () => window.removeEventListener(KEPT, reload);
+    }, [reload]);
     const look = useCallback((x) => {
         side.open({ id: `${TAB}${x.id}`, kind: `${TAB}${x.id}`, title: x.name });
         setShown(true);
@@ -397,7 +395,7 @@ export function Library() {
     const open = shown && side.tabs.length > 0;
     const groups = days(pages.rows);
     const narrowed = Boolean(kind || source || q || scope !== 'all');
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: "Library" }), _jsxs(XStack, { role: "radiogroup", "aria-label": "View", gap: "$1", children: [_jsx(ViewMark, { label: "Grid", on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: "List", on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: "Search your library", "aria-label": "Search your library", disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [_jsx(XStack, { role: "radiogroup", "aria-label": "Kind", gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: k.label, on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) }), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: "From", label: FROM.find((f) => f.id === source).label, chosen: FROM.find((f) => f.id === source), items: FROM, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: "Whose", label: WHOSE.find((w) => w.id === scope).label, chosen: WHOSE.find((w) => w.id === scope), items: WHOSE, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: "Sign in to see your library.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: pages.error.message, children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: "Try again" }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: "Reading\u2026" })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? 'Nothing matches.' : 'Nothing here yet. What you make in Chat, Dev and Studio lands here.' })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": g.label, children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: g.label }), view === 'grid' ? (_jsx("div", { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))', gap: 16 }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading more\u2026" })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: pages.error.message })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsx(YStack, { flex: 1, minH: 0, minW: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1120, mx: "auto", gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(SizableText, { render: "h1", size: "$7", fontWeight: "600", color: "$ink", flex: 1, children: KINDS.find((k) => k.id === kind)?.id ? KINDS.find((k) => k.id === kind).label : 'Library' }), _jsxs(XStack, { role: "radiogroup", "aria-label": "View", gap: "$1", children: [_jsx(ViewMark, { label: "Grid", on: view === 'grid', onPress: () => setView('grid'), children: _jsx(LayoutGrid, { size: 16 }) }), _jsx(ViewMark, { label: "List", on: view === 'list', onPress: () => setView('list'), children: _jsx(List, { size: 16 }) })] })] }), _jsxs(XStack, { items: "center", gap: "$2", maxW: 480, children: [_jsx(Search, { size: 16, opacity: 0.6 }), _jsx(YStack, { flex: 1, minW: 0, children: _jsx(Input, { value: typed, onChangeText: setTyped, placeholder: "Search your library", "aria-label": "Search your library", disabled: !signed }) })] }), _jsxs(YStack, { gap: "$2", children: [host.sections ? null : (_jsx(XStack, { role: "radiogroup", "aria-label": "Kind", gap: "$2", overflowX: "auto", pb: "$1", "$platform-web": { scrollbarWidth: 'none' }, children: KINDS.map((k) => (_jsx(Chip, { label: k.label, on: kind === k.id, onPress: () => setKind(k.id) }, k.id || 'all'))) })), _jsxs(XStack, { gap: "$2", flexWrap: "wrap", rowGap: "$2", children: [_jsx(ChipSelect, { name: "From", label: FROM.find((f) => f.id === source).label, chosen: FROM.find((f) => f.id === source), items: FROM, onChange: (f) => setSource(f.id), placement: "bottom-start", width: 200 }), _jsx(ChipSelect, { name: "Whose", label: WHOSE.find((w) => w.id === scope).label, chosen: WHOSE.find((w) => w.id === scope), items: WHOSE, onChange: (w) => setScope(w.id), placement: "bottom-start", width: 220 })] })] }), acts.note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: acts.note })) : null, !signed ? (_jsx(Said, { says: "Sign in to see your library.", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : pages.error && !pages.rows.length ? (_jsx(Said, { says: pages.error.message, children: _jsx(Button, { size: "sm", variant: "outline", onPress: pages.reload, children: "Try again" }) })) : pages.loading && !pages.rows.length ? (_jsx(Said, { says: "Reading\u2026" })) : !pages.rows.length ? (_jsx(Said, { says: narrowed ? 'Nothing matches.' : 'Nothing here yet. What you make in Chat, Dev and Studio lands here.' })) : (_jsxs(YStack, { gap: "$5", children: [groups.map((g) => (_jsxs(YStack, { gap: "$3", role: "group", "aria-label": g.label, children: [_jsx(SizableText, { size: "$2", color: "$soft", fontWeight: "500", children: g.label }), view === 'grid' ? (_jsx("div", { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(46%, 168px), 1fr))', gap: 16 }, children: g.rows.map((x) => (_jsx(Tile, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) })) : (_jsx(YStack, { role: "list", "aria-label": `Made ${g.label.toLowerCase()}`, gap: "$0.5", children: g.rows.map((x) => (_jsx(Row, { x: x, onOpen: () => look(x), rows: acts.rows(x) }, x.id))) }))] }, g.label))), _jsx(YStack, { ref: end, height: 1 }), pages.loading ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Reading more\u2026" })) : pages.error ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: pages.error.message })) : null] })), signed && !q && !kind && (source === '' || source === 'dev') && scope !== 'shared' ? (_jsx(YStack, { pt: "$6", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Sites, {}) })) : null] }) }), open && !wide ? panel(true) : null, open && wide ? (_jsx(YStack, { "data-slot": "library-side", ...pane, ml: gap, shrink: 0, minH: 0, width: 440, maxW: "45%", children: panel(false) })) : null, acts.dialogs] }));
 }
 function ViewMark({ label, on, onPress, children }) {
     return (_jsx(XStack, { render: "button", role: "radio", "aria-checked": on, "aria-label": label, onPress: onPress, width: 32, height: 32, items: "center", justify: "center", rounded: "$3", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", opacity: on ? 1 : 0.6, children: children }));

package/lib/nav.d.ts

@@ -19,3 +19,9 @@ export declare const own: (host: Host, go: (path: string) => void) => Group[];
 export declare function sections(host: Host, go: (path: string) => void): Group[];
 /** Customize's tabs as a host's sidebar lists them, Agents first; an agent's profile lights Agents. */
 export declare function tabs(host: Host, go: (path: string) => void): Group[];
+/** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
+export declare const KEPT = "hanzo:library:kept";
+/** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
+export declare function library(host: Host, go: (path: string) => void): Group[];
+/** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
+export declare function useScheduled(host: Host, go: (path: string) => void, on: boolean): Group[];

package/lib/nav.js

@@ -9,8 +9,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Every row moves the builder through `go` with the address `path` writes, so
  * where a place lives is said here and in route.ts and nowhere else.
  */
-import { Bell, BookOpen, Bot, Brain, CircleDot, Clock, Code, Container, Cpu, CreditCard, FolderGit2, Gauge, Key, LayoutTemplate, Library, Plug, Puzzle, Settings, Shield, SlidersHorizontal, Sparkles, SquarePen, User, Users } from '@hanzogui/lucide-icons-2';
+import { AudioLines, Bell, BookOpen, Bot, Box, Brain, CircleDot, Clock, Code, Container, Cpu, CreditCard, File, FileText, FolderGit2, Gauge, Image, Key, LayoutTemplate, Library, Plug, Plus, Presentation, Puzzle, Settings, Shield, SlidersHorizontal, Sparkles, SquarePen, Upload, User, Users, Video } from '@hanzogui/lucide-icons-2';
+import { useMemo } from 'react';
+import { automations } from './api/auto.js';
+import { KINDS, upload } from './api/library.js';
 import { pinBoard } from './choice.js';
+import { useRead } from './data.js';
 import { DOCS } from './foot.js';
 import { path, route, TABS } from './route.js';
 import { GROUPS, heading, LIST } from './settings/list.js';
@@ -117,3 +121,73 @@ const SECTION_ICON = {
     integrations: _jsx(Plug, { size: 16 }),
     notifications: _jsx(Bell, { size: 16 }),
 };
+const KIND_ICON = {
+    '': _jsx(Library, { size: 16 }),
+    image: _jsx(Image, { size: 16 }),
+    video: _jsx(Video, { size: 16 }),
+    audio: _jsx(AudioLines, { size: 16 }),
+    document: _jsx(FileText, { size: 16 }),
+    slides: _jsx(Presentation, { size: 16 }),
+    model: _jsx(Box, { size: 16 }),
+    code: _jsx(Code, { size: 16 }),
+    file: _jsx(File, { size: 16 }),
+};
+/** Fired on `window` once the sidebar's Upload has kept its files, for the Library to read again. */
+export const KEPT = 'hanzo:library:kept';
+/** Asks for files and keeps each in the Library; a refusal is said in the page's own words. */
+function keep(host) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.onchange = async () => {
+        const t = { api: host.api, token: host.token, org: host.org };
+        for (const f of Array.from(input.files ?? [])) {
+            try {
+                await upload(t, { name: f.name, type: f.type, bytes: new Uint8Array(await f.arrayBuffer()) }, { source: 'chat' });
+            }
+            catch (e) {
+                window.alert(e instanceof Error ? e.message : `${f.name} was not kept`);
+            }
+        }
+        window.dispatchEvent(new Event(KEPT));
+    };
+    input.click();
+}
+/** The Library's sidebar: Upload, then every kind it narrows to, the one in the address lit. */
+export function library(host, go) {
+    const r = route(host.path);
+    const at = r.kind === 'screen' && r.screen === 'artifacts' ? (r.of ?? '') : null;
+    return [
+        { id: 'library-do', label: '', links: [{ id: 'upload', label: 'Upload', icon: _jsx(Upload, { size: 16 }), onPress: () => keep(host) }] },
+        {
+            id: 'library-kinds',
+            label: '',
+            links: KINDS.map((k) => ({
+                id: `kind-${k.id || 'all'}`,
+                label: k.label,
+                icon: KIND_ICON[k.id],
+                onPress: () => go(path({ kind: 'screen', screen: 'artifacts', ...(k.id ? { of: k.id } : {}) })),
+                active: at === k.id,
+            })),
+        },
+    ];
+}
+/** Scheduled tasks' sidebar: New task, then each of the person's tasks, the one open lit. Read only while `on`. */
+export function useScheduled(host, go, on) {
+    const t = useMemo(() => ({ api: host.api, token: host.token, org: host.org }), [host.api, host.token, host.org]);
+    const list = useRead(on && host.person ? () => automations(t) : null, [], [t, on, host.path]);
+    const r = route(host.path);
+    const at = r.kind === 'automation' ? r.id : '';
+    return [
+        {
+            id: 'scheduled-do',
+            label: '',
+            links: [{ id: 'new-task', label: 'New task', icon: _jsx(Plus, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: 'new' })), active: at === 'new' }],
+        },
+        {
+            id: 'scheduled-tasks',
+            label: list.value.length ? 'Tasks' : '',
+            links: list.value.map((a) => ({ id: a.id, label: a.name || 'Untitled task', icon: _jsx(Clock, { size: 16 }), onPress: () => go(path({ kind: 'automation', id: a.id })), active: at === a.id })),
+        },
+    ];
+}

package/lib/route.d.ts

@@ -4,6 +4,7 @@
  *   ''              the empty state: a new run
  *   sess_<32 hex>   one run
  *   -/<screen>      a builder screen
+ *   -/artifacts/<kind>      the Library narrowed to one kind (image, video, document, …)
  *   -/automations/<id>      one automation's editor and runs; `new` writes one
  *   -/settings[/<section>]  a section of Settings
  *   -/customize[/<tab>]     agents, skills, connectors and plugins: what the agent brings to a run
@@ -42,6 +43,7 @@ export type Route = {
 } | {
     kind: 'screen';
     screen: Screen;
+    of?: Of;
 } | {
     kind: 'settings';
     section: Section;
@@ -62,6 +64,9 @@ export type Route = {
     kind: 'automation';
     id: string;
 };
+/** The kinds the Library narrows to by address (api/library.ts KIND_IDS). */
+export declare const OF: readonly ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
+export type Of = (typeof OF)[number];
 export declare const SESSION: RegExp;
 export declare const SLUG: RegExp;
 /** An organization or a repository name on the forge (api/codebases.ts `NAME`). */

package/lib/route.js

@@ -17,6 +17,8 @@ export const SECTIONS = [
 ];
 /** Customize, one tab each: what the agent brings to a run, yours and to discover. Agents first. */
 export const TABS = ['agents', 'skills', 'connectors', 'plugins'];
+/** The kinds the Library narrows to by address (api/library.ts KIND_IDS). */
+export const OF = ['image', 'video', 'audio', 'document', 'slides', 'type', 'model', 'code', 'file'];
 export const SESSION = /^sess_[0-9a-f]{32}$/;
 export const SLUG = /^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$/;
 /** An organization or a repository name on the forge (api/codebases.ts `NAME`). */
@@ -44,6 +46,10 @@ export function route(path) {
         const id = p.slice('-/automations/'.length);
         return AUTOMATION.test(id) ? { kind: 'automation', id } : { kind: 'new' };
     }
+    if (p.startsWith('-/artifacts/')) {
+        const of = p.slice('-/artifacts/'.length);
+        return OF.includes(of) ? { kind: 'screen', screen: 'artifacts', of } : { kind: 'new' };
+    }
     if (p.startsWith('-/')) {
         const s = p.slice(2);
         return SCREENS.includes(s) ? { kind: 'screen', screen: s } : { kind: 'new' };
@@ -103,7 +109,7 @@ export function path(r) {
         case 'run':
             return r.id;
         case 'screen':
-            return `-/${r.screen}`;
+            return r.of ? `-/${r.screen}/${r.of}` : `-/${r.screen}`;
         case 'settings':
             return r.section === 'general' ? '-/settings' : `-/settings/${r.section}`;
         case 'customize':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.75",
+  "version": "0.2.76",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",