@fungi.computer/parakeet 0.4.0 → 0.6.0

package/dist/components/ChatComposer.js

@@ -1,18 +1,26 @@
-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 { composerModelName } from "../core/composer-model-name.js";
 import { formatContextUsage } from "../core/format-context.js";
-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 { 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 { IconButton } from "@fungi.computer/caps/components/icon-button";
+import { KeycapButton } from "@fungi.computer/caps/components/keycap";
+import { ComposerModelKey } from "./ComposerModelKey.js";
+import { StatusTrayList, StatusTrayRow, } from "@fungi.computer/caps/blocks/status-tray";
+import { 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";
+import { ComposerShell, composerSendState, useComposerTextareaSize, } from "./ComposerShell.js";
 const presentations = {
     connecting: {
         busy: false,
@@ -70,13 +78,7 @@ function HostComposerTextarea({ placeholder, onChange, onSend, onAbort, slash, s
         if (textarea !== null)
             textarea.setSelectionRange(textarea.value.length, textarea.value.length);
     }, [recallState, textareaRef]);
-    useLayoutEffect(() => {
-        const textarea = textareaRef.current;
-        if (!textarea)
-            return;
-        textarea.style.height = "auto";
-        textarea.style.height = `${String(Math.min(textarea.scrollHeight, 320))}px`;
-    }, [textareaRef, value]);
+    useComposerTextareaSize(textareaRef, value);
     const saveAndSend = useCallback(() => {
         const draft = latestValue.current.trim();
         if (!draft && (queuedRecall?.images?.length ?? 0) === 0)
@@ -92,13 +94,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 +190,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: "font-sans 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 +245,149 @@ 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" },
+];
+/**
+ * Session controls and Settings content; ComposerShell owns their row.
+ */
+function useComposerRow({ showFooter, statusChips, model, status, viewState, usage, context, slash, attach, send, }) {
+    const [openId, setOpenId] = useState(null);
+    // Footer visibility belongs here, before deriving any internal readouts.
+    if (!showFooter)
+        return undefined;
     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 : composerModelName(model);
+    const contextText = context === undefined ? undefined : formatContextUsage(context);
+    const usageText = usage === undefined
+        ? undefined
+        : `${formatTokens(usage.tokens)} · ${formatMoney(usage.cost)}`;
+    const commands = settingsCommands.filter(({ alias }) => slash?.available(alias) === true);
+    const items = usageText === undefined &&
+        contextText === undefined &&
+        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" })), usageText === undefined ? null : (_jsx(StatusTrayRow, { primary: "Usage", secondary: usageText })), 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 {
+        items,
+        openId,
+        onOpenChange: setOpenId,
+        action: send,
+        controls: (_jsxs(_Fragment, { children: [attach, modelName === undefined ? null : (_jsx(ComposerModelKey, { "aria-label": `Model: ${modelName}. Open settings`, "aria-haspopup": "dialog", expanded: openId === "settings", label: modelName, onClick: () => {
+                        setOpenId((id) => (id === "settings" ? null : "settings"));
+                    }, title: `${modelName} · Settings` })), statusChips?.map((chip, index) => (_jsx("span", { className: "composer-status-chip min-w-0 truncate", title: chip, children: chip }, index)))] })),
+        status: needsAttention ? (_jsx(Status, { className: "parakeet-composer-status", label: _jsx("span", { className: "composer-attention-label", children: label }), title: label, tone: tone })) : null,
+        readout: usageText === undefined ? undefined : (_jsx("span", { title: "Tokens \u00B7 cost", children: usageText })),
+    };
+}
+/** 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);
+                    }, size: "xs", variant: "outline" }))] }, index))) }));
 }
-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, }) {
+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: () => {
+    // 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 = composerSendState({
+        draft,
+        hasAttachments: images.length > 0,
+        busy,
+        queueWhileBusy: true,
+        blocked: recallBusy,
+    });
+    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 };
+        }, 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 };
+    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 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) }))] }));
+    const row = useComposerRow({
+        ...footerProps,
+        showFooter,
+        slash,
+        attach,
+        send: sendAction,
+    });
+    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` }), _jsx(ComposerShell, { "aria-label": "Message composer", action: takeover === undefined && row === undefined ? sendAction : undefined, menu: slash === undefined ? undefined : (_jsx(SlashMenu, { slash: slash, listId: slashListId })), 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 }) })] }), row: 
+                // A decision brings its own Later and Send row to the bottom edge.
+                takeover !== undefined ? undefined : row }), 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/CodeBlock.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from "@fungi.computer/caps/components/icon-button";
 import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 import { reportFailure } from "../lib/failure.js";
@@ -27,9 +28,9 @@ export function CodeBlock({ className, content, header, hideCopy, language, maxH
         color: "var(--color-base-content)",
         ...style,
     };
-    return (_jsxs("div", { className: `relative not-prose ${className ?? ""}`, style: containerStyle, children: [header ? (_jsx("div", { className: "text-dim px-2 pt-1.5 pb-1 text-[9px] uppercase tracking-wider", children: header })) : null, !hideCopy ? (_jsx("button", { "aria-label": "Copy to clipboard", className: "btn btn-circle btn-ghost btn-xs text-dim absolute top-1 right-1 z-10 hover:text-base-content", onClick: () => {
+    return (_jsxs("div", { className: `relative not-prose ${className ?? ""}`, style: containerStyle, children: [header ? (_jsx("div", { className: "text-dim px-2 pt-1.5 pb-1 text-[9px] uppercase tracking-wider", children: header })) : null, !hideCopy ? (_jsx(IconButton, { "aria-label": "Copy to clipboard", className: "absolute top-1 right-1 z-10", icon: copyState === "copied" ? _jsx(Check, {}) : _jsx(Copy, {}), onClick: () => {
                     void handleCopy();
-                }, type: "button", children: copyState === "copied" ? _jsx(Check, { size: 10 }) : _jsx(Copy, { size: 10 }) })) : null, !hideCopy ? (_jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: copyState === "failed" ? "Copy to clipboard failed." : null })) : null, _jsx("div", { className: "overflow-y-auto text-[10px]", "data-scrollable": true, style: {
+                }, type: "button" })) : null, !hideCopy ? (_jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: copyState === "failed" ? "Copy to clipboard failed." : null })) : null, _jsx("div", { className: "overflow-y-auto text-[10px]", "data-scrollable": true, style: {
                     maxHeight: maxHeight === "0" ? undefined : maxHeight,
                     padding: "6px 4px",
                 }, children: innerHtml === null ? (_jsxs("pre", { className: "whitespace-pre-wrap break-words font-mono text-base-content", style: { margin: 0 }, children: [content, content.length > HIGHLIGHT_THRESHOLD ? (_jsx("span", { className: "text-dim ml-2 italic", children: "(syntax highlighting skipped for very long content)" })) : null] })) : (_jsx("div", { 

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/ComposerModelKey.d.ts

@@ -0,0 +1,11 @@
+import { type KeycapButtonProps } from "@fungi.computer/caps/components/keycap";
+/** A model label on the shared native key; callers own selection and menus. */
+export type ComposerModelKeyProps = Omit<KeycapButtonProps, "icon" | "readout" | "label"> & {
+    /** Friendly catalog name, or the real model identity when no name is known. */
+    label: string;
+};
+/** The same model face and chevron in chat and generation composers. */
+export declare const ComposerModelKey: import("react").ForwardRefExoticComponent<Omit<KeycapButtonProps, "label" | "icon" | "readout"> & {
+    /** Friendly catalog name, or the real model identity when no name is known. */
+    label: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ComposerModelKey.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDown } from "lucide-react";
+import { KeycapButton, } from "@fungi.computer/caps/components/keycap";
+import { cn } from "@fungi.computer/caps/lib/cn";
+/** The same model face and chevron in chat and generation composers. */
+export const ComposerModelKey = forwardRef(function ComposerModelKey({ className, label, ...props }, ref) {
+    return (_jsx(KeycapButton, { ...props, ref: ref, className: cn("parakeet-composer-model-key", className), label: label, readout: _jsx(ChevronDown, { "aria-hidden": "true", className: "size-[var(--stipe-icon-size-sm)] shrink-0" }) }));
+});

package/dist/components/ComposerShell.d.ts

@@ -0,0 +1,47 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from "react";
+import { type StatusTrayItem } from "@fungi.computer/caps/blocks/status-tray";
+import type { SendActionState } from "@fungi.computer/caps/components/send-action";
+/** One input-to-action rule for both Apps; Caps owns the resulting key's look. */
+export declare function composerSendState({ draft, hasAttachments, busy, queueWhileBusy, blocked, }: {
+    draft: string;
+    hasAttachments?: boolean;
+    busy: boolean;
+    /** Chat can queue a follow-up; generation stays busy until it settles. */
+    queueWhileBusy?: boolean;
+    /** An input owner can temporarily block submission, such as during recall. */
+    blocked?: boolean;
+}): SendActionState;
+/** App-owned controls and tray contents; Parakeet owns their single row. */
+export type ComposerShellRow = Readonly<{
+    /** App-specific leading keys and status indicators. */
+    controls: ReactNode;
+    /** Send or Generate key, held at the row's right edge. */
+    action: ReactNode;
+    /** Persistent status beside usage and Send, never between leading keys. */
+    status?: ReactNode;
+    /** Quiet context summary; hidden when the shell is narrow. */
+    readout?: ReactNode;
+    /** Native tray keys and panels supplied by the App. */
+    items: readonly StatusTrayItem[];
+    /** Open tray item, or null when the tray is closed. */
+    openId: string | null;
+    /** Delegate tray selection to the caller's state owner. */
+    onOpenChange: (id: string | null) => void;
+}>;
+/** Content slots for the shared chat and generation composer surface. */
+export type ComposerShellProps = HTMLAttributes<HTMLDivElement> & {
+    /** Draft field or decision surface, using the shared input geometry. */
+    input: ReactNode;
+    /** Optional draft attachments rendered by the Composer primitive. */
+    attachments?: ReactNode;
+    /** Retained field-and-Send mode without an internal control row. */
+    action?: ReactNode;
+    /** Optional completion menu anchored to this shell. */
+    menu?: ReactNode;
+    /** Omit while a decision owns the input and its own actions. */
+    row?: ComposerShellRow | undefined;
+};
+/** One field surface and one non-wrapping control row, with Send at its end. */
+export declare function ComposerShell({ attachments, action, children, className, input, menu, row, ...props }: ComposerShellProps): import("react/jsx-runtime").JSX.Element;
+/** Grow either App's field with its draft; shell CSS owns the height limits. */
+export declare function useComposerTextareaSize(ref: RefObject<HTMLTextAreaElement>, value: string): void;

package/dist/components/ComposerShell.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, } from "react";
+import { Card } from "@fungi.computer/caps/components/card";
+import { Composer } from "@fungi.computer/caps/blocks/composer";
+import { PopoverAnchor } from "@fungi.computer/caps/components/popover";
+import { StatusTray, } from "@fungi.computer/caps/blocks/status-tray";
+import { cn } from "@fungi.computer/caps/lib/cn";
+import { KeycapButton } from "@fungi.computer/caps/components/keycap";
+/** One input-to-action rule for both Apps; Caps owns the resulting key's look. */
+export function composerSendState({ draft, hasAttachments = false, busy, queueWhileBusy = false, blocked = false, }) {
+    const hasInput = !blocked && (draft.trim().length > 0 || hasAttachments);
+    if (busy && (!queueWhileBusy || !hasInput))
+        return "busy";
+    return hasInput ? "ready" : "empty";
+}
+/** One field surface and one non-wrapping control row, with Send at its end. */
+export function ComposerShell({ attachments, action, children, className, input, menu, row, ...props }) {
+    return (_jsxs(PopoverAnchor, { className: "parakeet-composer-anchor", children: [menu, _jsxs(Card, { ...props, className: cn("parakeet-composer-shell", className), children: [_jsx(Composer, { action: action, attachments: attachments, input: input, toolbar: row === undefined ? undefined : (_jsx(StatusTray, { className: "parakeet-composer-row", align: "start", items: row.items, openId: row.openId, onOpenChange: row.onOpenChange, renderTrigger: ({ children: label, ...trigger }) => (_jsx(KeycapButton, { ...trigger, label: label, expanded: trigger["aria-expanded"] === true })), leading: row.controls, trailing: _jsxs("span", { className: "parakeet-composer-trailing", children: [row.status, row.readout == null ? null : (_jsx("span", { className: "parakeet-composer-readout", children: row.readout })), _jsx("span", { className: "parakeet-composer-action", children: row.action })] }) })) }), children] })] }));
+}
+/** Grow either App's field with its draft; shell CSS owns the height limits. */
+export function useComposerTextareaSize(ref, value) {
+    useLayoutEffect(() => {
+        const field = ref.current;
+        if (!field)
+            return;
+        field.style.height = "auto";
+        field.style.height = `${String(field.scrollHeight)}px`;
+    }, [ref, value]);
+}