@hanzo/build 0.2.51 → 0.2.53

package/lib/prompt.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The composer, once, for Chat and Dev: the field, and under it in the frame
+ * the attach button and the surface's own tools at the start, then the model
+ * and effort (`Tune`), dictation, talk and send at the end.
+ *
+ * `prompt` builds @hanzo/ui's `Composer` props, so a surface that draws the
+ * composer through `Chat` (its `composer` prop) and one that draws it directly
+ * (`<Prompt>`) draw the same thing. What each surface sends, and what it puts
+ * above the frame (`head`), stays its own.
+ *
+ * The frame is as wide as the text above it: the reading measure, less the
+ * thread column's own gutters, centred (`measure`). A transcript reads at
+ * `MEASURE` and this lines up with its words.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ArrowUp, AudioLines, Check, ChevronDown, Mic, Paperclip, Square } from '@hanzogui/lucide-icons-2';
+import { Control } from '@hanzo/composer';
+import { Popover, PopoverContent, PopoverTrigger, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
+import { Composer } from '@hanzo/ui/chat';
+import { ModelPicker } from '@hanzo/ui/models';
+import { speech, Voice } from '@hanzo/voice';
+import { useMemo, useState } from 'react';
+import { ENSO } from './api/models.js';
+import { EFFORTS, nameOf, reasons } from './mind.js';
+/** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
+export const MEASURE = 'var(--container-prose, 48rem)';
+/** The space between turns, px: one rhythm for Chat and Dev. */
+export const GAP = 20;
+/** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
+export const measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${MEASURE} - 1.5rem)`, mx: 'auto' };
+/** The round controls' box, px: a line of the footer row. */
+export const ROUND = 30;
+/**
+ * The frame as a pane of its own, floating on the pane it is drawn in: the
+ * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
+ * gradient through a translucent pane).
+ */
+export const cut = {
+    bg: 'var(--pane-fill, var(--sheet-1))',
+    rounded: 'var(--pane-round, var(--radius-xl))',
+    borderWidth: 1,
+    borderColor: 'var(--pane-edge, var(--white-08))',
+    backdropFilter: 'var(--pane-blur, blur(20px) saturate(1.8))',
+    boxShadow: 'var(--shadow-sheet-1)',
+};
+/** The platform's ear and voice for a target: dictation, talk and Listen all hear through it. */
+export function useEar(t) {
+    return useMemo(() => speech({ baseUrl: t.api, token: t.token, ...(t.org ? { org: t.org } : {}) }), [t]);
+}
+/** Enso's mark: the ring. */
+function Ring() {
+    return _jsx(YStack, { "aria-hidden": true, width: 12, height: 12, rounded: 99, borderWidth: 1.5, borderColor: "$ink", shrink: 0 });
+}
+/**
+ * The chip beside send, and the panel it opens: the effort, a sentence saying
+ * what serves the ask, and the model.
+ */
+export function Tune({ mind, limits, disabled = false }) {
+    const [open, setOpen] = useState(false);
+    const name = nameOf(mind.model, mind.models);
+    const thinks = reasons(mind.model, mind.models);
+    const pace = EFFORTS.find((e) => e.id === mind.effort);
+    const routed = mind.model === ENSO;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "mind", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": thinks ? `Model and effort: ${name}, ${pace.label}` : `Model: ${name}`, "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1.5", px: "$2.5", height: 30, maxW: 220, rounded: "$10", borderWidth: 1, borderColor: "$borderColor", cursor: disabled ? 'default' : 'pointer', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.4 : 1, onKeyDown: (e) => {
+                        if (disabled || (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowUp' && e.key !== 'ArrowDown'))
+                            return;
+                        e.preventDefault?.();
+                        setOpen(true);
+                    }, children: [routed ? _jsx(Ring, {}) : null, _jsx(SizableText, { size: "$1", color: "$ink", fontWeight: "600", numberOfLines: 1, minW: 0, shrink: 1, children: name }), thinks ? (_jsx(SizableText, { size: "$1", color: "$soft", fontWeight: "500", shrink: 0, children: pace.label })) : null, _jsx(ChevronDown, { size: 12, color: "$soft", "aria-hidden": true })] }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 280, children: _jsxs(YStack, { gap: "$1", "data-slot": "mind-panel", role: "dialog", "aria-label": "Model and effort", children: [EFFORTS.map((e) => (_jsxs(XStack, { render: "button", role: "button", "aria-pressed": e.id === mind.effort, "aria-disabled": !thinks || undefined, onPress: () => {
+                                if (!thinks)
+                                    return;
+                                mind.pace(e.id);
+                                setOpen(false);
+                            }, items: "center", gap: "$2", px: "$2", py: "$2", rounded: "$3", width: "100%", opacity: thinks ? 1 : 0.45, cursor: thinks ? 'pointer' : 'default', hoverStyle: thinks ? { bg: '$hover' } : undefined, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { textAlign: 'left' }, children: e.label }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'left' }, children: e.note })] }), e.id === mind.effort && thinks ? _jsx(Check, { size: 14, "aria-hidden": true }) : null] }, e.id))), _jsx(Separator, { my: "$1" }), _jsxs(YStack, { px: "$2", pt: "$1", pb: "$2", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "mind-note", children: routed
+                                        ? 'Enso picks the model for each message and step. Pick one to use it instead.'
+                                        : `${name} answers every message and step${thinks ? '' : ', without an effort setting'}.` }), routed ? null : (_jsxs(XStack, { render: "button", role: "button", "aria-label": "Use Enso", onPress: () => {
+                                        mind.pick(ENSO);
+                                        setOpen(false);
+                                    }, items: "center", gap: "$2", px: "$2", height: 28, rounded: "$3", self: "flex-start", borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Ring, {}), _jsx(SizableText, { size: "$1", color: "$ink", children: "Use Enso" })] })), _jsx(ModelPicker, { size: "sm", name: "Model", models: mind.models, limits: limits, 
+                                    // The router is named on the chip; a catalog that does not list it leaves the picker open.
+                                    value: routed && !mind.models.some((m) => m.id === ENSO) ? undefined : mind.model, placeholder: "Pick a model", onChange: (id) => {
+                                        mind.pick(id);
+                                        setOpen(false);
+                                    }, loading: mind.loading, error: mind.error })] })] }) })] }));
+}
+/** The paperclip, with its name on hover. */
+function Attach({ onAttach, disabled }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onAttach, children: _jsx(Paperclip, { size: 15 }) }) }), _jsx(TooltipContent, { children: _jsx(SizableText, { size: "$2", children: "Attach files" }) })] }));
+}
+/** @hanzo/ui `Composer` props for the one composer. */
+export function prompt(o) {
+    const lit = o.ready ?? Boolean(o.value.trim());
+    const busy = Boolean(o.busy);
+    const disabled = Boolean(o.disabled);
+    const live = busy ? Boolean(o.onStop) : lit && !disabled;
+    return {
+        value: o.value,
+        onChange: o.onChange,
+        onSend: o.onSend,
+        ...(o.onStop ? { onStop: o.onStop } : {}),
+        busy,
+        disabled,
+        ...(o.placeholder ? { placeholder: o.placeholder } : {}),
+        ...(o.label ? { label: o.label } : {}),
+        ...(o.field ? { field: o.field } : {}),
+        // Above the frame and at its width, so a chip lines up with the field's edge.
+        head: o.head ? (_jsx(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: o.head })) : undefined,
+        ...measure,
+        ...(o.framed ? cut : null),
+        children: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-start", children: [o.onAttach ? _jsx(Attach, { onAttach: o.onAttach, disabled: disabled }) : null, o.tools] })),
+        send: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-end", children: [o.mind ? _jsx(Tune, { mind: o.mind, limits: o.limits, disabled: disabled && !busy }) : null, o.voice ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(Mic, { size: 15, fill: state === 'idle' ? 'none' : 'currentColor' }) }) })) : null, o.talk ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Talk with Hanzo', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 15 }) }) })) : null, _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
+                        if (!live)
+                            return;
+                        if (busy)
+                            o.onStop?.();
+                        else
+                            o.onSend();
+                    }, children: busy ? _jsx(Square, { size: 13, fill: "currentColor" }) : _jsx(ArrowUp, { size: 15, strokeWidth: 2.5 }) })] })),
+    };
+}
+/** The composer drawn on its own. */
+export function Prompt(o) {
+    return _jsx(Composer, { ...prompt(o) });
+}

package/lib/prose.js

@@ -6,6 +6,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * only the part agents use. Nothing here produces HTML from the text: every
  * piece is a React element holding a string, and a link is drawn only for an
  * http(s) address, opened in a new tab.
+ *
+ * Set at Chat's sizes (@hanzo/rooms `Prose`): running text at $2 on a $3 line,
+ * headings a rung apart from $6, code in @hanzo/ui's `Code`, blocks $2 apart,
+ * so an answer reads the same in Chat and in a run.
  */
 import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
 import { Code } from '@hanzo/ui/chat';
@@ -16,38 +20,38 @@ function Inline({ text }) {
     return (_jsx(_Fragment, { children: spans(text).map((s, i) => {
             switch (s.kind) {
                 case 'code':
-                    return (_jsx(SizableText, { size: "$2", color: "$ink", bg: "$hover", px: "$1", rounded: "$1", style: mono, children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$1", color: "$ink", bg: "$hover", px: "$1", rounded: "$1", style: mono, children: s.text }, i));
                 case 'strong':
-                    return (_jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "600", children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", fontWeight: "600", children: s.text }, i));
                 case 'em':
-                    return (_jsx(SizableText, { size: "$3", color: "$ink", fontStyle: "italic", children: s.text }, i));
+                    return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", fontStyle: "italic", children: s.text }, i));
                 case 'link':
-                    return (_jsx(Out, { href: s.href, children: _jsx(SizableText, { size: "$3", color: "$ink", textDecorationLine: "underline", children: s.text }) }, i));
+                    return (_jsx(Out, { href: s.href, children: _jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", textDecorationLine: "underline", children: s.text }) }, i));
                 default:
                     return s.text;
             }
         }) }));
 }
-const SIZES = ['$6', '$5', '$4', '$4', '$3', '$3'];
+const SIZES = ['$6', '$4', '$3', '$2', '$2', '$2'];
 function Draw({ block }) {
     switch (block.kind) {
         case 'heading':
-            return (_jsx(SizableText, { size: SIZES[block.level - 1], color: "$ink", fontWeight: "600", pt: "$1", children: _jsx(Inline, { text: block.text }) }));
+            return (_jsx(SizableText, { size: SIZES[block.level - 1], color: "$ink", fontWeight: "600", children: _jsx(Inline, { text: block.text }) }));
         case 'code':
             return (_jsx(Code, { language: block.lang || 'text', value: block.text, children: block.text }));
         case 'rule':
             return _jsx(YStack, { height: 1, bg: "$borderColor", my: "$1" });
         case 'quote':
-            return (_jsx(YStack, { borderLeftWidth: 2, borderColor: "$borderColor", pl: "$3", children: _jsx(SizableText, { size: "$3", color: "$soft", children: _jsx(Inline, { text: block.text }) }) }));
+            return (_jsx(YStack, { borderLeftWidth: 2, borderColor: "$borderColor", pl: "$3", children: _jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$soft", children: _jsx(Inline, { text: block.text }) }) }));
         case 'list':
-            return (_jsx(YStack, { gap: "$1", role: "list", children: block.items.map((item, i) => (_jsxs(XStack, { gap: "$2", pl: item.depth * 16, role: "listitem", children: [_jsx(SizableText, { size: "$3", color: "$soft", minW: 16, style: { textAlign: 'right' }, children: block.ordered ? `${block.start + i}.` : '•' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$3", color: "$ink", children: _jsx(Inline, { text: item.text }) })] }, i))) }));
+            return (_jsx(YStack, { gap: "$1", role: "list", children: block.items.map((item, i) => (_jsxs(XStack, { gap: "$1", pl: item.depth * 16, role: "listitem", children: [_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$soft", minW: 14, style: { textAlign: 'right' }, children: block.ordered ? `${block.start + i}.` : '•' }), _jsx(SizableText, { flex: 1, minW: 0, size: "$2", lineHeight: "$3", color: "$ink", children: _jsx(Inline, { text: item.text }) })] }, i))) }));
         case 'table':
             return (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: _jsx(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", minW: "100%", children: [block.head, ...block.rows].map((row, r) => (_jsx(XStack, { borderTopWidth: r ? 1 : 0, borderColor: "$borderColor", bg: r ? 'transparent' : '$hover', children: block.head.map((_, c) => (_jsx(SizableText, { flex: 1, minW: 96, px: "$2", py: "$1.5", size: "$2", color: "$ink", fontWeight: r ? '400' : '600', children: _jsx(Inline, { text: row[c] ?? '' }) }, c))) }, r))) }) }));
         default:
-            return (_jsx(SizableText, { size: "$3", color: "$ink", children: _jsx(Inline, { text: block.text }) }));
+            return (_jsx(SizableText, { size: "$2", lineHeight: "$3", color: "$ink", children: _jsx(Inline, { text: block.text }) }));
     }
 }
 /** A markdown text, drawn. */
 export function Prose({ text }) {
-    return (_jsx(YStack, { gap: "$2.5", minW: 0, children: blocks(text).map((b, i) => (_jsx(Draw, { block: b }, i))) }));
+    return (_jsx(YStack, { "data-slot": "prose", gap: "$2", minW: 0, children: blocks(text).map((b, i) => (_jsx(Draw, { block: b }, i))) }));
 }

package/lib/reply.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import type { Target } from './api/call.ts';
+/** A fenced block an answer wrote out. */
+export interface Artifact {
+    /** The name it was given, or what it is: `index.html`, `html block`. */
+    name: string;
+    body: string;
+    /** What a browser should take it as. */
+    mime: string;
+}
+/** Every fenced block in `text`, in order. */
+export declare function artifacts(text: string): Artifact[];
+/** Whether a browser draws it as a page or a picture rather than as source. */
+export declare const renders: (a: Artifact) => boolean;
+/** The artifact worth opening first: the last page or picture, else the last block. */
+export declare function lead(list: readonly Artifact[]): Artifact | null;
+/** An address for an artifact's own bytes, typed so a browser renders it. */
+export declare const blob: (a: Artifact) => string;
+/** Markdown as a sentence a voice can read: code said as code, marks dropped. */
+export declare function speakable(raw: string): string;
+/** Reads `text` aloud, calls `done` when it stops for any reason, and answers the way to stop it. */
+export type Listen = (text: string, done: () => void) => () => void;
+/** A reader on the platform's voice (`/v1/audio/speech`), one reply at a time on the page. */
+export declare function speaker(t: Target): Listen;
+/** Copy, Listen and Open under an answer; `children` follow them. */
+export declare function Reply({ text, listen, onOpen, children }: {
+    text: string;
+    listen?: Listen;
+    onOpen?: () => void;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** Which model answered, where the gateway says it was not the one asked for or a router. */
+export declare function Served({ served, asked }: {
+    served: string;
+    asked?: string;
+}): import("react").JSX.Element;

package/lib/reply.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What sits under an answer, the same in Chat and Dev: copy what was written,
+ * listen to it, and open what it made in the side panel. A surface adds its own
+ * after these (Dev's verdict).
+ *
+ * An answer's artifacts are its fenced blocks (`artifacts`): a page, a picture,
+ * a file it wrote out whole. One opens as a page tab in the side panel, rendered
+ * from its own bytes (`blob`).
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { Check, Copy, PanelRight, Square, Volume2 } from '@hanzogui/lucide-icons-2';
+import { mouth, speech } from '@hanzo/voice';
+import { useEffect, useRef, useState } from 'react';
+const FENCE = /```([^\n`]*)\n([\s\S]*?)```/g;
+const MIME = {
+    html: 'text/html',
+    htm: 'text/html',
+    svg: 'image/svg+xml',
+    css: 'text/css',
+    csv: 'text/csv',
+    json: 'application/json',
+    md: 'text/markdown',
+    markdown: 'text/markdown',
+    txt: 'text/plain',
+};
+const suffix = (s) => {
+    const dot = s.lastIndexOf('.');
+    return dot > 0 ? s.slice(dot + 1).toLowerCase() : '';
+};
+/** An info string is a file name (a dot, no spaces) or a language. */
+const called = (info, n) => {
+    const word = info.trim().split(/\s+/)[0] ?? '';
+    if (!word)
+        return `Block ${n}`;
+    if (word.includes('.') && suffix(word))
+        return word;
+    return `${word} block`;
+};
+/** Every fenced block in `text`, in order. */
+export function artifacts(text) {
+    const out = [];
+    let n = 0;
+    for (const [, info = '', body = ''] of text.matchAll(FENCE)) {
+        n += 1;
+        const name = called(info, n);
+        out.push({ name, body, mime: MIME[suffix(name) || info.trim().toLowerCase().split(/\s+/)[0] || ''] ?? 'text/plain' });
+    }
+    return out;
+}
+/** Whether a browser draws it as a page or a picture rather than as source. */
+export const renders = (a) => a.mime === 'text/html' || a.mime === 'image/svg+xml';
+/** The artifact worth opening first: the last page or picture, else the last block. */
+export function lead(list) {
+    return [...list].reverse().find(renders) ?? list[list.length - 1] ?? null;
+}
+/** An address for an artifact's own bytes, typed so a browser renders it. */
+export const blob = (a) => URL.createObjectURL(new Blob([a.body], { type: a.mime }));
+/** Markdown as a sentence a voice can read: code said as code, marks dropped. */
+export function speakable(raw) {
+    return raw
+        .replace(/```[\s\S]*?```/g, ' [code snippet] ')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1')
+        .replace(/^>\s+/gm, '')
+        .replace(/^[-*_]{3,}\s*$/gm, '')
+        .replace(/^[\s]*[-+*]\s+/gm, '')
+        .replace(/\n+/g, '. ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+let hush = null;
+/** A reader on the platform's voice (`/v1/audio/speech`), one reply at a time on the page. */
+export function speaker(t) {
+    return (text, done) => {
+        hush?.();
+        const said = speakable(text);
+        if (!said) {
+            done();
+            return () => { };
+        }
+        const lips = mouth({ speech: speech({ baseUrl: t.api, token: t.token }) });
+        const stop = () => {
+            lips.hush();
+            if (hush === stop)
+                hush = null;
+        };
+        hush = stop;
+        lips.say(said).then(done, done);
+        return stop;
+    };
+}
+/** One quiet control in the row. It rests dim and comes up under a pointer or focus. */
+function Act({ label, onPress, children, lit = false }) {
+    return (_jsx(XStack, { render: "button", role: "button", "aria-label": label, onPress: onPress, items: "center", gap: "$1", px: "$1", height: 24, rounded: "$2", cursor: "pointer", opacity: lit ? 1 : 0.55, hoverStyle: { opacity: 1, bg: '$hover' }, focusStyle: { opacity: 1 }, children: children }));
+}
+/** Copy, Listen and Open under an answer; `children` follow them. */
+export function Reply({ text, listen, onOpen, children }) {
+    const [took, setTook] = useState(false);
+    const [speaking, setSpeaking] = useState(false);
+    const stop = useRef(null);
+    useEffect(() => {
+        if (!took)
+            return;
+        const t = setTimeout(() => setTook(false), 1400);
+        return () => clearTimeout(t);
+    }, [took]);
+    useEffect(() => () => stop.current?.(), []);
+    return (_jsxs(XStack, { "data-slot": "reply", ml: "$-1", items: "center", gap: "$1.5", flexWrap: "wrap", children: [_jsx(Act, { label: took ? 'Copied' : 'Copy this answer', lit: took, onPress: () => void navigator.clipboard?.writeText(text).then(() => setTook(true), () => { }), children: took ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }) }), listen ? (_jsxs(Act, { label: speaking ? 'Stop reading' : 'Listen to this answer', lit: speaking, onPress: () => {
+                    if (speaking) {
+                        stop.current?.();
+                        setSpeaking(false);
+                        return;
+                    }
+                    setSpeaking(true);
+                    stop.current = listen(text, () => setSpeaking(false));
+                }, children: [speaking ? _jsx(Square, { size: 12 }) : _jsx(Volume2, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: speaking ? 'Stop' : 'Listen' })] })) : null, onOpen ? (_jsxs(Act, { label: "Open in the side panel", onPress: onOpen, children: [_jsx(PanelRight, { size: 13 }), _jsx(SizableText, { size: "$1", color: "$ink", children: "Open" })] })) : null, children] }));
+}
+/** Which model answered, where the gateway says it was not the one asked for or a router. */
+export function Served({ served, asked }) {
+    return (_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "served", children: `answered by ${served}${asked && asked !== served ? ` · ${asked} was unavailable` : ''}` }));
+}

package/lib/route.d.ts

@@ -8,13 +8,25 @@
  *   -/settings[/<section>]  a section of Settings
  *   -/customize[/<tab>]     skills, connectors and plugins: what the agent brings to a run
  *   -/plans                 the plans an organization can be on
- *   <slug>          a project's workspace
+ *   <org>/<repo>    a repository's workspace: a project is a repository on the forge
+ *   <slug>          a deployed site's workspace (Artifacts)
  *
  * Unambiguous by construction: a project slug is `^[a-z0-9]([a-z0-9-]{0,38}[a-z0-9])?$`,
- * so it can hold neither the `_` a session id carries nor start with `-`.
- * Anything else is not an address here and reads as the empty state.
+ * so it can hold neither the `_` a session id carries nor start with `-`, and a
+ * repository is the one address with two segments, each starting with a letter
+ * or a digit. Anything else is not an address here and reads as the empty state.
+ *
+ * A host whose address bar shows real paths writes a route with `href` and
+ * reads one back with `parse` (hanzo.ai/dev/<href>):
+ *
+ *   ''                            New
+ *   /run/<id>                     one run
+ *   /projects/<org>/<repo>        a repository's workspace
+ *   /projects/<slug>              a deployed site's workspace
+ *   /machines · /environments     the rail's own words for -/settings/machines and -/settings/environments
+ *   /<rest>                       every other address, its `-/` dropped: /projects, /customize/connectors, /settings/usage
  */
-export type Screen = 'artifacts' | 'templates' | 'codebases' | 'projects' | 'issues' | 'automations' | 'sync' | 'mcp' | 'plans';
+export type Screen = 'artifacts' | 'templates' | 'projects' | 'issues' | 'automations' | 'sync' | 'mcp' | 'plans';
 /** Settings, one section each. Every setting the builder has lives on this page, none elsewhere. */
 export declare const SECTIONS: readonly ['general', 'account', 'privacy', 'billing', 'usage', 'capabilities', 'memory', 'code', 'environments', 'machines', 'keys', 'members', 'integrations', 'notifications'];
 export type Section = (typeof SECTIONS)[number];
@@ -38,14 +50,26 @@ export type Route = {
 } | {
     kind: 'project';
     slug: string;
+} | {
+    kind: 'repo';
+    org: string;
+    name: string;
 } | {
     kind: 'automation';
     id: string;
 };
 export declare const SESSION: RegExp;
 export declare const SLUG: RegExp;
+/** An organization or a repository name on the forge (api/codebases.ts `NAME`). */
+export declare const NAME: RegExp;
 /** An automation's id, or `new` for one not yet written. */
 export declare const AUTOMATION: RegExp;
 export declare function route(path: string): Route;
+/** Every route that names no record, for a host that writes a page per address ahead of time. */
+export declare const PLACES: readonly Route[];
+/** A route as a real path under the host's mount: '' for New, `/run/<id>`, `/projects/<org>/<repo>`, `/projects/<slug>`, else its path without `-/`. */
+export declare function href(r: Route): string;
+/** The route a real path under the mount names — the inverse of `href`. A query or fragment is not part of it. */
+export declare function parse(address: string): Route;
 /** The path for a route — the inverse of `route`. */
 export declare function path(r: Route): string;

package/lib/route.js

@@ -19,9 +19,11 @@ export const SECTIONS = [
 export const TABS = ['skills', 'connectors', 'plugins', 'agents'];
 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`). */
+export const NAME = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
 /** An automation's id, or `new` for one not yet written. */
 export const AUTOMATION = /^(flow_[0-9a-f]{32}|new)$/;
-const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync', 'mcp', 'plans'];
+const SCREENS = ['artifacts', 'templates', 'projects', 'issues', 'automations', 'sync', 'mcp', 'plans'];
 export function route(path) {
     const p = path.replace(/^\/+|\/+$/g, '');
     if (SESSION.test(p))
@@ -44,8 +46,51 @@ export function route(path) {
     }
     if (SLUG.test(p))
         return { kind: 'project', slug: p };
+    const [org, name, ...rest] = p.split('/');
+    if (!rest.length && org && name && NAME.test(org) && NAME.test(name))
+        return { kind: 'repo', org, name };
     return { kind: 'new' };
 }
+/** Every route that names no record, for a host that writes a page per address ahead of time. */
+export const PLACES = [
+    { kind: 'new' },
+    { kind: 'automation', id: 'new' },
+    ...SCREENS.map((screen) => ({ kind: 'screen', screen })),
+    ...SECTIONS.map((section) => ({ kind: 'settings', section })),
+    ...TABS.map((tab) => ({ kind: 'customize', tab })),
+];
+/** The places a real path names in the rail's words rather than the builder's: each rail row is a path of its own. */
+const WORDS = new Map([
+    ['-/settings/machines', 'machines'],
+    ['-/settings/environments', 'environments'],
+]);
+const NAMES = new Map([...WORDS].map(([p, word]) => [word, p]));
+/** A route as a real path under the host's mount: '' for New, `/run/<id>`, `/projects/<org>/<repo>`, `/projects/<slug>`, else its path without `-/`. */
+export function href(r) {
+    if (r.kind === 'run')
+        return `/run/${r.id}`;
+    if (r.kind === 'repo')
+        return `/projects/${r.org}/${r.name}`;
+    if (r.kind === 'project')
+        return `/projects/${r.slug}`;
+    const p = path(r);
+    return p && `/${WORDS.get(p) ?? p.slice(2)}`;
+}
+/** The route a real path under the mount names — the inverse of `href`. A query or fragment is not part of it. */
+export function parse(address) {
+    const p = address.split(/[?#]/)[0].replace(/^\/+|\/+$/g, '');
+    const [head, one, two, ...rest] = p.split('/');
+    if (head === 'run')
+        return one && !two && SESSION.test(one) ? { kind: 'run', id: one } : { kind: 'new' };
+    if (head === 'projects' && one) {
+        if (rest.length)
+            return { kind: 'new' };
+        if (two)
+            return NAME.test(one) && NAME.test(two) ? { kind: 'repo', org: one, name: two } : { kind: 'new' };
+        return SLUG.test(one) ? { kind: 'project', slug: one } : { kind: 'new' };
+    }
+    return p ? route(NAMES.get(p) ?? `-/${p}`) : { kind: 'new' };
+}
 /** The path for a route — the inverse of `route`. */
 export function path(r) {
     switch (r.kind) {
@@ -61,6 +106,8 @@ export function path(r) {
             return r.tab === 'skills' ? '-/customize' : `-/customize/${r.tab}`;
         case 'project':
             return r.slug;
+        case 'repo':
+            return `${r.org}/${r.name}`;
         case 'automation':
             return `-/automations/${r.id}`;
     }