@shepai/cli 1.179.1 → 1.180.0

package/dist/src/presentation/web/components/features/chat/StepTracker.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Collapsible } from 'radix-ui';
+import { Check, ChevronDown, ChevronRight, Circle, AlertTriangle } from 'lucide-react';
+import Markdown from 'react-markdown';
+import { cn } from '../../../lib/utils.js';
+import { Spinner } from '../../ui/spinner.js';
+import { ToolBubble, parseToolEvent } from './tool-bubble/index.js';
+const markdownComponents = {
+    p: ({ children }) => _jsx("p", { className: "mb-2 leading-relaxed last:mb-0", children: children }),
+    strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
+    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-[11px]`, children: children })) : (_jsx("code", { className: "bg-background/50 rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: children })),
+    pre: ({ children }) => (_jsx("pre", { className: "bg-background/50 my-2 overflow-x-auto rounded-md p-3 font-mono text-[11px] leading-relaxed", children: children })),
+    ul: ({ children }) => _jsx("ul", { className: "mb-2 list-disc ps-4 last:mb-0", children: children }),
+    ol: ({ children }) => _jsx("ol", { className: "mb-2 list-decimal ps-4 last:mb-0", children: children }),
+    li: ({ children }) => _jsx("li", { className: "mb-0.5", children: children }),
+    h1: ({ children }) => _jsx("h1", { className: "mb-1 text-sm font-bold", children: children }),
+    h2: ({ children }) => _jsx("h2", { className: "mb-1 text-sm font-bold", children: children }),
+    h3: ({ children }) => _jsx("h3", { className: "mb-1 text-xs font-semibold", children: children }),
+    a: ({ children, href }) => (_jsx("a", { href: href, className: "text-blue-500 underline", target: "_blank", rel: "noopener noreferrer", children: children })),
+};
+/**
+ * Vertical list of workflow step cards with a status indicator,
+ * friendly title/description, and an expandable body. The expanded
+ * view shows the step's metadata summary and any tool-event
+ * messages (Bash, Read, Write, Edit, …) that the agent produced
+ * while this step was active — the same bubble component the
+ * regular thread would have used, just grouped by step.
+ */
+export function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }) {
+    const [expandedOverride, setExpandedOverride] = useState(false);
+    if (steps.length === 0)
+        return null;
+    if (collapsedSummary && !expandedOverride) {
+        const doneCount = steps.filter((s) => s.status === 'done').length;
+        return (_jsx("div", { className: cn('p-4', className), children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(true), className: "hover:bg-muted/40 border-border bg-background flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Initial setup complete" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [doneCount, " of ", steps.length, " steps finished \u2014 click to review"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4 shrink-0" })] }) }));
+    }
+    return (_jsxs("ol", { className: cn('flex flex-col gap-2 p-4', className), children: [collapsedSummary ? (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(false), className: "text-muted-foreground hover:text-foreground mb-1 inline-flex items-center gap-1 text-[10px] tracking-wide uppercase", children: [_jsx(ChevronDown, { className: "h-3 w-3" }), "Collapse setup"] }) })) : null, steps.map((step, idx) => (
+            // Each card fades + slides in on mount, briefly staggered so
+            // the tracker assembles itself instead of popping in all at
+            // once. Capped at 6 indexes so very long step lists don't
+            // turn into a long cascade.
+            _jsx(StepCard, { step: step, liveStatus: step.definition.id === activeStepId ? (liveStatus ?? null) : null, mountIndex: idx }, step.definition.id)))] }));
+}
+function classifyMessages(messages) {
+    const items = [];
+    for (const m of messages) {
+        const content = m.content?.trim() ?? '';
+        if (!content)
+            continue;
+        if (parseToolEvent(content)) {
+            items.push({ kind: 'tool', message: m });
+        }
+        else {
+            items.push({ kind: 'text', message: m });
+        }
+    }
+    return items;
+}
+function StepCard({ step, liveStatus, mountIndex }) {
+    const [expanded, setExpanded] = useState(false);
+    const { status, definition, metadata, toolMessages } = step;
+    const details = readStringArray(metadata, 'details');
+    const error = readString(metadata, 'error');
+    const items = classifyMessages(toolMessages);
+    // Note: the `summary` metadata field is populated by the orchestrator
+    // with `definition.title` on every step (see RunWorkflowUseCase), so
+    // it is always a duplicate of the card header and is intentionally
+    // NOT rendered — otherwise the expanded body would open with a copy
+    // of the title right above the real content.
+    const hasBody = items.length > 0 || details.length > 0 || !!error;
+    return (_jsx(Collapsible.Root, { asChild: true, open: expanded, onOpenChange: setExpanded, children: _jsxs("li", { className: cn(
+            // `transition-colors` glides the border + background tint
+            // when the status changes (pending → running → done) so the
+            // tracker feels alive instead of snapping.
+            'rounded-lg border transition-[background-color,border-color] duration-300 ease-out', 
+            // Mount animation: each card slides + fades in. The
+            // staggered animationDelay below makes the whole tracker
+            // assemble itself instead of popping in.
+            'animate-in fade-in-0 slide-in-from-top-2', 
+            // Green is reserved for the DONE state (the universal "this
+            // finished cleanly" signal). The running card uses Shep's
+            // indigo/violet brand accent so the in-progress step is
+            // visually distinct from anything that has already completed.
+            status === 'running' && 'border-violet-500/40 bg-violet-500/5', status === 'done' && 'border-border bg-background', status === 'pending' && 'border-border/40 bg-muted/20', status === 'failed' && 'border-red-500/40 bg-red-500/5', status === 'interrupted' && 'border-amber-500/40 bg-amber-500/5'), style: { animationDelay: `${Math.min(mountIndex, 6) * 40}ms`, animationDuration: '300ms' }, children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !hasBody, className: cn('flex w-full items-center gap-3 px-3 py-1.5 text-left transition-colors duration-200', hasBody && 'hover:bg-muted/40 cursor-pointer', !hasBody && 'cursor-default'), children: [_jsx(StatusIcon, { status: status }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: cn('shrink-0 truncate text-sm font-medium transition-colors duration-300', status === 'pending' && 'text-muted-foreground/60'), children: definition.title }), liveStatus && status === 'running' ? (
+                                    // While the step is running, the live status preempts
+                                    // the static description — same slot, more useful
+                                    // information. The only place agent in-flight activity
+                                    // surfaces while the workflow is active. Color matches
+                                    // the card accent (violet) so green stays exclusive to
+                                    // "done". `key={liveStatus}` retriggers the fade-in
+                                    // every time the status text rotates, so consecutive
+                                    // tool calls feel like they tick instead of swap.
+                                    _jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5 text-xs text-violet-700 dark:text-violet-300", children: [_jsx("span", { className: "inline-flex h-1 w-1 shrink-0 translate-y-[-1px] animate-pulse rounded-full bg-violet-500" }), _jsx("span", { className: "animate-in fade-in-0 slide-in-from-left-1 truncate duration-300", children: liveStatus }, liveStatus)] })) : definition.description ? (_jsx("span", { className: cn('min-w-0 truncate text-xs font-normal', status === 'pending' ? 'text-muted-foreground/40' : 'text-muted-foreground/70'), children: definition.description })) : null] }), items.length > 0 ? (_jsx("span", { className: "text-muted-foreground/60 animate-in fade-in-0 zoom-in-95 mr-1 shrink-0 text-[10px] tabular-nums duration-200", children: items.length }, items.length)) : null, hasBody ? (_jsx(ChevronRight, { className: cn('text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 ease-out', expanded && 'rotate-90') })) : null] }) }), _jsx(Collapsible.Content, { className: cn('overflow-hidden', 
+                    // The keyframes (defined in globals.css) animate from
+                    // height: 0 ↔ var(--radix-collapsible-content-height) so
+                    // the body smoothly slides open and back. Both directions
+                    // get matching cubic-bezier curves — one ease-out for
+                    // open, one ease-in for close — so the motion never feels
+                    // lopsided.
+                    'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'), children: _jsxs("div", { className: "border-border/40 space-y-2 border-t px-3 py-2.5 text-xs", children: [error ? (_jsx("p", { className: "rounded bg-red-500/10 p-2 text-red-600 dark:text-red-400", children: error })) : null, details.length > 0 ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 ps-4", children: details.map((d) => (_jsx("li", { children: d }, d))) })) : null, items.length > 0 ? (_jsx("div", { className: "-mx-1 flex flex-col gap-1", children: items.map((item, idx) => item.kind === 'tool' ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(ToolBubble, { text: item.message.content }) }, item.message.id)) : (_jsx("div", { className: "text-foreground animate-in fade-in-0 slide-in-from-top-1 px-1 text-xs leading-relaxed duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(Markdown, { components: markdownComponents, children: item.message.content }) }, item.message.id))) })) : null] }) })] }) }));
+}
+function StatusIcon({ status }) {
+    if (status === 'running') {
+        return _jsx(Spinner, { size: "sm", className: "shrink-0 text-violet-500" });
+    }
+    if (status === 'done') {
+        return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }));
+    }
+    if (status === 'failed') {
+        return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-red-500 text-white", children: _jsx(AlertTriangle, { className: "h-2.5 w-2.5", strokeWidth: 3 }) }));
+    }
+    if (status === 'interrupted') {
+        return _jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-amber-500" });
+    }
+    return _jsx(Circle, { className: "text-muted-foreground/30 h-4 w-4 shrink-0" });
+}
+function readString(metadata, key) {
+    if (!metadata)
+        return '';
+    const v = metadata[key];
+    return typeof v === 'string' ? v : '';
+}
+function readStringArray(metadata, key) {
+    if (!metadata)
+        return [];
+    const v = metadata[key];
+    if (!Array.isArray(v))
+        return [];
+    return v.filter((x) => typeof x === 'string');
+}

package/dist/src/presentation/web/components/features/chat/StepTracker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StepTracker } from './StepTracker.js';
+declare const meta: Meta<typeof StepTracker>;
+export default meta;
+type Story = StoryObj<typeof StepTracker>;
+export declare const AllPending: Story;
+export declare const InProgress: Story;
+export declare const AllDone: Story;
+export declare const FailedMidway: Story;
+export declare const InterruptedAfterCrash: Story;
+//# sourceMappingURL=StepTracker.stories.d.ts.map

package/dist/src/presentation/web/components/features/chat/StepTracker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAWlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAyE1C,eAAO,MAAM,UAAU,EAAE,KAAoC,CAAC;AAE9D,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC"}

package/dist/src/presentation/web/components/features/chat/StepTracker.stories.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StepTracker } from './StepTracker.js';
+const meta = {
+    title: 'Features/Chat/StepTracker',
+    component: StepTracker,
+    parameters: { layout: 'centered' },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[480px] rounded-xl border", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const DEFS = [
+    {
+        id: 's-1',
+        stepKey: 'scaffold',
+        title: 'Setting up your project',
+        description: 'Creating the foundation files',
+    },
+    {
+        id: 's-2',
+        stepKey: 'deps',
+        title: 'Installing design tools',
+        description: 'Adding Tailwind and essentials',
+    },
+    {
+        id: 's-3',
+        stepKey: 'plan',
+        title: 'Sketching the app',
+        description: 'Planning screens and data',
+    },
+    {
+        id: 's-4',
+        stepKey: 'components',
+        title: 'Building the pieces',
+        description: 'Creating reusable parts',
+    },
+    {
+        id: 's-5',
+        stepKey: 'content',
+        title: 'Adding realistic content',
+        description: 'Writing copy and sample data',
+    },
+    {
+        id: 's-6',
+        stepKey: 'wire',
+        title: 'Connecting everything',
+        description: 'Wiring navigation and forms',
+    },
+    {
+        id: 's-7',
+        stepKey: 'style',
+        title: 'Polishing the look',
+        description: 'Applying colors, spacing, and motion',
+    },
+    {
+        id: 's-8',
+        stepKey: 'verify',
+        title: 'Double-checking',
+        description: 'Making sure it runs cleanly',
+    },
+    {
+        id: 's-9',
+        stepKey: 'report',
+        title: 'Your app is ready',
+        description: 'Summary of what was built',
+    },
+];
+function build(overrides = {}) {
+    return DEFS.map((d) => {
+        const o = overrides[d.stepKey] ?? {};
+        return {
+            definition: d,
+            status: o.status ?? 'pending',
+            metadata: o.metadata ?? null,
+            toolMessages: o.toolMessages ?? [],
+        };
+    });
+}
+export const AllPending = { args: { steps: build() } };
+export const InProgress = {
+    args: {
+        steps: build({
+            scaffold: {
+                status: 'done',
+                metadata: {
+                    summary: 'Created a new Vite + React project',
+                    details: ['package.json', 'vite.config.ts'],
+                },
+            },
+            deps: {
+                status: 'done',
+                metadata: { summary: 'Installed Tailwind and a handful of utilities' },
+            },
+            plan: { status: 'running' },
+        }),
+    },
+};
+export const AllDone = {
+    args: {
+        steps: build(Object.fromEntries(DEFS.map((d) => [
+            d.stepKey,
+            { status: 'done', metadata: { summary: `${d.title} — finished cleanly` } },
+        ]))),
+    },
+};
+export const FailedMidway = {
+    args: {
+        steps: build({
+            scaffold: { status: 'done', metadata: { summary: 'Scaffold complete' } },
+            deps: { status: 'failed', metadata: { error: 'npm install exited with code 1' } },
+        }),
+    },
+};
+export const InterruptedAfterCrash = {
+    args: {
+        steps: build({
+            scaffold: { status: 'done', metadata: { summary: 'Scaffold complete' } },
+            deps: { status: 'interrupted' },
+        }),
+    },
+};

package/dist/src/presentation/web/components/features/chat/chat-state-query.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared TanStack Query key + fetcher for the per-feature chat state.
+ *
+ * Both `useChatRuntime` (inside ChatTab) and the application page's
+ * top bar subscribe to the SAME cached entry so a single SSE stream
+ * updates every consumer at once. Keep the key and fetcher here so
+ * there's exactly one source of truth.
+ */
+import type { ChatState } from '../../../../../../packages/core/src/application/ports/output/services/interactive-session-service.interface.js';
+export declare function chatQueryKey(featureId: string): readonly ["chat-messages", string];
+export declare function fetchChatState(featureId: string): Promise<ChatState>;
+//# sourceMappingURL=chat-state-query.d.ts.map

package/dist/src/presentation/web/components/features/chat/chat-state-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-state-query.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/chat-state-query.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAEtH,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,sCAE7C;AAED,wBAAsB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,CAQ1E"}

package/dist/src/presentation/web/components/features/chat/chat-state-query.js

@@ -0,0 +1,20 @@
+/**
+ * Shared TanStack Query key + fetcher for the per-feature chat state.
+ *
+ * Both `useChatRuntime` (inside ChatTab) and the application page's
+ * top bar subscribe to the SAME cached entry so a single SSE stream
+ * updates every consumer at once. Keep the key and fetcher here so
+ * there's exactly one source of truth.
+ */
+export function chatQueryKey(featureId) {
+    return ['chat-messages', featureId];
+}
+export async function fetchChatState(featureId) {
+    const res = await fetch(`/api/interactive/chat/${featureId}/messages`);
+    if (!res.ok) {
+        // eslint-disable-next-line no-console
+        console.error(`[ChatState] fetch failed: ${res.status}`, await res.text().catch(() => ''));
+        throw new Error(`Failed to fetch chat state: ${res.status}`);
+    }
+    return res.json();
+}

package/dist/src/presentation/web/components/features/chat/tool-bubble/detect.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Parse the persisted content of a tool-event chat message.
+ *
+ * `persistToolEvent` in the interactive session service writes
+ * messages in one of two shapes:
+ *
+ *   1. `**<Label>** \`<detail>\``    — most tool calls, detail usually JSON
+ *   2. `**<Label>**`                  — label-only events (e.g. "Session started")
+ *
+ * Anything that doesn't match either shape is not a tool event and
+ * should fall through to regular markdown rendering.
+ */
+export type ToolEvent = {
+    kind: 'tool';
+    /** Tool name, e.g. "Bash", "Read", "Write", "Edit", "Glob", "Grep" */
+    name: string;
+    /** Raw detail string as persisted (may be JSON). */
+    detail: string;
+    /** Parsed object if `detail` was valid JSON, otherwise null. */
+    parsed: Record<string, unknown> | null;
+} | {
+    kind: 'label-only';
+    name: string;
+};
+export declare function parseToolEvent(text: string): ToolEvent | null;
+/** True when the tool is a file mutation (Write / Edit / MultiEdit). */
+export declare function isFileWriteTool(name: string): boolean;
+/** Extract the file path from a parsed tool payload, if present. */
+export declare function extractFilePath(parsed: Record<string, unknown> | null): string | null;
+/** Extract the file content from a parsed tool payload, if present. */
+export declare function extractFileContent(parsed: Record<string, unknown> | null): string | null;
+/**
+ * Build a short one-line summary from a parsed tool payload, e.g. the
+ * command for Bash, the file_path for Read, the pattern for Grep.
+ * Falls back to a truncated version of the raw detail string.
+ */
+export declare function summarizeToolDetail(parsed: Record<string, unknown> | null, fallback: string, maxLen?: number): string;
+//# sourceMappingURL=detect.d.ts.map

package/dist/src/presentation/web/components/features/chat/tool-bubble/detect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detect.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/chat/tool-bubble/detect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,SAAS,GACjB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACxC,GACD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAKzC,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAwB7D;AAED,wEAAwE;AACxE,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAOrF;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAaxF;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,EACtC,QAAQ,EAAE,MAAM,EAChB,MAAM,SAAK,GACV,MAAM,CAWR"}

package/dist/src/presentation/web/components/features/chat/tool-bubble/detect.js

@@ -0,0 +1,91 @@
+/**
+ * Parse the persisted content of a tool-event chat message.
+ *
+ * `persistToolEvent` in the interactive session service writes
+ * messages in one of two shapes:
+ *
+ *   1. `**<Label>** \`<detail>\``    — most tool calls, detail usually JSON
+ *   2. `**<Label>**`                  — label-only events (e.g. "Session started")
+ *
+ * Anything that doesn't match either shape is not a tool event and
+ * should fall through to regular markdown rendering.
+ */
+const TOOL_WITH_DETAIL_RE = /^\*\*(.+?)\*\*\s+`([\s\S]+)`\s*$/;
+const LABEL_ONLY_RE = /^\*\*(.+?)\*\*\s*$/;
+export function parseToolEvent(text) {
+    const trimmed = text.trim();
+    const withDetail = trimmed.match(TOOL_WITH_DETAIL_RE);
+    if (withDetail) {
+        const [, name, detail] = withDetail;
+        let parsed = null;
+        try {
+            const maybe = JSON.parse(detail);
+            if (maybe && typeof maybe === 'object' && !Array.isArray(maybe)) {
+                parsed = maybe;
+            }
+        }
+        catch {
+            // Not JSON — leave parsed null, bubble will show the raw string.
+        }
+        return { kind: 'tool', name: name.trim(), detail, parsed };
+    }
+    const labelOnly = trimmed.match(LABEL_ONLY_RE);
+    if (labelOnly) {
+        return { kind: 'label-only', name: labelOnly[1].trim() };
+    }
+    return null;
+}
+/** True when the tool is a file mutation (Write / Edit / MultiEdit). */
+export function isFileWriteTool(name) {
+    return /^(Write|Edit|MultiEdit|Update)$/i.test(name);
+}
+/** Extract the file path from a parsed tool payload, if present. */
+export function extractFilePath(parsed) {
+    if (!parsed)
+        return null;
+    const candidates = [parsed.file_path, parsed.path, parsed.filePath, parsed.filepath];
+    for (const c of candidates) {
+        if (typeof c === 'string' && c.length > 0)
+            return c;
+    }
+    return null;
+}
+/** Extract the file content from a parsed tool payload, if present. */
+export function extractFileContent(parsed) {
+    if (!parsed)
+        return null;
+    const candidates = [
+        parsed.content,
+        parsed.new_string,
+        parsed.newString,
+        parsed.new_content,
+        parsed.text,
+    ];
+    for (const c of candidates) {
+        if (typeof c === 'string')
+            return c;
+    }
+    return null;
+}
+/**
+ * Build a short one-line summary from a parsed tool payload, e.g. the
+ * command for Bash, the file_path for Read, the pattern for Grep.
+ * Falls back to a truncated version of the raw detail string.
+ */
+export function summarizeToolDetail(parsed, fallback, maxLen = 80) {
+    if (parsed) {
+        const fields = ['command', 'file_path', 'path', 'pattern', 'query', 'url'];
+        for (const field of fields) {
+            const v = parsed[field];
+            if (typeof v === 'string' && v.length > 0) {
+                return truncate(v, maxLen);
+            }
+        }
+    }
+    return truncate(fallback.replace(/\s+/g, ' ').trim(), maxLen);
+}
+function truncate(s, max) {
+    if (s.length <= max)
+        return s;
+    return `${s.slice(0, max - 1)}…`;
+}

package/dist/src/presentation/web/components/features/chat/tool-bubble/file-card.d.ts

@@ -0,0 +1,17 @@
+export interface FileWriteCardProps {
+    /** Tool name as it was emitted — "Write", "Edit", "MultiEdit". */
+    toolName: string;
+    /** Absolute or relative path the agent acted on. */
+    filePath: string;
+    /** File content (Write) or new_string (Edit). Null if not parseable. */
+    content: string | null;
+}
+/**
+ * Specialized bubble for Write/Edit tool events.
+ *
+ * Collapsed: a pill showing the file icon, basename, and tool verb.
+ * Expanded: a full preview panel with a back button that returns to the pill.
+ * The preview scrolls internally so long files don't blow up the chat height.
+ */
+export declare function FileWriteCard({ toolName, filePath, content }: FileWriteCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-card.d.ts.map

package/dist/src/presentation/web/components/features/chat/tool-bubble/file-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-card.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/chat/tool-bubble/file-card.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CA0EhF"}

package/dist/src/presentation/web/components/features/chat/tool-bubble/file-card.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronLeft, FileText, PencilLine } from 'lucide-react';
+import { cn } from '../../../../lib/utils.js';
+/**
+ * Specialized bubble for Write/Edit tool events.
+ *
+ * Collapsed: a pill showing the file icon, basename, and tool verb.
+ * Expanded: a full preview panel with a back button that returns to the pill.
+ * The preview scrolls internally so long files don't blow up the chat height.
+ */
+export function FileWriteCard({ toolName, filePath, content }) {
+    const [expanded, setExpanded] = useState(false);
+    const basename = filePath.split(/[\\/]/).pop() ?? filePath;
+    const lineCount = content ? content.split('\n').length : 0;
+    const verb = toolName.toLowerCase();
+    const isEdit = /edit/i.test(toolName);
+    if (!expanded) {
+        return (_jsxs("button", { type: "button", onClick: () => setExpanded(true), title: filePath, className: cn('group inline-flex max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs transition-all', isEdit
+                ? 'border-sky-500/25 bg-sky-500/10 hover:border-sky-500/40 hover:bg-sky-500/15'
+                : 'border-emerald-500/25 bg-emerald-500/10 hover:border-emerald-500/40 hover:bg-emerald-500/15'), children: [_jsx("div", { className: cn('flex h-6 w-6 shrink-0 items-center justify-center rounded', isEdit ? 'bg-sky-500/15 text-sky-500' : 'bg-emerald-500/15 text-emerald-500'), children: isEdit ? _jsx(PencilLine, { className: "h-3.5 w-3.5" }) : _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex min-w-0 flex-col items-start", children: [_jsx("span", { className: "truncate font-mono text-[11px] font-medium", children: basename }), _jsxs("span", { className: "text-muted-foreground/70 font-mono text-[9px] tracking-wide uppercase", children: [verb, lineCount ? ` · ${lineCount} line${lineCount === 1 ? '' : 's'}` : ''] })] })] }));
+    }
+    return (_jsxs("div", { className: "border-border/60 bg-background/50 flex max-w-full flex-col overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "bg-muted/60 border-border/60 flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [isEdit ? (_jsx(PencilLine, { className: "h-3.5 w-3.5 shrink-0 text-sky-500" })) : (_jsx(FileText, { className: "h-3.5 w-3.5 shrink-0 text-emerald-500" })), _jsx("span", { className: "truncate font-mono text-[11px] font-medium", title: filePath, children: basename }), _jsx("span", { className: "text-muted-foreground/60 shrink-0 font-mono text-[9px] tracking-wide uppercase", children: verb })] }), _jsxs("button", { type: "button", onClick: () => setExpanded(false), className: "text-muted-foreground hover:text-foreground inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors", "aria-label": "Collapse file preview", children: [_jsx(ChevronLeft, { className: "h-3 w-3" }), "Back"] })] }), _jsx("pre", { className: "max-h-[420px] overflow-auto px-3 py-2 font-mono text-[10px] leading-relaxed", children: content ?? '(no content available)' }), _jsx("div", { className: "text-muted-foreground/60 border-border/60 border-t px-3 py-1 font-mono text-[9px]", children: filePath })] }));
+}

package/dist/src/presentation/web/components/features/chat/tool-bubble/generic-bubble.d.ts

@@ -0,0 +1,11 @@
+export interface GenericToolBubbleProps {
+    name: string;
+    detail: string;
+    parsed: Record<string, unknown> | null;
+}
+/**
+ * Collapsed-by-default tool bubble. Clicking the chip expands a
+ * pretty-printed view of the tool's payload underneath.
+ */
+export declare function GenericToolBubble({ name, detail, parsed }: GenericToolBubbleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=generic-bubble.d.ts.map

package/dist/src/presentation/web/components/features/chat/tool-bubble/generic-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generic-bubble.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/chat/tool-bubble/generic-bubble.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CAqBjF"}

package/dist/src/presentation/web/components/features/chat/tool-bubble/generic-bubble.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ToolChip } from './tool-chip.js';
+import { summarizeToolDetail } from './detect.js';
+/**
+ * Collapsed-by-default tool bubble. Clicking the chip expands a
+ * pretty-printed view of the tool's payload underneath.
+ */
+export function GenericToolBubble({ name, detail, parsed }) {
+    const [expanded, setExpanded] = useState(false);
+    const summary = summarizeToolDetail(parsed, detail);
+    const body = parsed ? JSON.stringify(parsed, null, 2) : detail;
+    return (_jsxs("div", { className: "inline-flex max-w-full flex-col", children: [_jsx(ToolChip, { name: name, summary: expanded ? null : summary, expanded: expanded, onToggle: () => setExpanded((v) => !v) }), expanded ? (_jsx("pre", { className: "border-border/60 bg-background/40 text-foreground/70 max-h-[300px] max-w-full overflow-auto rounded-md rounded-tl-none border px-3 py-2 font-mono text-[10px] leading-relaxed", children: body })) : null] }));
+}

package/dist/src/presentation/web/components/features/chat/tool-bubble/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Public entry for the chat tool-bubble module.
+ *
+ * `ToolBubble` inspects a persisted assistant-message text string and
+ * returns the right compact bubble:
+ *
+ *   - Write / Edit / MultiEdit  → <FileWriteCard> (file preview, expand to full content)
+ *   - Anything else             → <GenericToolBubble> (collapsible chip + JSON)
+ *
+ * Non-tool text returns `null` so the caller can fall through to the
+ * normal markdown renderer.
+ */
+export interface ToolBubbleProps {
+    text: string;
+}
+export declare function ToolBubble({ text }: ToolBubbleProps): import("react/jsx-runtime").JSX.Element | null;
+/** Re-export the detector for callers that need to branch on tool events
+ *  before deciding which shell to render (e.g. AssistantMessage skipping
+ *  its bubble wrapper). */
+export { parseToolEvent, isFileWriteTool } from './detect.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/chat/tool-bubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/chat/tool-bubble/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE,eAAe,kDAwBnD;AAED;;2BAE2B;AAC3B,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}

package/dist/src/presentation/web/components/features/chat/tool-bubble/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Public entry for the chat tool-bubble module.
+ *
+ * `ToolBubble` inspects a persisted assistant-message text string and
+ * returns the right compact bubble:
+ *
+ *   - Write / Edit / MultiEdit  → <FileWriteCard> (file preview, expand to full content)
+ *   - Anything else             → <GenericToolBubble> (collapsible chip + JSON)
+ *
+ * Non-tool text returns `null` so the caller can fall through to the
+ * normal markdown renderer.
+ */
+import { parseToolEvent, isFileWriteTool, extractFilePath, extractFileContent } from './detect.js';
+import { GenericToolBubble } from './generic-bubble.js';
+import { FileWriteCard } from './file-card.js';
+export function ToolBubble({ text }) {
+    const event = parseToolEvent(text);
+    if (!event)
+        return null;
+    if (event.kind === 'label-only') {
+        return _jsx(GenericToolBubble, { name: event.name, detail: "", parsed: null });
+    }
+    if (isFileWriteTool(event.name)) {
+        const filePath = extractFilePath(event.parsed);
+        if (filePath) {
+            return (_jsx(FileWriteCard, { toolName: event.name, filePath: filePath, content: extractFileContent(event.parsed) }));
+        }
+        // Fall through to the generic bubble if the payload didn't carry
+        // a file path (shouldn't happen for real Write/Edit, but be safe).
+    }
+    return _jsx(GenericToolBubble, { name: event.name, detail: event.detail, parsed: event.parsed });
+}
+/** Re-export the detector for callers that need to branch on tool events
+ *  before deciding which shell to render (e.g. AssistantMessage skipping
+ *  its bubble wrapper). */
+export { parseToolEvent, isFileWriteTool } from './detect.js';

package/dist/src/presentation/web/components/features/chat/tool-bubble/tool-chip.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface ToolChipProps {
+    name: string;
+    summary?: string | null;
+    expanded: boolean;
+    onToggle: () => void;
+    /** Optional icon override. Defaults to a generic wrench. */
+    icon?: ReactNode;
+    /** Optional accent tint (used for Write/Edit file cards). */
+    tint?: 'default' | 'green' | 'blue';
+}
+/** Compact collapsed-state chip for any tool event. */
+export declare function ToolChip({ name, summary, expanded, onToggle, icon, tint, }: ToolChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tool-chip.d.ts.map

package/dist/src/presentation/web/components/features/chat/tool-bubble/tool-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-chip.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/components/features/chat/tool-bubble/tool-chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACrC;AAQD,uDAAuD;AACvD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAgB,GACjB,EAAE,aAAa,2CAuBf"}

package/dist/src/presentation/web/components/features/chat/tool-bubble/tool-chip.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react';
+import { cn } from '../../../../lib/utils.js';
+const TINT_CLASS = {
+    default: 'bg-muted/40 hover:bg-muted/70',
+    green: 'bg-emerald-500/8 hover:bg-emerald-500/15 border-emerald-500/20',
+    blue: 'bg-sky-500/8 hover:bg-sky-500/15 border-sky-500/20',
+};
+/** Compact collapsed-state chip for any tool event. */
+export function ToolChip({ name, summary, expanded, onToggle, icon, tint = 'default', }) {
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: cn('border-border/60 text-foreground/90 group inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-0.5 font-mono text-[11px] transition-colors', TINT_CLASS[tint], expanded && 'rounded-b-none border-b-0'), children: [expanded ? (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })) : (_jsx(ChevronRight, { className: "h-3 w-3 shrink-0 opacity-60" })), icon ?? _jsx(Wrench, { className: "h-3 w-3 shrink-0 opacity-60" }), _jsx("span", { className: "shrink-0 font-medium", children: name }), summary ? (_jsx("span", { className: "text-muted-foreground/70 max-w-[360px] truncate", children: summary })) : null] }));
+}