@shepai/cli 1.103.1-pr308.436876d → 1.103.1-pr309.f0bca17

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA4iB1F"}
+{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG/D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,wBAAwB,2CA6iB1F"}

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.js

@@ -329,7 +329,7 @@ export function FeatureDrawerClient({ view: initialView, urlTab }) {
     // ── Body ──────────────────────────────────────────────────────────────
     let body = null;
     if (view.type === 'feature' && featureNode) {
-        body = (_jsx(FeatureDrawerTabs, { featureNode: featureNode, featureId: featureNode.featureId, initialTab: view.initialTab, urlTab: urlTab, prdData: prdData, prdSelections: prdSelections, onPrdSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onPrdApprove: handlePrdApprove, onPrdReject: handlePrdReject, isPrdLoading: isLoadingPrd, techData: techData, onTechApprove: handleTechApprove, onTechReject: handleTechReject, isTechLoading: isLoadingTech, productData: isLoadingTechProduct ? null : techProductData, mergeData: mergeData, onMergeApprove: handleMergeApprove, onMergeReject: handleMergeReject, isMergeLoading: isLoadingMerge, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput }));
+        body = (_jsx(FeatureDrawerTabs, { featureNode: featureNode, featureId: featureNode.featureId, initialTab: view.initialTab, urlTab: urlTab, sseEvents: events, prdData: prdData, prdSelections: prdSelections, onPrdSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onPrdApprove: handlePrdApprove, onPrdReject: handlePrdReject, isPrdLoading: isLoadingPrd, techData: techData, onTechApprove: handleTechApprove, onTechReject: handleTechReject, isTechLoading: isLoadingTech, productData: isLoadingTechProduct ? null : techProductData, mergeData: mergeData, onMergeApprove: handleMergeApprove, onMergeReject: handleMergeReject, isMergeLoading: isLoadingMerge, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: setChatInput }));
     }
     return (_jsx(BaseDrawer, { open: isOpen, onClose: attemptClose, size: "md", modal: false, header: header, "data-testid": view.type === 'feature' ? 'feature-drawer' : 'repository-drawer', children: body }));
 }

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AAIjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AA6BD;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AAMD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAyD3F"}
+{"version":3,"file":"activity-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,yCAAyC,CAAC;AA8CjD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,qBAAqB,EAAE,CAAC;CAC7C;AA6BD;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,eAAe,EAAE,EAC1B,QAAQ,CAAC,EAAE,qBAAqB,EAAE,GACjC,iBAAiB,EAAE,CAgErB;AAMD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CA4D3F"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/activity-tab.js

@@ -1,8 +1,48 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
 import { Loader2, AlertCircle, Clock } from 'lucide-react';
 import { InlineAttachments } from '../../common/inline-attachments/index.js';
 import { formatDuration } from '../../../lib/format-duration.js';
+/**
+ * Computes the effective duration for a phase timing entry.
+ * For completed phases, uses the server-provided durationMs.
+ * For in-progress phases (has startedAt but no completedAt), computes
+ * elapsed time client-side so the UI shows a live-updating timer.
+ */
+function getEffectiveDuration(timing, now) {
+    if (timing.durationMs != null && timing.durationMs > 0)
+        return timing.durationMs;
+    if (!timing.completedAt && timing.startedAt) {
+        const started = new Date(timing.startedAt).getTime();
+        if (!Number.isNaN(started))
+            return Math.max(0, now - started);
+    }
+    return 0;
+}
+/** Returns true if any non-lifecycle phase is still in progress. */
+function hasRunningPhase(timings) {
+    return timings.some((t) => !t.phase.startsWith('run:') && !t.completedAt && t.startedAt);
+}
+/** Hook that ticks every second while there are running phases. */
+function useTickingNow(timings) {
+    const [now, setNow] = useState(Date.now);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        const running = timings ? hasRunningPhase(timings) : false;
+        if (running) {
+            // Tick every second
+            intervalRef.current = setInterval(() => setNow(Date.now()), 1000);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [timings]);
+    return now;
+}
 const NODE_TO_PHASE = {
     analyze: 'Analyzing',
     requirements: 'Requirements',
@@ -94,6 +134,7 @@ export function buildLifecycleTimeline(timings, feedback) {
  * Component
  * ------------------------------------------------------------------------- */
 export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
+    const now = useTickingNow(timings);
     if (loading) {
         return (_jsx("div", { "data-testid": "activity-tab-loading", className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
     }
@@ -104,24 +145,24 @@ export function ActivityTab({ timings, loading, error, rejectionFeedback }) {
         return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Clock, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No activity recorded yet" })] }));
     }
     const nodeTimings = timings.filter((t) => !isLifecycleEvent(t.phase));
-    const maxDurationMs = Math.max(...nodeTimings.map((t) => t.durationMs ?? 0), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
+    const maxDurationMs = Math.max(...nodeTimings.map((t) => getEffectiveDuration(t, now)), ...nodeTimings.map((t) => t.approvalWaitMs ?? 0), 0);
     const iterations = buildLifecycleTimeline(timings, rejectionFeedback);
     const hasMultipleIterations = iterations.length > 1;
-    const totalExecMs = nodeTimings.reduce((sum, t) => sum + (t.durationMs ?? 0), 0);
+    const totalExecMs = nodeTimings.reduce((sum, t) => sum + getEffectiveDuration(t, now), 0);
     const totalWaitMs = nodeTimings.reduce((sum, t) => sum + (t.approvalWaitMs ?? 0), 0);
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { "data-testid": "activity-timings", className: "flex flex-col gap-3", children: iterations.map((iteration) => (_jsx(IterationGroup, { iteration: iteration, showHeader: hasMultipleIterations, maxDurationMs: maxDurationMs, now: now }, iteration.number))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs })) : null] }));
 }
 /* ---------------------------------------------------------------------------
  * Iteration group — one cycle of work
  * ------------------------------------------------------------------------- */
-function IterationGroup({ iteration, showHeader, maxDurationMs, }) {
+function IterationGroup({ iteration, showHeader, maxDurationMs, now, }) {
     return (_jsxs("div", { "data-testid": `iteration-${iteration.number}`, className: "flex flex-col gap-1.5", children: [showHeader ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Iteration ", iteration.number] })) : null, iteration.timings.map((t) => {
                 if (isLifecycleEvent(t.phase)) {
                     // For run:rejected, the message comes from the iteration, not a separate map
                     const isRejection = t.phase === 'run:rejected';
                     return (_jsx(LifecycleEventRow, { timing: t, message: isRejection ? iteration.rejectionMessage : undefined, attachments: isRejection ? iteration.rejectionAttachments : undefined }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
                 }
-                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs, now: now }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
             })] }));
 }
 /* ---------------------------------------------------------------------------
@@ -134,14 +175,15 @@ function LifecycleEventRow({ timing, message, attachments, }) {
     const hasAttachments = attachments && attachments.length > 0;
     return (_jsxs("div", { className: `text-xs ${event.colorClass}`, children: [_jsx("span", { children: event.label }), message ? (_jsxs("span", { "data-testid": "rejection-feedback-text", className: "text-muted-foreground ml-2 font-normal italic", children: ["\u2014 ", message] })) : null, hasAttachments ? (_jsx("div", { "data-testid": "rejection-feedback-attachments", className: "mt-1.5 ml-2", children: _jsx(InlineAttachments, { text: "", attachmentPaths: attachments }) })) : null] }));
 }
-function NodeTimingRow({ timing, maxDurationMs, }) {
+function NodeTimingRow({ timing, maxDurationMs, now, }) {
     const label = timing.phase.includes(':')
         ? `rev ${timing.phase.split(':')[1]}`
         : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
-    const durationMs = timing.durationMs ?? 0;
+    const durationMs = getEffectiveDuration(timing, now);
     const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
+    const isRunning = !timing.completedAt && !!timing.startedAt;
     const barColorClass = timing.completedAt ? 'bg-emerald-500' : 'bg-blue-500';
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground w-24 shrink-0 text-xs", children: label }), _jsx("div", { className: "bg-muted h-3 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full ${barColorClass}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs", children: formatDuration(durationMs) })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { "data-testid": `timing-bar-${timing.phase}`, className: "flex items-center gap-3", children: [_jsx("span", { className: "text-muted-foreground w-24 shrink-0 text-xs", children: label }), _jsx("div", { className: "bg-muted h-3 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full ${barColorClass}${isRunning ? 'animate-pulse' : ''}`, style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs", children: formatDuration(durationMs) })] }), timing.approvalWaitMs != null && timing.approvalWaitMs > 0 ? (_jsx(ApprovalWaitRow, { timing: timing, maxDurationMs: maxDurationMs })) : null] }));
 }
 function ApprovalWaitRow({ timing, maxDurationMs, }) {
     const waitMs = timing.approvalWaitMs ?? 0;

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts

@@ -0,0 +1,5 @@
+export interface EventLogViewerProps {
+    content: string;
+}
+export declare function EventLogViewer({ content }: EventLogViewerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=event-log-viewer.d.ts.map

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-log-viewer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,mBAAmB,kDAY9D"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.js

@@ -0,0 +1,113 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { FileText, Terminal, MessageSquare, CheckCircle2, Coins, Server, FileCode, } from 'lucide-react';
+import { parseLogContent, parseToolCall, parseResultMessage, parseTokensMessage, } from '../../../lib/parse-log-line.js';
+export function EventLogViewer({ content }) {
+    const lines = useMemo(() => parseLogContent(content), [content]);
+    if (lines.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-col", children: lines.map((line) => (_jsx(LogLineRow, { line: line }, line.raw))) }));
+}
+/* ---------------------------------------------------------------------------
+ * Line router
+ * ------------------------------------------------------------------------- */
+function LogLineRow({ line }) {
+    switch (line.tag) {
+        case 'tool':
+            return _jsx(ToolCallRow, { line: line });
+        case 'text':
+            return _jsx(TextRow, { line: line });
+        case 'result':
+            return _jsx(ResultRow, { line: line });
+        case 'tokens':
+            return _jsx(TokensRow, { line: line });
+        case 'worker':
+            return _jsx(WorkerRow, { line: line });
+        case 'info':
+            return _jsx(InfoRow, { line: line });
+        case 'raw':
+        default:
+            return _jsx(RawRow, { line: line });
+    }
+}
+/* ---------------------------------------------------------------------------
+ * Shared helpers
+ * ------------------------------------------------------------------------- */
+function Timestamp({ value }) {
+    if (!value)
+        return null;
+    const time = value.replace(/^.*T/, '').replace('Z', '');
+    return (_jsx("span", { className: "text-muted-foreground/60 w-20 shrink-0 font-mono text-[10px]", children: time }));
+}
+function PhaseBadge({ phase }) {
+    if (!phase)
+        return null;
+    return (_jsx("span", { className: "bg-muted text-muted-foreground shrink-0 rounded px-1.5 py-0.5 font-mono text-[10px] font-medium", children: phase }));
+}
+/* ---------------------------------------------------------------------------
+ * Event-specific rows
+ * ------------------------------------------------------------------------- */
+function ToolCallRow({ line }) {
+    const { toolName, args } = parseToolCall(line.message);
+    // Try to extract a key detail from args for common tools
+    const detail = getToolDetail(toolName, args);
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 border-b border-transparent px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(ToolIcon, { toolName: toolName }), _jsx("span", { className: "text-xs font-semibold text-violet-600 dark:text-violet-400", children: toolName }), detail ? (_jsx("span", { className: "text-muted-foreground min-w-0 truncate font-mono text-xs", children: detail })) : null] })] }));
+}
+function ToolIcon({ toolName }) {
+    const lower = toolName.toLowerCase();
+    if (lower === 'bash')
+        return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
+    if (lower === 'read' || lower === 'glob' || lower === 'grep')
+        return _jsx(FileText, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
+    if (lower === 'write' || lower === 'edit')
+        return _jsx(FileCode, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
+    return _jsx(Terminal, { className: "mt-0.5 h-3 w-3 shrink-0 text-violet-500" });
+}
+function getToolDetail(toolName, args) {
+    try {
+        const parsed = JSON.parse(args);
+        if (toolName === 'Read' && parsed.file_path)
+            return parsed.file_path;
+        if (toolName === 'Write' && parsed.file_path)
+            return parsed.file_path;
+        if (toolName === 'Edit' && parsed.file_path)
+            return parsed.file_path;
+        if (toolName === 'Glob' && parsed.pattern)
+            return parsed.pattern;
+        if (toolName === 'Grep' && parsed.pattern)
+            return parsed.pattern;
+        if (toolName === 'Bash' && parsed.command) {
+            const cmd = parsed.command;
+            return cmd.length > 80 ? `${cmd.slice(0, 80)}...` : cmd;
+        }
+        if (toolName === 'Task' && parsed.description)
+            return parsed.description;
+    }
+    catch {
+        // Not JSON — show truncated raw args
+        if (args.length > 0)
+            return args.length > 80 ? `${args.slice(0, 80)}...` : args;
+    }
+    return null;
+}
+function TextRow({ line }) {
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(MessageSquare, { className: "mt-0.5 h-3 w-3 shrink-0 text-blue-500" }), _jsx("span", { className: "text-foreground/80 min-w-0 text-xs leading-relaxed", children: line.message })] })] }));
+}
+function ResultRow({ line }) {
+    const { chars } = parseResultMessage(line.message);
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(CheckCircle2, { className: "mt-0.5 h-3 w-3 shrink-0 text-emerald-500" }), _jsxs("span", { className: "text-xs font-medium text-emerald-600 dark:text-emerald-400", children: ["Result: ", chars.toLocaleString(), " chars"] })] })] }));
+}
+function TokensRow({ line }) {
+    const { inputTokens, outputTokens } = parseTokensMessage(line.message);
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(Coins, { className: "mt-0.5 h-3 w-3 shrink-0 text-amber-500" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [_jsx("span", { className: "text-amber-600 dark:text-amber-400", children: inputTokens.toLocaleString() }), ' in / ', _jsx("span", { className: "text-amber-600 dark:text-amber-400", children: outputTokens.toLocaleString() }), ' out'] })] })] }));
+}
+function WorkerRow({ line }) {
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 bg-zinc-50 px-3 py-1.5 transition-colors dark:bg-zinc-900/50", children: [_jsx(Timestamp, { value: line.timestamp }), _jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5", children: [_jsx(Server, { className: "mt-0.5 h-3 w-3 shrink-0 text-zinc-500" }), _jsx("span", { className: "text-muted-foreground text-xs font-medium", children: line.message })] })] }));
+}
+function InfoRow({ line }) {
+    return (_jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-2 px-3 py-1.5 transition-colors", children: [_jsx(Timestamp, { value: line.timestamp }), _jsx(PhaseBadge, { phase: line.phase }), _jsx("span", { className: "text-muted-foreground min-w-0 text-xs", children: line.message })] }));
+}
+function RawRow({ line }) {
+    return (_jsx("div", { className: "px-3 py-0.5", children: _jsx("span", { className: "text-muted-foreground/70 font-mono text-[11px] break-all whitespace-pre-wrap", children: line.raw }) }));
+}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EventLogViewer } from './event-log-viewer.js';
+declare const meta: Meta<typeof EventLogViewer>;
+export default meta;
+type Story = StoryObj<typeof EventLogViewer>;
+/** ToolCalls — various tool call types */
+export declare const ToolCalls: Story;
+/** TextMessages — agent thinking/analysis */
+export declare const TextMessages: Story;
+/** WorkerLifecycle — worker bootstrap and shutdown */
+export declare const WorkerLifecycle: Story;
+/** ResultsAndTokens — completion summaries */
+export declare const ResultsAndTokens: Story;
+/** MixedContent — all event types including raw fallback */
+export declare const MixedContent: Story;
+/** EmptyContent — no content */
+export declare const EmptyContent: Story;
+//# sourceMappingURL=event-log-viewer.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-log-viewer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAqBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAsD7C,0CAA0C;AAC1C,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,eAAe,EAAE,KAE7B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/event-log-viewer.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EventLogViewer } from './event-log-viewer.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/EventLogViewer',
+    component: EventLogViewer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                height: '600px',
+                width: '480px',
+                border: '1px solid var(--color-border)',
+                overflow: 'auto',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/* ---------------------------------------------------------------------------
+ * Fixtures
+ * ------------------------------------------------------------------------- */
+const toolEvents = `[2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
+[2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Glob {"pattern": "src/**/*.ts"}
+[2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Grep {"pattern": "interface.*Auth", "path": "src/"}
+[2026-03-08T10:00:14.789Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "find src -name '*.test.ts' | wc -l"}
+[2026-03-08T10:00:16.012Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/oauth-provider.ts"}
+[2026-03-08T10:00:18.234Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Edit {"file_path": "src/auth/index.ts"}
+[2026-03-08T10:00:20.456Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Task {"description": "Run integration tests"}`;
+const textEvents = `[2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure and identifying key entry points for the authentication module
+[2026-03-08T10:00:18.234Z] [requirements] [claude-code|claude-sonnet-4-6] [text] The project uses a clean architecture pattern with dependency injection
+[2026-03-08T10:02:38.200Z] [plan] [claude-code|claude-sonnet-4-6] [text] Creating implementation plan with TDD approach as required by project conventions
+[2026-03-08T10:05:30.000Z] [implement] [claude-code|claude-sonnet-4-6] [text] All 14 unit tests passing. Moving to integration tests`;
+const workerEvents = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker — full command:
+[2026-03-08T10:00:01.001Z] [claude-code|claude-sonnet-4-6] [WORKER]   feature-agent-worker --feature-id auth-module --run-id run-123
+[2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
+[2026-03-08T10:00:01.050Z] [claude-code|claude-sonnet-4-6] [WORKER] Creating executor from pinned agent type: claude-code
+[2026-03-08T10:00:01.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Updating status to running (PID 54321)...
+[2026-03-08T10:06:00.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Graph invocation completed. Error: none
+[2026-03-08T10:06:00.100Z] [claude-code|claude-sonnet-4-6] [WORKER] Run marked as completed
+[2026-03-08T10:06:00.200Z] [claude-code|claude-sonnet-4-6] [WORKER] Worker completed successfully, exiting.`;
+const resultAndTokenEvents = `[2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123def456
+[2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
+[2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123def456
+[2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out
+[2026-03-08T10:05:55.000Z] [implement] [claude-code|claude-sonnet-4-6] [result] 24560 chars, session=sess-abc123def456
+[2026-03-08T10:05:55.001Z] [implement] [claude-code|claude-sonnet-4-6] [tokens] 15200 in / 9360 out`;
+const mixedContent = `[2026-03-08T10:00:01.000Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting worker — full command:
+[2026-03-08T10:00:01.010Z] [claude-code|claude-sonnet-4-6] [WORKER] Initializing container...
+[2026-03-08T10:00:05.000Z] [requirements] [claude-code|claude-sonnet-4-6] Starting...
+[2026-03-08T10:00:08.234Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/main.ts"}
+[2026-03-08T10:00:10.345Z] [requirements] [claude-code|claude-sonnet-4-6] [text] Analyzing the codebase structure
+[2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:unit"}
+[2026-03-08T10:00:45.789Z] [requirements] [claude-code|claude-sonnet-4-6] [result] 8920 chars, session=sess-abc123
+[2026-03-08T10:00:45.790Z] [requirements] [claude-code|claude-sonnet-4-6] [tokens] 2450 in / 4560 out
+Some unstructured output that doesn't match the format
+Another raw line from stderr
+[2026-03-08T10:02:30.100Z] [plan] [claude-code|claude-sonnet-4-6] Starting...
+[2026-03-08T10:02:35.100Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "specs/001-auth/plan.yaml"}
+[2026-03-08T10:03:15.234Z] [plan] [claude-code|claude-sonnet-4-6] [result] 12345 chars, session=sess-abc123
+[2026-03-08T10:03:15.235Z] [plan] [claude-code|claude-sonnet-4-6] [tokens] 8900 in / 3456 out`;
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+/** ToolCalls — various tool call types */
+export const ToolCalls = {
+    args: { content: toolEvents },
+};
+/** TextMessages — agent thinking/analysis */
+export const TextMessages = {
+    args: { content: textEvents },
+};
+/** WorkerLifecycle — worker bootstrap and shutdown */
+export const WorkerLifecycle = {
+    args: { content: workerEvents },
+};
+/** ResultsAndTokens — completion summaries */
+export const ResultsAndTokens = {
+    args: { content: resultAndTokenEvents },
+};
+/** MixedContent — all event types including raw fallback */
+export const MixedContent = {
+    args: { content: mixedContent },
+};
+/** EmptyContent — no content */
+export const EmptyContent = {
+    args: { content: '' },
+};

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.d.ts

@@ -1,3 +1,4 @@
+import type { NotificationEvent } from '../../../../../../packages/core/src/domain/generated/output.js';
 import type { FeatureNodeData } from '../../common/feature-node/index.js';
 import type { PrdQuestionnaireData } from '../../common/prd-questionnaire/index.js';
 import type { TechDecisionsReviewData } from '../../common/tech-decisions-review/index.js';
@@ -11,6 +12,8 @@ export interface FeatureDrawerTabsProps {
     initialTab?: FeatureTabKey;
     /** Tab key from URL path segment (e.g. /feature/[id]/activity → 'activity'). */
     urlTab?: FeatureTabKey;
+    /** SSE events from the agent events provider, used to trigger tab data refresh. */
+    sseEvents?: readonly NotificationEvent[];
     prdData?: PrdQuestionnaireData | null;
     prdSelections?: Record<string, string>;
     onPrdSelect?: (questionId: string, optionId: string) => void;
@@ -30,5 +33,5 @@ export interface FeatureDrawerTabsProps {
     chatInput?: string;
     onChatInputChange?: (value: string) => void;
 }
-export declare function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, sseEvents, }: FeatureDrawerTabsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=feature-drawer-tabs.d.ts.map

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IAGvB,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,GAClB,EAAE,sBAAsB,2CAmSxB"}
+{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAS9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAMxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,gFAAgF;IAChF,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mFAAmF;IACnF,SAAS,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAGzC,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,2CAwTxB"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.js

@@ -64,7 +64,7 @@ const TAB_FETCHERS = {
     activity: fetchActivity,
     plan: fetchPlan,
 };
-export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, }) {
+export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab, prdData, prdSelections, onPrdSelect, onPrdApprove, onPrdReject, isPrdLoading, techData, onTechApprove, onTechReject, isTechLoading, productData, mergeData, onMergeApprove, onMergeReject, isMergeLoading, isRejecting, chatInput, onChatInputChange, sseEvents, }) {
     const pathname = usePathname();
     const featureLogs = useFeatureLogs(featureId);
     const visibleTabs = useMemo(() => computeVisibleTabs(featureNode), [featureNode]);
@@ -159,6 +159,7 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
     }, [featureId]);
     // When initialTab changes (e.g. SSE updates lifecycle), switch to it if visible
     // and sync the URL with replaceState so the address bar reflects the new tab.
+    // Also trigger lazy fetch for the new tab so data is ready immediately.
     const prevInitialTabRef = useRef(initialTab);
     useEffect(() => {
         if (prevInitialTabRef.current !== initialTab &&
@@ -166,13 +167,17 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
             visibleTabs.includes(initialTab)) {
             prevInitialTabRef.current = initialTab;
             setActiveTab(initialTab);
+            // Trigger lazy fetch for the new tab if it's a lazy-loaded tab
+            if (initialTab === 'activity' || initialTab === 'plan') {
+                fetchTab(initialTab);
+            }
             // Sync URL to match the new tab
             const targetUrl = initialTab === 'overview' ? basePath : `${basePath}/${initialTab}`;
             if (targetUrl !== window.location.pathname) {
                 window.history.replaceState(null, '', targetUrl);
             }
         }
-    }, [initialTab, visibleTabs, basePath]);
+    }, [initialTab, visibleTabs, basePath, fetchTab]);
     // If the active tab becomes invisible (lifecycle changed), fall back to overview
     // and sync the URL accordingly.
     useEffect(() => {
@@ -183,19 +188,34 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, urlTab,
             }
         }
     }, [visibleTabs, activeTab, basePath]);
-    // SSE refresh: re-fetch active lazy tab when featureNode reference changes
-    const featureNodeRef = useRef(featureNode);
+    // SSE refresh: re-fetch lazy tab data when relevant SSE events arrive
+    // for this feature (e.g. PhaseCompleted, AgentStarted, AgentCompleted).
+    // Always refresh 'activity' data (even if not the active tab) so switching
+    // to the activity tab shows up-to-date timings without a loading flash.
     const activeTabRef = useRef(activeTab);
     activeTabRef.current = activeTab;
+    const sseProcessedRef = useRef(0);
     useEffect(() => {
-        if (featureNodeRef.current !== featureNode) {
-            featureNodeRef.current = featureNode;
-            const current = activeTabRef.current;
-            if (current === 'activity' || current === 'plan') {
-                refreshTab(current);
-            }
+        if (!sseEvents || sseEvents.length === 0)
+            return;
+        // Clamp cursor if events were pruned
+        if (sseProcessedRef.current > sseEvents.length) {
+            sseProcessedRef.current = 0;
+        }
+        if (sseEvents.length <= sseProcessedRef.current)
+            return;
+        const newEvents = sseEvents.slice(sseProcessedRef.current);
+        sseProcessedRef.current = sseEvents.length;
+        const hasRelevantEvent = newEvents.some((e) => e.featureId === featureId);
+        if (!hasRelevantEvent)
+            return;
+        // Always refresh activity data so it stays current for when the user switches tabs
+        refreshTab('activity');
+        const current = activeTabRef.current;
+        if (current === 'plan') {
+            refreshTab(current);
         }
-    }, [featureNode, refreshTab]);
+    }, [sseEvents, featureId, refreshTab]);
     const handleTabChange = useCallback((value) => {
         const tab = value;
         isUserInteraction.current = true;

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CA6ElE"}
+{"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAID,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CAgHlE"}

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.js

@@ -1,10 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, useState, useCallback } from 'react';
-import { AlertCircle, Terminal, ArrowDown } from 'lucide-react';
+import { AlertCircle, Terminal, ArrowDown, Code, FileText } from 'lucide-react';
+import { EventLogViewer } from './event-log-viewer.js';
 export function LogTab({ content, isConnected, error }) {
     const containerRef = useRef(null);
     const [autoScroll, setAutoScroll] = useState(true);
+    const [viewMode, setViewMode] = useState('structured');
     const handleScroll = useCallback(() => {
         const el = containerRef.current;
         if (!el)
@@ -31,5 +33,11 @@ export function LogTab({ content, isConnected, error }) {
     if (!content) {
         return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Terminal, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No log output yet" }), isConnected ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for log data..." })) : null] }));
     }
-    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-auto flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: "flex-1 overflow-y-auto bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300", children: content })] }));
+    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), _jsxs("div", { className: "ml-auto flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setViewMode('structured'), className: `rounded p-1 transition-colors ${viewMode === 'structured'
+                                    ? 'bg-muted text-foreground'
+                                    : 'text-muted-foreground hover:text-foreground'}`, title: "Structured view", children: _jsx(FileText, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: () => setViewMode('raw'), className: `rounded p-1 transition-colors ${viewMode === 'raw'
+                                    ? 'bg-muted text-foreground'
+                                    : 'text-muted-foreground hover:text-foreground'}`, title: "Raw view", children: _jsx(Code, { className: "h-3.5 w-3.5" }) }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-1 flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] })] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: `flex-1 overflow-y-auto ${viewMode === 'raw'
+                    ? 'bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300'
+                    : 'bg-background'}`, children: viewMode === 'structured' ? _jsx(EventLogViewer, { content: content }) : content })] }));
 }

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts

@@ -3,10 +3,12 @@ import { LogTab } from './log-tab.js';
 declare const meta: Meta<typeof LogTab>;
 export default meta;
 type Story = StoryObj<typeof LogTab>;
-/** Default — typical agent log output with live connection. */
+/** Default — structured agent log output with live connection (claude-code). */
 export declare const Default: Story;
-/** LongLog — 200 lines of log output to test scrolling behavior. */
-export declare const LongLog: Story;
+/** LongStructured — 100 structured events to test scrolling behavior. */
+export declare const LongStructured: Story;
+/** RawFallback — unstructured log content falls back gracefully. */
+export declare const RawFallback: Story;
 /** Disconnected — log content present but connection is lost. */
 export declare const Disconnected: Story;
 /** Empty — no log content yet, connected and waiting. */

package/dist/src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAqCrC,+DAA+D;AAC/D,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
+{"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AA6GrC,gFAAgF;AAChF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}