@townco/ui 0.1.73 → 0.1.74

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

@@ -159,6 +159,29 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
             }[] | undefined;
             subagentStreaming?: boolean | undefined;
         }[] | undefined;
+        hookNotifications?: {
+            id: string;
+            hookType: "context_size" | "tool_response";
+            callback: string;
+            status: "error" | "completed" | "triggered";
+            threshold?: number | undefined;
+            currentPercentage?: number | undefined;
+            metadata?: {
+                [x: string]: unknown;
+                action?: string | undefined;
+                messagesRemoved?: number | undefined;
+                tokensSaved?: number | undefined;
+                tokensBeforeCompaction?: number | undefined;
+                summaryTokens?: number | undefined;
+                originalTokens?: number | undefined;
+                finalTokens?: number | undefined;
+                truncationWarning?: string | undefined;
+            } | undefined;
+            error?: string | undefined;
+            triggeredAt?: number | undefined;
+            completedAt?: number | undefined;
+            contentPosition?: number | undefined;
+        }[] | undefined;
         tokenUsage?: {
             inputTokens?: number | undefined;
             outputTokens?: number | undefined;

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

@@ -19,6 +19,7 @@ export function useChatMessages(client, startSession) {
     const updateToolCall = useChatStore((state) => state.updateToolCall);
     const addToolCallToCurrentMessage = useChatStore((state) => state.addToolCallToCurrentMessage);
     const updateToolCallInCurrentMessage = useChatStore((state) => state.updateToolCallInCurrentMessage);
+    const addHookNotificationToCurrentMessage = useChatStore((state) => state.addHookNotificationToCurrentMessage);
     /**
      * Send a message to the agent
      */
@@ -167,6 +168,12 @@ export function useChatMessages(client, startSession) {
                     // Also update in current assistant message (for inline display)
                     updateToolCallInCurrentMessage(chunk.toolCallUpdate);
                 }
+                else if (chunk.type === "hook_notification") {
+                    // Hook notification chunk - hook lifecycle events
+                    logger.debug("Received hook_notification chunk", { chunk });
+                    // Add/update hook notification in current assistant message
+                    addHookNotificationToCurrentMessage(chunk.notification);
+                }
             }
             // Ensure streaming state is cleared even if no explicit isComplete was received
             if (!streamCompleted) {
@@ -204,6 +211,7 @@ export function useChatMessages(client, startSession) {
         updateToolCall,
         addToolCallToCurrentMessage,
         updateToolCallInCurrentMessage,
+        addHookNotificationToCurrentMessage,
     ]);
     return {
         messages,

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

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { HookNotification, HookType } from "../../sdk/schemas/message.js";
 /**
  * Chat UI state schemas
  */
@@ -10,6 +11,40 @@ export declare const DisplayImageAttachment: z.ZodObject<{
     data: z.ZodString;
 }, z.core.$strip>;
 export type DisplayImageAttachment = z.infer<typeof DisplayImageAttachment>;
+/**
+ * Hook notification display state (tracks triggered -> completed/error lifecycle)
+ */
+export declare const HookNotificationDisplay: z.ZodObject<{
+    id: z.ZodString;
+    hookType: z.ZodEnum<{
+        context_size: "context_size";
+        tool_response: "tool_response";
+    }>;
+    callback: z.ZodString;
+    status: z.ZodEnum<{
+        error: "error";
+        completed: "completed";
+        triggered: "triggered";
+    }>;
+    threshold: z.ZodOptional<z.ZodNumber>;
+    currentPercentage: z.ZodOptional<z.ZodNumber>;
+    metadata: z.ZodOptional<z.ZodObject<{
+        action: z.ZodOptional<z.ZodString>;
+        messagesRemoved: z.ZodOptional<z.ZodNumber>;
+        tokensSaved: z.ZodOptional<z.ZodNumber>;
+        tokensBeforeCompaction: z.ZodOptional<z.ZodNumber>;
+        summaryTokens: z.ZodOptional<z.ZodNumber>;
+        originalTokens: z.ZodOptional<z.ZodNumber>;
+        finalTokens: z.ZodOptional<z.ZodNumber>;
+        truncationWarning: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    error: z.ZodOptional<z.ZodString>;
+    triggeredAt: z.ZodOptional<z.ZodNumber>;
+    completedAt: z.ZodOptional<z.ZodNumber>;
+    contentPosition: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+export type HookNotificationDisplay = z.infer<typeof HookNotificationDisplay>;
+export { HookType, HookNotification };
 /**
  * Display message schema (UI representation of messages)
  */
@@ -202,6 +237,35 @@ export declare const DisplayMessage: z.ZodObject<{
         }, z.core.$strip>>>;
         subagentStreaming: z.ZodOptional<z.ZodBoolean>;
     }, z.core.$strip>>>;
+    hookNotifications: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        hookType: z.ZodEnum<{
+            context_size: "context_size";
+            tool_response: "tool_response";
+        }>;
+        callback: z.ZodString;
+        status: z.ZodEnum<{
+            error: "error";
+            completed: "completed";
+            triggered: "triggered";
+        }>;
+        threshold: z.ZodOptional<z.ZodNumber>;
+        currentPercentage: z.ZodOptional<z.ZodNumber>;
+        metadata: z.ZodOptional<z.ZodObject<{
+            action: z.ZodOptional<z.ZodString>;
+            messagesRemoved: z.ZodOptional<z.ZodNumber>;
+            tokensSaved: z.ZodOptional<z.ZodNumber>;
+            tokensBeforeCompaction: z.ZodOptional<z.ZodNumber>;
+            summaryTokens: z.ZodOptional<z.ZodNumber>;
+            originalTokens: z.ZodOptional<z.ZodNumber>;
+            finalTokens: z.ZodOptional<z.ZodNumber>;
+            truncationWarning: z.ZodOptional<z.ZodString>;
+        }, z.core.$loose>>;
+        error: z.ZodOptional<z.ZodString>;
+        triggeredAt: z.ZodOptional<z.ZodNumber>;
+        completedAt: z.ZodOptional<z.ZodNumber>;
+        contentPosition: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>>;
     tokenUsage: z.ZodOptional<z.ZodObject<{
         inputTokens: z.ZodOptional<z.ZodNumber>;
         outputTokens: z.ZodOptional<z.ZodNumber>;
@@ -424,6 +488,35 @@ export declare const ChatSessionState: z.ZodObject<{
             }, z.core.$strip>>>;
             subagentStreaming: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>>>;
+        hookNotifications: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            hookType: z.ZodEnum<{
+                context_size: "context_size";
+                tool_response: "tool_response";
+            }>;
+            callback: z.ZodString;
+            status: z.ZodEnum<{
+                error: "error";
+                completed: "completed";
+                triggered: "triggered";
+            }>;
+            threshold: z.ZodOptional<z.ZodNumber>;
+            currentPercentage: z.ZodOptional<z.ZodNumber>;
+            metadata: z.ZodOptional<z.ZodObject<{
+                action: z.ZodOptional<z.ZodString>;
+                messagesRemoved: z.ZodOptional<z.ZodNumber>;
+                tokensSaved: z.ZodOptional<z.ZodNumber>;
+                tokensBeforeCompaction: z.ZodOptional<z.ZodNumber>;
+                summaryTokens: z.ZodOptional<z.ZodNumber>;
+                originalTokens: z.ZodOptional<z.ZodNumber>;
+                finalTokens: z.ZodOptional<z.ZodNumber>;
+                truncationWarning: z.ZodOptional<z.ZodString>;
+            }, z.core.$loose>>;
+            error: z.ZodOptional<z.ZodString>;
+            triggeredAt: z.ZodOptional<z.ZodNumber>;
+            completedAt: z.ZodOptional<z.ZodNumber>;
+            contentPosition: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>>;
         tokenUsage: z.ZodOptional<z.ZodObject<{
             inputTokens: z.ZodOptional<z.ZodNumber>;
             outputTokens: z.ZodOptional<z.ZodNumber>;

package/dist/core/schemas/chat.js

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { HookNotification, HookType } from "../../sdk/schemas/message.js";
 import { TokenUsageSchema, ToolCallSchema } from "./tool-call.js";
 /**
  * Chat UI state schemas
@@ -10,6 +11,42 @@ export const DisplayImageAttachment = z.object({
     mimeType: z.string(),
     data: z.string(), // base64 encoded
 });
+/**
+ * Hook notification display state (tracks triggered -> completed/error lifecycle)
+ */
+export const HookNotificationDisplay = z.object({
+    id: z.string(),
+    hookType: HookType,
+    callback: z.string(),
+    status: z.enum(["triggered", "completed", "error"]),
+    // From triggered notification
+    threshold: z.number().optional(),
+    currentPercentage: z.number().optional(),
+    // From completed notification
+    metadata: z
+        .object({
+        action: z.string().optional(),
+        messagesRemoved: z.number().optional(),
+        tokensSaved: z.number().optional(),
+        // Context compaction metadata
+        tokensBeforeCompaction: z.number().optional(),
+        summaryTokens: z.number().optional(),
+        // Tool response compaction metadata
+        originalTokens: z.number().optional(),
+        finalTokens: z.number().optional(),
+        truncationWarning: z.string().optional(),
+    })
+        .passthrough()
+        .optional(),
+    // From error notification
+    error: z.string().optional(),
+    // Timestamps
+    triggeredAt: z.number().optional(),
+    completedAt: z.number().optional(),
+    // Position in content where the hook was triggered (for inline rendering)
+    contentPosition: z.number().optional(),
+});
+export { HookType, HookNotification };
 /**
  * Display message schema (UI representation of messages)
  */
@@ -22,6 +59,7 @@ export const DisplayMessage = z.object({
     streamingStartTime: z.number().optional(), // Unix timestamp when streaming started
     metadata: z.record(z.string(), z.unknown()).optional(),
     toolCalls: z.array(ToolCallSchema).optional(),
+    hookNotifications: z.array(HookNotificationDisplay).optional(), // Hook notifications for this message
     tokenUsage: TokenUsageSchema.optional(), // Token usage for this message
     images: z.array(DisplayImageAttachment).optional(), // Image attachments for user messages
 });

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

@@ -1,5 +1,6 @@
 import { type LogEntry } from "@townco/core";
 import type { TodoItem } from "../../gui/components/TodoListItem.js";
+import type { HookNotification } from "../../sdk/schemas/message.js";
 import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
 import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
 /**
@@ -19,6 +20,7 @@ export interface ContextSize {
     toolResultsTokens: number;
     totalEstimated: number;
     llmReportedInputTokens?: number;
+    modelContextWindow?: number;
 }
 /**
  * Chat store state
@@ -59,6 +61,7 @@ export interface ChatStore {
     updateToolCall: (sessionId: string, update: ToolCallUpdate) => void;
     addToolCallToCurrentMessage: (toolCall: ToolCall) => void;
     updateToolCallInCurrentMessage: (update: ToolCallUpdate) => void;
+    addHookNotificationToCurrentMessage: (notification: HookNotification) => void;
     setInputValue: (value: string) => void;
     setInputSubmitting: (submitting: boolean) => void;
     addFileAttachment: (file: InputState["attachedFiles"][number]) => void;

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

@@ -4,6 +4,43 @@ import { mergeToolCallUpdate } from "../schemas/tool-call.js";
 const logger = createLogger("chat-store", "debug");
 // Constants to avoid creating new empty arrays
 const EMPTY_TODOS = [];
+/**
+ * Helper to create a HookNotificationDisplay from a HookNotification
+ */
+function createHookNotificationDisplay(notification) {
+    const base = {
+        id: `hook_${Date.now()}_${notification.hookType}_${notification.callback}`,
+        hookType: notification.hookType,
+        callback: notification.callback,
+    };
+    switch (notification.type) {
+        case "hook_triggered":
+            return {
+                ...base,
+                status: "triggered",
+                threshold: notification.threshold,
+                currentPercentage: notification.currentPercentage,
+                // Use timestamp from backend if available, fallback to Date.now()
+                triggeredAt: notification.triggeredAt ?? Date.now(),
+            };
+        case "hook_completed":
+            return {
+                ...base,
+                status: "completed",
+                metadata: notification.metadata,
+                // Use timestamp from backend if available, fallback to Date.now()
+                completedAt: notification.completedAt ?? Date.now(),
+            };
+        case "hook_error":
+            return {
+                ...base,
+                status: "error",
+                error: notification.error,
+                // Use timestamp from backend if available, fallback to Date.now()
+                completedAt: notification.completedAt ?? Date.now(),
+            };
+    }
+}
 // Cache for memoized todos to prevent infinite re-render loops
 let cachedTodos = {
     sessionId: null,
@@ -267,6 +304,102 @@ export const useChatStore = create((set) => ({
         };
         return { messages };
     }),
+    addHookNotificationToCurrentMessage: (notification) => set((state) => {
+        // Find the most recent assistant message
+        const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
+        if (lastAssistantIndex === -1) {
+            // No assistant message exists yet - create one with the hook notification
+            logger.debug("No assistant message found, creating one for hook notification");
+            const hookDisplay = {
+                ...createHookNotificationDisplay(notification),
+                contentPosition: 0, // Hook at the start of the message
+            };
+            const newMessage = {
+                id: `msg_${Date.now()}_assistant`,
+                role: "assistant",
+                content: "",
+                timestamp: new Date().toISOString(),
+                isStreaming: false,
+                hookNotifications: [hookDisplay],
+            };
+            return { messages: [...state.messages, newMessage] };
+        }
+        const messages = [...state.messages];
+        const lastAssistantMsg = messages[lastAssistantIndex];
+        if (!lastAssistantMsg)
+            return state;
+        const existingNotifications = lastAssistantMsg.hookNotifications || [];
+        // Track the content position where this hook was triggered (for inline rendering)
+        const contentPosition = lastAssistantMsg.content.length;
+        if (notification.type === "hook_triggered") {
+            // Store triggered notification immediately to show loading state
+            logger.debug("Adding hook_triggered notification for loading state", {
+                hookType: notification.hookType,
+                callback: notification.callback,
+                contentPosition,
+            });
+            const hookDisplay = {
+                ...createHookNotificationDisplay(notification),
+                contentPosition,
+            };
+            const updatedNotifications = [...existingNotifications, hookDisplay];
+            messages[lastAssistantIndex] = {
+                ...lastAssistantMsg,
+                hookNotifications: updatedNotifications,
+            };
+            return { messages };
+        }
+        // For completed/error: find and merge with existing triggered notification
+        let updatedNotifications;
+        const existingIndex = existingNotifications.findIndex((n) => n.hookType === notification.hookType &&
+            n.callback === notification.callback &&
+            n.status === "triggered");
+        if (existingIndex !== -1) {
+            // Merge: preserve triggered data (threshold, currentPercentage, triggeredAt),
+            // overlay completion data
+            const existing = existingNotifications[existingIndex];
+            updatedNotifications = [...existingNotifications];
+            // Use backend timestamp if available, fallback to Date.now()
+            const completedAt = notification.type === "hook_completed" ||
+                notification.type === "hook_error"
+                ? (notification.completedAt ?? Date.now())
+                : Date.now();
+            updatedNotifications[existingIndex] = {
+                ...existing, // Preserves threshold, currentPercentage, triggeredAt
+                status: notification.type === "hook_completed" ? "completed" : "error",
+                completedAt,
+                ...(notification.type === "hook_completed" && notification.metadata
+                    ? { metadata: notification.metadata }
+                    : {}),
+                ...(notification.type === "hook_error"
+                    ? { error: notification.error }
+                    : {}),
+            };
+            logger.debug("Merged hook notification with triggered state", {
+                hookType: notification.hookType,
+                status: updatedNotifications[existingIndex]?.status,
+            });
+        }
+        else {
+            // No triggered notification found - add completed/error directly
+            // This handles cases where triggered was missed or hooks complete very fast
+            const hookDisplay = {
+                ...createHookNotificationDisplay(notification),
+                contentPosition,
+            };
+            updatedNotifications = [...existingNotifications, hookDisplay];
+            logger.debug("Added hook notification without prior triggered state", {
+                hookType: notification.hookType,
+                callback: notification.callback,
+                contentPosition,
+            });
+        }
+        messages[lastAssistantIndex] = {
+            ...lastAssistantMsg,
+            hookNotifications: updatedNotifications,
+        };
+        return { messages };
+    }),
     updateToolCall: (sessionId, update) => set((state) => {
         const sessionToolCalls = state.toolCalls[sessionId] || [];
         const existingIndex = sessionToolCalls.findIndex((tc) => tc.id === update.id);

package/dist/gui/components/ChatLayout.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion, useMotionValue } from "framer-motion";
 import { ArrowDown } from "lucide-react";
 import * as React from "react";
+import { useScrollToBottom } from "../hooks/use-scroll-to-bottom.js";
 import { motionEasing } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { Toaster } from "./Sonner.js";
@@ -60,60 +61,19 @@ const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, childr
 });
 ChatLayoutBody.displayName = "ChatLayout.Body";
 const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, initialScrollToBottom = true, ...props }, ref) => {
-    const [showScrollButton, setShowScrollButton] = React.useState(false);
-    const scrollContainerRef = React.useRef(null);
-    const hasInitialScrolledRef = React.useRef(false); // Track if initial scroll has happened
+    const { containerRef, endRef, isAtBottom, scrollToBottom } = useScrollToBottom();
+    const hasInitialScrolledRef = React.useRef(false);
     // Merge refs
-    React.useImperativeHandle(ref, () => scrollContainerRef.current);
-    // Check if user is at bottom of scroll
-    const checkScrollPosition = React.useCallback(() => {
-        const container = scrollContainerRef.current;
-        if (!container)
-            return false;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        const isAtBottom = distanceFromBottom < 100; // 100px threshold
-        setShowScrollButton(!isAtBottom && showScrollToBottom);
-        onScrollChange?.(isAtBottom);
-        return isAtBottom;
-    }, [onScrollChange, showScrollToBottom]);
-    // Handle scroll events - update button visibility
-    const handleScroll = React.useCallback(() => {
-        checkScrollPosition();
-    }, [checkScrollPosition]);
-    // Scroll to bottom function (for button click)
-    const scrollToBottom = React.useCallback((smooth = true) => {
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        container.scrollTo({
-            top: container.scrollHeight,
-            behavior: smooth ? "smooth" : "auto",
-        });
-    }, []);
-    // Auto-scroll when content changes ONLY if user is currently at the bottom
+    React.useImperativeHandle(ref, () => containerRef.current);
+    // Notify parent of scroll position changes
     React.useEffect(() => {
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        // Check if user is CURRENTLY at the bottom (not just "was" at bottom)
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        const isCurrentlyAtBottom = distanceFromBottom < 100;
-        // Only auto-scroll if user is at the bottom right now
-        if (isCurrentlyAtBottom) {
-            requestAnimationFrame(() => {
-                container.scrollTop = container.scrollHeight;
-            });
-        }
-        // Update the scroll button visibility
-        setShowScrollButton(!isCurrentlyAtBottom && showScrollToBottom);
-    }, [children, showScrollToBottom]);
+        onScrollChange?.(isAtBottom);
+    }, [isAtBottom, onScrollChange]);
     // Scroll to bottom on initial mount only (for session replay)
     React.useEffect(() => {
         if (!initialScrollToBottom)
             return undefined;
-        const container = scrollContainerRef.current;
+        const container = containerRef.current;
         if (!container)
             return undefined;
         // Only scroll on initial mount, not on subsequent renders
@@ -126,8 +86,10 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
             return () => clearTimeout(timeout);
         }
         return undefined;
-    }, [initialScrollToBottom]);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+    }, [initialScrollToBottom, containerRef]);
+    // Show scroll button when not at bottom
+    const showScrollButton = !isAtBottom && showScrollToBottom;
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs("div", { ref: containerRef, className: cn("h-full overflow-y-auto flex flex-col", className), ...props, children: [_jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }), _jsx("div", { ref: endRef, className: "min-h-[24px] min-w-[24px] shrink-0" })] }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom("smooth"), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {

package/dist/gui/components/ChatView.js

@@ -33,7 +33,7 @@ function OpenFilesButton({ children, }) {
 // Note: Keyboard shortcut (Cmd+B / Ctrl+B) for toggling the right panel
 // is now handled internally by ChatLayout.Root
 // Chat input with attachment handling
-function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, currentModel, commandMenuItems, }) {
+function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, commandMenuItems, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
     const addFileAttachment = useChatStore((state) => state.addFileAttachment);
     const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
@@ -42,7 +42,7 @@ function ChatInputWithAttachments({ client, startSession, placeholder, latestCon
             addFileAttachment(file);
         }
     };
-    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), attachedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 p-3 border-b border-border", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border border-border", children: [_jsx("img", { src: `data:${file.mimeType};base64,${file.data}`, alt: file.name, className: "h-20 w-20 object-cover" }), _jsx("button", { type: "button", onClick: () => removeFileAttachment(index), className: "absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(X, { className: "size-3" }) })] }, index))) })), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true, onFilesDropped: handleFilesSelected }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected }), 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" }) })] })] })] }));
+    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), attachedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 p-3 border-b border-border", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border border-border", children: [_jsx("img", { src: `data:${file.mimeType};base64,${file.data}`, alt: file.name, className: "h-20 w-20 object-cover" }), _jsx("button", { type: "button", onClick: () => removeFileAttachment(index), className: "absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(X, { className: "size-3" }) })] }, index))) })), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true, onFilesDropped: handleFilesSelected }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected }), latestContextSize != null && (_jsx(ContextUsageButton, { contextSize: latestContextSize }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }));
 }
 // Controlled Tabs component for the aside panel
 function AsideTabs({ todos, tools, mcps, subagents, }) {
@@ -70,7 +70,6 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const { messages, sendMessage } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
     const error = useChatStore((state) => state.error);
-    const currentModel = useChatStore((state) => state.currentModel);
     const [agentName, setAgentName] = useState("Agent");
     const [agentDescription, setAgentDescription] = useState("This research agent can help you find and summarize information, analyze sources, track tasks, and answer questions about your research. Start by typing a message below to begin your investigation.");
     const [suggestedPrompts, setSuggestedPrompts] = useState([
@@ -242,5 +241,5 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                                 : "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: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }) })] }));
+                                                }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }) })] }));
 }

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

@@ -9,9 +9,9 @@ export interface ContextSize {
     toolResultsTokens: number;
     totalEstimated: number;
     llmReportedInputTokens?: number;
+    modelContextWindow?: number;
 }
 export interface ContextUsageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     contextSize: ContextSize;
-    modelContextWindow: number;
 }
 export declare const ContextUsageButton: React.ForwardRefExoticComponent<ContextUsageButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/ContextUsageButton.js

@@ -3,9 +3,13 @@ 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(({ contextSize, modelContextWindow, className, ...props }, ref) => {
-    // Use max of estimated and LLM-reported tokens (LLM reported as fallback if higher)
+// Default context window for backward compatibility (should not be used in practice)
+const DEFAULT_MODEL_CONTEXT_WINDOW = 200000;
+export const ContextUsageButton = React.forwardRef(({ contextSize, className, ...props }, ref) => {
+    // Use max of estimated and LLM-reported tokens (same logic as backend hook executor)
     const actualTokens = Math.max(contextSize.totalEstimated, contextSize.llmReportedInputTokens ?? 0);
+    // Use model context window from backend, or default for backward compatibility
+    const modelContextWindow = contextSize.modelContextWindow ?? DEFAULT_MODEL_CONTEXT_WINDOW;
     const percentage = (actualTokens / modelContextWindow) * 100;
     const formattedPercentage = `${percentage.toFixed(1)}%`;
     // Clamp percentage between 0 and 100 for display

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

@@ -0,0 +1,9 @@
+import type { HookNotificationDisplay } from "../../core/schemas/chat.js";
+export interface HookNotificationProps {
+    notification: HookNotificationDisplay;
+}
+/**
+ * HookNotification component - displays a hook notification inline with messages
+ * Shows triggered (loading), completed, or error states
+ */
+export declare function HookNotification({ notification }: HookNotificationProps): import("react/jsx-runtime").JSX.Element;