@fungi.computer/parakeet 0.3.0 → 0.5.0

package/dist/components/ChatComposer.js

@@ -1,18 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatTokens } from "../core/format-tokens.js";
 import { formatModelIdentity } from "../core/model-identity.js";
 import { formatContextUsage } from "../core/format-context.js";
-import { Composer, } from "@fungi.computer/caps/blocks/composer";
+import { Composer } from "@fungi.computer/caps/blocks/composer";
 import { isImeComposing } from "@fungi.computer/caps/lib/ime";
 import { RunFailureNotice } from "./RunFailureNotice.js";
-import { Button } from "@fungi.computer/caps/components/button";
+import { SendAction, } from "@fungi.computer/caps/components/send-action";
 import { formatMoney } from "@fungi.computer/caps/lib/format-money";
-import { Popover, PopoverAnchor, } from "@fungi.computer/caps/components/popover";
+import { PopoverAnchor } from "@fungi.computer/caps/components/popover";
 import { Status } from "@fungi.computer/caps/components/status";
-import { memo, useCallback, useId, useLayoutEffect, useRef, useState, } from "react";
+import { Button } from "@fungi.computer/caps/components/button";
+import { Card } from "@fungi.computer/caps/components/card";
+import { IconButton } from "@fungi.computer/caps/components/icon-button";
+import { KeycapButton } from "@fungi.computer/caps/components/keycap";
+import { StatusTray, StatusTrayList, StatusTrayRow, } from "@fungi.computer/caps/blocks/status-tray";
+import { ChevronDown, Plus, SlidersHorizontal, X } from "lucide-react";
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
 import { Textarea } from "@fungi.computer/caps/components/textarea";
 import { formatHints } from "../commands/hints.js";
-import { SlashMenu, slashOptionId } from "./SlashMenu.js";
+import { awaitingTakeover } from "../core/awaiting-answer.js";
+import { completionFieldProps, completionKeyAction } from "./CompletionMenu.js";
+import { DecisionComposer } from "./DecisionComposer.js";
+import { SlashMenu } from "./SlashMenu.js";
 const presentations = {
     connecting: {
         busy: false,
@@ -92,13 +101,14 @@ function HostComposerTextarea({ placeholder, onChange, onSend, onAbort, slash, s
         if (recalling)
             return;
         if (slash?.open === true) {
-            const handled = event.key === "ArrowDown"
+            const action = completionKeyAction(event);
+            const handled = action === "next"
                 ? slash.move(1)
-                : event.key === "ArrowUp"
+                : action === "previous"
                     ? slash.move(-1)
                     : event.key === "Tab"
                         ? slash.complete()
-                        : event.key === "Escape"
+                        : action === "dismiss"
                             ? slash.dismiss()
                             : false;
             if (handled) {
@@ -187,20 +197,24 @@ function HostComposerTextarea({ placeholder, onChange, onSend, onAbort, slash, s
     const listOpen = slash?.open === true && slash.completion.kind !== "none"
         ? slash.completion.items.length > 0
         : false;
-    return (_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx("label", { className: "sr-only", htmlFor: textareaId, children: "Message" }), _jsx(Textarea, { "aria-describedby": [
+    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "sr-only", htmlFor: textareaId, children: "Message" }), _jsx(Textarea, { "aria-describedby": [
                     slash === undefined ? undefined : `${textareaId}-guidance`,
                     queuedRecall === undefined
                         ? undefined
                         : `${textareaId}-recall-guidance`,
                 ]
                     .filter((id) => id !== undefined)
-                    .join(" ") || undefined, "aria-busy": recalling, readOnly: recalling, "aria-autocomplete": "list", "aria-controls": listOpen ? slashListId : undefined, "aria-expanded": listOpen, "aria-activedescendant": listOpen && slash !== undefined
-                    ? slashOptionId(slashListId, slash.selected)
-                    : undefined, className: "join-item min-h-[48px] max-h-[320px] w-full resize-none overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words px-3 py-[calc((3rem-1.25rem)/2)] font-sans text-xs text-base-content !border-0 !bg-transparent !shadow-none focus:!outline-none", id: textareaId, onChange: (event) => {
+                    .join(" ") || undefined, "aria-busy": recalling, readOnly: recalling, ...(slash === undefined
+                    ? {}
+                    : completionFieldProps({
+                        open: listOpen,
+                        listId: slashListId,
+                        selected: slash.selected,
+                    })), className: "min-h-12 max-h-[320px] resize-none overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words py-xs font-sans text-base leading-relaxed text-base-content", id: textareaId, onChange: (event) => {
                     onChange(event.target.value);
                     setHistoryIndex(-1);
                 }, onKeyDown: onKeyDown, placeholder: placeholder ??
-                    (slash === undefined ? "Ask agent..." : "Ask agent… (/ for commands)"), role: slash === undefined ? undefined : "combobox", ref: textareaRef, rows: 1, value: value }), queuedRecall === undefined ? null : (_jsx("span", { id: `${textareaId}-recall-guidance`, className: "sr-only", children: "Press Up on an empty composer to recall your newest queued message." })), (queuedRecall?.images?.length ?? 0) === 0 ? null : (_jsxs("p", { className: "text-xs", children: [queuedRecall?.images?.length, " attached image(s)"] }))] }));
+                    (slash === undefined ? "Ask agent..." : "Ask agent… (/ for commands)"), ref: textareaRef, rows: 1, value: value }), queuedRecall === undefined ? null : (_jsx("span", { id: `${textareaId}-recall-guidance`, className: "sr-only", children: "Press Up on an empty composer to recall your newest queued message." }))] }));
 }
 /** Full Session readout for announcements; the footer only draws attention states. */
 export function sessionReadout(status, view) {
@@ -238,38 +252,136 @@ export function sessionReadout(status, view) {
             return "idle";
     }
 }
-function ComposerFooter({ statusChips, model, status, viewState, usage, context, }) {
+/** Read a picked image file as Session prompt image cargo; the owner admits it on send. */
+async function readImage(file) {
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    let binary = "";
+    for (const byte of bytes)
+        binary += String.fromCharCode(byte);
+    return { type: "image", mimeType: file.type, data: btoa(binary) };
+}
+/** The Session's settings the composer can open, by the slash alias that owns them. */
+const settingsCommands = [
+    { alias: "thinking", label: "Thinking level…" },
+    { alias: "compact", label: "Compact context" },
+];
+/**
+ * The composer's bottom row: attach, the model key, attention, the Settings
+ * chip that sums up the Session's readouts, and the one send key at the end.
+ * Built from the same Caps StatusTray row Prints seats its controls in.
+ */
+function ComposerToolbar({ statusChips, model, status, viewState, usage, context, slash, attach, send, }) {
+    const [openId, setOpenId] = useState(null);
     const tone = viewState.kind === "error" ? "error" : presentations[status].tone;
     // Admission must not replace an outstanding owner attention readout.
     const label = sessionReadout("idle", viewState);
     const needsAttention = viewState.kind === "waiting_for_you" || viewState.kind === "error";
-    return (_jsxs("div", { className: "composer-footer", children: [needsAttention ? (_jsx(Status, { label: label, title: label, tone: tone })) : null, statusChips?.map((chip, index) => (_jsx("span", { className: "min-w-0 truncate", title: chip, children: chip }, index))), model ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "footer-divider" }), _jsx("span", { className: "font-mono font-semibold", children: formatModelIdentity(model) })] })) : null, context ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "footer-divider" }), _jsx("span", { className: "font-mono", title: "Context used / model context", children: formatContextUsage(context) })] })) : null, usage ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "footer-divider" }), _jsx("span", { className: "font-mono", children: formatTokens(usage.tokens) }), _jsx("span", { className: "footer-divider" }), _jsx("span", { className: "font-mono", children: formatMoney(usage.cost) })] })) : null] }));
+    const modelName = model === undefined ? undefined : formatModelIdentity(model);
+    const canPickModel = slash?.available("model") === true;
+    const contextText = context === undefined ? undefined : formatContextUsage(context);
+    const summary = [
+        contextText,
+        usage === undefined ? undefined : formatTokens(usage.tokens),
+        usage === undefined ? undefined : formatMoney(usage.cost),
+    ].filter((part) => part !== undefined);
+    const commands = settingsCommands.filter(({ alias }) => slash?.available(alias) === true);
+    const items = summary.length === 0 && commands.length === 0 && modelName === undefined
+        ? []
+        : [
+            {
+                id: "settings",
+                label: (_jsxs("span", { className: "composer-settings-chip", children: [_jsx(SlidersHorizontal, { "aria-hidden": "true" }), "Settings"] })),
+                accessibleLabel: "Session settings",
+                title: "Settings",
+                content: (_jsxs(StatusTrayList, { className: "composer-settings", children: [modelName === undefined ? null : (_jsx(StatusTrayRow, { primary: "Model", secondary: modelName })), contextText === undefined ? null : (_jsx(StatusTrayRow, { primary: "Context", secondary: contextText, title: "Context used / model context" })), usage === undefined ? null : (_jsx(StatusTrayRow, { primary: "Usage", secondary: `${formatTokens(usage.tokens)} · ${formatMoney(usage.cost)}` })), commands.map(({ alias, label: commandLabel }) => (_jsx(StatusTrayRow, { primary: commandLabel, actions: _jsx(Button, { size: "xs", variant: "ghost", onClick: () => {
+                                    setOpenId(null);
+                                    slash?.runCommand(alias);
+                                }, children: "Open" }) }, alias)))] })),
+            },
+        ];
+    return (_jsx(StatusTray, { className: "composer-footer", items: items, align: "start", openId: openId, onOpenChange: setOpenId, leading: _jsxs(_Fragment, { children: [attach, modelName === undefined ? null : canPickModel ? (_jsx(KeycapButton, { "aria-label": `Model: ${modelName}. Change model`, className: "composer-model-key", label: modelName, readout: _jsx(ChevronDown, { "aria-hidden": "true", className: "size-[var(--stipe-icon-size-sm)] shrink-0" }), onClick: () => {
+                        slash.runCommand("model");
+                    }, title: "Change model" })) : (_jsx("span", { className: "composer-model-readout", children: modelName })), needsAttention ? (_jsx(Status, { label: label, title: label, tone: tone })) : null, statusChips?.map((chip, index) => (_jsx("span", { className: "composer-status-chip min-w-0 truncate", title: chip, children: chip }, index)))] }), trailing: _jsxs(_Fragment, { children: [summary.length === 0 ? null : (_jsx("span", { className: "composer-readout", title: "Context used / model context \u00B7 tokens \u00B7 cost", children: summary.join(" · ") })), send] }) }));
 }
-export const ChatComposer = memo(function ChatComposer({ queuedRecall, placeholder, showFooter = true, statusChips, actionVariant = "primary", draft, failure, failureCause, admissionError, model, onAbort, onChange, onRetry, onSend, status, viewState, textareaRef, usage, context, slash, }) {
+/** Images riding with the draft, drawn as small tiles above the text. */
+function ComposerAttachments({ images, onRemove, }) {
+    return (_jsx("ul", { "aria-label": "Attached images", className: "composer-attachments", children: images.map((image, index) => (_jsxs("li", { children: [_jsx("img", { alt: `Attached image ${String(index + 1)}`, className: "mask mask-squircle", src: `data:${image.mimeType};base64,${image.data}` }), onRemove === undefined ? null : (_jsx(IconButton, { "aria-label": `Remove attached image ${String(index + 1)}`, className: "composer-attachment-remove", icon: _jsx(X, {}), onClick: () => {
+                        onRemove(index);
+                    } }))] }, index))) }));
+}
+export const ChatComposer = memo(function ChatComposer({ queuedRecall, onImagesChange, placeholder, showFooter = true, statusChips, actionVariant = "primary", draft, failure, failureCause, admissionError, model, onAbort, onChange, onRetry, onSend, status, viewState, textareaRef, usage, context, slash, }) {
     const textareaId = useId();
     const slashListId = `${textareaId}-commands`;
+    const fileInput = useRef(null);
     const { busy } = presentations[status];
+    // A waiting decision takes the composer over an empty draft, or on request.
+    const takeover = slash === undefined ? undefined : awaitingTakeover(slash.awaiting, draft);
+    const takeoverKey = takeover?.key;
+    const seenTakeover = useRef(undefined);
+    const hadFocus = useRef(false);
+    if (seenTakeover.current !== takeoverKey) {
+        seenTakeover.current = takeoverKey;
+        hadFocus.current =
+            takeoverKey !== undefined &&
+                document.activeElement === textareaRef.current;
+    }
+    const restoreFocus = hadFocus.current;
+    useEffect(() => {
+        if (takeoverKey === undefined && restoreFocus)
+            textareaRef.current?.focus();
+    }, [takeoverKey, restoreFocus, textareaRef]);
+    const images = queuedRecall?.images ?? [];
     const recallBusy = queuedRecall?.recallState.kind === "recalling";
-    const cannotSend = recallBusy ||
-        (draft.trim().length === 0 && (queuedRecall?.images?.length ?? 0) === 0);
-    const composerAction = busy ? (_jsxs("div", { className: "flex items-stretch", children: [_jsx(Button, { "aria-label": "Stop current turn", className: "join-item h-auto min-h-0 self-stretch", "data-testid": "composer-stop", disabled: recallBusy || status === "queued" || status === "cancelling", onClick: onAbort, title: "Stop the current turn. Queued messages keep running in order.", size: "lg", variant: "ghost", children: "Stop" }), _jsx(Button, { "aria-label": "Queue follow-up", className: "join-item h-auto min-h-0 self-stretch", disabled: cannotSend, onClick: () => {
-                    onSend("followUp");
-                }, size: "lg", variant: actionVariant, children: "Queue" })] })) : (_jsx(Button, { "aria-label": "Send message", className: "join-item h-auto min-h-0 self-stretch", disabled: cannotSend, onClick: () => {
-            onSend("steer");
-        }, title: "Send", size: "lg", variant: actionVariant, children: "Send" }));
-    const composerInput = (_jsx(HostComposerTextarea, { queuedRecall: queuedRecall, placeholder: placeholder, onChange: onChange, onAbort: onAbort, onSend: () => {
+    const cannotSend = recallBusy || (draft.trim().length === 0 && images.length === 0);
+    // One key in one place: Send when idle, Stop while the Agent works.
+    // Enter still queues a typed follow-up during a run.
+    // One key says what Enter does: Send when idle; while the Agent works,
+    // Stop over an empty draft and Queue once there is a draft to queue.
+    const sendState = cannotSend
+        ? busy
+            ? "busy"
+            : "empty"
+        : "ready";
+    const sendLabel = busy ? "Queue follow-up" : "Send message";
+    const sendAction = (_jsx(SendAction, { "aria-label": sendLabel, className: "composer-send-key", disabled: sendState === "busy" &&
+            (recallBusy || status === "queued" || status === "cancelling"), onClick: () => {
             onSend(busy ? "followUp" : "steer");
-        }, slash: slash, slashListId: slashListId, textareaId: textareaId, textareaRef: textareaRef, value: draft }));
-    const composerProps = {
-        action: composerAction,
-        input: composerInput,
-    };
-    const footerProps = { status, viewState, statusChips };
-    if (model)
-        footerProps.model = model;
-    if (usage)
-        footerProps.usage = usage;
-    if (context)
-        footerProps.context = context;
-    return (_jsxs("div", { className: "chat-composer not-prose flex-shrink-0 border-t border-base-300", children: [_jsxs("div", { className: "relative", children: [admissionError === "queue_full" ? (_jsx("div", { className: "px-3 py-1.5 text-xs text-error", role: "alert", children: "Too many prompts are still awaiting admission. Try again shortly." })) : null, failure !== undefined ? (_jsx(RunFailureNotice, { failure: failure, cause: failureCause, onRetry: onRetry })) : null, slash?.interactions.notice === undefined ? null : (_jsx("div", { className: "parakeet-command-notice px-3 py-1.5 text-xs", "data-tone": slash.interactions.notice.tone, role: slash.interactions.notice.tone === "error" ? "alert" : "status", children: slash.interactions.notice.message })), _jsxs(PopoverAnchor, { className: "composer-body", children: [slash === undefined ? null : (_jsx(Popover, { open: slash.open, side: "top", "data-parakeet-slash": "", children: _jsx(SlashMenu, { slash: slash, listId: slashListId }) })), _jsx(Composer, { ...composerProps })] })] }), showFooter ? _jsx(ComposerFooter, { ...footerProps }) : null, slash === undefined ? null : (_jsx("p", { className: "sr-only", id: `${textareaId}-guidance`, children: formatHints(slash.hints) }))] }));
+        }, onStop: onAbort, state: sendState, stopLabel: "Stop current turn", title: sendState === "busy"
+            ? "Stop the current turn. Queued messages keep running in order."
+            : sendLabel, tone: actionVariant === "primary" ? "primary" : "neutral" }));
+    const attach = onImagesChange === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("input", { accept: "image/png,image/jpeg,image/gif,image/webp", "aria-label": "Choose images to attach", hidden: true, multiple: true, onChange: (event) => {
+                    const picked = Array.from(event.currentTarget.files ?? []);
+                    event.currentTarget.value = "";
+                    void Promise.all(picked.map(readImage)).then((read) => {
+                        onImagesChange([...images, ...read]);
+                    });
+                }, ref: fileInput, type: "file" }), _jsx(KeycapButton, { "aria-label": "Attach images", className: "composer-attach-key", icon: _jsx(Plus, {}), label: null, onClick: () => fileInput.current?.click(), title: "Attach images" })] }));
+    // Visitors see only the field and the send key, never internal readouts.
+    const footerProps = { status, viewState };
+    if (showFooter) {
+        footerProps.statusChips = statusChips;
+        if (model)
+            footerProps.model = model;
+        if (usage)
+            footerProps.usage = usage;
+        if (context)
+            footerProps.context = context;
+    }
+    return (_jsxs("div", { className: "chat-composer not-prose flex-shrink-0", children: [admissionError !== undefined ? (_jsx("div", { className: "px-3 py-1.5 text-xs text-error", role: "alert", children: admissionError === "offline_queue_full"
+                    ? "One prompt is already queued; it sends when the service is back."
+                    : "Too many prompts are still awaiting admission. Try again shortly." })) : null, failure !== undefined ? (_jsx(RunFailureNotice, { failure: failure, cause: failureCause, onRetry: onRetry })) : null, slash?.interactions.notice === undefined ? null : (_jsx("div", { className: "parakeet-command-notice px-3 py-1.5 text-xs", "data-tone": slash.interactions.notice.tone, role: slash.interactions.notice.tone === "error" ? "alert" : "status", children: slash.interactions.notice.message })), _jsx("div", { "aria-live": "polite", className: "sr-only", children: takeover === undefined || slash === undefined
+                    ? ""
+                    : `Agent ${takeover.kind} ${String(slash.awaiting.position)} of ${String(slash.awaiting.total)} needs your answer` }), _jsxs(PopoverAnchor, { className: "composer-body", children: [slash === undefined ? null : (_jsx(SlashMenu, { slash: slash, listId: slashListId })), _jsx(Card, { "aria-label": "Message composer", className: "composer-card", children: _jsx(Composer, { attachments: takeover === undefined && images.length > 0 ? (_jsx(ComposerAttachments, { images: images, onRemove: onImagesChange === undefined
+                                    ? undefined
+                                    : (index) => {
+                                        onImagesChange(images.filter((_image, at) => at !== index));
+                                    } })) : undefined, input: _jsxs(_Fragment, { children: [takeover === undefined || slash === undefined ? null : (_jsx(DecisionComposer, { item: takeover, position: slash.awaiting.position, total: slash.awaiting.total, onLater: () => {
+                                            slash.store.awaiting.later(takeover.key);
+                                        }, takeFocus: hadFocus.current }, takeover.key)), _jsx("div", { hidden: takeover !== undefined, children: _jsx(HostComposerTextarea, { queuedRecall: queuedRecall, placeholder: placeholder, onChange: onChange, onAbort: onAbort, onSend: () => {
+                                                onSend(busy ? "followUp" : "steer");
+                                            }, slash: slash, slashListId: slashListId, textareaId: textareaId, textareaRef: textareaRef, value: draft }) })] }), action: 
+                            // Visitors get the field and the send key, no toolbar.
+                            takeover === undefined && !showFooter ? sendAction : undefined, toolbar: 
+                            // A decision brings its own Later and Send row to the bottom edge.
+                            takeover !== undefined || !showFooter ? undefined : (_jsx(ComposerToolbar, { ...footerProps, slash: slash, attach: attach, send: sendAction })) }) })] }), slash === undefined ? null : (_jsx("p", { className: "sr-only", id: `${textareaId}-guidance`, children: formatHints(slash.hints) }))] }));
 });

package/dist/components/ClientRows.js

@@ -17,30 +17,46 @@ export function ClientRows({ entryId, rows, actions, onOpen, }) {
     const { inspection } = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
     if (rows.length === 0)
         return null;
-    return (_jsx("div", { className: "px-3 text-xs text-base-content", "data-client-entry": entryId, children: rows.map((row) => (_jsxs("div", { "data-client-row": row.id, className: "py-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", "data-client-row-dot": "", className: `w-3 shrink-0 text-center leading-4 ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: row.tone === undefined ? "" : "●" }), _jsxs("details", { className: "min-w-0 flex-1", children: [_jsxs("summary", { className: `cursor-pointer break-words leading-4 ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: [row.title, row.inspection === undefined || row.detail === undefined
-                                            ? null
-                                            : ` · ${row.detail}`] }), row.detail === undefined ? null : (_jsx("p", { className: "max-h-32 overflow-y-auto overscroll-contain whitespace-pre-wrap break-words pb-2", children: row.detail }))] }), row.open === undefined ? null : (_jsx(Button, { size: "xs", variant: "outline", disabled: onOpen === undefined, onClick: () => {
-                                if (row.open !== undefined)
-                                    onOpen?.(row.open);
-                            }, children: "Open" })), row.actions?.map((action) => {
-                            const state = actions.state.get(action);
-                            return (_jsx(Button, { size: "xs", variant: "outline", className: "shrink-0", disabled: !actions.enabled || state?.pending === true, loading: state?.pending === true, onClick: () => {
-                                    void actions.execute(entryId, action);
-                                }, children: action.label }, action.id));
-                        })] }), row.inspection !== undefined &&
-                    inspection?.entryId === entryId &&
-                    inspection.rowId === row.id ? (_jsxs("section", { "aria-label": row.title, "data-client-inspection": row.id, children: [_jsx(DataListHeading, { aside: _jsx(Button, { size: "xs", variant: "ghost", onClick: () => {
-                                    store.inspect(undefined);
-                                }, children: "Close" }), children: row.title }), _jsx(DataList, { density: "compact", tabIndex: 0, className: "max-h-64 overflow-y-auto overscroll-contain", children: row.inspection.rows.map((child) => (_jsxs(DataRow, { children: [_jsx(Status, { glyph: "dot", size: "compact", tone: child.tone === "settled"
-                                            ? "success"
-                                            : child.tone === "running"
-                                                ? "info"
-                                                : child.tone === "error"
-                                                    ? "error"
-                                                    : child.tone === "attention"
-                                                        ? "warning"
-                                                        : "neutral", label: child.title }), child.detail === undefined ? null : (_jsx("span", { children: child.detail }))] }, child.id))) })] })) : null, row.actions?.map((action) => {
-                    const error = actions.state.get(action)?.error;
-                    return error === undefined ? null : (_jsx("p", { className: "text-error", role: "alert", children: error }, action.id));
-                })] }, row.id))) }));
+    return (_jsx("div", { className: "px-3 text-xs text-base-content", "data-client-entry": entryId, children: rows.map((row) => {
+            // A row that only opens a waiting decision is one tap target: the
+            // whole line, so its key never outgrows the line's text.
+            const decision = row.open === undefined &&
+                row.inspection === undefined &&
+                row.actions?.length === 1 &&
+                row.actions[0]?.awaiting !== undefined
+                ? row.actions[0]
+                : undefined;
+            if (decision !== undefined) {
+                const state = actions.state.get(decision);
+                return (_jsxs("div", { "data-client-row": row.id, children: [_jsxs(Button, { size: "xs", variant: "ghost", className: "-mx-xs flex w-[calc(100%+2*var(--spacing-xs))] justify-start gap-2 px-xs font-normal", disabled: !actions.enabled || state?.pending === true, loading: state?.pending === true, onClick: () => {
+                                void actions.execute(entryId, decision);
+                            }, children: [_jsx("span", { "aria-hidden": "true", "data-client-row-dot": "", className: `w-3 shrink-0 text-center ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: row.tone === undefined ? "" : "●" }), _jsxs("span", { className: `min-w-0 flex-1 truncate text-start ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: [row.title, row.detail === undefined ? null : (_jsxs("span", { className: "text-dim", children: [" \u00B7 ", row.detail] }))] }), _jsx("span", { className: "shrink-0 text-dim", "data-client-row-action": "", children: decision.label })] }), state?.error === undefined ? null : (_jsx("p", { className: "text-error", role: "alert", children: state.error }))] }, row.id));
+            }
+            return (_jsxs("div", { "data-client-row": row.id, className: "py-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { "aria-hidden": "true", "data-client-row-dot": "", className: `w-3 shrink-0 text-center leading-4 ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: row.tone === undefined ? "" : "●" }), _jsxs("details", { className: "min-w-0 flex-1", children: [_jsxs("summary", { className: `cursor-pointer break-words leading-4 ${row.tone === undefined ? "" : rowColors[row.tone]}`, children: [row.title, row.inspection === undefined || row.detail === undefined
+                                                ? null
+                                                : ` · ${row.detail}`] }), row.detail === undefined ? null : (_jsx("p", { className: "max-h-32 overflow-y-auto overscroll-contain whitespace-pre-wrap break-words pb-2", children: row.detail }))] }), row.open === undefined ? null : (_jsx(Button, { size: "xs", variant: "outline", disabled: onOpen === undefined, onClick: () => {
+                                    if (row.open !== undefined)
+                                        onOpen?.(row.open);
+                                }, children: "Open" })), row.actions?.map((action) => {
+                                const state = actions.state.get(action);
+                                return (_jsx(Button, { size: "xs", variant: "outline", className: "shrink-0", disabled: !actions.enabled || state?.pending === true, loading: state?.pending === true, onClick: () => {
+                                        void actions.execute(entryId, action);
+                                    }, children: action.label }, action.id));
+                            })] }), row.inspection !== undefined &&
+                        inspection?.entryId === entryId &&
+                        inspection.rowId === row.id ? (_jsxs("section", { "aria-label": row.title, "data-client-inspection": row.id, children: [_jsx(DataListHeading, { aside: _jsx(Button, { size: "xs", variant: "ghost", onClick: () => {
+                                        store.inspect(undefined);
+                                    }, children: "Close" }), children: row.title }), _jsx(DataList, { density: "compact", tabIndex: 0, className: "max-h-64 overflow-y-auto overscroll-contain", children: row.inspection.rows.map((child) => (_jsxs(DataRow, { children: [_jsx(Status, { glyph: "dot", size: "compact", tone: child.tone === "settled"
+                                                ? "success"
+                                                : child.tone === "running"
+                                                    ? "info"
+                                                    : child.tone === "error"
+                                                        ? "error"
+                                                        : child.tone === "attention"
+                                                            ? "warning"
+                                                            : "neutral", label: child.title }), child.detail === undefined ? null : (_jsx("span", { children: child.detail }))] }, child.id))) })] })) : null, row.actions?.map((action) => {
+                        const error = actions.state.get(action)?.error;
+                        return error === undefined ? null : (_jsx("p", { className: "text-error", role: "alert", children: error }, action.id));
+                    })] }, row.id));
+        }) }));
 }

package/dist/components/CompletionMenu.d.ts

@@ -0,0 +1,54 @@
+import type { KeyboardEvent, ReactNode } from "react";
+/** One row of a completion menu. */
+export type CompletionRow = Readonly<{
+    key: string;
+    label: ReactNode;
+    detail?: string | undefined;
+    /** Key hint shown at the row's end. */
+    keys?: string | undefined;
+    /** Decorative leading visual, such as a thumbnail. */
+    media?: ReactNode;
+    disabled?: boolean | undefined;
+}>;
+/** Stable id of one completion row, for `aria-activedescendant`. */
+export declare function completionOptionId(listId: string, index: number): string;
+/** What a key press asks of an open completion menu. */
+export type CompletionKeyAction = "next" | "previous" | "accept" | "dismiss" | null;
+/**
+ * The one reading of keys for a completion menu whose focus stays in the text
+ * field: arrows move, Enter or Tab accept, Escape dismisses. Shift+Enter is
+ * a newline, never an accept.
+ */
+export declare function completionKeyAction(event: Pick<KeyboardEvent, "key" | "shiftKey">): CompletionKeyAction;
+/** The ARIA attributes a combobox text field carries for an open menu. */
+export declare function completionFieldProps(menu: {
+    open: boolean;
+    listId: string;
+    selected: number;
+}): {
+    readonly role: "combobox";
+    readonly "aria-autocomplete": "list";
+    readonly "aria-expanded": boolean;
+    readonly "aria-controls": string | undefined;
+    readonly "aria-activedescendant": string | undefined;
+};
+/**
+ * The shared completion menu: a Caps popover with listbox rows. It never
+ * takes focus; the text field keeps typing and points at the highlighted row
+ * with `aria-activedescendant`. Grove's slash commands and Prints' slash and
+ * `@character` menus all draw it.
+ */
+export declare function CompletionMenu({ open, rows, selected, listId, label, kind, hint, empty, onHighlight, onChoose, }: Readonly<{
+    open: boolean;
+    rows: readonly CompletionRow[];
+    selected: number;
+    listId: string;
+    /** Accessible name of the listbox. */
+    label: string;
+    kind: string;
+    hint?: string | undefined;
+    /** Shown instead of rows when there are none; omitted draws nothing. */
+    empty?: string | undefined;
+    onHighlight: (index: number) => void;
+    onChoose: (index: number) => void;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/CompletionMenu.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverOption, } from "@fungi.computer/caps/components/popover";
+/** Stable id of one completion row, for `aria-activedescendant`. */
+export function completionOptionId(listId, index) {
+    return `${listId}-${String(index)}`;
+}
+/**
+ * The one reading of keys for a completion menu whose focus stays in the text
+ * field: arrows move, Enter or Tab accept, Escape dismisses. Shift+Enter is
+ * a newline, never an accept.
+ */
+export function completionKeyAction(event) {
+    switch (event.key) {
+        case "ArrowDown":
+            return "next";
+        case "ArrowUp":
+            return "previous";
+        case "Enter":
+            return event.shiftKey ? null : "accept";
+        case "Tab":
+            return "accept";
+        case "Escape":
+            return "dismiss";
+        default:
+            return null;
+    }
+}
+/** The ARIA attributes a combobox text field carries for an open menu. */
+export function completionFieldProps(menu) {
+    return {
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": menu.open,
+        "aria-controls": menu.open ? menu.listId : undefined,
+        "aria-activedescendant": menu.open
+            ? completionOptionId(menu.listId, menu.selected)
+            : undefined,
+    };
+}
+/**
+ * The shared completion menu: a Caps popover with listbox rows. It never
+ * takes focus; the text field keeps typing and points at the highlighted row
+ * with `aria-activedescendant`. Grove's slash commands and Prints' slash and
+ * `@character` menus all draw it.
+ */
+export function CompletionMenu({ open, rows, selected, listId, label, kind, hint, empty, onHighlight, onChoose, }) {
+    return (_jsx(Popover, { open: open, side: "top", "data-parakeet-slash": "", children: _jsxs("div", { className: "parakeet-slash-menu", "data-kind": kind, children: [hint === undefined ? null : (_jsx("p", { className: "parakeet-slash-hint", children: hint })), rows.length === 0 ? (empty === undefined ? null : (_jsx("p", { className: "parakeet-slash-hint", children: empty }))) : (_jsx("div", { id: listId, role: "listbox", "aria-label": label, children: rows.map((row, index) => (_jsxs(PopoverOption, { id: completionOptionId(listId, index), active: index === selected, "aria-disabled": row.disabled === true ? true : undefined, "data-disabled": row.disabled === true, onMouseEnter: () => {
+                            onHighlight(index);
+                        }, onClick: () => {
+                            onChoose(index);
+                        }, children: [row.media === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "parakeet-slash-media", children: row.media })), _jsx("span", { className: "parakeet-slash-label", children: row.label }), _jsx("span", { className: "parakeet-slash-detail", children: row.detail }), row.keys === undefined || row.keys.length === 0 ? null : (_jsx("kbd", { className: "parakeet-slash-keys", children: row.keys }))] }, row.key))) }))] }) }));
+}

package/dist/components/DecisionComposer.d.ts

@@ -0,0 +1,30 @@
+import type { AwaitingItem, DecisionIntent, DecisionView } from "../core/awaiting-answer.js";
+/** Props for the decision that has taken over the composer. */
+export type DecisionComposerProps = Readonly<{
+    /** The waiting decision to answer. */
+    item: AwaitingItem;
+    /** One-based place among every waiting decision. */
+    position: number;
+    /** Every waiting decision. */
+    total: number;
+    /** Postpone the decision; it waits in the footer row. */
+    onLater: () => void;
+    /** The person was typing in the composer, so focus follows into the list. */
+    takeFocus: boolean;
+}>;
+/**
+ * The composer while the Agent waits on the person: the decision's rows,
+ * an Other line, and Send / Later. It binds one waiting decision to its
+ * reducer and draws the result.
+ */
+export declare function DecisionComposer({ item, position, total, onLater, takeFocus, }: DecisionComposerProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Draw Parakeet's decision view with Caps parts and forward keys and clicks as
+ * intents; the rules live in the reducer, so every surface answers alike.
+ */
+export declare function DecisionPanel({ view, dispatch, onLater, takeFocus, }: Readonly<{
+    view: DecisionView;
+    dispatch: (intent: DecisionIntent) => void;
+    onLater: () => void;
+    takeFocus: boolean;
+}>): import("react/jsx-runtime").JSX.Element;