@4djs/assistant 0.1.3 → 0.1.5

package/dist/labels.d.ts

@@ -20,8 +20,34 @@ export declare const DEFAULT_ASSISTANT_LABELS: {
     readonly "composer.stop": "Stop";
     readonly "composer.hint": "Enter to send · Shift+Enter for new line";
     readonly "composer.llmSettings": "LLM settings";
+    readonly "composer.contextUsage": "Context usage";
     readonly "composer.generateSuggestions": "Generate suggestions";
     readonly "composer.clearConversation": "Clear conversation";
+    readonly "usage.ariaLabel": "Show context usage";
+    readonly "usage.panelTitle": "Context usage";
+    readonly "usage.panelClose": "Close context usage";
+    readonly "usage.fullPercent": "{percent}% full";
+    readonly "usage.tokenBudget": "{used} / {total} tokens";
+    readonly "usage.tooltipTitle": "LLM usage";
+    readonly "usage.context": "Context: {used} / {total} ({percent}%)";
+    readonly "usage.tokensTotal": "Tokens: {count}";
+    readonly "usage.promptCompletion": "Prompt: {prompt} · Completion: {completion}";
+    readonly "usage.cached": "Cached: {count}";
+    readonly "usage.reasoning": "Reasoning: {count}";
+    readonly "usage.speed": "Speed: {rate} tok/s";
+    readonly "usage.duration": "Duration: {duration}";
+    readonly "usage.requests": "Requests this turn: {count}";
+    readonly "usage.model": "Model: {model}";
+    readonly "usage.session": "Session: {total} tokens · {requests} requests";
+    readonly "usage.idle": "No usage yet — send a message to start tracking";
+    readonly "usage.contextLimit": "Context window: {total}";
+    readonly "usage.category.systemPrompt": "System prompt";
+    readonly "usage.category.toolDefinitions": "Tool definitions";
+    readonly "usage.category.conversation": "Conversation";
+    readonly "usage.category.completion": "Completion";
+    readonly "usage.category.cached": "Cached prompt";
+    readonly "usage.category.reasoning": "Reasoning";
+    readonly "usage.estimatedHint": "Category splits are estimated from payload size";
     readonly "commandMenu.ariaLabel": "Composer commands";
     readonly "commandMenu.header": "Commands";
     readonly "commands.clear.description": "Clear the current conversation";
@@ -47,7 +73,7 @@ export declare const DEFAULT_ASSISTANT_LABELS: {
     readonly "llmSettings.modelList": "Model list";
     readonly "llmSettings.baseUrlPlaceholder": "https://api.openai.com/v1";
     readonly "llmSettings.apiKeyPlaceholder": "sk-…";
-    readonly "llmSettings.apiKeyConfiguredPlaceholder": "Configured — leave blank to keep";
+    readonly "llmSettings.apiKeyConfiguredPlaceholder": "Leave blank to keep current key";
     readonly "llmSettings.modelPlaceholder": "gpt-4o-mini";
     readonly "llmSettings.modelListPlaceholder": "Optional — comma-separated";
     readonly "llmSettings.connected": "Connected · {model}";

package/dist/labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoI3B,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAEhE,6DAA6D;AAC7D,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE/D,eAAO,MAAM,oBAAoB,EAE5B,iBAAiB,EAAE,CAAC;AAEzB,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,MAAM,CAIR;AAED,wBAAgB,sBAAsB,CACpC,SAAS,CAAC,EAAE,uBAAuB,GAClC,eAAe,CAEjB"}
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8J3B,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAEhE,6DAA6D;AAC7D,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE/D,eAAO,MAAM,oBAAoB,EAE5B,iBAAiB,EAAE,CAAC;AAEzB,wBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GACtC,MAAM,CAIR;AAED,wBAAgB,sBAAsB,CACpC,SAAS,CAAC,EAAE,uBAAuB,GAClC,eAAe,CAEjB"}

package/dist/react/Assistant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Assistant.d.ts","sourceRoot":"","sources":["../../src/react/Assistant.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAuUlE,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAM9C;AAED,0DAA0D;AAC1D,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAQA"}
+{"version":3,"file":"Assistant.d.ts","sourceRoot":"","sources":["../../src/react/Assistant.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAqXlE,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAM9C;AAED,0DAA0D;AAC1D,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAQA"}

package/dist/react/components/MermaidDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDiagram.d.ts","sourceRoot":"","sources":["../../../src/react/components/MermaidDiagram.tsx"],"names":[],"mappings":"AA0DA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAiB,EACjB,SAAS,GACV,EAAE,mBAAmB,+BAsErB"}
+{"version":3,"file":"MermaidDiagram.d.ts","sourceRoot":"","sources":["../../../src/react/components/MermaidDiagram.tsx"],"names":[],"mappings":"AA8DA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAiB,EACjB,SAAS,GACV,EAAE,mBAAmB,+BAsGrB"}

package/dist/react/components/chat/ChatComposer.d.ts

@@ -1,9 +1,14 @@
 import type { KeyboardEvent, RefObject } from "react";
 import type { ChatCommandSuggestion } from "../../../core/chat-commands.js";
+import type { LlmSessionUsage } from "../../../core/llm-usage.js";
 import type { AssistantLabels } from "../../../labels.js";
 interface ChatComposerToolbar {
     showLlmSettings?: boolean;
-    onOpenLlmSettings?: () => void;
+    onToggleLlmSettings?: () => void;
+    llmSettingsOpen?: boolean;
+    showUsageStats?: boolean;
+    onToggleUsage?: () => void;
+    usageOpen?: boolean;
     showGenerateSuggestions?: boolean;
     onGenerateSuggestions?: () => void;
     suggestionsLoading?: boolean;
@@ -32,7 +37,10 @@ interface ChatComposerProps {
         selectedIndex: number;
         onSelect: (command: ChatCommandSuggestion) => void;
     };
+    llmUsage?: LlmSessionUsage | null;
+    usageModel?: string | null;
+    modelContextWindows?: Record<string, number>;
 }
-export declare function ChatComposer({ input, onInputChange, onSubmit, onKeyDown, streaming, onStop, textareaRef, llmEnabled, disabled, inputDisabled, placeholder, labels: labelsOverride, toolbar, commandMenu, }: ChatComposerProps): import("react").JSX.Element;
+export declare function ChatComposer({ input, onInputChange, onSubmit, onKeyDown, streaming, onStop, textareaRef, llmEnabled, disabled, inputDisabled, placeholder, labels: labelsOverride, toolbar, commandMenu, llmUsage, usageModel, modelContextWindows, }: ChatComposerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ChatComposer.d.ts.map

package/dist/react/components/chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/ChatComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAK1D,UAAU,mBAAmB;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,qBAAqB,EAAE,CAAC;QAClC,aAAa,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;KACpD,CAAC;CACH;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,OAAO,EACP,WAAW,GACZ,EAAE,iBAAiB,+BAmInB"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/ChatComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D,UAAU,mBAAmB;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,qBAAqB,EAAE,CAAC;QAClC,aAAa,EAAE,MAAM,CAAC;QACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;KACpD,CAAC;IACF,QAAQ,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9C;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACT,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,OAAO,EACP,WAAW,EACX,QAAQ,EACR,UAAU,EACV,mBAAmB,GACpB,EAAE,iBAAiB,+BAsJnB"}

package/dist/react/components/chat/ContextUsageStrip.d.ts

@@ -0,0 +1,14 @@
+import type { LlmSessionUsage } from "../../../core/llm-usage.js";
+import { type AssistantLabels } from "../../../labels.js";
+interface ContextUsageStripProps {
+    open: boolean;
+    onClose: () => void;
+    usage: LlmSessionUsage | null;
+    labels: AssistantLabels;
+    model: string;
+    modelContextWindows?: Record<string, number>;
+    streaming?: boolean;
+}
+export declare function ContextUsageStrip({ open, onClose, usage, labels, model, modelContextWindows, streaming, }: ContextUsageStripProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ContextUsageStrip.d.ts.map

package/dist/react/components/chat/ContextUsageStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextUsageStrip.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/ContextUsageStrip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,KAAK,eAAe,EAAe,MAAM,oBAAoB,CAAC;AAOvE,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,sCA2IxB"}

package/dist/react/components/chat/LlmSettingsStrip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LlmSettingsStrip.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/LlmSettingsStrip.tsx"],"names":[],"mappings":"AAeA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,qBAAqB,sCAgVxE"}
+{"version":3,"file":"LlmSettingsStrip.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/LlmSettingsStrip.tsx"],"names":[],"mappings":"AAeA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,qBAAqB,sCA4VxE"}

package/dist/react/components/chat/UsageToolbarButton.d.ts

@@ -0,0 +1,24 @@
+import type { LlmSessionUsage } from "../../../core/llm-usage.js";
+import type { AssistantLabels } from "../../../labels.js";
+interface UsageToolbarButtonProps {
+    labels: AssistantLabels;
+    active: boolean;
+    disabled?: boolean;
+    ringPercent: number;
+    streaming?: boolean;
+    onClick?: () => void;
+}
+export declare function UsageToolbarButton({ labels, active, disabled, ringPercent, streaming, onClick, }: UsageToolbarButtonProps): import("react").JSX.Element;
+interface UsageToolbarButtonConnectedProps {
+    labels: AssistantLabels;
+    active: boolean;
+    disabled?: boolean;
+    streaming?: boolean;
+    onClick?: () => void;
+    model: string;
+    usage: LlmSessionUsage | null;
+    modelContextWindows?: Record<string, number>;
+}
+export declare function UsageToolbarButtonConnected({ labels, active, disabled, streaming, onClick, model, usage, modelContextWindows, }: UsageToolbarButtonConnectedProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=UsageToolbarButton.d.ts.map

package/dist/react/components/chat/UsageToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageToolbarButton.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/UsageToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,UAAU,uBAAuB;IAC/B,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAS,EACT,OAAO,GACR,EAAE,uBAAuB,+BAiDzB;AAED,UAAU,gCAAgC;IACxC,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9C;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,MAAM,EACN,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,EACL,mBAAmB,GACpB,EAAE,gCAAgC,+BAkBlC"}

package/dist/react/components/chat/context-usage-utils.d.ts

@@ -0,0 +1,34 @@
+import type { ContextCategorySegment, ContextUsageBreakdown, ContextUsageCategory } from "../../../core/llm-context-breakdown.js";
+import { type LlmSessionUsage, type LlmTurnUsage } from "../../../core/llm-usage.js";
+import type { AssistantLabels } from "../../../labels.js";
+export declare function resolveUsageBreakdown(input: {
+    turn: LlmTurnUsage | null;
+    baseline: ContextUsageBreakdown | null;
+    model: string;
+    modelContextWindows?: Record<string, number>;
+}): ContextUsageBreakdown | null;
+export declare function sortUsageSegments(segments: ContextCategorySegment[]): ContextCategorySegment[];
+export declare function categoryLabel(id: ContextUsageCategory, labels: AssistantLabels): string;
+export declare function formatUsageDuration(ms: number): string;
+export declare function computeUsageDisplay(input: {
+    usage: LlmSessionUsage | null;
+    model: string;
+    modelContextWindows?: Record<string, number>;
+    streaming?: boolean;
+}): {
+    turn: LlmTurnUsage | null;
+    breakdown: ContextUsageBreakdown | null;
+    contextWindow: number | null;
+    totalTokens: number;
+    contextUsedPercent: number | null;
+    ringPercent: number;
+    segments: ContextCategorySegment[];
+    hasTurnUsage: boolean;
+    session: {
+        promptTokens: number;
+        completionTokens: number;
+        totalTokens: number;
+        requestCount: number;
+    };
+};
+//# sourceMappingURL=context-usage-utils.d.ts.map

package/dist/react/components/chat/context-usage-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-usage-utils.d.ts","sourceRoot":"","sources":["../../../../src/react/components/chat/context-usage-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,YAAY,EAElB,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAW1D,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAC3C,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9C,GAAG,qBAAqB,GAAG,IAAI,CAiB/B;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,sBAAsB,EAAE,GACjC,sBAAsB,EAAE,CAM1B;AAED,wBAAgB,aAAa,CAC3B,EAAE,EAAE,oBAAoB,EACxB,MAAM,EAAE,eAAe,GACtB,MAAM,CAER;AAED,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;;;;;;;;;;;;;;;EAmDA"}

package/dist/react/index.d.ts

@@ -9,7 +9,9 @@ export { ChatInteractivePrompt } from "./components/chat/ChatInteractivePrompt/i
 export { ChatMessageView } from "./components/chat/ChatMessage.js";
 export { ChatMessageScroll } from "./components/chat/ChatMessageScroll.js";
 export { ChatReplySuggestions } from "./components/chat/ChatReplySuggestions.js";
+export { ContextUsageStrip } from "./components/chat/ContextUsageStrip.js";
 export { LlmSettingsStrip } from "./components/chat/LlmSettingsStrip.js";
+export { UsageToolbarButtonConnected } from "./components/chat/UsageToolbarButton.js";
 export { MarkdownContent } from "./components/MarkdownContent.js";
 export { MermaidDiagram } from "./components/MermaidDiagram.js";
 export { ModelSelector } from "./components/ModelSelector.js";

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,WAAW,EACX,sBAAsB,GACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,cAAc,EACd,sBAAsB,EACtB,gCAAgC,EAChC,iBAAiB,GAClB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,WAAW,EACX,sBAAsB,GACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,cAAc,EACd,sBAAsB,EACtB,gCAAgC,EAChC,iBAAiB,GAClB,MAAM,YAAY,CAAC"}

package/dist/react/lib/sanitize-mermaid.d.ts

@@ -0,0 +1,3 @@
+export declare function sanitizeMermaidSource(source: string): string;
+export declare function isMermaidErrorSvg(svg: string): boolean;
+//# sourceMappingURL=sanitize-mermaid.d.ts.map

package/dist/react/lib/sanitize-mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-mermaid.d.ts","sourceRoot":"","sources":["../../../src/react/lib/sanitize-mermaid.ts"],"names":[],"mappings":"AA+CA,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAM5D;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAMtD"}

package/dist/react/types.d.ts

@@ -27,6 +27,8 @@ export interface AssistantUiConfig {
     showModelSelector?: boolean;
     /** Show LLM settings button in the composer footer (default: true) */
     showLlmSettings?: boolean;
+    /** Show LLM usage indicator in the composer footer (default: false) */
+    showUsageStats?: boolean;
     maxWidth?: string;
     className?: string;
 }

package/dist/react/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,0BAA0B,EAC1B,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE7E,MAAM,WAAW,gCACf,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,gCAAgC,EAAE,CAAC;IACtD,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,0BAA0B;IACjE,yEAAyE;IACzE,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mFAAmF;IACnF,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE;QAC5B,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,KAAK,EAAE,uBAAuB,EAAE,CAAC;KAClC,KAAK,OAAO,CACX,KAAK,CAAC;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CACH,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,gDAAgD;IAChD,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,0BAA0B,EAC1B,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE7E,MAAM,WAAW,gCACf,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,gCAAgC,EAAE,CAAC;IACtD,gFAAgF;IAChF,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sGAAsG;IACtG,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,0BAA0B;IACjE,yEAAyE;IACzE,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mFAAmF;IACnF,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE;QAC5B,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QACrB,KAAK,EAAE,uBAAuB,EAAE,CAAC;KAClC,KAAK,OAAO,CACX,KAAK,CAAC;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CACH,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,gDAAgD;IAChD,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}

package/dist/styles.css

@@ -318,6 +318,26 @@
   height: auto;
 }
 
+.markdown-mermaid--loading {
+  font-size: 0.75rem;
+  color: var(--text-chat-tertiary);
+}
+
+.markdown-mermaid--error {
+  border-color: color-mix(
+    in oklab,
+    var(--danger) 35%,
+    var(--border-default) 65%
+  );
+  background: var(--danger-soft);
+}
+
+.markdown-mermaid__error {
+  margin: 0 0 0.375rem;
+  font-size: 0.75rem;
+  color: var(--text-danger);
+}
+
 /* ── Assistant chat (aligned with 4d-ai-agents editor) ── */
 @keyframes assistant-icon-spin {
   to {
@@ -1026,21 +1046,97 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.375rem;
   border-top: 1px solid var(--border-default);
-  padding: 0.375rem 0.5rem;
+  padding: 0.25rem 0.375rem;
+}
+
+.assistant-composer__footer-start {
+  display: inline-flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .assistant-composer__tools {
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.0625rem;
   margin-left: auto;
 }
 
-.assistant-composer__tool {
-  padding: 0.375rem;
+/* ── Assistant buttons (self-contained) ── */
+.assistant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.125rem;
+  border-radius: var(--radius-base, 0.5rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: inherit;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    transform 120ms ease;
+}
+
+.assistant-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.assistant-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.assistant-btn--primary {
+  background: var(--brand);
+  color: var(--brand-on-surface);
+}
+
+.assistant-btn--primary:hover:not(:disabled) {
+  filter: brightness(1.05);
+}
+
+.assistant-btn--secondary {
+  background: var(--surface-panel);
+  border-color: var(--border-default);
+  color: var(--text-heading);
+}
+
+.assistant-btn--secondary:hover:not(:disabled) {
+  background: var(--overlay-hover);
+}
+
+.assistant-btn--ghost {
+  background: transparent;
+  color: var(--text-body);
+}
+
+.assistant-btn--ghost:hover:not(:disabled) {
+  background: var(--overlay-hover);
+}
+
+.assistant-composer__tools .assistant-btn {
+  min-width: 1.375rem;
+  min-height: 1.375rem;
+  padding: 0.125rem;
+  border-radius: 0.3125rem;
+  gap: 0;
+  color: var(--text-chat-secondary);
+}
+
+.assistant-composer__tool--active,
+.assistant-composer__tools .assistant-usage-toolbar-btn--active {
+  color: var(--text-chat-primary);
+  background: color-mix(in srgb, var(--text-chat-primary) 8%, transparent);
 }
 
 .assistant-composer__tool-spinner {
@@ -1054,6 +1150,198 @@
   color: var(--text-chat-tertiary);
 }
 
+.assistant-usage-toolbar-btn:hover,
+.assistant-usage-toolbar-btn:focus-visible {
+  color: var(--text-chat-primary);
+}
+
+.assistant-usage-toolbar-btn__ring {
+  display: block;
+}
+
+.assistant-usage-toolbar-btn__track {
+  stroke: color-mix(in srgb, var(--text-chat-tertiary) 35%, transparent);
+}
+
+.assistant-usage-toolbar-btn__progress {
+  stroke: var(--text-chat-secondary);
+  transition: stroke-dashoffset 0.2s ease;
+}
+
+.assistant-usage-toolbar-btn__progress--live {
+  stroke: var(--accent-primary, var(--text-chat-secondary));
+}
+
+.assistant-usage-strip {
+  display: flex;
+  flex-direction: column;
+  max-height: min(60vh, 24rem);
+  margin-bottom: 0.75rem;
+  padding: 0.75rem;
+  border-radius: var(--radius-base);
+  border: 1px solid var(--border-default);
+  background: var(--surface-panel);
+  overflow: hidden;
+}
+
+.assistant-usage-strip__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-bottom: 0.5rem;
+}
+
+.assistant-usage-strip__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-heading);
+}
+
+.assistant-usage-strip__header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex-shrink: 0;
+}
+
+.assistant-usage-strip__header-btn {
+  padding: 0.375rem;
+}
+
+.assistant-usage-strip__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  overflow: auto;
+}
+
+.assistant-usage-strip__summary {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.assistant-usage-strip__percent {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-chat-primary);
+}
+
+.assistant-usage-strip__budget {
+  font-size: 0.6875rem;
+  color: var(--text-chat-tertiary);
+  white-space: nowrap;
+}
+
+.assistant-usage-strip__bar {
+  display: flex;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-chat-tertiary) 16%, transparent);
+}
+
+.assistant-usage-strip__bar-segment {
+  min-width: 2px;
+  height: 100%;
+  transition: width 0.25s ease;
+}
+
+.assistant-usage-strip__bar-segment--systemPrompt,
+.assistant-usage-strip__swatch--systemPrompt {
+  background: var(--usage-system, #8b8d98);
+}
+
+.assistant-usage-strip__bar-segment--toolDefinitions,
+.assistant-usage-strip__swatch--toolDefinitions {
+  background: var(--usage-tools, #9b7bf7);
+}
+
+.assistant-usage-strip__bar-segment--conversation,
+.assistant-usage-strip__swatch--conversation {
+  background: var(--usage-conversation, #5b9cf5);
+}
+
+.assistant-usage-strip__bar-segment--completion,
+.assistant-usage-strip__swatch--completion {
+  background: var(--usage-completion, #4ade80);
+}
+
+.assistant-usage-strip__bar-segment--cached,
+.assistant-usage-strip__swatch--cached {
+  background: var(--usage-cached, #fbbf24);
+}
+
+.assistant-usage-strip__bar-segment--reasoning,
+.assistant-usage-strip__swatch--reasoning {
+  background: var(--usage-reasoning, #fb923c);
+}
+
+.assistant-usage-strip__legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.assistant-usage-strip__legend-item {
+  display: grid;
+  grid-template-columns: 0.625rem 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.assistant-usage-strip__swatch {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 0.125rem;
+}
+
+.assistant-usage-strip__legend-label {
+  font-size: 0.75rem;
+  color: var(--text-chat-secondary);
+}
+
+.assistant-usage-strip__legend-value {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-chat-primary);
+}
+
+.assistant-usage-strip__hint,
+.assistant-usage-strip__idle {
+  margin: 0;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  color: var(--text-chat-tertiary);
+}
+
+.assistant-usage-strip__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem 0.625rem;
+  border-top: 1px solid var(--border-default);
+  padding-top: 0.625rem;
+  font-size: 0.6875rem;
+  color: var(--text-chat-tertiary);
+}
+
+.assistant-usage-strip__model {
+  flex: 1 1 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-chat-secondary);
+}
+
 .composer-command-menu {
   position: absolute;
   bottom: calc(100% + 0.5rem);
@@ -2415,63 +2703,6 @@
   border-radius: 0.75rem;
 }
 
-/* ── Assistant buttons (self-contained) ── */
-.assistant-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.125rem;
-  border-radius: var(--radius-base, 0.5rem);
-  font-size: 0.875rem;
-  font-weight: 500;
-  font-family: inherit;
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition:
-    background 180ms ease,
-    border-color 180ms ease,
-    color 180ms ease,
-    transform 120ms ease;
-}
-
-.assistant-btn:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-.assistant-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.assistant-btn--primary {
-  background: var(--brand);
-  color: var(--brand-on-surface);
-}
-
-.assistant-btn--primary:hover:not(:disabled) {
-  filter: brightness(1.05);
-}
-
-.assistant-btn--secondary {
-  background: var(--surface-panel);
-  border-color: var(--border-default);
-  color: var(--text-heading);
-}
-
-.assistant-btn--secondary:hover:not(:disabled) {
-  background: var(--overlay-hover);
-}
-
-.assistant-btn--ghost {
-  background: transparent;
-  color: var(--text-body);
-}
-
-.assistant-btn--ghost:hover:not(:disabled) {
-  background: var(--overlay-hover);
-}
-
 .assistant-input {
   width: 100%;
   padding: 0.375rem 0.625rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4djs/assistant",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "types": "./dist/react/index.d.ts",
   "files": [