@townco/ui 0.1.114 → 0.1.116

package/dist/gui/components/ToolCallGroup.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ListVideo } from "lucide-react";
+import React, { useState } from "react";
+import { ToolCall } from "./ToolCall.js";
+/**
+ * ToolCallGroup component - displays a group of parallel tool calls with collapsible details
+ */
+export function ToolCallGroup({ toolCalls }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Calculate group status based on individual tool call statuses
+    const getGroupStatus = () => {
+        const statuses = toolCalls.map((tc) => tc.status);
+        if (statuses.some((s) => s === "failed"))
+            return "failed";
+        if (statuses.some((s) => s === "in_progress"))
+            return "in_progress";
+        if (statuses.every((s) => s === "completed"))
+            return "completed";
+        return "pending";
+    };
+    const groupStatus = getGroupStatus();
+    // Generate summary of tool names
+    const toolNames = toolCalls.map((tc) => tc.prettyName || tc.title);
+    const uniqueNames = [...new Set(toolNames)];
+    const summary = uniqueNames.length <= 2
+        ? uniqueNames.join(", ")
+        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
+    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: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: "text-muted-foreground", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: "Parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/70", children: toolCalls.length }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: summary }))] }), isExpanded && (_jsx("div", { className: "mt-1", children: toolCalls.map((toolCall) => (_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "w-2.5 h-4 border-l-2 border-b-2 border-border rounded-bl-[6px] mt-1 mr-0.5 shrink-0" }), _jsx("div", { className: "flex-1 -mt-2", children: _jsx(ToolCall, { toolCall: toolCall }) })] }, toolCall.id))) }))] }));
+}

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.114",
+  "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.92",
+    "@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.111",
+    "@townco/tsconfig": "0.1.113",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",