@fungi.computer/parakeet 0.5.0 → 0.6.1

package/README.md

@@ -60,7 +60,7 @@ export function Conversation({ session }: { session: ParakeetSession }) {
 Parakeet never reads a message's host metadata itself. To show who wrote a line,
 pass `authorOf`: your reading of that metadata into a `ParakeetAuthor`
 (`{ id, name }`). A Fungi app passes `messageAuthor` from
-`@fungi.computer/hub-client/message-meta`; without it, lines show no author.
+`@fungi.computer/agar/agents`; without it, lines show no author.
 
 The view presents the Session's observed history, live work, composer and
 errors. Screen readers receive the same Session status as the composer footer
@@ -78,6 +78,22 @@ provider, query cache, observations and prompt admission with typed fixtures.
 The browser contract uses the real component with a fixture Session. A fake
 Session checks the component, not hosted authentication or a model provider.
 
+## Shared composer
+
+`ComposerShell` is the shared chat and generation composer surface. It owns the
+Card, field inset, height limits and one non-wrapping control row; callers
+supply their field, controls, tray contents and action, not another toolbar
+layout. `useComposerTextareaSize(ref, value)` grows either field within those
+shared limits. The full stylesheet includes this layout; hosts compiling their
+own Caps sheet import `@fungi.computer/parakeet/composer-shell.css` alongside
+the completion-menu stylesheet.
+
+The real Grove/Prints workbench proof is
+`pnpm --filter @fungi.computer/grove test:composer-parity`. It requires both
+workbenches (`GROVE_WORKBENCH_URL` / `PRINTS_WORKBENCH_URL`) and checks equal
+geometry, a right-edge Send key and no wrapped controls at 390px in both themes.
+`COMPOSER_PARITY_SHOTS` optionally saves the six matching side-by-side images.
+
 ## Core concepts
 
 | Surface                             | What it owns                                                                                        |

package/dist/components/ChatComposer.js

@@ -1,20 +1,18 @@
 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 { SendAction, } from "@fungi.computer/caps/components/send-action";
+import { SendAction } from "@fungi.computer/caps/components/send-action";
 import { formatMoney } from "@fungi.computer/caps/lib/format-money";
-import { PopoverAnchor } from "@fungi.computer/caps/components/popover";
 import { Status } from "@fungi.computer/caps/components/status";
 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 { 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";
@@ -22,6 +20,7 @@ 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,
@@ -79,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)
@@ -210,7 +203,7 @@ function HostComposerTextarea({ placeholder, onChange, onSend, onAbort, slash, s
                         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) => {
+                    })), className: "font-sans text-base-content", id: textareaId, onChange: (event) => {
                     onChange(event.target.value);
                     setHistoryIndex(-1);
                 }, onKeyDown: onKeyDown, placeholder: placeholder ??
@@ -266,26 +259,27 @@ const settingsCommands = [
     { 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.
+ * Session controls and Settings content; ComposerShell owns their row.
  */
-function ComposerToolbar({ statusChips, model, status, viewState, usage, context, slash, attach, send, }) {
+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";
-    const modelName = model === undefined ? undefined : formatModelIdentity(model);
-    const canPickModel = slash?.available("model") === true;
+    const modelName = model === undefined ? undefined : composerModelName(model);
     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 usageText = usage === undefined
+        ? undefined
+        : `${formatTokens(usage.tokens)} · ${formatMoney(usage.cost)}`;
     const commands = settingsCommands.filter(({ alias }) => slash?.available(alias) === true);
-    const items = summary.length === 0 && commands.length === 0 && modelName === undefined
+    const items = usageText === undefined &&
+        contextText === undefined &&
+        commands.length === 0 &&
+        modelName === undefined
         ? []
         : [
             {
@@ -293,21 +287,29 @@ function ComposerToolbar({ statusChips, model, status, viewState, usage, context
                 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: () => {
+                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 (_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] }) }));
+    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);
-                    } }))] }, index))) }));
+                    }, size: "xs", variant: "outline" }))] }, 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();
@@ -332,16 +334,17 @@ export const ChatComposer = memo(function ChatComposer({ queuedRecall, onImagesC
     }, [takeoverKey, restoreFocus, textareaRef]);
     const images = queuedRecall?.images ?? [];
     const recallBusy = queuedRecall?.recallState.kind === "recalling";
-    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 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: () => {
@@ -358,30 +361,33 @@ export const ChatComposer = memo(function ChatComposer({ queuedRecall, onImagesC
                 }, 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;
-    }
+    footerProps.statusChips = statusChips;
+    if (model)
+        footerProps.model = model;
+    if (usage)
+        footerProps.usage = usage;
+    if (context)
+        footerProps.context = context;
+    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` }), _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) }))] }));
+                    : `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/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/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]);
+}

package/dist/components/DecisionComposer.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "@fungi.computer/caps/components/button";
 import { Checkbox } from "@fungi.computer/caps/components/checkbox";
 import { KeycapButton } from "@fungi.computer/caps/components/keycap";
 import { Input } from "@fungi.computer/caps/components/input";
@@ -140,7 +139,7 @@ export function DecisionPanel({ view, dispatch, onLater, takeFocus, }) {
                         },
                     }) }), view.status === undefined ? null : (_jsx("p", { className: view.status.tone === "error"
                     ? "text-sm text-error"
-                    : "text-sm opacity-70", role: view.status.tone === "error" ? "alert" : "status", children: view.status.text })), _jsxs("div", { className: "parakeet-decision-actions", children: [_jsx(Button, { variant: "ghost", onClick: onLater, children: "Later" }), _jsx(KeycapButton, { disabled: !view.canSend, label: "Send", onClick: () => {
+                    : "text-sm opacity-70", role: view.status.tone === "error" ? "alert" : "status", children: view.status.text })), _jsxs("div", { className: "parakeet-decision-actions", children: [_jsx(KeycapButton, { label: "Later", tone: "neutral", onClick: onLater }), _jsx(KeycapButton, { disabled: !view.canSend, label: "Send", onClick: () => {
                             dispatch({ type: "enter" });
                         }, tone: "primary" })] })] }));
 }

package/dist/components/TimelineItem.js

@@ -25,7 +25,7 @@ export const TimelineItem = memo(function TimelineItem({ item, onDismissFailed,
                 onCancelQueued !== undefined ? (_jsx("div", { className: "flex justify-end px-3", children: _jsx(Button, { "aria-label": "Cancel queued message", disabled: cancellingQueued, size: "sm", variant: "ghost", onClick: () => {
                         onCancelQueued(commandId);
                     }, children: "Cancel" }) })) : null;
-            const dismissAction = requestId === undefined || onDismissFailed === undefined ? null : (_jsx("button", { "aria-label": "Dismiss failed prompt", className: "btn btn-ghost btn-xs", onClick: () => {
+            const dismissAction = requestId === undefined || onDismissFailed === undefined ? null : (_jsx(Button, { "aria-label": "Dismiss failed prompt", variant: "outline", size: "xs", onClick: () => {
                     onDismissFailed(requestId);
                 }, type: "button", children: "Dismiss" }));
             const failed = item.status === "failed" ? (_jsxs("div", { className: "flex items-center gap-2 px-3 text-xs text-error", role: "alert", children: [_jsx("span", { children: item.author?.kind === "agent"

package/dist/components/ToolGroup.js

@@ -6,7 +6,7 @@ import { Status } from "@fungi.computer/caps/components/status";
 import { Sigil } from "@fungi.computer/sigils";
 import { memo } from "react";
 import { disclosureOpen, toolCallDefaultOpen, toolGroupDefaultOpen, visibleToolCalls, } from "../core/tool-groups.js";
-import { formatToolDuration, toolStatusTone as statusTone, toolKindSigils, } from "../core/tool-view.js";
+import { formatToolDuration, toolStatusTone as statusTone, toolKindSigils, toolLiveLines, } from "../core/tool-view.js";
 import { CodeBlock } from "./CodeBlock.js";
 /** Items beyond a section's preview, unless the reader asked for all. */
 function visible(items, preview, full) {
@@ -69,7 +69,7 @@ function CallRow({ call, tool, disclosureId, size, disclosure, onToggle, renderT
     const running = call.status === "running";
     return (_jsxs("div", { "data-parakeet-call": call.kind, "data-status": call.status, children: [_jsx(Disclosure, { leading: _jsx(Sigil, { name: toolKindSigils[call.kind], size: 16 }), onOpenChange: () => {
                     onToggle(disclosureId, defaultOpen);
-                }, open: open, size: size, summary: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-base-content", children: running ? call.activeVerb : call.verb }), " ", _jsx("span", { className: "font-mono", children: call.label })] }), tone: call.status === "error" ? "error" : "neutral", trailing: _jsxs(_Fragment, { children: [call.exitCode === undefined ? null : (_jsxs(Badge, { size: "sm", tone: "error", children: ["exit ", String(call.exitCode)] })), call.durationMs === undefined ? null : (_jsx("span", { children: formatToolDuration(call.durationMs) })), _jsx(Status, { motion: running ? "bounce" : "none", title: call.status === "unknown" ? "result unavailable" : call.status, tone: statusTone(call.status) })] }), children: _jsx(CallBody, { call: call, disclosure: disclosure, onToggle: onToggle, mediaClaimed: tool !== undefined && claimsToolMedia?.(tool) === true, tool: tool }) }), call.status === "completed" && tool?.result !== undefined
+                }, open: open, size: size, summary: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-base-content", children: running ? call.activeVerb : call.verb }), " ", _jsx("span", { className: "font-mono", children: call.label })] }), tone: call.status === "error" ? "error" : "neutral", trailing: _jsxs(_Fragment, { children: [call.exitCode === undefined ? null : (_jsxs(Badge, { size: "sm", tone: "error", children: ["exit ", String(call.exitCode)] })), call.durationMs === undefined ? null : (_jsx("span", { children: formatToolDuration(call.durationMs) })), _jsx(Status, { motion: running ? "bounce" : "none", title: call.status === "unknown" ? "result unavailable" : call.status, tone: statusTone(call.status) })] }), children: _jsx(CallBody, { call: call, disclosure: disclosure, onToggle: onToggle, mediaClaimed: tool !== undefined && claimsToolMedia?.(tool) === true, tool: tool }) }), call.live === undefined ? null : (_jsx("pre", { className: monoBlock, "aria-label": "Live tool output", children: toolLiveLines(call, open).map((line, index) => (_jsx("span", { className: "block whitespace-pre", children: line || "\u00a0" }, String(index)))) })), call.status === "completed" && tool?.result !== undefined
                 ? renderToolActions?.(tool)
                 : null] }));
 }

package/dist/conversation-opening.d.ts

@@ -41,7 +41,7 @@ export declare function createConversationOpeningOwner<Session extends ParakeetS
     /** Only the primary conversation is the selection the host shell sees. */
     reportsSelection?: boolean;
 }>): {
-    select: (agentId: string, sessionId: string, fromOpenRequest?: boolean, waitForBaseline?: boolean) => void;
+    select: (agentId: string, sessionId: string, fromOpenRequest?: boolean) => void;
     clear: () => void;
     close: () => void;
 };

package/dist/conversation-opening.js

@@ -68,7 +68,7 @@ export function createConversationOpeningOwner(options) {
     let disposed = false;
     const same = (left, right) => left?.agentId === right.agentId && left.sessionId === right.sessionId;
     const isCurrent = (opening) => !disposed && pending === opening;
-    const select = (agentId, sessionId, fromOpenRequest = false, waitForBaseline = true) => {
+    const select = (agentId, sessionId, fromOpenRequest = false) => {
         if (disposed)
             return;
         const selection = { agentId, sessionId };
@@ -114,7 +114,7 @@ export function createConversationOpeningOwner(options) {
                     void Promise.allSettled([client.close(), transport.close()]);
                 };
                 await observation.ready;
-                if (waitForBaseline && options.reportsSelection !== false) {
+                if (options.reportsSelection !== false) {
                     await connection.ui.reportAgentSessionSelection({
                         agentId,
                         sessionId,

package/dist/conversation.js

@@ -9,6 +9,7 @@ import { atom, createStore, } from "jotai/vanilla";
 import { atomWithInfiniteQuery, atomWithMutation, atomWithQuery, } from "jotai-tanstack-query";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore, } from "react";
 import { buildDurableTimeline, buildTimelineTail, } from "./core/build-timeline.js";
+import { overlayToolOutput } from "./core/tool-groups.js";
 import { mergeCompactionNotices, mergeCompactions, mergeMessages, } from "./core/session-projection.js";
 import { sessionHistoryQueryOptions, sessionQueryOptions, } from "./core/session-query.js";
 import { sameSessionViewState, sessionActivityStatus, sessionViewState, } from "./core/session-view-state.js";
@@ -100,12 +101,15 @@ function acquireDraftStorage(supplied) {
         const browser = globalThis;
         const storage = browser.localStorage;
         return storage === undefined
-            ? { status: "unavailable" }
+            ? {
+                status: "unavailable",
+                cause: new Error("Browser draft storage is unavailable"),
+            }
             : { status: "available", storage };
     }
-    catch {
+    catch (cause) {
         // An opaque-origin sandbox denies even reading the browser's getter.
-        return { status: "unavailable" };
+        return { status: "unavailable", cause };
     }
 }
 function createConversationAtoms(session, queryClient, authorOf, interactions, draftStorage, draftScope, contributions, shown) {
@@ -535,7 +539,9 @@ function createConversationAtoms(session, queryClient, authorOf, interactions, d
             hasMoreHistory: get(hasMoreHistoryAtom),
             hasNewerHistory: get(hasNewerHistoryAtom),
             loadingOlderHistory: get(loadingOlderHistoryAtom),
-            settled: durable.items,
+            settled: overlayToolOutput(durable.items, get(toolActivityAtom) === undefined
+                ? []
+                : (get(snapshotAtom)?.toolOutput ?? [])),
             tail: get(tailAtom),
         };
         return durable.model === undefined || durable.usage === undefined
@@ -1125,11 +1131,8 @@ export function ParakeetProvider({ children, session, clients = noClients, inter
     }, [scope, onToast]);
     useEffect(() => {
         if (acquiredDraftStorage.status === "unavailable")
-            scope.interactions.report({
-                tone: "info",
-                message: "Drafts are session-only because browser storage is unavailable. They will be lost when this conversation closes.",
-            });
-    }, [scope, acquiredDraftStorage]);
+            reportFailure("acquire draft storage", acquiredDraftStorage.cause);
+    }, [acquiredDraftStorage]);
     useEffect(() => {
         const reconcile = () => {
             scope.store.set(scope.atoms.reconcileQueuedCancellationAtom);

package/dist/core/build-timeline.js

@@ -53,11 +53,14 @@ function progressItem(progress) {
         id: progress.messageId,
         kind: "assistant_message",
         pending: true,
-        text: progress.text,
+        text: `${progress.textTruncated ? "…" : ""}${progress.text}`,
     };
     return progress.thinking === ""
         ? base
-        : { ...base, thinking: progress.thinking };
+        : {
+            ...base,
+            thinking: `${progress.thinkingTruncated ? "…" : ""}${progress.thinking}`,
+        };
 }
 function collectAssistantBlocks(value) {
     const text = [];

package/dist/core/composer-model-name.d.ts

@@ -0,0 +1,3 @@
+import type { ParakeetModel } from "../conversation.js";
+/** A maintained catalog label, or the real identity rather than a guessed name. */
+export declare function composerModelName(model: ParakeetModel): string;

package/dist/core/composer-model-name.js

@@ -0,0 +1,21 @@
+import { ANTHROPIC_MODELS } from "@earendil-works/pi-ai/providers/anthropic.models";
+import { CLOUDFLARE_WORKERS_AI_MODELS } from "@earendil-works/pi-ai/providers/cloudflare-workers-ai.models";
+import { OPENAI_MODELS } from "@earendil-works/pi-ai/providers/openai.models";
+import { OPENAI_CODEX_MODELS } from "@earendil-works/pi-ai/providers/openai-codex.models";
+import { formatModelIdentity } from "./model-identity.js";
+// Read the same maintained metadata as the providers, without loading their
+// execution/auth adapters or maintaining another table of display names.
+const names = new Map([
+    ...Object.values(ANTHROPIC_MODELS),
+    ...Object.values(CLOUDFLARE_WORKERS_AI_MODELS),
+    ...Object.values(OPENAI_MODELS),
+    ...Object.values(OPENAI_CODEX_MODELS),
+].map((model) => [
+    formatModelIdentity({ provider: model.provider, model: model.id }),
+    model.name,
+]));
+/** A maintained catalog label, or the real identity rather than a guessed name. */
+export function composerModelName(model) {
+    const identity = formatModelIdentity(model);
+    return names.get(identity) ?? identity;
+}

package/dist/core/display-text.d.ts

@@ -0,0 +1,2 @@
+/** Display text keeps shaping characters, never terminal programs or bidi overrides. */
+export declare function sanitizeDisplayText(value: string): string;

package/dist/core/display-text.js

@@ -0,0 +1,7 @@
+import stripAnsi from "strip-ansi";
+/** Display text keeps shaping characters, never terminal programs or bidi overrides. */
+export function sanitizeDisplayText(value) {
+    return stripAnsi(value)
+        .replace(/\r\n?/gu, "\n")
+        .replace(/[\p{Cc}\u200b\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069\u2060\ufeff]/gu, (character) => character === "\n" || character === "\t" ? character : "");
+}

package/dist/core/draft-storage.d.ts

@@ -12,6 +12,8 @@ export type ParakeetDraftStorage = Readonly<{
     getItem: (key: string) => string | null;
     /** Atomically replace the journal; throw if it cannot be committed. */
     setItem: (key: string, value: string) => void;
+    /** Remove a journal, doing nothing when the key is absent. */
+    removeItem: (key: string) => void;
 }>;
 declare const journal: z.ZodObject<{
     draft: z.ZodString;

package/dist/core/draft-storage.js

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { reportFailure } from "../lib/failure.js";
 const images = z
     .array(z.object({
     type: z.literal("image"),
@@ -33,18 +34,30 @@ const journal = z.object({
 /** One owner-scoped journal commits pending text and composer text together. */
 export function draftJournal(scope, storage) {
     const key = `fungi.parakeet.drafts.v2:${scope}`;
+    let discardObsolete = true;
     return {
         read() {
             if (storage === undefined)
                 return { draft: "", pending: [] };
+            if (discardObsolete) {
+                discardObsolete = false;
+                try {
+                    // Delete preview data without interpreting its superseded grammar.
+                    storage.removeItem(`fungi.parakeet.drafts.v1:${scope}`);
+                }
+                catch (cause) {
+                    reportFailure("discard obsolete draft journal", cause);
+                }
+            }
             try {
                 const saved = storage.getItem(key);
                 return saved === null
                     ? { draft: "", pending: [] }
                     : journal.parse(JSON.parse(saved));
             }
-            catch {
+            catch (cause) {
                 // Preview journals are disposable; a broken load must not break chat.
+                reportFailure("read saved draft", cause);
                 return { draft: "", pending: [] };
             }
         },