@hanzo/build 0.2.69 → 0.2.72

package/lib/carry.d.ts

@@ -1,9 +1,9 @@
 import { type ReactNode } from 'react';
 import { type Target } from './api/call.ts';
-import { type GearState } from './gear.ts';
+import { type GearState, type Mode } from './gear.ts';
 import type { Composer, Prep, Turn } from './plugin.ts';
 import type { Shelf } from './plus.tsx';
-import type { Chip } from './prompt.tsx';
+import type { Chip, PromptOptions } from './prompt.tsx';
 /** What the surface lends the plugins: its draft, its files, its way about. */
 export type Lent = Omit<Composer, 'target' | 'show'>;
 export interface Carry {
@@ -21,11 +21,22 @@ export interface Carry {
     prep: (turn: Omit<Turn, 'design'>, signal: AbortSignal) => Promise<Prep>;
     /** The chips after `+`: the skills on, Research, and Plan. */
     on: Chip[];
+    /** The mode pill: this surface's modes, the conversation's choice among them. */
+    mode: NonNullable<PromptOptions['mode']>;
+    /** Whether `what` may run: in Manual the person is asked (once, always in this conversation, or not); else yes. */
+    allow: (what: Asked) => Promise<boolean>;
     /** The words the gear adds to every message, '' when none. */
     text: string;
 }
+/** What Manual asks about: a plugin, or a Dev run. `id` is what "always" remembers. */
+export interface Asked {
+    id: string;
+    name: string;
+    note: string;
+}
 /**
  * The conversation `key` names (`''` for one not begun), for target `t`.
- * `customize(tab)` opens Dev's Customize on that tab.
+ * `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): Carry;
+export declare function useCarry(t: Target, key: string, customize: (tab: 'skills') => void, lent: Lent, modes: readonly Mode[]): Carry;

package/lib/carry.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * What a message carries beside its words, assembled once for Chat and Dev:
  * the conversation's gear (gear.ts) drawn as the `+` menu's shelves and the
@@ -10,12 +10,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *             field, so the text rides the message
  *   memory    what Hanzo remembers about the person (GET /v1/ai/memory/list):
  *             the platform injects none itself
- *   mode      Plan: lay the plan out and wait; Auto says nothing
+ *   mode      Plan: lay the plan out and wait; Auto says nothing; Manual
+ *             asks the person before each plugin runs for a message (`Allow`)
  *
  * A shelf is offered only where its service answers; a surface adds its own
  * (Chat its agents, Dev its devices) beside these.
  */
+import { SizableText, XStack } from '@hanzo/gui';
 import { BookOpen, ListChecks, Palette, ScrollText } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogDescription, DialogTitle } from '@hanzo/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { call, query, unwrap } from './api/call.js';
 import { active, authored, document, nameOf as skillOf } from './api/skills.js';
@@ -60,11 +63,16 @@ async function said(t, skills, memory, mode, design) {
         parts.push('Plan mode: lay out the plan — the steps, what each changes and why — and stop. Change nothing and produce no final work until the person says go.');
     return parts.join('\n\n');
 }
+/** Manual's pause: what is about to run, what it does, and the three answers. Closing it is a no. */
+function Allow({ what, onAnswer }) {
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && onAnswer('deny'), children: _jsxs(DialogContent, { maxW: 440, width: "100%", "data-slot": "allow", children: [_jsx(DialogTitle, { children: `Allow ${what.name}?` }), _jsx(DialogDescription, { children: what.note ? `${what.note}. Manual asks before each one runs.` : 'Manual asks before each one runs.' }), _jsxs(XStack, { justify: "flex-end", gap: "$2", pt: "$3", flexWrap: "wrap", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => onAnswer('deny'), children: "Deny" }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => onAnswer('always'), children: _jsx(SizableText, { fontSize: 14, children: "Always in this chat" }) }), _jsx(Button, { size: "sm", onPress: () => onAnswer('once'), children: "Allow once" })] })] }) }));
+}
 /**
  * The conversation `key` names (`''` for one not begun), for target `t`.
- * `customize(tab)` opens Dev's Customize on that tab.
+ * `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) {
+export function useCarry(t, key, customize, lent, 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.
@@ -84,7 +92,8 @@ export function useCarry(t, key, customize, lent) {
     const signed = Boolean(t.token());
     const list = useRead(signed ? () => active(t) : null, [], [t, signed]);
     const names = useMemo(() => list.value.map((s) => skillOf(s.name)).filter(Boolean), [list.value]);
-    const { skills, research, memory, mode, design } = gear.gear;
+    const { skills, research, memory, design } = gear.gear;
+    const mode = modes.includes(gear.gear.mode) ? gear.gear.mode : 'auto';
     const shelf = {
         rows: names.map((n) => ({ id: n, label: n, icon: _jsx(ScrollText, { size: 16 }), on: skills.includes(n) })),
         pick: (id) => gear.toggle('skills', id),
@@ -141,8 +150,26 @@ export function useCarry(t, key, customize, lent) {
         // `skills` is read through `asked`, its contents.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [t, signedIn, asked, memory, mode, design]);
+    // Manual: what is about to run is asked of the person, unless allowed for the rest of the conversation.
+    const kept = useRef([]);
+    kept.current = gear.gear.allowed;
+    const allow = async (what) => {
+        if (mode !== 'manual' || kept.current.includes(what.id))
+            return true;
+        const v = await new Promise((done) => show(_jsx(Allow, { what: what, onAnswer: (x) => {
+                show(null);
+                done(x);
+            } })));
+        if (v === 'always') {
+            kept.current = [...kept.current, what.id];
+            gear.set({ allowed: kept.current });
+        }
+        return v !== 'deny';
+    };
     return {
         gear,
+        mode: { value: mode, set: (m) => gear.set({ mode: m }), items: modes },
+        allow,
         skills: shelf,
         plugins,
         dialog,
@@ -151,10 +178,16 @@ export function useCarry(t, key, customize, lent) {
         preparing: lit.length > 0,
         design: designs,
         // A design system a plugin made is attached at once, and the maker turns off: it made one.
-        prep: (turn, signal) => prep(found.plugins, gear.gear, { ...turn, design }, composer, signal).then((p) => {
+        prep: async (turn, signal) => {
+            // One plugin at a time, so each pause is its own question.
+            const denied = [];
+            for (const x of lit)
+                if (!signal.aborted && !(await allow({ id: x.id, name: x.name, note: x.note })))
+                    denied.push(x.id);
+            const p = await prep(found.plugins, gear.gear, { ...turn, design }, composer, signal, denied);
             if (p.design)
                 gear.set({ design: p.design, plugins: gear.gear.plugins.filter((x) => x !== 'design') });
             return p;
-        }),
+        },
     };
 }

package/lib/gear.d.ts

@@ -1,16 +1,20 @@
 import { type Target } from './api/call.ts';
 /** What a run or a turn may do on its own: the permission mode. */
-export type Mode = 'auto' | 'plan';
+export type Mode = 'auto' | 'manual' | 'plan';
 /**
- * The modes the platform honours. Manual and Accept edits are not here: a cloud
- * run takes `build` or `plan` (apps/coding) and a chat turn asks before nothing,
- * so offering them would promise a pause that never comes.
+ * The modes, one line each. Chat offers Auto and Manual; Dev adds Plan. Manual
+ * is a real pause: before a plugin runs for a message (a search, a site read, a
+ * deck), the person allows it once, always in this conversation, or not, and a
+ * Dev run is asked for before it starts.
  */
 export declare const MODES: readonly {
     id: Mode;
     label: string;
     note: string;
 }[];
+/** The modes each surface offers. */
+export declare const CHAT_MODES: readonly Mode[];
+export declare const DEV_MODES: readonly Mode[];
 export interface Gear {
     /** Skill names (`/v1/tool/skills`). */
     skills: string[];
@@ -25,6 +29,8 @@ export interface Gear {
     research: boolean;
     memory: boolean;
     mode: Mode;
+    /** In Manual, the plugins allowed for the rest of this conversation. */
+    allowed: string[];
 }
 export declare const BARE: Gear;
 /** How many conversations keep a choice of their own: the document holds 16 KiB in all. */

package/lib/gear.js

@@ -18,14 +18,19 @@
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { call } from './api/call.js';
 /**
- * The modes the platform honours. Manual and Accept edits are not here: a cloud
- * run takes `build` or `plan` (apps/coding) and a chat turn asks before nothing,
- * so offering them would promise a pause that never comes.
+ * The modes, one line each. Chat offers Auto and Manual; Dev adds Plan. Manual
+ * is a real pause: before a plugin runs for a message (a search, a site read, a
+ * deck), the person allows it once, always in this conversation, or not, and a
+ * Dev run is asked for before it starts.
  */
 export const MODES = [
-    { id: 'auto', label: 'Auto', note: 'Hanzo works on its own and stops to ask only if something looks unsafe.' },
-    { id: 'plan', label: 'Plan', note: 'Hanzo lays out the plan first and changes nothing until you say go.' },
+    { id: 'auto', label: 'Auto', note: 'Runs tools on its own; pauses only for anything risky.' },
+    { id: 'manual', label: 'Manual', note: 'Asks before each tool, connector or site it opens.' },
+    { id: 'plan', label: 'Plan', note: 'Writes the plan and waits for your go before changing anything.' },
 ];
+/** The modes each surface offers. */
+export const CHAT_MODES = ['auto', 'manual'];
+export const DEV_MODES = ['auto', 'manual', 'plan'];
 export const BARE = {
     skills: [],
     connectors: [],
@@ -35,6 +40,7 @@ export const BARE = {
     research: false,
     memory: true,
     mode: 'auto',
+    allowed: [],
 };
 /** What a new conversation carries over from the last: the switches, never a pick. */
 const STICKY = ['research', 'memory', 'mode'];
@@ -55,6 +61,7 @@ export function gearOf(raw, base = BARE) {
         research: typeof o.research === 'boolean' ? o.research : base.research,
         memory: typeof o.memory === 'boolean' ? o.memory : base.memory,
         mode: MODES.some((m) => m.id === o.mode) ? o.mode : base.mode,
+        allowed: 'allowed' in o ? list(o.allowed) : base.allowed,
     };
 }
 /** `gears` with `key`'s entry first, cut to `KEEP`. */

package/lib/gutter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The grip between two panes, one for every edge: the sidebar's, the side
+ * panel's, a run's chat against its work. The kit's Grip with its `inline` bar
+ * (drawn only while it is reached for), its band centred across the gutter and
+ * the bar halfway down it, so each edge looks and moves the same.
+ *
+ *   side    the edge the box it sits in is pinned to (Grip's): `left` for a
+ *           sidebar, whose free edge is its right, `right` for an aside
+ *   gap     the gutter's width; the frame's `--pane-gap` by default
+ *   inset   the box's own border, px: an absolute place is measured inside it
+ */
+import { type GripProps } from '@hanzo/ui';
+export type GutterProps = Omit<GripProps, 'bar'> & {
+    gap?: string | number;
+    inset?: number;
+};
+export declare function Gutter({ side, gap, inset, ...rest }: GutterProps): import("react").JSX.Element;

package/lib/gutter.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The grip between two panes, one for every edge: the sidebar's, the side
+ * panel's, a run's chat against its work. The kit's Grip with its `inline` bar
+ * (drawn only while it is reached for), its band centred across the gutter and
+ * the bar halfway down it, so each edge looks and moves the same.
+ *
+ *   side    the edge the box it sits in is pinned to (Grip's): `left` for a
+ *           sidebar, whose free edge is its right, `right` for an aside
+ *   gap     the gutter's width; the frame's `--pane-gap` by default
+ *   inset   the box's own border, px: an absolute place is measured inside it
+ */
+import { Grip } from '@hanzo/ui';
+import { gap as GAP } from './pane.js';
+export function Gutter({ side, gap = GAP, inset = 0, ...rest }) {
+    const g = typeof gap === 'number' ? `${gap}px` : gap;
+    // A CSS length gui takes as written; its types name only tokens and numbers.
+    const band = `max(8px, ${g})`;
+    // The band's start, so its middle is the gutter's: half the gutter and half the band out from the edge.
+    const at = (w) => `calc(-1 * (${g} + ${w}) / 2 - ${inset}px)`;
+    const edge = side === 'left' ? 'r' : 'l';
+    return (_jsx(Grip, { side: side, bar: "inline", justify: "center", width: band, [edge]: at(band), 
+        // A finger's band, centred on the same line.
+        $touchable: { width: 44, [edge]: at('44px') }, ...rest }));
+}

package/lib/index.d.ts

@@ -30,6 +30,7 @@ export { DevSection, DOTS, useSessions } from './section.tsx';
 export { HostProvider } from './host.tsx';
 export { Slack, useWho, Who } from './foot.tsx';
 export { Grip, type GripProps } from '@hanzo/ui';
+export { Gutter, type GutterProps } from './gutter.tsx';
 export { administers } from './claims.ts';
 export { Meter, Title } from './meter.tsx';
 export { Plan } from './settings/plan.tsx';
@@ -51,7 +52,7 @@ export { href, parse, path, PLACES, route, SESSION, SLUG, type Route, type Scree
 export { catalog, EFFORTS, FIRST, FREE, grants, isFree, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind, type Choice, type Effort, type Mind } from './mind.ts';
 export { ASK, cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, trigger, Tune, useEar, useMention, useUpload, type Chip, type PromptOptions } from './prompt.tsx';
 export { Plus, type Link, type PlusProps, type Row as ShelfRow, type Shelf, type Switch } from './plus.tsx';
-export { BARE, gearOf, MODES, useGear, useLanguage, type Gear, type GearState, type Mode as GearMode } from './gear.ts';
+export { BARE, CHAT_MODES, DEV_MODES, gearOf, MODES, useGear, useLanguage, type Gear, type GearState, type Mode as GearMode } from './gear.ts';
 export { useCarry, type Carry } from './carry.tsx';
 export { Dictation } from './mic.tsx';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker, type Artifact, type Listen } from './reply.tsx';

package/lib/index.js

@@ -30,6 +30,7 @@ export { DevSection, DOTS, useSessions } from './section.js';
 export { HostProvider } from './host.js';
 export { Slack, useWho, Who } from './foot.js';
 export { Grip } from '@hanzo/ui';
+export { Gutter } from './gutter.js';
 export { administers } from './claims.js';
 export { Meter, Title } from './meter.js';
 export { Plan } from './settings/plan.js';
@@ -46,7 +47,7 @@ export { href, parse, path, PLACES, route, SESSION, SLUG } from './route.js';
 export { catalog, EFFORTS, FIRST, FREE, grants, isFree, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind } from './mind.js';
 export { ASK, cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, trigger, Tune, useEar, useMention, useUpload } from './prompt.js';
 export { Plus } from './plus.js';
-export { BARE, gearOf, MODES, useGear, useLanguage } from './gear.js';
+export { BARE, CHAT_MODES, DEV_MODES, gearOf, MODES, useGear, useLanguage } from './gear.js';
 export { useCarry } from './carry.js';
 export { Dictation } from './mic.js';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker } from './reply.js';

package/lib/landing.js

@@ -36,6 +36,7 @@ import { usePrefs } from './prefs.js';
 import { Publish } from './publish.js';
 import { path } from './route.js';
 import { useCarry } from './carry.js';
+import { DEV_MODES } from './gear.js';
 import { Suggestions, useSuggestions } from './suggestions.js';
 import { MEASURE, Prompt, useEar } from './prompt.js';
 import { Monitor as Device } from '@hanzogui/lucide-icons-2';
@@ -134,8 +135,8 @@ export function Landing({ onStarted }) {
             }
         },
         go: (href) => (href.startsWith('http') ? host.open(href) : host.go(href)),
-    });
-    const mode = carry.gear.gear.mode === 'plan' ? 'plan' : 'build';
+    }, DEV_MODES);
+    const mode = carry.mode.value === 'plan' ? 'plan' : 'build';
     const hints = useSuggestions(t);
     // The chosen codebase's environment, so New can say when it has none yet.
     const codebase = isForge(kept.repo) ? kept.repo.name : '';
@@ -209,6 +210,11 @@ export function Landing({ onStarted }) {
                 setNote(prepped.reply.split('```')[0].trim());
                 return;
             }
+            // Manual: the run is asked for before it starts; it edits, commits and pushes on its own once it has.
+            if (!(await carry.allow({ id: 'run', name: 'Dev to start this run', note: 'It edits, tests, commits and pushes its own branch' }))) {
+                setNote('Not started.');
+                return;
+            }
             const run = await start(t, {
                 prompt: compose([draft.trim(), carry.text, prepped.system ?? ''].filter(Boolean).join('\n\n---\n'), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
@@ -304,7 +310,7 @@ export function Landing({ onStarted }) {
         loading: places.loading,
         error: places.error?.message ?? null,
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", pb: "$10", overflowY: "auto", overflowX: "hidden", children: [_jsxs(YStack, { width: "100%", maxW: MEASURE, gap: "$5", children: [_jsx(SizableText, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", style: { textAlign: 'center' }, children: prefs.callName ? `What’s up next, ${prefs.callName}?` : 'What’s up next?' }), _jsxs(YStack, { gap: "$2", children: [stranger ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: `${codebase} is not one of this organization’s repositories.` }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setPicking(true), children: "Choose a repository" })] })) : env.value && (env.value.state === 'proposed' || unset(env.value)) && !place.id ? (_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", flex: 1, minW: 0, children: env.value.state === 'proposed'
+    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", pb: "$10", overflowY: "auto", overflowX: "hidden", children: [_jsxs(YStack, { width: "100%", maxW: MEASURE, gap: "$3", children: [_jsx(SizableText, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", style: { textAlign: 'center' }, children: "Build what\u2019s next." }), _jsxs(YStack, { gap: "$2", children: [stranger ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: `${codebase} is not one of this organization’s repositories.` }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setPicking(true), children: "Choose a repository" })] })) : env.value && (env.value.state === 'proposed' || unset(env.value)) && !place.id ? (_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", flex: 1, minW: 0, children: env.value.state === 'proposed'
                                             ? `A proposed environment for ${codebase} is waiting for review.`
                                             : `${codebase} has no environment yet, so every run starts it bare.` }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: "Review" })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: "Set up environment" }))] })) : null, note || unhonoured(mode, place.id) || mind.note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(mode, place.id) || mind.note })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, label: "Describe a task or ask a question", head: head, plus: {
                                     upload: () => pick(files, setFiles, setNote),
@@ -313,7 +319,7 @@ export function Landing({ onStarted }) {
                                     plugins: carry.plugins,
                                     devices,
                                     memory: { on: carry.gear.gear.memory, set: (on) => carry.gear.set({ memory: on }) },
-                                }, on: carry.on, slash: carry.skills, at: carry.plugins, mode: { value: carry.gear.gear.mode, set: (m) => carry.gear.set({ mode: m }) }, where: where, below: _jsx(Suggestions, { rows: hints.rows, onPick: setDraft, onDismiss: hints.dismiss }), mind: mind, limits: limits, onUpgrade: () => host.go(path({ kind: 'screen', screen: 'plans' })), voice: voice, language: prefs.language ?? null, onLanguage: (id) => void savePrefs({ language: id }), talk: talk })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), carry.dialog, codebase ? (_jsx(SetupDialog, { repo: codebase, homes: homes, open: offering, onOpenChange: setOffering, onStart: setup, onRepo: choose, onSaved: () => {
+                                }, on: carry.on, slash: carry.skills, at: carry.plugins, mode: carry.mode, where: where, below: _jsx(Suggestions, { rows: hints.rows, onPick: setDraft, onDismiss: hints.dismiss }), mind: mind, limits: limits, onUpgrade: () => host.go(path({ kind: 'screen', screen: 'plans' })), voice: voice, language: prefs.language ?? null, onLanguage: (id) => void savePrefs({ language: id }), talk: talk })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), carry.dialog, codebase ? (_jsx(SetupDialog, { repo: codebase, homes: homes, open: offering, onOpenChange: setOffering, onStart: setup, onRepo: choose, onSaved: () => {
                     setOffering(false);
                     env.reload();
                 } })) : null] }));

package/lib/plugins/index.d.ts

@@ -24,4 +24,4 @@ export declare function merge(preps: readonly Prep[]): Prep;
  * fails the message, with its name and its reason: a report asked for and not
  * researched must not arrive looking researched.
  */
-export declare function prep(plugins: readonly Plugin[], g: Gear, turn: Turn, c: Composer, signal: AbortSignal): Promise<Prep>;
+export declare function prep(plugins: readonly Plugin[], g: Gear, turn: Turn, c: Composer, signal: AbortSignal, denied?: readonly string[]): Promise<Prep>;

package/lib/plugins/index.js

@@ -116,8 +116,10 @@ export function merge(preps) {
  * fails the message, with its name and its reason: a report asked for and not
  * researched must not arrive looking researched.
  */
-export async function prep(plugins, g, turn, c, signal) {
-    const preps = await Promise.all(active(plugins, g).map((p) => p.prepare(turn, c, signal).catch((e) => {
+export async function prep(plugins, g, turn, c, signal, denied = []) {
+    const preps = await Promise.all(active(plugins, g)
+        .filter((p) => !denied.includes(p.id))
+        .map((p) => p.prepare(turn, c, signal).catch((e) => {
         if (signal.aborted)
             throw e;
         throw new Error(`${p.name}: ${say(e)}`);

package/lib/project.js

@@ -42,7 +42,7 @@ import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
 import { Clock, ExternalLink, MousePointerClick, PanelLeft, RefreshCcw, Share2, Upload, } from '@hanzogui/lucide-icons-2';
 import { Attachments, CHAT, Console, DEVICES, Feedback, FileTabs, FileTree, PageSelect, PreviewFrame, ProjectChip, VIEWS, Views, Workspace, fold, } from '@hanzo/ui/agents';
 import { Message } from '@hanzo/ui/chat';
-import { Button, Dialog, DialogContent, DialogTitle, Grip } from '@hanzo/ui';
+import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
 import { HanzoMark } from '@hanzo/ui/product';
 import { useDictation, useVoice } from '@hanzo/voice';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -57,6 +57,7 @@ import { decode, outcome, pull, said, scrub, who } from './api/turn.js';
 import { verdict as record } from './api/verdict.js';
 import { useKept, useProjects, useRead, useRun } from './data.js';
 import { Merge } from './git.js';
+import { Gutter } from './gutter.js';
 import { useHost, useTarget } from './host.js';
 import { useMind } from './mind.js';
 import { Out } from './out.js';
@@ -416,7 +417,7 @@ export function Project({ at }) {
                                                     ? `${named.org}/${named.name} is open on ${home}. Say what to change and it gets built there.`
                                                     : `${slug} is loaded. Say what to change and it gets built.` })) : (ordered.map((r) => (_jsxs(YStack, { gap: "$2", children: [_jsx(Turn, { run: r, open: r.id === current, onOpen: () => setChosen(r.id), project: slug }), r.id === current ? (_jsxs(YStack, { gap: "$1", pl: "$2", borderLeftWidth: 1, borderColor: "$borderColor", children: [fold(run.events.map((e) => ({ kind: e.kind, actor: who(e.actor), seq: e.seq, id: e.id, text: said(e, run.record?.mode) })).filter((b) => b.text)).map((b) => (_jsx(SizableText, { size: "$1", color: "$soft", children: b.text }, b.key))), pr.href ? (_jsxs(XStack, { items: "center", gap: "$2", flexWrap: "wrap", children: [_jsxs(Out, { href: pr.href, label: `Open pull request ${pr.label}`, children: [_jsxs(SizableText, { size: "$1", color: "$ink", textDecorationLine: "underline", children: ["Pull request ", pr.label] }), _jsx(ExternalLink, { size: 11 })] }), _jsx(Merge, { session: r.id, open: proposing, onMerged: merged })] })) : null] })) : null] }, r.id)))) }), _jsxs(YStack, { "data-slot": "project-ask", px: "$3", pb: "$3", gap: "$2", minW: 0, $md: { pr: 0 }, children: [note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note })) : null, picked.length ? _jsx(Attachments, { items: picked, onRemove: () => setPicked([]) }) : null, attached.length ? (_jsx(XStack, { gap: 6, flexWrap: "wrap", children: _jsx(Files, { files: attached, onFiles: setAttached }) })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void (current && running ? steer(current) : send()), onStop: current
                             ? () => void stop(t, current).then(() => setNote('Stop requested — the run keeps its work on its branch'), (e) => setNote(e.message))
-                            : undefined, busy: busy || (running && !draft.trim()), placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", plus: { upload: () => pick(attached, setAttached, setNote) }, mode: running ? null : { value: mode === 'plan' ? 'plan' : 'auto', set: (m) => setMode(m === 'plan' ? 'plan' : 'build') }, mind: running ? null : mind, voice: voice })] }), wide && !shut ? (_jsx(Grip, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", r: -GUTTER, width: GUTTER })) : null] }));
+                            : undefined, busy: busy || (running && !draft.trim()), placeholder: running ? 'Steer this run' : 'Ask Hanzo for edits', label: "Ask Hanzo for edits", plus: { upload: () => pick(attached, setAttached, setNote) }, mode: running ? null : { value: mode === 'plan' ? 'plan' : 'auto', set: (m) => setMode(m === 'plan' ? 'plan' : 'build'), items: ['auto', 'plan'] }, mind: running ? null : mind, voice: voice })] }), wide && !shut ? (_jsx(Gutter, { side: "left", span: across, floor: CHAT_FLOOR, ceil: most, reset: CHAT_WIDTH, onSpan: setSplit, label: "Resize the chat", gap: GUTTER })) : null] }));
     // The preview stays loaded while another view is open, so coming back to it
     // is the page as it was left.
     const preview = (_jsxs(YStack, { "data-slot": "preview", flex: 1, minH: 0, minW: 0, gap: "$2", display: view === 'preview' ? 'flex' : 'none', children: [_jsxs(XStack, { "data-slot": "preview-bar", items: "center", gap: "$1.5", minW: 0, shrink: 0, "$max-md": { px: '$2' }, children: [_jsx(XStack, { render: "button", "aria-label": "Reload the preview", onPress: () => frame.current?.reload(), p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(RefreshCcw, { size: 16 }) }), _jsx(PageSelect, { pages: pages, value: page, onChange: setPage, shrink: 1 }), _jsx(XStack, { flex: 1 }), _jsx(Views, { views: DEVICES, value: device, onChange: (d) => setDevice(d), label: "Device", labels: "none" }), src ? (_jsx(Out, { href: src, label: "Open in a new tab", children: _jsx(XStack, { p: "$1.5", rounded: "$3", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 16 }) }) })) : null] }), _jsx(PreviewFrame, { ref: frame, src: src, title: `${title} preview`, device: device, onBridge: onBridge, empty: _jsxs(YStack, { items: "center", gap: "$2", p: "$6", children: [_jsx(SizableText, { size: "$3", color: "$ink", children: stalled

package/lib/prompt.d.ts

@@ -73,6 +73,7 @@ export interface PromptOptions {
     mode?: {
         value: Mode;
         set: (m: Mode) => void;
+        items?: readonly Mode[];
     } | null;
     /** At the start of the row under the frame: Dev's where and which repository. */
     where?: ReactNode;

package/lib/prompt.js

@@ -113,7 +113,7 @@ export function Tune({ mind, mode, where, onUpgrade }) {
     return (_jsxs(XStack, { "data-slot": "tune", width: "100%", items: "center", gap: 2, flexWrap: "wrap", rowGap: 4, children: [where ? (_jsx(XStack, { items: "center", gap: 2, flexWrap: "wrap", minW: 0, "$max-sm": { width: '100%' }, children: where })) : null, _jsx(XStack, { flex: 1, "$max-sm": { display: 'none' } }), _jsxs(XStack, { items: "center", gap: 2, ml: "auto", shrink: 0, children: [mind ? _jsx(Model, { mind: mind, onUpgrade: onUpgrade }) : null, mind && thinks && pace ? (_jsx(Opens, { label: `Effort: ${pace.label}`, word: pace.label, dim: true, children: (close) => (_jsx(Choices, { title: "Effort", items: EFFORTS, value: mind.effort, onPick: (e) => {
                                 mind.pace(e);
                                 close();
-                            } })) })) : null, mode ? (_jsxs(Popover, { allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "data-slot": "mode", "aria-label": `Mode: ${MODES.find((m) => m.id === mode.value)?.label}`, items: "center", height: 24, px: 8, ml: 4, rounded: 6, bg: "$hover", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 12 }, children: _jsx(SizableText, { fontSize: 14, color: "$ink", children: MODES.find((m) => m.id === mode.value)?.label }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(Choices, { title: "Mode", items: MODES, value: mode.value, onPick: mode.set }) })] })) : null] })] }));
+                            } })) })) : null, mode ? (_jsxs(Popover, { allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "data-slot": "mode", "aria-label": `Mode: ${MODES.find((m) => m.id === mode.value)?.label}`, items: "center", height: 24, px: 8, ml: 4, rounded: 6, bg: "$hover", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 12 }, children: _jsx(SizableText, { fontSize: 14, color: "$ink", children: MODES.find((m) => m.id === mode.value)?.label }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(Choices, { title: "Mode", items: mode.items ? MODES.filter((m) => mode.items.includes(m.id)) : MODES, value: mode.value, onPick: mode.set }) })] })) : null] })] }));
 }
 /** The `/` or `@` the caret ends on, and the words typed after it. */
 export function trigger(value) {

package/lib/run.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, ChevronRight, Clock, Copy, ExternalLink, GitPullRequest, Globe, Pencil, Share } from '@hanzogui/lucide-icons-2';
-import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Grip, Input } from '@hanzo/ui';
+import { Button, Dialog, DialogContent, DialogTitle, DropdownMenu, Input } from '@hanzo/ui';
 import { Steer } from '@hanzo/ui/agents';
 import { Failure } from '@hanzo/ui/chat';
 import { useLimits } from '@hanzo/ui/product/useLimits';
@@ -41,6 +41,7 @@ import { Desk, SEED } from './desk.js';
 import { useHost, useTarget } from './host.js';
 import { useMind } from './mind.js';
 import { Out } from './out.js';
+import { Gutter } from './gutter.js';
 import { gap, pane } from './pane.js';
 import { measure, Prompt, useEar } from './prompt.js';
 import { useSpoken } from './voice.js';
@@ -372,15 +373,9 @@ export function Run({ id }) {
                                                     ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
                                                 ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null] }), _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: send, ready: Boolean(draft.trim()), disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', head: files.length ? _jsx(XStack, { gap: "$1.5", flexWrap: "wrap", children: _jsx(Files, { files: files, onFiles: setFiles }) }) : undefined, plus: { upload: () => pick(files, setFiles, setNote) }, 
                                 // What a new run from here is made with; words that steer this run use neither.
-                                mind: signed && !steering ? mind : null, limits: limits, voice: voice, note: "Hanzo is AI and can make mistakes." })] })] }), desk && !wide ? desk_(true) : null, desk && wide ? (_jsxs(YStack, { "data-slot": "desk", ref: split.aside, ...pane, 
+                                mind: signed && !steering ? mind : null, limits: limits, voice: voice })] })] }), desk && !wide ? desk_(true) : null, desk && wide ? (_jsxs(YStack, { "data-slot": "desk", ref: split.aside, ...pane, 
                 // A pane of its own beside the run's, the gutter between them.
-                ml: gap, position: "relative", shrink: 0, minH: 0, style: split.asideStyle, children: [split.grip ? (_jsx(Grip, { ...split.grip, label: "Resize the side panel", bar: "inline", 
-                        // The handle halfway down the edge, where a hand looks for it.
-                        justify: "center", 
-                        // In the gutter between the two panes; `left` is measured inside the pane's 1px edge.
-                        l: `calc(-1 * ${gap} - ${pane.borderWidth}px)`, width: gap, 
-                        // A finger's band, centred on the gutter.
-                        $touchable: { l: `calc(-22px - ${gap} / 2 - ${pane.borderWidth}px)`, width: 44 } })) : null, _jsx(SideProvider, { value: split.side, children: desk_(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) => {
+                ml: gap, position: "relative", shrink: 0, minH: 0, style: split.asideStyle, children: [split.grip ? (_jsx(Gutter, { ...split.grip, label: "Resize the side panel", inset: pane.borderWidth })) : null, _jsx(SideProvider, { value: split.side, children: desk_(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 === '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" })] })] }) })] }));

package/lib/suggest.d.ts

@@ -196,6 +196,10 @@ export declare function answer(raw: unknown, inputs: Input[]): Suggestion[];
 export declare function kept(raw: unknown): Kept | undefined;
 /** The rows to draw: those not dismissed. */
 export declare const shown: (k: Kept | null | undefined) => Suggestion[];
+/** What Hanzo does, three ways in: what fills the rows a person's activity and signup do not. */
+export declare const STARTERS: readonly Suggestion[];
+/** The kept rows, filled to `MOST` with the starters not dismissed: never one lonely row. */
+export declare const fill: (k: Kept | null | undefined) => Suggestion[];
 /** `k` with `id` dismissed: remembered first, the oldest forgotten past `REMEMBER`. */
 export declare function dismissed(k: Kept, id: string): Kept;
 /** The addresses and titles of dismissed rows the model is told to skip. */

package/lib/suggest.js

@@ -190,9 +190,9 @@ const SYSTEM = [
     '- prompt: the message the person would send Hanzo to do the step, first person, complete on its own, naming the source and its address when it has one.',
     '- href: copied exactly from the input the row is about, or "" when that input has none. Never write an address that is not in the input.',
     '- icon: github for a github.com address, agent for a run or an automation, chat for a conversation, file for a file, task for any other issue or task.',
-    'With no activity, suggest from what the person told us at signup (their role, their work): first things to ask Hanzo, with href "".',
+    'Answer three rows. Take them from the activity first; fill the rest from what the person told us at signup (their role, their work): first things to ask Hanzo, with href "".',
     'Never repeat an item listed under skip. Never suggest the same item twice.',
-    'If nothing is worth saying, answer {"rows": []}. Fewer good rows beat three weak ones.',
+    'With neither activity nor anything from signup worth a row, answer fewer; never pad with a weak one.',
 ].join('\n');
 /** The chat completion that asks for rows, or null when there is nothing to make them from. */
 export function request(inputs, seed, skip, now) {
@@ -309,6 +309,19 @@ export function kept(raw) {
 }
 /** The rows to draw: those not dismissed. */
 export const shown = (k) => (k ? k.rows.filter((r) => !k.dismissed.includes(r.id)).slice(0, MOST) : []);
+/** What Hanzo does, three ways in: what fills the rows a person's activity and signup do not. */
+export const STARTERS = [
+    { id: 'start:chat', icon: 'chat', title: 'Think something through', href: '', summary: '', action: 'Ask Hanzo', prompt: 'Help me think through ' },
+    { id: 'start:dev', icon: 'agent', title: 'Build an app or a site', href: '', summary: '', action: 'Describe it', prompt: 'Build me ' },
+    { id: 'start:research', icon: 'file', title: 'Research a topic', href: '', summary: '', action: 'Get a cited brief', prompt: 'Research this and give me a short brief with sources: ' },
+];
+/** The kept rows, filled to `MOST` with the starters not dismissed: never one lonely row. */
+export const fill = (k) => {
+    if (!k)
+        return [];
+    const rows = shown(k);
+    return [...rows, ...STARTERS.filter((r) => !k.dismissed.includes(r.id))].slice(0, Math.max(rows.length, MOST));
+};
 /** `k` with `id` dismissed: remembered first, the oldest forgotten past `REMEMBER`. */
 export function dismissed(k, id) {
     return { ...k, dismissed: [id, ...k.dismissed.filter((x) => x !== id)].slice(0, REMEMBER) };

package/lib/suggestions.d.ts

@@ -1,7 +1,7 @@
 import { type Target } from './api/call.ts';
 import { type Suggestion } from './suggest.ts';
 export interface Suggested {
-    /** The rows to draw: at most three, none dismissed. */
+    /** The rows to draw: three when any are, none dismissed. */
     rows: Suggestion[];
     /** Dismiss one, remembered by the account. */
     dismiss: (id: string) => void;

package/lib/suggestions.js

@@ -33,7 +33,7 @@ import { list } from './api/sessions.js';
 import { everything } from './api/work.js';
 import { claims } from './claims.js';
 import { Out } from './out.js';
-import { answer, dismissed, due, inputs, request, seed, shown, sig, skip, stale, TAKE } from './suggest.js';
+import { answer, dismissed, due, fill, inputs, request, seed, sig, skip, stale, TAKE } from './suggest.js';
 /** A source that refuses this person (a 4xx other than an expired sign-in or a rate) has nothing for them; any other failure leaves it unknown. */
 function soft(p, none) {
     return p.catch((e) => {
@@ -120,7 +120,8 @@ export function useSuggestions(t) {
         load(t).then(() => setError(null), (e) => setError(said(e)));
     }, [t]);
     const now = useSyncExternalStore(subscribe, () => doc, () => doc);
-    const rows = useMemo(() => shown(now), [now]);
+    // Filled to three with what Hanzo does, so a new account and a quiet one never see one lonely row.
+    const rows = useMemo(() => fill(now), [now]);
     const dismiss = useCallback((id) => {
         if (!doc)
             return;

package/lib/summary.js

@@ -12,18 +12,21 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo, useState } from 'react';
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ListTodo } from '@hanzogui/lucide-icons-2';
+import { FilePlus2, ListTodo } from '@hanzogui/lucide-icons-2';
 import { Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
+/** A row's pitch and inset, px: the kit menu's, so this panel reads as every other one. */
+const ROW_H = 32;
+const ROW_PX = 8;
 /** A row of the summary: its mark and its name, one press from a tab. */
 function Line({ icon, children, detail, onPress, quiet = false }) {
-    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, width: "100%", rounded: "$3", cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 13, color: quiet ? '$soft' : '$ink', numberOfLines: 1, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, children: detail })) : null] })] }));
+    return (_jsxs(XStack, { render: onPress ? 'button' : undefined, role: onPress ? 'button' : undefined, onPress: onPress, items: "center", justify: "flex-start", gap: ROW_PX, px: ROW_PX, minH: ROW_H, width: "100%", rounded: 4, cursor: onPress ? 'pointer' : undefined, hoverStyle: onPress ? { bg: '$hover' } : undefined, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [icon ? (_jsx(XStack, { width: 16, justify: "center", shrink: 0, opacity: 0.75, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", py: detail ? '$1' : 0, children: [_jsx(SizableText, { fontSize: 14, color: quiet ? '$soft' : '$ink', numberOfLines: 1, style: { textAlign: 'left' }, children: children }), detail ? (_jsx(SizableText, { fontSize: 12, color: "$soft", numberOfLines: 2, style: { textAlign: 'left' }, children: detail })) : null] })] }));
 }
 /** A section's heading, with what it adds at its end. */
-const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: "$2", pt: "$1.5", pb: "$1", minH: 28, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
+const Head = ({ children, action }) => (_jsxs(XStack, { items: "center", justify: "space-between", px: ROW_PX, minH: ROW_H, children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: children }), action] }));
 /** One section's rows; `done` runs after a row is pressed (the popover puts itself away). */
 function Rows({ section, done, details = false }) {
     const { entries, empty, lead } = section;
-    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { quiet: true, onPress: () => {
+    return (_jsxs(_Fragment, { children: [lead ? (_jsx(Line, { icon: _jsx(FilePlus2, { size: 15, "aria-hidden": true }), onPress: () => {
                     done?.();
                     lead.run();
                 }, children: lead.title })) : null, entries.map((e) => (_jsx(Line, { icon: e.icon, detail: details ? e.detail : undefined, onPress: e.open
@@ -43,7 +46,7 @@ export function Summary({ sections, onOpen, label = 'Summary' }) {
         setOpen(false);
         onOpen?.();
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 300, children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, gap: 1, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { gap: 1, children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1.5", mx: "$1" }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { children: _jsx(XStack, { render: "button", "data-slot": "summary-toggle", "aria-label": label, "aria-haspopup": "dialog", "aria-expanded": open, ...{ title: label }, width: 32, height: 32, rounded: "$3", items: "center", justify: "center", cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(ListTodo, { size: 16, "aria-hidden": true }) }) }), _jsx(PopoverContent, { solid: true, align: "end", sideOffset: 8, p: 4, width: 288, maxW: "calc(100vw - 24px)", children: _jsx(YStack, { "data-slot": "summary", role: "dialog", "aria-label": label, self: "stretch", width: "100%", maxH: "min(70dvh, 520px)", overflowY: "auto", overflowX: "hidden", children: sections.map((s, i) => (_jsxs(YStack, { children: [i ? _jsx(XStack, { height: 1, bg: "$borderColor", my: 4, mx: 4 }) : null, _jsx(Head, { action: s.action, children: s.title }), _jsx(Rows, { section: s, done: done })] }, s.id))) }) })] }));
 }
 /** Each section as a kind of tab for `Panel`: the same rows, with their second lines. */
 export function kinds(sections, icons = {}) {

package/package.json

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