@shepai/cli 1.78.1 → 1.79.0

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

@@ -0,0 +1,315 @@
+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: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 65,
+    agentType: 'claude-code',
+    runtime: '2h 15m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/auth-module',
+    oneLiner: 'implement oauth2 authentication flow with google and github providers',
+    userQuery: 'add oauth2 authentication with google and github',
+    summary: 'Implement OAuth2 authentication flow with multiple providers including Google, GitHub, and custom OIDC',
+    createdAt: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
+    repositoryName: 'my-repo',
+    baseBranch: 'main',
+    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: 'b2c3d4e5-f6a7-8901-bcde-f23456789012',
+    lifecycle: 'deploy',
+    state: 'done',
+    progress: 100,
+    runtime: '1h 42m',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/payment-gateway',
+    oneLiner: 'stripe payment gateway integration for subscriptions and one-time purchases',
+    userQuery: 'integrate stripe for payments',
+    summary: 'Stripe integration for subscriptions and one-time payments',
+    createdAt: Date.now() - 3 * 24 * 60 * 60 * 1000, // 3 days ago
+    repositoryName: 'my-repo',
+    baseBranch: 'main',
+    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: 'c3d4e5f6-a7b8-9012-cdef-345678901234',
+    lifecycle: 'requirements',
+    state: 'action-required',
+    progress: 0,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/api-rate-limiting',
+    oneLiner: 'sliding window rate limiter for all public-facing api endpoints',
+    userQuery: 'add rate limiting to public api endpoints',
+    summary: 'Implement sliding window rate limiting for public endpoints',
+    createdAt: Date.now() - 30 * 60 * 1000, // 30 minutes ago
+    repositoryName: 'my-repo',
+    baseBranch: 'main',
+};
+const techReviewFeature = {
+    name: 'Agent Executor',
+    description: 'Abstraction layer for multiple AI agent backends',
+    featureId: 'd4e5f6a7-b8c9-0123-defa-456789012345',
+    lifecycle: 'implementation',
+    state: 'action-required',
+    progress: 25,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/agent-executor',
+    oneLiner: 'agent executor abstraction layer supporting multiple ai backends',
+    userQuery: 'abstract agent executors for multi-backend support',
+    summary: 'Abstraction layer for multiple AI agent backends',
+    createdAt: Date.now() - 5 * 60 * 60 * 1000, // 5 hours ago
+    repositoryName: 'my-repo',
+    baseBranch: 'develop',
+};
+const mergeReviewFeature = {
+    name: 'Auth Module',
+    description: 'OAuth2 authentication flow',
+    featureId: 'e5f6a7b8-c9d0-1234-efab-567890123456',
+    lifecycle: 'review',
+    state: 'action-required',
+    progress: 90,
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/auth-module',
+    oneLiner: 'oauth2 login flow with google and github identity providers',
+    userQuery: 'add oauth2 login flow',
+    summary: 'OAuth2 authentication flow with Google and GitHub providers',
+    createdAt: Date.now() - 2 * 24 * 60 * 60 * 1000, // 2 days ago
+    repositoryName: 'my-repo',
+    baseBranch: 'main',
+    pr: {
+        url: 'https://github.com/shep-ai/cli/pull/42',
+        number: 42,
+        status: PrStatus.Open,
+        ciStatus: CiStatus.Success,
+        commitHash: 'a1b2c3d4e5f6789',
+    },
+};
+const errorFeature = {
+    name: 'Email Service',
+    description: 'Transactional email with SendGrid',
+    featureId: 'f6a7b8c9-d0e1-2345-fabc-678901234567',
+    lifecycle: 'review',
+    state: 'error',
+    progress: 30,
+    errorMessage: 'Build failed: type mismatch in EmailHandler',
+    repositoryPath: '/home/user/my-repo',
+    branch: 'feat/email-service',
+    oneLiner: 'sendgrid-based transactional email service for notifications and alerts',
+    userQuery: 'set up sendgrid for transactional emails',
+    summary: 'Transactional email with SendGrid for notifications and alerts',
+    createdAt: Date.now() - 7 * 24 * 60 * 60 * 1000, // 1 week ago
+    repositoryName: 'my-repo',
+    baseBranch: 'main',
+};
+/* ---------------------------------------------------------------------------
+ * Review data fixtures
+ * ------------------------------------------------------------------------- */
+const prdFixture = {
+    question: 'Review Feature Requirements',
+    context: 'Please review the AI-generated requirements below.',
+    questions: [
+        {
+            id: 'problem',
+            question: 'What specific problem does this feature solve?',
+            type: 'select',
+            options: [
+                {
+                    id: 'user_pain',
+                    label: 'User Pain Point',
+                    rationale: 'Addresses a recurring user complaint',
+                    recommended: true,
+                },
+                { id: 'market_gap', label: 'Market Gap', rationale: 'Fills a gap vs competitors' },
+                {
+                    id: 'tech_debt',
+                    label: 'Technical Debt',
+                    rationale: 'Reduces accumulated technical debt',
+                },
+            ],
+        },
+        {
+            id: 'priority',
+            question: 'What is the business priority level?',
+            type: 'select',
+            options: [
+                { id: 'p0', label: 'P0 - Critical', rationale: 'Blocking issue, must fix immediately' },
+                {
+                    id: 'p1',
+                    label: 'P1 - High',
+                    rationale: 'Important for next release',
+                    recommended: true,
+                },
+                { id: 'p2', label: 'P2 - Medium', rationale: 'Nice to have' },
+            ],
+        },
+    ],
+    finalAction: {
+        id: 'approve-reqs',
+        label: 'Approve Requirements',
+        description: 'Finalize and lock the requirements for implementation',
+    },
+};
+const techFixture = {
+    name: 'Agent Executor Abstraction',
+    summary: 'Research into the best approach for abstracting agent executors.',
+    technologies: ['TypeScript', 'tsyringe', 'LangGraph'],
+    decisions: [
+        {
+            title: 'Agent Execution Framework',
+            chosen: 'LangGraph',
+            rejected: ['Custom state machine', 'Temporal.io'],
+            rationale: 'LangGraph provides built-in checkpointing and human-in-the-loop support.',
+        },
+        {
+            title: 'Dependency Injection',
+            chosen: 'tsyringe',
+            rejected: ['InversifyJS', 'Manual DI'],
+            rationale: 'Lightweight, uses standard decorators, minimal overhead.',
+        },
+    ],
+};
+const productFixture = {
+    question: 'Goal',
+    context: 'Add user authentication to the application',
+    questions: [
+        {
+            question: 'Which authentication strategy should we use?',
+            selectedOption: 'OAuth 2.0',
+            rationale: 'Industry standard with broad provider support.',
+            wasRecommended: true,
+        },
+        {
+            question: 'How should we handle session management?',
+            selectedOption: 'JWT tokens',
+            rationale: 'Stateless and scalable across services.',
+            wasRecommended: false,
+        },
+    ],
+};
+const mergeFixture = {
+    pr: {
+        url: 'https://github.com/shep-ai/cli/pull/42',
+        number: 42,
+        status: PrStatus.Open,
+        commitHash: 'a1b2c3d4e5f6789',
+        ciStatus: CiStatus.Success,
+    },
+    branch: { source: 'feat/add-auth', target: 'main' },
+    phases: [
+        { id: 'phase-1', name: 'Foundation & Config', description: 'Set up types and server action' },
+        { id: 'phase-2', name: 'Component Implementation', description: 'Build the merge review UI' },
+    ],
+    diffSummary: { filesChanged: 12, additions: 340, deletions: 85, commitCount: 5 },
+};
+/* ---------------------------------------------------------------------------
+ * 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 and Plan tabs show error states from the mocked actions.
+ * The Log tab shows empty/disconnected state (no EventSource in Storybook).
+ * See individual tab stories (ActivityTab, LogTab, PlanTab) for populated states.
+ * ------------------------------------------------------------------------- */
+/** Default — running feature with full data. Overview tab active. */
+export const Default = {
+    args: {
+        featureNode: runningFeature,
+        featureId: runningFeature.featureId,
+    },
+};
+/** Completed feature in deploy phase with merged PR. */
+export const CompletedFeature = {
+    args: {
+        featureNode: doneFeature,
+        featureId: doneFeature.featureId,
+    },
+};
+/** Early-stage feature in requirements phase, no progress. */
+export const RequirementsPhase = {
+    args: {
+        featureNode: requirementsFeature,
+        featureId: requirementsFeature.featureId,
+    },
+};
+/** Feature in error state. */
+export const ErrorState = {
+    args: {
+        featureNode: errorFeature,
+        featureId: errorFeature.featureId,
+    },
+};
+/* ---------------------------------------------------------------------------
+ * Review tab stories
+ * ------------------------------------------------------------------------- */
+/** PRD Review tab active — requirements lifecycle, action-required state. */
+export const PrdReviewActive = {
+    args: {
+        featureNode: requirementsFeature,
+        featureId: requirementsFeature.featureId,
+        initialTab: 'prd-review',
+        prdData: prdFixture,
+        prdSelections: { problem: 'user_pain', priority: 'p1' },
+        onPrdSelect: () => undefined,
+        onPrdApprove: () => undefined,
+        onPrdReject: () => undefined,
+    },
+};
+/** Tech Decisions tab active — implementation lifecycle, action-required state. */
+export const TechReviewActive = {
+    args: {
+        featureNode: techReviewFeature,
+        featureId: techReviewFeature.featureId,
+        initialTab: 'tech-decisions',
+        techData: techFixture,
+        productData: productFixture,
+        onTechApprove: () => undefined,
+        onTechReject: () => undefined,
+    },
+};
+/** Merge Review tab active — review lifecycle, action-required state. */
+export const MergeReviewActive = {
+    args: {
+        featureNode: mergeReviewFeature,
+        featureId: mergeReviewFeature.featureId,
+        initialTab: 'merge-review',
+        mergeData: mergeFixture,
+        onMergeApprove: () => undefined,
+        onMergeReject: () => undefined,
+    },
+};

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/log-tab.d.ts

@@ -0,0 +1,7 @@
+export interface LogTabProps {
+    content: string;
+    isConnected: boolean;
+    error: string | null;
+}
+export declare function LogTab({ content, isConnected, error }: LogTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=log-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"log-tab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,WAAW,2CA6ElE"}

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

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { AlertCircle, Terminal, ArrowDown } from 'lucide-react';
+export function LogTab({ content, isConnected, error }) {
+    const containerRef = useRef(null);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+        setAutoScroll(isAtBottom);
+    }, []);
+    const jumpToBottom = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+        setAutoScroll(true);
+    }, []);
+    // Auto-scroll when new content arrives (only if auto-scroll is active)
+    useEffect(() => {
+        if (autoScroll && containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+    }, [content, autoScroll]);
+    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 (!content) {
+        return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-8", children: [_jsx(Terminal, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "No log output yet" }), isConnected ? (_jsx("p", { className: "text-muted-foreground text-xs", children: "Waiting for log data..." })) : null] }));
+    }
+    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "log-tab", children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-3 py-1.5", children: [_jsx("span", { className: `h-2 w-2 rounded-full ${isConnected ? 'bg-emerald-500' : 'bg-zinc-400'}` }), _jsx("span", { className: "text-muted-foreground text-xs", children: isConnected ? 'Live' : 'Disconnected' }), !autoScroll ? (_jsxs("button", { type: "button", onClick: jumpToBottom, className: "text-muted-foreground hover:text-foreground ml-auto flex items-center gap-1 text-xs", children: [_jsx(ArrowDown, { className: "h-3 w-3" }), "Jump to bottom"] })) : null] }), _jsx("div", { ref: containerRef, onScroll: handleScroll, className: "flex-1 overflow-y-auto bg-zinc-950 p-3 font-mono text-xs leading-relaxed break-all whitespace-pre-wrap text-zinc-300", children: content })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogTab } from './log-tab.js';
+declare const meta: Meta<typeof LogTab>;
+export default meta;
+type Story = StoryObj<typeof LogTab>;
+/** Default — typical agent log output with live connection. */
+export declare const Default: Story;
+/** LongLog — 200 lines of log output to test scrolling behavior. */
+export declare const LongLog: Story;
+/** Disconnected — log content present but connection is lost. */
+export declare const Disconnected: Story;
+/** Empty — no log content yet, connected and waiting. */
+export declare const Empty: Story;
+/** EmptyDisconnected — no log content and not connected. */
+export declare const EmptyDisconnected: Story;
+/** Error — error message displayed when connection fails. */
+export declare const Error: Story;
+//# sourceMappingURL=log-tab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"log-tab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer-tabs/log-tab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAqCrC,+DAA+D;AAC/D,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC"}

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogTab } from './log-tab.js';
+const meta = {
+    title: 'Drawers/Feature/Tabs/LogTab',
+    component: LogTab,
+    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 typicalLogContent = `[2026-03-08T10:00:01.123Z] Starting agent run for feature "auth-module"
+[2026-03-08T10:00:02.789Z] Agent started — analyzing codebase
+[2026-03-08T10:00:03.456Z] Scanning repository structure...
+[2026-03-08T10:00:04.012Z] Found 127 source files across 14 packages
+[2026-03-08T10:00:05.234Z] Identified entry points: src/index.ts, src/auth/providers.ts
+[2026-03-08T10:00:06.890Z] Running dependency analysis...
+[2026-03-08T10:00:08.345Z] Resolved 42 internal dependencies
+[2026-03-08T10:00:09.567Z] Generating implementation plan...
+[2026-03-08T10:00:11.123Z] Plan generated — 3 phases, 8 tasks
+[2026-03-08T10:00:12.789Z] Phase 1: scaffold auth module structure
+[2026-03-08T10:00:14.456Z] Creating src/auth/oauth-provider.ts
+[2026-03-08T10:00:15.012Z] Creating src/auth/token-manager.ts
+[2026-03-08T10:00:16.234Z] Phase 1 complete — 2 files created
+[2026-03-08T10:00:17.890Z] Phase 2: implement OAuth2 flow
+[2026-03-08T10:00:19.345Z] Writing Google OAuth provider...
+[2026-03-08T10:00:21.567Z] Writing GitHub OAuth provider...
+[2026-03-08T10:00:23.123Z] Phase 2 complete — providers implemented
+[2026-03-08T10:00:24.789Z] Phase 3: add tests and documentation
+[2026-03-08T10:00:26.456Z] Generating test suite...
+[2026-03-08T10:00:28.012Z] All phases complete — feature "auth-module" ready for review`;
+const longLogContent = Array.from({ length: 200 }, (_, i) => `[2026-03-08T10:${String(Math.floor(i / 60)).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}.${String((i * 7) % 1000).padStart(3, '0')}Z] Step ${i + 1}: processing task batch ${Math.floor(i / 10) + 1} — file ${i + 1} of 200`).join('\n');
+/* ---------------------------------------------------------------------------
+ * Stories
+ * ------------------------------------------------------------------------- */
+/** Default — typical agent log output with live connection. */
+export const Default = {
+    args: {
+        content: typicalLogContent,
+        isConnected: true,
+        error: null,
+    },
+};
+/** LongLog — 200 lines of log output to test scrolling behavior. */
+export const LongLog = {
+    args: {
+        content: longLogContent,
+        isConnected: true,
+        error: null,
+    },
+};
+/** Disconnected — log content present but connection is lost. */
+export const Disconnected = {
+    args: {
+        content: typicalLogContent,
+        isConnected: false,
+        error: null,
+    },
+};
+/** Empty — no log content yet, connected and waiting. */
+export const Empty = {
+    args: {
+        content: '',
+        isConnected: true,
+        error: null,
+    },
+};
+/** EmptyDisconnected — no log content and not connected. */
+export const EmptyDisconnected = {
+    args: {
+        content: '',
+        isConnected: false,
+        error: null,
+    },
+};
+/** Error — error message displayed when connection fails. */
+export const Error = {
+    args: {
+        content: '',
+        isConnected: false,
+        error: 'WebSocket connection lost. Unable to stream agent logs.',
+    },
+};

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;AAMxE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAoCrD"}

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

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExternalLink, GitBranch, 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';
+import { getAgentTypeIcon, agentTypeLabels, } from '../../common/feature-node/agent-type-icons.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] }), _jsx(FeatureInfo, { data: data }), 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 })] }));
+}
+// ── Feature Info section ─────────────────────────────────────────────
+function formatRelativeTime(timestamp) {
+    const now = Date.now();
+    const time = typeof timestamp === 'string' ? new Date(timestamp).getTime() : timestamp;
+    const diffMs = now - time;
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHr = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay > 30) {
+        return new Date(time).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    if (diffDay > 0)
+        return `${diffDay} day${diffDay === 1 ? '' : 's'} ago`;
+    if (diffHr > 0)
+        return `${diffHr} hour${diffHr === 1 ? '' : 's'} ago`;
+    if (diffMin > 0)
+        return `${diffMin} minute${diffMin === 1 ? '' : 's'} ago`;
+    return 'just now';
+}
+function FeatureInfo({ data }) {
+    const repoName = data.repositoryName ?? data.repositoryPath.split('/').filter(Boolean).at(-1) ?? '';
+    const hasInfo = Boolean(repoName) ||
+        Boolean(data.branch) ||
+        Boolean(data.summary) ||
+        Boolean(data.userQuery) ||
+        Boolean(data.createdAt);
+    if (!hasInfo)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-info", className: "flex flex-col gap-3 p-4", children: [repoName ? _jsx(DetailRow, { label: "Repository", value: repoName }) : null, data.branch ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Branch" }), _jsxs("span", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("code", { className: "bg-muted rounded px-1 py-0.5 font-mono text-xs", children: data.branch }), data.baseBranch ? (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["from ", data.baseBranch] })) : null] })] })) : null, data.userQuery ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "User Query" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.userQuery })] })) : null, data.summary ? (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Summary" }), _jsx("span", { className: "text-sm leading-relaxed", children: data.summary })] })) : null, data.createdAt ? (_jsx(DetailRow, { label: "Created", value: formatRelativeTime(data.createdAt) })) : null] })] }));
+}
+// ── PR Info section ──────────────────────────────────────────────────
+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] }) }));
+}
+// ── Details section ──────────────────────────────────────────────────
+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(AgentDetailRow, { agentType: 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 AgentDetailRow({ agentType }) {
+    const Icon = getAgentTypeIcon(agentType);
+    const label = agentTypeLabels[agentType] ?? agentType;
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Agent" }), _jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0" }), label] })] }));
+}
+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"}