@hanzo/build 0.2.9 → 0.2.11

package/lib/route.d.ts

@@ -4,13 +4,22 @@
  *   ''              the empty state: a new run
  *   sess_<32 hex>   one run
  *   -/<screen>      a builder screen
+ *   -/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
  *
  * 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.
  */
-export type Screen = 'artifacts' | 'templates' | 'codebases' | 'projects' | 'issues' | 'automations' | 'sync' | 'mcp';
+export type Screen = 'artifacts' | 'templates' | 'codebases' | '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];
+/** Customize, one tab each: what the agent brings to a run, yours and to discover. */
+export declare const TABS: readonly ['skills', 'connectors', 'plugins', 'agents'];
+export type Tab = (typeof TABS)[number];
 export type Route = {
     kind: 'new';
 } | {
@@ -19,6 +28,12 @@ export type Route = {
 } | {
     kind: 'screen';
     screen: Screen;
+} | {
+    kind: 'settings';
+    section: Section;
+} | {
+    kind: 'customize';
+    tab: Tab;
 } | {
     kind: 'project';
     slug: string;

package/lib/route.js

@@ -1,10 +1,37 @@
+/** Settings, one section each. Every setting the builder has lives on this page, none elsewhere. */
+export const SECTIONS = [
+    'general',
+    'account',
+    'privacy',
+    'billing',
+    'usage',
+    'capabilities',
+    'memory',
+    'code',
+    'environments',
+    'machines',
+    'keys',
+    'members',
+    'integrations',
+    'notifications',
+];
+/** Customize, one tab each: what the agent brings to a run, yours and to discover. */
+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])?$/;
-const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync', 'mcp'];
+const SCREENS = ['artifacts', 'templates', 'codebases', 'projects', 'issues', 'automations', 'sync', 'mcp', 'plans'];
 export function route(path) {
     const p = path.replace(/^\/+|\/+$/g, '');
     if (SESSION.test(p))
         return { kind: 'run', id: p };
+    if (p === '-/settings' || p.startsWith('-/settings/')) {
+        const section = (p.slice('-/settings/'.length) || 'general');
+        return SECTIONS.includes(section) ? { kind: 'settings', section } : { kind: 'new' };
+    }
+    if (p === '-/customize' || p.startsWith('-/customize/')) {
+        const tab = (p.slice('-/customize/'.length) || 'skills');
+        return TABS.includes(tab) ? { kind: 'customize', tab } : { kind: 'new' };
+    }
     if (p.startsWith('-/')) {
         const s = p.slice(2);
         return SCREENS.includes(s) ? { kind: 'screen', screen: s } : { kind: 'new' };
@@ -22,6 +49,10 @@ export function path(r) {
             return r.id;
         case 'screen':
             return `-/${r.screen}`;
+        case 'settings':
+            return r.section === 'general' ? '-/settings' : `-/settings/${r.section}`;
+        case 'customize':
+            return r.tab === 'skills' ? '-/customize' : `-/customize/${r.tab}`;
         case 'project':
             return r.slug;
     }

package/lib/run.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * One run, live: its transcript as it streams, the way to steer or stop it,
- * and the pull request once it pushes one.
+ * One run, live: its transcript as it streams, the controls that reach it —
+ * steer, pause, resume, stop — the pull request once it pushes one, and the
+ * follow-up that continues it once it has finished.
  *
  * The detail read is the record and the stream adds to it; the two overlap
  * whenever a turn lands between the read and the subscribe, so turns are merged
@@ -10,19 +11,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Steering is a queue the run drains between steps: a press is confirmed as
  * RECORDED, and the status is left to the feed to correct.
+ *
+ * A sandbox run is one agent invocation that takes its task on its command line
+ * (apps/coding steer.go), so what continues it is a new run: a paused run is
+ * carried on, and a finished one followed up, by `POST /v1/agent/coding` from
+ * the branch its work was kept on — the platform's own continue, done here.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ExternalLink, GitPullRequest, PanelRight } from '@hanzogui/lucide-icons-2';
-import { Button } from '@hanzo/ui';
-import { Transcript, fold } from '@hanzo/ui/agents';
+import { Copy, ExternalLink, GitPullRequest, Globe, MoreHorizontal, PanelRight, Pencil } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
+import { Steer } from '@hanzo/ui/agents';
 import { Composer } from '@hanzo/ui/chat';
 import { useEffect, useMemo, useState } from 'react';
-import { message, stop } from './api/sessions.js';
-import { outcome, pull, said, steps, who } from './api/turn.js';
-import { useKept, useRun } from './data.js';
+import { approve, followUp, start } from './api/coding.js';
+import { list, message, pause, publish, rename, resume, stop, story, took } from './api/sessions.js';
+import { answer, cards, outcome, pull, settled, steps } from './api/turn.js';
+import { useKept, useRead, useRun } from './data.js';
 import { Desk } from './desk.js';
 import { useHost, useTarget } from './host.js';
 import { Out } from './out.js';
+import { Transcript } from './transcript.js';
 const LIVE = new Set(['running', 'paused', '']);
 export function Run({ id }) {
     const host = useHost();
@@ -35,15 +43,49 @@ export function Run({ id }) {
     const [busy, setBusy] = useState(false);
     const [notify, setNotify] = useState(false);
     const [desk, setDesk] = useKept('hanzo.build.desk', true);
-    const blocks = useMemo(() => fold(events
-        .map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, record?.mode) }))
-        .filter((b) => b.text)), [events, record?.mode]);
+    // Stop was pressed here: the run keeps its work after it answers, and says so with its status.
+    const [stopping, setStopping] = useState(false);
+    const [naming, setNaming] = useState(false);
+    const [name, setName] = useState('');
+    const [copied, setCopied] = useState('');
+    const mode = record?.mode ?? '';
+    const shown = useMemo(() => cards(events, mode), [events, mode]);
     const end = outcome(events);
     const plan = useMemo(() => steps(events), [events]);
+    const kept = useMemo(() => settled(events), [events]);
     const state = status || end.status;
     const pr = pull(record?.pr ?? '', record?.repo ?? '');
-    const running = signed && LIVE.has(state) && !detail.error;
-    const title = detail.value?.title || (detail.loading ? '' : 'Untitled run');
+    const live = LIVE.has(state);
+    const running = signed && live && !detail.error;
+    const paused = running && state === 'paused';
+    const finished = signed && !live && !detail.error && Boolean(record);
+    // A sandbox run is held by the coding service, which pauses it with its work
+    // kept and has no resume of its own; a machine drains its commands itself.
+    const held = (record?.environment || 'sandbox') === 'sandbox';
+    // A follow-up clones what the run kept, so it waits until the run has said where that is.
+    const waiting = (paused && held && !kept.settled) || (finished && stopping && !kept.settled);
+    const title = record?.title || detail.value?.title || (detail.loading ? '' : 'Untitled run');
+    // A setup run explores and installs before it answers, which takes minutes.
+    const setup = mode === 'setup';
+    const [seen, setSeen] = useKept('hanzo.build.setup.seen', false);
+    // How long setup runs have taken here: the ones this person can see, finished.
+    const past = useRead(setup && running ? () => list(t, { kind: 'coding', status: 'done', limit: 500 }) : null, [], [t, setup, running]);
+    const span = took(past.value, 'setup');
+    const earlier = record
+        ? {
+            id,
+            title,
+            repo: record.repo,
+            base: record.base,
+            environment: record.environment,
+            project: record.project,
+            mode,
+            pushed: kept.pushed,
+        }
+        : null;
+    const planned = mode === 'plan' && finished && state === 'done' ? answer(events) : '';
+    // What the recorded read left out: it carries the latest fifty turns.
+    const hidden = Math.max(0, (detail.value?.events ?? 0) - (detail.value?.recent.length ?? 0));
     useEffect(() => {
         if (!notify || running)
             return;
@@ -66,35 +108,172 @@ export function Run({ id }) {
         setNotify(true);
         setNote('');
     };
-    const send = async () => {
-        if (!draft.trim() || busy)
+    /** Something that answers a sentence for the note, or throws the reason. */
+    const act = async (work, failed) => {
+        if (busy)
             return;
         setBusy(true);
         setNote('');
         try {
-            await message(t, id, draft);
-            setDraft('');
-            setNote('Sent — the run reads it before its next step');
+            setNote(await work());
         }
         catch (e) {
-            setNote(e instanceof Error ? e.message : 'Could not reach this run');
+            setNote(e instanceof Error ? e.message : failed);
         }
         finally {
             setBusy(false);
         }
     };
-    const halt = async () => {
-        setNote('');
+    /** A new run from this one's work, opened. A paused run it carries on is let go once the new one is admitted. */
+    const carry = async (said, how = 'follow') => {
+        if (!earlier)
+            throw new Error('This run is still being read');
+        const run = await start(t, how === 'approve' ? approve(earlier, said) : followUp(earlier, said));
+        if (paused)
+            await stop(t, id, 'Continued in a follow-up run').catch(() => undefined);
+        setDraft('');
+        host.go(run.session);
+        return '';
+    };
+    const send = () => {
+        const words = draft.trim();
+        if (!words)
+            return;
+        if (running && !(paused && held)) {
+            void act(async () => {
+                await message(t, id, words);
+                setDraft('');
+                return 'Sent — recorded on this run';
+            }, 'Could not reach this run');
+            return;
+        }
+        void act(() => carry(words), 'The follow-up could not start');
+    };
+    const command = (c) => {
+        switch (c) {
+            case 'stop':
+                void act(async () => {
+                    await stop(t, id);
+                    setStopping(true);
+                    return 'Stop requested — the run keeps its work on its branch';
+                }, 'Could not stop this run');
+                return;
+            case 'pause':
+                void act(async () => {
+                    await pause(t, id);
+                    return held ? 'Pause requested — the run keeps its work on its branch and waits' : 'Pause asked — the machine pauses when it reads it';
+                }, 'Could not pause this run');
+                return;
+            case 'resume':
+                if (held)
+                    void act(() => carry(''), 'The run could not go on');
+                else
+                    void act(async () => {
+                        await resume(t, id);
+                        return 'Resume asked — the machine goes on when it reads it';
+                    }, 'Could not resume this run');
+                return;
+        }
+    };
+    const copy = async (what, value) => {
         try {
-            await stop(t, id);
-            setNote('Stop requested — the run keeps its work on its branch');
+            await navigator.clipboard.writeText(value);
+            setCopied(what);
         }
-        catch (e) {
-            setNote(e instanceof Error ? e.message : 'Could not stop this run');
+        catch {
+            setNote('This browser would not copy.');
         }
     };
-    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { flex: 1, minH: 0, minW: 0, width: "100%", px: "$6", children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch].filter(Boolean).join(' · ') })] }), desk ? null : (_jsx(XStack, { render: "button", "aria-label": "Show the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: () => setDesk(true), children: _jsx(PanelRight, { size: 16 }) })), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null] }), _jsx(Transcript, { blocks: blocks, empty: signed ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail.error ? detail.error.message : detail.loading ? 'Reading this run…' : running ? 'Setting up environment' : 'Waiting for the run’s first step…' })) : (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to follow this run." }), _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" })] })) }), _jsxs(YStack, { pb: "$4", pt: "$2", gap: "$2", children: [end.problem ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The branch is pushed, and the pull request could not be opened." })) : null, note || (signed && refused) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || refused })) : null, plan.length ? (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Steps" }), _jsx(SizableText, { size: "$1", color: "$soft", children: String(plan.length) })] }), plan.map((s, i) => {
-                                        const current = !s.done && plan.findIndex((x) => !x.done) === i;
+    const share = (on) => act(async () => {
+        await publish(t, id, on);
+        detail.reload();
+        return on ? 'Shared — anyone with the link can read this run’s story' : 'No longer shared';
+    }, 'Could not change who can read this run');
+    const link = record ? story(t, record.org || host.org || '', record.project) : '';
+    const menu = [
+        ...(signed && record
+            ? [
+                {
+                    key: 'rename',
+                    label: 'Rename',
+                    icon: _jsx(Pencil, { size: 16 }),
+                    onSelect: () => {
+                        setName(title);
+                        setNaming(true);
+                    },
+                },
+            ]
+            : []),
+        // Sharing opens the public build route, which is addressed by the project a run built.
+        ...(signed && record?.project
+            ? [
+                record.published
+                    ? { key: 'unshare', label: 'Stop sharing', icon: _jsx(Globe, { size: 16 }), onSelect: () => void share(false) }
+                    : { key: 'share', label: 'Share publicly', icon: _jsx(Globe, { size: 16 }), description: 'Anyone with the link can read it', onSelect: () => void share(true) },
+            ]
+            : []),
+        ...(record?.published && link
+            ? [{ key: 'link', label: copied === 'link' ? 'Copied' : 'Copy public link', icon: _jsx(Copy, { size: 16 }), description: link, onSelect: () => void copy('link', link) }]
+            : []),
+        { key: 'copy', label: copied === 'id' ? 'Copied' : 'Copy run id', icon: _jsx(Copy, { size: 16 }), description: id, onSelect: () => void copy('id', id) },
+    ];
+    const save = () => void act(async () => {
+        await rename(t, id, name);
+        setNaming(false);
+        detail.reload();
+        return 'Renamed';
+    }, 'Could not rename this run');
+    const placeholder = !signed
+        ? 'Sign in to follow up'
+        : waiting
+            ? paused
+                ? 'Pausing — the run is keeping its work…'
+                : 'Stopping — the run is keeping its work…'
+            : paused && held
+                ? 'Continue this run with a follow up'
+                : running
+                    ? setup
+                        ? 'Add a follow up for the setup agent'
+                        : 'Add a follow up'
+                    : finished
+                        ? 'Follow up — continues in a new run'
+                        : 'Reading this run…';
+    return (_jsxs(XStack, { flex: 1, minH: 0, minW: 0, width: "100%", children: [_jsxs(YStack, { flex: 1, minH: 0, minW: 0, width: "100%", px: "$6", "$max-md": { px: '$4' }, children: [_jsxs(XStack, { pt: "$3", pb: "$2", gap: "$3", items: "center", minH: 44, children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { render: "h1", size: "$5", color: "$ink", numberOfLines: 1, children: title }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: [state || (detail.loading ? 'reading' : ''), record?.repo, record?.branch, record?.published ? 'shared' : ''].filter(Boolean).join(' · ') })] }), desk ? null : (_jsx(XStack, { render: "button", "aria-label": "Show the side pane", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, onPress: () => setDesk(true), children: _jsx(PanelRight, { size: 16 }) })), pr.href ? (_jsx(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: _jsxs(XStack, { items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: [_jsx(GitPullRequest, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$ink", children: pr.label }), _jsx(ExternalLink, { size: 12, opacity: 0.6 })] }) })) : null, menu.length ? (_jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Manage this run", px: "$2", py: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: menu })) : null] }), _jsx(Transcript, { cards: shown, 
+                        // A paused run's agent was stopped where it stood; what it was running is cut off.
+                        live: running && !paused, header: hidden ? (_jsx(SizableText, { size: "$1", color: "$soft", children: `${hidden} earlier ${hidden === 1 ? 'turn is' : 'turns are'} not shown. The run’s Git tab has everything it pushed.` })) : null, onApprove: planned && earlier ? (p) => void act(() => carry(p, 'approve'), 'The build could not start') : undefined, approving: busy, empty: signed ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail.error
+                                ? detail.error.message
+                                : detail.loading
+                                    ? 'Reading this run…'
+                                    : running
+                                        ? setup
+                                            ? 'Setting up environment'
+                                            : 'Starting…'
+                                        : 'Waiting for the run’s first step…' })) : (_jsxs(YStack, { gap: "$3", items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Sign in to follow this run." }), _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" })] })) }), _jsxs(YStack, { pb: "$4", pt: "$2", gap: "$2", children: [end.problem ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The branch is pushed, and the pull request could not be opened." })) : null, note || (signed && refused) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || refused })) : null, plan.length ? (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Steps" }), _jsx(SizableText, { size: "$1", color: "$soft", children: String(plan.length) })] }), plan.map((s, i) => {
+                                        // Only a run still working is on a step.
+                                        const current = running && !s.done && plan.findIndex((x) => !x.done) === i;
                                         return (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$1.5", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: s.done || current ? '$ink' : '$soft', children: s.done ? '✓' : current ? '●' : '○' }), _jsx(SizableText, { size: "$2", color: s.done ? '$soft' : '$ink', numberOfLines: 1, children: s.name })] }, s.name));
-                                    })] })) : null, running ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: "Environment setup takes several minutes." }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), onStop: () => void halt(), busy: running && !draft.trim(), disabled: !running || busy, placeholder: !signed ? 'Sign in to follow up' : running ? 'Add a follow up' : 'This run has finished', label: "Steer this run" })] })] }), desk ? _jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: record?.mode ?? '', pr: pr, events: events, live: running, refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) }) : null] }));
+                                    })] })) : null, setup && running && !seen ? _jsx(Onboarding, { onDone: () => setSeen(true) }) : null, running ? (_jsxs(XStack, { items: "center", gap: "$2", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", rowGap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 160, children: paused
+                                            ? kept.pushed
+                                                ? 'Paused — its work so far is on its branch.'
+                                                : 'Paused.'
+                                            : setup
+                                                ? span
+                                                    ? `Environment setup takes ~${span[0] === span[1] ? span[0] : `${span[0]}–${span[1]}`} minutes.`
+                                                    : 'Environment setup takes several minutes.'
+                                                : 'This run is still working.' }), _jsx(Steer, { onCommand: command, withhold: [
+                                            ...(paused ? ['pause'] : ['resume']),
+                                            ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
+                                        ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: send, disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: running && !(paused && held) ? 'Steer this run' : 'Follow up on this run' })] })] }), desk ? (_jsx(Desk, { id: id, repo: record?.repo ?? '', branch: record?.branch ?? '', base: record?.base ?? '', environment: record?.environment ?? '', mode: mode, pr: pr, title: title, project: record?.project ?? '', sandbox: record?.sandbox ?? '', events: events, live: running, menu: menu, refused: signed ? refused || (detail.error ? detail.error.message : '') : 'Sign in to follow this run.', retry: signed ? 'Retry' : 'Sign in', onRetry: signed ? detail.reload : () => host.signIn?.(), onHide: () => setDesk(false) })) : null, _jsx(Dialog, { open: naming, onOpenChange: setNaming, children: _jsxs(DialogContent, { maxW: 480, children: [_jsx(DialogTitle, { children: "Rename this run" }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "The run\u2019s name", maxLength: 512, onKeyDown: (e) => {
+                                if ((e.key ?? e.nativeEvent?.key) === 'Enter')
+                                    save();
+                            } }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", onPress: () => setNaming(false), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || !name.trim(), onPress: save, children: "Save" })] })] }) })] }));
+}
+/** What a setup run does, said once per browser the first time one is watched. */
+function Onboarding({ onDone }) {
+    const steps = [
+        'Explore, install and check the codebase',
+        'Name the secrets it needs — you set their values',
+        'Propose the environment for you to review and save',
+    ];
+    return (_jsxs(YStack, { gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", children: [_jsx(SizableText, { size: "$4", color: "$ink", children: "Set up a cloud environment" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "An environment lets every later run install, start, test and check its changes the way an engineer does. Setup is agent-led and takes several minutes. The agent will:" }), _jsx(YStack, { gap: "$1.5", children: steps.map((s, i) => (_jsxs(XStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", width: 12, children: String(i + 1) }), _jsx(SizableText, { size: "$2", color: "$ink", children: s })] }, s))) }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Interrupt anytime to steer the agent or ask it questions." }), _jsx(Button, { size: "sm", onPress: onDone, children: "Got it" })] }));
 }

package/lib/section.js

@@ -11,7 +11,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * host's own `go`.
  */
 import { SizableText } from '@hanzo/gui';
-import { Blocks, CircleDot, FolderGit2, Kanban, LayoutTemplate, Puzzle, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
+import { Blocks, CircleDot, FolderGit2, Kanban, LayoutTemplate, SlidersHorizontal, SquarePen, Workflow } from '@hanzogui/lucide-icons-2';
 import { SidebarItem, SidebarSection, StatusDot } from '@hanzo/ui/chat';
 import { useMemo } from 'react';
 import { pinBoard } from './choice.js';
@@ -48,5 +48,5 @@ export function DevSection({ host, onPick, label = 'Runs', children, }) {
     return (_jsxs(_Fragment, { children: [_jsx(SidebarItem, { icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), active: r.kind === 'new', onPress: () => go(''), children: "New run" }), _jsx(SidebarItem, { icon: _jsx(Workflow, { size: 16, "aria-hidden": true }), active: screen === 'automations', onPress: () => go(path({ kind: 'screen', screen: 'automations' })), children: "Automations" }), _jsx(SidebarItem, { icon: _jsx(FolderGit2, { size: 16, "aria-hidden": true }), active: screen === 'codebases', onPress: () => go(path({ kind: 'screen', screen: 'codebases' })), children: "Codebase" }), _jsx(SidebarItem, { icon: _jsx(Kanban, { size: 16, "aria-hidden": true }), active: screen === 'projects', onPress: () => go(path({ kind: 'screen', screen: 'projects' })), children: "Projects" }), _jsx(SidebarItem, { icon: _jsx(CircleDot, { size: 16, "aria-hidden": true }), active: screen === 'issues', onPress: () => {
                     pinBoard(host.org, '');
                     go(path({ kind: 'screen', screen: 'issues' }));
-                }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), active: screen === 'mcp', onPress: () => go(path({ kind: 'screen', screen: 'mcp' })), children: "MCP" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
+                }, children: "Issues" }), _jsx(SidebarItem, { icon: _jsx(SlidersHorizontal, { size: 16, "aria-hidden": true }), active: r.kind === 'customize', onPress: () => go(path({ kind: 'customize', tab: 'connectors' })), children: "Customize" }), _jsx(SidebarItem, { icon: _jsx(Blocks, { size: 16, "aria-hidden": true }), active: screen === 'artifacts', onPress: () => go(path({ kind: 'screen', screen: 'artifacts' })), children: "Artifacts" }), _jsx(SidebarItem, { icon: _jsx(LayoutTemplate, { size: 16, "aria-hidden": true }), active: screen === 'templates', onPress: () => go(path({ kind: 'screen', screen: 'templates' })), children: "Templates" }), children, _jsx(SidebarSection, { label: label, children: !host.person ? (_jsx(Note, { children: "Sign in to see your runs." })) : sessions.value.length ? (sessions.value.map((s) => (_jsx(SidebarItem, { icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }), active: r.kind === 'run' && r.id === s.id, onPress: () => go(s.id), children: s.title || 'Untitled run' }, s.id)))) : (_jsx(Note, { children: sessions.error ? sessions.error.message : sessions.loading ? 'Reading…' : 'No runs yet. Say what to build and it lands here.' })) })] }));
 }

package/lib/settings/account.d.ts

@@ -0,0 +1,5 @@
+export declare const WORK: {
+    id: string;
+    label: string;
+}[];
+export declare function Account(): import("react").JSX.Element;

package/lib/settings/account.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Account: who is signed in and how Hanzo should know them — the photo and
+ * full name on their Hanzo identity, what to call them, what they work on and
+ * the instructions every coding run reads — then the organizations they belong
+ * to, the one this page acts in, a way to act in another, and logging out.
+ *
+ * The email is how the person signs in, so it is shown and not edited here.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Copy, LogOut } from '@hanzogui/lucide-icons-2';
+import { Button, Input, Textarea } from '@hanzo/ui';
+import { ChipSelect } from '@hanzo/ui/product';
+import { useEffect, useRef, useState } from 'react';
+import { PHOTO, photo, rename } from '../api/profile.js';
+import { useHost, useTarget } from '../host.js';
+import { usePrefs } from '../prefs.js';
+import { Card, Field, Group, Heading, Note, Row, Soft } from './ui.js';
+export const WORK = [
+    { id: 'engineering', label: 'Software engineering' },
+    { id: 'data', label: 'Data science' },
+    { id: 'design', label: 'Design' },
+    { id: 'product', label: 'Product management' },
+    { id: 'research', label: 'Research' },
+    { id: 'writing', label: 'Writing' },
+    { id: 'education', label: 'Education' },
+    { id: 'operations', label: 'Operations' },
+    { id: 'marketing', label: 'Marketing and sales' },
+    { id: 'other', label: 'Something else' },
+];
+/** Long enough for real guidance, short enough to sit in the settings document beside everything else. */
+const INSTRUCTIONS = 3000;
+export function Account() {
+    const host = useHost();
+    const t = useTarget();
+    const { prefs, save } = usePrefs();
+    const who = host.person;
+    const [name, setName] = useState(who?.name ?? '');
+    const [shownName, setShownName] = useState(who?.name ?? '');
+    const [face, setFace] = useState(who?.avatar ?? '');
+    const [callName, setCallName] = useState('');
+    const [work, setWork] = useState('');
+    const [instructions, setInstructions] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const picker = useRef(null);
+    const [copied, setCopied] = useState(false);
+    // The identity can arrive after the page does.
+    useEffect(() => {
+        setName(who?.name ?? '');
+        setShownName(who?.name ?? '');
+        setFace(who?.avatar ?? '');
+    }, [who?.name, who?.avatar]);
+    useEffect(() => {
+        setCallName(prefs.callName ?? '');
+        setWork(prefs.work ?? '');
+        setInstructions(prefs.instructions ?? '');
+    }, [prefs.callName, prefs.work, prefs.instructions]);
+    if (!who) {
+        return (_jsxs(YStack, { gap: "$5", children: [_jsx(Heading, { title: "Account" }), _jsx(Soft, { children: "Sign in to see your account." }), host.signIn ? (_jsx(XStack, { justify: "center", children: _jsx(Button, { size: "sm", onPress: () => host.signIn?.(), children: "Sign in" }) })) : null] }));
+    }
+    const patch = {};
+    if (callName.trim() !== (prefs.callName ?? ''))
+        patch.callName = callName.trim() || null;
+    if (work !== (prefs.work ?? ''))
+        patch.work = work || null;
+    if (instructions.trim() !== (prefs.instructions ?? '').trim())
+        patch.instructions = instructions.trim() || null;
+    const renamed = name.trim() !== shownName.trim();
+    const changed = renamed || Object.keys(patch).length > 0;
+    const submit = async () => {
+        setBusy(true);
+        setNote('');
+        try {
+            if (renamed)
+                setShownName((await rename(t, name)).displayName || name.trim());
+            if (Object.keys(patch).length)
+                await save(patch);
+            setNote('Saved');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That was not saved');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const upload = async (file) => {
+        setBusy(true);
+        setNote('');
+        try {
+            setFace(await photo(t, file));
+            setNote('Your photo is saved');
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'The photo was not saved');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const orgs = host.memberships ?? (host.org ? [host.org] : []);
+    const chosenWork = WORK.find((w) => w.id === work) ?? (work ? { id: work, label: work } : null);
+    return (_jsxs(YStack, { gap: "$6", children: [_jsx(Heading, { title: "Account", detail: "Your Hanzo identity, and what Hanzo should know about you.", action: host.signOut ? (_jsxs(Button, { size: "sm", variant: "outline", onPress: () => host.signOut?.(), children: [_jsx(LogOut, { size: 14 }), " Log out"] })) : undefined }), _jsx(Group, { title: "Profile", children: _jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$3", children: [face ? (_jsx("img", { src: face, alt: "", width: 48, height: 48, style: { borderRadius: 999, objectFit: 'cover' } })) : (_jsx(YStack, { width: 48, height: 48, rounded: 999, bg: "$raised", items: "center", justify: "center", children: _jsx(SizableText, { size: "$5", color: "$ink", children: (shownName || who.email || '?').charAt(0).toUpperCase() }) })), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$4", color: "$ink", numberOfLines: 1, children: shownName || who.email }), _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email })] }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy, onPress: () => picker.current?.click(), children: "Change photo" }), _jsx("input", { ref: picker, type: "file", accept: PHOTO, hidden: true, style: { display: 'none' }, tabIndex: -1, "aria-label": "Photo", onChange: (e) => {
+                                        const input = e.currentTarget;
+                                        const file = input.files?.[0];
+                                        input.value = '';
+                                        if (file)
+                                            void upload(file);
+                                    } })] }), _jsx(Field, { label: "Full name", children: _jsx(Input, { value: name, onChangeText: setName, "aria-label": "Full name", placeholder: "Your name" }) }), _jsx(Field, { label: "Email", hint: "You sign in with this address, so it is not changed here.", children: _jsx(SizableText, { size: "$2", color: "$soft", numberOfLines: 1, children: who.email || 'No email on this account' }) }), _jsx(Field, { label: "What should Hanzo call you?", children: _jsx(Input, { value: callName, onChangeText: setCallName, "aria-label": "What should Hanzo call you?", placeholder: shownName.split(' ')[0] || 'A first name' }) }), _jsx(Field, { label: "What best describes your work?", children: _jsx(XStack, { children: _jsx(ChipSelect, { name: "Work", label: chosenWork?.label ?? 'Choose one', chosen: chosenWork, items: WORK, onChange: (w) => setWork(w.id), placement: "bottom-start", width: 260 }) }) }), _jsx(Field, { label: "Instructions for Hanzo", hint: `Every coding run reads these before it starts. ${instructions.length}/${INSTRUCTIONS}`, children: _jsx(Textarea, { value: instructions, onChangeText: (v) => setInstructions(v.slice(0, INSTRUCTIONS)), "aria-label": "Instructions for Hanzo", placeholder: "How you like to work: the languages and tools you prefer, the style to follow, what to avoid.", rows: 5 }) }), _jsxs(XStack, { items: "center", gap: "$3", children: [_jsx(Button, { size: "sm", disabled: busy || !changed, onPress: () => void submit(), children: "Save" }), _jsx(Note, { children: note })] })] }) }), host.org ? (_jsx(Group, { title: "Organization", detail: "The organization this page acts in. Runs, codebases and settings belong to it.", children: _jsx(Card, { children: _jsx(Row, { first: true, mono: true, title: host.org, detail: `Organization ID${host.admin ? ' · you are an admin' : ''}`, trailing: _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": copied ? 'Organization ID copied' : 'Copy organization ID', onPress: () => void navigator.clipboard?.writeText(host.org ?? '').then(() => setCopied(true)), children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }) }) }) })) : null, _jsx(Group, { title: "Organizations", detail: "Every organization you belong to. Switch to act in another.", children: orgs.length ? (_jsx(Card, { children: orgs.map((o, i) => (_jsx(Row, { first: i === 0, title: o, detail: o === host.org ? `Acting in ${o}${host.admin ? ' as an admin' : ''}` : undefined, trailing: o === host.org ? (_jsx(Check, { size: 16 })) : host.chooseOrg ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: () => host.chooseOrg?.(o), children: "Switch" })) : null }, o))) })) : (_jsx(Soft, { children: "You belong to no organization yet." })) })] }));
+}

package/lib/settings/billing.d.ts

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