@shepai/cli 1.12.0 → 1.14.0

package/dist/eslint.config.mjs

@@ -14,6 +14,8 @@ import prettierConfig from 'eslint-config-prettier';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import nextPlugin from '@next/eslint-plugin-next';
+import tailwindPlugin from 'eslint-plugin-tailwindcss';
+import storybookPlugin from 'eslint-plugin-storybook';
 export default tseslint.config(
 // =============================================================================
 // Global ignores (replaces .eslintignore)
@@ -176,6 +178,7 @@ eslint.configs.recommended,
         react: reactPlugin,
         'react-hooks': reactHooksPlugin,
         '@next/next': nextPlugin,
+        tailwindcss: tailwindPlugin,
     },
     languageOptions: {
         parserOptions: {
@@ -198,6 +201,11 @@ eslint.configs.recommended,
         'react/jsx-key': 'error',
         'react/no-array-index-key': 'warn',
         'react/self-closing-comp': 'warn',
+        'react/jsx-no-useless-fragment': 'warn',
+        'react/jsx-curly-brace-presence': ['warn', { props: 'never', children: 'never' }],
+        'react/hook-use-state': 'warn',
+        'react/jsx-no-leaked-render': 'warn',
+        'react/no-unstable-nested-components': 'error',
         // React Hooks rules
         'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'warn',
@@ -205,6 +213,26 @@ eslint.configs.recommended,
         '@next/next/no-html-link-for-pages': 'error',
         '@next/next/no-img-element': 'warn',
         '@next/next/no-sync-scripts': 'error',
+        // Tailwind CSS rules
+        'tailwindcss/classnames-order': 'warn',
+        'tailwindcss/no-contradicting-classname': 'error',
+        'tailwindcss/no-unnecessary-arbitrary-value': 'warn',
+        'tailwindcss/enforces-shorthand': 'warn',
+    },
+}, 
+// =============================================================================
+// Storybook story files
+// =============================================================================
+{
+    files: ['**/*.stories.@(ts|tsx)'],
+    plugins: {
+        storybook: storybookPlugin,
+    },
+    rules: {
+        'storybook/default-exports': 'error',
+        'storybook/hierarchy-separator': 'error',
+        'storybook/no-uninstalled-addons': 'error',
+        'storybook/prefer-pascal-case': 'warn',
     },
 }, 
 // =============================================================================

package/dist/src/presentation/web/app/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,QAAQ,EAAE,QAItB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GACT,EAAE,QAAQ,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,2CAuBD"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,eAAe,CAAC;AAGvB,eAAO,MAAM,QAAQ,EAAE,QAItB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GACT,EAAE,QAAQ,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,2CAyBD"}

package/dist/src/presentation/web/app/layout.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './globals.css';
+import { AppShell } from '../components/layouts/app-shell';
 export const metadata = {
     title: 'Shep AI',
     description: 'Autonomous AI Native SDLC Platform - Automate the development cycle from idea to deploy',
@@ -17,5 +18,5 @@ export default function RootLayout({ children, }) {
                 } catch (e) {}
               })();
             `,
-                    } }) }), _jsx("body", { className: "min-h-screen antialiased", children: children })] }));
+                    } }) }), _jsx("body", { className: "min-h-screen antialiased", children: _jsx(AppShell, { children: children }) })] }));
 }

package/dist/src/presentation/web/app/page.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
 import { Button } from '../components/ui/button';
 export default function HomePage() {
-    return (_jsx("main", { className: "flex min-h-screen flex-col items-center justify-center p-4", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight", children: "Shep AI" }), _jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: "Autonomous AI Native SDLC Platform" }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "Web UI Component Library" }), _jsx("div", { className: "mt-6", children: _jsx(Button, { asChild: true, variant: "outline", children: _jsx(Link, { href: "/version", children: "View Version" }) }) })] }) }));
+    return (_jsx("div", { className: "flex flex-col items-center justify-center p-4", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight", children: "Shep AI" }), _jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: "Autonomous AI Native SDLC Platform" }), _jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "Web UI Component Library" }), _jsx("div", { className: "mt-6", children: _jsx(Button, { asChild: true, variant: "outline", children: _jsx(Link, { href: "/version", children: "View Version" }) }) })] }) }));
 }

package/dist/src/presentation/web/app/version/page.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getVersionInfo, getSystemInfo } from '../../lib/version';
-import VersionPageClient from './version-page-client';
+import VersionPageClient from '../../components/features/version/version-page-client';
 export default function VersionPage() {
     const versionInfo = getVersionInfo();
     const systemInfo = getSystemInfo();

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.d.ts

@@ -0,0 +1,7 @@
+interface ElapsedTimeProps {
+    startedAt: number;
+}
+export declare function formatElapsed(elapsedMs: number): string;
+export declare function ElapsedTime({ startedAt }: ElapsedTimeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=elapsed-time.d.ts.map

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elapsed-time.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/elapsed-time/elapsed-time.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAWvD;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAgB1D"}

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, startTransition } from 'react';
+export function formatElapsed(elapsedMs) {
+    const totalSeconds = Math.floor(elapsedMs / 1000);
+    if (totalSeconds >= 3600) {
+        const hours = Math.floor(totalSeconds / 3600);
+        return `${hours}h`;
+    }
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+export function ElapsedTime({ startedAt }) {
+    const [elapsed, setElapsed] = useState(() => Date.now() - startedAt);
+    useEffect(() => {
+        const id = setInterval(() => {
+            startTransition(() => setElapsed(Date.now() - startedAt));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [startedAt]);
+    return (_jsx("span", { "data-testid": "elapsed-time", className: "tabular-nums", children: formatElapsed(elapsed) }));
+}

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ElapsedTime } from './elapsed-time';
+declare const meta: Meta<typeof ElapsedTime>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const JustStarted: Story;
+export declare const FiveMinutes: Story;
+export declare const ThirtyMinutes: Story;
+export declare const TwoHours: Story;
+//# sourceMappingURL=elapsed-time.stories.d.ts.map

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elapsed-time.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/elapsed-time/elapsed-time.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAI3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/src/presentation/web/components/common/elapsed-time/elapsed-time.stories.js

@@ -0,0 +1,30 @@
+import { ElapsedTime } from './elapsed-time';
+const meta = {
+    title: 'Composed/ElapsedTime',
+    component: ElapsedTime,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const JustStarted = {
+    args: {
+        startedAt: Date.now(),
+    },
+};
+export const FiveMinutes = {
+    args: {
+        startedAt: Date.now() - 5 * 60 * 1000,
+    },
+};
+export const ThirtyMinutes = {
+    args: {
+        startedAt: Date.now() - 30 * 60 * 1000,
+    },
+};
+export const TwoHours = {
+    args: {
+        startedAt: Date.now() - 2 * 60 * 60 * 1000,
+    },
+};

package/dist/src/presentation/web/components/common/elapsed-time/index.d.ts

@@ -0,0 +1,2 @@
+export { ElapsedTime, formatElapsed } from './elapsed-time';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/elapsed-time/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/elapsed-time/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/presentation/web/components/common/elapsed-time/index.js

@@ -0,0 +1 @@
+export { ElapsedTime, formatElapsed } from './elapsed-time';

package/dist/src/presentation/web/components/common/empty-state/empty-state.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+}
+export declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/src/presentation/web/components/common/empty-state/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAYjB"}

package/dist/src/presentation/web/components/common/empty-state/empty-state.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils';
+export function EmptyState({ icon, title, description, action, className, ...props }) {
+    return (_jsxs("div", { className: cn('flex flex-col items-center gap-4 px-4 py-12 text-center', className), ...props, children: [icon ? _jsx("div", { className: "text-muted-foreground", children: icon }) : null, _jsx("h3", { className: "text-lg font-semibold", children: title }), description ? _jsx("p", { className: "text-muted-foreground max-w-md text-sm", children: description }) : null, action ? _jsx("div", { className: "mt-2", children: action }) : null] }));
+}

package/dist/src/presentation/web/components/common/empty-state/empty-state.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EmptyState } from './empty-state';
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const WithDescription: Story;
+export declare const WithAction: Story;
+export declare const FullExample: Story;
+//# sourceMappingURL=empty-state.stories.d.ts.map

package/dist/src/presentation/web/components/common/empty-state/empty-state.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/empty-state/empty-state.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC"}

package/dist/src/presentation/web/components/common/empty-state/empty-state.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox, FileQuestion, Plus } from 'lucide-react';
+import { EmptyState } from './empty-state';
+import { Button } from '../../ui/button';
+const meta = {
+    title: 'Composed/EmptyState',
+    component: EmptyState,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'No items found',
+    },
+};
+export const WithIcon = {
+    args: {
+        icon: _jsx(Inbox, { className: "h-12 w-12" }),
+        title: 'Your inbox is empty',
+    },
+};
+export const WithDescription = {
+    args: {
+        title: 'No results',
+        description: 'Try adjusting your search or filter to find what you are looking for.',
+    },
+};
+export const WithAction = {
+    args: {
+        title: 'No projects yet',
+        description: 'Get started by creating your first project.',
+        action: (_jsxs(Button, { children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Create Project"] })),
+    },
+};
+export const FullExample = {
+    args: {
+        icon: _jsx(FileQuestion, { className: "h-12 w-12" }),
+        title: 'No features found',
+        description: 'It looks like you have not created any features yet. Start by creating a new feature to track your development workflow.',
+        action: (_jsxs(Button, { children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] })),
+    },
+};

package/dist/src/presentation/web/components/common/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState, type EmptyStateProps } from './empty-state';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/empty-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/presentation/web/components/common/empty-state/index.js

@@ -0,0 +1 @@
+export { EmptyState } from './empty-state';

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.d.ts

@@ -0,0 +1,10 @@
+import type { FeatureStatus } from '../../common/feature-status-config';
+export interface FeatureListItemProps {
+    name: string;
+    status: FeatureStatus;
+    startedAt?: number;
+    duration?: string;
+    onClick?: () => void;
+}
+export declare function FeatureListItem({ name, status, startedAt, duration, onClick, }: FeatureListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-list-item.d.ts.map

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-list-item.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-list-item/feature-list-item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,oBAAoB,2CA2BtB"}

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarMenuItem, SidebarMenuButton } from '../../ui/sidebar';
+import { ElapsedTime } from '../../common/elapsed-time';
+import { featureStatusConfig } from '../../common/feature-status-config';
+export function FeatureListItem({ name, status, startedAt, duration, onClick, }) {
+    const { icon: StatusIcon, iconClass } = featureStatusConfig[status];
+    return (_jsx(SidebarMenuItem, { "data-testid": "feature-list-item", children: _jsxs(SidebarMenuButton, { size: "sm", onClick: onClick, tooltip: name, className: "cursor-pointer", children: [_jsx(StatusIcon, { className: iconClass }), _jsx("span", { className: "flex-1 truncate font-medium", children: name }), status === 'in-progress' && startedAt != null ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: _jsx(ElapsedTime, { startedAt: startedAt }) })) : null, status === 'done' && duration ? (_jsx("span", { "data-testid": "feature-list-item-meta", className: "text-muted-foreground ml-auto text-xs tabular-nums", children: duration })) : null] }) }));
+}

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureListItem } from './feature-list-item';
+declare const meta: Meta<typeof FeatureListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ActionNeeded: Story;
+export declare const InProgress: Story;
+export declare const Done: Story;
+export declare const WithClickHandler: Story;
+//# sourceMappingURL=feature-list-item.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-list-item.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-list-item/feature-list-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAgBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidebarProvider, SidebarMenu } from '../../ui/sidebar';
+import { FeatureListItem } from './feature-list-item';
+const meta = {
+    title: 'Composed/FeatureListItem',
+    component: FeatureListItem,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx(SidebarProvider, { children: _jsx(SidebarMenu, { children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const ActionNeeded = {
+    args: {
+        name: 'Auth Module',
+        status: 'action-needed',
+    },
+};
+export const InProgress = {
+    args: {
+        name: 'Payment Integration',
+        status: 'in-progress',
+        startedAt: Date.now() - 330_000,
+    },
+};
+export const Done = {
+    args: {
+        name: 'User Dashboard',
+        status: 'done',
+        duration: '2h',
+    },
+};
+export const WithClickHandler = {
+    args: {
+        name: 'API Gateway',
+        status: 'action-needed',
+        onClick: () => alert('Clicked!'),
+    },
+};

package/dist/src/presentation/web/components/common/feature-list-item/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureListItem } from './feature-list-item';
+export type { FeatureListItemProps } from './feature-list-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/feature-list-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/presentation/web/components/common/feature-list-item/index.js

@@ -0,0 +1 @@
+export { FeatureListItem } from './feature-list-item';

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.d.ts

@@ -0,0 +1,8 @@
+import { type FeatureStatus } from '../../common/feature-status-config';
+export interface FeatureStatusBadgesProps {
+    /** Count of features per status. */
+    counts: Record<FeatureStatus, number>;
+    className?: string;
+}
+export declare function FeatureStatusBadges({ counts, className }: FeatureStatusBadgesProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=feature-status-badges.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-status-badges.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-badges/feature-status-badges.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,kDAkClF"}

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+import { cn } from '../../../lib/utils';
+import { featureStatusConfig, featureStatusOrder, } from '../../common/feature-status-config';
+export function FeatureStatusBadges({ counts, className }) {
+    const visibleStatuses = featureStatusOrder.filter((s) => counts[s] > 0);
+    if (visibleStatuses.length === 0)
+        return null;
+    return (_jsx("div", { "data-testid": "feature-status-badges", className: cn('flex flex-col items-center gap-1.5 py-1', className), children: visibleStatuses.map((status) => {
+            const { icon: Icon, iconClass, bgClass, label } = featureStatusConfig[status];
+            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { "data-testid": `feature-status-badge-${status}`, className: cn('flex size-8 items-center justify-center gap-0.5 rounded-md', bgClass), children: [_jsx(Icon, { className: cn('size-3.5 shrink-0', iconClass) }), _jsx("span", { className: "text-[0.6rem] font-semibold tabular-nums", children: counts[status] })] }) }), _jsxs(TooltipContent, { side: "right", children: [label, ": ", counts[status]] })] }, status));
+        }) }));
+}

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureStatusBadges } from './feature-status-badges';
+declare const meta: Meta<typeof FeatureStatusBadges>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllStatuses: Story;
+export declare const ActionNeededOnly: Story;
+export declare const InProgressOnly: Story;
+export declare const DoneOnly: Story;
+export declare const LargeCounts: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=feature-status-badges.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-status-badges.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-badges/feature-status-badges.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAgB1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC"}

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidebarProvider } from '../../ui/sidebar';
+import { FeatureStatusBadges } from './feature-status-badges';
+const meta = {
+    title: 'Composed/FeatureStatusBadges',
+    component: FeatureStatusBadges,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx(SidebarProvider, { defaultOpen: false, children: _jsx("div", { className: "bg-sidebar flex w-12 justify-center rounded-md p-2", children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const AllStatuses = {
+    args: {
+        counts: { 'action-needed': 2, 'in-progress': 3, done: 5 },
+    },
+};
+export const ActionNeededOnly = {
+    args: {
+        counts: { 'action-needed': 4, 'in-progress': 0, done: 0 },
+    },
+};
+export const InProgressOnly = {
+    args: {
+        counts: { 'action-needed': 0, 'in-progress': 2, done: 0 },
+    },
+};
+export const DoneOnly = {
+    args: {
+        counts: { 'action-needed': 0, 'in-progress': 0, done: 7 },
+    },
+};
+export const LargeCounts = {
+    args: {
+        counts: { 'action-needed': 12, 'in-progress': 99, done: 150 },
+    },
+};
+export const Empty = {
+    args: {
+        counts: { 'action-needed': 0, 'in-progress': 0, done: 0 },
+    },
+};

package/dist/src/presentation/web/components/common/feature-status-badges/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureStatusBadges } from './feature-status-badges';
+export type { FeatureStatusBadgesProps } from './feature-status-badges';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-badges/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-badges/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/src/presentation/web/components/common/feature-status-badges/index.js

@@ -0,0 +1 @@
+export { FeatureStatusBadges } from './feature-status-badges';

package/dist/src/presentation/web/components/common/feature-status-config.d.ts

@@ -0,0 +1,11 @@
+import type { LucideIcon } from 'lucide-react';
+export type FeatureStatus = 'action-needed' | 'in-progress' | 'done';
+export interface FeatureStatusConfig {
+    icon: LucideIcon;
+    iconClass: string;
+    bgClass: string;
+    label: string;
+}
+export declare const featureStatusConfig: Record<FeatureStatus, FeatureStatusConfig>;
+export declare const featureStatusOrder: FeatureStatus[];
+//# sourceMappingURL=feature-status-config.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-status-config.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/feature-status-config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,MAAM,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAmB1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAA6C,CAAC"}

package/dist/src/presentation/web/components/common/feature-status-config.js

@@ -0,0 +1,22 @@
+import { CircleAlert, Loader2, CircleCheck } from 'lucide-react';
+export const featureStatusConfig = {
+    'action-needed': {
+        icon: CircleAlert,
+        iconClass: 'text-amber-500',
+        bgClass: 'bg-amber-500/10',
+        label: 'Action Needed',
+    },
+    'in-progress': {
+        icon: Loader2,
+        iconClass: 'text-blue-500 animate-spin',
+        bgClass: 'bg-blue-500/10',
+        label: 'In Progress',
+    },
+    done: {
+        icon: CircleCheck,
+        iconClass: 'text-emerald-500',
+        bgClass: 'bg-emerald-500/10',
+        label: 'Done',
+    },
+};
+export const featureStatusOrder = ['action-needed', 'in-progress', 'done'];

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface FeatureStatusGroupProps {
+    label: string;
+    count: number;
+    children: ReactNode;
+}
+export declare function FeatureStatusGroup({ label, count, children }: FeatureStatusGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-status-group.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-status-group.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-group/feature-status-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAkBrF"}

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, } from '../../ui/sidebar';
+export function FeatureStatusGroup({ label, count, children }) {
+    return (_jsxs(SidebarGroup, { "data-testid": "feature-status-group", className: "px-2 py-1", children: [_jsxs(SidebarGroupLabel, { className: "text-muted-foreground h-6 px-2 text-[0.65rem] font-semibold tracking-wider uppercase", children: [label, _jsx("span", { "aria-label": `${count} items`, className: "bg-sidebar-accent text-sidebar-accent-foreground ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.6rem] font-medium tabular-nums", role: "img", children: count })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { className: "gap-0.5", children: children }) })] }));
+}

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureStatusGroup } from './feature-status-group';
+declare const meta: Meta<typeof FeatureStatusGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InProgress: Story;
+export declare const Done: Story;
+export declare const ActionNeeded: Story;
+//# sourceMappingURL=feature-status-group.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-status-group.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-group/feature-status-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAgBzC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAYlB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC"}

package/dist/src/presentation/web/components/common/feature-status-group/feature-status-group.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarProvider } from '../../ui/sidebar';
+import { FeatureListItem } from '../../common/feature-list-item';
+import { FeatureStatusGroup } from './feature-status-group';
+const meta = {
+    title: 'Composed/FeatureStatusGroup',
+    component: FeatureStatusGroup,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx(SidebarProvider, { children: _jsx("div", { className: "w-64", children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+export const InProgress = {
+    args: {
+        label: 'In Progress',
+        count: 2,
+        children: (_jsxs(_Fragment, { children: [_jsx(FeatureListItem, { name: "Dashboard", status: "in-progress", startedAt: Date.now() - 330_000 }), _jsx(FeatureListItem, { name: "API Gateway", status: "in-progress", startedAt: Date.now() - 60_000 })] })),
+    },
+};
+export const Done = {
+    args: {
+        label: 'Done',
+        count: 3,
+        children: (_jsxs(_Fragment, { children: [_jsx(FeatureListItem, { name: "Settings Page", status: "done", duration: "2h" }), _jsx(FeatureListItem, { name: "User Profile", status: "done", duration: "1h" }), _jsx(FeatureListItem, { name: "Auth Module", status: "done", duration: "30m" })] })),
+    },
+};
+export const ActionNeeded = {
+    args: {
+        label: 'Action Needed',
+        count: 2,
+        children: (_jsxs(_Fragment, { children: [_jsx(FeatureListItem, { name: "Auth Module", status: "action-needed" }), _jsx(FeatureListItem, { name: "Payment Flow", status: "action-needed" })] })),
+    },
+};

package/dist/src/presentation/web/components/common/feature-status-group/index.d.ts

@@ -0,0 +1,3 @@
+export { FeatureStatusGroup } from './feature-status-group';
+export type { FeatureStatusGroupProps } from './feature-status-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/feature-status-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-status-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}