@hanzo/build 0.2.60 → 0.2.62

package/lib/prefs.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The person's own settings, read once for the whole builder and shared by
  * everything that follows them: Settings writes them, New starts from the
@@ -8,6 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The last document read is kept in this browser, per org, so the page is
  * drawn the person's way before the platform answers. A save shows at once and
  * is taken back, key by key, if the platform refuses it.
+ *
+ * A host mounts it too, above the builder (the Hanzo app, for Chat's side
+ * panel), and the builder's own then reads through that one: one document, one
+ * read. The look (`Look`) is the builder's alone: a host has its own.
  */
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { merge, read, save } from './api/pref.js';
@@ -15,6 +19,9 @@ import { useKept, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 const Context = createContext(null);
 export function PrefsProvider({ children }) {
+    return useContext(Context) ? children : _jsx(Keep, { children: children });
+}
+function Keep({ children }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
@@ -48,11 +55,11 @@ export function PrefsProvider({ children }) {
         }
     }, [signed, t, keep]);
     const value = useMemo(() => ({ prefs: kept, loading: doc.loading, error: doc.error, save: write }), [kept, doc.loading, doc.error, write]);
-    return (_jsxs(Context.Provider, { value: value, children: [_jsx(Look, { prefs: kept }), children] }));
+    return _jsx(Context.Provider, { value: value, children: children });
 }
-export function usePrefs() {
+export function usePrefs(need = true) {
     const p = useContext(Context);
-    if (!p)
+    if (!p && need)
         throw new Error('The builder was rendered without its settings');
     return p;
 }
@@ -66,9 +73,9 @@ const STILL = '*,*::before,*::after{animation-duration:.01ms!important;animation
  * root re-applies its appearance on mount, and a rule marked important outlasts
  * that, while the builder is on the page and no longer.
  */
-function Look({ prefs }) {
+export function Look() {
     const host = useHost();
-    const { theme, text, motion } = prefs;
+    const { theme, text, motion } = usePrefs().prefs;
     useEffect(() => {
         if (theme && theme !== host.theme)
             host.chooseTheme?.(theme);

package/lib/project.js

@@ -40,9 +40,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 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, ModeSelect, PageSelect, PreviewFrame, ProjectChip, Suggestions, SUGGESTIONS, VIEWS, Views, Workspace, fold, } from '@hanzo/ui/agents';
+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 } from '@hanzo/ui';
+import { Button, Dialog, DialogContent, DialogTitle, Grip } from '@hanzo/ui';
 import { HanzoMark } from '@hanzo/ui/product';
 import { useDictation, useVoice } from '@hanzo/voice';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -57,9 +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 { Grip } from './grip.js';
 import { useHost, useTarget } from './host.js';
-import { MODES } from './landing.js';
 import { useMind } from './mind.js';
 import { Out } from './out.js';
 import { Prompt, useEar } from './prompt.js';
@@ -192,7 +190,6 @@ export function Project({ at }) {
     const [asked, setAsked] = useState(false);
     const shut = cramped ? !asked : collapsed;
     const [dock, setDock] = useKept('hanzo.build.dock', 36);
-    const [dismissed, setDismissed] = useKept(`hanzo.build.hints.${slug}`, false);
     const [mode, setMode] = useKept('hanzo.build.mode', 'build');
     const [page, setPage] = useState('/');
     const [draft, setDraft] = useState('');
@@ -417,9 +414,9 @@ export function Project({ at }) {
                                                 ? `${project.name} is loaded and nothing is published yet. Say what to change and it gets built.`
                                                 : named
                                                     ? `${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: [!dismissed && !running ? _jsx(Suggestions, { items: SUGGESTIONS, onPick: (s) => void send(s), onDismiss: () => setDismissed(true) }) : null, 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
+                                                    : `${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", onAttach: () => pick(attached, setAttached, setNote), tools: _jsx(ModeSelect, { modes: MODES, value: mode, onChange: (m) => setMode(m), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), 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') }, 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] }));
     // 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

@@ -3,7 +3,9 @@ import { type PauseSource } from '@hanzo/ui/models';
 import { type Machine, type Speech } from '@hanzo/voice';
 import { type ReactNode } from 'react';
 import type { Target } from './api/call.ts';
+import { type Mode } from './gear.ts';
 import { type Mind } from './mind.ts';
+import { type PlusProps, type Shelf } from './plus.tsx';
 /** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
 export declare const MEASURE = "var(--container-prose, 48rem)";
 /** The space between turns, px: one rhythm for Chat and Dev. */
@@ -14,12 +16,13 @@ export declare const measure: {
     readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
     readonly mx: 'auto';
 };
-/** The round controls' box, px: the pill's row less its padding. */
+/** The round controls' box, px. */
 export declare const ROUND = 32;
+/** What every Composer placeholder says, unless a surface names who is listening. */
+export declare const ASK = "Type / for skills";
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
- * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
- * gradient through a translucent pane).
+ * `--pane-*` cut on design's first paper rung.
  */
 export declare const cut: {
     readonly bg: 'var(--pane-fill, var(--sheet-1))';
@@ -31,6 +34,13 @@ export declare const cut: {
 };
 /** The platform's ear and voice for a target: dictation, talk and Listen all hear through it. */
 export declare function useEar(t: Target): Speech;
+/** One thing the conversation carries, shown after `+`. */
+export interface Chip {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onRemove: () => void;
+}
 export interface PromptOptions {
     value: string;
     onChange: (value: string) => void;
@@ -49,31 +59,70 @@ export interface PromptOptions {
     /** The model and effort. Null where the next send uses neither (steering a run). */
     mind?: Mind | null;
     limits?: PauseSource | null;
-    /** The paperclip. Absent, there is none. */
-    onAttach?: () => void;
-    /** After the paperclip: what this surface alone offers (Dev's mode). */
-    tools?: ReactNode;
+    /** A model the plan does not grant was asked for: the way to the plan that does. */
+    onUpgrade?: (model: string) => void;
+    /** The `+` menu. Absent, there is none. */
+    plus?: PlusProps;
+    /** What the conversation carries, as chips after `+`. */
+    on?: Chip[];
+    /** `/` lists these (the skills) above the frame. */
+    slash?: Shelf;
+    /** `@` lists these (the plugins) above the frame. */
+    at?: Shelf;
+    /** The mode, as the pill under the frame. */
+    mode?: {
+        value: Mode;
+        set: (m: Mode) => void;
+    } | null;
+    /** At the start of the row under the frame: Dev's where and which repository. */
+    where?: ReactNode;
+    /** Under the row (above the frame on a phone): the person's suggestions. */
+    below?: ReactNode;
     /** Dictation into the draft (@hanzo/voice `useVoice` + `useDictation`). */
     voice?: Machine;
-    /** A spoken conversation (@hanzo/voice `useTalk`). */
+    /** The language dictation listens in, null for Auto, and how to change it. */
+    language?: string | null;
+    onLanguage?: (id: string | null) => void;
+    /** A spoken conversation (@hanzo/voice `useTalk`): the round button while the draft is empty. */
     talk?: Machine;
     /** Drawn on a pane: the frame is cut as a pane of its own (`cut`). */
     framed?: boolean;
-    /** Centred just above the pill: what every message is sent under. */
+    /** Centred just above the frame: what every message is sent under. */
     note?: ReactNode;
-    /** A phone: the field takes the pill's whole width above the controls, whatever the draft. */
+    /** A phone: suggestions go above the frame and every target is 44px. */
     narrow?: boolean;
 }
-/**
- * The chip beside send, and the panel it opens: the effort, a sentence saying
- * what serves the ask, and the model.
- */
-export declare function Tune({ mind, limits, disabled }: {
-    mind: Mind;
-    limits?: PauseSource | null;
-    disabled?: boolean;
+/** The row under the frame: where (Dev), then the model, the effort and the mode. */
+export declare function Tune({ mind, mode, where, onUpgrade }: {
+    mind?: Mind | null;
+    mode?: PromptOptions['mode'];
+    where?: ReactNode;
+    onUpgrade?: (model: string) => void;
 }): import("react").JSX.Element;
+/** The `/` or `@` the caret ends on, and the words typed after it. */
+export declare function trigger(value: string): {
+    char: '/' | '@';
+    query: string;
+    at: number;
+} | null;
 /** @hanzo/ui `Composer` props for the one composer. */
-export declare function prompt(o: PromptOptions): ComposerProps;
+export declare function prompt(o: PromptOptions, state?: {
+    index: number;
+    closed: string | null;
+}): ComposerProps;
+/** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
+export declare function useUpload(upload: (() => void) | undefined): void;
+/**
+ * The composer's own state — which row of a `/` or `@` list is lit — and the
+ * keys that move it. A surface that hands `prompt` to `Chat` calls this and
+ * passes its answer through; `<Prompt>` does it for itself.
+ */
+export declare function useMention(o: PromptOptions): {
+    state: {
+        index: number;
+        closed: string | null;
+    };
+    field: ComposerProps['field'];
+};
 /** The composer drawn on its own. */
 export declare function Prompt(o: PromptOptions): import("react").JSX.Element;

package/lib/prompt.js

@@ -1,48 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The composer, once, for Chat and Dev: one pill. While the draft is a line,
- * the pill is one row — attach (`+`) and the surface's own tools at the start,
- * the field, then the model and effort (`Tune`), dictation, talk and send. A
- * draft longer than a line takes the pill's whole width above, and the
- * controls keep the bottom row. A note the surface owes every message (the
- * "can make mistakes" line) stands centred just above the pill.
+ * The composer, once, for Chat and Dev. A frame: the field on top ("Type / for
+ * skills"), and under it one row — `+` at the start, what the conversation
+ * carries as small chips, then at the end dictation (the mic and its menu) and
+ * one round button that is voice mode while the draft is empty, send once it
+ * has words, and stop while a turn runs. Nothing else is in the frame.
+ *
+ * Under the frame, at its end, one quiet row: the model, the effort (dim) and
+ * the mode as a pill, each opening its choices; Dev puts where the run goes
+ * and its repository at the row's start (`where`). Under that, the person's
+ * suggestions (`below`; above the frame on a phone).
+ *
+ * `/` opens the skills and `@` the plugins, in a list just above the frame.
  *
  * `prompt` builds @hanzo/ui's `Composer` props, so a surface that draws the
  * composer through `Chat` (its `composer` prop) and one that draws it directly
- * (`<Prompt>`) draw the same thing. What each surface sends, and what it puts
- * above the frame (`head`), stays its own.
- *
- * The frame is as wide as the text above it: the reading measure, less the
- * thread column's own gutters, centred (`measure`). A transcript reads at
- * `MEASURE` and this lines up with its words.
+ * (`<Prompt>`) draw the same thing. The frame is as wide as the text above it
+ * (`measure`).
  */
 import { SizableText, useMedia, XStack, YStack } from '@hanzo/gui';
-import { ArrowUp, AudioLines, Check, ChevronDown, Mic, Plus, Square } from '@hanzogui/lucide-icons-2';
+import { ArrowUp, AudioLines, Check, Square, X } from '@hanzogui/lucide-icons-2';
 import { Control } from '@hanzo/composer';
-import { Popover, PopoverContent, PopoverTrigger, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSearch, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger } from '@hanzo/ui';
 import { Composer } from '@hanzo/ui/chat';
-import { ModelPicker } from '@hanzo/ui/models';
+import { groupModels, matchesModel } from '@hanzo/ui/models';
 import { speech, Voice } from '@hanzo/voice';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ENSO } from './api/models.js';
-import { EFFORTS, nameOf, reasons } from './mind.js';
+import { MODES } from './gear.js';
+import { Dictation } from './mic.js';
+import { EFFORTS, grants, nameOf, reasons, ROUTER_IDS } from './mind.js';
+import { Plus } from './plus.js';
 /** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
 export const MEASURE = 'var(--container-prose, 48rem)';
 /** The space between turns, px: one rhythm for Chat and Dev. */
 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 pill's row less its padding. */
+/** The round controls' box, px. */
 export const ROUND = 32;
-/** The pill's height on one line, px, and the corner a taller draft keeps. */
-const PILL = 44;
-const CORNER = 22;
-/** About a line of draft at the measure: past it, or past a newline, the field takes the pill's width. */
-const LINE = 72;
+/** The frame's corner, px: 12 on a laptop, 22 on a phone. */
+const CORNER = 12;
+const CORNER_PHONE = 22;
+/** The ink on a filled round: the accent's own foreground (gui's icons default to the theme's text). */
+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' } };
+/** What every Composer placeholder says, unless a surface names who is listening. */
+export const ASK = 'Type / for skills';
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
- * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
- * gradient through a translucent pane).
+ * `--pane-*` cut on design's first paper rung.
  */
 export const cut = {
     bg: 'var(--pane-fill, var(--sheet-1))',
@@ -56,104 +64,173 @@ export const cut = {
 export function useEar(t) {
     return useMemo(() => speech({ baseUrl: t.api, token: t.token, ...(t.org ? { org: t.org } : {}) }), [t]);
 }
-/** Enso's mark: the ring. */
-function Ring() {
-    return _jsx(YStack, { "aria-hidden": true, width: 12, height: 12, rounded: 99, borderWidth: 1.5, borderColor: "$ink", shrink: 0 });
+/** A text button in the row under the frame. */
+function Word({ children, dim = false, label, open }) {
+    return (_jsx(XStack, { render: "button", "aria-label": label, "aria-expanded": open, items: "center", height: 24, px: 6, rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { height: 44, px: 8 }, children: _jsx(SizableText, { fontSize: 14, fontWeight: dim ? '400' : '500', color: dim ? '$hint' : '$ink', numberOfLines: 1, children: children }) }));
 }
-/**
- * The chip beside send, and the panel it opens: the effort, a sentence saying
- * what serves the ask, and the model.
- */
-export function Tune({ mind, limits, disabled = false }) {
+/** A titled list of choices, each with a line saying what it does and a check on the one in force. */
+function Choices({ title, items, value, onPick, }) {
+    return (_jsxs(YStack, { role: "listbox", "aria-label": title, gap: 2, "data-slot": "choices", children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 10, pt: 6, pb: 4, children: title }), items.map((c) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": c.id === value, "aria-disabled": c.off || undefined, onPress: () => !c.off && onPick(c.id), items: "flex-start", gap: 12, px: 10, py: 8, rounded: 8, width: "100%", cursor: c.off ? 'default' : 'pointer', opacity: c.off ? 0.5 : 1, hoverStyle: c.off ? undefined : { bg: '$hover' }, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", gap: 2, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", style: { textAlign: 'left' }, children: c.label }), _jsx(SizableText, { fontSize: 13, color: "$hint", style: { textAlign: 'left' }, children: c.note })] }), c.id === value ? _jsx(Check, { size: 16, color: "var(--primary)", mt: 2, "aria-hidden": true }) : null] }, c.id)))] }));
+}
+/** A word in the row that opens a panel of choices. */
+function Opens({ label, word, dim, children }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { children: _jsx(Word, { label: label, dim: dim, open: open, children: word }) }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: children(() => setOpen(false)) })] }));
+}
+/** The model's name, and the catalog behind it: Free's lane to pick from, the rest an upgrade. */
+function Model({ mind, onUpgrade }) {
     const [open, setOpen] = useState(false);
-    const name = nameOf(mind.model, mind.models);
-    const thinks = reasons(mind.model, mind.models);
-    const pace = EFFORTS.find((e) => e.id === mind.effort);
+    const [q, setQ] = useState('');
+    const groups = 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);
+    }, [mind.models, q]);
     const routed = mind.model === ENSO;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "mind", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": thinks ? `Model and effort: ${name}, ${pace.label}` : `Model: ${name}`, "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1.5", px: "$2.5", height: ROUND, maxW: 220, rounded: 999, cursor: disabled ? 'default' : 'pointer', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.4 : 1, onKeyDown: (e) => {
-                        if (disabled || (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowUp' && e.key !== 'ArrowDown'))
-                            return;
-                        e.preventDefault?.();
-                        setOpen(true);
-                    }, children: [routed ? _jsx(Ring, {}) : null, _jsx(SizableText, { size: "$1", color: "$ink", fontWeight: "600", numberOfLines: 1, minW: 0, shrink: 1, children: name }), thinks ? (_jsx(SizableText, { size: "$1", color: "$soft", fontWeight: "500", shrink: 0, children: pace.label })) : null, _jsx(ChevronDown, { size: 12, color: "$soft", "aria-hidden": true })] }) }), _jsx(PopoverContent, { solid: true, align: "end", p: 6, width: 280, children: _jsxs(YStack, { gap: "$1", "data-slot": "mind-panel", role: "dialog", "aria-label": "Model and effort", children: [EFFORTS.map((e) => (_jsxs(XStack, { render: "button", role: "button", "aria-pressed": e.id === mind.effort, "aria-disabled": !thinks || undefined, onPress: () => {
-                                if (!thinks)
-                                    return;
-                                mind.pace(e.id);
-                                setOpen(false);
-                            }, items: "center", gap: "$2", px: "$2", py: "$2", rounded: "$3", width: "100%", opacity: thinks ? 1 : 0.45, cursor: thinks ? 'pointer' : 'default', hoverStyle: thinks ? { bg: '$hover' } : undefined, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", children: [_jsx(SizableText, { size: "$2", color: "$ink", style: { textAlign: 'left' }, children: e.label }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'left' }, children: e.note })] }), e.id === mind.effort && thinks ? _jsx(Check, { size: 14, "aria-hidden": true }) : null] }, e.id))), _jsx(Separator, { my: "$1" }), _jsxs(YStack, { px: "$2", pt: "$1", pb: "$2", gap: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", "data-slot": "mind-note", children: routed
-                                        ? 'Enso picks the model for each message and step. Pick one to use it instead.'
-                                        : `${name} answers every message and step${thinks ? '' : ', without an effort setting'}.` }), routed ? null : (_jsxs(XStack, { render: "button", role: "button", "aria-label": "Use Enso", onPress: () => {
-                                        mind.pick(ENSO);
-                                        setOpen(false);
-                                    }, items: "center", gap: "$2", px: "$2", height: 28, rounded: "$3", self: "flex-start", borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(Ring, {}), _jsx(SizableText, { size: "$1", color: "$ink", children: "Use Enso" })] })), _jsx(ModelPicker, { size: "sm", name: "Model", models: mind.models, limits: limits, 
-                                    // The router is named on the chip; a catalog that does not list it leaves the picker open.
-                                    value: routed && !mind.models.some((m) => m.id === ENSO) ? undefined : mind.model, placeholder: "Pick a model", onChange: (id) => {
-                                        mind.pick(id);
-                                        setOpen(false);
-                                    }, loading: mind.loading, error: mind.error })] })] }) })] }));
+    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)))] })] }));
+}
+/** The row under the frame: where (Dev), then the model, the effort and the mode. */
+export function Tune({ mind, mode, where, onUpgrade }) {
+    const thinks = mind ? reasons(mind.model, mind.models) : false;
+    const pace = mind ? EFFORTS.find((e) => e.id === mind.effort) : null;
+    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] })] }));
 }
-/** The pill's `+`: files go with the message. Its name on hover. */
-function Attach({ onAttach, disabled }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onAttach, children: _jsx(Plus, { size: 18 }) }) }), _jsx(TooltipContent, { children: _jsx(SizableText, { size: "$2", children: "Attach files" }) })] }));
+/** The `/` or `@` the caret ends on, and the words typed after it. */
+export function trigger(value) {
+    const m = /(^|\s)([/@])([^\s/@]*)$/.exec(value);
+    return m ? { char: m[2], query: m[3].toLowerCase(), at: m.index + m[1].length } : null;
+}
+/** The list `/` or `@` opens above the frame. */
+function Mention({ shelf, rows, index, onPick, tag, name }) {
+    return (_jsxs(YStack, { role: "listbox", "aria-label": name, "data-slot": "mention", width: "100%", maxH: 240, overflowY: "auto", overflowX: "hidden", p: 6, rounded: CORNER, borderWidth: 1, borderColor: "$borderColor", bg: "$background", "$max-sm": { rounded: CORNER_PHONE }, children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 8, pt: 4, pb: 6, children: shelf.search ?? `Type to search ${name.toLowerCase()}` }), rows.length ? (rows.map((r, i) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": i === index, onPress: () => onPick(r.id), items: "center", gap: 10, px: 8, height: 36, rounded: 8, bg: i === index ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, cursor: "pointer", "$max-sm": { height: 46 }, children: [r.icon ? (_jsx(XStack, { width: 16, items: "center", justify: "center", "aria-hidden": true, children: r.icon })) : null, _jsx(SizableText, { fontSize: 15, color: "$ink", numberOfLines: 1, flex: 1, children: r.label }), _jsx(SizableText, { fontSize: 13, color: "$hint", children: r.on ? 'On' : tag })] }, r.id)))) : (_jsx(SizableText, { fontSize: 14, color: "$hint", px: 8, py: 8, children: shelf.loading ? 'Reading…' : 'Nothing matches' }))] }));
 }
 /** @hanzo/ui `Composer` props for the one composer. */
-export function prompt(o) {
+export function prompt(o, state) {
     const lit = o.ready ?? Boolean(o.value.trim());
     const busy = Boolean(o.busy);
     const disabled = Boolean(o.disabled);
     const live = busy ? Boolean(o.onStop) : lit && !disabled;
-    // A draft past a line takes the pill's width above the controls. The same
-    // field either way, moved by flex order alone: a different tree would remount
-    // it and drop the caret mid-word.
-    const tall = Boolean(o.narrow) || o.value.includes('\n') || o.value.length > LINE;
-    const head = o.head || o.note ? (_jsxs(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: [o.head, o.note ? (_jsx(SizableText, { "data-slot": "prompt-note", fontSize: 12, color: "$soft", text: "center", self: "center", children: o.note })) : null] })) : undefined;
+    const narrow = Boolean(o.narrow);
+    // `/` and `@`: the shelf the caret's word opens, filtered by what follows it.
+    const typed = trigger(o.value);
+    const shelf = typed ? (typed.char === '/' ? o.slash : o.at) : undefined;
+    const listed = shelf && typed && state?.closed !== o.value ? shelf.rows.filter((r) => r.label.toLowerCase().includes(typed.query)).slice(0, 8) : null;
+    const index = Math.min(state?.index ?? 0, Math.max(0, (listed?.length ?? 1) - 1));
+    const choose = (id) => {
+        if (!typed || !shelf)
+            return;
+        o.onChange(o.value.slice(0, typed.at).trimEnd() + (typed.at > 0 ? ' ' : ''));
+        shelf.pick(id);
+    };
+    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: () => {
+            if (!live)
+                return;
+            if (busy)
+                o.onStop?.();
+            else
+                o.onSend();
+        }, children: busy ? _jsx(Square, { size: 13, color: ON, fill: ON }) : _jsx(ArrowUp, { size: 16, strokeWidth: 2.5, color: ON }) }));
     return {
         value: o.value,
         onChange: o.onChange,
-        onSend: o.onSend,
+        onSend: () => {
+            if (listed?.length)
+                return choose(listed[index].id);
+            o.onSend();
+        },
         ...(o.onStop ? { onStop: o.onStop } : {}),
         busy,
         disabled,
-        ...(o.placeholder ? { placeholder: o.placeholder } : {}),
+        placeholder: o.placeholder ?? ASK,
         ...(o.label ? { label: o.label } : {}),
-        // The field: first and the pill's width on a tall draft, after `+` on a line.
-        // inline-style: flex `order`, which no gui prop carries; the field keeps its node either way.
-        // An empty field keeps its placeholder to the line, cut short rather than wrapped inside the pill.
+        rows: 2,
         field: {
             ...o.field,
-            style: { ...(o.field?.style ?? {}), order: tall ? 0 : 1, ...(o.value ? null : { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) },
-            ...(tall ? { width: '100%', flexBasis: '100%', px: '$2' } : null),
-            // A phone keeps the field a readable width: what does not fit beside it goes to a second row.
-            '$max-sm': { minW: 140 },
+            fontSize: 16,
+            lineHeight: 24,
+            px: 8,
+            pt: 2,
+            minH: 48,
+            bg: 'transparent',
         },
-        // Above the pill and at its width, so a chip lines up with the field's edge.
         head,
-        inline: true,
+        foot,
         ...measure,
-        minH: PILL,
-        rounded: tall ? CORNER : 999,
-        pl: 6,
-        pr: 6,
-        gap: 4,
-        items: tall ? 'flex-end' : 'center',
-        flexWrap: tall ? 'wrap' : 'nowrap',
-        '$max-sm': { flexWrap: 'wrap', rounded: CORNER },
+        rounded: CORNER,
+        p: 8,
+        pt: 12,
+        gap: 6,
         borderColor: '$borderColor',
         bg: '$edge',
+        '$max-sm': { rounded: CORNER_PHONE },
         ...(o.framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null),
-        children: (_jsxs(XStack, { items: "center", gap: 2, "data-slot": "prompt-start", style: { order: tall ? 1 : 0 }, shrink: 0, children: [o.onAttach ? _jsx(Attach, { onAttach: o.onAttach, disabled: disabled }) : null, o.tools] })),
-        send: (_jsxs(XStack, { items: "center", gap: 2, "data-slot": "prompt-end", style: { order: 2 }, ml: tall ? 'auto' : 0, "$max-sm": { ml: 'auto' }, shrink: 0, children: [o.mind ? _jsx(Tune, { mind: o.mind, limits: o.limits, disabled: disabled && !busy }) : null, o.voice ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(Mic, { size: 15, fill: state === 'idle' ? 'none' : 'currentColor' }) }) })) : null, o.talk ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Talk with Hanzo', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 15 }) }) })) : null, _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: () => {
-                        if (!live)
-                            return;
-                        if (busy)
-                            o.onStop?.();
-                        else
-                            o.onSend();
-                    }, children: busy ? _jsx(Square, { size: 13, fill: "currentColor" }) : _jsx(ArrowUp, { size: 15, strokeWidth: 2.5 }) })] })),
+        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)] })),
+    };
+}
+/** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
+export function useUpload(upload) {
+    const now = useRef(upload);
+    now.current = upload;
+    useEffect(() => {
+        if (!upload)
+            return;
+        const key = (e) => {
+            if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'u') {
+                e.preventDefault();
+                now.current?.();
+            }
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+    }, [Boolean(upload)]); // eslint-disable-line react-hooks/exhaustive-deps
+}
+/**
+ * The composer's own state — which row of a `/` or `@` list is lit — and the
+ * keys that move it. A surface that hands `prompt` to `Chat` calls this and
+ * passes its answer through; `<Prompt>` does it for itself.
+ */
+export function useMention(o) {
+    const [index, setIndex] = useState(0);
+    const [closed, setClosed] = useState(null);
+    useUpload(o.plus?.upload);
+    const typed = trigger(o.value);
+    const shelf = typed ? (typed.char === '/' ? o.slash : o.at) : undefined;
+    const open = Boolean(shelf && closed !== o.value);
+    useEffect(() => setIndex(0), [typed?.char, typed?.query]);
+    const field = {
+        ...o.field,
+        onKeyDown: (e) => {
+            const key = e.key ?? e.nativeEvent?.key;
+            if (open && key === 'ArrowDown') {
+                e.preventDefault?.();
+                setIndex((i) => i + 1);
+            }
+            else if (open && key === 'ArrowUp') {
+                e.preventDefault?.();
+                setIndex((i) => Math.max(0, i - 1));
+            }
+            else if (open && key === 'Escape') {
+                e.preventDefault?.();
+                setClosed(o.value);
+            }
+            else
+                o.field?.onKeyDown?.(e);
+        },
     };
+    return { state: { index, closed }, field };
 }
 /** The composer drawn on its own. */
 export function Prompt(o) {
     const media = useMedia();
-    return _jsx(Composer, { ...prompt({ ...o, narrow: o.narrow ?? !media.sm }) });
+    const { state, field } = useMention(o);
+    return _jsx(Composer, { ...prompt({ ...o, field, narrow: o.narrow ?? !media.sm }, state) });
 }