@hanzo/build 0.2.72 → 0.2.74

package/lib/api/agents.d.ts

@@ -69,6 +69,46 @@ export declare const EMPTY: Draft;
 export declare function refuse(d: Draft): string;
 export declare function agents(t: Target): Promise<Agent[]>;
 export declare function one(t: Target, ref: string): Promise<Agent>;
+/** One run of an agent, as its profile lists it: ok or error, what it was given and what it said. */
+export interface Run {
+    id: string;
+    status: string;
+    model: string;
+    input: string;
+    output: string;
+    error: string;
+    ms: number;
+    at: string;
+}
+export declare function run(raw: unknown): Run;
+/** An agent with its instructions and its 20 latest runs, newest first (`recentRuns`). */
+export declare function profile(t: Target, ref: string): Promise<{
+    agent: Agent;
+    runs: Run[];
+}>;
+/** A default agent a host offers: a name, its line, its model and its instructions. */
+export interface Cast {
+    name: string;
+    description: string;
+    model: string;
+    instructions: string;
+    /** Its face, an address of the host, when it has one. */
+    avatar?: string;
+}
+/** What a default agent may spend until its owner says otherwise, in dollars: each month, and one run. */
+export declare const CAST_CAP = "10";
+export declare const CAST_TASK = "1";
+/** The cast members the org has no agent for, by name in any case. */
+export declare const missing: (cast: readonly Cast[], have: readonly {
+    name: string;
+}[]) => Cast[];
+/** Create every cast member the org lacks, one at a time; the names made, and the first refusal, if any. */
+export declare function hire(t: Target, cast: readonly Cast[], have: readonly {
+    name: string;
+}[]): Promise<{
+    made: string[];
+    error: unknown;
+}>;
 export declare function create(t: Target, d: Draft): Promise<Agent>;
 /** The fields that differ from `was`, and nothing else: an omitted field keeps its value. */
 export declare function changes(was: Agent, d: Draft): Record<string, unknown>;

package/lib/api/agents.js

@@ -86,6 +86,37 @@ export async function agents(t) {
 export async function one(t, ref) {
     return agent(await call(t, 'GET', `/v1/agent/${seg(ref)}`));
 }
+export function run(raw) {
+    const o = obj(raw);
+    return { id: str(o.id), status: str(o.status), model: str(o.model), input: str(o.input), output: str(o.output), error: str(o.error), ms: num(o.durationMs), at: str(o.createdAt) };
+}
+/** An agent with its instructions and its 20 latest runs, newest first (`recentRuns`). */
+export async function profile(t, ref) {
+    const raw = await call(t, 'GET', `/v1/agent/${seg(ref)}`);
+    return { agent: agent(raw), runs: rows(obj(raw).recentRuns).map(run).filter((r) => r.id) };
+}
+/** What a default agent may spend until its owner says otherwise, in dollars: each month, and one run. */
+export const CAST_CAP = '10';
+export const CAST_TASK = '1';
+/** The cast members the org has no agent for, by name in any case. */
+export const missing = (cast, have) => {
+    const names = new Set(have.map((a) => a.name.toLowerCase()));
+    return cast.filter((c) => !names.has(c.name.toLowerCase()));
+};
+/** Create every cast member the org lacks, one at a time; the names made, and the first refusal, if any. */
+export async function hire(t, cast, have) {
+    const made = [];
+    for (const c of missing(cast, have)) {
+        try {
+            await create(t, { ...EMPTY, name: c.name, description: c.description, model: c.model, instructions: c.instructions, cap: CAST_CAP, task: CAST_TASK, period: 'month' });
+            made.push(c.name);
+        }
+        catch (error) {
+            return { made, error };
+        }
+    }
+    return { made, error: null };
+}
 export async function create(t, d) {
     const why = refuse(d);
     if (why)

package/lib/builder.js

@@ -34,6 +34,7 @@ import { SessionRail } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzo/ui/product';
 import { useMemo, useState } from 'react';
 import { safe } from './api/projects.js';
+import { Profile } from './customize/agents.js';
 import { Customize } from './customize/index.js';
 import { Editor } from './automations.js';
 import { useKept, useRecents } from './data.js';
@@ -107,7 +108,9 @@ function Pane({ onStarted }) {
     if (r.kind === 'settings')
         return _jsx(Settings, { section: r.section });
     if (r.kind === 'customize')
-        return _jsx(Customize, { tab: r.tab });
+        return _jsx(Customize, { tab: r.tab }, r.tab);
+    if (r.kind === 'agent')
+        return _jsx(Profile, { name: r.name }, r.name);
     if (r.kind === 'automation')
         return _jsx(Editor, { id: r.id }, r.id);
     if (r.kind === 'screen') {

package/lib/carry.d.ts

@@ -39,4 +39,4 @@ export interface Asked {
  * `customize(tab)` opens Dev's Customize on that tab; `modes` are the ones this
  * surface offers (a choice it does not offer reads as Auto).
  */
-export declare function useCarry(t: Target, key: string, customize: (tab: 'skills') => void, lent: Lent, modes: readonly Mode[]): Carry;
+export declare function useCarry(t: Target, key: string, customize: (tab: 'skills') => void, lent: Lent, modes?: readonly Mode[]): Carry;

package/lib/carry.js

@@ -25,7 +25,7 @@ import { active, authored, document, nameOf as skillOf } from './api/skills.js';
 import { brand, brands } from './api/studio.js';
 import { useRead } from './data.js';
 import { said as designSaid } from './design.js';
-import { useGear } from './gear.js';
+import { DEV_MODES, useGear } from './gear.js';
 import { active as lighted, prep, shelf as pluginShelf, usePlugins } from './plugins/index.js';
 /** The most of each skill a message carries. */
 const SKILL_MAX = 16_000;
@@ -72,7 +72,7 @@ function Allow({ what, onAnswer }) {
  * `customize(tab)` opens Dev's Customize on that tab; `modes` are the ones this
  * surface offers (a choice it does not offer reads as Auto).
  */
-export function useCarry(t, key, customize, lent, modes) {
+export function useCarry(t, key, customize, lent, modes = DEV_MODES) {
     const gear = useGear(t, key);
     const [dialog, show] = useState(null);
     // The composer a plugin acts on, read when it acts: the draft moves under it.

package/lib/customize/agents.d.ts

@@ -1,2 +1,6 @@
 import { type Pane } from './ui.tsx';
 export declare function Agents({ view, q, adding, onAdding, onView, onCount }: Pane): import("react").JSX.Element;
+/** One agent's page: who it is, what it runs on and reads, what it may call and spend, and what it has done. */
+export declare function Profile({ name }: {
+    name: string;
+}): import("react").JSX.Element;

package/lib/customize/agents.js

@@ -5,21 +5,25 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  *
  * Browse is the platform's presets whose tool calls run on the platform;
  * starting from one opens a new agent written from it. Yours lists the org's
- * agents; opening one edits it in place, and only what changed is sent. An
+ * agents, and Add default agents makes every member of the host's cast the org
+ * has none for (an org starts with none). Opening one is its profile page
+ * (`-/customize/agents/<name>`): its face, part, model, instructions, tools,
+ * budget and runs, edited in place, and only what changed is sent. An
  * agent calls only the tools it names, and only those that are on for the org,
  * so the choices are the tools that are on; "every tool" is whatever the
  * fleet's MCP server serves when it runs. A budget is required: what it may
  * spend each period, and in one run.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { Bot } from '@hanzogui/lucide-icons-2';
+import { ArrowLeft, Bot, Users } from '@hanzogui/lucide-icons-2';
 import { Button, Input, Switch, Textarea } from '@hanzo/ui';
 import { ModelPicker } from '@hanzo/ui/models';
 import { useEffect, useMemo, useState } from 'react';
-import { agents, ALL, create, draft, EMPTY, fromPreset, one, PERIODS, presets, remove, update } from '../api/agents.js';
+import { agents, ALL, create, draft, EMPTY, fromPreset, hire, missing, one, PERIODS, presets, profile, remove, update } from '../api/agents.js';
 import { models } from '../api/models.js';
 import { tools } from '../api/tools.js';
 import { useHost, useTarget } from '../host.js';
+import { path } from '../route.js';
 import { useLoad } from './load.js';
 import { say } from './say.js';
 import { Add, Choice, Confirm, Empty, Failed, Field, Grid, Line, Mark, matches, mono, Part, Sheet, Soft, Tile, useCount, Visitor } from './ui.js';
@@ -31,9 +35,21 @@ export function Agents({ view, q, adding, onAdding, onView, onCount }) {
     const mine = useLoad(signed ? () => agents(t) : null, [], [t, signed]);
     const offered = useLoad(view === 'discover' ? () => presets(t) : null, [], [t, view]);
     useCount(mine.value.length, onCount);
-    const [opened, setOpened] = useState(null);
     const [start, setStart] = useState(null);
     const [note, setNote] = useState('');
+    const [hiring, setHiring] = useState(false);
+    const cast = host.cast ?? [];
+    const lacking = missing(cast, mine.value);
+    // The host's cast, made in one press: each member the org has no agent for.
+    const addCast = async () => {
+        setHiring(true);
+        setNote('');
+        const { made, error } = await hire(t, cast, mine.value);
+        setHiring(false);
+        mine.reload();
+        setNote(error ? `${made.length ? `Added ${made.length}. ` : ''}${say(error)}` : `Added ${made.length} default ${made.length === 1 ? 'agent' : 'agents'}`);
+    };
+    const castButton = signed && lacking.length ? (_jsxs(Button, { size: "sm", variant: "outline", disabled: hiring, onPress: () => void addCast(), children: [_jsx(Users, { size: 14 }), " ", hiring ? 'Adding…' : lacking.length === cast.length ? 'Add default agents' : `Add ${lacking.length} default ${lacking.length === 1 ? 'agent' : 'agents'}`] })) : null;
     const closeNew = () => {
         setStart(null);
         onAdding(false);
@@ -43,14 +59,6 @@ export function Agents({ view, q, adding, onAdding, onView, onCount }) {
             onView('yours');
             mine.reload();
             setNote(`${a.name} is saved`);
-        } })) : opened ? (_jsx(Editor, { agent: opened, onClose: () => setOpened(null), onSaved: (a) => {
-            setOpened(null);
-            mine.reload();
-            setNote(`${a.name} is saved`);
-        }, onDeleted: () => {
-            setNote(`${opened.name} is deleted`);
-            setOpened(null);
-            mine.reload();
         } })) : null;
     if (view === 'discover') {
         const names = new Set(mine.value.map((a) => a.name));
@@ -61,12 +69,30 @@ export function Agents({ view, q, adding, onAdding, onView, onCount }) {
         return _jsx(Visitor, { children: "Sign in to see your agents." });
     }
     const shown = mine.value.filter((a) => matches(q, a.name, a.description, a.model));
-    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your agents\u2026" })) : !mine.value.length ? (_jsxs(Empty, { title: "No agents yet", detail: "Start from a preset, or give a new one a model, instructions and tools.", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse presets" }), _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "New agent" })] })) : !shown.length ? (_jsx(Soft, { children: `No agent of yours matches “${q.trim()}”.` })) : (_jsx(Grid, { label: "Your agents", children: shown.map((a) => (_jsx(Tile, { title: a.name, detail: a.description || 'No description.', meta: [a.model, `${a.runs} ${a.runs === 1 ? 'run' : 'runs'}`, reach(a), a.cap ? `${money(a.spent)} of ${money(a.cap)} this ${a.period || 'period'}` : ''].filter(Boolean).join(' · '), mark: _jsx(Mark, { name: a.name, icon: a.emoji ? _jsx(SizableText, { size: "$4", children: a.emoji }) : undefined }), onOpen: () => setOpened(a) }, a.id || a.name))) })), editor] }));
-    function reach(a) {
-        if (a.tools.includes(ALL))
-            return 'every tool';
-        return a.tools.length === 1 ? '1 tool' : `${a.tools.length} tools`;
-    }
+    return (_jsxs(YStack, { gap: "$3", children: [_jsx(Line, { children: note }), mine.error && !mine.value.length ? (_jsx(Failed, { error: mine.error, onRetry: mine.reload })) : mine.loading && !mine.value.length ? (_jsx(Soft, { children: "Loading your agents\u2026" })) : !mine.value.length ? (_jsxs(Empty, { title: "No agents yet", detail: cast.length ? 'Add the default team, start from a preset, or give a new one a model, instructions and tools.' : 'Start from a preset, or give a new one a model, instructions and tools.', children: [castButton, _jsx(Button, { size: "sm", variant: "outline", onPress: () => onView('discover'), children: "Browse presets" }), _jsx(Button, { size: "sm", onPress: () => onAdding(true), children: "New agent" })] })) : !shown.length ? (_jsx(Soft, { children: `No agent of yours matches “${q.trim()}”.` })) : (_jsxs(_Fragment, { children: [castButton ? _jsx(XStack, { children: castButton }) : null, _jsx(Grid, { label: "Your agents", children: shown.map((a) => (_jsx(Tile, { title: a.name, detail: a.description || 'No description.', meta: [a.model, `${a.runs} ${a.runs === 1 ? 'run' : 'runs'}`, reach(a), a.cap ? `${money(a.spent)} of ${money(a.cap)} this ${a.period || 'period'}` : ''].filter(Boolean).join(' · '), mark: _jsx(Face, { agent: a, cast: cast }), onOpen: () => host.go(path({ kind: 'agent', name: a.name })) }, a.id || a.name))) })] })), editor] }));
+}
+function reach(a) {
+    if (a.tools.includes(ALL))
+        return 'every tool';
+    return a.tools.length === 1 ? '1 tool' : `${a.tools.length} tools`;
+}
+/** An agent's face: the cast member's picture, its emoji, or its initial. */
+function Face({ agent: a, cast, size = 32 }) {
+    const avatar = cast.find((c) => c.name.toLowerCase() === a.name.toLowerCase())?.avatar;
+    return _jsx(Mark, { name: a.name, size: size, logo: avatar, icon: a.emoji ? _jsx(SizableText, { size: size > 40 ? '$8' : '$4', children: a.emoji }) : undefined });
+}
+/** One agent's page: who it is, what it runs on and reads, what it may call and spend, and what it has done. */
+export function Profile({ name }) {
+    const host = useHost();
+    const t = useTarget();
+    const got = useLoad(host.person ? () => profile(t, name) : null, null, [t, name]);
+    const [editing, setEditing] = useState(false);
+    const back = () => host.go(path({ kind: 'customize', tab: 'agents' }));
+    const a = got.value?.agent;
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: [_jsxs(YStack, { width: "100%", maxW: 880, mx: "auto", gap: "$5", children: [_jsxs(XStack, { render: "button", onPress: back, items: "center", gap: "$1.5", self: "flex-start", cursor: "pointer", "aria-label": "Back to agents", children: [_jsx(ArrowLeft, { size: 14, color: "$soft" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Agents" })] }), !host.person ? (_jsx(Visitor, { children: "Sign in to see this agent." })) : got.error && !a ? (_jsx(Failed, { error: got.error, onRetry: got.reload })) : !a ? (_jsx(Soft, { children: "Loading the agent\u2026" })) : (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Face, { agent: a, cast: host.cast ?? [], size: 64 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", numberOfLines: 1, children: a.name }), _jsx(SizableText, { size: "$3", color: "$soft", children: a.description || 'No role written yet.' })] }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setEditing(true), children: "Edit" })] }), _jsx(Part, { title: "Model", detail: a.model || 'The deployment’s default' }), _jsx(Part, { title: "Instructions", detail: a.instructions ? '' : 'None written: it runs on its model alone.', children: a.instructions ? (_jsx(YStack, { p: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", maxH: 320, overflow: "scroll", children: _jsx(SizableText, { size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap' }, children: a.instructions }) })) : null }), _jsx(Part, { title: "Tools", detail: a.tools.includes(ALL) ? 'Every tool the fleet’s MCP server serves.' : a.tools.length ? a.tools.join(', ') : 'None: it calls no tool.' }), _jsx(Part, { title: "Budget", detail: a.cap ? `${money(a.spent)} of ${money(a.cap)} spent this ${a.period || 'period'}; at most ${money(a.task)} a run.` : 'No budget set.' }), _jsx(Part, { title: "Runs", detail: a.runs ? `${a.runs} in all; the latest ${Math.min(a.runs, got.value.runs.length)} below.` : 'It has not run yet.', children: got.value.runs.map((r) => (_jsxs(XStack, { gap: "$3", py: "$2", borderTopWidth: 1, borderColor: "$borderColor", items: "flex-start", children: [_jsx(SizableText, { size: "$1", color: r.status === 'ok' ? '$soft' : '$bad', width: 44, shrink: 0, children: r.status === 'ok' ? 'ok' : 'failed' }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: r.input || '(no input)' }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: r.status === 'ok' ? r.output : r.error })] }), _jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: [r.model, r.at ? new Date(r.at).toLocaleString() : ''].filter(Boolean).join(' · ') })] }, r.id))) })] }))] }), editing && a ? (_jsx(Editor, { agent: a, onClose: () => setEditing(false), onSaved: () => {
+                    setEditing(false);
+                    got.reload();
+                }, onDeleted: back })) : null] }));
 }
 /** Write a new agent, or change one; an existing agent is read whole first, for its instructions. */
 function Editor({ agent, start, onClose, onSaved, onDeleted, }) {

package/lib/customize/index.js

@@ -29,10 +29,11 @@ const LABEL = {
     plugins: { title: 'Plugins', says: 'Connectors you build in TypeScript.', add: 'Build plugin', find: 'Search plugins', icon: _jsx(Puzzle, { size: 15 }) },
     agents: { title: 'Agents', says: 'Agents with their own model, instructions and budget.', add: 'New agent', find: 'Search agents', icon: _jsx(Bot, { size: 15 }) },
 };
+/** Where a tab opens: an org's own agents (and the cast to add) for Agents; Browse for the rest, what there is to add being the page. */
+const opens = (tab) => (tab === 'agents' ? 'yours' : 'discover');
 export function Customize({ tab, view: first }) {
     const host = useHost();
-    // Browse first, always: a first visit has nothing of its own to show, and what there is to add is the page.
-    const [view, setView] = useState(first ?? 'discover');
+    const [view, setView] = useState(first ?? opens(tab));
     const [q, setQ] = useState('');
     const [adding, setAdding] = useState(false);
     const [count, setCount] = useState(0);
@@ -40,17 +41,17 @@ export function Customize({ tab, view: first }) {
     const pick = (next) => {
         setQ('');
         setAdding(false);
-        setView('discover');
+        setView(opens(next));
         setCount(0);
         host.go(path({ kind: 'customize', tab: next }));
     };
     const pane = { view, q, adding, onAdding: setAdding, onView: setView, onCount };
     const kit = ORG_KIT.includes(tab);
     const may = Boolean(host.person) && (host.admin || !kit);
-    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1080, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: "Customize" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "What your agent can use in every run." })] }), _jsx(XStack, { role: "tablist", "aria-label": "Customize", gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: TABS.map((id) => {
+    return (_jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", "$max-md": { px: '$4', py: '$4' }, children: _jsxs(YStack, { width: "100%", maxW: 1080, mx: "auto", gap: "$4", children: [_jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$6", color: "$ink", children: host.sections ? LABEL[tab].title : 'Customize' }), _jsx(SizableText, { size: "$2", color: "$soft", children: host.sections ? LABEL[tab].says : 'What your agent can use in every run.' })] }), host.sections ? null : (_jsx(XStack, { role: "tablist", "aria-label": "Customize", gap: "$4", borderBottomWidth: 1, borderColor: "$borderColor", "$max-md": { gap: '$3' }, children: TABS.map((id) => {
                         const on = id === tab;
                         return (_jsxs(XStack, { role: "tab", render: "button", "aria-selected": on, onPress: () => pick(id), items: "center", gap: "$1.5", pb: "$2", mb: -1, borderBottomWidth: 2, borderColor: on ? '$ink' : 'transparent', hoverStyle: { borderColor: on ? '$ink' : '$edge' }, children: [_jsx(XStack, { opacity: on ? 1 : 0.6, "$max-md": { display: 'none' }, children: LABEL[id].icon }), _jsx(SizableText, { size: "$3", color: on ? '$ink' : '$soft', children: LABEL[id].title })] }, id));
-                    }) }), _jsx(SizableText, { size: "$2", color: "$soft", children: LABEL[tab].says }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: "Show", value: view, options: [
+                    }) })), host.sections ? null : (_jsx(SizableText, { size: "$2", color: "$soft", children: LABEL[tab].says })), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Choice, { label: "Show", value: view, options: [
                                 { id: 'discover', label: 'Browse' },
                                 { id: 'yours', label: 'Yours', count },
                             ], onChange: setView }), _jsx(XStack, { flex: 1 }), may ? (_jsxs(Button, { size: "sm", onPress: () => setAdding(true), children: [_jsx(Plus, { size: 14 }), " ", LABEL[tab].add] })) : null] }), _jsx(Input, { value: q, onChangeText: setQ, placeholder: `${LABEL[tab].find}…`, "aria-label": LABEL[tab].find }), host.person && kit && !host.admin ? (_jsxs(SizableText, { size: "$1", color: "$soft", children: ["Only an org admin can add or change ", LABEL[tab].title.toLowerCase(), ". You can see what is on."] })) : null, tab === 'skills' ? (_jsx(Skills, { ...pane })) : tab === 'connectors' ? (_jsx(Connectors, { ...pane })) : tab === 'plugins' ? (_jsx(Plugins, { ...pane })) : (_jsx(Agents, { ...pane }))] }) }));

package/lib/host.d.ts

@@ -8,6 +8,7 @@
  * as values, so no host forks the builder and the builder imports no host.
  */
 import { type ComponentType, type ReactNode } from 'react';
+import type { Cast } from './api/agents.ts';
 import type { Target } from './api/call.ts';
 import type { Theme } from './api/pref.ts';
 export interface Person {
@@ -104,6 +105,10 @@ export interface Host {
     browse?: Browse;
     /** What the host's browser does to a page, row by row in the tab's menu. */
     browser?: Browser;
+    /** The host's sidebar lists Settings' sections and Customize's tabs, so the pages draw neither. */
+    sections?: boolean;
+    /** The default agents an org may add in one press (Customize › Agents). Absent, none are offered. */
+    cast?: readonly Cast[];
 }
 export declare function HostProvider({ host, children }: {
     host: Host;

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, type Group } from './nav.tsx';
+export { nav, NEW, own, sections, tabs, 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 } from './nav.js';
+export { nav, NEW, own, sections, tabs } from './nav.js';
 export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
 export { Slack, useWho, Who } from './foot.js';

package/lib/nav.d.ts

@@ -1,11 +1,21 @@
 import type { RailLink } from '@hanzo/ui/chat';
 import type { Host } from './host.tsx';
-/** A run of places under one quiet label. */
+/** A run of places under one quiet label; '' draws none. */
 export interface Group {
-    id: 'work' | 'make' | 'run' | 'setup';
+    id: string;
     label: string;
     links: RailLink[];
 }
 /** The id of the row that starts a new run: a rail with a New control of its own draws that instead. */
 export declare const NEW = "new";
 export declare function nav(host: Host, go: (path: string) => void): Group[];
+/** Dev's own places: what a host whose rail holds the rest (Library, Scheduled tasks, Customize) lists in Dev's sidebar. */
+export declare const own: (host: Host, go: (path: string) => void) => Group[];
+/**
+ * Settings' sections as a host's sidebar lists them: one group per part, a
+ * part's label drawn only where it is not its first row's name (Code leads
+ * Code's part, so the part is not labelled twice).
+ */
+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[];

package/lib/nav.js

@@ -9,10 +9,11 @@ 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 { BookOpen, CircleDot, Clock, Container, Cpu, FolderGit2, LayoutTemplate, Library, SlidersHorizontal, SquarePen } from '@hanzogui/lucide-icons-2';
+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 { pinBoard } from './choice.js';
 import { DOCS } from './foot.js';
-import { path, route } from './route.js';
+import { path, route, TABS } from './route.js';
+import { GROUPS, heading, LIST } from './settings/list.js';
 /** The id of the row that starts a new run: a rail with a New control of its own draws that instead. */
 export const NEW = 'new';
 export function nav(host, go) {
@@ -44,6 +45,7 @@ export function nav(host, go) {
                     },
                     active: screen === 'issues',
                 },
+                { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
             ],
         },
         {
@@ -51,7 +53,6 @@ export function nav(host, go) {
             label: 'Make',
             links: [
                 { id: 'artifacts', label: 'Library', icon: _jsx(Library, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'artifacts' })), active: screen === 'artifacts' },
-                { id: 'templates', label: 'Templates', icon: _jsx(LayoutTemplate, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'templates' })), active: screen === 'templates' },
                 { id: 'automations', label: 'Scheduled tasks', icon: _jsx(Clock, { size: 16 }), onPress: to(path({ kind: 'screen', screen: 'automations' })), active: screen === 'automations' || r.kind === 'automation' },
             ],
         },
@@ -67,9 +68,52 @@ export function nav(host, go) {
             id: 'setup',
             label: 'Setup',
             links: [
-                { id: 'customize', label: 'Customize', icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: to(path({ kind: 'customize', tab: 'skills' })), active: r.kind === 'customize' || screen === 'mcp' },
+                { id: 'customize', label: 'Customize', icon: _jsx(SlidersHorizontal, { size: 16 }), onPress: to(path({ kind: 'customize', tab: 'agents' })), active: r.kind === 'customize' || r.kind === 'agent' || screen === 'mcp' },
                 { id: 'docs', label: 'Docs', icon: _jsx(BookOpen, { size: 16 }), onPress: () => window.open(DOCS, '_blank', 'noopener,noreferrer') },
             ],
         },
     ];
 }
+/** Dev's own places: what a host whose rail holds the rest (Library, Scheduled tasks, Customize) lists in Dev's sidebar. */
+export const own = (host, go) => nav(host, go).filter((g) => g.id === 'work');
+/**
+ * Settings' sections as a host's sidebar lists them: one group per part, a
+ * part's label drawn only where it is not its first row's name (Code leads
+ * Code's part, so the part is not labelled twice).
+ */
+export function sections(host, go) {
+    const r = route(host.path);
+    const at = r.kind === 'settings' ? r.section : '';
+    return GROUPS.map((g) => {
+        const rows = LIST.filter((e) => e.group === g);
+        return {
+            id: g,
+            label: heading(g),
+            links: rows.map((e) => ({ id: e.id, label: e.label, icon: SECTION_ICON[e.id], onPress: () => go(path({ kind: 'settings', section: e.id })), active: e.id === at })),
+        };
+    });
+}
+/** Customize's tabs as a host's sidebar lists them, Agents first; an agent's profile lights Agents. */
+export function tabs(host, go) {
+    const r = route(host.path);
+    const at = r.kind === 'customize' ? r.tab : r.kind === 'agent' ? 'agents' : '';
+    return [{ id: 'customize', label: '', links: TABS.map((t) => ({ id: t, label: TAB_LABEL[t], icon: TAB_ICON[t], onPress: () => go(path({ kind: 'customize', tab: t })), active: t === at })) }];
+}
+const TAB_LABEL = { agents: 'Agents', skills: 'Skills', connectors: 'Connectors', plugins: 'Plugins' };
+const TAB_ICON = { agents: _jsx(Bot, { size: 16 }), skills: _jsx(BookOpen, { size: 16 }), connectors: _jsx(Plug, { size: 16 }), plugins: _jsx(Puzzle, { size: 16 }) };
+const SECTION_ICON = {
+    general: _jsx(Settings, { size: 16 }),
+    account: _jsx(User, { size: 16 }),
+    privacy: _jsx(Shield, { size: 16 }),
+    billing: _jsx(CreditCard, { size: 16 }),
+    usage: _jsx(Gauge, { size: 16 }),
+    capabilities: _jsx(Sparkles, { size: 16 }),
+    memory: _jsx(Brain, { size: 16 }),
+    code: _jsx(Code, { size: 16 }),
+    environments: _jsx(Container, { size: 16 }),
+    machines: _jsx(Cpu, { size: 16 }),
+    keys: _jsx(Key, { size: 16 }),
+    members: _jsx(Users, { size: 16 }),
+    integrations: _jsx(Plug, { size: 16 }),
+    notifications: _jsx(Bell, { size: 16 }),
+};

package/lib/plugins/index.d.ts

@@ -17,7 +17,7 @@ export declare function usePlugins(t: Target): Plugins;
 export declare function shelf(p: Plugins, g: GearState, c: Composer): Shelf;
 /** The plugins this message asks, in the menu's order. */
 export declare const active: (plugins: readonly Plugin[], g: Gear) => Plugin[];
-/** Several plugins' preparations as one: system parts and replies in order, files together. */
+/** Several plugins' preparations as one: system parts and replies in order, files together, the design system one made. */
 export declare function merge(preps: readonly Prep[]): Prep;
 /**
  * Ask every plugin that is on what the message carries. A plugin that fails

package/lib/plugins/index.js

@@ -96,19 +96,23 @@ export function shelf(p, g, c) {
 }
 /** The plugins this message asks, in the menu's order. */
 export const active = (plugins, g) => plugins.filter((p) => p.prepare && on(p, g));
-/** Several plugins' preparations as one: system parts and replies in order, files together. */
+/** Several plugins' preparations as one: system parts and replies in order, files together, the design system one made. */
 export function merge(preps) {
     const join = (k) => preps.map((p) => p[k]?.trim()).filter(Boolean).join('\n\n') || undefined;
     const files = preps.flatMap((p) => p.files ?? []);
     const out = {};
     const system = join('system');
     const reply = join('reply');
+    // A design system a plugin made is attached by the host (carry.tsx); dropped here, it never was.
+    const design = preps.map((p) => p.design).filter(Boolean).at(-1);
     if (system)
         out.system = system;
     if (reply)
         out.reply = reply;
     if (files.length)
         out.files = files;
+    if (design)
+        out.design = design;
     return out;
 }
 /**

package/lib/route.d.ts

@@ -6,7 +6,8 @@
  *   -/<screen>      a builder screen
  *   -/automations/<id>      one automation's editor and runs; `new` writes one
  *   -/settings[/<section>]  a section of Settings
- *   -/customize[/<tab>]     skills, connectors and plugins: what the agent brings to a run
+ *   -/customize[/<tab>]     agents, skills, connectors and plugins: what the agent brings to a run
+ *   -/customize/agents/<name>  one agent's profile
  *   -/plans                 the plans an organization can be on
  *   <org>/<repo>    a repository's workspace: a project is a repository on the forge
  *   <slug>          a deployed site's workspace (Artifacts)
@@ -30,8 +31,8 @@ export type Screen = 'artifacts' | 'templates' | 'projects' | 'issues' | 'automa
 /** 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];
-/** Customize, one tab each: what the agent brings to a run, yours and to discover. */
-export declare const TABS: readonly ['skills', 'connectors', 'plugins', 'agents'];
+/** Customize, one tab each: what the agent brings to a run, yours and to discover. Agents first. */
+export declare const TABS: readonly ['agents', 'skills', 'connectors', 'plugins'];
 export type Tab = (typeof TABS)[number];
 export type Route = {
     kind: 'new';
@@ -47,6 +48,9 @@ export type Route = {
 } | {
     kind: 'customize';
     tab: Tab;
+} | {
+    kind: 'agent';
+    name: string;
 } | {
     kind: 'project';
     slug: string;

package/lib/route.js

@@ -15,8 +15,8 @@ export const SECTIONS = [
     'integrations',
     'notifications',
 ];
-/** Customize, one tab each: what the agent brings to a run, yours and to discover. */
-export const TABS = ['skills', 'connectors', 'plugins', 'agents'];
+/** Customize, one tab each: what the agent brings to a run, yours and to discover. Agents first. */
+export const TABS = ['agents', 'skills', 'connectors', 'plugins'];
 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`). */
@@ -32,8 +32,12 @@ export function route(path) {
         const section = (p.slice('-/settings/'.length) || 'general');
         return SECTIONS.includes(section) ? { kind: 'settings', section } : { kind: 'new' };
     }
+    if (p.startsWith('-/customize/agents/')) {
+        const name = p.slice('-/customize/agents/'.length);
+        return NAME.test(name) ? { kind: 'agent', name } : { kind: 'new' };
+    }
     if (p === '-/customize' || p.startsWith('-/customize/')) {
-        const tab = (p.slice('-/customize/'.length) || 'skills');
+        const tab = (p.slice('-/customize/'.length) || 'agents');
         return TABS.includes(tab) ? { kind: 'customize', tab } : { kind: 'new' };
     }
     if (p.startsWith('-/automations/')) {
@@ -103,7 +107,9 @@ export function path(r) {
         case 'settings':
             return r.section === 'general' ? '-/settings' : `-/settings/${r.section}`;
         case 'customize':
-            return r.tab === 'skills' ? '-/customize' : `-/customize/${r.tab}`;
+            return r.tab === 'agents' ? '-/customize' : `-/customize/${r.tab}`;
+        case 'agent':
+            return `-/customize/agents/${r.name}`;
         case 'project':
             return r.slug;
         case 'repo':

package/lib/settings/index.js

@@ -8,14 +8,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { useHost } from '../host.js';
 import { path } from '../route.js';
+import { heading } from './list.js';
 import { ENTRIES, GROUPS } from './sections.js';
 export function Settings({ section }) {
     const host = useHost();
     // Every section the route grammar names has an entry.
     const entry = ENTRIES.find((e) => e.id === section);
     const go = (id) => host.go(path({ kind: 'settings', section: id }));
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, children: [_jsxs(YStack, { role: "navigation", "aria-label": "Settings", width: 220, shrink: 0, borderRightWidth: 1, borderColor: "$borderColor", px: "$2", py: "$4", gap: "$4", overflow: "scroll", "$max-md": { display: 'none' }, children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: "Settings" }), GROUPS.map((g) => {
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, children: [host.sections ? null : (_jsxs(YStack, { role: "navigation", "aria-label": "Settings", width: 220, shrink: 0, borderRightWidth: 1, borderColor: "$borderColor", px: "$2", py: "$4", gap: "$4", overflow: "scroll", "$max-md": { display: 'none' }, children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: "Settings" }), GROUPS.map((g) => {
                         const list = ENTRIES.filter((e) => e.group === g);
-                        return (_jsxs(YStack, { gap: "$0.5", children: [g === 'Settings' ? null : (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g })), list.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, "aria-current": e.id === entry.id ? 'page' : undefined, onPress: () => go(e.id), px: "$2", py: "$1.5", rounded: "$2", bg: e.id === entry.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id)))] }, g));
-                    })] }), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, overflow: "scroll", children: [_jsx(XStack, { flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: ENTRIES.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, onPress: () => go(e.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: e.id === entry.id ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id))) }), _jsx(YStack, { width: "100%", maxW: 760, self: "center", px: "$5", py: "$6", children: entry.body() })] })] }));
+                        return (_jsxs(YStack, { gap: "$0.5", children: [heading(g) ? (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g })) : null, list.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, "aria-current": e.id === entry.id ? 'page' : undefined, onPress: () => go(e.id), px: "$2", py: "$1.5", rounded: "$2", bg: e.id === entry.id ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, children: _jsx(SizableText, { size: "$2", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id)))] }, g));
+                    })] })), _jsxs(YStack, { flex: 1, minW: 0, minH: 0, overflow: "scroll", children: [_jsx(XStack, { flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: ENTRIES.map((e) => (_jsx(XStack, { render: "button", "aria-label": e.label, onPress: () => go(e.id), px: "$2.5", py: "$1", rounded: "$10", borderWidth: 1, borderColor: e.id === entry.id ? '$ink' : '$borderColor', children: _jsx(SizableText, { size: "$1", color: e.id === entry.id ? '$ink' : '$soft', children: e.label }) }, e.id))) }), _jsx(YStack, { width: "100%", maxW: 760, self: "center", px: "$5", py: "$6", children: entry.body() })] })] }));
 }

package/lib/settings/list.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The sections of Settings, in the order the page lists them, by name and part
+ * alone: what a sidebar lists without loading the sections themselves
+ * (sections.tsx pairs each with its body).
+ */
+import type { Section } from '../route.ts';
+export type Group = 'Settings' | 'Code' | 'Organization';
+export declare const GROUPS: readonly Group[];
+export declare const LIST: readonly {
+    id: Section;
+    label: string;
+    group: Group;
+}[];
+/** A part's label as a list draws it: none for the first part, or where the part's first row already says it (Code). */
+export declare const heading: (g: Group) => string;

package/lib/settings/list.js

@@ -0,0 +1,19 @@
+export const GROUPS = ['Settings', 'Code', 'Organization'];
+export const LIST = [
+    { id: 'general', label: 'General', group: 'Settings' },
+    { id: 'account', label: 'Account', group: 'Settings' },
+    { id: 'privacy', label: 'Privacy', group: 'Settings' },
+    { id: 'billing', label: 'Billing', group: 'Settings' },
+    { id: 'usage', label: 'Usage', group: 'Settings' },
+    { id: 'capabilities', label: 'Capabilities', group: 'Settings' },
+    { id: 'memory', label: 'Memory', group: 'Settings' },
+    { id: 'code', label: 'Code', group: 'Code' },
+    { id: 'environments', label: 'Environments', group: 'Code' },
+    { id: 'machines', label: 'Machines', group: 'Code' },
+    { id: 'keys', label: 'API keys', group: 'Code' },
+    { id: 'members', label: 'Members', group: 'Organization' },
+    { id: 'integrations', label: 'Integrations', group: 'Organization' },
+    { id: 'notifications', label: 'Notifications', group: 'Organization' },
+];
+/** A part's label as a list draws it: none for the first part, or where the part's first row already says it (Code). */
+export const heading = (g) => (g === 'Settings' || LIST.find((e) => e.group === g)?.label === g ? '' : g);

package/lib/settings/sections.d.ts

@@ -5,8 +5,8 @@
  */
 import type { ReactNode } from 'react';
 import type { Section } from '../route.ts';
-export type Group = 'Settings' | 'Code' | 'Organization';
-export declare const GROUPS: readonly Group[];
+import { type Group } from './list.ts';
+export { GROUPS, type Group } from './list.ts';
 export interface Entry {
     id: Section;
     label: string;

package/lib/settings/sections.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { LIST } from './list.js';
 import { Account } from './account.js';
 import { Billing } from './billing.js';
 import { Capabilities } from './capabilities.js';
@@ -13,20 +14,21 @@ import { Memory } from './memory.js';
 import { Notifications } from './notifications.js';
 import { Privacy } from './privacy.js';
 import { Usage } from './usage.js';
-export const GROUPS = ['Settings', 'Code', 'Organization'];
-export const ENTRIES = [
-    { id: 'general', label: 'General', group: 'Settings', body: () => _jsx(General, {}) },
-    { id: 'account', label: 'Account', group: 'Settings', body: () => _jsx(Account, {}) },
-    { id: 'privacy', label: 'Privacy', group: 'Settings', body: () => _jsx(Privacy, {}) },
-    { id: 'billing', label: 'Billing', group: 'Settings', body: () => _jsx(Billing, {}) },
-    { id: 'usage', label: 'Usage', group: 'Settings', body: () => _jsx(Usage, {}) },
-    { id: 'capabilities', label: 'Capabilities', group: 'Settings', body: () => _jsx(Capabilities, {}) },
-    { id: 'memory', label: 'Memory', group: 'Settings', body: () => _jsx(Memory, {}) },
-    { id: 'code', label: 'Code', group: 'Code', body: () => _jsx(Code, {}) },
-    { id: 'environments', label: 'Environments', group: 'Code', body: () => _jsx(Environments, {}) },
-    { id: 'machines', label: 'Machines', group: 'Code', body: () => _jsx(Machines, {}) },
-    { id: 'keys', label: 'API keys', group: 'Code', body: () => _jsx(Keys, {}) },
-    { id: 'members', label: 'Members', group: 'Organization', body: () => _jsx(Members, {}) },
-    { id: 'integrations', label: 'Integrations', group: 'Organization', body: () => _jsx(Integrations, {}) },
-    { id: 'notifications', label: 'Notifications', group: 'Organization', body: () => _jsx(Notifications, {}) },
-];
+export { GROUPS } from './list.js';
+const BODY = {
+    general: () => _jsx(General, {}),
+    account: () => _jsx(Account, {}),
+    privacy: () => _jsx(Privacy, {}),
+    billing: () => _jsx(Billing, {}),
+    usage: () => _jsx(Usage, {}),
+    capabilities: () => _jsx(Capabilities, {}),
+    memory: () => _jsx(Memory, {}),
+    code: () => _jsx(Code, {}),
+    environments: () => _jsx(Environments, {}),
+    machines: () => _jsx(Machines, {}),
+    keys: () => _jsx(Keys, {}),
+    members: () => _jsx(Members, {}),
+    integrations: () => _jsx(Integrations, {}),
+    notifications: () => _jsx(Notifications, {}),
+};
+export const ENTRIES = LIST.map((e) => ({ ...e, body: BODY[e.id] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.72",
+  "version": "0.2.74",
   "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.",