@hanzo/build 0.2.68 → 0.2.70

package/lib/api/studio.d.ts

@@ -30,7 +30,34 @@ export interface Start {
     input: Record<string, unknown>;
     title?: string;
     parent?: string;
+    /** A brand (design system) the run reads as brand.* — its palette, type and voice. */
+    brand?: string;
 }
+/**
+ * A design system: one of Studio's brands, the one store for them. Its tokens
+ * are W3C design tokens (color, font, type, space, radius) and two groups of our
+ * own, `components` and `voice`, each a line a model follows.
+ *
+ *   GET  /v1/studio/brands        {data: [brand]}   the ones you may read
+ *   GET  /v1/studio/brands/{id}   one
+ *   POST /v1/studio/brands        {name, tokens, shared?} → brand
+ */
+export interface Brand {
+    id: string;
+    name: string;
+    tokens: Record<string, unknown>;
+}
+export declare function brandOf(raw: unknown): Brand;
+export declare function brands(t: Target, init?: {
+    signal?: AbortSignal;
+}): Promise<Brand[]>;
+export declare function brand(t: Target, id: string, init?: {
+    signal?: AbortSignal;
+}): Promise<Brand>;
+export declare function keepBrand(t: Target, b: {
+    name: string;
+    tokens: Record<string, unknown>;
+}, signal?: AbortSignal): Promise<Brand>;
 export declare function run(raw: unknown): Run;
 /** A run that has ended, one way or the other. */
 export declare const ended: (r: Run) => boolean;

package/lib/api/studio.js

@@ -14,6 +14,20 @@
  */
 import { call, Refusal, seg } from './call.js';
 import { item } from './library.js';
+export function brandOf(raw) {
+    const o = obj(raw);
+    return { id: str(o.id), name: str(o.name), tokens: obj(o.tokens) };
+}
+export async function brands(t, init) {
+    const raw = obj(await call(t, 'GET', '/v1/studio/brands', undefined, init));
+    return (Array.isArray(raw.data) ? raw.data : []).map(brandOf).filter((b) => b.id);
+}
+export async function brand(t, id, init) {
+    return brandOf(await call(t, 'GET', `/v1/studio/brands/${seg(id)}`, undefined, init));
+}
+export async function keepBrand(t, b, signal) {
+    return brandOf(await call(t, 'POST', '/v1/studio/brands', { name: b.name, tokens: b.tokens }, { signal }));
+}
 const str = (v) => (typeof v === 'string' ? v : '');
 const obj = (v) => (v && typeof v === 'object' ? v : {});
 export function run(raw) {

package/lib/carry.d.ts

@@ -1,14 +1,16 @@
 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 {
     gear: GearState;
     skills: Shelf;
+    /** The design systems (Studio brands): attach one, or make one by chat. */
+    design: Shelf;
     /** The plugins that run for this person (`@` lists the same). */
     plugins: Shelf;
     /** A dialog a plugin opened, for the surface to draw; null when none is. */
@@ -16,14 +18,25 @@ export interface Carry {
     /** Whether a plugin that prepares a message is on. */
     preparing: boolean;
     /** What the plugins that are on add to the message about to go. */
-    prep: (turn: Turn, signal: AbortSignal) => Promise<Prep>;
+    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,16 +10,21 @@ 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 { BookOpen, ListChecks, ScrollText } from '@hanzogui/lucide-icons-2';
+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';
+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 { active as lighted, prep, shelf as pluginShelf, usePlugins } from './plugins/index.js';
 /** The most of each skill a message carries. */
@@ -34,8 +39,13 @@ async function remembered(t) {
         .filter(Boolean);
 }
 /** The words `skills`, `memory` and `mode` add to a message. */
-async function said(t, skills, memory, mode) {
+async function said(t, skills, memory, mode, design) {
     const parts = [];
+    if (design) {
+        const b = await brand(t, design).catch(() => null);
+        if (b?.name)
+            parts.push(designSaid(b));
+    }
     if (skills.length) {
         const own = await authored(t).catch(() => []);
         for (const n of skills) {
@@ -53,11 +63,16 @@ async function said(t, skills, memory, mode) {
         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.
@@ -77,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 } = 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),
@@ -89,11 +105,33 @@ export function useCarry(t, key, customize, lent) {
         browse: { label: 'Browse skills', onPress: () => customize('skills') },
     };
     const plugins = pluginShelf(found, gear, composer);
+    // The design systems: Studio's brands, the one store for them.
+    const kits = useRead(signed ? () => brands(t) : null, [], [t, signed, design]);
+    const named = kits.value.find((b) => b.id === design);
+    const designs = {
+        rows: kits.value.map((b) => {
+            const c = (b.tokens.color ?? {});
+            return { id: b.id, label: b.name, note: [c.primary?.$value, c.accent?.$value].filter(Boolean).join(' '), icon: _jsx(Palette, { size: 16 }), on: b.id === design };
+        }),
+        pick: (id) => gear.set({ design: design === id ? '' : id }),
+        loading: kits.loading,
+        error: kits.error ? 'The design systems could not be read.' : null,
+        empty: 'No design systems yet',
+        create: {
+            label: 'Create design system',
+            onPress: () => {
+                if (!gear.gear.plugins.includes('design'))
+                    gear.toggle('plugins', 'design');
+                lentNow.current.setDraft('Make me a design system for ');
+            },
+        },
+    };
     const lit = lighted(found.plugins, gear.gear);
     const on = [
         ...skills.map((n) => ({ id: `skill:${n}`, label: n, icon: _jsx(ScrollText, { size: 14 }), onRemove: () => gear.toggle('skills', n) })),
         ...(research ? [{ id: 'research', label: 'Research', icon: _jsx(BookOpen, { size: 14 }), onRemove: () => gear.set({ research: false }) }] : []),
         ...(mode === 'plan' ? [{ id: 'plan', label: 'Plan', icon: _jsx(ListChecks, { size: 14 }), onRemove: () => gear.set({ mode: 'auto' }) }] : []),
+        ...(design ? [{ id: 'design', label: named?.name ?? 'Design system', icon: _jsx(Palette, { size: 14 }), onRemove: () => gear.set({ design: '' }) }] : []),
         ...lit
             .filter((p) => p.id !== 'research')
             .map((p) => ({ id: `plugin:${p.id}`, label: p.name, icon: p.icon, onRemove: () => gear.toggle('plugins', p.id) })),
@@ -105,21 +143,51 @@ export function useCarry(t, key, customize, lent) {
         if (!signedIn)
             return setText(mode === 'plan' ? 'Plan mode: lay out the plan and stop until the person says go.' : '');
         let live = true;
-        void said(t, skills, memory, mode).then((x) => live && setText(x));
+        void said(t, skills, memory, mode, design).then((x) => live && setText(x));
         return () => {
             live = false;
         };
         // `skills` is read through `asked`, its contents.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [t, signedIn, asked, memory, mode]);
+    }, [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,
         on,
         text,
         preparing: lit.length > 0,
-        prep: (turn, signal) => prep(found.plugins, gear.gear, turn, composer, signal),
+        design: designs,
+        // A design system a plugin made is attached at once, and the maker turns off: it made one.
+        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/design.d.ts

@@ -0,0 +1,134 @@
+/**
+ * A design system as the composer handles it: drafted by a model, kept as a
+ * Studio brand (W3C design tokens plus `components` and `voice`), said to the
+ * model on every message of a conversation it is attached to, and drawn as a
+ * page to look at. Pure, so it is tested without a browser.
+ */
+import type { Brand } from './api/studio.ts';
+/** What a model is asked to answer: the system in plain fields. */
+export interface Draft {
+    name: string;
+    colors: Record<string, string>;
+    fonts: {
+        heading: string;
+        body: string;
+        mono: string;
+    };
+    /** Type sizes, px, smallest first. */
+    scale: number[];
+    /** Spacing steps, px. */
+    spacing: number[];
+    radius: Record<string, number>;
+    /** One line each: how a button, card, input, nav… looks and behaves. */
+    components: Record<string, string>;
+    voice: {
+        tone: string;
+        do: string[];
+        dont: string[];
+    };
+}
+/** The schema the drafting call decodes under. */
+export declare const SCHEMA: {
+    readonly type: 'object';
+    readonly additionalProperties: false;
+    readonly required: readonly ['name', 'colors', 'fonts', 'scale', 'spacing', 'radius', 'components', 'voice'];
+    readonly properties: {
+        readonly name: {
+            readonly type: 'string';
+        };
+        readonly colors: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'];
+            readonly properties: {
+                [k: string]: {
+                    type: string;
+                };
+            };
+        };
+        readonly fonts: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['heading', 'body', 'mono'];
+            readonly properties: {
+                readonly heading: {
+                    readonly type: 'string';
+                };
+                readonly body: {
+                    readonly type: 'string';
+                };
+                readonly mono: {
+                    readonly type: 'string';
+                };
+            };
+        };
+        readonly scale: {
+            readonly type: 'array';
+            readonly items: {
+                readonly type: 'number';
+            };
+        };
+        readonly spacing: {
+            readonly type: 'array';
+            readonly items: {
+                readonly type: 'number';
+            };
+        };
+        readonly radius: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['sm', 'md', 'lg'];
+            readonly properties: {
+                readonly sm: {
+                    readonly type: 'number';
+                };
+                readonly md: {
+                    readonly type: 'number';
+                };
+                readonly lg: {
+                    readonly type: 'number';
+                };
+            };
+        };
+        readonly components: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['button', 'card', 'input', 'nav', 'hero'];
+            readonly properties: {
+                [k: string]: {
+                    type: string;
+                };
+            };
+        };
+        readonly voice: {
+            readonly type: 'object';
+            readonly additionalProperties: false;
+            readonly required: readonly ['tone', 'do', 'dont'];
+            readonly properties: {
+                readonly tone: {
+                    readonly type: 'string';
+                };
+                readonly do: {
+                    readonly type: 'array';
+                    readonly items: {
+                        readonly type: 'string';
+                    };
+                };
+                readonly dont: {
+                    readonly type: 'array';
+                    readonly items: {
+                        readonly type: 'string';
+                    };
+                };
+            };
+        };
+    };
+};
+/** A model's answer as a Draft, or why it is not one. */
+export declare function drafted(raw: unknown): Draft | string;
+/** A Draft as W3C design tokens, with our two groups beside them. */
+export declare function tokensOf(d: Draft): Record<string, unknown>;
+/** What a model is told on every message of a conversation the system is attached to. */
+export declare function said(b: Brand): string;
+/** The system drawn as a page: its palette, type, a button, a card, an input, its voice. */
+export declare function preview(b: Brand): string;

package/lib/design.js

@@ -0,0 +1,123 @@
+/** The schema the drafting call decodes under. */
+export const SCHEMA = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['name', 'colors', 'fonts', 'scale', 'spacing', 'radius', 'components', 'voice'],
+    properties: {
+        name: { type: 'string' },
+        colors: {
+            type: 'object',
+            additionalProperties: false,
+            required: ['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'],
+            properties: Object.fromEntries(['primary', 'secondary', 'accent', 'background', 'surface', 'text', 'muted', 'border'].map((k) => [k, { type: 'string' }])),
+        },
+        fonts: { type: 'object', additionalProperties: false, required: ['heading', 'body', 'mono'], properties: { heading: { type: 'string' }, body: { type: 'string' }, mono: { type: 'string' } } },
+        scale: { type: 'array', items: { type: 'number' } },
+        spacing: { type: 'array', items: { type: 'number' } },
+        radius: { type: 'object', additionalProperties: false, required: ['sm', 'md', 'lg'], properties: { sm: { type: 'number' }, md: { type: 'number' }, lg: { type: 'number' } } },
+        components: {
+            type: 'object',
+            additionalProperties: false,
+            required: ['button', 'card', 'input', 'nav', 'hero'],
+            properties: Object.fromEntries(['button', 'card', 'input', 'nav', 'hero'].map((k) => [k, { type: 'string' }])),
+        },
+        voice: { type: 'object', additionalProperties: false, required: ['tone', 'do', 'dont'], properties: { tone: { type: 'string' }, do: { type: 'array', items: { type: 'string' } }, dont: { type: 'array', items: { type: 'string' } } } },
+    },
+};
+const HEX = /^#[0-9a-f]{3}([0-9a-f]{3})?$/i;
+const str = (v) => (typeof v === 'string' ? v.trim() : '');
+const obj = (v) => (v && typeof v === 'object' && !Array.isArray(v) ? v : {});
+const nums = (v, lo, hi) => (Array.isArray(v) ? v.filter((n) => typeof n === 'number' && n >= lo && n <= hi) : []);
+const lines = (v) => (Array.isArray(v) ? v.map(str).filter(Boolean).slice(0, 8) : []);
+/** A model's answer as a Draft, or why it is not one. */
+export function drafted(raw) {
+    const o = obj(raw);
+    const name = str(o.name).slice(0, 80);
+    if (!name)
+        return 'The design system has no name.';
+    const colors = Object.fromEntries(Object.entries(obj(o.colors)).filter(([, v]) => HEX.test(str(v))).map(([k, v]) => [k, str(v)]));
+    if (!colors.primary || !colors.background || !colors.text)
+        return 'The design system needs at least a primary, a background and a text colour.';
+    const f = obj(o.fonts);
+    const fonts = { heading: str(f.heading) || 'Inter', body: str(f.body) || 'Inter', mono: str(f.mono) || 'ui-monospace' };
+    const r = obj(o.radius);
+    const radius = Object.fromEntries(Object.entries(r).filter(([, v]) => typeof v === 'number' && v >= 0 && v <= 64));
+    const v = obj(o.voice);
+    return {
+        name,
+        colors,
+        fonts,
+        scale: nums(o.scale, 8, 160).slice(0, 10),
+        spacing: nums(o.spacing, 0, 256).slice(0, 12),
+        radius,
+        components: Object.fromEntries(Object.entries(obj(o.components)).map(([k, d]) => [k, str(d)]).filter(([, d]) => d)),
+        voice: { tone: str(v.tone), do: lines(v.do), dont: lines(v.dont) },
+    };
+}
+/** A Draft as W3C design tokens, with our two groups beside them. */
+export function tokensOf(d) {
+    const group = (rec, type, unit = '') => Object.fromEntries(Object.entries(rec).map(([k, v]) => [k, { $value: unit ? `${v}${unit}` : v, $type: type }]));
+    return {
+        color: group(d.colors, 'color'),
+        font: group({ heading: d.fonts.heading, body: d.fonts.body, mono: d.fonts.mono }, 'fontFamily'),
+        type: group(Object.fromEntries(d.scale.map((n, i) => [`step${i}`, n])), 'dimension', 'px'),
+        space: group(Object.fromEntries(d.spacing.map((n, i) => [`s${i}`, n])), 'dimension', 'px'),
+        radius: group(d.radius, 'dimension', 'px'),
+        components: Object.fromEntries(Object.entries(d.components).map(([k, v]) => [k, { $value: v, $type: 'string' }])),
+        voice: { tone: { $value: d.voice.tone, $type: 'string' }, do: { $value: d.voice.do, $type: 'string' }, dont: { $value: d.voice.dont, $type: 'string' } },
+    };
+}
+/** One token group as `name value` pairs. */
+function pairs(tokens, group) {
+    return Object.entries(obj(tokens[group])).map(([k, v]) => {
+        const val = obj(v).$value;
+        return [k, Array.isArray(val) ? val.join('; ') : String(val ?? '')];
+    });
+}
+/** What a model is told on every message of a conversation the system is attached to. */
+export function said(b) {
+    const t = b.tokens;
+    const row = (g) => pairs(t, g).map(([k, v]) => `${k} ${v}`).join(', ');
+    const parts = [
+        `Design system "${b.name}" is attached to this conversation. Everything you make — pages, apps, components, slides, images and copy — follows it exactly; never invent other colours, fonts or radii.`,
+        row('color') && `Colours: ${row('color')}.`,
+        row('font') && `Fonts: ${row('font')}.`,
+        row('type') && `Type scale: ${row('type')}.`,
+        row('space') && `Spacing: ${row('space')}.`,
+        row('radius') && `Radius: ${row('radius')}.`,
+        row('components') && `Components: ${pairs(t, 'components').map(([k, v]) => `${k} — ${v}`).join(' ')}`,
+        row('voice') && `Voice: ${pairs(t, 'voice').map(([k, v]) => `${k}: ${v}`).join(' | ')}`,
+        'In HTML, set these as CSS custom properties on :root and use them; load the fonts from Google Fonts when they are web fonts.',
+    ];
+    return parts.filter(Boolean).join('\n');
+}
+const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+/** The system drawn as a page: its palette, type, a button, a card, an input, its voice. */
+export function preview(b) {
+    const t = b.tokens;
+    const c = Object.fromEntries(pairs(t, 'color'));
+    const f = Object.fromEntries(pairs(t, 'font'));
+    const r = Object.fromEntries(pairs(t, 'radius'));
+    const sizes = pairs(t, 'type').map(([, v]) => v);
+    const voice = Object.fromEntries(pairs(t, 'voice'));
+    const comps = pairs(t, 'components');
+    const fonts = [f.heading, f.body].filter((x) => x && !/^ui-|system|sans-serif|serif$/i.test(x));
+    const link = fonts.length ? `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?${fonts.map((x) => `family=${encodeURIComponent(x)}:wght@400;600;700`).join('&')}&display=swap">` : '';
+    const swatches = Object.entries(c).map(([k, v]) => `<div class="sw"><span style="background:${esc(v)}"></span><b>${esc(k)}</b><code>${esc(v)}</code></div>`).join('');
+    const scale = sizes.map((s) => `<div style="font-size:${esc(s)}">${esc(b.name)} — ${esc(s)}</div>`).join('');
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${esc(b.name)}</title>${link}
+<style>:root{--primary:${c.primary};--secondary:${c.secondary ?? c.primary};--accent:${c.accent ?? c.primary};--bg:${c.background};--surface:${c.surface ?? c.background};--text:${c.text};--muted:${c.muted ?? c.text};--border:${c.border ?? c.muted ?? c.text};--r-sm:${r.sm ?? '4px'};--r-md:${r.md ?? '8px'};--r-lg:${r.lg ?? '16px'}}
+body{margin:0;background:var(--bg);color:var(--text);font-family:'${esc(f.body ?? 'Inter')}',system-ui,sans-serif;padding:40px;line-height:1.5}
+h1,h2{font-family:'${esc(f.heading ?? 'Inter')}',system-ui,sans-serif;margin:0 0 12px}h2{margin-top:40px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+.row{display:flex;flex-wrap:wrap;gap:16px}.sw{display:flex;flex-direction:column;gap:4px;width:120px}.sw span{height:64px;border-radius:var(--r-md);border:1px solid var(--border)}.sw code{color:var(--muted);font-size:12px}
+.btn{background:var(--primary);color:var(--bg);border:0;border-radius:var(--r-md);padding:12px 20px;font:inherit;font-weight:600}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;max-width:320px}input{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font:inherit;width:260px}
+li{color:var(--muted)}</style></head><body>
+<h1 style="font-size:40px">${esc(b.name)}</h1><p style="color:var(--muted)">${esc(voice.tone ?? '')}</p>
+<h2>Colour</h2><div class="row">${swatches}</div>
+<h2>Type</h2>${scale}
+<h2>Components</h2><div class="row" style="align-items:flex-start"><button class="btn">Primary action</button><button class="btn ghost">Secondary</button><input placeholder="An input"><div class="card"><b>A card</b><p style="color:var(--muted);margin:8px 0 0">${esc(comps.find(([k]) => k === 'card')?.[1] ?? '')}</p></div></div>
+<ul>${comps.map(([k, v]) => `<li><b style="color:var(--text)">${esc(k)}</b> — ${esc(v)}</li>`).join('')}</ul>
+<h2>Voice</h2><p><b>Do</b>: ${esc(voice.do ?? '')}</p><p><b>Don't</b>: ${esc(voice.dont ?? '')}</p>
+</body></html>`;
+}

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 : '';
@@ -205,7 +206,13 @@ export function Landing({ onStarted }) {
             const prepped = carry.preparing ? await carry.prep({ text: draft.trim(), files: [], thread: '' }, new AbortController().signal) : {};
             // An answer of a plugin's own (a deck) is the answer: no run is started for it.
             if (prepped.reply) {
-                setNote(prepped.reply);
+                // Its words, without the page it drew (Chat shows that in the side panel).
+                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, {
@@ -303,15 +310,16 @@ 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),
                                     skills: carry.skills,
+                                    design: carry.design,
                                     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/plugin.d.ts

@@ -35,6 +35,8 @@ export interface Turn {
     files: File[];
     /** The conversation's id, or '' for one not begun. */
     thread: string;
+    /** The design system attached to the conversation (a Studio brand id), or ''. */
+    design: string;
 }
 /** What a plugin adds to the message. */
 export interface Prep {
@@ -44,6 +46,8 @@ export interface Prep {
     files?: File[];
     /** An answer of the plugin's own, in markdown; the model is not asked. */
     reply?: string;
+    /** A design system the plugin made: attached to the conversation from then on. */
+    design?: string;
 }
 export interface Plugin {
     id: string;

package/lib/plugins/design.d.ts

@@ -0,0 +1,8 @@
+import { type Target } from '../api/call.ts';
+import type { Plugin, Prep, Turn } from '../plugin.ts';
+/** Hanzo's model that decodes under a strict schema. */
+export declare const DRAFTER = "zen5-flash";
+/** The site a brief points at, if it names one. */
+export declare const siteOf: (text: string) => string;
+export declare function make(turn: Turn, t: Target, signal: AbortSignal): Promise<Prep>;
+export declare const designer: Plugin;

package/lib/plugins/design.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Design system: while it is on, a message is a brief for one — "make me a
+ * design system for X", or a site to take it from — and the answer is the
+ * system: drafted by a Hanzo model under a strict schema (palette, type,
+ * spacing, radii, components, voice), kept as a Studio brand (the one store for
+ * them), drawn as a page in the side panel, and attached to the conversation, so
+ * everything made after it follows it. From `+` › Design system it attaches to
+ * any later conversation, in Chat or in Dev.
+ */
+import { Palette } from '@hanzogui/lucide-icons-2';
+import { call } from '../api/call.js';
+import { keepBrand } from '../api/studio.js';
+import { drafted, preview, SCHEMA, tokensOf } from '../design.js';
+/** Hanzo's model that decodes under a strict schema. */
+export const DRAFTER = 'zen5-flash';
+/** The site a brief points at, if it names one. */
+export const siteOf = (text) => text.match(/https?:\/\/[^\s)]+/)?.[0] ?? '';
+const BRIEF = 'You design design systems. From the brief (and the site text, when given), answer one complete, coherent system: ' +
+    'a name; eight hex colours with enough contrast for text on background and on primary; heading, body and mono fonts (Google Fonts names where you can); ' +
+    'a type scale of 6-8 px sizes; a spacing scale of 6-10 px steps; sm, md and lg radii; one line each for button, card, input, nav and hero; ' +
+    'and a voice: its tone in a sentence, 3-5 do and 3-5 dont lines. Take colours, fonts and tone from the site when one is given.';
+async function site(t, url, signal) {
+    if (!url)
+        return '';
+    const d = await call(t, 'POST', '/v1/crawl', { url }, { signal }).catch(() => null);
+    return d?.success ? (d.data?.markdown ?? '').slice(0, 6000) : '';
+}
+export async function make(turn, t, signal) {
+    const brief = turn.text.trim();
+    if (!brief)
+        return {};
+    const page = await site(t, siteOf(brief), signal);
+    const raw = await call(t, 'POST', '/v1/chat/completions', {
+        model: DRAFTER,
+        max_tokens: 2000,
+        messages: [
+            { role: 'system', content: BRIEF },
+            { role: 'user', content: page ? `${brief}\n\nThe site, as text:\n${page}` : brief },
+        ],
+        response_format: { type: 'json_schema', json_schema: { name: 'design_system', strict: true, schema: SCHEMA } },
+    }, { signal });
+    const text = raw?.choices?.[0]?.message?.content;
+    let parsed = null;
+    try {
+        parsed = JSON.parse(typeof text === 'string' ? text : '');
+    }
+    catch {
+        throw new Error('The model did not answer a design system. Try the brief again.');
+    }
+    const d = drafted(parsed);
+    if (typeof d === 'string')
+        throw new Error(d);
+    const b = await keepBrand(t, { name: d.name, tokens: tokensOf(d) }, signal);
+    const file = `${d.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'design-system'}.html`;
+    const reply = [
+        `**${d.name}** is saved and attached to this conversation: what you build here follows it, and \`+\` › Design system attaches it anywhere else.`,
+        `Colours ${Object.values(d.colors).join(' ')} · ${d.fonts.heading} / ${d.fonts.body} · radius ${Object.values(d.radius).join('/')}px`,
+        d.voice.tone ? `Voice: ${d.voice.tone}` : '',
+        '```html ' + file + '\n' + preview(b) + '\n```',
+    ];
+    return { reply: reply.filter(Boolean).join('\n\n'), design: b.id };
+}
+export const designer = {
+    id: 'design',
+    name: 'Design system',
+    note: 'Make one from a brief or a site',
+    icon: _jsx(Palette, { size: 16 }),
+    prepare: (turn, c, signal) => make(turn, c.target, signal),
+};

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

@@ -23,6 +23,7 @@ import { say } from '../customize/say.js';
 import { path } from '../route.js';
 import { pdf } from './pdf.js';
 import { project } from './project.js';
+import { designer } from './design.js';
 import { deep } from './research.js';
 import { sketch } from './sketch.js';
 import { slides } from './slides.js';
@@ -46,6 +47,7 @@ export async function probe(t) {
         sketch,
         administers(t.token(), t.org) ? template : null,
         runs.includes('slides') ? slides : null,
+        studio.status === 'fulfilled' ? designer : null,
         pdf(runs.includes('document')),
     ].filter((p) => p !== null);
 }
@@ -114,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/plugins/slides.js

@@ -40,7 +40,7 @@ export async function deck(turn, t, signal) {
     if (!ask)
         return {};
     const last = turn.thread ? decks.get(turn.thread) : undefined;
-    const r = await make(t, { template: 'slides', title: ask.slice(0, 80), input: { brief: last ? revision(last, ask) : ask, format: 'pptx' } }, signal);
+    const r = await make(t, { template: 'slides', title: ask.slice(0, 80), input: { brief: last ? revision(last, ask) : ask, format: 'pptx' }, ...(turn.design ? { brand: turn.design } : {}) }, signal);
     if (turn.thread)
         decks.set(turn.thread, r);
     return { reply: told(r) };

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/package.json

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