@shepai/cli 1.103.1-pr297.1d67d7d → 1.103.1-pr309.f0bca17

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.d.ts

@@ -0,0 +1,27 @@
+/**
+ * UpgradeCliUseCase
+ *
+ * Executes a self-upgrade of @shepai/cli to the latest published version.
+ * Mirrors the CLI upgrade command logic but designed for use from the web layer.
+ *
+ * Flow:
+ *   1. Check latest version from npm registry (fail-open)
+ *   2. Compare with current version — return early if up to date
+ *   3. Run `npm i -g @shepai/cli@latest` with streamed output
+ *   4. Return result with old/new version info
+ */
+import type { IVersionService } from '../../ports/output/services/version-service.interface.js';
+export interface UpgradeResult {
+    status: 'up-to-date' | 'upgraded' | 'error';
+    currentVersion: string;
+    latestVersion: string | null;
+    errorMessage?: string;
+}
+export declare class UpgradeCliUseCase {
+    private readonly versionService;
+    constructor(versionService: IVersionService);
+    execute(onOutput?: (data: string) => void): Promise<UpgradeResult>;
+    private getLatestVersion;
+    private runNpmInstall;
+}
+//# sourceMappingURL=upgrade-cli.use-case.d.ts.map

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upgrade-cli.use-case.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0DAA0D,CAAC;AAEhG,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5C,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,qBACa,iBAAiB;IAG1B,OAAO,CAAC,QAAQ,CAAC,cAAc;gBAAd,cAAc,EAAE,eAAe;IAG5C,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC;IAkCxE,OAAO,CAAC,gBAAgB;IA6CxB,OAAO,CAAC,aAAa;CAuBtB"}

package/dist/packages/core/src/application/use-cases/upgrade/upgrade-cli.use-case.js

@@ -0,0 +1,128 @@
+/**
+ * UpgradeCliUseCase
+ *
+ * Executes a self-upgrade of @shepai/cli to the latest published version.
+ * Mirrors the CLI upgrade command logic but designed for use from the web layer.
+ *
+ * Flow:
+ *   1. Check latest version from npm registry (fail-open)
+ *   2. Compare with current version — return early if up to date
+ *   3. Run `npm i -g @shepai/cli@latest` with streamed output
+ *   4. Return result with old/new version info
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { injectable, inject } from 'tsyringe';
+import { spawn } from 'node:child_process';
+const VERSION_CHECK_TIMEOUT_MS = 10_000;
+let UpgradeCliUseCase = class UpgradeCliUseCase {
+    versionService;
+    constructor(versionService) {
+        this.versionService = versionService;
+    }
+    async execute(onOutput) {
+        const { version: currentVersion } = this.versionService.getVersion();
+        // 1. Check latest version (fail-open)
+        const latestVersion = await this.getLatestVersion(onOutput);
+        // 2. Already up to date
+        if (latestVersion && latestVersion === currentVersion) {
+            onOutput?.(`Already up to date (v${currentVersion})\n`);
+            return { status: 'up-to-date', currentVersion, latestVersion };
+        }
+        // 3. Run upgrade
+        const target = latestVersion ? `v${latestVersion}` : 'latest';
+        onOutput?.(`Upgrading from v${currentVersion} to ${target}...\n`);
+        try {
+            const exitCode = await this.runNpmInstall(onOutput);
+            if (exitCode === 0) {
+                onOutput?.(`Successfully upgraded to ${target}\n`);
+                return { status: 'upgraded', currentVersion, latestVersion };
+            }
+            else {
+                const msg = `npm install exited with code ${exitCode}`;
+                onOutput?.(`Error: ${msg}\n`);
+                return { status: 'error', currentVersion, latestVersion, errorMessage: msg };
+            }
+        }
+        catch (error) {
+            const msg = error instanceof Error ? error.message : 'Installation failed';
+            onOutput?.(`Error: ${msg}\n`);
+            return { status: 'error', currentVersion, latestVersion, errorMessage: msg };
+        }
+    }
+    getLatestVersion(onOutput) {
+        return new Promise((resolve) => {
+            let output = '';
+            let settled = false;
+            const child = spawn('npm', ['view', '@shepai/cli', 'version'], {
+                stdio: ['ignore', 'pipe', 'pipe'],
+            });
+            const timeout = setTimeout(() => {
+                if (!settled) {
+                    settled = true;
+                    child.kill();
+                    onOutput?.('Version check timed out, proceeding with upgrade...\n');
+                    resolve(null);
+                }
+            }, VERSION_CHECK_TIMEOUT_MS);
+            child.stdout?.on('data', (data) => {
+                output += data.toString();
+            });
+            child.on('close', (code) => {
+                if (!settled) {
+                    settled = true;
+                    clearTimeout(timeout);
+                    if (code === 0 && output.trim()) {
+                        resolve(output.trim());
+                    }
+                    else {
+                        resolve(null);
+                    }
+                }
+            });
+            child.on('error', () => {
+                if (!settled) {
+                    settled = true;
+                    clearTimeout(timeout);
+                    onOutput?.('Could not check latest version\n');
+                    resolve(null);
+                }
+            });
+        });
+    }
+    runNpmInstall(onOutput) {
+        return new Promise((resolve, reject) => {
+            const child = spawn('npm', ['i', '-g', '@shepai/cli@latest'], {
+                stdio: ['ignore', 'pipe', 'pipe'],
+            });
+            child.stdout?.on('data', (data) => {
+                onOutput?.(data.toString());
+            });
+            child.stderr?.on('data', (data) => {
+                onOutput?.(data.toString());
+            });
+            child.on('close', (code) => {
+                resolve(code ?? 1);
+            });
+            child.on('error', (err) => {
+                reject(err);
+            });
+        });
+    }
+};
+UpgradeCliUseCase = __decorate([
+    injectable(),
+    __param(0, inject('IVersionService')),
+    __metadata("design:paramtypes", [Object])
+], UpgradeCliUseCase);
+export { UpgradeCliUseCase };

package/dist/packages/core/src/infrastructure/di/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CA0SrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CA8SrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/packages/core/src/infrastructure/di/container.js

@@ -77,6 +77,7 @@ import { DeleteRepositoryUseCase } from '../../application/use-cases/repositorie
 import { CheckAndUnblockFeaturesUseCase } from '../../application/use-cases/features/check-and-unblock-features.use-case.js';
 import { UpdateFeatureLifecycleUseCase } from '../../application/use-cases/features/update/update-feature-lifecycle.use-case.js';
 import { CleanupFeatureWorktreeUseCase } from '../../application/use-cases/features/cleanup-feature-worktree.use-case.js';
+import { UpgradeCliUseCase } from '../../application/use-cases/upgrade/upgrade-cli.use-case.js';
 // Session listing
 import { ClaudeCodeSessionRepository } from '../services/agents/sessions/claude-code-session.repository.js';
 import { StubSessionRepository } from '../services/agents/sessions/stub-session.repository.js';
@@ -279,6 +280,7 @@ export async function initializeContainer() {
     container.registerSingleton(CheckAndUnblockFeaturesUseCase);
     container.registerSingleton(UpdateFeatureLifecycleUseCase);
     container.registerSingleton(CleanupFeatureWorktreeUseCase);
+    container.registerSingleton(UpgradeCliUseCase);
     // Session repositories (per-AgentType string tokens)
     container.register(`IAgentSessionRepository:${AgentType.ClaudeCode}`, {
         useFactory: () => new ClaudeCodeSessionRepository(),
@@ -360,6 +362,9 @@ export async function initializeContainer() {
     container.register('CleanupFeatureWorktreeUseCase', {
         useFactory: (c) => c.resolve(CleanupFeatureWorktreeUseCase),
     });
+    container.register('UpgradeCliUseCase', {
+        useFactory: (c) => c.resolve(UpgradeCliUseCase),
+    });
     _initialized = true;
     return container;
 }

package/dist/src/presentation/cli/ui/symbols.d.ts

@@ -19,7 +19,7 @@ export declare const symbols: {
     /** Warning triangle */
     readonly warning: "⚠" | "‼";
     /** Info circle */
-    readonly info: "ℹ" | "i";
+    readonly info: "i" | "ℹ";
     /** Arrow/pointer */
     readonly arrow: "→" | "->";
     /** Bullet point */

package/dist/src/presentation/web/app/api/cli-upgrade/route.d.ts

@@ -0,0 +1,3 @@
+export declare const dynamic = "force-dynamic";
+export declare function POST(): Promise<Response>;
+//# sourceMappingURL=route.d.ts.map

package/dist/src/presentation/web/app/api/cli-upgrade/route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/cli-upgrade/route.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,kBAAkB,CAAC;AAEvC,wBAAsB,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,CA+B9C"}

package/dist/src/presentation/web/app/api/cli-upgrade/route.js

@@ -0,0 +1,31 @@
+import { resolve } from '../../../lib/server-container.js';
+// Force dynamic — SSE streams must never be statically optimized or cached
+export const dynamic = 'force-dynamic';
+export async function POST() {
+    const useCase = resolve('UpgradeCliUseCase');
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            try {
+                const result = await useCase.execute((chunk) => {
+                    controller.enqueue(encoder.encode(`data: ${chunk.replace(/\n/g, '\ndata: ')}\n\n`));
+                });
+                controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify(result)}\n\n`));
+            }
+            catch (error) {
+                const message = error instanceof Error ? error.message : 'Upgrade failed';
+                controller.enqueue(encoder.encode(`event: done\ndata: ${JSON.stringify({ status: 'error', currentVersion: '', latestVersion: null, errorMessage: message })}\n\n`));
+            }
+            finally {
+                controller.close();
+            }
+        },
+    });
+    return new Response(stream, {
+        headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive',
+        },
+    });
+}

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/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"}