@townco/ui 0.1.45 → 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,7 +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 setLatestContextInputTokens = useChatStore((state) => state.setLatestContextInputTokens);
+    const setLatestContextSize = useChatStore((state) => state.setLatestContextSize);
     /**
      * Send a message to the agent
      */
@@ -79,14 +79,24 @@ export function useChatMessages(client, startSession) {
             let accumulatedContent = "";
             let streamCompleted = false;
             for await (const chunk of messageStream) {
-                // Update context input tokens if provided
-                if ("contextInputTokens" in chunk &&
-                    chunk.contextInputTokens != null) {
-                    const tokens = chunk.contextInputTokens;
-                    logger.debug("Received contextInputTokens from backend", {
-                        contextInputTokens: tokens,
+                // 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,
                     });
-                    setLatestContextInputTokens(tokens);
                 }
                 if (chunk.tokenUsage) {
                     logger.debug("Received tokenUsage from backend", {
@@ -150,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,7 +34,7 @@ export interface ChatStore {
         outputTokens: number;
         totalTokens: number;
     };
-    latestContextInputTokens: number | null;
+    latestContextSize: ContextSize | null;
     currentModel: string | null;
     tokenDisplayMode: "context" | "input" | "output";
     logs: LogEntry[];
@@ -50,7 +62,7 @@ export interface ChatStore {
         outputTokens?: number;
         totalTokens?: number;
     }) => void;
-    setLatestContextInputTokens: (tokens: number | null) => void;
+    setLatestContextSize: (contextSize: ContextSize | null) => void;
     setCurrentModel: (model: string) => void;
     resetTokens: () => void;
     cycleTokenDisplayMode: () => void;

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

@@ -24,7 +24,7 @@ export const useChatStore = create((set) => ({
         outputTokens: 0,
         totalTokens: 0,
     },
-    latestContextInputTokens: null,
+    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: [],
@@ -279,7 +279,7 @@ export const useChatStore = create((set) => ({
                 (state.currentContext.outputTokens + (tokenUsage.outputTokens ?? 0)),
         },
     })),
-    setLatestContextInputTokens: (tokens) => set({ latestContextInputTokens: tokens }),
+    setLatestContextSize: (contextSize) => set({ latestContextSize: contextSize }),
     setCurrentModel: (model) => set({ currentModel: model }),
     resetTokens: () => set({
         totalBilled: {
@@ -292,7 +292,7 @@ export const useChatStore = create((set) => ({
             outputTokens: 0,
             totalTokens: 0,
         },
-        latestContextInputTokens: null,
+        latestContextSize: null,
     }),
     cycleTokenDisplayMode: () => set((state) => {
         const modes = [

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,8 +145,8 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
         },
     ];
-    // Get the latest context input tokens from the session context
-    const latestContextInputTokens = useChatStore((state) => state.latestContextInputTokens);
+    // Get the latest context size from the session context
+    const latestContextSize = useChatStore((state) => state.latestContextSize);
     // Command menu items for chat input
     const commandMenuItems = [
         {
@@ -168,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 });
@@ -196,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, {}), latestContextInputTokens != null && (_jsx(ContextUsageButton, { percentage: calculateTokenPercentage(latestContextInputTokens, currentModel ?? undefined), tokens: latestContextInputTokens, formattedPercentage: formatTokenPercentage(latestContextInputTokens, 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
      */

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

@@ -13,9 +13,9 @@ export type MessageRole = z.infer<typeof MessageRole>;
  * Content type for messages
  */
 export declare const ContentType: z.ZodEnum<{
-    file: "file";
     text: "text";
     image: "image";
+    file: "file";
     tool_call: "tool_call";
     tool_result: "tool_result";
 }>;
@@ -25,9 +25,9 @@ export type ContentType = z.infer<typeof ContentType>;
  */
 export declare const BaseContent: z.ZodObject<{
     type: z.ZodEnum<{
-        file: "file";
         text: "text";
         image: "image";
+        file: "file";
         tool_call: "tool_call";
         tool_result: "tool_result";
     }>;
@@ -197,5 +197,16 @@ export declare const MessageChunk: z.ZodObject<{
         totalTokens: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>>;
     contextInputTokens: z.ZodOptional<z.ZodNumber>;
+    _meta: z.ZodOptional<z.ZodObject<{
+        context_size: z.ZodOptional<z.ZodObject<{
+            systemPromptTokens: z.ZodNumber;
+            userMessagesTokens: z.ZodNumber;
+            assistantMessagesTokens: z.ZodNumber;
+            toolInputTokens: z.ZodNumber;
+            toolResultsTokens: z.ZodNumber;
+            totalEstimated: z.ZodNumber;
+            llmReportedInputTokens: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type MessageChunk = z.infer<typeof MessageChunk>;

package/dist/sdk/schemas/message.js

@@ -100,4 +100,19 @@ export const MessageChunk = z.object({
     })
         .optional(),
     contextInputTokens: z.number().optional(),
+    _meta: z
+        .object({
+        context_size: z
+            .object({
+            systemPromptTokens: z.number(),
+            userMessagesTokens: z.number(),
+            assistantMessagesTokens: z.number(),
+            toolInputTokens: z.number(),
+            toolResultsTokens: z.number(),
+            totalEstimated: z.number(),
+            llmReportedInputTokens: z.number().optional(),
+        })
+            .optional(),
+    })
+        .optional(),
 });

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

@@ -3,12 +3,12 @@ import { z } from "zod";
  * Session status
  */
 export declare const SessionStatus: z.ZodEnum<{
-    error: "error";
     idle: "idle";
     connecting: "connecting";
     connected: "connected";
     active: "active";
     streaming: "streaming";
+    error: "error";
     disconnected: "disconnected";
 }>;
 export type SessionStatus = z.infer<typeof SessionStatus>;
@@ -40,12 +40,12 @@ export type SessionMetadata = z.infer<typeof SessionMetadata>;
 export declare const Session: z.ZodObject<{
     id: z.ZodString;
     status: z.ZodEnum<{
-        error: "error";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
         active: "active";
         streaming: "streaming";
+        error: "error";
         disconnected: "disconnected";
     }>;
     config: z.ZodObject<{
@@ -108,12 +108,12 @@ export type Session = z.infer<typeof Session>;
 export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
-        error: "error";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
         active: "active";
         streaming: "streaming";
+        error: "error";
         disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
@@ -154,6 +154,7 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, z.core.$strip>>;
     error: z.ZodOptional<z.ZodString>;
+    _meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     type: z.ZodLiteral<"tool_call">;
     toolCall: z.ZodObject<{
         id: z.ZodString;
@@ -212,17 +213,26 @@ export declare const SessionUpdate: z.ZodUnion<readonly [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>;
     messageId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
-        error: "error";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
         active: "active";
         streaming: "streaming";
+        error: "error";
         disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
@@ -263,6 +273,7 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, z.core.$strip>>;
     error: z.ZodOptional<z.ZodString>;
+    _meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     type: z.ZodLiteral<"tool_call_update">;
     toolCallUpdate: z.ZodObject<{
         id: z.ZodString;
@@ -308,12 +319,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
 }, z.core.$strip>, z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
-        error: "error";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
         active: "active";
         streaming: "streaming";
+        error: "error";
         disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
@@ -354,6 +365,7 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, z.core.$strip>>;
     error: z.ZodOptional<z.ZodString>;
+    _meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     type: z.ZodLiteral<"tool_output">;
     toolOutput: z.ZodObject<{
         id: z.ZodString;
@@ -364,12 +376,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
 }, z.core.$strip>, z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
-        error: "error";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
         active: "active";
         streaming: "streaming";
+        error: "error";
         disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
@@ -410,6 +422,7 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, z.core.$strip>>;
     error: z.ZodOptional<z.ZodString>;
+    _meta: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     type: z.ZodOptional<z.ZodLiteral<"generic">>;
 }, z.core.$strip>]>;
 export type SessionUpdate = z.infer<typeof SessionUpdate>;

package/dist/sdk/schemas/session.js

@@ -52,6 +52,7 @@ const BaseSessionUpdate = z.object({
     status: SessionStatus.optional(),
     message: Message.optional(),
     error: z.string().optional(),
+    _meta: z.record(z.string(), z.unknown()).optional(),
 });
 /**
  * Session update with tool call (sessionUpdate: "tool_call")

package/dist/sdk/transports/http.d.ts

@@ -21,6 +21,7 @@ export declare class HttpTransport implements Transport {
     private options;
     private isReceivingMessages;
     private isInReplayMode;
+    private agentInfo?;
     constructor(options: HttpTransportOptions);
     connect(): Promise<void>;
     /**
@@ -34,6 +35,13 @@ export declare class HttpTransport implements Transport {
     isConnected(): boolean;
     onSessionUpdate(callback: (update: SessionUpdate) => void): () => void;
     onError(callback: (error: Error) => void): () => void;
+    getAgentInfo(): {
+        name?: string;
+        displayName?: string;
+        version?: string;
+        description?: string;
+        suggestedPrompts?: string[];
+    };
     /**
      * Send an ACP RPC request to the server
      */

package/dist/sdk/transports/http.js

@@ -22,6 +22,7 @@ export class HttpTransport {
     options;
     isReceivingMessages = false;
     isInReplayMode = false; // True during session replay, ignores non-replay streaming
+    agentInfo;
     constructor(options) {
         // Ensure baseUrl doesn't end with a slash
         this.options = { ...options, baseUrl: options.baseUrl.replace(/\/$/, "") };
@@ -43,6 +44,30 @@ export class HttpTransport {
                 },
             };
             const initResponse = await this.sendRpcRequest("initialize", initRequest);
+            if (initResponse.agentInfo) {
+                // Read description and suggestedPrompts from _meta extension point (ACP protocol extension)
+                const description = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "agentDescription" in initResponse._meta
+                    ? String(initResponse._meta.agentDescription)
+                    : undefined;
+                const suggestedPrompts = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "suggestedPrompts" in initResponse._meta &&
+                    Array.isArray(initResponse._meta.suggestedPrompts)
+                    ? initResponse._meta.suggestedPrompts
+                    : undefined;
+                this.agentInfo = {
+                    name: initResponse.agentInfo.name,
+                    // title is the ACP field for human-readable display name
+                    ...(initResponse.agentInfo.title
+                        ? { displayName: initResponse.agentInfo.title }
+                        : {}),
+                    version: initResponse.agentInfo.version,
+                    ...(description ? { description } : {}),
+                    ...(suggestedPrompts ? { suggestedPrompts } : {}),
+                };
+            }
             logger.info("ACP connection initialized", { initResponse });
             // Step 2: Create a new session
             const sessionRequest = {
@@ -89,6 +114,30 @@ export class HttpTransport {
             };
             logger.info("Loading session - initializing connection", { sessionId });
             const initResponse = await this.sendRpcRequest("initialize", initRequest);
+            if (initResponse.agentInfo) {
+                // Read description and suggestedPrompts from _meta extension point (ACP protocol extension)
+                const description = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "agentDescription" in initResponse._meta
+                    ? String(initResponse._meta.agentDescription)
+                    : undefined;
+                const suggestedPrompts = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "suggestedPrompts" in initResponse._meta &&
+                    Array.isArray(initResponse._meta.suggestedPrompts)
+                    ? initResponse._meta.suggestedPrompts
+                    : undefined;
+                this.agentInfo = {
+                    name: initResponse.agentInfo.name,
+                    // title is the ACP field for human-readable display name
+                    ...(initResponse.agentInfo.title
+                        ? { displayName: initResponse.agentInfo.title }
+                        : {}),
+                    version: initResponse.agentInfo.version,
+                    ...(description ? { description } : {}),
+                    ...(suggestedPrompts ? { suggestedPrompts } : {}),
+                };
+            }
             // Check if loadSession is supported
             if (!initResponse.agentCapabilities?.loadSession) {
                 logger.error("Agent does not support loading sessions", {
@@ -287,6 +336,9 @@ export class HttpTransport {
             this.errorCallbacks.delete(callback);
         };
     }
+    getAgentInfo() {
+        return this.agentInfo || {};
+    }
     /**
      * Send an ACP RPC request to the server
      */
@@ -759,12 +811,6 @@ export class HttpTransport {
             if (this.isInReplayMode && !isReplay) {
                 return;
             }
-            // Handle agent message chunks
-            const sessionUpdate = {
-                type: "generic",
-                sessionId,
-                status: "active",
-            };
             // Extract token usage from _meta if present
             const tokenUsage = update._meta &&
                 typeof update._meta === "object" &&
@@ -778,6 +824,19 @@ export class HttpTransport {
                 typeof update._meta.contextInputTokens === "number"
                 ? update._meta.contextInputTokens
                 : undefined;
+            // Extract context_size from _meta if present
+            const context_size = update._meta &&
+                typeof update._meta === "object" &&
+                "context_size" in update._meta
+                ? update._meta.context_size
+                : undefined;
+            // Handle agent message chunks
+            const sessionUpdate = {
+                type: "generic",
+                sessionId,
+                status: "active",
+                _meta: update._meta,
+            };
             // Queue message chunks if present (but skip during replay)
             // For agent_message_chunk, content is an object, not an array
             const content = update.content;
@@ -791,6 +850,7 @@ export class HttpTransport {
                         contentDelta: { type: "text", text: contentObj.text },
                         tokenUsage,
                         contextInputTokens,
+                        _meta: context_size ? { context_size } : undefined,
                         isComplete: false,
                     };
                 }
@@ -832,8 +892,11 @@ export class HttpTransport {
                     this.notifySessionUpdate(messageSessionUpdate);
                 }
             }
-            // Only send generic session update during live streaming (not replay)
-            if (!isReplay) {
+            // Send session update for:
+            // 1. Live streaming (not replay)
+            // 2. Replay messages with context_size (need to restore context on session load)
+            const hasContextSize = sessionUpdate._meta && "context_size" in sessionUpdate._meta;
+            if (!isReplay || hasContextSize) {
                 this.notifySessionUpdate(sessionUpdate);
             }
         }

package/dist/sdk/transports/stdio.d.ts

@@ -15,6 +15,7 @@ export declare class StdioTransport implements Transport {
     private currentSessionId;
     private chunkResolvers;
     private streamComplete;
+    private agentInfo?;
     private originalConsole;
     constructor(options: StdioTransportOptions);
     connect(): Promise<void>;
@@ -24,6 +25,13 @@ export declare class StdioTransport implements Transport {
     isConnected(): boolean;
     onSessionUpdate(callback: (update: SessionUpdate) => void): () => void;
     onError(callback: (error: Error) => void): () => void;
+    getAgentInfo(): {
+        name?: string;
+        displayName?: string;
+        version?: string;
+        description?: string;
+        suggestedPrompts?: string[];
+    };
     private notifySessionUpdate;
     private notifyError;
 }

package/dist/sdk/transports/stdio.js

@@ -18,6 +18,7 @@ export class StdioTransport {
     currentSessionId = null;
     chunkResolvers = [];
     streamComplete = false;
+    agentInfo;
     originalConsole = null;
     constructor(options) {
         this.options = options;
@@ -353,6 +354,30 @@ export class StdioTransport {
                     },
                 },
             });
+            if (initResponse.agentInfo) {
+                // Read description and suggestedPrompts from _meta extension point (ACP protocol extension)
+                const description = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "agentDescription" in initResponse._meta
+                    ? String(initResponse._meta.agentDescription)
+                    : undefined;
+                const suggestedPrompts = initResponse._meta &&
+                    typeof initResponse._meta === "object" &&
+                    "suggestedPrompts" in initResponse._meta &&
+                    Array.isArray(initResponse._meta.suggestedPrompts)
+                    ? initResponse._meta.suggestedPrompts
+                    : undefined;
+                this.agentInfo = {
+                    name: initResponse.agentInfo.name,
+                    // title is the ACP field for human-readable display name
+                    ...(initResponse.agentInfo.title
+                        ? { displayName: initResponse.agentInfo.title }
+                        : {}),
+                    version: initResponse.agentInfo.version,
+                    ...(description ? { description } : {}),
+                    ...(suggestedPrompts ? { suggestedPrompts } : {}),
+                };
+            }
             logger.info("ACP connection initialized", { initResponse });
             this.connected = true;
         }
@@ -511,6 +536,9 @@ export class StdioTransport {
             this.errorCallbacks.delete(callback);
         };
     }
+    getAgentInfo() {
+        return this.agentInfo || {};
+    }
     notifySessionUpdate(update) {
         for (const callback of this.sessionUpdateCallbacks) {
             try {

package/dist/sdk/transports/types.d.ts

@@ -36,6 +36,18 @@ export interface Transport {
      * Subscribe to errors
      */
     onError(callback: (error: Error) => void): () => void;
+    /**
+     * Get agent information
+     * - displayName: Human-readable name for UI (from ACP title field)
+     * - name: Programmatic name (fallback if displayName not set)
+     */
+    getAgentInfo?(): {
+        name?: string;
+        displayName?: string;
+        version?: string;
+        description?: string;
+        suggestedPrompts?: string[];
+    };
 }
 /**
  * Stdio transport options

package/dist/tui/components/ToolCall.js

@@ -37,5 +37,5 @@ export function ToolCall({ toolCall }) {
         ? ((toolCall.tokenUsage.inputTokens / 1_000_000) * 3 +
             (toolCall.tokenUsage.outputTokens / 1_000_000) * 15).toFixed(4)
         : null;
-    return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: statusColors[toolCall.status], children: statusIndicators[toolCall.status] }), _jsx(Text, { color: "cyan", bold: true, children: "[TOOL]" }), _jsx(Text, { children: toolCall.title }), startTime && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", startTime] })), duration && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", duration, "s"] })), cost && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| $", cost] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: statusColors[toolCall.status], children: statusIndicators[toolCall.status] }), _jsx(Text, { color: "cyan", bold: true, children: "[TOOL]" }), _jsx(Text, { children: toolCall.title }), startTime && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", startTime] })), duration && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| ", duration, "s"] })), cost && (_jsxs(Text, { color: "gray", dimColor: true, children: ["| $", cost] }))] }), toolCall._meta?.truncationWarning && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "yellow", bold: true, children: ["\u26A0\uFE0F ", toolCall._meta.truncationWarning] }) }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
-    "@townco/core": "0.0.23",
+    "@townco/core": "0.0.24",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -63,7 +63,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.42",
+    "@townco/tsconfig": "0.1.43",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/src/styles/global.css

@@ -378,3 +378,18 @@
     transform: translateX(0);
   }
 }
+
+@keyframes pulse-scale {
+  0%, 100% {
+    transform: scale(1);
+    background-color: var(--color-neutral-500);
+  }
+  50% {
+    transform: scale(.9);
+    background-color: var(--color-neutral-500);
+  }
+}
+
+.animate-pulse-scale {
+  animation: pulse-scale 1s ease-in-out infinite;
+}