@townco/ui 0.1.44 → 0.1.46

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

@@ -52,6 +52,12 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
                 outputTokens?: number | undefined;
                 totalTokens?: number | undefined;
             } | undefined;
+            _meta?: {
+                truncationWarning?: string | undefined;
+                compactionAction?: "compacted" | "truncated" | undefined;
+                originalTokens?: number | undefined;
+                finalTokens?: number | undefined;
+            } | undefined;
         }[] | undefined;
         tokenUsage?: {
             inputTokens?: number | undefined;

package/dist/core/hooks/use-chat-messages.js

@@ -14,6 +14,7 @@ export function useChatMessages(client, startSession) {
     const addMessage = useChatStore((state) => state.addMessage);
     const updateMessage = useChatStore((state) => state.updateMessage);
     const setError = useChatStore((state) => state.setError);
+    const setLatestContextSize = useChatStore((state) => state.setLatestContextSize);
     /**
      * Send a message to the agent
      */
@@ -78,8 +79,27 @@ export function useChatMessages(client, startSession) {
             let accumulatedContent = "";
             let streamCompleted = false;
             for await (const chunk of messageStream) {
+                // Update context size if provided (check both _meta.context_size and direct context_size)
+                const chunkMeta = chunk._meta;
+                const contextSizeData = chunkMeta?.context_size || chunk.context_size;
+                if (contextSizeData != null) {
+                    const contextSize = contextSizeData;
+                    logger.info("✅ Received context_size from backend", {
+                        context_size: contextSize,
+                        totalEstimated: contextSize.totalEstimated,
+                        source: chunkMeta?.context_size ? "_meta" : "direct",
+                    });
+                    setLatestContextSize(contextSize);
+                }
+                else {
+                    logger.debug("Chunk does not have context_size", {
+                        hasContextSize: "context_size" in chunk,
+                        hasMeta: "_meta" in chunk,
+                        metaKeys: chunkMeta ? Object.keys(chunkMeta) : null,
+                    });
+                }
                 if (chunk.tokenUsage) {
-                    logger.debug("chunk.tokenUsage", {
+                    logger.debug("Received tokenUsage from backend", {
                         tokenUsage: chunk.tokenUsage,
                     });
                 }
@@ -140,6 +160,7 @@ export function useChatMessages(client, startSession) {
         setIsStreaming,
         setStreamingStartTime,
         setError,
+        setLatestContextSize,
     ]);
     return {
         messages,

package/dist/core/hooks/use-chat-session.js

@@ -14,11 +14,24 @@ export function useChatSession(client, initialSessionId) {
     const clearMessages = useChatStore((state) => state.clearMessages);
     const resetTokens = useChatStore((state) => state.resetTokens);
     const addMessage = useChatStore((state) => state.addMessage);
+    const setLatestContextSize = useChatStore((state) => state.setLatestContextSize);
     // Subscribe to session updates to handle replayed messages
     useEffect(() => {
         if (!client)
             return;
         const unsubscribe = client.onSessionUpdate((update) => {
+            // Extract context size from update metadata if available
+            const updateMeta = update._meta;
+            const contextSizeData = updateMeta?.context_size || update.context_size;
+            if (contextSizeData != null) {
+                const contextSize = contextSizeData;
+                logger.info("✅ Received context_size from session update", {
+                    context_size: contextSize,
+                    totalEstimated: contextSize.totalEstimated,
+                    isReplay: updateMeta?.isReplay,
+                });
+                setLatestContextSize(contextSize);
+            }
             // Handle replayed messages during session loading
             if (update.message) {
                 logger.debug("Session update with message", {
@@ -64,7 +77,7 @@ export function useChatSession(client, initialSessionId) {
             }
         });
         return unsubscribe;
-    }, [client, addMessage]);
+    }, [client, addMessage, setLatestContextSize]);
     /**
      * Connect to the agent (without creating a session)
      */
@@ -99,12 +112,15 @@ export function useChatSession(client, initialSessionId) {
         try {
             setConnectionStatus("connecting");
             setError(null);
+            // Clear existing UI state before loading
+            clearMessages();
+            resetTokens(); // Clears latestContextSize temporarily
             // Try to load session (this will also connect and replay messages)
             const id = await client.loadSession(sessionIdToLoad);
             setSessionId(id);
             setConnectionStatus("connected");
-            // Don't clear messages - they will be populated by session replay
-            resetTokens();
+            // Messages and context size will be restored from backend during replay
+            // Backend sends context_size after replay completes (see adapter.ts:369-401)
             logger.info("Session loaded successfully", { sessionId: id });
         }
         catch (error) {

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

@@ -50,6 +50,12 @@ export declare function useToolCalls(client: AcpClient | null): {
             outputTokens?: number | undefined;
             totalTokens?: number | undefined;
         } | undefined;
+        _meta?: {
+            truncationWarning?: string | undefined;
+            compactionAction?: "compacted" | "truncated" | undefined;
+            originalTokens?: number | undefined;
+            finalTokens?: number | undefined;
+        } | undefined;
     }[]>;
     getToolCallsForSession: (sessionId: string) => ToolCall[];
 };

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

@@ -74,6 +74,15 @@ export declare const DisplayMessage: z.ZodObject<{
             outputTokens: z.ZodOptional<z.ZodNumber>;
             totalTokens: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strip>>;
+        _meta: z.ZodOptional<z.ZodObject<{
+            truncationWarning: z.ZodOptional<z.ZodString>;
+            compactionAction: z.ZodOptional<z.ZodEnum<{
+                compacted: "compacted";
+                truncated: "truncated";
+            }>>;
+            originalTokens: z.ZodOptional<z.ZodNumber>;
+            finalTokens: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>>;
     tokenUsage: z.ZodOptional<z.ZodObject<{
         inputTokens: z.ZodOptional<z.ZodNumber>;
@@ -172,6 +181,15 @@ export declare const ChatSessionState: z.ZodObject<{
                 outputTokens: z.ZodOptional<z.ZodNumber>;
                 totalTokens: z.ZodOptional<z.ZodNumber>;
             }, z.core.$strip>>;
+            _meta: z.ZodOptional<z.ZodObject<{
+                truncationWarning: z.ZodOptional<z.ZodString>;
+                compactionAction: z.ZodOptional<z.ZodEnum<{
+                    compacted: "compacted";
+                    truncated: "truncated";
+                }>>;
+                originalTokens: z.ZodOptional<z.ZodNumber>;
+                finalTokens: z.ZodOptional<z.ZodNumber>;
+            }, z.core.$strip>>;
         }, z.core.$strip>>>;
         tokenUsage: z.ZodOptional<z.ZodObject<{
             inputTokens: z.ZodOptional<z.ZodNumber>;

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

@@ -125,6 +125,15 @@ export declare const ToolCallSchema: z.ZodObject<{
         outputTokens: z.ZodOptional<z.ZodNumber>;
         totalTokens: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>>;
+    _meta: z.ZodOptional<z.ZodObject<{
+        truncationWarning: z.ZodOptional<z.ZodString>;
+        compactionAction: z.ZodOptional<z.ZodEnum<{
+            compacted: "compacted";
+            truncated: "truncated";
+        }>>;
+        originalTokens: z.ZodOptional<z.ZodNumber>;
+        finalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type ToolCall = z.infer<typeof ToolCallSchema>;
 /**

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

@@ -101,6 +101,15 @@ export const ToolCallSchema = z.object({
     completedAt: z.number().optional(),
     /** Token usage metadata for this tool call */
     tokenUsage: TokenUsageSchema.optional(),
+    /** Internal metadata (e.g., truncation warnings) */
+    _meta: z
+        .object({
+        truncationWarning: z.string().optional(),
+        compactionAction: z.enum(["compacted", "truncated"]).optional(),
+        originalTokens: z.number().optional(),
+        finalTokens: z.number().optional(),
+    })
+        .optional(),
 });
 /**
  * Partial update for an existing tool call

package/dist/core/store/chat-store.d.ts

@@ -1,6 +1,18 @@
 import { type LogEntry } from "@townco/core";
 import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
 import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
+/**
+ * Context size breakdown from agent
+ */
+export interface ContextSize {
+    systemPromptTokens: number;
+    userMessagesTokens: number;
+    assistantMessagesTokens: number;
+    toolInputTokens: number;
+    toolResultsTokens: number;
+    totalEstimated: number;
+    llmReportedInputTokens?: number;
+}
 /**
  * Chat store state
  */
@@ -22,6 +34,7 @@ export interface ChatStore {
         outputTokens: number;
         totalTokens: number;
     };
+    latestContextSize: ContextSize | null;
     currentModel: string | null;
     tokenDisplayMode: "context" | "input" | "output";
     logs: LogEntry[];
@@ -49,6 +62,7 @@ export interface ChatStore {
         outputTokens?: number;
         totalTokens?: number;
     }) => void;
+    setLatestContextSize: (contextSize: ContextSize | null) => void;
     setCurrentModel: (model: string) => void;
     resetTokens: () => void;
     cycleTokenDisplayMode: () => void;

package/dist/core/store/chat-store.js

@@ -24,6 +24,7 @@ export const useChatStore = create((set) => ({
         outputTokens: 0,
         totalTokens: 0,
     },
+    latestContextSize: null,
     currentModel: "claude-sonnet-4-5-20250929", // Default model, TODO: get from server
     tokenDisplayMode: "context", // Default to showing context (both billed and current)
     logs: [],
@@ -278,6 +279,7 @@ export const useChatStore = create((set) => ({
                 (state.currentContext.outputTokens + (tokenUsage.outputTokens ?? 0)),
         },
     })),
+    setLatestContextSize: (contextSize) => set({ latestContextSize: contextSize }),
     setCurrentModel: (model) => set({ currentModel: model }),
     resetTokens: () => set({
         totalBilled: {
@@ -290,6 +292,7 @@ export const useChatStore = create((set) => ({
             outputTokens: 0,
             totalTokens: 0,
         },
+        latestContextSize: null,
     }),
     cycleTokenDisplayMode: () => set((state) => {
         const modes = [

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

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/gui/components/ChatView.js

@@ -42,6 +42,11 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
     const error = useChatStore((state) => state.error);
     const currentModel = useChatStore((state) => state.currentModel);
     const [agentName, setAgentName] = useState("Agent");
+    const [agentDescription, setAgentDescription] = useState("This agent can help you with your tasks. Start a conversation by typing a message below.");
+    const [suggestedPrompts, setSuggestedPrompts] = useState([
+        "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
+        "What can you help me with?",
+    ]);
     const [isLargeScreen, setIsLargeScreen] = useState(typeof window !== "undefined" ? window.innerWidth >= 1024 : true);
     const [placeholder, setPlaceholder] = useState("Type a message or / for commands...");
     // Log connection status changes
@@ -51,15 +56,32 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             logger.error("Connection error occurred", { error });
         }
     }, [connectionStatus, error]);
-    // Get agent name from session metadata
+    // Get agent name from session metadata or client info
     useEffect(() => {
-        if (client && sessionId) {
+        if (client) {
+            // Try to get from current session first
             const session = client.getCurrentSession();
             if (session?.metadata?.agentName) {
                 setAgentName(session.metadata.agentName);
+                // We don't currently have description in session metadata, but we could add it
+            }
+            // Fallback to client info (if connected)
+            const agentInfo = client.getAgentInfo();
+            // Prefer displayName (human-readable) over name (programmatic)
+            if (agentInfo.displayName) {
+                setAgentName(agentInfo.displayName);
+            }
+            else if (agentInfo.name) {
+                setAgentName(agentInfo.name);
+            }
+            if (agentInfo.description) {
+                setAgentDescription(agentInfo.description);
+            }
+            if (agentInfo.suggestedPrompts && agentInfo.suggestedPrompts.length > 0) {
+                setSuggestedPrompts(agentInfo.suggestedPrompts);
             }
         }
-    }, [client, sessionId]);
+    }, [client, sessionId, connectionStatus]);
     // Monitor screen size changes and update isLargeScreen state
     useEffect(() => {
         const mediaQuery = window.matchMedia("(min-width: 1024px)");
@@ -123,11 +145,8 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
         },
     ];
-    // Get the latest token usage from the most recent assistant message
-    const latestTokenUsage = messages
-        .slice()
-        .reverse()
-        .find((msg) => msg.role === "assistant" && msg.tokenUsage)?.tokenUsage;
+    // Get the latest context size from the session context
+    const latestContextSize = useChatStore((state) => state.latestContextSize);
     // Command menu items for chat input
     const commandMenuItems = [
         {
@@ -171,12 +190,7 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             },
         },
     ];
-    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0 }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: "This agent can help you with your tasks. Start a conversation by typing a message below.", suggestedPrompts: [
-                                                "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
-                                                "Explain how this works",
-                                                "Create a new feature",
-                                                "Review my changes",
-                                            ], onPromptClick: (prompt) => {
+    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0 }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
                                                 sendMessage(prompt);
                                                 setPlaceholder("Type a message or / for commands...");
                                                 logger.info("Prompt clicked", { prompt });
@@ -199,5 +213,5 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
                                                 previousMessage?.role === "assistant" ? "mt-2" : "mt-6";
                                         }
                                         return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
-                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestTokenUsage && (_jsx(ContextUsageButton, { percentage: calculateTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined), tokens: latestTokenUsage.totalTokens ?? 0, formattedPercentage: formatTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined) }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, {}) }))] }));
+                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestContextSize != null && (_jsx(ContextUsageButton, { contextSize: latestContextSize, modelContextWindow: currentModel?.includes("claude") ? 200000 : 128000 }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, {}) }))] }));
 }

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

@@ -1,7 +1,15 @@
 import * as React from "react";
+export interface ContextSize {
+    systemPromptTokens: number;
+    userMessagesTokens: number;
+    assistantMessagesTokens: number;
+    toolInputTokens: number;
+    toolResultsTokens: number;
+    totalEstimated: number;
+    llmReportedInputTokens?: number;
+}
 export interface ContextUsageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    percentage: number;
-    tokens: number;
-    formattedPercentage: string;
+    contextSize: ContextSize;
+    modelContextWindow: number;
 }
 export declare const ContextUsageButton: React.ForwardRefExoticComponent<ContextUsageButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/ContextUsageButton.js

@@ -3,9 +3,28 @@ import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
-export const ContextUsageButton = React.forwardRef(({ percentage, tokens, formattedPercentage, className, ...props }, ref) => {
-    // Clamp percentage between 0 and 100
+export const ContextUsageButton = React.forwardRef(({ contextSize, modelContextWindow, className, ...props }, ref) => {
+    // Use max of estimated and LLM-reported tokens (LLM reported as fallback if higher)
+    const actualTokens = Math.max(contextSize.totalEstimated, contextSize.llmReportedInputTokens ?? 0);
+    const percentage = (actualTokens / modelContextWindow) * 100;
+    const formattedPercentage = `${percentage.toFixed(1)}%`;
+    // Clamp percentage between 0 and 100 for display
     const clampedPercentage = Math.min(100, Math.max(0, percentage));
+    // Determine color based on percentage thresholds
+    const getColorClass = (pct) => {
+        if (pct < 50)
+            return "text-foreground"; // Normal text color
+        if (pct < 75)
+            return "text-yellow-500"; // Yellow
+        return "text-red-500"; // Red
+    };
+    const colorClass = getColorClass(percentage);
+    // Calculate percentage contribution for each element
+    const calculatePercentage = (tokens) => {
+        if (actualTokens === 0)
+            return "0.0%";
+        return `${((tokens / actualTokens) * 100).toFixed(1)}%`;
+    };
     // SVG parameters
     const size = 16;
     const strokeWidth = 2;
@@ -13,6 +32,6 @@ export const ContextUsageButton = React.forwardRef(({ percentage, tokens, format
     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(Button, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full cursor-default", className), ...props, children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [_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", children: _jsxs("p", { children: ["Context: ", formattedPercentage, " (", tokens.toLocaleString(), " tokens)"] }) })] }) }));
+    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("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), ")"] })] })] }), _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, ")"] })] }) })] }) })] }) }));
 });
 ContextUsageButton.displayName = "ContextUsageButton";

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

@@ -1,6 +1,11 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import type { DisplayMessage } from "./MessageList.js";
+/**
+ * MessageContent component inspired by shadcn.io/ai
+ * Provides the content container with role-based styling
+ * Handles automatic rendering of thinking, waiting states, and content
+ */
 declare const messageContentVariants: (props?: ({
     role?: "user" | "assistant" | "system" | null | undefined;
     variant?: "default" | "outline" | "ghost" | null | undefined;

package/dist/gui/components/MessageContent.js

@@ -1,9 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Loader2Icon } from "lucide-react";
 import * as React from "react";
 import { useChatStore } from "../../core/store/chat-store.js";
-import { formatTokenPercentage } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
@@ -13,57 +11,6 @@ import { ToolCall } from "./ToolCall.js";
  * Provides the content container with role-based styling
  * Handles automatic rendering of thinking, waiting states, and content
  */
-// Synonyms of "thinking" in multiple languages
-const THINKING_WORDS = [
-    "Thinking",
-    "Pensando",
-    "Pensant",
-    "Denkend",
-    "Pensando",
-    "考えている",
-    "생각 중",
-    "思考中",
-    "Размышляя",
-    "Düşünüyor",
-    "Myślący",
-    "Tänkande",
-    "Pensando",
-    "Ajatellen",
-    "Σκεπτόμενος",
-    "חושב",
-    "सोच रहा है",
-    "Berpikir",
-];
-const DOT_ANIMATIONS = ["...", "·..", ".·.", "..·", ".·.", "·.."];
-function WaitingElapsedTime({ startTime }) {
-    const [elapsed, setElapsed] = React.useState(0);
-    const [thinkingWord, setThinkingWord] = React.useState(() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)]);
-    const [dotIndex, setDotIndex] = React.useState(0);
-    React.useEffect(() => {
-        const interval = setInterval(() => {
-            const now = Date.now();
-            const elapsedMs = now - startTime;
-            setElapsed(elapsedMs);
-        }, 100);
-        return () => clearInterval(interval);
-    }, [startTime]);
-    React.useEffect(() => {
-        const wordInterval = setInterval(() => {
-            const randomIndex = Math.floor(Math.random() * THINKING_WORDS.length);
-            setThinkingWord(THINKING_WORDS[randomIndex]);
-        }, 1500);
-        return () => clearInterval(wordInterval);
-    }, []);
-    React.useEffect(() => {
-        const dotInterval = setInterval(() => {
-            setDotIndex((prev) => (prev + 1) % DOT_ANIMATIONS.length);
-        }, 100);
-        return () => clearInterval(dotInterval);
-    }, []);
-    const seconds = (elapsed / 1000).toFixed(1);
-    const animatedDots = DOT_ANIMATIONS[dotIndex];
-    return (_jsxs("span", { className: "text-muted-foreground text-paragraph-sm", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
-}
 const messageContentVariants = cva("w-full rounded-2xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors", {
     variants: {
         role: {
@@ -100,7 +47,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
         const hasThinking = !!thinking;
         // Check if waiting (streaming but no content yet)
         const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
-        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsxs("div", { className: "flex items-center gap-2 opacity-50", children: [_jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), message.role === "assistant" ? ((() => {
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex items-center gap-2", children: _jsx("div", { className: "size-2.5 rounded-full bg-foreground animate-pulse-scale" }) })), message.role === "assistant" ? ((() => {
                     // Sort tool calls by content position
                     const sortedToolCalls = (message.toolCalls || [])
                         .slice()

package/dist/gui/components/ToolCall.js

@@ -137,5 +137,5 @@ export function ToolCall({ toolCall }) {
                                             return (_jsxs("div", { className: "bg-neutral-900 text-neutral-100 p-2 rounded text-[11px] font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
                                         }
                                         return null;
-                                    }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border flex flex-wrap gap-4 text-[10px] text-muted-foreground font-sans", children: [toolCall.tokenUsage && (_jsxs("div", { className: "flex gap-3", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [_jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }))] }));
+                                    }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, toolCall._meta?.truncationWarning && (_jsxs("div", { className: "mx-3 mt-3 mb-0 flex items-center gap-2 rounded-md bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-[11px] text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-900", children: [_jsx("span", { className: "text-yellow-600 dark:text-yellow-500", children: "\u26A0\uFE0F" }), _jsx("span", { children: toolCall._meta.truncationWarning })] })), (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border flex flex-wrap gap-4 text-[10px] text-muted-foreground font-sans", children: [toolCall.tokenUsage && (_jsxs("div", { className: "flex gap-3", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [_jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }))] }));
 }

package/dist/sdk/client/acp-client.d.ts

@@ -76,6 +76,18 @@ export declare class AcpClient {
      * Subscribe to errors
      */
     onError(handler: (error: Error) => void): () => void;
+    /**
+     * Get agent information
+     * - displayName: Human-readable name for UI (preferred)
+     * - name: Programmatic name (fallback if displayName not set)
+     */
+    getAgentInfo(): {
+        name?: string;
+        displayName?: string;
+        version?: string;
+        description?: string;
+        suggestedPrompts?: string[];
+    };
     /**
      * Create transport based on explicit configuration
      */

package/dist/sdk/client/acp-client.js

@@ -57,6 +57,7 @@ export class AcpClient {
         if (transportSessionId) {
             // Use the session ID from the transport
             const now = new Date().toISOString();
+            const agentName = this.transport.getAgentInfo?.()?.name;
             const session = {
                 id: transportSessionId,
                 status: "connected",
@@ -66,6 +67,7 @@ export class AcpClient {
                 messages: [],
                 metadata: {
                     startedAt: now,
+                    agentName,
                 },
             };
             this.sessions.set(transportSessionId, session);
@@ -75,6 +77,7 @@ export class AcpClient {
         // Fallback: generate session ID (for transports that don't auto-create sessions)
         const sessionId = this.generateSessionId();
         const now = new Date().toISOString();
+        const agentName = this.transport.getAgentInfo?.()?.name;
         const session = {
             id: sessionId,
             status: "connecting",
@@ -84,6 +87,7 @@ export class AcpClient {
             messages: [],
             metadata: {
                 startedAt: now,
+                agentName,
             },
         };
         this.sessions.set(sessionId, session);
@@ -116,6 +120,13 @@ export class AcpClient {
         this.currentSessionId = sessionId;
         // Load session from transport (will replay messages via session updates)
         await this.transport.loadSession(sessionId);
+        // Update metadata with agent name if available
+        if (this.transport.getAgentInfo) {
+            const agentInfo = this.transport.getAgentInfo();
+            if (agentInfo.name && session.metadata) {
+                session.metadata.agentName = agentInfo.name;
+            }
+        }
         // Update session status
         this.updateSessionStatus(sessionId, "connected");
         return sessionId;
@@ -200,6 +211,14 @@ export class AcpClient {
             this.errorHandlers.delete(handler);
         };
     }
+    /**
+     * Get agent information
+     * - displayName: Human-readable name for UI (preferred)
+     * - name: Programmatic name (fallback if displayName not set)
+     */
+    getAgentInfo() {
+        return this.transport.getAgentInfo?.() || {};
+    }
     /**
      * Create transport based on explicit configuration
      */