@hanzo/rooms 0.1.73 → 0.1.74

package/dist/crew.js

@@ -1,31 +1,32 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The crew, under the composer: who you can talk to, and a place to make one more.
+// Who a conversation can hold, and the sheet that makes one more.
 //
-// The first disc is an outline with a plus — the shape of a face that is not
-// drawn yet — and it opens the sheet that makes an agent: a name, what it does,
-// which mind, and a likeness you upload or describe. The rest are the org's
-// agents, the house crew first in the order the cast lists them, each drawn by
-// the one `Face` every surface draws with. The house crew is the core team
-// hanzoai/personas publishes (team.ts).
+// The composer's `+` › Agents (`useAgentShelf`) lists the org's agents, the
+// default cast first: the core team hanzoai/personas publishes (team.ts), drawn
+// for an org that keeps no row of its own for a member. Picking one adds it to
+// the conversation that is open, and the reply comes back in each voice in the
+// room; picking it again lets it out. The page does not move. Create agent and
+// Browse personas open the sheet (`Hire`, mounted once by `AgentMaker`); Manage
+// agents is Dev's Customize › Agents.
 //
-// Under a chat, pressing a face adds that character to the conversation that is
-// open, and the reply comes back in each voice in the room; pressing one again
-// lets them out. The page does not move: the organization, the thread and the
-// address stay as they are. On a page that is not a chat (`to`), pressing a
-// face opens a chat with that character there. The sidebar's roster row opens a
-// chat with one character alone.
-import { useEffect, useRef, useState } from 'react';
+// The crew strip (`Crew`) is the same list as faces, on Home: pressing one opens
+// a chat with that character there (`to`).
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useRooms } from './host.js';
-import { Camera, Check, Plus, Upload } from 'lucide-react';
+import { ArrowLeft, Camera, Check, Plus, Sparkles, Upload, Users } from 'lucide-react';
+import { generateImages } from '@hanzo/ai';
 import { useAgents, useModels } from '@hanzo/ai/react';
 import { Box, Button, Input, Text, Textarea, View, XStack, YStack } from '@hanzo/ui';
 import { useAi } from './lib/ai.js';
 import { mark } from './lib/mark.js';
 import { reach } from './lib/reach.js';
-import { CAST, Face } from './cast.js';
+import { Face } from './cast.js';
 import { useOpen } from './open.js';
-import { TEAM, called } from './team.js';
+import { TEAM, called, member } from './team.js';
+import { FIGURES, MEMOJI, PAINTER, draft, line, ordered, title } from './agents.js';
+import { app, go } from './lib/host.js';
+import { site } from './where.js';
 import { bare } from './lib/bare.js';
 import { BAD, mix } from './lib/mix.js';
 /** One disc's edge, and the name under it. */
@@ -62,24 +63,64 @@ export function useCrew() {
 }
 /** The house crew's names, which a reply may be split by even after one has left the room. */
 export const HOUSE = TEAM.map((one) => one.name);
-/** The core team, drawn for an org that does not keep a member under its own row. */
-const DEFAULT_HOUSE_AGENTS = TEAM.map((one) => ({ id: `house-${one.id}`, name: one.name, avatar: `/agents/${one.id}.png` }));
-/** The org's agents, the cast first in its own order, then the rest as listed. */
-function ordered(agents) {
-    const list = Array.isArray(agents) ? agents : [];
-    const names = new Set(list.map((a) => a.name?.toLowerCase()));
-    const combined = [...list];
-    for (const house of DEFAULT_HOUSE_AGENTS) {
-        if (!names.has(house.name.toLowerCase())) {
-            combined.push(house);
-        }
-    }
-    const rank = new Map(Object.keys(CAST).map((name, i) => [name, i]));
-    return combined.sort((a, b) => {
-        const ra = rank.get(a.name?.toLowerCase() ?? '') ?? Infinity;
-        const rb = rank.get(b.name?.toLowerCase() ?? '') ?? Infinity;
-        return ra - rb;
-    });
+/** Two names for one agent differ only in case ("Dev" and "dev"). */
+const same = (a, b) => a.toLowerCase() === b.toLowerCase();
+// THE SHEET IS OPENED FROM A MENU AND DRAWN BESIDE THE COMPOSER, two places
+// that share no parent, so whether it is open lives here, outside React, the
+// way open.ts keeps the conversation.
+let making = null;
+const heard = new Set();
+const listen = (f) => {
+    heard.add(f);
+    return () => void heard.delete(f);
+};
+/** Opens the New agent sheet, blank or on its persona list; null shuts it. */
+export function make(how) {
+    making = how;
+    for (const f of heard)
+        f();
+}
+/**
+ * The New agent sheet, wherever the host mounts this once (beside the
+ * composer). It is drawn while `make` holds it open, and an agent it makes joins
+ * the conversation that is open.
+ */
+export function AgentMaker() {
+    const how = useSyncExternalStore(listen, () => making, () => null);
+    const { agents: room, openAgent } = useOpen();
+    if (!how)
+        return null;
+    return (_jsx(Hire, { start: how === 'persona', onClose: () => make(null), onMade: (name) => {
+            if (!room.some((there) => same(there, name)))
+                openAgent(name);
+        } }));
+}
+/**
+ * The composer's `+` › Agents: the org's agents, the default cast first, each
+ * by its face; on is in the open conversation, and a pick toggles it there.
+ */
+export function useAgentShelf() {
+    const { agents, loading, error } = useCrew();
+    const { agents: room, openAgent } = useOpen();
+    const pathed = useRooms().path !== null;
+    return {
+        rows: ordered(agents).map((one) => ({
+            id: one.name,
+            label: called(one.name),
+            icon: _jsx(Face, { src: one.avatar, emoji: one.emoji, name: one.name, size: 16 }),
+            note: member(one.name)?.role ?? one.description,
+            on: room.some((there) => same(there, one.name)),
+        })),
+        pick: (id) => openAgent(called(id)),
+        loading,
+        error: error ? reach(error) : null,
+        search: 'Search agents',
+        create: { label: 'Create agent', onPress: () => make('new') },
+        // Dev's Customize › Agents: a move inside the app where the host reads the
+        // path (hanzo.ai), else Dev on hanzo.ai, as Chat's Create file or site goes.
+        manage: { label: 'Manage agents', onPress: () => (pathed ? go(app('-/customize/agents')) : window.location.assign(site(app('-/customize/agents')))) },
+        browse: { label: 'Browse personas', onPress: () => make('persona') },
+    };
 }
 /**
  * `to` is the chat a press opens, for a strip on a page that is not one. Absent,
@@ -146,23 +187,72 @@ function Said({ id, text }) {
         return null;
     return (_jsx(Text, { id: id, role: "alert", fontSize: "$2", color: BAD, children: text }));
 }
+/** A file the host serves, as text; a refusal says which and why. */
+async function text(path) {
+    const r = await fetch(path);
+    if (!r.ok)
+        throw new Error(`${path} did not load (${r.status}).`);
+    return r.text();
+}
+/** The roster, read once a page when the list first opens; a failed read is asked again next time. */
+let roster = null;
+const figures = () => (roster ??= text(`${FIGURES}/index.json`)
+    .then((t) => JSON.parse(t))
+    .catch((e) => {
+    roster = null;
+    throw e;
+}));
+/** How many matches the list draws; typing narrows the rest. */
+const SHOWN = 50;
+/**
+ * Start from a persona: @hanzo/personas' figures by name and one line, the ones
+ * with a written PERSONA.md first, searched by either.
+ */
+function Figures({ onPick }) {
+    const [all, setAll] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const [q, setQ] = useState('');
+    useEffect(() => {
+        let live = true;
+        figures().then((list) => live && setAll([...list].sort((a, b) => Number(!a.called) - Number(!b.called))), (e) => live && setFailed(reach(e)));
+        return () => {
+            live = false;
+        };
+    }, []);
+    const needle = q.trim().toLowerCase();
+    const found = (all ?? []).filter((f) => !needle || `${title(f)} ${line(f)}`.toLowerCase().includes(needle));
+    return (_jsxs(YStack, { gap: "$2", children: [_jsx(Input, { value: q, onChange: (e) => setQ(e.target.value), placeholder: all ? `Search ${all.length.toLocaleString()} figures` : 'Search figures', "aria-label": "Search personas", autoFocus: true }), _jsx(YStack, { maxH: 360, overflowY: "auto", overflowX: "hidden", role: "group", "aria-label": "Personas", children: found.slice(0, SHOWN).map((f) => (_jsxs(YStack, { render: "button", onClick: () => onPick(f), items: "flex-start", gap: 2, px: "$2", py: "$2", rounded: "$3", cursor: "pointer", hoverStyle: { bg: '$raised' }, focusVisibleStyle: { bg: '$raised' }, children: [_jsx(Text, { fontSize: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, children: title(f) }), _jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: line(f) })] }, f.slug))) }), _jsx(Text, { fontSize: "$2", color: failed ? BAD : '$soft', role: failed ? 'alert' : undefined, children: failed ??
+                    (!all
+                        ? 'Reading the personas…'
+                        : !found.length
+                            ? 'No figure matches.'
+                            : found.length > SHOWN
+                                ? `${SHOWN} of ${found.length.toLocaleString()} shown. Type to narrow them.`
+                                : null) })] }));
+}
 /**
  * The sheet that makes an agent.
  *
  * A name, a mind and a spending limit are what the agents API requires; what it
  * does becomes its instructions; the likeness is whichever the maker gives — a
  * photo uploaded onto the round picture (pressed, or dropped on), or a face
- * described and drawn by the image model. Both go through `mark`, the one crop
- * every saved face takes, so a drawn face and an uploaded one are the same kind
- * of picture. The row keeps at most one of a picture and an emoji, so choosing
- * one clears the other here too.
+ * described and drawn by Hanzo's image model (`PAINTER`), one call per press of
+ * Draw or Regenerate. An agent created with neither a picture nor an emoji has
+ * one drawn then, once, from the description or else its name. Every face goes
+ * through `mark`, the one crop every saved face takes, and is kept as the row's
+ * `avatar`. The row keeps at most one of a picture and an emoji, so choosing one
+ * clears the other here too.
+ *
+ * Start from a persona fills the name, the instructions and the face's
+ * description from a figure of @hanzo/personas' roster (agents.ts `draft`);
+ * `start` opens the sheet on that list.
  *
  * Create stays off until the required fields are filled in the API's own
  * terms, and a refusal is said in plain words under the field it concerns.
  *
  * EXPORTED, because Contacts adds agents too and there is one way to make one.
  */
-export function Hire({ onClose, onMade }) {
+export function Hire({ onClose, onMade, start = false }) {
     const { create } = useAgents();
     const { models } = useModels();
     const { client } = useAi();
@@ -179,15 +269,22 @@ export function Hire({ onClose, onMade }) {
     const [wrong, setWrong] = useState(null);
     const [over, setOver] = useState(false);
     const [lit, setLit] = useState(false);
+    const [choosing, setChoosing] = useState(start);
+    /** A drawing failed on Create, so the next press makes the agent without one. */
+    const [faceless, setFaceless] = useState(false);
     const picking = useRef(null);
     useEffect(() => {
         const key = (e) => {
-            if (e.key === 'Escape')
+            if (e.key !== 'Escape')
+                return;
+            if (choosing)
+                setChoosing(false);
+            else
                 onClose();
         };
         window.addEventListener('keydown', key);
         return () => window.removeEventListener('keydown', key);
-    }, [onClose]);
+    }, [onClose, choosing]);
     // WHAT CREATE WAITS FOR, in the API's own terms, so a request it would refuse
     // is never sent. Each rule names the field it belongs to.
     const called = name.trim();
@@ -215,30 +312,28 @@ export function Hire({ onClose, onMade }) {
             setWrong({ field: 'picture', text: reach(e) });
         }
     };
-    // The image model draws the face; `mark` makes it the same 256px square every
-    // saved picture is, so a drawn face weighs what an uploaded one weighs.
+    /** What a drawing is of: the description, else the name. */
+    const subject = look.trim() || called;
+    // One call to the image model; `mark` makes the answer the same 256px square
+    // every saved picture is, so a drawn face weighs what an uploaded one weighs.
+    const paint = async () => {
+        const [image] = await generateImages(client, `${subject}, ${MEMOJI}`, { model: PAINTER, n: 1, size: '512x512', response_format: 'b64_json' });
+        if (!image?.b64_json)
+            throw new Error('The image model answered with no picture.');
+        const bytes = Uint8Array.from(atob(image.b64_json), (c) => c.charCodeAt(0));
+        const face = await mark(new File([bytes], 'face.png', { type: 'image/png' }));
+        setAvatar(face);
+        setEmoji('');
+        return face;
+    };
     const draw = async () => {
-        if (!client || !look.trim())
+        if (!client || !subject || busy)
             return;
         setBusy('draw');
         setWrong(null);
         try {
-            const out = await client.http.json({
-                method: 'POST',
-                path: '/v1/images/generations',
-                body: {
-                    prompt: `${look.trim()}, memoji style 3D emoji portrait, head and shoulders, centered, plain background`,
-                    n: 1,
-                    size: '512x512',
-                    response_format: 'b64_json',
-                },
-            });
-            const b64 = out?.data?.[0]?.b64_json;
-            if (!b64)
-                throw new Error('The image model answered with no picture.');
-            const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
-            setAvatar(await mark(new File([bytes], 'face.png', { type: 'image/png' })));
-            setEmoji('');
+            await paint();
+            setFaceless(false);
         }
         catch (e) {
             setWrong({ field: 'picture', text: reach(e) });
@@ -247,18 +342,48 @@ export function Hire({ onClose, onMade }) {
             setBusy(null);
         }
     };
+    // A figure fills the sheet: its PERSONA.md is read where one is written.
+    const become = async (f) => {
+        setChoosing(false);
+        setWrong(null);
+        try {
+            const md = f.called ? await text(`${FIGURES}/${f.slug}.md`) : null;
+            const d = draft(f, md);
+            setName(d.name);
+            setDoes(d.does);
+            setLook(d.look);
+            setFaceless(false);
+        }
+        catch (e) {
+            setWrong({ field: 'form', text: reach(e) });
+        }
+    };
     const make = async () => {
         if (!ready || busy)
             return;
         setBusy('make');
         setWrong(null);
+        // NO PICTURE CHOSEN, SO ONE IS DRAWN, once. A drawing that fails says why,
+        // and the next press makes the agent without one.
+        let face = avatar;
+        if (!face && !emoji.trim() && !faceless && client) {
+            try {
+                face = await paint();
+            }
+            catch (e) {
+                setWrong({ field: 'picture', text: `${reach(e).replace(/[.!?]?$/, '.')} Press Create again to make ${called} without a picture.` });
+                setFaceless(true);
+                setBusy(null);
+                return;
+            }
+        }
         // The budget fields are the agents API's (cloud apps/agents createAgentIn);
         // @hanzo/ai 0.6.16's AgentCreateParams predates them.
         const body = {
             name: called,
             model,
             ...(does.trim() ? { instructions: does.trim() } : {}),
-            ...(avatar ? { avatar } : emoji.trim() ? { emoji: emoji.trim() } : {}),
+            ...(face ? { avatar: face } : emoji.trim() ? { emoji: emoji.trim() } : {}),
             cap_micro_usd: micro(cap),
             max_task_micro_usd: micro(task),
             period,
@@ -280,25 +405,25 @@ export function Hire({ onClose, onMade }) {
     return (_jsx(Box, { position: "fixed", inset: 0, z: "var(--z-modal)", display: "flex", items: "center", justify: "center", p: "$4", bg: "$sunken", overflowY: "auto", onClick: (e) => {
             if (e.target === e.currentTarget)
                 onClose();
-        }, children: _jsxs(YStack, { role: "dialog", "aria-modal": true, "aria-labelledby": "hire-title", width: "100%", maxW: 460, gap: "$3", p: "$5", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Text, { id: "hire-title", render: "h2", fontSize: "$5", fontWeight: "600", color: "$ink", children: "New agent" }), _jsxs(XStack, { items: "center", gap: "$4", flexWrap: "wrap", children: [_jsxs(Box, { render: "button", onClick: () => picking.current?.click(), onMouseEnter: () => setLit(true), onMouseLeave: () => setLit(false), onFocus: () => setLit(true), onBlur: () => setLit(false), onDragOver: (e) => {
-                                e.preventDefault();
-                                setOver(true);
-                            }, onDragLeave: () => setOver(false), onDrop: (e) => {
-                                e.preventDefault();
-                                setOver(false);
-                                void pick(e.dataTransfer.files?.[0]);
-                            }, "aria-label": avatar ? 'Change photo' : 'Upload photo', "aria-describedby": "hire-picture-hint", position: "relative", width: 88, height: 88, rounded: 9999, overflow: "hidden", shrink: 0, items: "center", justify: "center", bg: "$raised", borderWidth: 2, borderStyle: avatar || emoji ? 'solid' : 'dashed', borderColor: over || lit ? '$ink' : '$soft', children: [face, !face || lit || over ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", inset: 0, items: "center", justify: "center", gap: "$1", bg: face ? VEIL : undefined, children: _jsx(Camera, { size: 22, color: face ? 'var(--pure-white)' : 'var(--soft, var(--muted-foreground))' }) })) : null] }), _jsx("input", { ref: picking, type: "file", hidden: true, accept: "image/png,image/jpeg,image/gif,image/webp", onChange: (e) => {
-                                void pick(e.target.files?.[0]);
-                                e.target.value = '';
-                            } }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1.5", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => picking.current?.click(), children: [_jsx(Upload, { size: 14, "aria-hidden": true }), " ", avatar ? 'Change photo' : 'Upload photo'] }), avatar ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setAvatar(''), children: "Remove" })) : null] }), _jsx(Text, { id: "hire-picture-hint", fontSize: "$2", color: "$soft", children: over ? 'Drop the photo to use it.' : 'Press the circle or drop a photo on it. PNG, JPEG, GIF or WebP.' })] })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-look", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or describe a face and press Draw" }), _jsxs(XStack, { gap: "$1.5", items: "center", children: [_jsx(Box, { flex: 1, children: _jsx(Input, { id: "hire-look", value: look, onChange: (e) => setLook(e.target.value), onKeyDown: (e) => {
-                                            if (e.key === 'Enter')
-                                                void draw();
-                                        }, placeholder: "A calm engineer with round glasses" }) }), _jsx(Button, { size: "sm", variant: "outline", disabled: busy !== null || !look.trim(), onClick: () => void draw(), children: busy === 'draw' ? 'Drawing…' : 'Draw' })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Text, { render: "label", htmlFor: "hire-emoji", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or one emoji" }), _jsx(Box, { width: 64, children: _jsx(Input, { id: "hire-emoji", value: emoji, onChange: (e) => {
-                                            setEmoji(e.target.value);
-                                            if (e.target.value)
-                                                setAvatar('');
-                                        }, "aria-describedby": "hire-picture-wrong" }) })] }), _jsx(Said, { id: "hire-picture-wrong", text: shown('picture') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-name", fontSize: "$2", fontWeight: "600", children: "Name" }), _jsx(Input, { id: "hire-name", value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
-                                if (e.key === 'Enter')
-                                    void make();
-                            }, placeholder: "Michael", autoFocus: true, "aria-required": "true", "aria-invalid": Boolean(nameWrong || shown('name')), "aria-describedby": "hire-name-wrong" }), _jsx(Said, { id: "hire-name-wrong", text: nameWrong ?? shown('name') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-model", fontSize: "$2", fontWeight: "600", children: "Model" }), _jsxs(Text, { render: _jsx("select", { id: "hire-model", value: model, onChange: (e) => setModel(e.target.value), "aria-describedby": "hire-model-wrong" }), ...FIELD, children: [_jsx("option", { value: "enso", children: "enso" }), models.map((one) => (_jsx("option", { value: one.id, children: one.id }, one.id)))] }), _jsx(Said, { id: "hire-model-wrong", text: shown('model') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsxs(Text, { render: "label", htmlFor: "hire-does", fontSize: "$2", fontWeight: "600", children: ["What it does", ' ', _jsx(Text, { fontWeight: "400", color: "var(--soft, var(--muted-foreground))", children: "\u2014 optional" })] }), _jsx(Textarea, { id: "hire-does", value: does, onChangeText: setDoes, placeholder: "The work it takes and the voice it answers in", rows: 3, "aria-describedby": "hire-does-wrong" }), _jsx(Said, { id: "hire-does-wrong", text: shown('does') })] }), _jsxs(View, { render: _jsx("fieldset", { "aria-describedby": "hire-budget-wrong" }), display: "block", borderWidth: 0, p: 0, m: 0, children: [_jsx(Text, { render: "legend", display: "block", fontSize: "$2", fontWeight: "600", mb: 6, children: "Spending limit" }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Up to $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Spending limit in dollars", inputMode: "decimal", value: cap, onChange: (e) => setCap(e.target.value), "aria-invalid": !capOk }) }), _jsx(Text, { render: _jsx("select", { "aria-label": "Spending limit period", value: period, onChange: (e) => setPeriod(e.target.value) }), ...FIELD, width: "auto", children: PERIODS.map(([value, words]) => (_jsx("option", { value: value, children: words }, value))) })] }), _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "At most $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Most one task may spend, in dollars", inputMode: "decimal", value: task, onChange: (e) => setTask(e.target.value), "aria-invalid": !taskOk }) }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "on one task" })] })] }), _jsx(Box, { mt: "$1.5", children: _jsx(Said, { id: "hire-budget-wrong", text: budgetWrong ?? shown('budget') }) })] }), _jsx(Said, { id: "hire-form-wrong", text: shown('form') }), _jsxs(XStack, { justify: "flex-end", gap: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy !== null || !ready, onClick: () => void make(), children: busy === 'make' ? 'Creating…' : 'Create' })] })] }) }));
+        }, children: _jsxs(YStack, { role: "dialog", "aria-modal": true, "aria-labelledby": "hire-title", width: "100%", maxW: 460, gap: "$3", p: "$5", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", flexWrap: "wrap", children: [_jsx(Text, { id: "hire-title", render: "h2", fontSize: "$5", fontWeight: "600", color: "$ink", children: choosing ? 'Start from a persona' : 'New agent' }), choosing ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setChoosing(false), children: [_jsx(ArrowLeft, { size: 14, "aria-hidden": true }), " Back"] })) : (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setChoosing(true), children: [_jsx(Users, { size: 14, "aria-hidden": true }), " Start from a persona"] }))] }), choosing ? (_jsx(Figures, { onPick: (f) => void become(f) })) : (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$4", flexWrap: "wrap", children: [_jsxs(Box, { render: "button", onClick: () => picking.current?.click(), onMouseEnter: () => setLit(true), onMouseLeave: () => setLit(false), onFocus: () => setLit(true), onBlur: () => setLit(false), onDragOver: (e) => {
+                                        e.preventDefault();
+                                        setOver(true);
+                                    }, onDragLeave: () => setOver(false), onDrop: (e) => {
+                                        e.preventDefault();
+                                        setOver(false);
+                                        void pick(e.dataTransfer.files?.[0]);
+                                    }, "aria-label": avatar ? 'Change photo' : 'Upload photo', "aria-describedby": "hire-picture-hint", position: "relative", width: 88, height: 88, rounded: 9999, overflow: "hidden", shrink: 0, items: "center", justify: "center", bg: "$raised", borderWidth: 2, borderStyle: avatar || emoji ? 'solid' : 'dashed', borderColor: over || lit ? '$ink' : '$soft', children: [face, !face || lit || over ? (_jsx(YStack, { "aria-hidden": true, position: "absolute", inset: 0, items: "center", justify: "center", gap: "$1", bg: face ? VEIL : undefined, children: _jsx(Camera, { size: 22, color: face ? 'var(--pure-white)' : 'var(--soft, var(--muted-foreground))' }) })) : null] }), _jsx("input", { ref: picking, type: "file", hidden: true, accept: "image/png,image/jpeg,image/gif,image/webp", onChange: (e) => {
+                                        void pick(e.target.files?.[0]);
+                                        e.target.value = '';
+                                    } }), _jsxs(YStack, { flex: 1, minW: 180, gap: "$1.5", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: () => picking.current?.click(), children: [_jsx(Upload, { size: 14, "aria-hidden": true }), " ", avatar ? 'Change photo' : 'Upload photo'] }), avatar ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setAvatar(''), children: "Remove" })) : null] }), _jsx(Text, { id: "hire-picture-hint", fontSize: "$2", color: "$soft", children: over ? 'Drop the photo to use it.' : 'Press the circle or drop a photo on it, or Create draws one.' })] })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-look", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or describe a face and press Draw" }), _jsxs(XStack, { gap: "$1.5", items: "center", children: [_jsx(Box, { flex: 1, children: _jsx(Input, { id: "hire-look", value: look, onChange: (e) => setLook(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter')
+                                                        void draw();
+                                                }, placeholder: "A calm engineer with round glasses" }) }), _jsxs(Button, { size: "sm", variant: "outline", disabled: busy !== null || !subject || !client, onClick: () => void draw(), children: [_jsx(Sparkles, { size: 14, "aria-hidden": true }), " ", busy === 'draw' ? 'Drawing…' : avatar ? 'Regenerate' : 'Draw'] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(Text, { render: "label", htmlFor: "hire-emoji", fontSize: "$2", color: "var(--soft, var(--muted-foreground))", children: "Or one emoji" }), _jsx(Box, { width: 64, children: _jsx(Input, { id: "hire-emoji", value: emoji, onChange: (e) => {
+                                                    setEmoji(e.target.value);
+                                                    if (e.target.value)
+                                                        setAvatar('');
+                                                }, "aria-describedby": "hire-picture-wrong" }) })] }), _jsx(Said, { id: "hire-picture-wrong", text: shown('picture') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-name", fontSize: "$2", fontWeight: "600", children: "Name" }), _jsx(Input, { id: "hire-name", value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter')
+                                            void make();
+                                    }, placeholder: "Michael", autoFocus: true, "aria-required": "true", "aria-invalid": Boolean(nameWrong || shown('name')), "aria-describedby": "hire-name-wrong" }), _jsx(Said, { id: "hire-name-wrong", text: nameWrong ?? shown('name') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsx(Text, { render: "label", htmlFor: "hire-model", fontSize: "$2", fontWeight: "600", children: "Model" }), _jsxs(Text, { render: _jsx("select", { id: "hire-model", value: model, onChange: (e) => setModel(e.target.value), "aria-describedby": "hire-model-wrong" }), ...FIELD, children: [_jsx("option", { value: "enso", children: "enso" }), models.map((one) => (_jsx("option", { value: one.id, children: one.id }, one.id)))] }), _jsx(Said, { id: "hire-model-wrong", text: shown('model') })] }), _jsxs(YStack, { gap: "$1.5", children: [_jsxs(Text, { render: "label", htmlFor: "hire-does", fontSize: "$2", fontWeight: "600", children: ["What it does", ' ', _jsx(Text, { fontWeight: "400", color: "var(--soft, var(--muted-foreground))", children: "\u2014 optional" })] }), _jsx(Textarea, { id: "hire-does", value: does, onChangeText: setDoes, placeholder: "The work it takes and the voice it answers in", rows: 3, "aria-describedby": "hire-does-wrong" }), _jsx(Said, { id: "hire-does-wrong", text: shown('does') })] }), _jsxs(View, { render: _jsx("fieldset", { "aria-describedby": "hire-budget-wrong" }), display: "block", borderWidth: 0, p: 0, m: 0, children: [_jsx(Text, { render: "legend", display: "block", fontSize: "$2", fontWeight: "600", mb: 6, children: "Spending limit" }), _jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "Up to $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Spending limit in dollars", inputMode: "decimal", value: cap, onChange: (e) => setCap(e.target.value), "aria-invalid": !capOk }) }), _jsx(Text, { render: _jsx("select", { "aria-label": "Spending limit period", value: period, onChange: (e) => setPeriod(e.target.value) }), ...FIELD, width: "auto", children: PERIODS.map(([value, words]) => (_jsx("option", { value: value, children: words }, value))) })] }), _jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [_jsx(Text, { fontSize: "$2", color: "$soft", children: "At most $" }), _jsx(Box, { width: 84, children: _jsx(Input, { "aria-label": "Most one task may spend, in dollars", inputMode: "decimal", value: task, onChange: (e) => setTask(e.target.value), "aria-invalid": !taskOk }) }), _jsx(Text, { fontSize: "$2", color: "$soft", children: "on one task" })] })] }), _jsx(Box, { mt: "$1.5", children: _jsx(Said, { id: "hire-budget-wrong", text: budgetWrong ?? shown('budget') }) })] }), _jsx(Said, { id: "hire-form-wrong", text: shown('form') }), _jsxs(XStack, { justify: "flex-end", gap: "$2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: onClose, children: "Cancel" }), _jsx(Button, { size: "sm", disabled: busy !== null || !ready, onClick: () => void make(), children: busy === 'make' ? 'Creating…' : 'Create' })] })] }))] }) }));
 }

package/dist/help.d.ts

@@ -0,0 +1,43 @@
+/** One Help row that leaves for a page. */
+export interface Page {
+    key: string;
+    label: string;
+    href: string;
+}
+/**
+ * The Help menu's pages, read at call time: `site()` is the app's origin on
+ * hanzo.ai and hanzo.ai itself on hanzo.team. Help center is /support, the
+ * page that leads to the help center, the docs, status and a person.
+ */
+export declare const pages: () => Page[];
+/** The agreements under the Help menu's rule. */
+export declare const legal: () => Page[];
+/** One of the app's keys: what it does, and how a Mac and every other platform spell it. */
+export interface Key {
+    does: string;
+    mac: string;
+    pc: string;
+}
+/**
+ * Every key the app answers, in the order a reader looks for them. Each is
+ * handled where it acts: App.tsx (⌘K, ⌘, and, in a window, Back and Forward),
+ * Me.tsx (⌘/), @hanzo/build's panel (⌘.), the composer (Enter, ⌘U), chord.ts
+ * (the conversation's chords, spelled by `said` so the two cannot drift).
+ */
+export declare const KEYS: Key[];
+/** The part of a keydown `asked` reads. */
+export interface Press {
+    key?: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    repeat?: boolean;
+}
+/** Whether a keydown asks for the keyboard shortcuts: ⌘/ or Ctrl+/, once a press. */
+export declare const asked: (e: Press) => boolean;
+/**
+ * Opens an address in a tab of its own, through an anchor, so a host that
+ * sends links out of its window (the desktop's system browser) hears it as the
+ * link it is.
+ */
+export declare function out(href: string): void;

package/dist/help.js

@@ -0,0 +1,58 @@
+// The Help menu's pages and the app's keys, as data: the account menu (Me.tsx)
+// draws both, its shortcuts dialog renders KEYS, and a spec reads them as they
+// are. No React, so a spec reads it as it is.
+import { said } from './chord.js';
+import { site } from './where.js';
+/** Where the release notes are published: the site's own nav names the same. */
+const RELEASES = 'https://github.com/hanzoai/cli/releases';
+/**
+ * The Help menu's pages, read at call time: `site()` is the app's origin on
+ * hanzo.ai and hanzo.ai itself on hanzo.team. Help center is /support, the
+ * page that leads to the help center, the docs, status and a person.
+ */
+export const pages = () => [
+    { key: 'help', label: 'Help center', href: site('/support') },
+    { key: 'center', label: 'Privacy center', href: site('/legal') },
+    { key: 'releases', label: 'Release notes', href: RELEASES },
+    { key: 'download', label: 'Download apps', href: site('/download') },
+];
+/** The agreements under the Help menu's rule. */
+export const legal = () => [
+    { key: 'terms', label: 'Terms of Service', href: site('/legal/terms') },
+    { key: 'privacy', label: 'Privacy Policy', href: site('/legal/privacy') },
+];
+/**
+ * Every key the app answers, in the order a reader looks for them. Each is
+ * handled where it acts: App.tsx (⌘K, ⌘, and, in a window, Back and Forward),
+ * Me.tsx (⌘/), @hanzo/build's panel (⌘.), the composer (Enter, ⌘U), chord.ts
+ * (the conversation's chords, spelled by `said` so the two cannot drift).
+ */
+export const KEYS = [
+    { does: 'Search chats', mac: '⌘K', pc: 'Ctrl+K' },
+    { does: 'Settings', mac: '⌘,', pc: 'Ctrl+,' },
+    { does: 'Keyboard shortcuts', mac: '⌘/', pc: 'Ctrl+/' },
+    { does: 'Side panel', mac: '⌘.', pc: 'Ctrl+.' },
+    { does: 'Attach files', mac: '⌘U', pc: 'Ctrl+U' },
+    { does: 'Send', mac: 'Enter', pc: 'Enter' },
+    { does: 'New line', mac: '⇧Enter', pc: 'Shift+Enter' },
+    { does: 'Rename chat', mac: said('rename', true), pc: said('rename', false) },
+    { does: 'Pin or unpin chat', mac: said('pin', true), pc: said('pin', false) },
+    { does: 'Back', mac: '⌘[', pc: 'Alt+←' },
+    { does: 'Forward', mac: '⌘]', pc: 'Alt+→' },
+];
+/** Whether a keydown asks for the keyboard shortcuts: ⌘/ or Ctrl+/, once a press. */
+export const asked = (e) => (e.metaKey || e.ctrlKey) && !e.altKey && !e.repeat && e.key === '/';
+/**
+ * Opens an address in a tab of its own, through an anchor, so a host that
+ * sends links out of its window (the desktop's system browser) hears it as the
+ * link it is.
+ */
+export function out(href) {
+    const a = document.createElement('a');
+    a.href = href;
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+}

package/dist/lib/web.d.ts

@@ -37,6 +37,12 @@
 import { type ChatCompletionTool } from '@hanzo/ai';
 /** Pages a turn that names them reads. */
 export declare const PAGES = 3;
+/**
+ * Research: beside `WEB`, a turn that carries this reads deeper — ten results
+ * listed, five pages read — whatever its shape, and the model is asked for a
+ * report that cites them.
+ */
+export declare const RESEARCH: ChatCompletionTool;
 /** The two tools that mark a turn as one that may use the web. */
 export declare const WEB: ChatCompletionTool[];
 /**

package/dist/lib/web.js

@@ -41,6 +41,9 @@ export const PAGES = 3;
 /** Results a search lists, and how many of them it reads. */
 const LISTED = 6;
 const READ = 2;
+/** What Research lists and reads instead. */
+const DEEP_LISTED = 10;
+const DEEP_READ = 5;
 /** Characters of a page a search quotes, and a named page quotes. */
 const PAGE_CHARS = 3500;
 const CRAWL_CHARS = 6000;
@@ -53,6 +56,21 @@ const GATE = 8192;
 const SEARCH_MS = 20_000;
 const SKIM_MS = 10_000;
 const READ_MS = 25_000;
+/**
+ * Research: beside `WEB`, a turn that carries this reads deeper — ten results
+ * listed, five pages read — whatever its shape, and the model is asked for a
+ * report that cites them.
+ */
+export const RESEARCH = {
+    type: 'function',
+    function: {
+        name: 'research',
+        description: 'Research the question in depth on the live web and answer with a cited report.',
+        parameters: { type: 'object', properties: {}, required: [] },
+    },
+};
+/** The word a Research turn's model is given. */
+const REPORT = 'Research mode: answer with a detailed report — a short direct answer first, then the evidence under headings — citing each claim with the numbered sources above as [n](url). Say plainly where the sources disagree or fall short.';
 /** The two tools that mark a turn as one that may use the web. */
 export const WEB = [
     {
@@ -527,7 +545,7 @@ function pointed(text) {
 /** What the model is told of a page it was not given. */
 const withheld = (url) => `The person's message names ${label(url)}. It was not opened: opening an address like it can sign in, confirm, unsubscribe or spend a one-time link for them.`;
 /** Runs one search: the results, best first, and the text of the best pages. */
-async function search(call, q, lang, now) {
+async function search(call, q, lang, now, deep = false) {
     let found;
     try {
         found = await call('/v1/websearch', lang ? { q, language: lang } : { q }, SEARCH_MS);
@@ -536,11 +554,11 @@ async function search(call, q, lang, now) {
         return unavailable(e);
     }
     const words = keywords(q);
-    const ranked = rank(found?.results ?? [], words).slice(0, LISTED);
+    const ranked = rank(found?.results ?? [], words).slice(0, deep ? DEEP_LISTED : LISTED);
     const head = `Web search for "${q}", ${stamp(now)}.`;
     if (!ranked.length)
         return `${head}\nNothing was found.`;
-    const pages = await Promise.all(ranked.slice(0, READ).map((r) => call('/v1/crawl', { url: r.url }, SKIM_MS)
+    const pages = await Promise.all(ranked.slice(0, deep ? DEEP_READ : READ).map((r) => call('/v1/crawl', { url: r.url }, SKIM_MS)
         .then((d) => (d?.success ? excerpt(d.data?.markdown ?? '', words, PAGE_CHARS) : ''))
         .catch(() => '')));
     const items = ranked.map((r, i) => {
@@ -563,6 +581,19 @@ async function read(call, url, words) {
         return `Could not read ${url}: ${e instanceof Error ? e.message : String(e)}.`;
     }
 }
+/** A Research turn is looked up whatever its shape: its own words, searched. Files and pictures still stay home. */
+function forced(messages, spoken) {
+    const last = messages.at(-1);
+    if (last?.role !== 'user')
+        return null;
+    const { text: said, carried } = told(textOf(last.content));
+    if (carried || pictured(last.content))
+        return null;
+    const plain = spell(said.trim().slice(0, GATE)).trim();
+    if (!plain)
+        return null;
+    return { pages: [], held: [], q: plain.slice(0, QUERY), lang: language(plain, spoken), about: keywords(plain) };
+}
 /**
  * The lookup the last turn needs, or null. A short follow-up ("and in
  * Moscow?") is read with the question before it, the way the person meant it.
@@ -667,7 +698,8 @@ export function researched(base, clock = () => new Date(), spoken = reader) {
         if (!asked.stream || !Array.isArray(asked.messages) || !WEB.every((t) => names.has(t.function.name)))
             return base(input, init);
         const { tools: _tools, tool_choice: _choice, ...bare } = asked;
-        const look = lookup(asked.messages, spoken());
+        const deep = names.has(RESEARCH.function.name);
+        const look = lookup(asked.messages, spoken()) ?? (deep ? forced(asked.messages, spoken()) : null);
         if (!look)
             return base(input, { ...init, body: JSON.stringify(bare) });
         // The reader's stop, and the stream's own cancel, end every request below.
@@ -695,10 +727,10 @@ export function researched(base, clock = () => new Date(), spoken = reader) {
         };
         const found = (await Promise.all([
             ...look.pages.map((u) => read(call, u, look.about)),
-            ...(look.q ? [search(call, look.q, look.lang, now)] : []),
+            ...(look.q ? [search(call, look.q, look.lang, now, deep)] : []),
             ...look.held.map(async (u) => withheld(u)),
         ])).join('\n\n');
-        const messages = primed(asked.messages, found, now);
+        const messages = primed(asked.messages, found, now, deep ? REPORT : '');
         const first = await send(messages);
         if (!streams(first))
             return first;
@@ -709,7 +741,7 @@ export function researched(base, clock = () => new Date(), spoken = reader) {
                     // results: asked once more, it answers. One that failed is not asked again.
                     const { said, failed } = await relay(first, out);
                     if (!said.trim() && !failed) {
-                        const again = await send(primed(asked.messages, found, now, SILENT));
+                        const again = await send(primed(asked.messages, found, now, deep ? `${REPORT}\n\n${SILENT}` : SILENT));
                         if (streams(again))
                             await relay(again, out);
                         else