@moldable-ai/ui 0.2.6 → 0.2.8

package/dist/components/chat/chat-message.js

@@ -1,58 +1,419 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Brain, ChevronDown, Loader2 } from 'lucide-react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Image as ImageIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { cn } from '../../lib/utils';
 import { Markdown } from '../markdown';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../ui/collapsible';
-import { ThinkingTimeline, ThinkingTimelineMarker, } from './thinking-timeline';
 import { ToolApproval, ToolApprovalHeader, ToolApprovalRejected, } from './tool-approval';
 import { useToolApprovalResponse } from './tool-approval-context';
-import { getToolHandler } from './tool-handlers';
+import { getToolHandler, } from './tool-handlers';
 import { useToolProgress } from './tool-progress-context';
 import { AnimatePresence, motion } from 'framer-motion';
 const DEFAULT_ACTIONS_LABEL = 'Thinking';
 // OpenRouter sends these for encrypted reasoning msgs
 const stripRedacted = (text) => text.replace(/\[REDACTED\]/g, '').trim();
+function emptyActivityCounts() {
+    return {
+        createdFileCount: 0,
+        editedFileCount: 0,
+        deletedFileCount: 0,
+        exploredFileCount: 0,
+        searchCount: 0,
+        listCount: 0,
+        commandCount: 0,
+        runningCommandCount: 0,
+        webSearchCount: 0,
+        apiCallCount: 0,
+        skillActionCount: 0,
+        appActionCount: 0,
+        toolCallCount: 0,
+    };
+}
+function incrementActivityCount(counts, key, amount = 1) {
+    counts[key] += amount;
+}
+function asRecord(value) {
+    return value && typeof value === 'object'
+        ? value
+        : undefined;
+}
+function stringValue(value) {
+    return typeof value === 'string' && value.trim().length > 0
+        ? value
+        : undefined;
+}
+function getString(record, keys) {
+    if (!record) {
+        return undefined;
+    }
+    for (const key of keys) {
+        const value = stringValue(record[key]);
+        if (value) {
+            return value;
+        }
+    }
+    return undefined;
+}
+function getCount(record, keys) {
+    if (!record) {
+        return undefined;
+    }
+    for (const key of keys) {
+        const value = record[key];
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value.length;
+        }
+    }
+    return undefined;
+}
+function getFileName(path) {
+    const parts = path.split('/');
+    return parts[parts.length - 1] || path;
+}
+function getPathLabel(path) {
+    return path ? getFileName(path) : undefined;
+}
+function getToolPath(part) {
+    const args = asRecord(part.args);
+    const output = asRecord(part.output);
+    return (getString(output, ['path', 'filePath', 'targetPath']) ??
+        getString(args, ['path', 'filePath', 'targetPath']));
+}
+function getToolQuery(part) {
+    const args = asRecord(part.args);
+    const output = asRecord(part.output);
+    return (getString(args, ['query', 'pattern', 'glob', 'text']) ??
+        getString(output, ['query', 'pattern', 'glob']));
+}
+function getToolCommand(part, progress) {
+    const args = asRecord(part.args);
+    const output = asRecord(part.output);
+    return (progress?.command ??
+        getString(output, ['command']) ??
+        getString(args, ['command']));
+}
+function getToolTarget(part) {
+    const args = asRecord(part.args);
+    const output = asRecord(part.output);
+    return (getString(output, ['appName', 'appId', 'name', 'id']) ??
+        getString(args, ['appName', 'appId', 'name', 'id', 'repoName', 'skillName']));
+}
+function isToolLoading(part, progress) {
+    const isApprovalResponded = part.state === 'approval-responded' || part.state === 'output-denied';
+    const wasApproved = part.approval?.approved === true;
+    return (part.state === 'partial-call' ||
+        part.state === 'call' ||
+        part.state === 'pending' ||
+        progress?.status === 'running' ||
+        (isApprovalResponded && wasApproved && part.output === undefined));
+}
+function toolHasError(part) {
+    const output = asRecord(part.output);
+    if (!output) {
+        return false;
+    }
+    return (output.success === false ||
+        output.ok === false ||
+        (typeof output.exitCode === 'number' && output.exitCode !== 0) ||
+        Boolean(output.error));
+}
+function plural(count, singular, pluralForm = `${singular}s`) {
+    return `${count} ${count === 1 ? singular : pluralForm}`;
+}
+function sentenceCase(text) {
+    return text.length > 0 ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+}
+function formatActivitySummary(counts, fallback, isStreaming) {
+    const segments = [];
+    const completedCommands = Math.max(0, counts.commandCount - counts.runningCommandCount);
+    const explorationDetails = [
+        counts.exploredFileCount > 0
+            ? plural(counts.exploredFileCount, 'file')
+            : null,
+        counts.searchCount > 0
+            ? plural(counts.searchCount, 'search', 'searches')
+            : null,
+        counts.listCount > 0
+            ? plural(counts.listCount, 'directory', 'directories')
+            : null,
+    ].filter(Boolean);
+    if (counts.createdFileCount > 0) {
+        segments.push(`created ${plural(counts.createdFileCount, 'file')}`);
+    }
+    if (counts.editedFileCount > 0) {
+        segments.push(`edited ${plural(counts.editedFileCount, 'file')}`);
+    }
+    if (counts.deletedFileCount > 0) {
+        segments.push(`deleted ${plural(counts.deletedFileCount, 'file')}`);
+    }
+    if (explorationDetails.length > 0) {
+        segments.push(`explored ${explorationDetails.join(', ')}`);
+    }
+    if (completedCommands > 0) {
+        segments.push(`ran ${plural(completedCommands, 'command')}`);
+    }
+    if (counts.runningCommandCount > 0) {
+        segments.push(`running ${plural(counts.runningCommandCount, 'command')}`);
+    }
+    if (counts.webSearchCount > 0) {
+        segments.push(`ran ${plural(counts.webSearchCount, 'web search', 'web searches')}`);
+    }
+    if (counts.apiCallCount > 0) {
+        segments.push(`called ${plural(counts.apiCallCount, 'app API', 'app APIs')}`);
+    }
+    if (counts.skillActionCount > 0) {
+        segments.push(`updated ${plural(counts.skillActionCount, 'skill setting')}`);
+    }
+    if (counts.appActionCount > 0) {
+        segments.push(`updated ${plural(counts.appActionCount, 'app')}`);
+    }
+    if (counts.toolCallCount > 0) {
+        segments.push(`used ${plural(counts.toolCallCount, 'tool')}`);
+    }
+    if (segments.length === 0) {
+        return isStreaming ? fallback : fallback || DEFAULT_ACTIONS_LABEL;
+    }
+    return sentenceCase(segments.join(', '));
+}
+function ActivityCode({ children, title, }) {
+    return (_jsx("code", { className: "text-foreground/80 inline max-w-full truncate align-baseline font-mono text-[0.95em]", title: title, children: children }));
+}
+function toolActivityText({ verb, path, detail, fallback, }) {
+    const label = path ?? detail;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { children: verb }), label ? (_jsxs(_Fragment, { children: [' ', _jsx(ActivityCode, { title: path, children: label })] })) : fallback ? (_jsxs(_Fragment, { children: [" ", fallback] })) : null] }));
+}
+function summarizeToolActivity(part, toolHandler, progress, fallbackId) {
+    const counts = emptyActivityCounts();
+    const running = isToolLoading(part, progress);
+    const hasError = toolHasError(part);
+    const path = getToolPath(part);
+    const pathLabel = getPathLabel(path);
+    const query = getToolQuery(part);
+    const command = getToolCommand(part, progress);
+    const target = getToolTarget(part);
+    const output = asRecord(part.output);
+    const args = asRecord(part.args);
+    const entryId = part.toolCallId ?? fallbackId ?? `${part.toolName}-${part.state}`;
+    const loadingLabel = toolHandler.loadingLabel.replace(/\.\.\.$/, '');
+    let content = running ? loadingLabel : `Used ${part.toolName}`;
+    switch (part.toolName) {
+        case 'readFile':
+        case 'fileExists':
+            incrementActivityCount(counts, 'exploredFileCount');
+            content = toolActivityText({
+                verb: running
+                    ? 'Reading'
+                    : part.toolName === 'fileExists'
+                        ? 'Checked'
+                        : 'Read',
+                path: pathLabel,
+                fallback: 'file',
+            });
+            break;
+        case 'readToolOutput':
+            incrementActivityCount(counts, 'exploredFileCount');
+            content = running ? 'Reading tool output' : 'Read tool output';
+            break;
+        case 'listDirectory': {
+            incrementActivityCount(counts, 'listCount');
+            const itemCount = getCount(output, ['entries', 'items']);
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? 'Listing' : 'Listed' }), ' ', _jsx(ActivityCode, { title: path, children: pathLabel ?? 'directory' }), typeof itemCount === 'number' && (_jsxs("span", { children: [" (", plural(itemCount, 'item'), ")"] }))] }));
+            break;
+        }
+        case 'grep':
+        case 'globFileSearch': {
+            incrementActivityCount(counts, 'searchCount');
+            const resultCount = getCount(output, ['matches', 'files', 'results']);
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? 'Searching' : 'Searched' }), query && (_jsxs(_Fragment, { children: [' ', "for ", _jsx(ActivityCode, { title: query, children: query })] })), typeof resultCount === 'number' && (_jsxs("span", { children: [" (", plural(resultCount, 'result'), ")"] }))] }));
+            break;
+        }
+        case 'webSearch':
+            incrementActivityCount(counts, 'webSearchCount');
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? 'Searching web' : 'Searched web' }), query && (_jsxs(_Fragment, { children: [' ', "for ", _jsx(ActivityCode, { title: query, children: query })] }))] }));
+            break;
+        case 'executeBashCommand':
+        case 'runCommand':
+            incrementActivityCount(counts, 'commandCount');
+            if (running) {
+                incrementActivityCount(counts, 'runningCommandCount');
+            }
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? 'Running' : 'Ran' }), ' ', _jsx(ActivityCode, { title: command, children: command ?? 'command' })] }));
+            break;
+        case 'writeFile': {
+            const created = output?.created === true || args?.create === true;
+            incrementActivityCount(counts, created ? 'createdFileCount' : 'editedFileCount');
+            content = toolActivityText({
+                verb: running ? 'Writing' : created ? 'Created' : 'Wrote',
+                path: pathLabel,
+                fallback: 'file',
+            });
+            break;
+        }
+        case 'editFile':
+            incrementActivityCount(counts, 'editedFileCount');
+            content = toolActivityText({
+                verb: running ? 'Editing' : 'Edited',
+                path: pathLabel,
+                fallback: 'file',
+            });
+            break;
+        case 'deleteFile':
+            incrementActivityCount(counts, 'deletedFileCount');
+            content = toolActivityText({
+                verb: running ? 'Deleting' : 'Deleted',
+                path: pathLabel,
+                fallback: 'file',
+            });
+            break;
+        case 'listMoldableAppApi':
+        case 'callMoldableAppApi':
+            incrementActivityCount(counts, 'apiCallCount');
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running
+                            ? part.toolName === 'listMoldableAppApi'
+                                ? 'Listing app APIs'
+                                : 'Calling app API'
+                            : part.toolName === 'listMoldableAppApi'
+                                ? 'Listed app APIs'
+                                : 'Called app API' }), target && (_jsxs(_Fragment, { children: [' ', _jsx(ActivityCode, { title: target, children: target })] }))] }));
+            break;
+        case 'listSkillRepos':
+        case 'listAvailableSkills':
+        case 'syncSkills':
+        case 'addSkillRepo':
+        case 'updateSkillSelection':
+        case 'initSkillsConfig':
+            incrementActivityCount(counts, 'skillActionCount');
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? loadingLabel : 'Updated skills' }), target && (_jsxs(_Fragment, { children: [' ', _jsx(ActivityCode, { title: target, children: target })] }))] }));
+            break;
+        case 'scaffoldApp':
+        case 'getAppInfo':
+        case 'unregisterApp':
+        case 'deleteAppData':
+        case 'deleteApp':
+            incrementActivityCount(counts, 'appActionCount');
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? loadingLabel : 'Updated app' }), target && (_jsxs(_Fragment, { children: [' ', _jsx(ActivityCode, { title: target, children: target })] }))] }));
+            break;
+        default:
+            incrementActivityCount(counts, 'toolCallCount');
+            content = (_jsxs(_Fragment, { children: [_jsx("span", { children: running ? loadingLabel : 'Used tool' }), ' ', _jsx(ActivityCode, { children: part.toolName })] }));
+            break;
+    }
+    if (hasError) {
+        content = (_jsxs(_Fragment, { children: [content, _jsx("span", { children: " failed" })] }));
+    }
+    return {
+        entry: {
+            id: entryId,
+            content,
+            isRunning: running,
+            isError: hasError,
+        },
+        counts,
+    };
+}
+function formatWorkDuration(ms) {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+    }
+    if (minutes > 0) {
+        return `${minutes}m ${seconds}s`;
+    }
+    return `${seconds}s`;
+}
+function useNow(enabled) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const interval = window.setInterval(() => {
+            setNow(Date.now());
+        }, 1000);
+        return () => window.clearInterval(interval);
+    }, [enabled]);
+    return now;
+}
+function WorkSummary({ messageId, startedAtMs, completedAtMs, isWorking, children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const now = useNow(isWorking && Boolean(startedAtMs));
+    const endAtMs = completedAtMs ?? (isWorking ? now : undefined);
+    const elapsedMs = typeof startedAtMs === 'number' && typeof endAtMs === 'number'
+        ? Math.max(0, endAtMs - startedAtMs)
+        : null;
+    const durationLabel = elapsedMs !== null && (elapsedMs >= 1000 || !isWorking)
+        ? formatWorkDuration(elapsedMs)
+        : null;
+    const summaryLabel = isWorking
+        ? durationLabel
+            ? `Working for ${durationLabel}`
+            : 'Working'
+        : durationLabel
+            ? `Worked for ${durationLabel}`
+            : 'Worked';
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "w-full", "data-work-summary": messageId, children: [_jsxs("div", { className: "text-muted-foreground/75 text-[13px] leading-5", children: [_jsxs(CollapsibleTrigger, { className: cn('group inline-flex max-w-full cursor-pointer items-center gap-1 rounded-md border border-transparent text-left transition-colors', 'hover:bg-muted/30 hover:text-foreground/80 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2'), "aria-label": `${summaryLabel} activity`, children: [_jsx("span", { className: "truncate", children: summaryLabel }), _jsx(ChevronDown, { className: cn('size-3 shrink-0 opacity-40 transition-transform duration-200 group-hover:opacity-70', isOpen ? 'rotate-0' : '-rotate-90') })] }), _jsx("div", { className: "border-border/60 mt-1 w-full border-t" })] }), _jsx(CollapsibleContent, { className: "overflow-hidden", children: _jsx("div", { className: "pt-4", children: children }) })] }));
+}
 function PureMessage({ message, isLast = false, isStreaming = false, }) {
     // Get tool progress for streaming stdout/stderr
     const toolProgress = useToolProgress();
     // Get approval response handler
     const onApprovalResponse = useToolApprovalResponse();
-    // Track open state for each thinking group independently
-    const [thinkingGroupStates, setThinkingGroupStates] = useState(new Map());
-    // Process parts chronologically, grouping only reasoning into thinking groups
-    // Inline tools (file ops, commands) are rendered directly
+    // Track open state for each background activity group independently.
+    const [activityGroupStates, setActivityGroupStates] = useState(new Map());
+    // Process parts chronologically, grouping ordinary tool work and reasoning as
+    // low-emphasis background activity. Approval prompts remain prominent because
+    // they need direct user action.
     const { contentItems, hasFinalAssistantText } = useMemo(() => {
         const items = [];
         const state = {
-            currentThinkingGroup: null,
-            thinkingGroupIndex: 0,
+            currentActivityGroup: null,
+            activityGroupIndex: 0,
             hasText: false,
         };
-        // Helper to close current thinking group
-        const closeThinkingGroup = () => {
-            if (state.currentThinkingGroup) {
+        const updateActivityTitle = (group) => {
+            group.title = formatActivitySummary(group.counts, group.title, group.isStreaming);
+        };
+        const addActivity = (group, entry, counts) => {
+            group.entries.push(entry);
+            group.isStreaming = group.isStreaming || Boolean(entry.isRunning);
+            if (counts) {
+                for (const key of Object.keys(counts)) {
+                    group.counts[key] += counts[key];
+                }
+            }
+            updateActivityTitle(group);
+        };
+        // Helper to close current activity group
+        const closeActivityGroup = () => {
+            if (state.currentActivityGroup) {
                 items.push({
-                    type: 'thinking',
-                    id: state.currentThinkingGroup.id,
-                    thinkingGroup: state.currentThinkingGroup,
+                    type: 'activity',
+                    id: state.currentActivityGroup.id,
+                    activityGroup: state.currentActivityGroup,
                 });
-                state.currentThinkingGroup = null;
+                state.currentActivityGroup = null;
             }
         };
-        // Helper to ensure thinking group exists
-        const ensureThinkingGroup = () => {
-            if (!state.currentThinkingGroup) {
-                state.thinkingGroupIndex++;
-                state.currentThinkingGroup = {
-                    id: `thinking-${message.id}-${state.thinkingGroupIndex}`,
-                    timeline: [],
+        // Helper to ensure activity group exists
+        const ensureActivityGroup = () => {
+            if (!state.currentActivityGroup) {
+                state.activityGroupIndex++;
+                state.currentActivityGroup = {
+                    id: `activity-${message.id}-${state.activityGroupIndex}`,
+                    entries: [],
+                    counts: emptyActivityCounts(),
                     title: DEFAULT_ACTIONS_LABEL,
                     isStreaming: false,
                 };
             }
-            return state.currentThinkingGroup;
+            return state.currentActivityGroup;
         };
         // If no parts, use content as text
         const parts = message.parts ?? [];
@@ -74,85 +435,40 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
             // Handle tool calls
             if (part.type === 'tool-invocation') {
                 const toolHandler = getToolHandler(part.toolName);
-                // Check if this tool should be rendered inline
-                if (toolHandler.inline) {
-                    // Close any open thinking group first
-                    closeThinkingGroup();
-                    // Check for approval states
-                    const isApprovalRequested = part.state === 'approval-requested';
-                    const isApprovalResponded = part.state === 'approval-responded' ||
-                        part.state === 'output-denied';
-                    const wasRejected = part.approval?.approved === false;
-                    const wasApproved = part.approval?.approved === true;
-                    // Render inline tool
-                    // Also treat approval-responded (when approved) as loading until output arrives
-                    const isToolLoading = part.state === 'partial-call' ||
-                        part.state === 'call' ||
-                        part.state === 'pending' ||
-                        (isApprovalResponded && wasApproved && part.output === undefined);
-                    // Check for streaming progress (stdout/stderr from command execution)
-                    const progress = part.toolCallId
-                        ? toolProgress[part.toolCallId]
-                        : undefined;
-                    const hasStreamingOutput = progress && (progress.stdout || progress.stderr);
-                    let toolContent;
-                    // Handle approval request state
-                    if (isApprovalRequested &&
-                        toolHandler.renderApproval &&
-                        part.approval?.id &&
-                        onApprovalResponse) {
-                        toolContent = toolHandler.renderApproval({
-                            approvalId: part.approval.id,
-                            toolCallId: part.toolCallId || key,
-                            args: part.args,
-                        }, onApprovalResponse);
-                    }
-                    else if (isApprovalResponded && wasRejected) {
-                        // Show rejection message
-                        toolContent = (_jsx(ToolApproval, { state: "output-denied", approved: false, children: _jsx(ToolApprovalHeader, { children: _jsx(ToolApprovalRejected, { children: "Command execution was rejected" }) }) }));
-                    }
-                    else if (hasStreamingOutput && toolHandler.renderStreaming) {
-                        // Show streaming output (live stdout/stderr)
-                        toolContent = toolHandler.renderStreaming(part.args, progress);
-                    }
-                    else if (isToolLoading) {
-                        // Show loading state (arguments streaming or waiting)
-                        toolContent = toolHandler.renderLoading?.(part.args) || (_jsx("div", { className: "text-muted-foreground text-xs", children: toolHandler.loadingLabel }));
-                    }
-                    else {
-                        // Show final output
-                        toolContent = toolHandler.renderOutput(part.output, part.toolCallId || key);
-                    }
+                const isApprovalRequested = part.state === 'approval-requested';
+                const isApprovalResponded = part.state === 'approval-responded' || part.state === 'output-denied';
+                const wasRejected = part.approval?.approved === false;
+                if (isApprovalRequested &&
+                    toolHandler.renderApproval &&
+                    part.approval?.id &&
+                    onApprovalResponse) {
+                    closeActivityGroup();
                     items.push({
                         type: 'inline-tool',
                         id: key,
-                        content: toolContent,
-                    });
-                    continue;
-                }
-                // Non-inline tools go into thinking group
-                const group = ensureThinkingGroup();
-                // Show loading state for tools
-                if (part.state === 'partial-call' ||
-                    part.state === 'call' ||
-                    part.state === 'pending') {
-                    const toolLabel = toolHandler.loadingLabel;
-                    group.title = toolLabel;
-                    group.isStreaming = true;
-                    group.timeline.push({
-                        marker: ThinkingTimelineMarker.Loading,
-                        content: (_jsx("div", { className: "px-2 py-1", children: _jsx("span", { className: "text-muted-foreground font-mono text-xs", children: toolLabel }) }, `${part.toolCallId || key}-loading`)),
+                        content: toolHandler.renderApproval({
+                            approvalId: part.approval.id,
+                            toolCallId: part.toolCallId || key,
+                            args: part.args,
+                        }, onApprovalResponse),
                     });
                     continue;
                 }
-                // Show tool output
-                if (part.state === 'result' || part.state === 'output-available') {
-                    group.timeline.push({
-                        marker: toolHandler.marker ?? ThinkingTimelineMarker.Default,
-                        content: toolHandler.renderOutput(part.output, part.toolCallId || key),
+                if (isApprovalResponded && wasRejected) {
+                    closeActivityGroup();
+                    items.push({
+                        type: 'inline-tool',
+                        id: key,
+                        content: (_jsx(ToolApproval, { state: "output-denied", approved: false, children: _jsx(ToolApprovalHeader, { children: _jsx(ToolApprovalRejected, { children: "Command execution was rejected" }) }) })),
                     });
                     continue;
                 }
+                const group = ensureActivityGroup();
+                const progress = part.toolCallId
+                    ? toolProgress[part.toolCallId]
+                    : undefined;
+                const activity = summarizeToolActivity(part, toolHandler, progress, key);
+                addActivity(group, activity.entry, activity.counts);
                 continue;
             }
             if (part.type === 'reasoning') {
@@ -161,7 +477,7 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
                 if (cleaned.length === 0) {
                     continue;
                 }
-                const group = ensureThinkingGroup();
+                const group = ensureActivityGroup();
                 // Extract title from markdown **title** or use first line
                 const markdownTitleMatch = cleaned.match(/\*\*([^*]+)\*\*/);
                 const candidateTitle = markdownTitleMatch?.[1];
@@ -172,25 +488,34 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
                 const body = candidateTitle
                     ? trimmed.replace(/\*\*[^*]+\*\*\s*/, '')
                     : trimmed;
-                group.timeline.push({
-                    marker: ThinkingTimelineMarker.Default,
-                    content: (_jsx("div", { className: "whitespace-pre-wrap px-2 py-1", children: body }, key)),
+                addActivity(group, {
+                    id: key,
+                    content: _jsx("span", { className: "whitespace-pre-wrap", children: body }),
                 });
                 continue;
             }
             if (part.type === 'text') {
-                // Close current thinking group before text
-                closeThinkingGroup();
+                // Close current background activity group before text.
+                closeActivityGroup();
                 state.hasText = true;
                 items.push({
                     type: 'text',
                     id: key,
                     textPart: part,
                 });
+                continue;
+            }
+            if (part.type === 'file') {
+                closeActivityGroup();
+                items.push({
+                    type: 'file',
+                    id: key,
+                    filePart: part,
+                });
             }
         }
-        // Close any remaining thinking group
-        closeThinkingGroup();
+        // Close any remaining activity group
+        closeActivityGroup();
         return {
             contentItems: items,
             hasFinalAssistantText: state.hasText,
@@ -202,27 +527,27 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
         toolProgress,
         onApprovalResponse,
     ]);
-    // Determine if last thinking group is streaming
-    const lastThinkingGroup = contentItems
-        .filter((item) => item.type === 'thinking')
-        .map((item) => (item.type === 'thinking' ? item.thinkingGroup : null))
+    // Determine if last activity group is streaming
+    const lastActivityGroup = contentItems
+        .filter((item) => item.type === 'activity')
+        .map((item) => (item.type === 'activity' ? item.activityGroup : null))
         .filter((g) => g !== null)
         .pop();
     // Check if we're still streaming overall and waiting for text
     const isStreamingOverall = isStreaming && isLast && !hasFinalAssistantText;
-    // For the last thinking group, also keep it open if we just finished streaming
+    // For the last activity group, also keep it open if we just finished streaming
     // but text hasn't appeared yet (grace period for AI to start responding)
     const shouldKeepLastGroupOpen = isLast && !hasFinalAssistantText && message.role === 'assistant';
-    // Auto-open/close reasoning groups based on streaming state
+    // Auto-open/close activity groups based on streaming state
     useEffect(() => {
-        setThinkingGroupStates((prevStates) => {
+        setActivityGroupStates((prevStates) => {
             let hasChanges = false;
             const nextStates = new Map(prevStates);
             contentItems.forEach((item) => {
-                if (item.type === 'thinking' && item.thinkingGroup) {
-                    const groupId = item.thinkingGroup.id;
-                    const group = item.thinkingGroup;
-                    const isLastGroup = lastThinkingGroup?.id === groupId;
+                if (item.type === 'activity' && item.activityGroup) {
+                    const groupId = item.activityGroup.id;
+                    const group = item.activityGroup;
+                    const isLastGroup = lastActivityGroup?.id === groupId;
                     const currentState = nextStates.get(groupId);
                     const shouldBeOpen = group.isStreaming ||
                         (isLastGroup && isStreamingOverall) ||
@@ -253,53 +578,73 @@ function PureMessage({ message, isLast = false, isStreaming = false, }) {
     }, [
         contentItems,
         isStreamingOverall,
-        lastThinkingGroup,
+        lastActivityGroup,
         shouldKeepLastGroupOpen,
     ]);
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { "data-testid": `message-${message.role}`, className: "group/message w-full min-w-0 px-2", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1 }, "data-role": message.role, children: _jsx("div", { className: "flex w-full min-w-0 items-start gap-4", children: _jsx("div", { className: "mt-1 flex w-full min-w-0 flex-col gap-2", children: contentItems.map((item) => {
-                        if (item.type === 'thinking' &&
-                            item.thinkingGroup &&
-                            message.role === 'assistant') {
-                            const group = item.thinkingGroup;
-                            const groupState = thinkingGroupStates.get(group.id);
-                            const isLastGroup = lastThinkingGroup?.id === group.id;
-                            const isGroupStreaming = group.isStreaming || (isLastGroup && isStreamingOverall);
-                            const shouldBeOpenByDefault = isGroupStreaming;
-                            const isOpen = groupState?.isOpen ?? shouldBeOpenByDefault;
-                            const titleForTrigger = hasFinalAssistantText && isLastGroup && !isGroupStreaming
-                                ? DEFAULT_ACTIONS_LABEL
-                                : group.title || DEFAULT_ACTIONS_LABEL;
-                            return (_jsxs(Collapsible, { open: isOpen, onOpenChange: (open) => {
-                                    setThinkingGroupStates((prev) => {
-                                        const next = new Map(prev);
-                                        const current = next.get(group.id) ?? {
-                                            isOpen: false,
-                                            userOpened: false,
-                                        };
-                                        next.set(group.id, {
-                                            ...current,
-                                            isOpen: open,
-                                            userOpened: open ? true : current.userOpened,
-                                        });
-                                        return next;
-                                    });
-                                }, className: "mb-2 w-full", "data-ai-reasoning": true, children: [_jsxs(CollapsibleTrigger, { className: cn('group flex max-w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-[11px] font-semibold uppercase tracking-wide transition-colors', 'text-muted-foreground hover:bg-accent hover:text-foreground min-w-0'), children: [_jsx(Brain, { className: cn('size-3.5 shrink-0 opacity-80', isGroupStreaming && 'animate-pulse') }), _jsx("span", { className: "flex-1 truncate", children: titleForTrigger }), _jsx(ChevronDown, { className: cn('size-3.5 shrink-0 transition-transform', 'group-data-[state=open]:rotate-180') })] }), _jsx(CollapsibleContent, { className: "text-muted-foreground min-w-0 overflow-hidden rounded-md px-[5px] py-2 font-mono text-xs leading-relaxed", children: _jsx(ThinkingTimeline, { items: group.timeline }) })] }, item.id));
-                        }
-                        if (item.type === 'inline-tool') {
-                            return (_jsx("div", { className: "w-full min-w-0", children: item.content }, item.id));
-                        }
-                        if (item.type === 'text' && item.textPart) {
-                            if (message.role === 'user') {
-                                return (_jsx("div", { className: "bg-secondary text-secondary-foreground w-full rounded-2xl px-4 py-2.5 pb-4", children: _jsx("div", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed", children: item.textPart.text }) }, item.id));
-                            }
-                            return (_jsx("div", { className: cn('flex min-w-0 flex-col gap-4', {
-                                    'w-full': message.role === 'assistant',
-                                }), children: _jsx(Markdown, { markdown: item.textPart.text, proseSize: "sm", className: cn('[&_.prose]:leading-relaxed [&_.prose]:text-current', '[&_.prose_pre]:bg-background/80 [&_.prose_code]:text-current', '[&_.prose_p:last-child]:mb-0 [&_.prose_p]:mb-2') }) }, item.id));
-                        }
-                        return null;
-                    }) }) }) }) }));
+    const renderContentItem = (item) => {
+        if (item.type === 'activity' &&
+            item.activityGroup &&
+            message.role === 'assistant') {
+            const group = item.activityGroup;
+            const groupState = activityGroupStates.get(group.id);
+            const isLastGroup = lastActivityGroup?.id === group.id;
+            const isGroupStreaming = group.isStreaming || (isLastGroup && isStreamingOverall);
+            const shouldBeOpenByDefault = isGroupStreaming;
+            const isOpen = groupState?.isOpen ?? shouldBeOpenByDefault;
+            const titleForTrigger = group.title || DEFAULT_ACTIONS_LABEL;
+            return (_jsxs(Collapsible, { open: isOpen, onOpenChange: (open) => {
+                    setActivityGroupStates((prev) => {
+                        const next = new Map(prev);
+                        const current = next.get(group.id) ?? {
+                            isOpen: false,
+                            userOpened: false,
+                        };
+                        next.set(group.id, {
+                            ...current,
+                            isOpen: open,
+                            userOpened: open ? true : current.userOpened,
+                        });
+                        return next;
+                    });
+                }, className: "mb-1 w-full", "data-ai-reasoning": true, children: [_jsxs(CollapsibleTrigger, { className: cn('group flex max-w-full cursor-pointer items-center gap-1 py-0.5 text-[13px] font-normal leading-5 transition-colors', 'text-muted-foreground/75 hover:text-foreground/80 min-w-0'), children: [_jsx("span", { className: "flex-1 truncate", children: titleForTrigger }), _jsx(ChevronDown, { className: cn('size-3 shrink-0 opacity-0 transition-all duration-200 group-hover:opacity-70', isOpen && 'rotate-180 opacity-50') })] }), _jsx(CollapsibleContent, { className: "text-muted-foreground/75 min-w-0 overflow-hidden pb-1.5 pl-3 pt-0 text-[13px] leading-5", children: _jsx("div", { className: "max-h-28 space-y-0.5 overflow-y-auto pr-2", children: group.entries.map((entry) => (_jsx("div", { className: cn('min-w-0 overflow-hidden truncate', entry.isError && 'text-destructive'), children: entry.content }, entry.id))) }) })] }, item.id));
+        }
+        if (item.type === 'inline-tool') {
+            return (_jsx("div", { className: "w-full min-w-0", children: item.content }, item.id));
+        }
+        if (item.type === 'file' && item.filePart) {
+            const isImage = item.filePart.mediaType.startsWith('image/');
+            const label = item.filePart.filename || 'Attached image';
+            return (_jsxs("div", { className: cn('bg-secondary text-secondary-foreground flex w-full items-center gap-3 rounded-2xl px-3 py-2.5', message.role !== 'user' && 'bg-muted text-foreground'), children: [_jsx("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border", children: isImage && item.filePart.previewUrl ? (_jsx("img", { src: item.filePart.previewUrl, alt: "", className: "size-full object-cover", draggable: false })) : (_jsx(ImageIcon, { className: "text-muted-foreground size-5" })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", children: label }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: item.filePart.mediaType })] })] }, item.id));
+        }
+        if (item.type === 'text' && item.textPart) {
+            if (message.role === 'user') {
+                return (_jsx("div", { className: "flex w-full justify-end", children: _jsx("div", { className: "bg-foreground/5 text-foreground max-w-[77%] break-words rounded-2xl px-3 py-2 text-[13px] leading-5", children: _jsx("div", { className: "whitespace-pre-wrap break-words", children: item.textPart.text }) }) }, item.id));
+            }
+            return (_jsx("div", { className: cn('flex min-w-0 flex-col gap-4', {
+                    'w-full': message.role === 'assistant',
+                }), children: _jsx(Markdown, { markdown: item.textPart.text, proseSize: "sm", className: cn('[&_.prose]:text-[13px] [&_.prose]:leading-[21px] [&_.prose]:text-current', '[&_.prose_pre]:bg-background/80 [&_.prose_code]:text-current', '[&_.prose_p:last-child]:mb-0 [&_.prose_p]:mb-2', '[&_.prose_ol:first-child]:mt-0 [&_.prose_ul:first-child]:mt-0', '[&_.prose>*:last-child]:mb-0') }) }, item.id));
+        }
+        return null;
+    };
+    const finalTextItemIndex = message.role === 'assistant'
+        ? contentItems.reduce((lastIndex, item, index) => item.type === 'text' ? index : lastIndex, -1)
+        : -1;
+    const shouldCollapsePreAnswerWork = message.role === 'assistant' &&
+        hasFinalAssistantText &&
+        finalTextItemIndex > 0;
+    const preAnswerWorkItems = shouldCollapsePreAnswerWork
+        ? contentItems.slice(0, finalTextItemIndex)
+        : [];
+    const finalAnswerItems = shouldCollapsePreAnswerWork
+        ? contentItems.slice(finalTextItemIndex)
+        : contentItems;
+    const isTurnStillWorking = isLast &&
+        isStreaming &&
+        message.role === 'assistant' &&
+        !message.turn?.completedAtMs;
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { "data-testid": `message-${message.role}`, className: "group/message w-full min-w-0 px-2", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1 }, "data-role": message.role, children: _jsx("div", { className: "flex w-full min-w-0 items-start gap-4", children: _jsxs("div", { className: "mt-1 flex w-full min-w-0 flex-col gap-2", children: [shouldCollapsePreAnswerWork && (_jsx(WorkSummary, { messageId: message.id, startedAtMs: message.turn?.startedAtMs, completedAtMs: message.turn?.completedAtMs, isWorking: isTurnStillWorking, children: _jsx("div", { className: "flex min-w-0 flex-col gap-2", children: preAnswerWorkItems.map(renderContentItem) }) })), finalAnswerItems.map(renderContentItem)] }) }) }) }));
 }
 export const Message = memo(PureMessage);
 export function ThinkingMessage() {
-    return (_jsx(motion.div, { "data-testid": "message-assistant-loading", className: "group/message w-full px-2", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1, transition: { delay: 0.5 } }, "data-role": "assistant", children: _jsxs("div", { className: "text-muted-foreground flex flex-row items-center gap-2 px-2", children: [_jsx(Loader2, { className: "size-4 shrink-0 animate-spin" }), _jsx("span", { className: "font-mono text-xs font-medium uppercase", children: "Thinking..." })] }) }));
+    return (_jsx(motion.div, { "data-testid": "message-assistant-loading", className: "group/message w-full px-2", initial: { y: 5, opacity: 0 }, animate: { y: 0, opacity: 1, transition: { delay: 0.5 } }, "data-role": "assistant", children: _jsx("div", { className: "text-muted-foreground/75 px-2 text-[13px] leading-5", children: _jsx("span", { className: "animate-pulse select-none", children: "Thinking" }) }) }));
 }