@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/blocks/cards/DisplayCard.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MonitorPlay } from "lucide-react";
+function BarChart({ payload }) {
+    const data = Array.isArray(payload.data) ? payload.data : [];
+    if (data.length === 0)
+        return null;
+    const max = Math.max(...data.map((v) => Math.abs(v)), 1);
+    return (_jsx("div", { className: "flex items-end gap-2 pt-1", "data-cmp": "ai/display-bar", children: data.map((v, i) => (_jsxs("div", { className: "flex flex-1 flex-col items-center gap-1", children: [_jsx("span", { className: "text-micro tabular-nums text-foreground/80", children: v }), _jsx("div", { className: "w-full rounded-sm bg-[color-mix(in_srgb,var(--accent-primary)_22%,var(--surface-600))] transition-[height] duration-300", style: { height: `${Math.max(3, (Math.abs(v) / max) * 34)}px` }, title: String(v) }), _jsx("span", { className: "text-micro text-muted-foreground", children: payload.labels?.[i] ?? i + 1 })] }, i))) }));
+}
+export function DisplayCard({ part, renderDisplay }) {
+    const payload = part.payload;
+    const isBar = (part.view === "chart" && payload?.type === "bar") ||
+        (part.view === "bar" && Array.isArray(payload?.data));
+    return (_jsxs("div", { className: "ac-card", "data-cmp": "ai/display-card", "data-view": part.view, children: [_jsxs("div", { className: "ac-card__head", children: [_jsx(MonitorPlay, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "ac-card__title", children: part.title ?? `${part.view} 展示` })] }), _jsx("div", { className: "ac-card__body", children: renderDisplay ? (renderDisplay(part)) : isBar ? (_jsx(BarChart, { payload: payload ?? {} })) : (_jsx("pre", { className: "max-h-48 overflow-y-auto whitespace-pre-wrap break-all font-mono text-meta text-muted-foreground", children: summarizePayload(part.payload) })) })] }));
+}
+function summarizePayload(payload) {
+    if (payload == null)
+        return "（无载荷）";
+    if (typeof payload === "string")
+        return payload;
+    try {
+        return JSON.stringify(payload, null, 2);
+    }
+    catch {
+        return String(payload);
+    }
+}

package/lib/blocks/cards/MemoryPill.d.ts

@@ -0,0 +1,5 @@
+import type { MemoryPart } from "../../types/message";
+export interface MemoryPillProps {
+    part: MemoryPart;
+}
+export declare function MemoryPill({ part }: MemoryPillProps): import("react").JSX.Element;

package/lib/blocks/cards/MemoryPill.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Database } from "lucide-react";
+export function MemoryPill({ part }) {
+    return (_jsxs("div", { className: "ac-memory", "data-cmp": "ac/memory-pill", children: [_jsx(Database, { "aria-hidden": "true", size: 12 }), _jsxs("span", { className: "ac-memory__count", children: ["\u8BB0\u5FC6 \u00D7", part.count] }), _jsx("span", { className: "ac-memory__excerpt", title: part.excerpt, children: part.excerpt })] }));
+}

package/lib/blocks/cards/OutputCard.d.ts

@@ -0,0 +1,5 @@
+import type { OutputPart } from "../../types/message";
+export interface OutputCardProps {
+    part: OutputPart;
+}
+export declare function OutputCard({ part }: OutputCardProps): import("react").JSX.Element;

package/lib/blocks/cards/OutputCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Link2, Braces, Type } from "lucide-react";
+const KIND_META = {
+    text: { icon: Type, label: "文本输出" },
+    file: { icon: FileText, label: "文件产物" },
+    link: { icon: Link2, label: "链接产物" },
+    json: { icon: Braces, label: "JSON 产物" },
+};
+export function OutputCard({ part }) {
+    const meta = KIND_META[part.outputKind] ?? KIND_META.text;
+    const Icon = meta.icon;
+    return (_jsxs("div", { className: "ac-card", "data-cmp": "ai/output-card", "data-output-kind": part.outputKind, children: [_jsxs("div", { className: "ac-card__head", children: [_jsx(Icon, { className: "size-3.5 text-muted-foreground" }), _jsx("span", { className: "ac-card__title", children: part.label ?? meta.label })] }), _jsx("div", { className: "ac-card__body", children: part.outputKind === "link" ? (_jsx("a", { href: part.value, target: "_blank", rel: "noreferrer", className: "break-all text-body underline", children: part.value })) : part.outputKind === "file" ? (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-secondary/50 px-2 py-1 font-mono text-meta", children: [_jsx(FileText, { className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: part.value })] })) : (_jsx("pre", { className: "max-h-48 overflow-y-auto whitespace-pre-wrap break-all font-mono text-meta text-muted-foreground", children: part.value })) })] }));
+}

package/lib/blocks/cards/PermissionCard.d.ts

@@ -0,0 +1,21 @@
+export type PermissionRisk = "low" | "medium" | "high";
+export type PermissionScope = "once" | "session" | "project";
+export interface PermissionCardProps {
+    tool: string;
+    reason?: string;
+    detail?: string;
+    risk?: PermissionRisk;
+    agent?: {
+        id: string;
+        name?: string;
+    };
+    queue?: {
+        index: number;
+        total: number;
+    };
+    onApproveRest?: () => void;
+    onRespond: (approved: boolean, remembered: boolean, scope?: PermissionScope) => void;
+    "data-cmp"?: string;
+    className?: string;
+}
+export declare function PermissionCard({ tool, reason, detail, risk, agent, queue, onApproveRest, onRespond, className, ...props }: PermissionCardProps): import("react").JSX.Element;

package/lib/blocks/cards/PermissionCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, Check, ChevronDown, Cpu, ShieldCheck, } from "lucide-react";
+import { cn } from "../../utils/cn";
+export function PermissionCard({ tool, reason, detail, risk = "medium", agent, queue, onApproveRest, onRespond, className, ...props }) {
+    const [expanded, setExpanded] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const requester = agent ? agent.name?.trim() || agent.id : undefined;
+    const showQueue = queue !== undefined && queue.total > 1;
+    const showApproveRest = showQueue && queue.index === 1 && onApproveRest !== undefined;
+    const lines = (detail ?? "").split("\n").filter(Boolean);
+    const summary = lines[0] ?? "";
+    const hasMore = lines.length > 1;
+    return (_jsxs("div", { "data-cmp": props["data-cmp"] ?? "ai/permission-card", "data-id": "permission-card", "data-state": "pending", "data-risk": risk, "data-queue-index": queue?.index, "data-queue-total": queue?.total, className: cn("ac-perm", className), children: [_jsxs("div", { className: "ac-perm__head", children: [_jsx(Cpu, { className: "ac-perm__head-icon" }), _jsxs("span", { className: "ac-perm__title", children: [requester ? `${requester} ` : "", "\u8BF7\u6C42\u6267\u884C", _jsx("code", { className: "ac-perm__tool", children: tool })] }), risk === "high" ? (_jsx(AlertTriangle, { className: "ac-perm__risk-icon", "aria-label": "\u9AD8\u98CE\u9669\u64CD\u4F5C" })) : null, showQueue ? (_jsxs("span", { className: "ac-perm__queue", children: [_jsx(ShieldCheck, { className: "size-3" }), queue.index, "/", queue.total, showApproveRest ? (_jsx("button", { type: "button", "data-cmp": "ai/permission-approve-rest", className: "ac-perm__rest", onClick: onApproveRest, children: "\u5176\u4F59\u5168\u6279" })) : null] })) : null] }), detail ? (_jsxs("div", { className: "ac-perm__detail", "data-cmp": "ai/permission-detail", children: [_jsx("code", { className: cn("ac-perm__line", !expanded && "is-clamped"), children: expanded ? detail : summary }), hasMore || reason ? (_jsx("button", { type: "button", className: "ac-perm__more", onClick: () => setExpanded((v) => !v), title: reason ?? undefined, children: expanded
+                            ? "收起"
+                            : hasMore
+                                ? `+${lines.length - 1} 项`
+                                : "详情" })) : null] })) : null, expanded && reason ? (_jsx("p", { className: "ac-perm__reason", children: reason })) : null, _jsxs("div", { className: "ac-perm__actions", children: [_jsx("button", { type: "button", "data-cmp": "ai/permission-deny", className: "ac-perm__deny", onClick: () => onRespond(false, false), children: "\u62D2\u7EDD" }), _jsxs("div", { className: "ac-perm__primary", children: [_jsxs("button", { type: "button", "data-cmp": "ai/permission-approve", className: "ac-perm__btn ac-perm__btn--primary", onClick: () => onRespond(true, false), children: [_jsx(Check, { className: "size-3.5" }), "\u5141\u8BB8"] }), _jsx("button", { type: "button", "data-cmp": "ai/permission-scope", className: "ac-perm__btn ac-perm__btn--scope", "aria-label": "\u5141\u8BB8\u5E76\u8BB0\u4F4F", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: () => setMenuOpen((v) => !v), children: _jsx(ChevronDown, { className: "size-3" }) }), menuOpen ? (_jsx("div", { role: "menu", className: "ac-perm__menu", children: [
+                                    { v: "once", t: "仅本次", d: "" },
+                                    { v: "session", t: "本会话内都允许", d: "" },
+                                    { v: "project", t: "本项目内都允许", d: "" },
+                                ].map((opt) => (_jsx("button", { type: "button", role: "menuitem", className: "ac-perm__menu-item", onClick: () => {
+                                        setMenuOpen(false);
+                                        onRespond(true, opt.v !== "once", opt.v);
+                                    }, children: opt.t }, opt.v))) })) : null] })] })] }));
+}

package/lib/blocks/cards/SpringCheck.d.ts

@@ -0,0 +1,9 @@
+export interface SpringCheckProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    doneOpacity?: number;
+    className?: string;
+}
+export declare function SpringCheck({ checked, onChange, label, disabled, doneOpacity, className, }: SpringCheckProps): import("react").JSX.Element;

package/lib/blocks/cards/SpringCheck.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn } from "../../utils/cn";
+export function SpringCheck({ checked, onChange, label, disabled = false, doneOpacity = 0.42, className, }) {
+    const [bouncing, setBouncing] = useState(false);
+    const timer = useRef(0);
+    return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked, disabled: disabled, "data-cmp": "ai/spring-check", "data-state": checked ? "checked" : "idle", className: cn("flex items-center gap-2 text-left", disabled && "pointer-events-none opacity-40", className), onClick: () => {
+            setBouncing(true);
+            window.clearTimeout(timer.current);
+            timer.current = window.setTimeout(() => setBouncing(false), 380);
+            onChange(!checked);
+        }, children: [_jsx("span", { className: cn("relative grid size-[18px] shrink-0 place-items-center rounded-[5px] border transition-colors duration-200", checked
+                    ? "border-transparent"
+                    : "border-[var(--border-500)] bg-transparent", bouncing && "spring-check__bounce"), style: checked
+                    ? { background: "var(--accent-success)" }
+                    : undefined, children: checked ? (_jsx("svg", { viewBox: "0 0 16 16", className: "spring-check__tick", width: 12, height: 12, "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5 L6.8 11.8 L12.5 5.2", fill: "none", stroke: "var(--surface-950)", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) })) : null }), _jsx("span", { className: cn("relative text-body leading-snug transition-opacity duration-300", checked && "spring-check__struck"), style: checked ? { opacity: doneOpacity } : undefined, children: label })] }));
+}

package/lib/blocks/cards/TodoCard.d.ts

@@ -0,0 +1,19 @@
+export type TodoStatus = "pending" | "in_progress" | "blocked" | "completed";
+export interface TodoEntry {
+    id: string;
+    content: string;
+    status: TodoStatus;
+    blocker?: string | null;
+}
+export interface TodoState {
+    revision: number;
+    todos: TodoEntry[];
+}
+export declare function mergeTodoState(prev: TodoState | null, next: TodoState | null): TodoState | null;
+export declare function blockerNote(todo: TodoEntry): string | null;
+export interface TodoCardProps {
+    state: TodoState | null;
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare function TodoCard({ state, defaultOpen, className, }: TodoCardProps): import("react").JSX.Element | null;

package/lib/blocks/cards/TodoCard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, ListChecks } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { SpringCheck } from "./SpringCheck";
+export function mergeTodoState(prev, next) {
+    if (!next)
+        return prev;
+    if (prev && next.revision < prev.revision)
+        return prev;
+    if (prev && next.revision === prev.revision)
+        return prev;
+    return next;
+}
+export function blockerNote(todo) {
+    return todo.blocker && todo.blocker.length > 0 ? todo.blocker : null;
+}
+export function TodoCard({ state, defaultOpen = false, className, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const [, setFlash] = useState({});
+    if (!state || state.todos.length === 0)
+        return null;
+    const total = state.todos.length;
+    const done = state.todos.filter((t) => t.status === "completed").length;
+    return (_jsxs("div", { className: cn("ac-todo-pill", className), "data-cmp": "ac/todo-card", "data-id": "todo-card", "data-state": open ? "open" : "collapsed", children: [_jsxs("button", { type: "button", "data-cmp": "ac/todo-toggle", "aria-expanded": open, className: "ac-todo-pill__chip", title: `任务清单 ${done}/${total} · rev ${state.revision}`, onClick: () => setOpen((v) => !v), children: [_jsx(ListChecks, { className: "size-3.5" }), _jsx("span", { className: "ac-todo-pill__label", children: "\u4EFB\u52A1\u6E05\u5355" }), _jsxs("span", { className: "ac-todo-pill__count", children: [done, "/", total] }), _jsx("span", { className: "ac-todo-pill__bar", children: _jsx("span", { className: "ac-todo-pill__fill", style: { width: `${total > 0 ? (done / total) * 100 : 0}%` } }) }), _jsx(ChevronDown, { className: cn("size-3 transition-transform duration-200", open && "rotate-180") })] }), open ? (_jsxs("div", { className: "ac-todo-pill__panel", "data-cmp": "ac/todo-list", children: [_jsx("div", { className: "ac-todo-pill__head", children: _jsxs("span", { children: ["rev ", state.revision] }) }), _jsx("ul", { className: "space-y-1", children: state.todos.map((item) => (_jsxs("li", { "data-cmp": "ac/todo-item", "data-status": item.status, children: [_jsx(SpringCheck, { checked: item.status === "completed", onChange: () => {
+                                        setFlash((f) => ({ ...f, [item.id]: true }));
+                                    }, label: item.content, disabled: item.status === "blocked" }), blockerNote(item) ? (_jsxs("div", { className: "pl-6 text-micro text-[var(--accent-danger)]", children: ["\u963B\u585E\uFF1A", blockerNote(item)] })) : item.status === "in_progress" ? (_jsx("div", { className: "pl-6 text-micro text-muted-foreground", children: "\u8FDB\u884C\u4E2D" })) : null] }, item.id))) })] })) : null] }));
+}

package/lib/blocks/cards/index.d.ts

@@ -0,0 +1,10 @@
+export { CompactionCard, type CompactionCardProps } from "./CompactionCard";
+export { MemoryPill, type MemoryPillProps } from "./MemoryPill";
+export { PermissionCard, type PermissionCardProps, } from "./PermissionCard";
+export { ContextUsage, formatTokens, type ContextUsageProps, } from "./ContextUsage";
+export { AskCard, type AskCardProps } from "./AskCard";
+export { isBatchAsk } from "../../domain/ask";
+export { TodoCard, mergeTodoState, blockerNote, type TodoCardProps, type TodoEntry, type TodoState, type TodoStatus, } from "./TodoCard";
+export { SpringCheck, type SpringCheckProps } from "./SpringCheck";
+export { DisplayCard, type DisplayCardProps } from "./DisplayCard";
+export { OutputCard, type OutputCardProps } from "./OutputCard";

package/lib/blocks/cards/index.js

@@ -0,0 +1,10 @@
+export { CompactionCard } from "./CompactionCard";
+export { MemoryPill } from "./MemoryPill";
+export { PermissionCard, } from "./PermissionCard";
+export { ContextUsage, formatTokens, } from "./ContextUsage";
+export { AskCard } from "./AskCard";
+export { isBatchAsk } from "../../domain/ask";
+export { TodoCard, mergeTodoState, blockerNote, } from "./TodoCard";
+export { SpringCheck } from "./SpringCheck";
+export { DisplayCard } from "./DisplayCard";
+export { OutputCard } from "./OutputCard";

package/lib/blocks/composer/Composer.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from "react";
+import type { Attachment } from "../../types/message";
+import type { ContextUsageSegment, ContextWindowPreset } from "../../types/message";
+import type { ConversationStatus, PendingAsk } from "../../types/conversation";
+import type { Agent } from "../../types/agent";
+import type { ComposerModelSwitch, ComposerPaletteLike, ComposerSubmitApi, PermissionModeSwitch, QueuedPromptsApi, SlashCommand } from "../../types/composer";
+import { focusFieldAt } from "./ComposerInput";
+import { type StagedAttachment } from "./ComposerAttachments";
+export type { ComposerModelSwitch, PermissionModeSwitch };
+export interface ComposerProps {
+    value: string;
+    onChange: (v: string) => void;
+    members: Agent[];
+    status: ConversationStatus;
+    conversationId: string;
+    onSend: (text: string, attachments?: Attachment[]) => void;
+    onStop?: () => void;
+    onNotice?: (message: string) => void;
+    onNewConversation?: () => void;
+    onOpenProfile?: () => void;
+    modelSwitch?: ComposerModelSwitch;
+    permissionMode?: PermissionModeSwitch;
+    slashExtra?: readonly SlashCommand[];
+    slashExpand?: (draft: string) => string | null;
+    contextUsage?: {
+        input: number;
+        output?: number;
+        window: number;
+        breakdown?: readonly ContextUsageSegment[];
+        windowPresets?: readonly ContextWindowPreset[];
+        onWindowChange?: (window: number) => void;
+    };
+    pendingAsk?: PendingAsk | null;
+    askQueued?: number;
+    onAnswerAsk?: (callId: string, answer: string) => void;
+    onSkipAsk?: (callId: string) => void;
+    palette: ComposerPaletteLike;
+    submission: ComposerSubmitApi;
+    queued?: QueuedPromptsApi;
+    stagedAttachments?: readonly StagedAttachment[];
+    onRemoveAttachment?: (id: string) => void;
+    attachmentPicker?: ReactNode;
+    attachmentHeader?: ReactNode;
+    dragHandlers?: {
+        onPaste?: (e: React.ClipboardEvent) => void;
+        onDragOver?: (e: React.DragEvent) => void;
+        onDrop?: (e: React.DragEvent) => void;
+    };
+    visionTag?: ReactNode;
+    onMic?: () => void;
+    micState?: "idle" | "listening";
+    toolbarTrailing?: ReactNode;
+    onArrowUp?: () => boolean;
+    onArrowDown?: () => boolean;
+}
+export declare function Composer(props: ComposerProps): import("react").JSX.Element;
+export { focusFieldAt };
+export type { ComposerPaletteLike, StagedAttachment, ComposerSubmitApi, QueuedPromptsApi };
+export { ComposerAttachmentsStrip, VisionTag } from "./ComposerAttachments";
+export { ComposerModelChip, ComposerPermChip, } from "./ComposerMenus";
+export { ComposerGrip } from "./ComposerGrip";
+export { ComposerInput } from "./ComposerInput";
+export { ComposerToolbar } from "./ComposerToolbar";
+export { MentionPicker } from "./MentionPicker";
+export { PromptPop, type PromptPopProps } from "./PromptPop";
+export { QueuedPrompts, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, type QueuedPromptsProps, } from "./QueuedPrompts";

package/lib/blocks/composer/Composer.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, } from "react";
+import { AskCard } from "../cards/AskCard";
+import { ComposerGrip } from "./ComposerGrip";
+import { ComposerInput, focusFieldAt } from "./ComposerInput";
+import { ComposerToolbar } from "./ComposerToolbar";
+import { MentionPicker } from "./MentionPicker";
+import { QueuedPrompts } from "./QueuedPrompts";
+import { ComposerAttachmentsStrip, } from "./ComposerAttachments";
+function askPlaceholder(ask) {
+    if (!ask || ask.questions.length > 0)
+        return undefined;
+    return `回答：${ask.prompt.slice(0, 24)}`;
+}
+export function Composer(props) {
+    const { value, onChange, status, onSend: _onSend, onStop, onNotice: _onNotice, onOpenProfile, modelSwitch, permissionMode, contextUsage, pendingAsk, askQueued = 0, onAnswerAsk, onSkipAsk, palette, submission, queued, stagedAttachments, onRemoveAttachment, attachmentPicker, attachmentHeader, dragHandlers, visionTag, onMic, micState, toolbarTrailing, onArrowUp, onArrowDown, } = props;
+    const _members = props.members;
+    const _conversationId = props.conversationId;
+    const _onNewConversation = props.onNewConversation;
+    void _members;
+    void _conversationId;
+    void _onNewConversation;
+    const fieldRef = useRef(null);
+    const draftBeforeAsk = useRef("");
+    const answering = pendingAsk != null &&
+        onAnswerAsk !== undefined &&
+        pendingAsk.questions.length === 0;
+    useEffect(() => {
+        if (answering) {
+            draftBeforeAsk.current = value;
+            onChange("");
+            focusFieldAt(fieldRef, 0);
+            return;
+        }
+        if (draftBeforeAsk.current.length > 0) {
+            onChange(draftBeforeAsk.current);
+            focusFieldAt(fieldRef, draftBeforeAsk.current.length);
+            draftBeforeAsk.current = "";
+        }
+    }, [answering]);
+    const empty = value.trim().length === 0 && (stagedAttachments?.length ?? 0) === 0;
+    const canStop = status === "streaming" && onStop !== undefined;
+    const submitForInput = () => {
+        if (answering && pendingAsk && onAnswerAsk) {
+            const answer = value.trim();
+            if (answer.length === 0)
+                return;
+            onAnswerAsk(pendingAsk.callId, answer);
+            onChange("");
+            palette.close();
+            return;
+        }
+        submission.submitOrQueue();
+    };
+    return (_jsxs("div", { className: `ac-composer${answering ? " is-gated" : ""}`, "data-cmp": "ac/composer", "data-id": "composer", "data-ctx": "ac.composer", "data-state": answering ? "answering" : status, onPaste: dragHandlers?.onPaste, onDragOver: dragHandlers?.onDragOver, onDrop: dragHandlers?.onDrop, children: [pendingAsk != null && onAnswerAsk !== undefined ? (_jsx(AskCard, { ask: pendingAsk, queued: askQueued, onAnswer: (text) => onAnswerAsk(pendingAsk.callId, text), onSkip: onSkipAsk ? () => onSkipAsk(pendingAsk.callId) : undefined })) : null, queued ? (_jsx(QueuedPrompts, { items: queued.items, canSendNow: onStop !== undefined, onMoveUp: queued.moveUp, onMoveDown: queued.moveDown, onSendNow: queued.sendNow, onEdit: (id) => {
+                    const text = queued.edit(id);
+                    if (text != null) {
+                        onChange(text);
+                        focusFieldAt(fieldRef, text.length);
+                    }
+                }, onRemove: queued.remove, onClear: queued.items.length > 1
+                    ? () => queued.items.forEach((it) => queued.remove(it.id))
+                    : undefined })) : null, _jsxs("div", { className: "ac-composer__card", "data-region": "ac.composer-card", children: [attachmentHeader ?? (_jsx(ComposerAttachmentsStrip, { items: stagedAttachments ?? [], onRemove: (id) => onRemoveAttachment?.(id), visionTag: visionTag })), _jsx(ComposerGrip, {}), _jsx(ComposerInput, { fieldRef: fieldRef, value: value, onChange: onChange, palette: palette, onAccept: submission.pick, onSubmit: submitForInput, answering: answering, placeholder: answering ? askPlaceholder(pendingAsk) : undefined, onArrowUp: answering ? undefined : onArrowUp, onArrowDown: answering ? undefined : onArrowDown }), _jsxs("div", { className: "ac-composer__dock", children: [_jsx(MentionPicker, { open: palette.open, trigger: palette.token?.trigger ?? null, selectedAgent: palette.selectedAgent, items: palette.items, index: palette.index, onMove: palette.move, onPick: submission.pick }), _jsx(ComposerToolbar, { picker: attachmentPicker ?? (_jsx("span", { className: "ac-attach__pick" })), permissionMode: permissionMode, modelSwitch: modelSwitch, onManageModel: onOpenProfile, streaming: status === "streaming", canStop: canStop, empty: empty, onStop: onStop, onSubmit: submitForInput, contextUsage: contextUsage, visionTag: visionTag ?? null, onMic: onMic, micState: micState, trailing: toolbarTrailing })] })] })] }));
+}
+export { focusFieldAt };
+export { ComposerAttachmentsStrip, VisionTag } from "./ComposerAttachments";
+export { ComposerModelChip, ComposerPermChip, } from "./ComposerMenus";
+export { ComposerGrip } from "./ComposerGrip";
+export { ComposerInput } from "./ComposerInput";
+export { ComposerToolbar } from "./ComposerToolbar";
+export { MentionPicker } from "./MentionPicker";
+export { PromptPop } from "./PromptPop";
+export { QueuedPrompts, MAX_QUEUED_PROMPTS, QUEUED_FULL_NOTICE, } from "./QueuedPrompts";

package/lib/blocks/composer/ComposerAttachments.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface StagedAttachment {
+    id: string;
+    name: string;
+    url: string;
+    kind: "image" | "video" | "file";
+}
+export interface ComposerAttachmentsStripProps {
+    items: readonly StagedAttachment[];
+    onRemove: (id: string) => void;
+    visionTag?: ReactNode;
+}
+export declare function ComposerAttachmentsStrip({ items, onRemove, visionTag, }: ComposerAttachmentsStripProps): import("react").JSX.Element | null;
+export declare function VisionTag({ short, full, }: {
+    short?: string;
+    full: string;
+}): import("react").JSX.Element;

package/lib/blocks/composer/ComposerAttachments.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, ImageIcon, X } from "lucide-react";
+export function ComposerAttachmentsStrip({ items, onRemove, visionTag, }) {
+    if (items.length === 0 && !visionTag)
+        return null;
+    return (_jsxs("div", { className: "ac-attach__strip", "data-cmp": "ac/attachments", "data-id": "attachments", children: [items.map((item) => (_jsxs("span", { className: "ac-attach__chip", "data-kind": item.kind, children: [item.kind === "image" ? (_jsx("img", { className: "ac-attach__chip-thumb", src: item.url, alt: "" })) : item.kind === "video" ? (_jsx(ImageIcon, { className: "ac-attach__chip-icon" })) : (_jsx(FileText, { className: "ac-attach__chip-icon" })), _jsx("span", { className: "ac-attach__chip-name", children: item.name }), _jsx("button", { type: "button", className: "ac-attach__remove", "aria-label": `移除 ${item.name}`, onClick: () => onRemove(item.id), children: _jsx(X, { size: 10 }) })] }, item.id))), visionTag ? (_jsx("span", { className: "ac-attach__note", "data-tone": "warn", children: visionTag })) : null] }));
+}
+export function VisionTag({ short = "仅限文本", full, }) {
+    return (_jsx("span", { className: "ac-vision-tag", "data-state": "no", title: full, children: short }));
+}

package/lib/blocks/composer/ComposerGrip.d.ts

@@ -0,0 +1 @@
+export declare function ComposerGrip(): import("react").JSX.Element;

package/lib/blocks/composer/ComposerGrip.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState, } from "react";
+import { useDisplayStore } from "../../stores/display-store";
+import { WIDTH_MAX, WIDTH_MIN } from "../../types/display";
+const STEP = 24;
+export function ComposerGrip() {
+    const [dragging, setDragging] = useState(false);
+    const startRef = useRef({ x: 0, w: 0 });
+    const setComposerWidthPx = useDisplayStore((s) => s.setComposerWidthPx);
+    const onPointerDown = useCallback((e) => {
+        const card = e.currentTarget.closest(".ac-composer__card");
+        if (!card)
+            return;
+        startRef.current = { x: e.clientX, w: card.offsetWidth };
+        setDragging(true);
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch {
+            return;
+        }
+    }, []);
+    const onPointerMove = useCallback((e) => {
+        if (!dragging)
+            return;
+        const { x, w } = startRef.current;
+        const next = Math.max(WIDTH_MIN, Math.min(WIDTH_MAX, w + (e.clientX - x) * 2));
+        setComposerWidthPx(next);
+    }, [dragging, setComposerWidthPx]);
+    const endDrag = useCallback(() => setDragging(false), []);
+    return (_jsx("button", { type: "button", className: "ac-composer__grip", "data-cmp": "ac/composer-grip", "data-id": "composer-grip", "data-dragging": dragging ? "true" : undefined, role: "separator", "aria-orientation": "horizontal", "aria-valuemin": WIDTH_MIN, "aria-valuemax": WIDTH_MAX, "aria-label": "\u62D6\u52A8\u8C03\u6574\u8F93\u5165\u6846\u5BBD\u5EA6", title: "\u5DE6\u53F3\u62D6\u52A8\u8C03\u6574\u8F93\u5165\u6846\u5BBD\u5EA6 \u00B7 \u53CC\u51FB\u8FD8\u539F\u6863\u4F4D", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onDoubleClick: () => setComposerWidthPx(null), onKeyDown: (e) => {
+            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                return;
+            e.preventDefault();
+            const card = e.currentTarget.closest(".ac-composer__card");
+            const base = card?.offsetWidth ?? WIDTH_MIN;
+            setComposerWidthPx(base + (e.key === "ArrowRight" ? STEP : -STEP));
+        } }));
+}

package/lib/blocks/composer/ComposerInput.d.ts

@@ -0,0 +1,18 @@
+import { type RefObject } from "react";
+import type { PaletteItem, SlashCommand } from "../../types/composer";
+export declare function focusFieldAt(fieldRef: RefObject<HTMLTextAreaElement | null>, pos: number): void;
+export interface ComposerInputProps {
+    fieldRef: RefObject<HTMLTextAreaElement | null>;
+    value: string;
+    onChange: (v: string) => void;
+    palette: import("../../types/composer").ComposerPaletteLike;
+    onAccept: (item: PaletteItem) => void;
+    onSubmit: () => void;
+    answering?: boolean;
+    placeholder?: string;
+    onArrowUp?: () => boolean;
+    onArrowDown?: () => boolean;
+    onNotice?: (message: string) => void;
+}
+export declare const ComposerInput: import("react").ForwardRefExoticComponent<ComposerInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export type { SlashCommand };

package/lib/blocks/composer/ComposerInput.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { Textarea } from "../../primitives/Textarea";
+import { paletteKeyDownAction } from "../../domain/composer-palette";
+export function focusFieldAt(fieldRef, pos) {
+    requestAnimationFrame(() => {
+        const el = fieldRef.current;
+        if (!el)
+            return;
+        el.focus();
+        el.setSelectionRange(pos, pos);
+    });
+}
+export const ComposerInput = forwardRef(function ComposerInput({ fieldRef, value, onChange, palette, onAccept, onSubmit, answering, placeholder = "输入消息，@ 唤起 Agent，/ 唤起命令…", onArrowUp, onArrowDown, }, _ref) {
+    return (_jsx(Textarea, { ref: fieldRef, className: "ac-composer__field", value: value, placeholder: placeholder, "aria-label": answering ? "回答输入框" : "消息输入框", "data-answering": answering || undefined, rows: 1, onChange: (e) => {
+            onChange(e.target.value);
+            palette.sync(e.target, e.target.value);
+        }, onKeyDown: (e) => {
+            if (e.nativeEvent.isComposing || e.keyCode === 229)
+                return;
+            if (palette.open) {
+                const action = paletteKeyDownAction(e.key, e.shiftKey);
+                if (action === "move-next") {
+                    e.preventDefault();
+                    palette.move(1);
+                    return;
+                }
+                if (action === "move-prev") {
+                    e.preventDefault();
+                    palette.move(-1);
+                    return;
+                }
+                if (action === "accept") {
+                    e.preventDefault();
+                    const item = palette.items[palette.index];
+                    if (item)
+                        onAccept(item);
+                    return;
+                }
+                if (action === "close") {
+                    e.preventDefault();
+                    palette.escape();
+                    return;
+                }
+                return;
+            }
+            if (e.key === "ArrowUp" && onArrowUp?.()) {
+                e.preventDefault();
+                return;
+            }
+            if (e.key === "ArrowDown" && onArrowDown?.()) {
+                e.preventDefault();
+                return;
+            }
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                onSubmit();
+            }
+        } }));
+});

package/lib/blocks/composer/ComposerMenus.d.ts

@@ -0,0 +1,10 @@
+import type { ComposerModelOption, ComposerModelSwitch, PermissionModeSwitch } from "../../types/composer";
+export type { ComposerModelSwitch, PermissionModeSwitch };
+export type { ComposerModelOption };
+export declare function ComposerPermChip({ permissionMode, }: {
+    permissionMode: PermissionModeSwitch;
+}): import("react").JSX.Element;
+export declare function ComposerModelChip({ modelSwitch, onManage, }: {
+    modelSwitch: ComposerModelSwitch;
+    onManage?: () => void;
+}): import("react").JSX.Element;

package/lib/blocks/composer/ComposerMenus.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertTriangle, Check, ChevronDown, Cpu, Hand, Pencil, Settings, SquarePen, Zap, } from "lucide-react";
+import { DropdownMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, } from "../../primitives/DropdownMenu";
+const PERM_MODES = [
+    {
+        value: "ask",
+        label: "询问",
+        hint: "每次询问：需确认的工具一律弹审批卡",
+        icon: Hand,
+    },
+    {
+        value: "auto",
+        label: "编辑",
+        hint: "允许编辑：文件/画布/MCP 编辑类放行，命令执行仍需确认",
+        icon: SquarePen,
+    },
+    {
+        value: "yolo",
+        label: "自动",
+        hint: "全自动：除显式拒绝规则外全部放行（全权委托）",
+        icon: AlertTriangle,
+    },
+];
+export function ComposerPermChip({ permissionMode, }) {
+    const current = PERM_MODES.find((m) => m.value === permissionMode.value) ?? PERM_MODES[0];
+    const CurrentIcon = current.icon;
+    return (_jsx(DropdownMenu, { side: "top", contentClassName: "min-w-56", trigger: () => (_jsxs("span", { className: "ac-composer__chip", "data-cmp": "ac/perm-chip", "data-id": "perm-chip", "data-mode": current.value, title: current.hint, "aria-label": `权限模式：${current.label}`, children: [_jsx(CurrentIcon, { className: "ac-composer__perm-icon" }), _jsx("span", { className: "ac-composer__chip-label", children: current.label }), _jsx(ChevronDown, { className: "ac-composer__perm-caret" })] })), children: ({ close }) => (_jsxs("div", { "data-cmp": "ac/perm-menu", children: [_jsx(DropdownMenuLabel, { children: "\u6743\u9650\u6A21\u5F0F" }), PERM_MODES.map((mode) => {
+                    const active = mode.value === permissionMode.value;
+                    const Icon = mode.icon;
+                    return (_jsxs(DropdownMenuItem, { "data-state": active ? "selected" : "idle", "data-mode": mode.value, selected: active, className: "ac-perm-menu__row", onSelect: () => {
+                            permissionMode.onChange(mode.value);
+                            close();
+                        }, children: [active ? (_jsx(Check, { className: "ac-perm-menu__check" })) : (_jsx("span", { className: "ac-perm-menu__check ac-menu__check-spacer" })), _jsx(Icon, { className: "ac-perm-menu__icon" }), _jsxs("span", { className: "ac-perm-menu__body", children: [_jsx("span", { className: "ac-perm-menu__title", children: mode.label }), _jsx("span", { className: "ac-perm-menu__hint", children: mode.hint })] })] }, mode.value));
+                })] })) }));
+}
+const BADGE_TONE = {
+    neutral: "ac-model-badge",
+    warn: "ac-model-badge",
+    accent: "ac-model-badge",
+    danger: "ac-model-badge",
+};
+function groupOptions(options) {
+    const out = [];
+    for (const opt of options) {
+        const g = opt.group ?? null;
+        const last = out[out.length - 1];
+        if (last && last.name === g)
+            last.items.push(opt);
+        else
+            out.push({ name: g, items: [opt] });
+    }
+    return out;
+}
+function ModelRow({ option, active, onSelect, }) {
+    return (_jsx(DropdownMenuItem, { "data-state": active ? "selected" : "idle", selected: active, onSelect: onSelect, children: _jsxs("span", { className: "ac-model-row", children: [_jsxs("span", { className: "ac-model-tile", children: [_jsx(Zap, { className: "ac-model-menu__icon" }), active ? (_jsx("span", { className: "ac-model-tile__badge", children: _jsx(Check, { className: "size-3" }) })) : null] }), _jsxs("span", { className: "ac-model-menu__meta", children: [_jsxs("span", { className: "ac-model-menu__name-line", children: [_jsx("span", { className: "ac-model-menu__name", children: option.label }), option.badge ? (_jsx("span", { className: BADGE_TONE[option.badgeTone ?? "neutral"], "data-tone": option.badgeTone ?? "neutral", children: option.badge })) : null] }), option.hint ? (_jsx("span", { className: "ac-model-menu__hint", children: option.hint })) : null] }), option.multiplier ? (_jsx("span", { className: "ac-model-menu__multiplier", children: option.multiplier })) : null] }) }));
+}
+export function ComposerModelChip({ modelSwitch, onManage, }) {
+    const selected = modelSwitch.options.find((o) => o.id === modelSwitch.value);
+    const groups = groupOptions(modelSwitch.options);
+    return (_jsx(DropdownMenu, { side: "top", align: "end", contentClassName: "ac-model-menu min-w-64 max-w-80", trigger: () => (_jsxs("span", { className: "ac-composer__chip", "data-cmp": "ac/model-chip", "data-id": "model-chip", "aria-label": "\u5207\u6362\u672C\u4F1A\u8BDD\u6A21\u578B", title: "\u5207\u6362\u672C\u4F1A\u8BDD\u6A21\u578B\uFF08\u4E0D\u5F71\u54CD\u5168\u5C40\u6FC0\u6D3B\u6001\uFF09", children: [_jsx(Cpu, { className: "ac-composer__perm-icon" }), _jsx("span", { className: "ac-composer__chip-label", children: modelSwitch.value === null
+                        ? "跟随全局"
+                        : (selected?.label ?? modelSwitch.value) }), _jsx(ChevronDown, { className: "ac-composer__perm-caret" })] })), children: ({ close }) => (_jsxs("div", { "data-cmp": "ac/model-menu", children: [_jsx(DropdownMenuLabel, { children: "\u672C\u4F1A\u8BDD\u6A21\u578B" }), _jsxs("div", { className: "ac-model-menu__list", children: [_jsx(DropdownMenuItem, { "data-state": modelSwitch.value === null ? "selected" : "idle", selected: modelSwitch.value === null, onSelect: () => {
+                                modelSwitch.onPick(null);
+                                close();
+                            }, children: _jsxs("span", { className: "ac-model-row", children: [_jsxs("span", { className: "ac-model-tile", children: [_jsx(Cpu, { className: "ac-model-menu__icon" }), modelSwitch.value === null ? (_jsx("span", { className: "ac-model-tile__badge", children: _jsx(Check, { className: "size-3" }) })) : null] }), _jsxs("span", { className: "ac-model-menu__meta", children: [_jsx("span", { className: "ac-model-menu__name", children: "\u8DDF\u968F\u5168\u5C40\u9ED8\u8BA4" }), _jsx("span", { className: "ac-model-menu__hint", children: "\u4E0D\u5199\u89D2\u8272\u7EA7\u6A21\u578B\u503C" })] })] }) }), groups.map((group) => (_jsxs("div", { children: [_jsx(DropdownMenuSeparator, {}), group.name ? (_jsx(DropdownMenuLabel, { className: "ac-model-menu__group", children: group.name })) : null, group.items.map((option) => {
+                                    const active = option.id === modelSwitch.value;
+                                    return (_jsx(ModelRow, { option: option, active: active, onSelect: () => {
+                                            modelSwitch.onPick(option.id);
+                                            close();
+                                        } }, option.id));
+                                })] }, group.name ?? "__default")))] }), modelSwitch.onConfigureCustom ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                modelSwitch.onConfigureCustom?.();
+                                close();
+                            }, children: [_jsx(Pencil, { className: "size-3.5" }), "\u914D\u7F6E\u81EA\u5B9A\u4E49\u6A21\u578B"] })] })) : null, onManage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => {
+                                onManage();
+                                close();
+                            }, children: [_jsx(Settings, { className: "size-3.5" }), "\u6A21\u578B\u7BA1\u7406"] })] })) : null] })) }));
+}