@townco/ui 0.1.115 → 0.1.116

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/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/SubagentStream.d.ts

@@ -0,0 +1,23 @@
+export interface SubagentStreamProps {
+    /** Sub-agent HTTP port */
+    port: number;
+    /** Sub-agent session ID */
+    sessionId: string;
+    /** Optional host (defaults to localhost) */
+    host?: string;
+    /** Parent tool call status - use this to determine if sub-agent is running */
+    parentStatus?: "pending" | "in_progress" | "completed" | "failed";
+    /** Sub-agent name (for display) */
+    agentName?: string | undefined;
+    /** Query sent to the sub-agent */
+    query?: string | undefined;
+}
+/**
+ * SubagentStream component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export declare function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }: SubagentStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubagentStream.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
+const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
+/**
+ * SubagentStream component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }) {
+    const [isExpanded, setIsExpanded] = useState(false); // Start collapsed for parallel ops
+    const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
+    const [isNearBottom, setIsNearBottom] = useState(true);
+    const thinkingContainerRef = useRef(null);
+    const { messages, isStreaming: hookIsStreaming, error } = useSubagentStream({
+        port,
+        sessionId,
+        ...(host !== undefined ? { host } : {}),
+    });
+    // Use parent status as primary indicator, fall back to hook's streaming state
+    // Parent is "in_progress" means sub-agent is definitely still running
+    const isRunning = parentStatus === "in_progress" || parentStatus === "pending" || hookIsStreaming;
+    // Get the current/latest message
+    const currentMessage = messages[messages.length - 1];
+    const hasContent = currentMessage &&
+        (currentMessage.content ||
+            (currentMessage.toolCalls && currentMessage.toolCalls.length > 0));
+    // Auto-collapse Thinking when completed (so Output is the primary view)
+    const prevIsRunningRef = useRef(isRunning);
+    useEffect(() => {
+        if (prevIsRunningRef.current && !isRunning) {
+            // Just completed - collapse thinking to show output
+            setIsThinkingExpanded(false);
+        }
+        prevIsRunningRef.current = isRunning;
+    }, [isRunning]);
+    // Check if user is near bottom of scroll area
+    const checkScrollPosition = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
+    }, []);
+    // Scroll to bottom
+    const scrollToBottom = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTop = container.scrollHeight;
+    }, []);
+    // Auto-scroll when content changes and user is near bottom
+    useEffect(() => {
+        if (isNearBottom && (isRunning || hasContent)) {
+            scrollToBottom();
+        }
+    }, [currentMessage?.content, currentMessage?.toolCalls, isNearBottom, isRunning, hasContent, scrollToBottom]);
+    // Set up scroll listener
+    useEffect(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => checkScrollPosition();
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        checkScrollPosition(); // Check initial position
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
+    // Get last line of streaming content for preview
+    const lastLine = currentMessage?.content
+        ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
+        : "";
+    const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
+    return (_jsxs("div", { children: [!isExpanded && (_jsx("button", { type: "button", onClick: () => setIsExpanded(true), className: "w-full max-w-md text-left cursor-pointer bg-transparent border-none p-0", children: previewText ? (_jsx("p", { className: `text-paragraph-sm text-muted-foreground truncate ${isRunning ? "animate-pulse" : ""}`, children: previewText })) : isRunning ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 italic animate-pulse", children: "Waiting for response..." })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.toolCalls &&
+                                                currentMessage.toolCalls.length > 0 && (_jsx("div", { className: "space-y-1", children: currentMessage.toolCalls.map((tc) => (_jsx(SubagentToolCallItem, { toolCall: tc }, tc.id))) })), currentMessage.content && (_jsxs("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: [currentMessage.content, currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
+}
+/**
+ * Simple tool call display for sub-agent tool calls
+ */
+function SubagentToolCallItem({ toolCall }) {
+    const statusIcon = {
+        pending: "...",
+        in_progress: "",
+        completed: "",
+        failed: "",
+    }[toolCall.status];
+    const statusColor = {
+        pending: "text-muted-foreground",
+        in_progress: "text-blue-500",
+        completed: "text-green-500",
+        failed: "text-destructive",
+    }[toolCall.status];
+    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
+}

package/dist/gui/components/ToolCall.js

@@ -44,7 +44,15 @@ export function ToolCall({ toolCall }) {
     const { resolvedTheme } = useTheme();
     // Detect TodoWrite tool and subagent
     const isTodoWrite = toolCall.title === "todo_write";
-    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    // A subagent call can be detected by:
+    // - Live: has port and sessionId (but no stored messages yet)
+    // - Replay: has stored subagentMessages
+    const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
+    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
+    // Use replay mode if we have stored messages - they should take precedence
+    // over trying to connect to SSE (which won't work for replayed sessions)
+    const isReplaySubagent = hasStoredSubagent;
     // Safely access ChatLayout context - will be undefined if not within ChatLayout
     const layoutContext = React.useContext(ChatLayout.Context);
     // Click handler: toggle sidepanel for TodoWrite, subagent details for subagents, expand for others
@@ -139,7 +147,7 @@ export function ToolCall({ toolCall }) {
     if (isPreliminary) {
         return (_jsx("div", { className: "flex flex-col my-4", children: _jsxs("span", { className: "text-paragraph-sm text-muted-foreground/50", children: ["Invoking ", displayName] }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
                         Object.keys(toolCall.rawInput).length > 0 &&
                         !toolCall.subagentPort && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&

package/dist/gui/components/ToolOperation.js

@@ -5,6 +5,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
 import { generateSmartSummary } from "../../core/utils/tool-summary.js";
 import * as ChatLayout from "./ChatLayout.js";
+import { ContextUsageIndicator } from "./ContextUsageButton.js";
 import { SubAgentDetails } from "./SubAgentDetails.js";
 import { useTheme } from "./ThemeProvider.js";
 import { TodoSubline } from "./TodoSubline.js";
@@ -141,6 +142,20 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     // Detect subagent calls (subagents now run in-process, messages in subagentMessages)
     const isSubagentCall = !!(singleToolCall?.subagentMessages &&
         singleToolCall.subagentMessages.length > 0);
+    // Extract latest subagent context size (if provided by backend on subagent messages)
+    const subagentContextSize = React.useMemo(() => {
+        if (!singleToolCall?.subagentMessages)
+            return null;
+        const messages = singleToolCall.subagentMessages;
+        for (let i = messages.length - 1; i >= 0; i--) {
+            const msg = messages[i];
+            const cs = msg?._meta?.context_size ?? msg?.context_size;
+            if (cs != null)
+                return cs;
+        }
+        return null;
+    }, [singleToolCall?.subagentMessages]);
+    const subagentHeaderContextSize = subagentContextSize;
     // State for subagent expansion
     const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
     // Safely access ChatLayout context
@@ -253,7 +268,7 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     return (_jsxs("div", { className: "flex flex-col my-4", children: [
             _jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [
                     _jsxs("div", { className: "flex items-center gap-1.5", children: [
-                            _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), !isGrouped &&
+                            _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isSubagentCall && (_jsx(ContextUsageIndicator, { contextSize: subagentHeaderContextSize, size: 12, className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors" })), !isGrouped &&
                                 singleToolCall?.startedAt &&
                                 displayState === "executing" && (_jsx(RunningDuration, { startTime: singleToolCall.startedAt, isRunning: !singleToolCall.subagentCompleted })), isGrouped &&
                                 displayState === "executing" &&
@@ -333,6 +348,18 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     // Detect subagent calls (subagents now run in-process, messages in subagentMessages)
     const isSubagentCall = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
+    // Extract latest subagent context size (if provided by backend on subagent messages)
+    const subagentContextSize = React.useMemo(() => {
+        const messages = toolCall.subagentMessages ?? [];
+        for (let i = messages.length - 1; i >= 0; i--) {
+            const msg = messages[i];
+            const cs = msg?._meta?.context_size ?? msg?.context_size;
+            if (cs != null)
+                return cs;
+        }
+        return null;
+    }, [toolCall.subagentMessages]);
+    const subagentHeaderContextSize = subagentContextSize;
     // Detect compaction for this individual tool call
     const hasCompaction = !!((hookNotification?.status === "completed" &&
         hookNotification.metadata?.action &&
@@ -351,7 +378,7 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
                 _jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [
                         _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(CircleDot, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.subagentMessages?.[0]?._meta?.semanticName ||
                                 toolCall.rawInput?.agentName ||
-                                "Subagent" }), toolCall.subagentMessages?.[0]?._meta?.semanticName && (_jsxs("span", { className: "text-muted-foreground text-[10px] ml-1", children: ["(", toolCall.rawInput?.agentName || "subagent", ")"] })), isRunning && toolCall.startedAt && (_jsx(RunningDuration, { startTime: toolCall.startedAt })), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
+                                "Subagent" }), toolCall.subagentMessages?.[0]?._meta?.semanticName && (_jsxs("span", { className: "text-muted-foreground text-[10px] ml-1", children: ["(", toolCall.rawInput?.agentName || "subagent", ")"] })), _jsx(ContextUsageIndicator, { contextSize: subagentHeaderContextSize, size: 12, className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors" }), isRunning && toolCall.startedAt && (_jsx(RunningDuration, { startTime: toolCall.startedAt })), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
                                     _jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
                                             const meta = toolCall._meta;
                                             const percentage = meta?.originalTokens && meta?.finalTokens

package/dist/gui/components/Tooltip.js

@@ -5,6 +5,8 @@ import { cn } from "../lib/utils.js";
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn(
+        // High z-index so tooltips render above overlays/modals in the chat UI.
+        "z-[9999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/sdk/schemas/session.d.ts

@@ -348,12 +348,36 @@ export declare const SessionUpdate: z.ZodUnion<readonly [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>;
@@ -563,12 +587,36 @@ export declare const SessionUpdate: z.ZodUnion<readonly [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.115",
+  "version": "0.1.116",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.93",
+    "@townco/core": "0.0.94",
     "@types/mdast": "^4.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.112",
+    "@townco/tsconfig": "0.1.113",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",