@shepai/cli 1.111.0 → 1.112.0-pr309.afbf5cb

package/dist/packages/core/src/infrastructure/persistence/sqlite/sqlite-migration-storage.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Custom umzug storage adapter for better-sqlite3.
+ *
+ * Wraps better-sqlite3's synchronous API in async methods to satisfy
+ * umzug's UmzugStorage interface. Manages the `umzug_migrations` tracking
+ * table with columns: name (TEXT PK) and created_at (TEXT NOT NULL).
+ *
+ * Includes a bootstrap seeder that auto-detects existing databases
+ * (PRAGMA user_version > 0 with empty umzug_migrations table) and seeds
+ * migration records for versions 1 through user_version.
+ */
+import type Database from 'better-sqlite3';
+import type { UmzugStorage, MigrationParams } from 'umzug';
+/**
+ * SQLite-backed migration storage for umzug.
+ *
+ * Tracks which migrations have been applied in a `umzug_migrations` table
+ * within the same SQLite database as the application data.
+ */
+export declare class SQLiteMigrationStorage implements UmzugStorage<Database.Database> {
+    private readonly db;
+    /**
+     * @param db - The better-sqlite3 database instance.
+     * @param legacyMigrationNames - Ordered list of legacy migration names (e.g.,
+     *   ['001-create-settings-table', '002-add-agent-config', ...]). When provided,
+     *   the constructor checks if this is an existing database transitioning from
+     *   PRAGMA user_version tracking and seeds the umzug_migrations table accordingly.
+     */
+    constructor(db: Database.Database, legacyMigrationNames?: string[]);
+    /**
+     * Returns the names of all executed migrations, sorted lexicographically.
+     */
+    executed(_meta: Pick<MigrationParams<Database.Database>, 'context'>): Promise<string[]>;
+    /**
+     * Records a migration as executed.
+     */
+    logMigration(params: MigrationParams<Database.Database>): Promise<void>;
+    /**
+     * Removes a migration record (marks it as pending).
+     */
+    unlogMigration(params: MigrationParams<Database.Database>): Promise<void>;
+    /**
+     * Creates the umzug_migrations table if it does not exist.
+     */
+    private ensureTable;
+    /**
+     * Auto-detects existing databases that used PRAGMA user_version tracking
+     * and seeds the umzug_migrations table so umzug does not re-apply them.
+     *
+     * Conditions for bootstrap:
+     * - PRAGMA user_version > 0 (database has been migrated before)
+     * - umzug_migrations table is empty (not yet transitioned to umzug)
+     *
+     * When both conditions are met, inserts records for migrations 1 through
+     * user_version using the provided legacy migration names.
+     */
+    private bootstrapLegacyMigrations;
+}
+//# sourceMappingURL=sqlite-migration-storage.d.ts.map

package/dist/packages/core/src/infrastructure/persistence/sqlite/sqlite-migration-storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sqlite-migration-storage.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/infrastructure/persistence/sqlite/sqlite-migration-storage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAE3D;;;;;GAKG;AACH,qBAAa,sBAAuB,YAAW,YAAY,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAC5E,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAoB;IAEvC;;;;;;OAMG;gBACS,EAAE,EAAE,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC,EAAE,MAAM,EAAE;IAQlE;;OAEG;IACG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAO7F;;OAEG;IACG,YAAY,CAAC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAM7E;;OAEG;IACG,cAAc,CAAC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAI/E;;OAEG;IACH,OAAO,CAAC,WAAW;IASnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB;CA+BlC"}

package/dist/packages/core/src/infrastructure/persistence/sqlite/sqlite-migration-storage.js

@@ -0,0 +1,98 @@
+/**
+ * Custom umzug storage adapter for better-sqlite3.
+ *
+ * Wraps better-sqlite3's synchronous API in async methods to satisfy
+ * umzug's UmzugStorage interface. Manages the `umzug_migrations` tracking
+ * table with columns: name (TEXT PK) and created_at (TEXT NOT NULL).
+ *
+ * Includes a bootstrap seeder that auto-detects existing databases
+ * (PRAGMA user_version > 0 with empty umzug_migrations table) and seeds
+ * migration records for versions 1 through user_version.
+ */
+/**
+ * SQLite-backed migration storage for umzug.
+ *
+ * Tracks which migrations have been applied in a `umzug_migrations` table
+ * within the same SQLite database as the application data.
+ */
+export class SQLiteMigrationStorage {
+    db;
+    /**
+     * @param db - The better-sqlite3 database instance.
+     * @param legacyMigrationNames - Ordered list of legacy migration names (e.g.,
+     *   ['001-create-settings-table', '002-add-agent-config', ...]). When provided,
+     *   the constructor checks if this is an existing database transitioning from
+     *   PRAGMA user_version tracking and seeds the umzug_migrations table accordingly.
+     */
+    constructor(db, legacyMigrationNames) {
+        this.db = db;
+        this.ensureTable();
+        if (legacyMigrationNames && legacyMigrationNames.length > 0) {
+            this.bootstrapLegacyMigrations(legacyMigrationNames);
+        }
+    }
+    /**
+     * Returns the names of all executed migrations, sorted lexicographically.
+     */
+    async executed(_meta) {
+        const rows = this.db.prepare('SELECT name FROM umzug_migrations ORDER BY name').all();
+        return rows.map((r) => r.name);
+    }
+    /**
+     * Records a migration as executed.
+     */
+    async logMigration(params) {
+        this.db
+            .prepare('INSERT INTO umzug_migrations (name, created_at) VALUES (?, ?)')
+            .run(params.name, new Date().toISOString());
+    }
+    /**
+     * Removes a migration record (marks it as pending).
+     */
+    async unlogMigration(params) {
+        this.db.prepare('DELETE FROM umzug_migrations WHERE name = ?').run(params.name);
+    }
+    /**
+     * Creates the umzug_migrations table if it does not exist.
+     */
+    ensureTable() {
+        this.db.exec(`
+      CREATE TABLE IF NOT EXISTS umzug_migrations (
+        name TEXT PRIMARY KEY NOT NULL,
+        created_at TEXT NOT NULL
+      )
+    `);
+    }
+    /**
+     * Auto-detects existing databases that used PRAGMA user_version tracking
+     * and seeds the umzug_migrations table so umzug does not re-apply them.
+     *
+     * Conditions for bootstrap:
+     * - PRAGMA user_version > 0 (database has been migrated before)
+     * - umzug_migrations table is empty (not yet transitioned to umzug)
+     *
+     * When both conditions are met, inserts records for migrations 1 through
+     * user_version using the provided legacy migration names.
+     */
+    bootstrapLegacyMigrations(legacyMigrationNames) {
+        const result = this.db.prepare('PRAGMA user_version').get();
+        const userVersion = result.user_version;
+        if (userVersion <= 0) {
+            return;
+        }
+        const count = this.db.prepare('SELECT COUNT(*) as count FROM umzug_migrations').get();
+        if (count.count > 0) {
+            return;
+        }
+        // Seed records for migrations 1 through user_version
+        const now = new Date().toISOString();
+        const insert = this.db.prepare('INSERT INTO umzug_migrations (name, created_at) VALUES (?, ?)');
+        const seedAll = this.db.transaction(() => {
+            const count = Math.min(userVersion, legacyMigrationNames.length);
+            for (let i = 0; i < count; i++) {
+                insert.run(legacyMigrationNames[i], now);
+            }
+        });
+        seedAll();
+    }
+}

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":"AAyBA,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,118 @@
+'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, AlertCircle, } 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.id))) }));
+}
+/* ---------------------------------------------------------------------------
+ * 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 'error':
+            return _jsx(ErrorRow, { 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 ErrorRow({ line }) {
+    return (_jsxs("div", { className: "flex items-start gap-2 border-l-2 border-red-500 bg-red-50/50 px-3 py-1.5 transition-colors hover:bg-red-50 dark:bg-red-950/20 dark:hover:bg-red-950/30", 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(AlertCircle, { className: "mt-0.5 h-3 w-3 shrink-0 text-red-500" }), _jsx("span", { className: "min-w-0 text-xs font-medium text-red-600 dark:text-red-400", children: line.message })] })] }));
+}
+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"}

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

@@ -8,14 +8,61 @@ const meta = {
         layout: 'fullscreen',
     },
     decorators: [
-        (Story) => (_jsx("div", { style: { height: '600px', width: '400px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { height: '600px', width: '480px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
 /* ---------------------------------------------------------------------------
  * Data fixtures
  * ------------------------------------------------------------------------- */
-const typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
+const structuredLogContent = `[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 --repo /home/user/myproject --agent-type claude-code --model claude-sonnet-4-6
+[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:00:01.110Z] [claude-code|claude-sonnet-4-6] [WORKER] Starting graph invocation...
+[2026-03-08T10:00:05.000Z] [requirements] [claude-code|claude-sonnet-4-6] Starting...
+[2026-03-08T10:00:05.010Z] [requirements] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
+[2026-03-08T10:00:05.020Z] [requirements] [claude-code|claude-sonnet-4-6] Prompt length: 2847 chars
+[2026-03-08T10:00:05.100Z] [requirements] [claude-code|claude-sonnet-4-6] Spawning: claude -p "Analyze this project..." --output-format stream-json --verbose
+[2026-03-08T10:00:05.102Z] [requirements] [claude-code|claude-sonnet-4-6] Subprocess PID: 54322
+[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 and identifying key entry points for the authentication module
+[2026-03-08T10:00:12.567Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Glob {"pattern": "src/**/*.ts"}
+[2026-03-08T10:00:14.789Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "src/auth/providers.ts"}
+[2026-03-08T10:00:16.012Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Grep {"pattern": "interface.*Auth", "path": "src/"}
+[2026-03-08T10:00:18.234Z] [requirements] [claude-code|claude-sonnet-4-6] [text] The project uses a clean architecture pattern with dependency injection. I can see the auth interfaces are defined in the domain layer
+[2026-03-08T10:00:20.456Z] [requirements] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "find src -name '*.test.ts' | wc -l"}
+[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:00:45.791Z] [requirements] [claude-code|claude-sonnet-4-6] Process closed with code 0, result=8920 chars
+[2026-03-08T10:00:45.800Z] [requirements] [claude-code|claude-sonnet-4-6] Complete (8920 chars, 40.8s)
+[2026-03-08T10:00:45.900Z] [requirements] [claude-code|claude-sonnet-4-6] Interrupting for human approval
+[2026-03-08T10:02:30.000Z] [requirements] [claude-code|claude-sonnet-4-6] Phase approved, skipping re-execution
+[2026-03-08T10:02:30.100Z] [plan] [claude-code|claude-sonnet-4-6] Starting...
+[2026-03-08T10:02:30.110Z] [plan] [claude-code|claude-sonnet-4-6] Executing agent at cwd=/home/user/myproject
+[2026-03-08T10:02:30.120Z] [plan] [claude-code|claude-sonnet-4-6] Prompt length: 15234 chars
+[2026-03-08T10:02:35.100Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Read {"file_path": "CLAUDE.md"}
+[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:02:42.300Z] [plan] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "specs/001-auth/plan.yaml"}
+[2026-03-08T10:02:45.400Z] [plan] [claude-code|claude-sonnet-4-6] [text] Plan includes 3 phases: scaffold auth module, implement OAuth2 providers, add tests and documentation
+[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:03:15.300Z] [plan] [claude-code|claude-sonnet-4-6] Complete (12345 chars, 45.1s)
+[2026-03-08T10:05:00.000Z] [implement] [claude-code|claude-sonnet-4-6] Starting...
+[2026-03-08T10:05:01.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/oauth-provider.ts"}
+[2026-03-08T10:05:03.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Write {"file_path": "src/auth/token-manager.ts"}
+[2026-03-08T10:05:05.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Edit {"file_path": "src/auth/index.ts"}
+[2026-03-08T10:05:07.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:unit"}
+[2026-03-08T10:05:30.000Z] [implement] [claude-code|claude-sonnet-4-6] [text] All 14 unit tests passing. Moving to integration tests
+[2026-03-08T10:05:35.000Z] [implement] [claude-code|claude-sonnet-4-6] [tool] Bash {"command": "pnpm test:int"}
+[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
+[2026-03-08T10:05:55.100Z] [implement] [claude-code|claude-sonnet-4-6] Complete (24560 chars, 54.1s)
+[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 rawLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
 [2026-03-08T10:00:02.789Z] Agent started — analyzing codebase
 [2026-03-08T10:00:03.456Z] Scanning repository structure...
 [2026-03-08T10:00:04.012Z] Found 127 source files across 14 packages
@@ -35,22 +82,58 @@ const typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for fea
 [2026-03-08T10:00:24.789Z] Phase 3: add tests and documentation
 [2026-03-08T10:00:26.456Z] Generating test suite...
 [2026-03-08T10:00:28.012Z] All phases complete — feature "auth-module" ready for review`;
-const longLogContent = Array.from({ length: 200 }, (_, i) => `[2026-03-08T10:${String(Math.floor(i / 60)).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}.${String((i * 7) % 1000).padStart(3, '0')}Z] Step ${i + 1}: processing task batch ${Math.floor(i / 10) + 1} — file ${i + 1} of 200`).join('\n');
+const longStructuredContent = Array.from({ length: 100 }, (_, i) => {
+    const min = String(Math.floor(i / 60)).padStart(2, '0');
+    const sec = String(i % 60).padStart(2, '0');
+    const ms = String((i * 7) % 1000).padStart(3, '0');
+    const ts = `2026-03-08T10:${min}:${sec}.${ms}Z`;
+    const phase = ['requirements', 'research', 'plan', 'implement'][i % 4];
+    const tags = ['[tool]', '[text]', '[tool]', '[text]', '[result]', '[tokens]'];
+    const tag = tags[i % tags.length];
+    const messages = {
+        '[tool]': [
+            'Read {"file_path": "src/components/button.tsx"}',
+            'Bash {"command": "pnpm test:unit"}',
+            'Grep {"pattern": "export function", "path": "src/"}',
+            'Write {"file_path": "src/new-file.ts"}',
+            'Glob {"pattern": "**/*.test.ts"}',
+        ],
+        '[text]': [
+            'Analyzing the component structure for potential improvements',
+            'The test suite is comprehensive with good coverage',
+            'Implementing the authentication flow with OAuth2 providers',
+            'Refactoring to use dependency injection pattern',
+        ],
+        '[result]': ['4520 chars, session=sess-xyz789'],
+        '[tokens]': ['3200 in / 1800 out'],
+    };
+    const msgList = messages[tag] ?? messages['[text]'];
+    const msg = msgList[i % msgList.length];
+    return `[${ts}] [${phase}] [claude-code|claude-sonnet-4-6] ${tag} ${msg}`;
+}).join('\n');
 /* ---------------------------------------------------------------------------
  * Stories
  * ------------------------------------------------------------------------- */
-/** Default — typical agent log output with live connection. */
+/** Default — structured agent log output with live connection (claude-code). */
 export const Default = {
     args: {
-        content: typicalLogContent,
+        content: structuredLogContent,
         isConnected: true,
         error: null,
     },
 };
-/** LongLog — 200 lines of log output to test scrolling behavior. */
-export const LongLog = {
+/** LongStructured — 100 structured events to test scrolling behavior. */
+export const LongStructured = {
     args: {
-        content: longLogContent,
+        content: longStructuredContent,
+        isConnected: true,
+        error: null,
+    },
+};
+/** RawFallback — unstructured log content falls back gracefully. */
+export const RawFallback = {
+    args: {
+        content: rawLogContent,
         isConnected: true,
         error: null,
     },
@@ -58,7 +141,7 @@ export const LongLog = {
 /** Disconnected — log content present but connection is lost. */
 export const Disconnected = {
     args: {
-        content: typicalLogContent,
+        content: structuredLogContent,
         isConnected: false,
         error: null,
     },