@shepai/cli 1.83.0 → 1.84.0-pr250.9819070

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

@@ -216,6 +216,78 @@ export const Error = {
         error: 'Failed to load phase timings. Please try again.',
     },
 };
+/** Rejection — shows rejected lifecycle event with user feedback text. */
+export const WithRejection = {
+    args: {
+        timings: [
+            {
+                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: '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: 'run:rejected',
+                startedAt: '2025-01-15T10:01:45Z',
+                durationMs: 0,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'run:resumed',
+                startedAt: '2025-01-15T10:02:00Z',
+                durationMs: 0,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'requirements:2',
+                startedAt: '2025-01-15T10:02:01Z',
+                completedAt: '2025-01-15T10:03:30Z',
+                durationMs: 89000,
+                waitingApprovalAt: '2025-01-15T10:03:00Z',
+                approvalWaitMs: 15000,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'research',
+                startedAt: '2025-01-15T10:03:30Z',
+                completedAt: '2025-01-15T10:05:00Z',
+                durationMs: 90000,
+            },
+            {
+                agentRunId: 'run-1',
+                phase: 'run:completed',
+                startedAt: '2025-01-15T10:05:00Z',
+                durationMs: 0,
+            },
+        ],
+        rejectionFeedback: [
+            {
+                iteration: 1,
+                message: 'The requirements are missing error handling for edge cases',
+                phase: 'requirements',
+            },
+        ],
+        loading: false,
+        error: null,
+    },
+};
 /** Approval wait indicators — phases with approval wait sub-rows. */
 export const WithApprovalWaits = {
     args: {

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

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAaxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAG3B,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,GAClB,EAAE,sBAAsB,2CA2MxB"}
+{"version":3,"file":"feature-drawer-tabs.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/feature-drawer-tabs.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACzF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+CAA+C,CAAC;AACjG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAaxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAiD3F,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC;IAG3B,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAGjD,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAwBD,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,SAAS,EACT,UAAU,EACV,OAAO,EACP,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,iBAAiB,GAClB,EAAE,sBAAsB,2CA4MxB"}

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

@@ -51,7 +51,7 @@ async function fetchActivity(featureId) {
     const result = await getFeaturePhaseTimings(featureId);
     if ('error' in result)
         throw new Error(result.error);
-    return result.timings;
+    return { timings: result.timings, rejectionFeedback: result.rejectionFeedback };
 }
 async function fetchPlan(featureId) {
     const result = await getFeaturePlan(featureId);
@@ -115,7 +115,7 @@ export function FeatureDrawerTabs({ featureNode, featureId, initialTab, prdData,
             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 overflow-x-auto px-4 pt-4", children: _jsx(TabsList, { className: "flex w-full", children: visibleTabDefs.map((tab) => (_jsx(TabsTrigger, { value: tab.key, className: "flex-1", children: tab.label }, tab.key))) }) }), _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: "log", className: "mt-0 flex-1 overflow-hidden", children: _jsx(LogTab, { content: featureLogs.content, isConnected: featureLogs.isConnected, error: featureLogs.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 }) }), visibleTabs.includes('prd-review') ? (_jsx(TabsContent, { value: "prd-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections ?? {}, onSelect: onPrdSelect ?? (() => undefined), onApprove: onPrdApprove ?? (() => undefined), onReject: onPrdReject, isProcessing: isPrdLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('tech-decisions') ? (_jsx(TabsContent, { value: "tech-decisions", className: "mt-0 flex min-h-0 flex-1 flex-col", children: techData ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(TechDecisionsContent, { data: techData }) }), _jsx(DrawerActionBarForTech, { onApprove: onTechApprove ?? (() => undefined), onReject: onTechReject, isProcessing: isTechLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })] })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('product-decisions') ? (_jsx(TabsContent, { value: "product-decisions", className: "mt-0 flex-1 overflow-y-auto", children: productData === null ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) : productData ? (_jsx(ProductDecisionsSummary, { data: productData })) : (_jsx("p", { className: "text-muted-foreground p-4 text-center text-sm", children: "No product decisions available." })) })) : null, visibleTabs.includes('merge-review') ? (_jsx(TabsContent, { value: "merge-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: mergeData ? (_jsx(MergeReview, { data: mergeData, onApprove: onMergeApprove ?? (() => undefined), onReject: onMergeReject, isProcessing: isMergeLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null] }) }));
+    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 overflow-x-auto px-4 pt-4", children: _jsx(TabsList, { className: "flex w-full", children: visibleTabDefs.map((tab) => (_jsx(TabsTrigger, { value: tab.key, className: "flex-1", children: tab.label }, tab.key))) }) }), _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?.timings ?? null, loading: tabs.activity.loading, error: tabs.activity.error, rejectionFeedback: tabs.activity.data?.rejectionFeedback }) }), _jsx(TabsContent, { value: "log", className: "mt-0 flex-1 overflow-hidden", children: _jsx(LogTab, { content: featureLogs.content, isConnected: featureLogs.isConnected, error: featureLogs.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 }) }), visibleTabs.includes('prd-review') ? (_jsx(TabsContent, { value: "prd-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections ?? {}, onSelect: onPrdSelect ?? (() => undefined), onApprove: onPrdApprove ?? (() => undefined), onReject: onPrdReject, isProcessing: isPrdLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('tech-decisions') ? (_jsx(TabsContent, { value: "tech-decisions", className: "mt-0 flex min-h-0 flex-1 flex-col", children: techData ? (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(TechDecisionsContent, { data: techData }) }), _jsx(DrawerActionBarForTech, { onApprove: onTechApprove ?? (() => undefined), onReject: onTechReject, isProcessing: isTechLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })] })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null, visibleTabs.includes('product-decisions') ? (_jsx(TabsContent, { value: "product-decisions", className: "mt-0 flex-1 overflow-y-auto", children: productData === null ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) : productData ? (_jsx(ProductDecisionsSummary, { data: productData })) : (_jsx("p", { className: "text-muted-foreground p-4 text-center text-sm", children: "No product decisions available." })) })) : null, visibleTabs.includes('merge-review') ? (_jsx(TabsContent, { value: "merge-review", className: "mt-0 flex min-h-0 flex-1 flex-col", children: mergeData ? (_jsx(MergeReview, { data: mergeData, onApprove: onMergeApprove ?? (() => undefined), onReject: onMergeReject, isProcessing: isMergeLoading, isRejecting: isRejecting, chatInput: chatInput, onChatInputChange: onChatInputChange })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) })) })) : null] }) }));
 }
 // ── Private helper ──────────────────────────────────────────────────────
 function DrawerActionBarForTech({ onApprove, onReject, isProcessing, isRejecting, chatInput, onChatInputChange, }) {

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

@@ -1 +1 @@
-{"version":3,"file":"plan-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/plan-tab.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,gCAAgC,CAAC;AAE7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAoBD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,YAAY,2CAgD7D"}
+{"version":3,"file":"plan-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/plan-tab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAQD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,YAAY,2CAgD7D"}

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

@@ -1,20 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2, Circle, Check, Eye } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 import { AlertCircle, ListTodo } from 'lucide-react';
 import { Badge } from '../../ui/badge.js';
+import { TaskProgressView } from '../../common/task-progress-view/index.js';
 const planStateBadgeStyles = {
     Requirements: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
     ClarificationRequired: 'border-transparent bg-amber-50 text-amber-700 hover:bg-amber-50',
     Ready: 'border-transparent bg-green-50 text-green-700 hover:bg-green-50',
 };
-const taskStateConfig = {
-    Todo: { icon: Circle, colorClass: 'text-muted-foreground' },
-    'Work in Progress': { icon: Loader2, colorClass: 'text-blue-600', spinning: true },
-    Done: { icon: Check, colorClass: 'text-emerald-600' },
-    Review: { icon: Eye, colorClass: 'text-amber-600' },
-};
-const defaultTaskConfig = { icon: Circle, colorClass: 'text-muted-foreground' };
 export function PlanTab({ plan, loading, error }) {
     if (loading) {
         return (_jsx("div", { "data-testid": "plan-tab-loading", className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
@@ -25,16 +19,5 @@ export function PlanTab({ plan, loading, error }) {
     if (!plan) {
         return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(ListTodo, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No plan created yet" })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Plan State" }), _jsx(Badge, { className: planStateBadgeStyles[plan.state] ?? 'border-transparent bg-gray-50 text-gray-700', children: plan.state })] }), plan.overview ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Overview" }), _jsx("p", { className: "text-sm leading-relaxed", children: plan.overview })] })) : null, _jsx(TaskList, { tasks: plan.tasks })] }));
-}
-function TaskList({ tasks }) {
-    if (tasks.length === 0) {
-        return (_jsx("div", { className: "flex flex-col items-center justify-center gap-2 py-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "No tasks defined yet" }) }));
-    }
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Tasks" }), _jsx("div", { "data-testid": "plan-task-list", className: "flex flex-col gap-2", children: tasks.map((task, index) => (_jsx(TaskItem, { task: task, index: index }, task.title || `task-${index}`))) })] }));
-}
-function TaskItem({ task, index }) {
-    const config = taskStateConfig[task.state] ?? defaultTaskConfig;
-    const Icon = config.icon;
-    return (_jsxs("div", { "data-testid": `plan-task-${index}`, className: `flex items-start gap-2 rounded-md border px-3 py-2 ${config.colorClass}`, children: [_jsx(Icon, { className: `mt-0.5 h-4 w-4 shrink-0 ${config.spinning ? 'animate-spin' : ''}` }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: task.title }), task.description ? (_jsx("span", { className: "text-muted-foreground text-xs", children: task.description })) : null] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Plan State" }), _jsx(Badge, { className: planStateBadgeStyles[plan.state] ?? 'border-transparent bg-gray-50 text-gray-700', children: plan.state })] }), plan.overview ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Overview" }), _jsx("p", { className: "text-sm leading-relaxed", children: plan.overview })] })) : null, _jsx(TaskProgressView, { tasks: plan.tasks })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"plan-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/plan-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAc9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AA0HtC,6EAA6E;AAC7E,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}
+{"version":3,"file":"plan-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/plan-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAc9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAoMtC,6EAA6E;AAC7E,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

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

@@ -23,31 +23,96 @@ const mixedTasksPlan = {
             title: 'Set up OAuth provider configuration',
             description: 'Configure Google and GitHub OAuth apps with client IDs and secrets',
             state: 'Done',
+            actionItems: [
+                {
+                    name: 'Create OAuth config module',
+                    description: 'Define provider configuration schema and load from env',
+                    acceptanceCriteria: [
+                        { description: 'Config loads from environment variables', verified: true },
+                        { description: 'Validation rejects missing client ID or secret', verified: true },
+                    ],
+                },
+                {
+                    name: 'Register OAuth apps',
+                    description: 'Register apps with Google and GitHub developer consoles',
+                    acceptanceCriteria: [
+                        { description: 'Google OAuth app created with correct scopes', verified: true },
+                        { description: 'GitHub OAuth app created with correct callback URL', verified: true },
+                    ],
+                },
+            ],
         },
         {
             title: 'Implement callback handler',
             description: 'Handle OAuth callback with authorization code exchange',
             state: 'Done',
+            actionItems: [
+                {
+                    name: 'Build callback endpoint',
+                    description: 'GET /auth/callback with code exchange logic',
+                    acceptanceCriteria: [
+                        { description: 'Exchanges authorization code for tokens', verified: true },
+                    ],
+                },
+            ],
         },
         {
             title: 'Add token refresh logic',
             description: 'Implement silent token refresh using refresh tokens stored in httpOnly cookies',
             state: 'Work in Progress',
+            actionItems: [
+                {
+                    name: 'Implement refresh endpoint',
+                    description: 'POST /auth/refresh to issue new access token',
+                    acceptanceCriteria: [
+                        { description: 'Returns new access token when refresh token is valid', verified: true },
+                        { description: 'Returns 401 when refresh token is expired', verified: false },
+                    ],
+                },
+                {
+                    name: 'Add httpOnly cookie handling',
+                    description: 'Store refresh tokens in secure httpOnly cookies',
+                    acceptanceCriteria: [
+                        { description: 'Cookies are set with Secure and HttpOnly flags', verified: false },
+                    ],
+                },
+            ],
         },
         {
             title: 'Create user profile sync',
             description: 'Sync user profile data from identity providers on login',
             state: 'Todo',
+            actionItems: [
+                {
+                    name: 'Fetch profile from provider',
+                    description: 'Use access token to retrieve user profile from Google/GitHub',
+                    acceptanceCriteria: [
+                        { description: 'Retrieves name, email, and avatar from Google', verified: false },
+                        { description: 'Retrieves name, email, and avatar from GitHub', verified: false },
+                    ],
+                },
+            ],
         },
         {
             title: 'Write integration tests',
             description: 'Test the full OAuth flow with mocked providers',
             state: 'Todo',
+            actionItems: [],
         },
         {
             title: 'Update API documentation',
             description: 'Document new authentication endpoints and flows',
             state: 'Review',
+            actionItems: [
+                {
+                    name: 'Document auth endpoints',
+                    description: 'Add OpenAPI specs for all auth routes',
+                    acceptanceCriteria: [
+                        { description: 'All endpoints have OpenAPI documentation', verified: true },
+                        { description: 'Examples included for each endpoint', verified: true },
+                    ],
+                },
+            ],
         },
     ],
 };
@@ -59,21 +124,25 @@ const allDonePlan = {
             title: 'Design sliding window algorithm',
             description: 'Implement Redis-backed sliding window counter',
             state: 'Done',
+            actionItems: [],
         },
         {
             title: 'Add rate limit middleware',
             description: 'Express middleware that checks rate limits per IP',
             state: 'Done',
+            actionItems: [],
         },
         {
             title: 'Configure limits per endpoint',
             description: 'Set different rate limits for public vs authenticated endpoints',
             state: 'Done',
+            actionItems: [],
         },
         {
             title: 'Add rate limit headers',
             description: 'Include X-RateLimit-* headers in responses',
             state: 'Done',
+            actionItems: [],
         },
     ],
 };
@@ -85,16 +154,19 @@ const draftPlan = {
             title: 'Define notification types',
             description: 'Enumerate all notification events and their payloads',
             state: 'Todo',
+            actionItems: [],
         },
         {
             title: 'Set up WebSocket server',
             description: 'Configure Socket.io with Redis adapter for horizontal scaling',
             state: 'Todo',
+            actionItems: [],
         },
         {
             title: 'Implement notification store',
             description: 'Persist notifications in database with read/unread tracking',
             state: 'Todo',
+            actionItems: [],
         },
     ],
 };
@@ -106,11 +178,13 @@ const clarificationPlan = {
             title: 'Set up email provider',
             description: 'Configure SendGrid API integration',
             state: 'Done',
+            actionItems: [],
         },
         {
             title: 'Create template engine',
             description: 'Implement Handlebars-based email template rendering',
             state: 'Todo',
+            actionItems: [],
         },
     ],
 };

package/dist/src/presentation/web/components/common/task-progress-view/index.d.ts

@@ -0,0 +1,3 @@
+export { TaskProgressView } from './task-progress-view.js';
+export type { TaskProgressViewProps } from './task-progress-view.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/task-progress-view/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/task-progress-view/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/src/presentation/web/components/common/task-progress-view/index.js

@@ -0,0 +1 @@
+export { TaskProgressView } from './task-progress-view.js';

package/dist/src/presentation/web/components/common/task-progress-view/task-progress-view.d.ts

@@ -0,0 +1,6 @@
+import type { PlanTaskData } from '../../../app/actions/get-feature-plan.js';
+export interface TaskProgressViewProps {
+    tasks: PlanTaskData[];
+}
+export declare function TaskProgressView({ tasks }: TaskProgressViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=task-progress-view.d.ts.map

package/dist/src/presentation/web/components/common/task-progress-view/task-progress-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-progress-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/task-progress-view/task-progress-view.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,gCAAgC,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AA8CD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CAmBhE"}

package/dist/src/presentation/web/components/common/task-progress-view/task-progress-view.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Loader2, Circle, Check, Eye, ChevronRight, CheckCircle2, CircleDashed, } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+const taskStateConfig = {
+    Todo: {
+        icon: Circle,
+        colorClass: 'text-muted-foreground',
+        borderClass: 'border-border',
+        label: 'Todo',
+    },
+    'Work in Progress': {
+        icon: Loader2,
+        colorClass: 'text-blue-600',
+        borderClass: 'border-blue-200',
+        spinning: true,
+        label: 'In Progress',
+    },
+    Done: {
+        icon: Check,
+        colorClass: 'text-emerald-600',
+        borderClass: 'border-emerald-200',
+        label: 'Done',
+    },
+    Review: {
+        icon: Eye,
+        colorClass: 'text-amber-600',
+        borderClass: 'border-amber-200',
+        label: 'Review',
+    },
+};
+const defaultTaskConfig = {
+    icon: Circle,
+    colorClass: 'text-muted-foreground',
+    borderClass: 'border-border',
+    label: 'Unknown',
+};
+export function TaskProgressView({ tasks }) {
+    if (tasks.length === 0) {
+        return (_jsx("div", { className: "flex flex-col items-center justify-center gap-2 py-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "No tasks defined yet" }) }));
+    }
+    return (_jsxs("div", { "data-testid": "task-progress-view", className: "flex flex-col gap-3", children: [_jsx(ProgressSummary, { tasks: tasks }), _jsx("div", { "data-testid": "task-progress-list", className: "flex flex-col gap-2", children: tasks.map((task, index) => (_jsx(TaskCard, { task: task, index: index }, task.title || `task-${index}`))) })] }));
+}
+// ── Progress Summary ─────────────────────────────────────────────────
+function ProgressSummary({ tasks }) {
+    const counts = useMemo(() => {
+        const done = tasks.filter((t) => t.state === 'Done').length;
+        const wip = tasks.filter((t) => t.state === 'Work in Progress').length;
+        const review = tasks.filter((t) => t.state === 'Review').length;
+        const todo = tasks.filter((t) => t.state !== 'Done' && t.state !== 'Work in Progress' && t.state !== 'Review').length;
+        const total = tasks.length;
+        const percent = total > 0 ? Math.round((done / total) * 100) : 0;
+        return { done, wip, review, todo, total, percent };
+    }, [tasks]);
+    return (_jsxs("div", { "data-testid": "task-progress-summary", className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Task Progress" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [counts.done, " of ", counts.total, " done"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { "data-testid": "task-progress-bar", className: "h-full rounded-full bg-emerald-500 transition-all", style: { width: `${counts.percent}%` } }) }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [counts.done > 0 ? (_jsx(StatChip, { icon: Check, label: "Done", count: counts.done, className: "text-emerald-600" })) : null, counts.wip > 0 ? (_jsx(StatChip, { icon: Loader2, label: "In Progress", count: counts.wip, className: "text-blue-600" })) : null, counts.review > 0 ? (_jsx(StatChip, { icon: Eye, label: "Review", count: counts.review, className: "text-amber-600" })) : null, counts.todo > 0 ? (_jsx(StatChip, { icon: Circle, label: "Todo", count: counts.todo, className: "text-muted-foreground" })) : null] })] }));
+}
+function StatChip({ icon: Icon, label, count, className, }) {
+    return (_jsxs("span", { className: cn('flex items-center gap-1 text-xs', className), children: [_jsx(Icon, { className: "h-3 w-3" }), count, " ", label] }));
+}
+// ── Task Card ────────────────────────────────────────────────────────
+function TaskCard({ task, index }) {
+    const [expanded, setExpanded] = useState(false);
+    const config = taskStateConfig[task.state] ?? defaultTaskConfig;
+    const Icon = config.icon;
+    const hasDetails = task.actionItems.length > 0;
+    const handleToggle = useCallback(() => {
+        if (hasDetails) {
+            setExpanded((prev) => !prev);
+        }
+    }, [hasDetails]);
+    return (_jsxs("div", { "data-testid": `task-card-${index}`, className: cn('rounded-lg border', config.borderClass), children: [_jsxs("button", { type: "button", onClick: handleToggle, disabled: !hasDetails, className: cn('flex w-full items-start gap-2 px-3 py-2.5 text-left', hasDetails && 'hover:bg-muted/50 cursor-pointer transition-colors'), children: [_jsx(Icon, { className: cn('mt-0.5 h-4 w-4 shrink-0', config.colorClass, config.spinning && 'animate-spin') }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: cn('text-sm font-medium', config.colorClass), children: task.title }), task.description ? (_jsx("span", { className: "text-muted-foreground text-xs", children: task.description })) : null] }), hasDetails ? (_jsx(ChevronRight, { className: cn('text-muted-foreground mt-0.5 h-4 w-4 shrink-0 transition-transform', expanded && 'rotate-90') })) : null] }), expanded && hasDetails ? (_jsx("div", { className: "border-t px-3 py-2.5", children: _jsx("div", { className: "flex flex-col gap-2", children: task.actionItems.map((item, aiIndex) => (_jsx(ActionItemRow, { item: item }, item.name || `ai-${aiIndex}`))) }) })) : null] }));
+}
+// ── Action Item Row ──────────────────────────────────────────────────
+function ActionItemRow({ item }) {
+    const totalCriteria = item.acceptanceCriteria.length;
+    const verifiedCriteria = item.acceptanceCriteria.filter((ac) => ac.verified).length;
+    const allVerified = totalCriteria > 0 && verifiedCriteria === totalCriteria;
+    return (_jsxs("div", { "data-testid": "action-item", className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-start gap-2", children: [allVerified ? (_jsx(CheckCircle2, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-600" })) : (_jsx(CircleDashed, { className: "text-muted-foreground mt-0.5 h-3.5 w-3.5 shrink-0" })), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium", children: item.name }), item.description ? (_jsx("span", { className: "text-muted-foreground text-[11px]", children: item.description })) : null] }), totalCriteria > 0 ? (_jsxs("span", { className: "text-muted-foreground ml-auto shrink-0 text-[11px]", children: [verifiedCriteria, "/", totalCriteria] })) : null] }), totalCriteria > 0 ? (_jsx("div", { className: "ml-5.5 flex flex-col gap-1", children: item.acceptanceCriteria.map((ac, acIndex) => (_jsx(AcceptanceCriterionRow, { criterion: ac }, ac.description || `ac-${acIndex}`))) })) : null] }));
+}
+// ── Acceptance Criterion Row ─────────────────────────────────────────
+function AcceptanceCriterionRow({ criterion, }) {
+    return (_jsxs("div", { "data-testid": "acceptance-criterion", className: "flex items-start gap-1.5", children: [criterion.verified ? (_jsx(Check, { className: "mt-0.5 h-3 w-3 shrink-0 text-emerald-600" })) : (_jsx(Circle, { className: "text-muted-foreground mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: cn('text-[11px]', criterion.verified ? 'text-muted-foreground line-through' : 'text-foreground'), children: criterion.description })] }));
+}

package/dist/src/presentation/web/components/common/task-progress-view/task-progress-view.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TaskProgressView } from './task-progress-view.js';
+declare const meta: Meta<typeof TaskProgressView>;
+export default meta;
+type Story = StoryObj<typeof TaskProgressView>;
+/** Default — tasks in mixed states with action items and acceptance criteria. */
+export declare const Default: Story;
+/** All tasks completed. */
+export declare const AllDone: Story;
+/** All tasks in Todo state. */
+export declare const AllTodo: Story;
+/** Empty — no tasks defined. */
+export declare const Empty: Story;
+/** Single task with detailed action items. */
+export declare const SingleTaskDetailed: Story;
+//# sourceMappingURL=task-progress-view.stories.d.ts.map

package/dist/src/presentation/web/components/common/task-progress-view/task-progress-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-progress-view.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/task-progress-view/task-progress-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAYvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AA+J/C,iFAAiF;AACjF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC"}