@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chat-ui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,101 @@
-# Temporary Holding Version
+# chat-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components for AI chat surfaces: a message stream, composer, tool-call cards, ask/permission
+prompts, selection actions and a token-driven theme layer. Composable blocks, no backend, no routing,
+no data fetching — you own the state and the transport.
+
+- **Composable blocks** — `ChatPane` for the whole surface, or assemble message / composer / card
+  blocks yourself.
+- **Token-driven theming** — CSS variables plus light / dark / glass presets, overridable per host.
+- **Streaming-ready** — message parts, reasoning blocks, tool envelopes and queued prompts render
+  incrementally.
+- **Typed end to end** — strict TypeScript, exported types for every prop and adapter contract.
+- **Playwright screenshot check** — CI renders the demo and captures full-page screenshots.
+
+## Install
+
+```bash
+npm install @fromsko/chat-ui
+```
+
+Peer dependencies: `react@^19`, `react-dom@^19`. `gsap` is optional (only used by a few
+decorative blocks). Tailwind CSS v4 is expected in the host app for the shipped stylesheet.
+
+## Usage
+
+```tsx
+import { ChatPane, applyTheme } from "@fromsko/chat-ui";
+import "@fromsko/chat-ui/styles.css";
+import { useEffect, useState } from "react";
+import type { Agent, ChatMessage, Conversation } from "@fromsko/chat-ui";
+
+export function Chat() {
+  const [draft, setDraft] = useState("");
+  const [messages] = useState<ChatMessage[]>([]);
+
+  useEffect(() => {
+    applyTheme("dark");
+  }, []);
+
+  return (
+    <ChatPane
+      conversation={{} as Conversation}
+      members={[] as Agent[]}
+      messages={messages}
+      status="idle"
+      draft={draft}
+      onDraftChange={setDraft}
+      onSend={(text) => {
+        setDraft("");
+        void text;
+      }}
+      onOpenDetail={() => {}}
+      onBack={() => {}}
+    />
+  );
+}
+```
+
+Hooks cover the parts that are tedious to re-implement: `useComposerSubmit`, `useComposerPalette`,
+`useQueuedPrompts`, `useInputHistory`, `useSelectionPop`, `usePendingAsk`, `usePendingPermissions`.
+
+## Theming
+
+```ts
+import { applyTheme, readTheme, tokens } from "@fromsko/chat-ui";
+
+applyTheme("dark");
+applyTheme("light");
+```
+
+All colors, radii, spacing and motion values come from CSS variables under
+`src/tokens/theme.css`. Override them on `:root` or a subtree to re-skin the blocks without touching
+component code.
+
+## Entry points
+
+| Specifier | Contents |
+| --- | --- |
+| `@fromsko/chat-ui` | All components, hooks, stores, adapters and types |
+| `@fromsko/chat-ui/types` | Type-only surface |
+| `@fromsko/chat-ui/tokens` | Design tokens and theme helpers |
+| `@fromsko/chat-ui/styles.css` | Stylesheet (Tailwind CSS v4 source) |
+
+## Development
+
+```bash
+bun install
+bun run dev        # demo app on the Rsbuild dev server
+bun run typecheck  # tsc --noEmit
+bun run lint       # rslint
+bun run build      # demo site -> dist/
+bun run build:lib  # package build -> lib/ (JS + .d.ts)
+bun run check      # typecheck + lint + build
+```
+
+The demo under `src/demo` is the reference host: it wires the blocks to in-memory state and is what
+the screenshot check renders.
+
+## License
+
+MIT

package/lib/adapters/event-bus.d.ts

@@ -0,0 +1,80 @@
+import type { ChatStore } from "../stores/chat-store";
+export interface StreamEventMap {
+    "stream:delta": {
+        requestId: string;
+        text: string;
+    };
+    "stream:reasoning": {
+        requestId: string;
+        text: string;
+    };
+    "stream:tool-call": {
+        requestId: string;
+        toolCallId: string;
+        name: string;
+        args: unknown;
+    };
+    "stream:tool-result": {
+        requestId: string;
+        toolCallId: string;
+        result: string;
+        isError: boolean;
+    };
+    "stream:usage": {
+        requestId: string;
+        inputTokens: number;
+        outputTokens: number;
+        window: number;
+    };
+    "stream:memory": {
+        requestId: string;
+        count: number;
+        excerpt: string;
+    };
+    "stream:compaction": {
+        requestId: string | null;
+        beforeTokens: number;
+        afterTokens: number;
+        reason: string;
+    };
+    "stream:end": {
+        requestId: string;
+        outcome: "done" | "error";
+        error?: string;
+    };
+    "stream:bind": {
+        requestId: string;
+    };
+}
+export interface DisplayEventMap {
+    "display:render": {
+        requestId: string;
+        view: string;
+        title?: string;
+        payload?: unknown;
+    };
+}
+export interface OutputEventMap {
+    "output:emit": {
+        requestId: string;
+        outputKind: "text" | "file" | "link" | "json";
+        label?: string;
+        value: string;
+    };
+}
+export interface ChatEventMap extends StreamEventMap, DisplayEventMap, OutputEventMap {
+}
+export type ChatEventType = keyof ChatEventMap;
+export type ChatEventHandler<K extends ChatEventType> = (payload: ChatEventMap[K]) => void;
+export declare class ChatEventBus {
+    private handlers;
+    on<K extends ChatEventType>(type: K, handler: ChatEventHandler<K>): () => void;
+    off<K extends ChatEventType>(type: K, handler: ChatEventHandler<K>): void;
+    emit<K extends ChatEventType>(type: K, payload: ChatEventMap[K]): void;
+    clear(): void;
+}
+export declare const chatEventBus: ChatEventBus;
+export declare function bindBusToStore(bus: ChatEventBus, store: {
+    getState: () => ChatStore;
+}): () => void;
+export declare function bridgeCallbacksToBus(bus: ChatEventBus): import("../types/callbacks").StreamEventCallbacks;

package/lib/adapters/event-bus.js

@@ -0,0 +1,73 @@
+export class ChatEventBus {
+    handlers = new Map();
+    on(type, handler) {
+        let set = this.handlers.get(type);
+        if (!set) {
+            set = new Set();
+            this.handlers.set(type, set);
+        }
+        set.add(handler);
+        return () => this.off(type, handler);
+    }
+    off(type, handler) {
+        this.handlers.get(type)?.delete(handler);
+    }
+    emit(type, payload) {
+        const set = this.handlers.get(type);
+        if (!set)
+            return;
+        for (const handler of [...set]) {
+            handler(payload);
+        }
+    }
+    clear() {
+        this.handlers.clear();
+    }
+}
+export const chatEventBus = new ChatEventBus();
+export function bindBusToStore(bus, store) {
+    const s = () => store.getState();
+    const offs = [
+        bus.on("stream:bind", ({ requestId }) => s().bindRequest(requestId)),
+        bus.on("stream:delta", ({ requestId, text }) => s().streamDelta(requestId, text)),
+        bus.on("stream:reasoning", ({ requestId, text }) => s().streamReasoning(requestId, text)),
+        bus.on("stream:tool-call", ({ requestId, toolCallId, name, args }) => s().streamToolCall(requestId, toolCallId, name, args)),
+        bus.on("stream:tool-result", ({ requestId, toolCallId, result, isError }) => s().streamToolResult(requestId, toolCallId, result, isError)),
+        bus.on("stream:usage", ({ requestId, inputTokens, outputTokens, window }) => s().streamContextUsage(requestId, inputTokens, outputTokens, window)),
+        bus.on("stream:memory", ({ requestId, count, excerpt }) => s().streamMemory(requestId, count, excerpt)),
+        bus.on("stream:compaction", ({ requestId, beforeTokens, afterTokens, reason }) => s().streamCompaction(requestId, beforeTokens, afterTokens, reason)),
+        bus.on("stream:end", ({ requestId, outcome, error }) => s().streamEnd(requestId, outcome, error)),
+        bus.on("display:render", ({ requestId, view, title, payload }) => s().streamDisplay(requestId, view, title, payload)),
+        bus.on("output:emit", ({ requestId, outputKind, label, value }) => s().streamOutput(requestId, outputKind, label, value)),
+    ];
+    return () => offs.forEach((off) => off());
+}
+export function bridgeCallbacksToBus(bus) {
+    return {
+        onDelta: (requestId, text) => bus.emit("stream:delta", { requestId, text }),
+        onReasoning: (requestId, text) => bus.emit("stream:reasoning", { requestId, text }),
+        onToolCall: (requestId, toolCallId, name, args) => bus.emit("stream:tool-call", { requestId, toolCallId, name, args }),
+        onToolResult: (requestId, toolCallId, result, isError) => bus.emit("stream:tool-result", { requestId, toolCallId, result, isError }),
+        onContextUsage: (requestId, inputTokens, outputTokens, window) => bus.emit("stream:usage", {
+            requestId,
+            inputTokens,
+            outputTokens,
+            window,
+        }),
+        onMemory: (requestId, count, excerpt) => bus.emit("stream:memory", { requestId, count, excerpt }),
+        onCompaction: (requestId, beforeTokens, afterTokens, reason) => bus.emit("stream:compaction", {
+            requestId,
+            beforeTokens,
+            afterTokens,
+            reason,
+        }),
+        onEnd: (requestId, outcome, error) => bus.emit("stream:end", { requestId, outcome, error }),
+        onDisplay: (requestId, view, title, payload) => bus.emit("display:render", { requestId, view, title, payload }),
+        onOutput: (requestId, outputKind, label, value) => bus.emit("output:emit", {
+            requestId,
+            outputKind,
+            label,
+            value: value ?? "",
+        }),
+    };
+}

package/lib/adapters/index.d.ts

@@ -0,0 +1,3 @@
+export { setToolLabel, toolLabel, setClockLabel, clockLabel, type ToolLabelFn, type ClockLabelFn, } from "./labels";
+export { setStreamBridge, getStreamBridge, type StreamBridge, } from "./stream-bridge";
+export { ChatEventBus, chatEventBus, bindBusToStore, bridgeCallbacksToBus, type ChatEventMap, type ChatEventType, type ChatEventHandler, type StreamEventMap, type DisplayEventMap, type OutputEventMap, } from "./event-bus";

package/lib/adapters/index.js

@@ -0,0 +1,3 @@
+export { setToolLabel, toolLabel, setClockLabel, clockLabel, } from "./labels";
+export { setStreamBridge, getStreamBridge, } from "./stream-bridge";
+export { ChatEventBus, chatEventBus, bindBusToStore, bridgeCallbacksToBus, } from "./event-bus";

package/lib/adapters/labels.d.ts

@@ -0,0 +1,6 @@
+export type ToolLabelFn = (tool: string) => string;
+export declare function setToolLabel(fn: ToolLabelFn): void;
+export declare function toolLabel(tool: string): string;
+export type ClockLabelFn = (isoOrNow?: string) => string;
+export declare function setClockLabel(fn: ClockLabelFn): void;
+export declare function clockLabel(isoOrNow?: string): string;

package/lib/adapters/labels.js

@@ -0,0 +1,17 @@
+let toolLabelImpl = (tool) => tool;
+export function setToolLabel(fn) {
+    toolLabelImpl = fn;
+}
+export function toolLabel(tool) {
+    return toolLabelImpl(tool);
+}
+let clockLabelImpl = () => {
+    const d = new Date();
+    return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+};
+export function setClockLabel(fn) {
+    clockLabelImpl = fn;
+}
+export function clockLabel(isoOrNow) {
+    return clockLabelImpl(isoOrNow);
+}

package/lib/adapters/stream-bridge.d.ts

@@ -0,0 +1,9 @@
+import type { StreamEventCallbacks } from "../types/callbacks";
+export interface StreamBridge {
+    subscribe(callbacks: StreamEventCallbacks): () => void;
+    cancel?(requestId: string): Promise<void> | void;
+    respondAsk?(turnId: string, callId: string, answer: string): Promise<void> | void;
+    respondPermission?(permissionId: string, approved: boolean, remembered: boolean): Promise<void> | void;
+}
+export declare function setStreamBridge(next: StreamBridge | null): void;
+export declare function getStreamBridge(): StreamBridge | null;

package/lib/adapters/stream-bridge.js

@@ -0,0 +1,7 @@
+let bridge = null;
+export function setStreamBridge(next) {
+    bridge = next;
+}
+export function getStreamBridge() {
+    return bridge;
+}

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

@@ -0,0 +1,8 @@
+import type { PendingAsk } from "../../types/conversation";
+export interface AskCardProps {
+    ask: PendingAsk;
+    queued: number;
+    onAnswer: (text: string) => void;
+    onSkip?: () => void;
+}
+export declare function AskCard({ ask, queued, onAnswer, onSkip }: AskCardProps): import("react").JSX.Element;

package/lib/blocks/cards/AskCard.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowRight, Check, CircleHelp, Sparkles, Square, SquareCheck, X } from "lucide-react";
+import { MAX_ASK_QUESTIONS, answeredCount, batchAnswersOf, canDefaultAll, defaultAnswersOf, isBatchAsk, } from "../../domain/ask";
+import { cn } from "../../utils/cn";
+function toQuestions(ask) {
+    if (isBatchAsk(ask))
+        return ask.questions.slice(0, MAX_ASK_QUESTIONS);
+    return [
+        {
+            id: ask.callId,
+            prompt: ask.prompt,
+            choices: ask.choices,
+            default: ask.default,
+        },
+    ];
+}
+export function AskCard({ ask, queued, onAnswer, onSkip }) {
+    const questions = useMemo(() => toQuestions(ask), [ask]);
+    const batch = isBatchAsk(ask);
+    const [answers, setAnswers] = useState({});
+    const [freeOpen, setFreeOpen] = useState({});
+    const answered = answeredCount(questions, answers);
+    const total = questions.length;
+    const canDefault = canDefaultAll(questions);
+    const hiddenOverflow = batch ? ask.questions.length - questions.length : 0;
+    const selectedOf = (q) => {
+        const raw = answers[q.id] ?? "";
+        if (!q.multiSelect)
+            return raw ? [raw] : [];
+        return raw ? raw.split(", ").filter(Boolean) : [];
+    };
+    const pick = (q, choice) => {
+        if (q.multiSelect) {
+            const cur = selectedOf(q);
+            const next = cur.includes(choice)
+                ? cur.filter((c) => c !== choice)
+                : [...cur, choice];
+            setAnswers((prev) => ({ ...prev, [q.id]: next.join(", ") }));
+            return;
+        }
+        setAnswers((prev) => ({ ...prev, [q.id]: choice }));
+        if (!batch)
+            onAnswer(choice);
+    };
+    const useAllDefaults = () => {
+        const defaults = defaultAnswersOf(questions);
+        if (!batch) {
+            const only = questions[0];
+            const v = defaults[only.id];
+            if (v)
+                onAnswer(v);
+            return;
+        }
+        onAnswer(batchAnswersOf(questions, defaults));
+    };
+    return (_jsxs("div", { className: "ac-ask-sheet", "data-cmp": "ac/ask-card", "data-id": "ask-sheet", "data-state": "waiting", "data-mode": batch ? "batch" : "single", "aria-label": "Agent \u63D0\u95EE", children: [_jsxs("div", { className: "ac-ask-sheet__head", children: [_jsx(CircleHelp, { className: "ac-ask-sheet__head-icon" }), _jsx("span", { className: "ac-ask-sheet__who", children: ask.agent ? `${ask.agent} 想确认` : "Agent 想确认" }), total > 1 ? (_jsxs("span", { className: "ac-ask-sheet__progress", "data-cmp": "ac/ask-progress", children: [answered, "/", total] })) : null, queued > 0 ? (_jsxs("span", { className: "ac-ask-sheet__queued", children: ["+", queued, " \u5F85\u7B54"] })) : null, onSkip ? (_jsxs("button", { type: "button", "data-cmp": "ac/ask-skip", className: "ac-ask-sheet__skip", title: "\u8DF3\u8FC7\uFF08Agent \u5C06\u81EA\u884C\u51B3\u65AD\u5E76\u7EE7\u7EED\uFF09", onClick: onSkip, children: [_jsx(X, { className: "size-3" }), "\u8DF3\u8FC7"] })) : null] }), _jsxs("div", { className: "ac-ask-sheet__body", children: [questions.map((q, i) => {
+                        const chosen = answers[q.id] ?? "";
+                        const def = q.default ?? q.choices[0] ?? null;
+                        const picked = selectedOf(q);
+                        const isFree = Boolean(freeOpen[q.id]) ||
+                            (chosen.length > 0 &&
+                                !picked.every((p) => q.choices.includes(p)));
+                        const freeText = picked
+                            .filter((p) => !q.choices.includes(p))
+                            .join(", ");
+                        return (_jsxs("div", { className: "ac-ask-q", "data-cmp": "ac/ask-question", "data-index": i + 1, "data-answered": chosen ? "true" : "false", "data-multi": q.multiSelect ? "true" : "false", children: [_jsxs("p", { className: "ac-ask-q__prompt", "data-cmp": "ac/ask-prompt", children: [total > 1 ? (_jsx("span", { className: "ac-ask-q__index", children: i + 1 })) : null, q.prompt, q.multiSelect ? (_jsx("span", { className: "ac-ask-q__multi-tag", children: "\u53EF\u591A\u9009" })) : null] }), _jsxs("div", { className: "ac-ask-q__choices", children: [q.choices.map((choice) => {
+                                            const recommended = choice === def;
+                                            const isPicked = picked.includes(choice);
+                                            return (_jsxs("button", { type: "button", "data-cmp": "ac/ask-choice", "data-state": isPicked
+                                                    ? "chosen"
+                                                    : recommended
+                                                        ? "recommended"
+                                                        : "idle", className: "ac-ask-q__chip", title: recommended ? "推荐答案" : "点击采用", onClick: () => pick(q, choice), children: [q.multiSelect ? (isPicked ? (_jsx(SquareCheck, { className: "size-3" })) : (_jsx(Square, { className: "size-3 opacity-50" }))) : isPicked ? (_jsx(Check, { className: "size-3" })) : recommended ? (_jsx(Sparkles, { className: "size-3" })) : null, _jsx("span", { children: choice })] }, choice));
+                                        }), _jsx("button", { type: "button", "data-cmp": "ac/ask-other", className: "ac-ask-q__chip ac-ask-q__chip--other", "data-state": isFree ? "chosen" : "idle", title: "\u8F93\u5165\u81EA\u5DF1\u7684\u7B54\u6848", onClick: () => setFreeOpen((prev) => ({ ...prev, [q.id]: !prev[q.id] })), children: "\u5176\u4ED6\u2026" })] }), isFree ? (_jsx("input", { "data-cmp": "ac/ask-input", className: "ac-ask-q__input", "aria-label": `第 ${i + 1} 题自由作答`, placeholder: "\u8F93\u5165\u4F60\u7684\u7B54\u6848\u2026", autoFocus: true, value: freeText, onChange: (e) => {
+                                        const keep = picked.filter((p) => q.choices.includes(p));
+                                        const next = e.target.value
+                                            ? [...keep, e.target.value]
+                                            : keep;
+                                        setAnswers((prev) => ({
+                                            ...prev,
+                                            [q.id]: next.join(", "),
+                                        }));
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault();
+                                            const v = (answers[q.id] ?? "").trim();
+                                            if (!v)
+                                                return;
+                                            if (!batch)
+                                                onAnswer(v);
+                                            else if (total === 1)
+                                                onAnswer(v);
+                                        }
+                                    } })) : null] }, q.id));
+                    }), hiddenOverflow > 0 ? (_jsxs("p", { className: "ac-ask-sheet__overflow", children: ["\u53E6\u6709 ", hiddenOverflow, " \u4E2A\u95EE\u9898\uFF0C\u5C06\u5728\u672C\u8F6E\u7B54\u590D\u540E\u7EE7\u7EED"] })) : null] }), total > 1 ? (_jsxs("div", { className: "ac-ask-sheet__actions", children: [_jsxs("button", { type: "button", "data-cmp": "ac/ask-default-all", className: "ac-ask-sheet__default", disabled: !canDefault, title: canDefault ? "全部采用推荐答案" : "存在无默认项的问题，需手动作答", onClick: useAllDefaults, children: [_jsx(Sparkles, { className: "size-3" }), "\u5168\u90E8\u7528\u9ED8\u8BA4"] }), _jsxs("button", { type: "button", "data-cmp": "ac/ask-submit", className: cn("ac-ask-sheet__submit", answered === 0 && "is-empty"), disabled: answered === 0, title: answered === 0 ? "至少答一题才能提交" : "提交全部答案", onClick: () => onAnswer(batchAnswersOf(questions, answers)), children: ["\u63D0\u4EA4 ", answered, "/", total, _jsx(ArrowRight, { className: "size-3" })] })] })) : null] }));
+}

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

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

package/lib/blocks/cards/CompactionCard.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Minimize2 } from "lucide-react";
+export function CompactionCard({ part }) {
+    return (_jsxs("div", { className: "ac-compact", "data-cmp": "ac/compact", "data-state": "done", children: [_jsx(Minimize2, { "aria-hidden": "true", size: 12 }), _jsx("span", { className: "ac-compact__title", children: "\u4E0A\u4E0B\u6587\u538B\u7F29" }), _jsxs("span", { className: "ac-compact__tokens", children: [part.beforeTokens, " \u2192 ", part.afterTokens, " tokens"] }), _jsx("span", { className: "ac-compact__reason", title: part.reason, children: part.reason })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { ContextUsageSegment, ContextWindowPreset } from "../../types/message";
+export declare function formatTokens(n: number): string;
+export interface ContextUsageProps {
+    input: number;
+    output?: number;
+    window: number;
+    breakdown?: readonly ContextUsageSegment[];
+    windowPresets?: readonly ContextWindowPreset[];
+    onWindowChange?: (window: number) => void;
+    className?: string;
+    side?: "top" | "bottom";
+    onClose?: () => void;
+}
+export declare function ContextUsage({ input, output, window: ctxWindow, breakdown, windowPresets, onWindowChange, className, side, onClose, }: ContextUsageProps): import("react").JSX.Element | null;

package/lib/blocks/cards/ContextUsage.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { AlertTriangle, X } from "lucide-react";
+import { Popover } from "../../primitives/Popover";
+import { cn } from "../../utils/cn";
+const LEVEL_COLOR = {
+    comfortable: "text-[var(--accent-success)]",
+    warning: "text-[var(--accent-warning)]",
+    critical: "text-[var(--accent-danger)]",
+};
+const LEVEL_LABEL = {
+    comfortable: "充裕",
+    warning: "偏紧",
+    critical: "告急",
+};
+const SEGMENT_FALLBACK = [
+    "#818cf8",
+    "#34d399",
+    "#fbbf24",
+    "#a78bfa",
+    "#f472b6",
+];
+export function formatTokens(n) {
+    if (!Number.isFinite(n) || n < 0)
+        return "0";
+    if (n < 1000)
+        return String(n);
+    if (n < 1_000_000) {
+        const k = n / 1000;
+        return k < 10 ? `${k.toFixed(1)}K` : `${Math.round(k)}K`;
+    }
+    return `${(n / 1_000_000).toFixed(1)}M`;
+}
+function Ring({ ratio, level }) {
+    const size = 20;
+    const stroke = 2.5;
+    const r = (size - stroke) / 2;
+    const circumference = 2 * Math.PI * r;
+    const color = level === "critical"
+        ? "var(--accent-danger)"
+        : level === "warning"
+            ? "var(--accent-warning)"
+            : "var(--accent-primary)";
+    return (_jsxs("svg", { width: size, height: size, "aria-hidden": "true", className: "shrink-0", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: r, fill: "none", stroke: "var(--surface-700)", strokeWidth: stroke }), _jsx("circle", { cx: size / 2, cy: size / 2, r: r, fill: "none", stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: circumference * (1 - Math.min(1, Math.max(0, ratio))), transform: `rotate(-90 ${size / 2} ${size / 2})` })] }));
+}
+function SegmentedBar({ segments, total, level, usedRatio, }) {
+    if (segments.length === 0) {
+        return (_jsx("div", { className: "flex h-2 w-full overflow-hidden rounded-full bg-secondary", children: _jsx("div", { className: "h-full rounded-full transition-[width] duration-300", style: {
+                    width: `${Math.max(usedRatio * 100, usedRatio > 0 ? 2 : 0)}%`,
+                    background: level === "critical"
+                        ? "var(--accent-danger)"
+                        : level === "warning"
+                            ? "var(--accent-warning)"
+                            : "var(--accent-primary)",
+                } }) }));
+    }
+    return (_jsx("div", { className: "flex h-2 w-full overflow-hidden rounded-full bg-secondary", children: segments.map((seg, i) => (_jsx("div", { title: `${seg.label} ${formatTokens(seg.tokens)}`, className: "h-full transition-[width] duration-300", style: {
+                width: `${total > 0 ? (seg.tokens / total) * 100 : 0}%`,
+                background: seg.color,
+            } }, `${seg.label}-${i}`))) }));
+}
+function WindowSlider({ presets, current, onChange, }) {
+    const idx = Math.max(0, presets.findIndex((p) => p.window === current));
+    const active = presets[idx] ?? presets[0];
+    const interactive = onChange !== undefined;
+    const trackRef = useRef(null);
+    const dragging = useRef(false);
+    const pickAt = (clientX) => {
+        if (!interactive || !trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const frac = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        const next = Math.round(frac * (presets.length - 1));
+        if (presets[next] && presets[next].window !== current) {
+            onChange(presets[next].window);
+        }
+    };
+    return (_jsxs("div", { className: "border-t border-border px-3 py-2.5", children: [_jsxs("div", { className: "mb-1.5 text-center text-body font-semibold", children: [formatTokens(active.window), " \u4E0A\u4E0B\u6587 \u00B7 ", active.label] }), _jsx("div", { ref: trackRef, role: interactive ? "slider" : undefined, "aria-valuemin": 0, "aria-valuemax": presets.length - 1, "aria-valuenow": idx, "aria-valuetext": `${formatTokens(active.window)} 上下文 · ${active.label}`, "aria-label": "\u4E0A\u4E0B\u6587\u7A97\u53E3\u6863\u4F4D", tabIndex: interactive ? 0 : undefined, className: cn("flex items-center gap-2 py-1", interactive && "cursor-pointer touch-none select-none"), onPointerDown: (e) => {
+                    if (!interactive)
+                        return;
+                    dragging.current = true;
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    pickAt(e.clientX);
+                }, onPointerMove: (e) => {
+                    if (!dragging.current)
+                        return;
+                    pickAt(e.clientX);
+                }, onPointerUp: (e) => {
+                    dragging.current = false;
+                    e.currentTarget.releasePointerCapture(e.pointerId);
+                }, onKeyDown: (e) => {
+                    if (!interactive)
+                        return;
+                    if (e.key === "ArrowLeft" && idx > 0) {
+                        e.preventDefault();
+                        onChange(presets[idx - 1].window);
+                    }
+                    if (e.key === "ArrowRight" && idx < presets.length - 1) {
+                        e.preventDefault();
+                        onChange(presets[idx + 1].window);
+                    }
+                }, children: _jsxs("span", { className: "relative flex h-3 flex-1 items-center", children: [_jsx("span", { className: "h-1 w-full rounded-full bg-secondary" }), _jsx("span", { className: "absolute left-0 h-1 rounded-full bg-[var(--accent-primary)]", style: {
+                                width: `${presets.length > 1 ? (idx / (presets.length - 1)) * 100 : 100}%`,
+                            } }), presets.map((p, i) => (_jsx("span", { className: "absolute size-2.5 rounded-full border transition-colors", style: {
+                                left: `calc(${presets.length > 1 ? (i / (presets.length - 1)) * 100 : 50}% - 5px)`,
+                                background: i <= idx ? "var(--accent-primary)" : "var(--surface-600)",
+                                borderColor: i <= idx ? "var(--accent-primary)" : "var(--border-600)",
+                            } }, p.label)))] }) })] }));
+}
+export function ContextUsage({ input, output, window: ctxWindow, breakdown, windowPresets, onWindowChange, className, side = "top", onClose, }) {
+    const barId = useId();
+    const [open, setOpen] = useState(false);
+    if (!Number.isFinite(ctxWindow) || ctxWindow <= 0)
+        return null;
+    const used = input + (output ?? 0);
+    const usedPercent = Math.min(100, (used / ctxWindow) * 100);
+    const remainingPercent = Math.max(0, 100 - usedPercent);
+    const level = remainingPercent <= 10
+        ? "critical"
+        : remainingPercent <= 25
+            ? "warning"
+            : "comfortable";
+    const ratio = used / ctxWindow;
+    const segments = (breakdown ?? []).map((seg, i) => ({
+        label: seg.label,
+        tokens: seg.tokens,
+        color: seg.color || SEGMENT_FALLBACK[i % SEGMENT_FALLBACK.length],
+    }));
+    return (_jsx(Popover, { side: side, align: "end", open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                onClose?.();
+        }, trigger: ({ open: triggerOpen }) => (_jsxs("span", { role: "button", tabIndex: 0, "data-cmp": "ai/context-usage", "data-id": "usage-ring", "data-state": level, "data-level": level, "data-open": triggerOpen ? "true" : "false", "aria-label": `上下文用量：已用 ${usedPercent.toFixed(1)}%，剩余 ${remainingPercent.toFixed(1)}%`, title: `${LEVEL_LABEL[level]} · 已用 ${usedPercent.toFixed(1)}%`, className: cn("inline-flex h-[var(--control-sm)] min-w-7 cursor-pointer items-center gap-1.5 rounded-full px-1.5 transition-colors hover:bg-secondary", LEVEL_COLOR[level], className), children: [_jsx(Ring, { ratio: ratio, level: level }), _jsxs("span", { className: "text-micro tabular-nums", children: [usedPercent.toFixed(0), "%"] }), level === "critical" ? _jsx(AlertTriangle, { className: "size-3" }) : null] })), children: _jsxs("div", { "data-cmp": "ai/context-usage-panel", "data-open": open ? "true" : "false", className: "w-72 p-0", children: [_jsxs("div", { className: "flex items-start justify-between px-3.5 pt-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-body font-semibold", children: "\u4E0A\u4E0B\u6587\u7528\u91CF" }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1.5", children: [_jsxs("span", { className: "text-heading font-semibold tabular-nums", children: [usedPercent.toFixed(1), "%"] }), _jsxs("span", { className: "text-meta text-muted-foreground", children: ["\u5DF2\u4F7F\u7528 ", formatTokens(used), "/ ", formatTokens(ctxWindow)] })] })] }), _jsx("button", { type: "button", "aria-label": "\u5173\u95ED\u7528\u91CF\u9762\u677F", className: "rounded p-0.5 text-muted-foreground hover:text-foreground", onClick: () => setOpen(false), children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "px-3.5 pt-2.5", children: _jsx(SegmentedBar, { segments: segments, total: ctxWindow, level: level, usedRatio: ratio }, barId) }), segments.length > 0 ? (_jsx("div", { className: "px-3.5 pt-2.5 pb-1", children: segments.map((seg, i) => (_jsxs("div", { className: "flex items-center gap-2 py-0.5 text-meta", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: seg.color } }), _jsx("span", { className: "text-foreground", children: seg.label }), _jsx("span", { className: "ml-auto tabular-nums text-muted-foreground", children: ctxWindow > 0
+                                    ? `${((seg.tokens / ctxWindow) * 100).toFixed(1)}%`
+                                    : "0%" })] }, `${seg.label}-${i}`))) })) : (_jsxs("div", { className: "px-3.5 pt-2 pb-1", children: [_jsxs("div", { className: "flex items-center justify-between py-0.5 text-meta", children: [_jsx("span", { className: "text-muted-foreground", children: "\u8F93\u5165" }), _jsx("span", { className: "tabular-nums text-foreground", children: formatTokens(input) })] }), output !== undefined ? (_jsxs("div", { className: "flex items-center justify-between py-0.5 text-meta", children: [_jsx("span", { className: "text-muted-foreground", children: "\u8F93\u51FA" }), _jsx("span", { className: "tabular-nums text-foreground", children: formatTokens(output) })] })) : null] })), windowPresets && windowPresets.length > 1 ? (_jsx(WindowSlider, { presets: windowPresets, current: ctxWindow, onChange: onWindowChange })) : null] }) }));
+}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { DisplayPart } from "../../types/message";
+export interface DisplayCardProps {
+    part: DisplayPart;
+    renderDisplay?: (part: DisplayPart) => ReactNode;
+}
+export declare function DisplayCard({ part, renderDisplay }: DisplayCardProps): import("react").JSX.Element;