@hanzo/build 0.2.62 → 0.2.64

package/lib/plugins/slides.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Presentations: while it is on, a message makes a deck in Hanzo Studio (the
+ * `slides` template, a PowerPoint file) and the answer is the deck: its outline,
+ * the file, and the run in Studio, where it is edited. A later message in the
+ * same conversation revises the last deck rather than starting over.
+ */
+import { Presentation } from '@hanzogui/lucide-icons-2';
+import { json } from '../api/chat.js';
+import { make } from '../api/studio.js';
+/** The last deck each conversation made: what a later message revises. */
+const decks = new Map();
+/** What a deck's writing step said: its title and its slides' titles. */
+export function outline(text) {
+    const o = json(text) ?? {};
+    const slides = (Array.isArray(o.slides) ? o.slides : [])
+        .map((s) => (s && typeof s === 'object' ? s.title : ''))
+        .map((t) => (typeof t === 'string' ? t.trim() : ''))
+        .filter(Boolean);
+    return { title: typeof o.title === 'string' ? o.title.trim() : '', slides };
+}
+/** The brief a revision is made from: the deck as it stands, then the change asked for. */
+export function revision(last, ask) {
+    return `Revise this deck. Keep what the change does not touch.\n\nThe deck as it stands:\n${last.text.trim()}\n\nThe change:\n${ask}`;
+}
+/** The answer a made deck is: its outline, the file, and where it is edited. */
+export function told(r) {
+    const { title, slides } = outline(r.text);
+    const file = r.outputs[0];
+    const head = `**${title || r.title || 'Your deck'}**${slides.length ? ` — ${slides.length} slides` : ''}`;
+    const links = [
+        file?.url ? `[Download the deck](${file.url}) (PowerPoint; the link works for an hour)` : '',
+        file?.origin ? `[Open it in Studio](${file.origin}) to edit it` : '',
+    ].filter(Boolean);
+    const list = slides.map((s, i) => `${i + 1}. ${s}`).join('\n');
+    return [head, links.join(' · '), list, 'It is kept in your Library.'].filter(Boolean).join('\n\n');
+}
+export async function deck(turn, t, signal) {
+    const ask = turn.text.trim();
+    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);
+    if (turn.thread)
+        decks.set(turn.thread, r);
+    return { reply: told(r) };
+}
+export const slides = {
+    id: 'slides',
+    name: 'Presentations',
+    note: 'Create and edit decks',
+    icon: _jsx(Presentation, { size: 16 }),
+    prepare: (turn, c, signal) => deck(turn, c.target, signal),
+};

package/lib/plugins/template.d.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from '../plugin.ts';
+export interface Draft {
+    name: string;
+    description: string;
+    body: string;
+}
+/** A skill's name from any words: one lowercase segment of letters, digits and hyphens. */
+export declare function slug(text: string): string;
+/** What a model's draft says, each part the ask's own where the draft has none. */
+export declare function drafted(said: string, draft: string): Draft;
+/** The SKILL.md a template is saved as: its name and description up front, then the template. */
+export declare function document(d: Draft): string;
+export declare const template: Plugin;

package/lib/plugins/template.js

@@ -0,0 +1,92 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Template Creator: the ask in the composer, saved as a reusable template — one
+ * of the org's own skills (POST /v1/tool/skills), switched on as it is saved so
+ * it is under `+` › Skills from then on. A Hanzo model drafts the template from
+ * the ask (its inputs as {{placeholders}}); the person reads and edits it before
+ * it is saved. Writing a skill takes an org admin, so only an admin is offered it.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { LayoutTemplate } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input, Textarea } from '@hanzo/ui';
+import { useEffect, useState } from 'react';
+import { ask, json } from '../api/chat.js';
+import { NAME, refuse, tool, write } from '../api/skills.js';
+import { toggle } from '../api/tools.js';
+import { say } from '../customize/say.js';
+const DRAFT = `Turn the person's request into a reusable template, saved as a skill an agent follows. Answer only JSON: {"name": "a short lowercase-hyphenated name", "description": "one line: when to use it", "body": "markdown, under 250 words: what it is for, the inputs it needs written as {{placeholders}}, then the steps"}.`;
+/** A skill's name from any words: one lowercase segment of letters, digits and hyphens. */
+export function slug(text) {
+    const s = text
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 48)
+        .replace(/-+$/, '');
+    return NAME.test(s) ? s : 'template';
+}
+/** The first line of a text, cut to a line's length. */
+const first = (text) => (text.trim().split('\n')[0] ?? '').slice(0, 160).trim();
+/** What a model's draft says, each part the ask's own where the draft has none. */
+export function drafted(said, draft) {
+    const o = json(said) ?? {};
+    const str = (v) => (typeof v === 'string' ? v.trim() : '');
+    return {
+        name: slug(str(o.name) || draft.split(/\s+/).slice(0, 6).join(' ')),
+        description: first(str(o.description) || draft),
+        body: str(o.body) || draft.trim(),
+    };
+}
+/** The SKILL.md a template is saved as: its name and description up front, then the template. */
+export function document(d) {
+    return `---\nname: ${d.name}\ndescription: ${JSON.stringify(d.description.replace(/\s+/g, ' ').trim())}\n---\n\n${d.body.trim()}\n`;
+}
+function Creator({ c }) {
+    const from = c.draft.trim();
+    const [d, setD] = useState({ name: from ? slug(from.split(/\s+/).slice(0, 6).join(' ')) : '', description: first(from), body: from });
+    const [drafting, setDrafting] = useState(Boolean(from));
+    const [busy, setBusy] = useState(false);
+    const [note, setNote] = useState('');
+    const [saved, setSaved] = useState('');
+    useEffect(() => {
+        if (!from)
+            return;
+        const stop = new AbortController();
+        ask(c.target, DRAFT, from, stop.signal, 2000)
+            .then((said) => setD(drafted(said, from)))
+            .catch(() => undefined)
+            .finally(() => setDrafting(false));
+        return () => stop.abort();
+    }, [c.target, from]);
+    const save = async () => {
+        const content = document(d);
+        const why = refuse({ name: d.name, content });
+        if (why) {
+            setNote(why);
+            return;
+        }
+        setBusy(true);
+        setNote('');
+        try {
+            const s = await write(c.target, { name: d.name, description: d.description, content });
+            await toggle(c.target, [tool(s.name)]);
+            setSaved(s.name);
+        }
+        catch (e) {
+            setNote(say(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => !o && c.show(null), children: _jsxs(DialogContent, { maxW: 640, width: "100%", children: [_jsx(DialogTitle, { children: "Template Creator" }), _jsx(DialogDescription, { children: saved ? `Saved as ${saved}. It is under + › Skills.` : drafting ? 'Hanzo is drafting the template from your message…' : 'A reusable template, saved as one of your skills.' }), saved ? null : (_jsxs(YStack, { gap: "$3", children: [_jsx(Input, { value: d.name, onChangeText: (name) => setD({ ...d, name }), placeholder: "weekly-update", "aria-label": "Name", autoCapitalize: "none" }), _jsx(Input, { value: d.description, onChangeText: (description) => setD({ ...d, description }), placeholder: "When to use it", "aria-label": "Description" }), _jsx(Textarea, { value: d.body, onChangeText: (body) => setD({ ...d, body }), placeholder: '# Weekly update\n\nInputs: {{team}}, {{week}}\n\n1. …', "aria-label": "Template", rows: 12, style: { maxHeight: '40vh', overflowY: 'auto' } })] })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null, _jsx(XStack, { gap: "$2", justify: "flex-end", children: saved ? (_jsx(Button, { size: "sm", onPress: () => c.show(null), children: "Done" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => c.show(null), children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy || drafting || !d.name || !d.body.trim(), onPress: () => void save(), children: "Save" })] })) })] }) }));
+}
+export const template = {
+    id: 'template',
+    name: 'Template Creator',
+    note: 'Templates saved as skills',
+    icon: _jsx(LayoutTemplate, { size: 16 }),
+    open: (c) => c.show(_jsx(Creator, { c: c })),
+};

package/lib/prompt.d.ts

@@ -16,7 +16,7 @@ export declare const measure: {
     readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
     readonly mx: 'auto';
 };
-/** The round controls' box, px. */
+/** The round controls' box, px, and a phone's, a finger's width. */
 export declare const ROUND = 32;
 /** What every Composer placeholder says, unless a surface names who is listening. */
 export declare const ASK = "Type / for skills";

package/lib/prompt.js

@@ -37,8 +37,9 @@ export const MEASURE = 'var(--container-prose, 48rem)';
 export const GAP = 20;
 /** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
 export const measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${MEASURE} - 1.5rem)`, mx: 'auto' };
-/** The round controls' box, px. */
+/** The round controls' box, px, and a phone's, a finger's width. */
 export const ROUND = 32;
+const TAP = 44;
 /** The frame's corner, px: 12 on a laptop, 22 on a phone. */
 const CORNER = 12;
 const CORNER_PHONE = 22;
@@ -46,6 +47,8 @@ const CORNER_PHONE = 22;
 const ON = 'var(--primary-foreground)';
 /** A round control with no ground of its own until it is pointed at. */
 const QUIET = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg: '$hover' } };
+/** The model rows the menu draws before anything is typed. */
+const SHOWN = 40;
 /** What every Composer placeholder says, unless a surface names who is listening. */
 export const ASK = 'Type / for skills';
 /**
@@ -81,15 +84,27 @@ function Opens({ label, word, dim, children }) {
 function Model({ mind, onUpgrade }) {
     const [open, setOpen] = useState(false);
     const [q, setQ] = useState('');
-    const groups = useMemo(() => {
+    // The catalog is hundreds long, and drawing all of it is what made the menu slow
+    // to open: until something is typed, the first `SHOWN` rows, Hanzo's families
+    // first, and a line saying the search reaches the rest.
+    const { groups, more } = useMemo(() => {
         const list = mind.models.filter((m) => !ROUTER_IDS.has(m.id) && (m.outputs?.includes('text') ?? true) && (!q.trim() || matchesModel(m, q)));
-        return groupModels(list);
+        const all = groupModels(list);
+        let room = q.trim() ? Infinity : SHOWN;
+        const cut = all
+            .map((g) => {
+            const models = g.models.slice(0, Math.max(0, room));
+            room -= models.length;
+            return { ...g, models };
+        })
+            .filter((g) => g.models.length);
+        return { groups: cut, more: list.length - cut.reduce((n, g) => n + g.models.length, 0) };
     }, [mind.models, q]);
     const routed = mind.model === ENSO;
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, placement: "top-end", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { "data-slot": "mind", children: _jsx(Word, { label: `Model: ${nameOf(mind.model, mind.models)}`, open: open, children: nameOf(mind.model, mind.models) }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 280, maxH: 420, "data-slot": "model-menu", children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search models" }), !mind.free && !q.trim() ? (_jsx(DropdownMenuItem, { onSelect: () => mind.pick(ENSO), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsxs(YStack, { flex: 1, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", children: "Enso" }), _jsx(SizableText, { fontSize: 12, color: "$hint", children: "Picks the model for each message and step" })] }), routed ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) })) : null, groups.map((g) => (_jsxs(YStack, { role: "group", "aria-label": g.label, children: [_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, pt: 8, pb: 2, children: g.label }), g.models.map((m) => {
-                                const ok = grants(mind.free, m.id, mind.models);
-                                return (_jsx(DropdownMenuItem, { "data-slot": "model-row", onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: "Upgrade" })), m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
-                            })] }, g.key)))] })] }));
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, placement: "top-end", children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { "data-slot": "mind", children: _jsx(Word, { label: `Model: ${nameOf(mind.model, mind.models)}`, open: open, children: nameOf(mind.model, mind.models) }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 280, "data-slot": "model-menu", children: [_jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: "Search models" }), _jsxs(YStack, { maxH: "min(420px, 60vh)", overflowY: "auto", overflowX: "hidden", "data-slot": "model-rows", children: [!mind.free && !q.trim() ? (_jsx(DropdownMenuItem, { onSelect: () => mind.pick(ENSO), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsxs(YStack, { flex: 1, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", children: "Enso" }), _jsx(SizableText, { fontSize: 12, color: "$hint", children: "Picks the model for each message and step" })] }), routed ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) })) : null, groups.map((g) => (_jsxs(YStack, { role: "group", "aria-label": g.label, children: [_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, pt: 8, pb: 2, children: g.label }), g.models.map((m) => {
+                                        const ok = grants(mind.free, m.id, mind.models);
+                                        return (_jsx(DropdownMenuItem, { "data-slot": "model-row", onSelect: () => (ok ? mind.pick(m.id) : onUpgrade?.(m.id)), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: ok ? '$ink' : '$hint', numberOfLines: 1, flex: 1, children: nameOf(m.id, mind.models) }), ok ? null : (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 6, py: 1, rounded: 6, borderWidth: 1, borderColor: "$borderColor", children: "Upgrade" })), m.id === mind.model ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, m.id));
+                                    })] }, g.key))), more > 0 ? (_jsx(SizableText, { fontSize: 12, color: "$hint", px: 8, py: 8, children: `Type to search ${more} more models` })) : null] })] })] }));
 }
 /** The row under the frame: where (Dev), then the model, the effort and the mode. */
 export function Tune({ mind, mode, where, onUpgrade }) {
@@ -130,7 +145,7 @@ export function prompt(o, state) {
     const mention = listed && shelf && typed ? (_jsx(Mention, { shelf: shelf, rows: listed, index: index, onPick: choose, tag: typed.char === '/' ? 'Skill' : 'Plugin', name: typed.char === '/' ? 'Skills' : 'Plugins' })) : null;
     const head = o.head || o.note || mention || (narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: [narrow ? o.below : null, o.head, mention, o.note ? (_jsx(SizableText, { "data-slot": "prompt-note", fontSize: 12, color: "$soft", text: "center", self: "center", children: o.note })) : null] })) : undefined;
     const foot = o.mind || o.mode || o.where || (!narrow && o.below) ? (_jsxs(YStack, { ...measure, gap: 10, "data-slot": "prompt-foot", children: [_jsx(Tune, { mind: o.mind, mode: o.mode, where: o.where, onUpgrade: o.onUpgrade }), narrow ? null : o.below] })) : undefined;
-    const round = (_jsx(Control, { type: "button", size: ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
+    const round = (_jsx(Control, { type: "button", size: narrow ? TAP : ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
             if (!live)
                 return;
             if (busy)
@@ -173,7 +188,7 @@ export function prompt(o, state) {
         '$max-sm': { rounded: CORNER_PHONE },
         ...(o.framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null),
         children: (_jsxs(XStack, { items: "center", gap: 4, "data-slot": "prompt-start", flex: 1, minW: 0, flexWrap: "wrap", children: [o.plus ? _jsx(Plus, { ...o.plus, disabled: disabled || o.plus.disabled }) : null, (o.on ?? []).map((c) => (_jsxs(XStack, { "data-slot": "prompt-chip", items: "center", gap: 6, pl: 8, pr: 4, height: 28, rounded: 8, bg: "$hover", maxW: 180, children: [c.icon ? _jsx(XStack, { "aria-hidden": true, children: c.icon }) : null, _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), _jsx(XStack, { render: "button", "aria-label": `Remove ${c.label}`, onPress: c.onRemove, width: 20, height: 20, rounded: 6, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: _jsx(X, { size: 12, color: "$hint" }) })] }, c.id)))] })),
-        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Voice mode', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })),
+        send: (_jsxs(XStack, { items: "center", gap: 6, "data-slot": "prompt-end", shrink: 0, children: [o.voice ? _jsx(Dictation, { voice: o.voice, disabled: disabled, narrow: narrow, language: o.language ?? null, ...(o.onLanguage ? { onLanguage: o.onLanguage } : {}) }) : null, !busy && !lit && o.talk ? (_jsx(Control, { asChild: true, size: narrow ? TAP : ROUND, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Voice mode', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })),
     };
 }
 /** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.62",
+  "version": "0.2.64",
   "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.",
@@ -14,7 +14,7 @@
     "@hanzo/iam": "0.21.28",
     "@hanzo/ui": "8.29.0",
     "@hanzo/vite": "0.1.4",
-    "@hanzo/voice": "0.1.18",
+    "@hanzo/voice": "0.1.19",
     "@hanzogui/lucide-icons-2": "8.3.5",
     "@hanzogui/next-theme": "8.3.5",
     "@playwright/test": "1.63.0",
@@ -75,7 +75,7 @@
     "@hanzo/ui": ">=8.29.0",
     "@hanzogui/lucide-icons-2": ">=8.3.5",
     "react": ">=19.2.8",
-    "@hanzo/voice": ">=0.1.16",
+    "@hanzo/voice": ">=0.1.19",
     "@hanzo/composer": ">=0.2.0"
   },
   "scripts": {