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

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PrStatus, CiStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { FeatureDrawerTabs } from './feature-drawer-tabs.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/FeatureDrawerTabs',
+    component: FeatureDrawerTabs,
+    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 runningFeature = {
+    name: 'Auth Module',
+    description: 'Implement OAuth2 authentication flow with multiple providers',
+    featureId: '#f1',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 65,
+    agentType: 'claude-code',
+    runtime: '2h 15m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/auth-module',
+    pr: {
+        url: 'https://github.com/org/repo/pull/42',
+        number: 42,
+        status: PrStatus.Open,
+        ciStatus: CiStatus.Pending,
+        commitHash: 'abc1234567890def',
+    },
+};
+const doneFeature = {
+    name: 'Payment Gateway',
+    description: 'Stripe integration for subscriptions',
+    featureId: '#f3',
+    lifecycle: 'deploy',
+    state: 'done',
+    progress: 100,
+    runtime: '1h 42m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/payment-gateway',
+    pr: {
+        url: 'https://github.com/org/repo/pull/55',
+        number: 55,
+        status: PrStatus.Merged,
+        ciStatus: CiStatus.Success,
+        commitHash: 'def4567890abc123',
+    },
+};
+const requirementsFeature = {
+    name: 'API Rate Limiting',
+    description: 'Implement sliding window rate limiting for public endpoints',
+    featureId: '#bi1',
+    lifecycle: 'requirements',
+    state: 'action-required',
+    progress: 0,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/api-rate-limiting',
+};
+const errorFeature = {
+    name: 'Email Service',
+    description: 'Transactional email with SendGrid',
+    featureId: '#f5',
+    lifecycle: 'review',
+    state: 'error',
+    progress: 30,
+    errorMessage: 'Build failed: type mismatch in EmailHandler',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/email-service',
+};
+/* ---------------------------------------------------------------------------
+ * Stories
+ *
+ * Note: In Storybook, server actions are mocked and return error states.
+ * The Overview tab renders fully since it uses FeatureNodeData (no server action).
+ * Activity, Messages, and Plan tabs show error states from the mocked actions.
+ * See individual tab stories (ActivityTab, MessagesTab, PlanTab) for populated states.
+ * ------------------------------------------------------------------------- */
+/** Default — running feature with full data. Overview tab active. */
+export const Default = {
+    args: {
+        featureNode: runningFeature,
+        featureId: '#f1',
+    },
+};
+/** Completed feature in deploy phase with merged PR. */
+export const CompletedFeature = {
+    args: {
+        featureNode: doneFeature,
+        featureId: '#f3',
+    },
+};
+/** Early-stage feature in requirements phase, no progress. */
+export const RequirementsPhase = {
+    args: {
+        featureNode: requirementsFeature,
+        featureId: '#bi1',
+    },
+};
+/** Feature in error state. */
+export const ErrorState = {
+    args: {
+        featureNode: errorFeature,
+        featureId: '#f5',
+    },
+};

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

@@ -0,0 +1,3 @@
+export { FeatureDrawerTabs } from './feature-drawer-tabs.js';
+export type { FeatureDrawerTabsProps } from './feature-drawer-tabs.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -0,0 +1 @@
+export { FeatureDrawerTabs } from './feature-drawer-tabs.js';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/messages-tab.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAmCzE"}

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, AlertCircle, MessageSquare } from 'lucide-react';
+export function MessagesTab({ messages, loading, error }) {
+    if (loading) {
+        return (_jsx("div", { "data-testid": "messages-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 (!messages || messages.length === 0) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(MessageSquare, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No messages yet" })] }));
+    }
+    return (_jsx("div", { "data-testid": "messages-list", className: "flex flex-col gap-3 p-4", children: messages.map((msg, index) => (
+        // eslint-disable-next-line react/no-array-index-key -- messages are append-only, never reorder
+        _jsx(MessageItem, { message: msg }, `msg-${index}`))) }));
+}
+function MessageItem({ message }) {
+    const isAssistant = message.role === 'assistant';
+    return (_jsxs("div", { "data-testid": `message-${message.role}`, className: `flex flex-col gap-1.5 rounded-lg px-3 py-2 ${isAssistant ? 'bg-muted/50' : 'border-primary/20 border-l-2 pl-3'}`, children: [_jsx("span", { className: `text-xs font-medium ${isAssistant ? 'text-muted-foreground' : 'text-primary'}`, children: message.role }), _jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: message.content }), message.options && message.options.length > 0 ? (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Options:" }), _jsx("ul", { className: "flex flex-col gap-0.5", children: message.options.map((option, idx) => {
+                            const isSelected = message.selectedOption === idx;
+                            return (_jsxs("li", { className: `text-xs ${isSelected ? 'font-medium text-emerald-600' : 'text-muted-foreground'}`, children: [isSelected ? '✓ ' : '○ ', option] }, `option-${idx}`));
+                        }) }), message.answer ? (_jsxs("span", { className: "mt-0.5 text-xs font-medium text-emerald-600", children: ["Answer: ", message.answer] })) : null] })) : null] }));
+}

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MessagesTab } from './messages-tab.js';
+declare const meta: Meta<typeof MessagesTab>;
+export default meta;
+type Story = StoryObj<typeof MessagesTab>;
+/** Default — mixed assistant and user messages. */
+export declare const Default: Story;
+/** Messages with options — shows options list with selected answers highlighted. */
+export declare const WithOptions: Story;
+/** Single message — minimal conversation. */
+export declare const SingleMessage: Story;
+/** Loading state — spinner displayed while data is being fetched. */
+export declare const Loading: Story;
+/** Empty state — no messages yet. */
+export declare const Empty: Story;
+/** Error state — inline error message. */
+export declare const Error: Story;
+//# sourceMappingURL=messages-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/messages-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;AA2E1C,mDAAmD;AACnD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,qCAAqC;AACrC,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/messages-tab.stories.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessagesTab } from './messages-tab.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/MessagesTab',
+    component: MessagesTab,
+    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 mixedRoleMessages = [
+    {
+        role: 'assistant',
+        content: 'I will implement the OAuth2 authentication flow. Let me start by analyzing the existing codebase to understand the current auth patterns.',
+    },
+    {
+        role: 'user',
+        content: 'Please make sure to support Google and GitHub as identity providers.',
+    },
+    {
+        role: 'assistant',
+        content: 'Understood. I will implement support for both Google and GitHub OAuth providers. I have identified the following files that need to be modified:\n\n- src/auth/providers.ts\n- src/auth/callback-handler.ts\n- src/config/oauth.ts',
+    },
+    {
+        role: 'user',
+        content: 'Looks good. Please also add refresh token support.',
+    },
+    {
+        role: 'assistant',
+        content: 'I have completed the implementation with refresh token support. The changes include:\n\n1. Token refresh endpoint at /api/auth/refresh\n2. Automatic token rotation on expiry\n3. Secure httpOnly cookie storage for refresh tokens',
+    },
+];
+const messagesWithOptions = [
+    {
+        role: 'assistant',
+        content: 'Which authentication strategy should we use for the API endpoints?',
+        options: [
+            'JWT with refresh tokens',
+            'Session-based auth',
+            'API key authentication',
+            'OAuth2 bearer tokens',
+        ],
+        selectedOption: 0,
+        answer: 'JWT with refresh tokens',
+    },
+    {
+        role: 'user',
+        content: 'JWT with refresh tokens is the right choice for our use case.',
+    },
+    {
+        role: 'assistant',
+        content: 'How should we handle token expiration?',
+        options: ['Silent refresh', 'Redirect to login', 'Show warning before expiry'],
+        selectedOption: 2,
+        answer: 'Show warning before expiry',
+    },
+    {
+        role: 'assistant',
+        content: 'I will implement the JWT authentication with silent refresh tokens and a warning notification shown 5 minutes before token expiry.',
+    },
+];
+const singleMessage = [
+    {
+        role: 'assistant',
+        content: 'Starting feature analysis. I will review the codebase and propose an implementation plan.',
+    },
+];
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+/** Default — mixed assistant and user messages. */
+export const Default = {
+    args: {
+        messages: mixedRoleMessages,
+        loading: false,
+        error: null,
+    },
+};
+/** Messages with options — shows options list with selected answers highlighted. */
+export const WithOptions = {
+    args: {
+        messages: messagesWithOptions,
+        loading: false,
+        error: null,
+    },
+};
+/** Single message — minimal conversation. */
+export const SingleMessage = {
+    args: {
+        messages: singleMessage,
+        loading: false,
+        error: null,
+    },
+};
+/** Loading state — spinner displayed while data is being fetched. */
+export const Loading = {
+    args: {
+        messages: null,
+        loading: true,
+        error: null,
+    },
+};
+/** Empty state — no messages yet. */
+export const Empty = {
+    args: {
+        messages: [],
+        loading: false,
+        error: null,
+    },
+};
+/** Error state — inline error message. */
+export const Error = {
+    args: {
+        messages: null,
+        loading: false,
+        error: 'Failed to load messages. Please try again.',
+    },
+};

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

@@ -0,0 +1,6 @@
+import type { FeatureNodeData } from '../../common/feature-node/index.js';
+export interface OverviewTabProps {
+    data: FeatureNodeData;
+}
+export declare function OverviewTab({ data }: OverviewTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=overview-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overview-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAmCrD"}

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExternalLink, GitCommitHorizontal } from 'lucide-react';
+import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { cn } from '../../../lib/utils.js';
+import { Badge } from '../../ui/badge.js';
+import { Separator } from '../../ui/separator.js';
+import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
+import { CometSpinner } from '../../ui/comet-spinner.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
+export function OverviewTab({ data }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[data.lifecycle] }), _jsx(FeatureStateBadge, { data: data }), data.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [data.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[data.state].progressClass), style: { width: `${data.progress}%` } }) })] })) : null] }), data.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(FeaturePrInfo, { pr: data.pr })] })) : null, _jsx(FeatureDetails, { data: data })] }));
+}
+function FeatureStateBadge({ data }) {
+    const config = featureNodeStateConfig[data.state];
+    const Icon = config.icon;
+    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
+}
+const prStatusStyles = {
+    [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
+    [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
+    [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
+};
+function FeaturePrInfo({ pr }) {
+    return (_jsx("div", { "data-testid": "feature-drawer-pr", className: "border-border mx-4 rounded-lg border", children: _jsxs("div", { className: "space-y-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
+}
+function FeatureDetails({ data }) {
+    const hasAnyDetail = data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+    if (!hasAnyDetail)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.agentType ? _jsx(DetailRow, { label: "Agent", value: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] })] }));
+}
+function DetailRow({ label, value }) {
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
+}

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OverviewTab } from './overview-tab.js';
+declare const meta: Meta<typeof OverviewTab>;
+export default meta;
+type Story = StoryObj<typeof OverviewTab>;
+/** Default — full data with status, progress, PR card, and details. */
+export declare const Default: Story;
+/** Feature with no PR — PR card is hidden. */
+export declare const NoPr: Story;
+/** Feature with 0% progress — progress bar is hidden. */
+export declare const NoProgress: Story;
+/** Completed feature in deploy phase with merged PR. */
+export declare const DoneWithMergedPr: Story;
+/** Blocked feature showing blocked-by detail. */
+export declare const Blocked: Story;
+/** Error state showing error message detail. */
+export declare const Error: Story;
+/** Minimal data — only required fields, no optional details or PR. */
+export declare const Minimal: Story;
+/** Requirements phase. */
+export declare const RequirementsPhase: Story;
+/** Research phase. */
+export declare const ResearchPhase: Story;
+/** Review phase. */
+export declare const ReviewPhase: Story;
+/** Maintain phase. */
+export declare const MaintainPhase: Story;
+//# sourceMappingURL=overview-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overview-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/overview-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,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;AA0G1C,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,0BAA0B;AAC1B,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,oBAAoB;AACpB,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

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

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PrStatus, CiStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { OverviewTab } from './overview-tab.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/OverviewTab',
+    component: OverviewTab,
+    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 fullData = {
+    name: 'Auth Module',
+    description: 'Implement OAuth2 authentication flow with multiple providers',
+    featureId: '#f1',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 65,
+    agentType: 'claude-code',
+    runtime: '2h 15m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/auth-module',
+    pr: {
+        url: 'https://github.com/org/repo/pull/42',
+        number: 42,
+        status: PrStatus.Open,
+        ciStatus: CiStatus.Pending,
+        commitHash: 'abc1234567890def',
+    },
+};
+const noPrData = {
+    name: 'Search Index',
+    description: 'Elasticsearch full-text search setup',
+    featureId: '#f4',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 40,
+    agentType: 'claude-code',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/search-index',
+};
+const noProgressData = {
+    name: 'API Rate Limiting',
+    description: 'Implement sliding window rate limiting for public endpoints',
+    featureId: '#bi1',
+    lifecycle: 'requirements',
+    state: 'action-required',
+    progress: 0,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/api-rate-limiting',
+};
+const doneData = {
+    name: 'Payment Gateway',
+    description: 'Stripe integration for subscriptions',
+    featureId: '#f3',
+    lifecycle: 'deploy',
+    state: 'done',
+    progress: 100,
+    runtime: '1h 42m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/payment-gateway',
+    pr: {
+        url: 'https://github.com/org/repo/pull/55',
+        number: 55,
+        status: PrStatus.Merged,
+        ciStatus: CiStatus.Success,
+        commitHash: 'def4567890abc123',
+    },
+};
+const blockedData = {
+    name: 'Email Service',
+    description: 'Transactional email with SendGrid',
+    featureId: '#f5',
+    lifecycle: 'implementation',
+    state: 'blocked',
+    progress: 20,
+    blockedBy: 'Auth Module',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/email-service',
+};
+const errorData = {
+    name: 'Notification System',
+    description: 'Real-time notifications via WebSockets',
+    featureId: '#f6',
+    lifecycle: 'review',
+    state: 'error',
+    progress: 30,
+    errorMessage: 'Build failed: type mismatch in NotificationHandler',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/notifications',
+};
+const minimalData = {
+    name: 'Minimal Feature',
+    featureId: '#f0',
+    lifecycle: 'requirements',
+    state: 'creating',
+    progress: 0,
+    repositoryPath: '/home/user/my-repo',
+    branch: '',
+};
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+/** Default — full data with status, progress, PR card, and details. */
+export const Default = {
+    args: { data: fullData },
+};
+/** Feature with no PR — PR card is hidden. */
+export const NoPr = {
+    args: { data: noPrData },
+};
+/** Feature with 0% progress — progress bar is hidden. */
+export const NoProgress = {
+    args: { data: noProgressData },
+};
+/** Completed feature in deploy phase with merged PR. */
+export const DoneWithMergedPr = {
+    args: { data: doneData },
+};
+/** Blocked feature showing blocked-by detail. */
+export const Blocked = {
+    args: { data: blockedData },
+};
+/** Error state showing error message detail. */
+export const Error = {
+    args: { data: errorData },
+};
+/** Minimal data — only required fields, no optional details or PR. */
+export const Minimal = {
+    args: { data: minimalData },
+};
+/* ---------------------------------------------------------------------------
+ * Lifecycle phase stories
+ * ------------------------------------------------------------------------- */
+/** Requirements phase. */
+export const RequirementsPhase = {
+    args: { data: { ...noPrData, lifecycle: 'requirements' } },
+};
+/** Research phase. */
+export const ResearchPhase = {
+    args: { data: { ...noPrData, lifecycle: 'research' } },
+};
+/** Review phase. */
+export const ReviewPhase = {
+    args: { data: { ...noPrData, lifecycle: 'review' } },
+};
+/** Maintain phase. */
+export const MaintainPhase = {
+    args: { data: { ...noPrData, lifecycle: 'maintain' } },
+};

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

@@ -0,0 +1,8 @@
+import type { PlanData } from '../../../app/actions/get-feature-plan.js';
+export interface PlanTabProps {
+    plan: PlanData | null;
+    loading: boolean;
+    error: string | null;
+}
+export declare function PlanTab({ plan, loading, error }: PlanTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=plan-tab.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, Circle, Check, Eye } from 'lucide-react';
+import { AlertCircle, ListTodo } from 'lucide-react';
+import { Badge } from '../../ui/badge.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" }) }));
+    }
+    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 (!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] })] }));
+}

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlanTab } from './plan-tab.js';
+declare const meta: Meta<typeof PlanTab>;
+export default meta;
+type Story = StoryObj<typeof PlanTab>;
+/** Default — plan with tasks in various states (Todo, WIP, Done, Review). */
+export declare const Default: Story;
+/** All tasks completed. */
+export declare const AllTasksDone: Story;
+/** Draft plan in Requirements state. */
+export declare const DraftPlan: Story;
+/** Plan requiring clarification — ClarificationRequired state badge. */
+export declare const ClarificationRequired: Story;
+/** Plan with overview but no tasks defined yet. */
+export declare const NoTasks: Story;
+/** Loading state — spinner displayed while data is being fetched. */
+export declare const Loading: Story;
+/** Empty state — no plan created yet. */
+export declare const Empty: Story;
+/** Error state — inline error message. */
+export declare const Error: Story;
+//# sourceMappingURL=plan-tab.stories.d.ts.map

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

@@ -0,0 +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"}