@shepai/cli 1.76.0-pr240.447630e → 1.76.0-pr241.9ff2c05

package/dist/src/presentation/web/app/actions/get-feature-messages.d.ts

@@ -0,0 +1,15 @@
+export interface MessageData {
+    role: string;
+    content: string;
+    options?: string[];
+    selectedOption?: number;
+    answer?: string;
+}
+type GetMessagesResult = {
+    messages: MessageData[];
+} | {
+    error: string;
+};
+export declare function getFeatureMessages(featureId: string): Promise<GetMessagesResult>;
+export {};
+//# sourceMappingURL=get-feature-messages.d.ts.map

package/dist/src/presentation/web/app/actions/get-feature-messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-feature-messages.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-messages.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,iBAAiB,GAAG;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,wBAAsB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC,CA0BtF"}

package/dist/src/presentation/web/app/actions/get-feature-messages.js

@@ -0,0 +1,26 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+export async function getFeatureMessages(featureId) {
+    if (!featureId.trim()) {
+        return { error: 'Feature id is required' };
+    }
+    try {
+        const repo = resolve('IFeatureRepository');
+        const feature = await repo.findById(featureId);
+        if (!feature) {
+            return { error: 'Feature not found' };
+        }
+        const messages = feature.messages.map((m) => ({
+            role: m.role,
+            content: m.content,
+            options: m.options,
+            selectedOption: m.selectedOption,
+            answer: m.answer,
+        }));
+        return { messages };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load feature messages';
+        return { error: message };
+    }
+}

package/dist/src/presentation/web/app/actions/get-feature-phase-timings.d.ts

@@ -0,0 +1,17 @@
+export interface PhaseTimingData {
+    agentRunId: string;
+    phase: string;
+    startedAt: string;
+    completedAt?: string;
+    durationMs?: number;
+    waitingApprovalAt?: string;
+    approvalWaitMs?: number;
+}
+type GetPhaseTimingsResult = {
+    timings: PhaseTimingData[];
+} | {
+    error: string;
+};
+export declare function getFeaturePhaseTimings(featureId: string): Promise<GetPhaseTimingsResult>;
+export {};
+//# sourceMappingURL=get-feature-phase-timings.d.ts.map

package/dist/src/presentation/web/app/actions/get-feature-phase-timings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-feature-phase-timings.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-phase-timings.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,KAAK,qBAAqB,GAAG;IAAE,OAAO,EAAE,eAAe,EAAE,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhF,wBAAsB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAwB9F"}

package/dist/src/presentation/web/app/actions/get-feature-phase-timings.js

@@ -0,0 +1,25 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+export async function getFeaturePhaseTimings(featureId) {
+    if (!featureId.trim()) {
+        return { error: 'Feature id is required' };
+    }
+    try {
+        const repo = resolve('IPhaseTimingRepository');
+        const phaseTimings = await repo.findByFeatureId(featureId);
+        const timings = phaseTimings.map((t) => ({
+            agentRunId: t.agentRunId,
+            phase: t.phase,
+            startedAt: t.startedAt,
+            completedAt: t.completedAt,
+            durationMs: t.durationMs != null ? Number(t.durationMs) : undefined,
+            waitingApprovalAt: t.waitingApprovalAt,
+            approvalWaitMs: t.approvalWaitMs != null ? Number(t.approvalWaitMs) : undefined,
+        }));
+        return { timings };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load phase timings';
+        return { error: message };
+    }
+}

package/dist/src/presentation/web/app/actions/get-feature-plan.d.ts

@@ -0,0 +1,18 @@
+export interface PlanTaskData {
+    title: string;
+    description: string;
+    state: string;
+}
+export interface PlanData {
+    state: string;
+    overview: string;
+    tasks: PlanTaskData[];
+}
+type GetPlanResult = {
+    plan: PlanData | undefined;
+} | {
+    error: string;
+};
+export declare function getFeaturePlan(featureId: string): Promise<GetPlanResult>;
+export {};
+//# sourceMappingURL=get-feature-plan.d.ts.map

package/dist/src/presentation/web/app/actions/get-feature-plan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-feature-plan.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-plan.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,wBAAsB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAgC9E"}

package/dist/src/presentation/web/app/actions/get-feature-plan.js

@@ -0,0 +1,31 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+export async function getFeaturePlan(featureId) {
+    if (!featureId.trim()) {
+        return { error: 'Feature id is required' };
+    }
+    try {
+        const repo = resolve('IFeatureRepository');
+        const feature = await repo.findById(featureId);
+        if (!feature) {
+            return { error: 'Feature not found' };
+        }
+        if (!feature.plan) {
+            return { plan: undefined };
+        }
+        const plan = {
+            state: feature.plan.state,
+            overview: feature.plan.overview,
+            tasks: feature.plan.tasks.map((t) => ({
+                title: t.title ?? '',
+                description: t.description ?? '',
+                state: t.state,
+            })),
+        };
+        return { plan };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load feature plan';
+        return { error: message };
+    }
+}

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

@@ -0,0 +1,8 @@
+import type { PhaseTimingData } from '../../../app/actions/get-feature-phase-timings.js';
+export interface ActivityTabProps {
+    timings: PhaseTimingData[] | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare function ActivityTab({ timings, loading, error }: ActivityTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=activity-tab.d.ts.map

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

@@ -0,0 +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,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAE/E,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AA+CD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CA0DxE"}

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

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Loader2, AlertCircle, Clock } from 'lucide-react';
+const NODE_TO_PHASE = {
+    analyze: 'Analyzing',
+    requirements: 'Requirements',
+    research: 'Researching',
+    plan: 'Planning',
+    implement: 'Implementing',
+    merge: 'Merging',
+};
+const LIFECYCLE_EVENTS = {
+    'run:started': { label: 'started', colorClass: 'text-blue-600' },
+    'run:resumed': { label: 'resumed', colorClass: 'text-blue-600' },
+    'run:completed': { label: 'completed', colorClass: 'text-emerald-600' },
+    'run:failed': { label: 'failed', colorClass: 'text-red-600' },
+    'run:stopped': { label: 'stopped', colorClass: 'text-amber-600' },
+    'run:crashed': { label: 'crashed', colorClass: 'text-red-600' },
+};
+function isLifecycleEvent(phase) {
+    return phase.startsWith('run:');
+}
+function formatDuration(ms) {
+    return `${(ms / 1000).toFixed(1)}s`;
+}
+function groupTimingsByRun(timings) {
+    const groups = [];
+    for (const t of timings) {
+        const last = groups[groups.length - 1];
+        if (last?.runId === t.agentRunId) {
+            last.timings.push(t);
+        }
+        else {
+            groups.push({ runId: t.agentRunId, timings: [t] });
+        }
+    }
+    return groups;
+}
+export function ActivityTab({ timings, loading, error }) {
+    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" }) }));
+    }
+    if (error) {
+        return (_jsxs("div", { className: "flex items-center gap-2 p-4 text-sm text-red-600", children: [_jsx(AlertCircle, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }));
+    }
+    if (!timings || timings.length === 0) {
+        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 groups = groupTimingsByRun(timings);
+    const multiRun = groups.length > 1;
+    const totalExecMs = nodeTimings.reduce((sum, t) => sum + (t.durationMs ?? 0), 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: groups.map((group, groupIdx) => (_jsx(RunGroup, { group: group, groupIdx: groupIdx, multiRun: multiRun, maxDurationMs: maxDurationMs }, group.runId))) }), totalExecMs > 0 ? (_jsx(SummaryTotals, { totalExecMs: totalExecMs, totalWaitMs: totalWaitMs })) : null] }));
+}
+function RunGroup({ group, groupIdx, multiRun, maxDurationMs, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [multiRun ? (_jsxs("div", { className: "text-muted-foreground text-xs font-medium", children: ["Run #", groupIdx + 1] })) : null, group.timings.map((t) => {
+                if (isLifecycleEvent(t.phase)) {
+                    return _jsx(LifecycleEventRow, { timing: t }, `${t.agentRunId}-${t.phase}-${t.startedAt}`);
+                }
+                return (_jsx(NodeTimingRow, { timing: t, maxDurationMs: maxDurationMs }, `${t.agentRunId}-${t.phase}-${t.startedAt}`));
+            })] }));
+}
+function LifecycleEventRow({ timing }) {
+    const event = LIFECYCLE_EVENTS[timing.phase];
+    if (!event)
+        return null;
+    return (_jsx("div", { className: `text-xs ${event.colorClass}`, children: _jsx("span", { children: event.label }) }));
+}
+function NodeTimingRow({ timing, maxDurationMs, }) {
+    const label = timing.phase.includes(':')
+        ? `rev ${timing.phase.split(':')[1]}`
+        : (NODE_TO_PHASE[timing.phase] ?? timing.phase);
+    const durationMs = timing.durationMs ?? 0;
+    const barPercent = maxDurationMs > 0 ? Math.max(2, (durationMs / maxDurationMs) * 100) : 2;
+    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] }));
+}
+function ApprovalWaitRow({ timing, maxDurationMs, }) {
+    const waitMs = timing.approvalWaitMs ?? 0;
+    const barPercent = maxDurationMs > 0 ? Math.max(2, (waitMs / maxDurationMs) * 100) : 2;
+    return (_jsxs("div", { "data-testid": `approval-wait-${timing.phase}`, className: "flex items-center gap-3 pl-4", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 text-xs", children: "approval" }), _jsx("div", { className: "bg-muted h-2.5 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-amber-500", style: { width: `${Math.min(barPercent, 100)}%` } }) }), _jsx("span", { className: "text-muted-foreground w-14 shrink-0 text-right text-xs", children: formatDuration(waitMs) })] }));
+}
+function SummaryTotals({ totalExecMs, totalWaitMs }) {
+    return (_jsxs("div", { "data-testid": "activity-summary", className: "border-border flex flex-col gap-1.5 border-t pt-3", children: [_jsx(SummaryRow, { label: "Total execution", value: formatDuration(totalExecMs) }), totalWaitMs > 0 ? (_jsxs(_Fragment, { children: [_jsx(SummaryRow, { label: "Total wait", value: formatDuration(totalWaitMs) }), _jsx(SummaryRow, { label: "Total wall-clock", value: formatDuration(totalExecMs + totalWaitMs) })] })) : null] }));
+}
+function SummaryRow({ label, value }) {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-xs font-medium", children: value })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ActivityTab } from './activity-tab.js';
+declare const meta: Meta<typeof ActivityTab>;
+export default meta;
+type Story = StoryObj<typeof ActivityTab>;
+/** Default — single run with complete phase timings and approval waits. */
+export declare const Default: Story;
+/** Multiple runs with run headers showing grouping. */
+export declare const MultipleRuns: Story;
+/** Running phase — a phase without completedAt shows blue bar. */
+export declare const RunningPhase: Story;
+/** Loading state — spinner displayed while data is being fetched. */
+export declare const Loading: Story;
+/** Empty state — no activity recorded yet. */
+export declare const Empty: Story;
+/** Error state — inline error message. */
+export declare const Error: Story;
+/** Approval wait indicators — phases with approval wait sub-rows. */
+export declare const WithApprovalWaits: Story;
+//# sourceMappingURL=activity-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/activity-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAclC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAmK1C,2EAA2E;AAC3E,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAC"}

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

@@ -0,0 +1,252 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityTab } from './activity-tab.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/ActivityTab',
+    component: ActivityTab,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '600px', width: '400px', border: '1px solid var(--color-border)' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+const singleRunTimings = [
+    {
+        agentRunId: 'run-1',
+        phase: 'run:started',
+        startedAt: '2025-01-15T10:00:00Z',
+        completedAt: '2025-01-15T10:00:00Z',
+        durationMs: 0,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'analyze',
+        startedAt: '2025-01-15T10:00:01Z',
+        completedAt: '2025-01-15T10:00:15Z',
+        durationMs: 14000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'requirements',
+        startedAt: '2025-01-15T10:00:15Z',
+        completedAt: '2025-01-15T10:01:45Z',
+        durationMs: 90000,
+        waitingApprovalAt: '2025-01-15T10:01:00Z',
+        approvalWaitMs: 30000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'research',
+        startedAt: '2025-01-15T10:01:45Z',
+        completedAt: '2025-01-15T10:03:30Z',
+        durationMs: 105000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'plan',
+        startedAt: '2025-01-15T10:03:30Z',
+        completedAt: '2025-01-15T10:05:00Z',
+        durationMs: 90000,
+        waitingApprovalAt: '2025-01-15T10:04:30Z',
+        approvalWaitMs: 15000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'implement',
+        startedAt: '2025-01-15T10:05:00Z',
+        completedAt: '2025-01-15T10:15:00Z',
+        durationMs: 600000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'run:completed',
+        startedAt: '2025-01-15T10:15:00Z',
+        completedAt: '2025-01-15T10:15:00Z',
+        durationMs: 0,
+    },
+];
+const multiRunTimings = [
+    // Run 1
+    {
+        agentRunId: 'run-1',
+        phase: 'run:started',
+        startedAt: '2025-01-15T10:00:00Z',
+        durationMs: 0,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'analyze',
+        startedAt: '2025-01-15T10:00:01Z',
+        completedAt: '2025-01-15T10:00:20Z',
+        durationMs: 19000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'requirements',
+        startedAt: '2025-01-15T10:00:20Z',
+        completedAt: '2025-01-15T10:02:00Z',
+        durationMs: 100000,
+        waitingApprovalAt: '2025-01-15T10:01:20Z',
+        approvalWaitMs: 40000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'run:completed',
+        startedAt: '2025-01-15T10:02:00Z',
+        durationMs: 0,
+    },
+    // Run 2
+    {
+        agentRunId: 'run-2',
+        phase: 'run:resumed',
+        startedAt: '2025-01-15T11:00:00Z',
+        durationMs: 0,
+    },
+    {
+        agentRunId: 'run-2',
+        phase: 'research',
+        startedAt: '2025-01-15T11:00:01Z',
+        completedAt: '2025-01-15T11:02:30Z',
+        durationMs: 149000,
+    },
+    {
+        agentRunId: 'run-2',
+        phase: 'plan',
+        startedAt: '2025-01-15T11:02:30Z',
+        completedAt: '2025-01-15T11:04:00Z',
+        durationMs: 90000,
+        waitingApprovalAt: '2025-01-15T11:03:30Z',
+        approvalWaitMs: 20000,
+    },
+    {
+        agentRunId: 'run-2',
+        phase: 'implement',
+        startedAt: '2025-01-15T11:04:00Z',
+        completedAt: '2025-01-15T11:12:00Z',
+        durationMs: 480000,
+    },
+    {
+        agentRunId: 'run-2',
+        phase: 'merge',
+        startedAt: '2025-01-15T11:12:00Z',
+        completedAt: '2025-01-15T11:13:30Z',
+        durationMs: 90000,
+    },
+    {
+        agentRunId: 'run-2',
+        phase: 'run:completed',
+        startedAt: '2025-01-15T11:13:30Z',
+        durationMs: 0,
+    },
+];
+const runningTimings = [
+    {
+        agentRunId: 'run-1',
+        phase: 'run:started',
+        startedAt: '2025-01-15T10:00:00Z',
+        durationMs: 0,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'analyze',
+        startedAt: '2025-01-15T10:00:01Z',
+        completedAt: '2025-01-15T10:00:15Z',
+        durationMs: 14000,
+    },
+    {
+        agentRunId: 'run-1',
+        phase: 'implement',
+        startedAt: '2025-01-15T10:00:15Z',
+        durationMs: 45000,
+    },
+];
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+/** Default — single run with complete phase timings and approval waits. */
+export const Default = {
+    args: {
+        timings: singleRunTimings,
+        loading: false,
+        error: null,
+    },
+};
+/** Multiple runs with run headers showing grouping. */
+export const MultipleRuns = {
+    args: {
+        timings: multiRunTimings,
+        loading: false,
+        error: null,
+    },
+};
+/** Running phase — a phase without completedAt shows blue bar. */
+export const RunningPhase = {
+    args: {
+        timings: runningTimings,
+        loading: false,
+        error: null,
+    },
+};
+/** Loading state — spinner displayed while data is being fetched. */
+export const Loading = {
+    args: {
+        timings: null,
+        loading: true,
+        error: null,
+    },
+};
+/** Empty state — no activity recorded yet. */
+export const Empty = {
+    args: {
+        timings: [],
+        loading: false,
+        error: null,
+    },
+};
+/** Error state — inline error message. */
+export const Error = {
+    args: {
+        timings: null,
+        loading: false,
+        error: 'Failed to load phase timings. Please try again.',
+    },
+};
+/** Approval wait indicators — phases with approval wait sub-rows. */
+export const WithApprovalWaits = {
+    args: {
+        timings: [
+            {
+                agentRunId: 'run-1',
+                phase: 'requirements',
+                startedAt: '2025-01-15T10:00:00Z',
+                completedAt: '2025-01-15T10:03:00Z',
+                durationMs: 180000,
+                waitingApprovalAt: '2025-01-15T10:01:00Z',
+                approvalWaitMs: 120000,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'plan',
+                startedAt: '2025-01-15T10:03:00Z',
+                completedAt: '2025-01-15T10:06:00Z',
+                durationMs: 180000,
+                waitingApprovalAt: '2025-01-15T10:04:00Z',
+                approvalWaitMs: 90000,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'implement',
+                startedAt: '2025-01-15T10:06:00Z',
+                completedAt: '2025-01-15T10:16:00Z',
+                durationMs: 600000,
+            },
+        ],
+        loading: false,
+        error: null,
+    },
+};

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

@@ -0,0 +1,7 @@
+import type { FeatureNodeData } from '../../common/feature-node/index.js';
+export interface FeatureDrawerTabsProps {
+    featureNode: FeatureNodeData;
+    featureId: string;
+}
+export declare function FeatureDrawerTabs({ featureNode, featureId }: 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

@@ -0,0 +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":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAWxE,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;CACnB;AA0BD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAqFnF"}

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

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs.js';
+import { getFeaturePhaseTimings } from '../../../app/actions/get-feature-phase-timings.js';
+import { getFeatureMessages } from '../../../app/actions/get-feature-messages.js';
+import { getFeaturePlan } from '../../../app/actions/get-feature-plan.js';
+import { OverviewTab } from './overview-tab.js';
+import { ActivityTab } from './activity-tab.js';
+import { MessagesTab } from './messages-tab.js';
+import { PlanTab } from './plan-tab.js';
+import { useTabDataFetch } from './use-tab-data-fetch.js';
+async function fetchActivity(featureId) {
+    const result = await getFeaturePhaseTimings(featureId);
+    if ('error' in result)
+        throw new Error(result.error);
+    return result.timings;
+}
+async function fetchMessages(featureId) {
+    const result = await getFeatureMessages(featureId);
+    if ('error' in result)
+        throw new Error(result.error);
+    return result.messages;
+}
+async function fetchPlan(featureId) {
+    const result = await getFeaturePlan(featureId);
+    if ('error' in result)
+        throw new Error(result.error);
+    return result.plan;
+}
+const TAB_FETCHERS = {
+    activity: fetchActivity,
+    messages: fetchMessages,
+    plan: fetchPlan,
+};
+export function FeatureDrawerTabs({ featureNode, featureId }) {
+    const [activeTab, setActiveTab] = useState('overview');
+    const { tabs, fetchTab, refreshTab } = useTabDataFetch(featureId, TAB_FETCHERS);
+    // Reset to overview when featureId changes
+    const prevFeatureIdRef = useRef(featureId);
+    useEffect(() => {
+        if (prevFeatureIdRef.current !== featureId) {
+            prevFeatureIdRef.current = featureId;
+            setActiveTab('overview');
+        }
+    }, [featureId]);
+    // SSE refresh: re-fetch active tab data when featureNode reference changes
+    const featureNodeRef = useRef(featureNode);
+    const activeTabRef = useRef(activeTab);
+    activeTabRef.current = activeTab;
+    useEffect(() => {
+        if (featureNodeRef.current !== featureNode) {
+            featureNodeRef.current = featureNode;
+            const current = activeTabRef.current;
+            if (current !== 'overview') {
+                refreshTab(current);
+            }
+        }
+    }, [featureNode, refreshTab]);
+    const handleTabChange = useCallback((value) => {
+        const tab = value;
+        setActiveTab(tab);
+        if (tab !== 'overview') {
+            fetchTab(tab);
+        }
+    }, [fetchTab]);
+    return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsxs(Tabs, { value: activeTab, onValueChange: handleTabChange, className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "shrink-0 px-4 pt-4", children: _jsxs(TabsList, { className: "grid w-full grid-cols-4", children: [_jsx(TabsTrigger, { value: "overview", children: "Overview" }), _jsx(TabsTrigger, { value: "activity", children: "Activity" }), _jsx(TabsTrigger, { value: "messages", children: "Messages" }), _jsx(TabsTrigger, { value: "plan", children: "Plan" })] }) }), _jsx(TabsContent, { value: "overview", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(OverviewTab, { data: featureNode }) }), _jsx(TabsContent, { value: "activity", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(ActivityTab, { timings: tabs.activity.data, loading: tabs.activity.loading, error: tabs.activity.error }) }), _jsx(TabsContent, { value: "messages", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(MessagesTab, { messages: tabs.messages.data, loading: tabs.messages.loading, error: tabs.messages.error }) }), _jsx(TabsContent, { value: "plan", className: "mt-0 flex-1 overflow-y-auto", children: _jsx(PlanTab, { plan: tabs.plan.data, loading: tabs.plan.loading, error: tabs.plan.error }) })] }) }));
+}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureDrawerTabs } from './feature-drawer-tabs.js';
+declare const meta: Meta<typeof FeatureDrawerTabs>;
+export default meta;
+type Story = StoryObj<typeof FeatureDrawerTabs>;
+/** Default — running feature with full data. Overview tab active. */
+export declare const Default: Story;
+/** Completed feature in deploy phase with merged PR. */
+export declare const CompletedFeature: Story;
+/** Early-stage feature in requirements phase, no progress. */
+export declare const RequirementsPhase: Story;
+/** Feature in error state. */
+export declare const ErrorState: Story;
+//# sourceMappingURL=feature-drawer-tabs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-drawer-tabs.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAcxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AA6EhD,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF,8BAA8B;AAC9B,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC"}