@townco/ui 0.1.115 → 0.1.117

package/dist/core/hooks/use-chat-messages.d.ts

@@ -158,11 +158,36 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
                     };
                 })[] | undefined;
                 isStreaming?: boolean | undefined;
+                context_size?: {
+                    systemPromptTokens: number;
+                    toolOverheadTokens?: number | undefined;
+                    mcpOverheadTokens?: number | undefined;
+                    userMessagesTokens: number;
+                    assistantMessagesTokens: number;
+                    toolInputTokens: number;
+                    toolResultsTokens: number;
+                    totalEstimated: number;
+                    llmReportedInputTokens?: number | undefined;
+                    modelContextWindow?: number | undefined;
+                } | undefined;
                 _meta?: {
+                    [x: string]: unknown;
                     semanticName?: string | undefined;
                     agentDefinitionName?: string | undefined;
                     currentActivity?: string | undefined;
                     statusGenerating?: boolean | undefined;
+                    context_size?: {
+                        systemPromptTokens: number;
+                        toolOverheadTokens?: number | undefined;
+                        mcpOverheadTokens?: number | undefined;
+                        userMessagesTokens: number;
+                        assistantMessagesTokens: number;
+                        toolInputTokens: number;
+                        toolResultsTokens: number;
+                        totalEstimated: number;
+                        llmReportedInputTokens?: number | undefined;
+                        modelContextWindow?: number | undefined;
+                    } | undefined;
                 } | undefined;
             }[] | undefined;
             subagentStreaming?: boolean | undefined;

package/dist/core/hooks/use-tool-calls.d.ts

@@ -155,11 +155,36 @@ export declare function useToolCalls(client: AcpClient | null): {
                 };
             })[] | undefined;
             isStreaming?: boolean | undefined;
+            context_size?: {
+                systemPromptTokens: number;
+                toolOverheadTokens?: number | undefined;
+                mcpOverheadTokens?: number | undefined;
+                userMessagesTokens: number;
+                assistantMessagesTokens: number;
+                toolInputTokens: number;
+                toolResultsTokens: number;
+                totalEstimated: number;
+                llmReportedInputTokens?: number | undefined;
+                modelContextWindow?: number | undefined;
+            } | undefined;
             _meta?: {
+                [x: string]: unknown;
                 semanticName?: string | undefined;
                 agentDefinitionName?: string | undefined;
                 currentActivity?: string | undefined;
                 statusGenerating?: boolean | undefined;
+                context_size?: {
+                    systemPromptTokens: number;
+                    toolOverheadTokens?: number | undefined;
+                    mcpOverheadTokens?: number | undefined;
+                    userMessagesTokens: number;
+                    assistantMessagesTokens: number;
+                    toolInputTokens: number;
+                    toolResultsTokens: number;
+                    totalEstimated: number;
+                    llmReportedInputTokens?: number | undefined;
+                    modelContextWindow?: number | undefined;
+                } | undefined;
             } | undefined;
         }[] | undefined;
         subagentStreaming?: boolean | undefined;
@@ -312,11 +337,36 @@ export declare function useToolCalls(client: AcpClient | null): {
                 };
             })[] | undefined;
             isStreaming?: boolean | undefined;
+            context_size?: {
+                systemPromptTokens: number;
+                toolOverheadTokens?: number | undefined;
+                mcpOverheadTokens?: number | undefined;
+                userMessagesTokens: number;
+                assistantMessagesTokens: number;
+                toolInputTokens: number;
+                toolResultsTokens: number;
+                totalEstimated: number;
+                llmReportedInputTokens?: number | undefined;
+                modelContextWindow?: number | undefined;
+            } | undefined;
             _meta?: {
+                [x: string]: unknown;
                 semanticName?: string | undefined;
                 agentDefinitionName?: string | undefined;
                 currentActivity?: string | undefined;
                 statusGenerating?: boolean | undefined;
+                context_size?: {
+                    systemPromptTokens: number;
+                    toolOverheadTokens?: number | undefined;
+                    mcpOverheadTokens?: number | undefined;
+                    userMessagesTokens: number;
+                    assistantMessagesTokens: number;
+                    toolInputTokens: number;
+                    toolResultsTokens: number;
+                    totalEstimated: number;
+                    llmReportedInputTokens?: number | undefined;
+                    modelContextWindow?: number | undefined;
+                } | undefined;
             } | undefined;
         }[] | undefined;
         subagentStreaming?: boolean | undefined;

package/dist/core/schemas/chat.d.ts

@@ -237,12 +237,36 @@ export declare const DisplayMessage: z.ZodObject<{
                 }, z.core.$strip>;
             }, z.core.$strip>], "type">>>;
             isStreaming: z.ZodOptional<z.ZodBoolean>;
+            context_size: z.ZodOptional<z.ZodObject<{
+                systemPromptTokens: z.ZodNumber;
+                toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                userMessagesTokens: z.ZodNumber;
+                assistantMessagesTokens: z.ZodNumber;
+                toolInputTokens: z.ZodNumber;
+                toolResultsTokens: z.ZodNumber;
+                totalEstimated: z.ZodNumber;
+                llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                modelContextWindow: z.ZodOptional<z.ZodNumber>;
+            }, z.core.$strip>>;
             _meta: z.ZodOptional<z.ZodObject<{
                 semanticName: z.ZodOptional<z.ZodString>;
                 agentDefinitionName: z.ZodOptional<z.ZodString>;
                 currentActivity: z.ZodOptional<z.ZodString>;
                 statusGenerating: z.ZodOptional<z.ZodBoolean>;
-            }, z.core.$strip>>;
+                context_size: z.ZodOptional<z.ZodObject<{
+                    systemPromptTokens: z.ZodNumber;
+                    toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                    mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                    userMessagesTokens: z.ZodNumber;
+                    assistantMessagesTokens: z.ZodNumber;
+                    toolInputTokens: z.ZodNumber;
+                    toolResultsTokens: z.ZodNumber;
+                    totalEstimated: z.ZodNumber;
+                    llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                    modelContextWindow: z.ZodOptional<z.ZodNumber>;
+                }, z.core.$strip>>;
+            }, z.core.$loose>>;
         }, z.core.$strip>>>;
         subagentStreaming: z.ZodOptional<z.ZodBoolean>;
         subagentCompleted: z.ZodOptional<z.ZodBoolean>;
@@ -508,12 +532,36 @@ export declare const ChatSessionState: z.ZodObject<{
                     }, z.core.$strip>;
                 }, z.core.$strip>], "type">>>;
                 isStreaming: z.ZodOptional<z.ZodBoolean>;
+                context_size: z.ZodOptional<z.ZodObject<{
+                    systemPromptTokens: z.ZodNumber;
+                    toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                    mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                    userMessagesTokens: z.ZodNumber;
+                    assistantMessagesTokens: z.ZodNumber;
+                    toolInputTokens: z.ZodNumber;
+                    toolResultsTokens: z.ZodNumber;
+                    totalEstimated: z.ZodNumber;
+                    llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                    modelContextWindow: z.ZodOptional<z.ZodNumber>;
+                }, z.core.$strip>>;
                 _meta: z.ZodOptional<z.ZodObject<{
                     semanticName: z.ZodOptional<z.ZodString>;
                     agentDefinitionName: z.ZodOptional<z.ZodString>;
                     currentActivity: z.ZodOptional<z.ZodString>;
                     statusGenerating: z.ZodOptional<z.ZodBoolean>;
-                }, z.core.$strip>>;
+                    context_size: z.ZodOptional<z.ZodObject<{
+                        systemPromptTokens: z.ZodNumber;
+                        toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                        mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                        userMessagesTokens: z.ZodNumber;
+                        assistantMessagesTokens: z.ZodNumber;
+                        toolInputTokens: z.ZodNumber;
+                        toolResultsTokens: z.ZodNumber;
+                        totalEstimated: z.ZodNumber;
+                        llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                        modelContextWindow: z.ZodOptional<z.ZodNumber>;
+                    }, z.core.$strip>>;
+                }, z.core.$loose>>;
             }, z.core.$strip>>>;
             subagentStreaming: z.ZodOptional<z.ZodBoolean>;
             subagentCompleted: z.ZodOptional<z.ZodBoolean>;

package/dist/core/schemas/tool-call.d.ts

@@ -1,4 +1,20 @@
 import { z } from "zod";
+/**
+ * Context size breakdown (as provided by agent metadata).
+ * Stored on message metadata as `_meta.context_size` (or sometimes `context_size`).
+ */
+export declare const ContextSizeSchema: z.ZodObject<{
+    systemPromptTokens: z.ZodNumber;
+    toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+    mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+    userMessagesTokens: z.ZodNumber;
+    assistantMessagesTokens: z.ZodNumber;
+    toolInputTokens: z.ZodNumber;
+    toolResultsTokens: z.ZodNumber;
+    totalEstimated: z.ZodNumber;
+    llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+    modelContextWindow: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
 /**
  * Tool call status lifecycle
  */
@@ -262,12 +278,36 @@ export declare const SubagentMessageSchema: z.ZodObject<{
         }, z.core.$strip>;
     }, z.core.$strip>], "type">>>;
     isStreaming: z.ZodOptional<z.ZodBoolean>;
+    context_size: z.ZodOptional<z.ZodObject<{
+        systemPromptTokens: z.ZodNumber;
+        toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+        mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+        userMessagesTokens: z.ZodNumber;
+        assistantMessagesTokens: z.ZodNumber;
+        toolInputTokens: z.ZodNumber;
+        toolResultsTokens: z.ZodNumber;
+        totalEstimated: z.ZodNumber;
+        llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+        modelContextWindow: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
     _meta: z.ZodOptional<z.ZodObject<{
         semanticName: z.ZodOptional<z.ZodString>;
         agentDefinitionName: z.ZodOptional<z.ZodString>;
         currentActivity: z.ZodOptional<z.ZodString>;
         statusGenerating: z.ZodOptional<z.ZodBoolean>;
-    }, z.core.$strip>>;
+        context_size: z.ZodOptional<z.ZodObject<{
+            systemPromptTokens: z.ZodNumber;
+            toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            userMessagesTokens: z.ZodNumber;
+            assistantMessagesTokens: z.ZodNumber;
+            toolInputTokens: z.ZodNumber;
+            toolResultsTokens: z.ZodNumber;
+            totalEstimated: z.ZodNumber;
+            llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+            modelContextWindow: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$loose>>;
 }, z.core.$strip>;
 export type SubagentMessage = z.infer<typeof SubagentMessageSchema>;
 /**
@@ -449,12 +489,36 @@ export declare const ToolCallSchema: z.ZodObject<{
             }, z.core.$strip>;
         }, z.core.$strip>], "type">>>;
         isStreaming: z.ZodOptional<z.ZodBoolean>;
+        context_size: z.ZodOptional<z.ZodObject<{
+            systemPromptTokens: z.ZodNumber;
+            toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            userMessagesTokens: z.ZodNumber;
+            assistantMessagesTokens: z.ZodNumber;
+            toolInputTokens: z.ZodNumber;
+            toolResultsTokens: z.ZodNumber;
+            totalEstimated: z.ZodNumber;
+            llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+            modelContextWindow: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
         _meta: z.ZodOptional<z.ZodObject<{
             semanticName: z.ZodOptional<z.ZodString>;
             agentDefinitionName: z.ZodOptional<z.ZodString>;
             currentActivity: z.ZodOptional<z.ZodString>;
             statusGenerating: z.ZodOptional<z.ZodBoolean>;
-        }, z.core.$strip>>;
+            context_size: z.ZodOptional<z.ZodObject<{
+                systemPromptTokens: z.ZodNumber;
+                toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                userMessagesTokens: z.ZodNumber;
+                assistantMessagesTokens: z.ZodNumber;
+                toolInputTokens: z.ZodNumber;
+                toolResultsTokens: z.ZodNumber;
+                totalEstimated: z.ZodNumber;
+                llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                modelContextWindow: z.ZodOptional<z.ZodNumber>;
+            }, z.core.$strip>>;
+        }, z.core.$loose>>;
     }, z.core.$strip>>>;
     subagentStreaming: z.ZodOptional<z.ZodBoolean>;
     subagentCompleted: z.ZodOptional<z.ZodBoolean>;
@@ -608,12 +672,36 @@ export declare const ToolCallUpdateSchema: z.ZodObject<{
             }, z.core.$strip>;
         }, z.core.$strip>], "type">>>;
         isStreaming: z.ZodOptional<z.ZodBoolean>;
+        context_size: z.ZodOptional<z.ZodObject<{
+            systemPromptTokens: z.ZodNumber;
+            toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+            userMessagesTokens: z.ZodNumber;
+            assistantMessagesTokens: z.ZodNumber;
+            toolInputTokens: z.ZodNumber;
+            toolResultsTokens: z.ZodNumber;
+            totalEstimated: z.ZodNumber;
+            llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+            modelContextWindow: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
         _meta: z.ZodOptional<z.ZodObject<{
             semanticName: z.ZodOptional<z.ZodString>;
             agentDefinitionName: z.ZodOptional<z.ZodString>;
             currentActivity: z.ZodOptional<z.ZodString>;
             statusGenerating: z.ZodOptional<z.ZodBoolean>;
-        }, z.core.$strip>>;
+            context_size: z.ZodOptional<z.ZodObject<{
+                systemPromptTokens: z.ZodNumber;
+                toolOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                mcpOverheadTokens: z.ZodOptional<z.ZodNumber>;
+                userMessagesTokens: z.ZodNumber;
+                assistantMessagesTokens: z.ZodNumber;
+                toolInputTokens: z.ZodNumber;
+                toolResultsTokens: z.ZodNumber;
+                totalEstimated: z.ZodNumber;
+                llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+                modelContextWindow: z.ZodOptional<z.ZodNumber>;
+            }, z.core.$strip>>;
+        }, z.core.$loose>>;
     }, z.core.$strip>>>;
     subagentCompleted: z.ZodOptional<z.ZodBoolean>;
     _meta: z.ZodOptional<z.ZodObject<{

package/dist/core/schemas/tool-call.js

@@ -1,4 +1,20 @@
 import { z } from "zod";
+/**
+ * Context size breakdown (as provided by agent metadata).
+ * Stored on message metadata as `_meta.context_size` (or sometimes `context_size`).
+ */
+export const ContextSizeSchema = z.object({
+    systemPromptTokens: z.number(),
+    toolOverheadTokens: z.number().optional(), // Optional for backward compatibility
+    mcpOverheadTokens: z.number().optional(), // Optional for backward compatibility
+    userMessagesTokens: z.number(),
+    assistantMessagesTokens: z.number(),
+    toolInputTokens: z.number(),
+    toolResultsTokens: z.number(),
+    totalEstimated: z.number(),
+    llmReportedInputTokens: z.number().optional(),
+    modelContextWindow: z.number().optional(), // Model's max context window
+});
 /**
  * Tool call status lifecycle
  */
@@ -117,13 +133,19 @@ export const SubagentMessageSchema = z.object({
     /** Interleaved content blocks in arrival order */
     contentBlocks: z.array(SubagentContentBlockSchema).optional(),
     isStreaming: z.boolean().optional(),
+    /** Context size metadata (may be present at top-level in some payloads) */
+    context_size: ContextSizeSchema.optional(),
     _meta: z
         .object({
         semanticName: z.string().optional(),
         agentDefinitionName: z.string().optional(),
         currentActivity: z.string().optional(),
         statusGenerating: z.boolean().optional(),
+        /** Context size metadata (preferred location) */
+        context_size: ContextSizeSchema.optional(),
     })
+        // Preserve forward-compatible metadata fields
+        .passthrough()
         .optional(),
 });
 /**

package/dist/gui/components/ChatView.js

@@ -330,30 +330,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                             logger.info("Prompt clicked", { prompt });
                                                         }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
                                                             agentMcps.length +
-                                                            agentSubagents.length }) })) })) : null) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
-                                                    // Calculate dynamic spacing based on message sequence
-                                                    const isFirst = index === 0;
-                                                    const previousMessage = isFirst
-                                                        ? null
-                                                        : messages[index - 1];
-                                                    let spacingClass = "mt-2";
-                                                    if (isFirst) {
-                                                        // First message needs more top margin if it's an assistant initial message
-                                                        spacingClass =
-                                                            message.role === "assistant" ? "mt-8" : "mt-2";
-                                                    }
-                                                    else if (message.role === "user") {
-                                                        // User message usually starts a new turn
-                                                        spacingClass =
-                                                            previousMessage?.role === "user" ? "mt-4" : "mt-4";
-                                                    }
-                                                    else if (message.role === "assistant") {
-                                                        // Assistant message is usually a response
-                                                        spacingClass =
-                                                            previousMessage?.role === "assistant"
-                                                                ? "mt-2"
-                                                                : "mt-6";
-                                                    }
+                                                            agentSubagents.length }) })) })) : null) : (_jsx("div", { className: "flex flex-col px-4 py-4", children: messages.map((message, index) => {
                                                     // Check if any message is streaming
                                                     const anyMessageStreaming = messages.some((m) => m.isStreaming);
                                                     // Calculate which user message number this is (1-indexed for display, 0-indexed for API)
@@ -366,7 +343,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                     // Check if this message should be dimmed (comes after editing message)
                                                     const shouldDim = editingMessageIndex !== null &&
                                                         index > editingMessageIndex;
-                                                    return (_jsx(Message, { message: message, className: cn(spacingClass, "group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
+                                                    return (_jsx(Message, { message: message, className: cn("group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full min-w-0", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
                                                                     setEditingMessageIndex(isEditing ? index : null);
                                                                 } })) : (_jsxs(_Fragment, { children: [
                                                                     _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }), _jsx(MessageActions, { message: message, isStreaming: message.isStreaming, onSendMessage: sendMessage, isLastAssistantMessage: index ===

package/dist/gui/components/ContextUsageButton.d.ts

@@ -1,16 +1,20 @@
 import * as React from "react";
-export interface ContextSize {
-    systemPromptTokens: number;
-    toolOverheadTokens?: number;
-    mcpOverheadTokens?: number;
-    userMessagesTokens: number;
-    assistantMessagesTokens: number;
-    toolInputTokens: number;
-    toolResultsTokens: number;
-    totalEstimated: number;
-    llmReportedInputTokens?: number;
-    modelContextWindow?: number;
-}
+import { type ContextSize } from "../../core/store/chat-store.js";
 export interface ContextUsageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Optional explicit context size to render.
+     * If omitted, the component uses the latest context size from the chat store.
+     */
+    contextSize?: ContextSize | null;
 }
+/**
+ * Inline (non-button) context usage visualization. Useful inside other clickable
+ * elements (e.g. subagent headers) to avoid nesting <button> inside <button>.
+ */
+export declare function ContextUsageIndicator({ contextSize, className, size }: {
+    contextSize?: ContextSize | null;
+    className?: string;
+    /** Pixel size of the indicator (width/height) */
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare const ContextUsageButton: React.ForwardRefExoticComponent<ContextUsageButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/ContextUsageButton.js

@@ -6,13 +6,7 @@ import { Button } from "./Button.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
 // Default context window for backward compatibility (should not be used in practice)
 const DEFAULT_MODEL_CONTEXT_WINDOW = 200000;
-export const ContextUsageButton = React.forwardRef(({ className, ...props }, ref) => {
-    const latestContextSize = useChatStore((state) => state.latestContextSize);
-    // Don't render if no context size available
-    if (latestContextSize == null) {
-        return null;
-    }
-    const contextSize = latestContextSize;
+function getContextUsageStats(contextSize) {
     // Use max of estimated and LLM-reported tokens (LLM reported as fallback if higher)
     const actualTokens = Math.max(contextSize.totalEstimated, contextSize.llmReportedInputTokens ?? 0);
     // Use model context window from backend, or default for backward compatibility
@@ -36,53 +30,99 @@ export const ContextUsageButton = React.forwardRef(({ className, ...props }, ref
             return "0.0%";
         return `${((tokens / actualTokens) * 100).toFixed(1)}%`;
     };
-    // SVG parameters
+    // SVG parameters (defaults; can be overridden by callers)
     const size = 16;
     const strokeWidth = 2;
     const radius = (size - strokeWidth) / 2;
     const center = size / 2;
     const circumference = 2 * Math.PI * radius;
     const offset = circumference - (clampedPercentage / 100) * circumference;
+    return {
+        actualTokens,
+        formattedPercentage,
+        percentage,
+        clampedPercentage,
+        colorClass,
+        calculatePercentage,
+        size,
+        strokeWidth,
+        radius,
+        center,
+        circumference,
+        offset,
+    };
+}
+function ContextUsageTooltipContent({ contextSize, }) {
+    const { actualTokens, formattedPercentage, colorClass, calculatePercentage } = getContextUsageStats(contextSize);
+    return (_jsx(TooltipContent, { side: "top", align: "center", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [
+                _jsxs("div", { className: "space-y-1", children: [
+                        _jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })
+                                    ] })
+                            ] }), contextSize.toolOverheadTokens !== undefined &&
+                            contextSize.toolOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "Tools Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.toolOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolOverheadTokens), ")"] })
+                                    ] })
+                            ] })), contextSize.mcpOverheadTokens !== undefined &&
+                            contextSize.mcpOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "MCPs Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.mcpOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.mcpOverheadTokens), ")"] })
+                                    ] })
+                            ] })), _jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "User Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.userMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.userMessagesTokens), ")"] })
+                                    ] })
+                            ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "Assistant Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.assistantMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.assistantMessagesTokens), ")"] })
+                                    ] })
+                            ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "Tool Inputs:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.toolInputTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolInputTokens), ")"] })
+                                    ] })
+                            ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
+                                _jsx("span", { className: "text-muted-foreground", children: "Tool Results:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
+                                        _jsx("span", { children: contextSize.toolResultsTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolResultsTokens), ")"] })
+                                    ] })
+                            ] })
+                    ] }), _jsx("div", { className: "border-t border-border pt-2", children: _jsxs("div", { className: cn("flex justify-end gap-2 font-semibold", colorClass), children: [
+                            _jsx("span", { children: actualTokens.toLocaleString() }), _jsxs("span", { children: ["(", formattedPercentage, ")"] })
+                        ] }) })
+            ] }) }));
+}
+/**
+ * Inline (non-button) context usage visualization. Useful inside other clickable
+ * elements (e.g. subagent headers) to avoid nesting <button> inside <button>.
+ */
+export function ContextUsageIndicator({ contextSize, className, size = 12, }) {
+    if (contextSize == null)
+        return null;
+    const { colorClass, clampedPercentage } = getContextUsageStats(contextSize);
+    const strokeWidth = 2;
+    const radius = (size - strokeWidth) / 2;
+    const center = size / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (clampedPercentage / 100) * circumference;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
+                _jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: cn("inline-flex items-center justify-center rounded-full cursor-default", colorClass, className), role: "img", "aria-label": "Context usage indicator", children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [
+                                _jsx("title", { children: "Context usage indicator" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", className: "opacity-20" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-300 ease-in-out" })
+                            ] }) }) }), _jsx(ContextUsageTooltipContent, { contextSize: contextSize })
+            ] }) }));
+}
+export const ContextUsageButton = React.forwardRef(({ className, contextSize: explicitContextSize, ...props }, ref) => {
+    const latestContextSize = useChatStore((state) => state.latestContextSize);
+    const contextSize = explicitContextSize ?? latestContextSize;
+    // Don't render if no context size available
+    if (contextSize == null) {
+        return null;
+    }
+    const { colorClass, size, center, radius, strokeWidth, circumference, offset, } = getContextUsageStats(contextSize);
     return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
                 _jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full cursor-default", colorClass, className), ...props, children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [
                                 _jsx("title", { children: "Context usage indicator" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", className: "opacity-20" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-300 ease-in-out" })
-                            ] }) }) }), _jsx(TooltipContent, { side: "top", align: "center", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [
-                            _jsxs("div", { className: "space-y-1", children: [
-                                    _jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })
-                                                ] })
-                                        ] }), contextSize.toolOverheadTokens !== undefined &&
-                                        contextSize.toolOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "Tools Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.toolOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolOverheadTokens), ")"] })
-                                                ] })
-                                        ] })), contextSize.mcpOverheadTokens !== undefined &&
-                                        contextSize.mcpOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "MCPs Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.mcpOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.mcpOverheadTokens), ")"] })
-                                                ] })
-                                        ] })), _jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "User Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.userMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.userMessagesTokens), ")"] })
-                                                ] })
-                                        ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "Assistant Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.assistantMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.assistantMessagesTokens), ")"] })
-                                                ] })
-                                        ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "Tool Inputs:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.toolInputTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolInputTokens), ")"] })
-                                                ] })
-                                        ] }), _jsxs("div", { className: "flex justify-between gap-6", children: [
-                                            _jsx("span", { className: "text-muted-foreground", children: "Tool Results:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [
-                                                    _jsx("span", { children: contextSize.toolResultsTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolResultsTokens), ")"] })
-                                                ] })
-                                        ] })
-                                ] }), _jsx("div", { className: "border-t border-border pt-2", children: _jsxs("div", { className: cn("flex justify-end gap-2 font-semibold", colorClass), children: [
-                                        _jsx("span", { children: actualTokens.toLocaleString() }), _jsxs("span", { children: ["(", formattedPercentage, ")"] })
-                                    ] }) })
-                        ] }) })
+                            ] }) }) }), _jsx(ContextUsageTooltipContent, { contextSize: contextSize })
             ] }) }));
 });
 ContextUsageButton.displayName = "ContextUsageButton";

package/dist/gui/components/EditableUserMessage.js

@@ -114,7 +114,7 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
                     }
                     : undefined, role: sticky && !isEditing ? "button" : undefined, tabIndex: sticky && !isEditing ? 0 : undefined, children: _jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: cn("max-w-[200px] max-h-[200px] rounded-lg object-cover", isEditing && "opacity-50") }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (
                         // biome-ignore lint/a11y/useSemanticElements: contentEditable div preserves whitespace formatting better than textarea
-                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
+                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
                     ? "opacity-100"
                     : "opacity-0 group-hover/user-message:opacity-100"), children: isEditing ? (_jsxs(_Fragment, { children: [
                         _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, className: "h-7 px-3 text-xs", children: "Send" })

package/dist/gui/components/Message.js

@@ -6,10 +6,10 @@ import { cn } from "../lib/utils.js";
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
-const messageVariants = cva("flex animate-fadeIn", {
+const messageVariants = cva("flex min-w-0 animate-fadeIn", {
     variants: {
         role: {
-            user: "max-w-[80%] self-end ml-auto mr-2",
+            user: "max-w-[80%] self-end ml-auto",
             assistant: "self-start mr-auto",
             system: "self-start mr-auto max-w-full",
         },

package/dist/gui/components/MessageActions.js

@@ -63,7 +63,7 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
             toast.info("Export not available");
         }
     };
-    return (_jsxs(Actions, { className: cn("mt-2 mb-10", visibilityClass), children: [
+    return (_jsxs(Actions, { className: cn(visibilityClass), children: [
             _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }), _jsx(Action, { onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
                     _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
                                 _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [