@townco/ui 0.1.82 → 0.1.93

package/dist/gui/components/ChatView.js

@@ -1,11 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { ArrowUp, Bug, PanelRight, Settings, X } from "lucide-react";
+import { ArrowUp, Bug, Moon, PanelRight, Settings, Sun, X } from "lucide-react";
+import * as React from "react";
 import { useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.js";
+import { useDocumentTitle } from "../hooks/use-favicon.js";
 import { cn } from "../lib/utils.js";
-import { AppSidebar, ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SidebarInset, SidebarProvider, SidebarToggle, SourcesTabContent, Tabs, TabsContent, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
+import { AppSidebar, ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputParameters, ChatInputRoot, ChatInputStop, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, EditableUserMessage, FilesTabContent, IconButton, Message, MessageActions, MessageContent, PanelTabsHeader, SettingsTabContent, SidebarInset, SidebarProvider, SidebarToggle, SourcesTabContent, Tabs, TabsContent, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, useTheme, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -33,7 +35,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, commandMenuItems, }) {
+function ChatInputWithAttachments({ client, startSession, placeholder, commandMenuItems, onCancel, promptParameters, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
     const addFileAttachment = useChatStore((state) => state.addFileAttachment);
     const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
@@ -42,23 +44,22 @@ function ChatInputWithAttachments({ client, startSession, placeholder, commandMe
             addFileAttachment(file);
         }
     };
-    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [
+    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, onCancel: onCancel, 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" }) })
                     ] }, `attached-${file.name}-${file.data.slice(0, 20)}`))) })), _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 })
-                        ] }), _jsxs("div", { className: "flex items-center gap-1", children: [
-                            _jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })
+                    _jsxs("div", { className: "flex items-center gap-1", children: [
+                            _jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected }), promptParameters && promptParameters.length > 0 && (_jsx(ChatInputParameters, { parameters: promptParameters }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [
+                            _jsx(ChatInputVoiceInput, {}), _jsx(ChatInputStop, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })
                         ] })
                 ] })
         ] }));
 }
 // Controlled Tabs component for the aside panel
-function AsideTabs({ todos, tools, mcps, subagents, }) {
+function AsideTabs({ todos, sources, tools, mcps, subagents, }) {
     const { activeTab, setActiveTab } = ChatLayout.useChatLayoutContext();
     return (_jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "flex flex-col h-full", children: [
-            _jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, {}) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })
+            _jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center", "sticky top-0 z-10 shrink-0"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })
         ] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
@@ -81,7 +82,7 @@ function AppChatHeader({ agentName, showHeader, sessionId, debuggerUrl, }) {
 export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
     const { connectionStatus, connect, sessionId, startSession } = useChatSession(client, initialSessionId);
-    const { messages, sendMessage } = useChatMessages(client, startSession);
+    const { messages, sendMessage, editAndResend, cancel } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
     const error = useChatStore((state) => state.error);
     const [agentName, setAgentName] = useState(undefined);
@@ -90,10 +91,33 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const [agentTools, setAgentTools] = useState([]);
     const [agentMcps, setAgentMcps] = useState([]);
     const [agentSubagents, setAgentSubagents] = useState([]);
+    const [agentPromptParameters, setAgentPromptParameters] = useState([]);
     const [placeholder, setPlaceholder] = useState("Type a message or / for commands...");
     const [hideTopBar, setHideTopBar] = useState(false);
     const todos = useChatStore(selectTodosForCurrentSession);
     const _latestContextSize = useChatStore((state) => state.latestContextSize);
+    const { resolvedTheme, setTheme } = useTheme();
+    // Collect all sources from all messages for the sources panel
+    const allSources = React.useMemo(() => {
+        const sources = [];
+        for (const message of messages) {
+            if (message.sources) {
+                for (const source of message.sources) {
+                    sources.push({
+                        id: source.id,
+                        title: source.title,
+                        url: source.url,
+                        snippet: source.snippet || "",
+                        sourceName: source.sourceName || "",
+                        favicon: source.favicon || "",
+                    });
+                }
+            }
+        }
+        return sources;
+    }, [messages]);
+    // Update document title with agent name and animated dots when streaming
+    useDocumentTitle(agentName);
     // Log connection status changes
     useEffect(() => {
         logger.debug("Connection status changed", { status: connectionStatus });
@@ -145,6 +169,12 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                     subagents: agentInfo.subagents,
                 });
             }
+            if (agentInfo.promptParameters && agentInfo.promptParameters.length > 0) {
+                setAgentPromptParameters(agentInfo.promptParameters);
+                logger.info("Agent prompt parameters loaded", {
+                    promptParameters: agentInfo.promptParameters,
+                });
+            }
             if (agentInfo.uiConfig?.hideTopBar) {
                 setHideTopBar(true);
             }
@@ -201,6 +231,19 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     ];
     // Command menu items for chat input
     const commandMenuItems = [
+        {
+            id: "dark-mode",
+            label: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode",
+            description: `Switch to ${resolvedTheme === "dark" ? "light" : "dark"} theme`,
+            icon: resolvedTheme === "dark" ? (_jsx(Sun, { className: "h-4 w-4" })) : (_jsx(Moon, { className: "h-4 w-4" })),
+            category: "action",
+            onSelect: () => {
+                setTheme(resolvedTheme === "dark" ? "light" : "dark");
+                logger.info("User toggled theme", {
+                    newTheme: resolvedTheme === "dark" ? "light" : "dark",
+                });
+            },
+        },
         {
             id: "settings",
             label: "Open Settings",
@@ -222,7 +265,13 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                         _jsx(ChatLayout.Messages, { children: messages.length === 0 ? (
                                             // Only render empty state once agent info is loaded
                                             agentName !== undefined ? (_jsx(OpenFilesButton, { children: ({ openFiles, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: agentDescription ?? "", suggestedPrompts: suggestedPrompts ?? [], onPromptClick: (prompt) => {
-                                                            sendMessage(prompt);
+                                                            // Get current prompt parameters from store
+                                                            const currentParams = useChatStore.getState().input
+                                                                .selectedPromptParameters;
+                                                            sendMessage(prompt, undefined, currentParams &&
+                                                                Object.keys(currentParams).length > 0
+                                                                ? currentParams
+                                                                : undefined);
                                                             setPlaceholder("Type a message or / for commands...");
                                                             logger.info("Prompt clicked", { prompt });
                                                         }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
@@ -251,10 +300,51 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                                 ? "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: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, commandMenuItems: commandMenuItems }) })
+                                                    // Check if any message is streaming
+                                                    const anyMessageStreaming = messages.some((m) => m.isStreaming);
+                                                    // Calculate which user message number this is (1-indexed for display, 0-indexed for API)
+                                                    // Count user messages up to and including this index
+                                                    const userMessageIndex = message.role === "user"
+                                                        ? messages
+                                                            .slice(0, index + 1)
+                                                            .filter((m) => m.role === "user").length - 1
+                                                        : -1;
+                                                    return (_jsx(Message, { message: message, className: cn(spacingClass, "group"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true })) : (_jsxs(_Fragment, { children: [
+                                                                    _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }), _jsx(MessageActions, { message: message, isStreaming: message.isStreaming, onSendMessage: sendMessage, isLastAssistantMessage: index ===
+                                                                            messages.findLastIndex((m) => m.role === "assistant"), onRedo: () => {
+                                                                            // Find the user message that preceded this assistant message
+                                                                            let precedingUserMessage = null;
+                                                                            let precedingUserMessageIndex = -1;
+                                                                            const _userCount = 0;
+                                                                            for (let i = index - 1; i >= 0; i--) {
+                                                                                if (messages[i]?.role === "user") {
+                                                                                    precedingUserMessage = messages[i];
+                                                                                    // Count how many user messages came before this one
+                                                                                    precedingUserMessageIndex =
+                                                                                        messages
+                                                                                            .slice(0, i + 1)
+                                                                                            .filter((m) => m.role === "user")
+                                                                                            .length - 1;
+                                                                                    break;
+                                                                                }
+                                                                            }
+                                                                            if (precedingUserMessage?.content &&
+                                                                                precedingUserMessageIndex >= 0) {
+                                                                                // Convert images back to attachments format
+                                                                                const attachments = precedingUserMessage.images?.map((img, idx) => ({
+                                                                                    name: `image-${idx}`,
+                                                                                    path: "",
+                                                                                    size: 0,
+                                                                                    mimeType: img.mimeType,
+                                                                                    data: img.data,
+                                                                                }));
+                                                                                editAndResend(precedingUserMessageIndex, precedingUserMessage.content, attachments);
+                                                                            }
+                                                                        } })
+                                                                ] })) }) }, message.id));
+                                                }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, commandMenuItems: commandMenuItems, onCancel: cancel, promptParameters: agentPromptParameters }) })
                                     ] })
-                            ] }), _jsx(ChatLayout.Aside, { breakpoint: "md", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) })
+                            ] }), _jsx(ChatLayout.Aside, { breakpoint: "md", children: _jsx(AsideTabs, { todos: todos, sources: allSources, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) })
                     ] }) })
         ] }));
 }

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { Source } from "../../core/schemas/source.js";
+export interface CitationChipProps {
+    /** The source ID (e.g., "1", "2") */
+    sourceId: string;
+    /** Available sources to look up the citation */
+    sources: Source[];
+    /** Optional className */
+    className?: string;
+}
+/**
+ * CitationChip displays an inline citation pill that shows source details on hover
+ * and scrolls to the Sources panel on click.
+ */
+export declare const CitationChip: React.ForwardRefExoticComponent<CitationChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/gui/components/CitationChip.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import * as ChatLayout from "./ChatLayout.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+/**
+ * CitationChip displays an inline citation pill that shows source details on hover
+ * and scrolls to the Sources panel on click.
+ */
+export const CitationChip = React.forwardRef(({ sourceId, sources, className }, ref) => {
+    const source = sources.find((s) => s.id === sourceId);
+    // Try to get ChatLayout context for panel control
+    let chatLayoutContext = null;
+    try {
+        // biome-ignore lint/correctness/useHookAtTopLevel: intentionally catching context absence
+        chatLayoutContext = ChatLayout.useChatLayoutContext();
+    }
+    catch {
+        // Not inside ChatLayout.Root - that's okay, we just won't have panel control
+    }
+    // Handle click - open Sources panel and scroll to this source
+    const handleClick = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (chatLayoutContext) {
+            // Open the Sources panel
+            chatLayoutContext.setPanelSize("small");
+            chatLayoutContext.setActiveTab("sources");
+            // TODO: Add scroll-to-source functionality once we wire up highlighting
+        }
+        // Also open the source URL in a new tab if available
+        if (source?.url) {
+            window.open(source.url, "_blank", "noopener,noreferrer");
+        }
+    }, [chatLayoutContext, source?.url]);
+    // If source not found, just show the number
+    if (!source) {
+        return (_jsxs("span", { ref: ref, className: cn("inline-flex items-center px-1.5 py-0.5 text-xs font-medium", "bg-muted text-muted-foreground rounded-md", "cursor-default", className), children: ["[", sourceId, "]"] }));
+    }
+    const domain = source.sourceName || getDomain(source.url);
+    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [
+                _jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { ref: ref, role: "button", tabIndex: 0, onClick: handleClick, onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                handleClick(e);
+                            }
+                        }, className: cn("inline-flex items-center gap-1 px-1.5 py-0.5", "text-xs font-medium rounded-md", "bg-accent/50 text-accent-foreground", "hover:bg-accent cursor-pointer transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className), children: [source.favicon && (_jsx("img", { src: source.favicon, alt: "", className: "size-3 rounded-sm", onError: (e) => {
+                                    // Hide broken favicon images
+                                    e.target.style.display = "none";
+                                } })), _jsx("span", { children: domain })
+                        ] }) }), _jsx(TooltipContent, { side: "top", align: "start", className: "max-w-xs p-0 overflow-hidden", children: _jsxs("div", { className: "p-3", children: [
+                            _jsxs("div", { className: "flex items-center gap-2 mb-2", children: [source.favicon && (_jsx("img", { src: source.favicon, alt: "", className: "size-4 rounded-sm" })), _jsx("span", { className: "font-medium text-sm", children: domain })
+                                ] }), _jsx("h4", { className: "font-medium text-sm text-foreground line-clamp-2 mb-1", children: source.title }), source.snippet && (_jsx("p", { className: "text-xs text-muted-foreground line-clamp-3 mb-2", children: source.snippet })), _jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+                                    _jsx(ExternalLink, { className: "size-3" }), _jsx("span", { children: "Click to open" })
+                                ] })
+                        ] }) })
+            ] }) }));
+});
+CitationChip.displayName = "CitationChip";
+/**
+ * Helper to extract domain from URL
+ */
+function getDomain(url) {
+    try {
+        const hostname = new URL(url).hostname;
+        return hostname.replace(/^www\./, "");
+    }
+    catch {
+        return url;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type { DisplayMessage } from "./MessageList.js";
+export interface EditableUserMessageProps {
+    message: DisplayMessage;
+    messageIndex: number;
+    isStreaming: boolean;
+    onEditAndResend: (messageIndex: number, newContent: string, attachments?: Array<{
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+        data: string;
+    }>) => void;
+    /** Whether to make the message content sticky */
+    sticky?: boolean;
+}
+declare function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend, sticky }: EditableUserMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare const EditableUserMessage: import("react").MemoExoticComponent<typeof PureEditableUserMessage>;
+export {};

package/dist/gui/components/EditableUserMessage.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, Pencil } from "lucide-react";
+import { memo, useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Action, Actions } from "./Actions.js";
+import { Button } from "./Button.js";
+import { MessageContent } from "./MessageContent.js";
+import { Textarea } from "./Textarea.js";
+function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend, sticky = false, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editedContent, setEditedContent] = useState(message.content || "");
+    const [isCopied, setIsCopied] = useState(false);
+    const containerRef = useRef(null);
+    // Handle clicking the sticky message to scroll back to its position
+    const handleStickyClick = useCallback(() => {
+        if (!sticky || !containerRef.current)
+            return;
+        // Find the scroll container (parent with overflow-y-auto)
+        let scrollContainer = containerRef.current.parentElement;
+        while (scrollContainer &&
+            !scrollContainer.classList.contains("overflow-y-auto")) {
+            scrollContainer = scrollContainer.parentElement;
+        }
+        if (scrollContainer) {
+            // Get the element's position relative to the scroll container
+            const _elementRect = containerRef.current.getBoundingClientRect();
+            const _containerRect = scrollContainer.getBoundingClientRect();
+            const elementTop = containerRef.current.offsetTop;
+            // Scroll so the element is at the top of the container
+            scrollContainer.scrollTo({
+                top: elementTop - 16, // Small offset for padding
+                behavior: "smooth",
+            });
+        }
+    }, [sticky]);
+    const handleCopy = useCallback(async () => {
+        if (!message.content) {
+            toast.error("There's no text to copy!");
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(message.content);
+            setIsCopied(true);
+            toast.success("Copied to clipboard!");
+            setTimeout(() => {
+                setIsCopied(false);
+            }, 2000);
+        }
+        catch {
+            toast.error("Failed to copy to clipboard");
+        }
+    }, [message.content]);
+    const handleStartEdit = useCallback(() => {
+        setEditedContent(message.content || "");
+        setIsEditing(true);
+    }, [message.content]);
+    const handleCancelEdit = useCallback(() => {
+        setIsEditing(false);
+        setEditedContent(message.content || "");
+    }, [message.content]);
+    const handleSaveAndResend = useCallback(() => {
+        if (!editedContent.trim())
+            return;
+        // Convert images back to attachments format if the message had images
+        const attachments = message.images?.map((img, idx) => ({
+            name: `image-${idx}`,
+            path: "",
+            size: 0,
+            mimeType: img.mimeType,
+            data: img.data,
+        }));
+        onEditAndResend(messageIndex, editedContent.trim(), attachments);
+        setIsEditing(false);
+    }, [messageIndex, editedContent, message.images, onEditAndResend]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            handleSaveAndResend();
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            handleCancelEdit();
+        }
+    }, [handleSaveAndResend, handleCancelEdit]);
+    if (isEditing) {
+        return (_jsxs("div", { className: "w-full bg-secondary rounded-2xl px-4 py-4", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover opacity-50" }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), _jsx(Textarea, { value: editedContent, onChange: (e) => setEditedContent(e.target.value), onKeyDown: handleKeyDown, className: "min-h-[60px] w-full resize-none bg-transparent border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 p-0 text-base leading-relaxed text-foreground", autoFocus: true, placeholder: "Edit your message..." }), _jsxs("div", { className: "flex items-center justify-end gap-2 mt-2", children: [
+                        _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, disabled: !editedContent.trim(), className: "h-7 px-3 text-xs", children: "Send" })
+                    ] })
+            ] }));
+    }
+    return (_jsxs("div", { ref: containerRef, className: "w-full group/user-message", children: [
+            _jsx("div", { className: sticky ? "sticky top-0 z-10 bg-background cursor-pointer" : "", onClick: sticky ? handleStickyClick : undefined, onKeyDown: sticky
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            handleStickyClick();
+                        }
+                    }
+                    : undefined, role: sticky ? "button" : undefined, tabIndex: sticky ? 0 : undefined, children: _jsx(MessageContent, { message: message }) }), !isStreaming && message.content && (_jsxs(Actions, { className: "mt-2 opacity-0 group-hover/user-message:opacity-100 transition-opacity", children: [
+                    _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { onClick: handleStartEdit, tooltip: "Edit", children: _jsx(Pencil, { className: "size-4" }) })
+                ] }))] }));
+}
+export const EditableUserMessage = memo(PureEditableUserMessage, (prevProps, nextProps) => {
+    return (prevProps.isStreaming === nextProps.isStreaming &&
+        prevProps.message.id === nextProps.message.id &&
+        prevProps.message.content === nextProps.message.content &&
+        prevProps.messageIndex === nextProps.messageIndex &&
+        prevProps.sticky === nextProps.sticky);
+});

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

@@ -0,0 +1,16 @@
+import type { DisplayMessage } from "./MessageList.js";
+export interface MessageActionsProps {
+    /** The message to show actions for */
+    message: DisplayMessage;
+    /** Whether the message is currently streaming */
+    isStreaming?: boolean;
+    /** Callback to regenerate/redo the response */
+    onRedo?: () => void;
+    /** Callback to send a message to the agent */
+    onSendMessage?: (message: string) => void;
+    /** Whether this is the last assistant message (shows actions by default) */
+    isLastAssistantMessage?: boolean;
+}
+declare function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLastAssistantMessage }: MessageActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const MessageActions: import("react").MemoExoticComponent<typeof PureMessageActions>;
+export {};

package/dist/gui/components/MessageActions.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy, Download, FileSpreadsheet, FileText, FileType, RotateCcw, } from "lucide-react";
+import { memo, useState } from "react";
+import { toast } from "sonner";
+import { cn } from "../lib/utils.js";
+import { Action, Actions } from "./Actions.js";
+import { Button } from "./Button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./DropdownMenu.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+const EXPORT_FORMATS = [
+    { id: "pdf", label: "PDF", icon: FileText },
+    { id: "excel", label: "Excel", icon: FileSpreadsheet },
+    { id: "csv", label: "CSV", icon: FileSpreadsheet },
+    { id: "text", label: "Text", icon: FileType },
+    { id: "markdown", label: "Markdown", icon: FileText },
+];
+function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLastAssistantMessage = false, }) {
+    const [isCopied, setIsCopied] = useState(false);
+    // Don't show actions while streaming
+    if (isStreaming) {
+        return null;
+    }
+    // Only show actions for assistant messages with content
+    if (message.role !== "assistant" || !message.content) {
+        return null;
+    }
+    // For non-last messages, show on hover only
+    const visibilityClass = isLastAssistantMessage
+        ? ""
+        : "opacity-0 group-hover:opacity-100 transition-opacity";
+    const handleCopy = async () => {
+        if (!message.content) {
+            toast.error("There's no text to copy!");
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(message.content);
+            setIsCopied(true);
+            toast.success("Copied to clipboard!");
+            // Reset the icon after 2 seconds
+            setTimeout(() => {
+                setIsCopied(false);
+            }, 2000);
+        }
+        catch {
+            toast.error("Failed to copy to clipboard");
+        }
+    };
+    const handleRedo = () => {
+        if (onRedo) {
+            onRedo();
+        }
+        else {
+            toast.info("Regenerate not available");
+        }
+    };
+    const handleExport = (format) => {
+        if (onSendMessage) {
+            onSendMessage(`produce an artifact as ${format} for this session`);
+        }
+        else {
+            toast.info("Export not available");
+        }
+    };
+    return (_jsxs(Actions, { className: cn("mt-2 mb-10", visibilityClass), children: [
+            _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }), _jsx(Action, { onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
+                    _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
+                                _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-8 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [
+                                                _jsx(Download, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Export" })
+                                            ] }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Export" }) })
+                            ] }) }), _jsx(DropdownMenuContent, { align: "start", children: EXPORT_FORMATS.map((format) => (_jsxs(DropdownMenuItem, { onClick: () => handleExport(format.label), children: [
+                                _jsx(format.icon, { className: "size-4 mr-2" }), format.label] }, format.id))) })
+                ] })
+        ] }));
+}
+export const MessageActions = memo(PureMessageActions, (prevProps, nextProps) => {
+    if (prevProps.isStreaming !== nextProps.isStreaming) {
+        return false;
+    }
+    if (prevProps.message.id !== nextProps.message.id) {
+        return false;
+    }
+    if (prevProps.message.content !== nextProps.message.content) {
+        return false;
+    }
+    if (prevProps.onRedo !== nextProps.onRedo) {
+        return false;
+    }
+    if (prevProps.onSendMessage !== nextProps.onSendMessage) {
+        return false;
+    }
+    if (prevProps.isLastAssistantMessage !== nextProps.isLastAssistantMessage) {
+        return false;
+    }
+    return true;
+});

package/dist/gui/components/MessageContent.js

@@ -49,7 +49,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("div", { children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Thinking..." }) }) })), message.role === "assistant" ? ((() => {
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx("div", { children: _jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true }) })), isWaiting && streamingStartTime && (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("div", { className: "flex items-center gap-1.5", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Working..." }) }) })), message.role === "assistant" ? ((() => {
                     // Sort tool calls by content position
                     const sortedToolCalls = (message.toolCalls || [])
                         .slice()
@@ -91,6 +91,14 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             currentConsecutiveTitle = null;
                         };
                         for (const tc of toolCalls) {
+                            // todo_write should never be grouped with other tool calls
+                            const isTodoWrite = tc.title === "todo_write";
+                            if (isTodoWrite) {
+                                flushSelectingGroup();
+                                flushConsecutiveGroup();
+                                result.push(tc);
+                                continue;
+                            }
                             // Handle batch groups (explicit batchId)
                             if (tc.batchId) {
                                 flushSelectingGroup();
@@ -168,7 +176,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         const hasHookPositions = hookNotifications.some((n) => n.contentPosition !== undefined);
                         if (!hasHookPositions) {
                             // No positions - render hooks at top, then tool calls, then content
-                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }) })
+                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false, sources: message.sources ?? [] }) })
                                 ] }));
                         }
                         // Hooks have positions - render them inline with content
@@ -180,7 +188,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             if (position > currentPosition) {
                                 const textChunk = message.content.slice(currentPosition, position);
                                 if (textChunk) {
-                                    elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-hook-${notification.id}`));
+                                    elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false, sources: message.sources ?? [] }) }, `text-before-hook-${notification.id}`));
                                 }
                             }
                             // Add hook notification
@@ -191,7 +199,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         if (currentPosition < message.content.length) {
                             const remainingText = message.content.slice(currentPosition);
                             if (remainingText) {
-                                elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end-hooks"));
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false, sources: message.sources ?? [] }) }, "text-end-hooks"));
                             }
                         }
                         // Add tool calls at the end
@@ -258,7 +266,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 const itemId = positionedItem.type === "toolCall"
                                     ? positionedItem.item.id
                                     : positionedItem.item.id;
-                                elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }) }, `text-before-${itemId}`));
+                                elements.push(_jsx("div", { children: _jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false, sources: message.sources ?? [] }) }, `text-before-${itemId}`));
                             }
                         }
                         if (positionedItem.type === "hookNotification") {
@@ -270,7 +278,14 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         else {
                             // Tool call - check if it should be batched
                             const toolCall = positionedItem.item;
-                            if (toolCall.batchId) {
+                            // todo_write should never be grouped with other tool calls
+                            const isTodoWrite = toolCall.title === "todo_write";
+                            if (isTodoWrite) {
+                                flushBatch();
+                                currentBatch = [toolCall];
+                                flushBatch();
+                            }
+                            else if (toolCall.batchId) {
                                 if (currentBatchId === toolCall.batchId) {
                                     // Same batch, add to current batch
                                     currentBatch.push(toolCall);
@@ -305,7 +320,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     if (currentPosition < message.content.length) {
                         const remainingText = message.content.slice(currentPosition);
                         if (remainingText) {
-                            elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }) }, "text-end"));
+                            elements.push(_jsx("div", { children: _jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false, sources: message.sources ?? [] }) }, "text-end"));
                         }
                     }
                     // Render preliminary (selecting) tool calls at the end, grouped