@shepai/cli 1.20.1 → 1.22.0

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { ReactFlow, Background, Controls, ReactFlowProvider } from '@xyflow/react';
+import { Plus } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { EmptyState } from '../../common/empty-state/index.js';
+import { FeatureNode } from '../../common/feature-node/index.js';
+import { RepositoryNode } from '../../common/repository-node/index.js';
+import { AddRepositoryNode } from '../../common/add-repository-node/index.js';
+export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositorySelect, toolbar, emptyState, }) {
+    const nodeTypes = useMemo(() => ({
+        featureNode: FeatureNode,
+        repositoryNode: RepositoryNode,
+        addRepositoryNode: AddRepositoryNode,
+    }), []);
+    // Prevent a feature from having more than one source repository
+    const isValidConnection = useCallback((connection) => {
+        const sourceNode = nodes.find((n) => n.id === connection.source);
+        if (sourceNode?.type !== 'repositoryNode')
+            return true;
+        const targetAlreadyHasRepo = edges.some((e) => {
+            const edgeSourceNode = nodes.find((n) => n.id === e.source);
+            return edgeSourceNode?.type === 'repositoryNode' && e.target === connection.target;
+        });
+        return !targetAlreadyHasRepo;
+    }, [nodes, edges]);
+    const enrichedNodes = useMemo(() => nodes.map((node) => ({
+        ...node,
+        data: {
+            ...node.data,
+            showHandles: edges.length > 0,
+            ...(node.type === 'featureNode' && {
+                onAction: onNodeAction ? () => onNodeAction(node.id) : undefined,
+                onSettings: onNodeSettings ? () => onNodeSettings(node.id) : undefined,
+            }),
+            ...(node.type === 'repositoryNode' && {
+                onAdd: onRepositoryAdd ? () => onRepositoryAdd(node.id) : undefined,
+            }),
+            ...(node.type === 'addRepositoryNode' && {
+                onSelect: onRepositorySelect ? (path) => onRepositorySelect(path) : undefined,
+            }),
+        },
+    })), [nodes, edges.length, onNodeAction, onNodeSettings, onRepositoryAdd, onRepositorySelect]);
+    if (nodes.length === 0) {
+        if (emptyState) {
+            return (_jsx("div", { "data-testid": "features-canvas-empty", className: "h-full w-full", children: emptyState }));
+        }
+        return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
+    }
+    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
+}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeaturesCanvas } from './features-canvas.js';
+declare const meta: Meta<typeof FeaturesCanvas>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const SingleNode: Story;
+export declare const MultipleNodes: Story;
+export declare const ConnectedNodes: Story;
+export declare const Interactive: Story;
+export declare const ConnectedRepositoryMultipleFeatures: Story;
+export declare const ConnectedRepositorySingleFeature: Story;
+export declare const SingleRepositoryMultipleFeatures: Story;
+export declare const MultipleRepositories: Story;
+export declare const MultipleRepositoriesMixedConnections: Story;
+export declare const InteractiveWithRepository: Story;
+//# sourceMappingURL=features-canvas.stories.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoJnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAwDF,eAAO,MAAM,mCAAmC,EAAE,KAOjD,CAAC;AAgCF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAW9C,CAAC;AAmDF,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAmGF,eAAO,MAAM,oCAAoC,EAAE,KAOlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.js

@@ -0,0 +1,520 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FeaturesCanvas } from './features-canvas.js';
+import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+const meta = {
+    title: 'Features/FeaturesCanvas',
+    component: FeaturesCanvas,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const singleNode = {
+    id: 'node-1',
+    type: 'featureNode',
+    position: { x: 200, y: 150 },
+    data: {
+        name: 'Auth Module',
+        description: 'Implement OAuth2 authentication flow',
+        featureId: '#f1',
+        lifecycle: 'requirements',
+        state: 'running',
+        progress: 45,
+    },
+};
+const multipleNodes = [
+    {
+        id: 'node-1',
+        type: 'featureNode',
+        position: { x: 50, y: 50 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'node-2',
+        type: 'featureNode',
+        position: { x: 450, y: 50 },
+        data: {
+            name: 'User Dashboard',
+            description: 'Main user dashboard view',
+            featureId: '#f2',
+            lifecycle: 'research',
+            state: 'action-required',
+            progress: 20,
+        },
+    },
+    {
+        id: 'node-3',
+        type: 'featureNode',
+        position: { x: 50, y: 280 },
+        data: {
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f3',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+        },
+    },
+    {
+        id: 'node-4',
+        type: 'featureNode',
+        position: { x: 450, y: 280 },
+        data: {
+            name: 'Payment Integration',
+            description: 'Stripe payment processing',
+            featureId: '#f4',
+            lifecycle: 'review',
+            state: 'blocked',
+            progress: 40,
+        },
+    },
+    {
+        id: 'node-5',
+        type: 'featureNode',
+        position: { x: 850, y: 165 },
+        data: {
+            name: 'Email Service',
+            description: 'Transactional email delivery',
+            featureId: '#f5',
+            lifecycle: 'implementation',
+            state: 'error',
+            progress: 30,
+        },
+    },
+];
+const connectedNodes = [
+    {
+        id: 'node-1',
+        type: 'featureNode',
+        position: { x: 50, y: 120 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'node-2',
+        type: 'featureNode',
+        position: { x: 450, y: 0 },
+        data: {
+            name: 'User Dashboard',
+            description: 'Depends on auth module',
+            featureId: '#f2',
+            lifecycle: 'research',
+            state: 'blocked',
+            progress: 10,
+            blockedBy: 'Auth Module',
+        },
+    },
+    {
+        id: 'node-3',
+        type: 'featureNode',
+        position: { x: 450, y: 240 },
+        data: {
+            name: 'API Gateway',
+            description: 'Depends on auth module',
+            featureId: '#f3',
+            lifecycle: 'requirements',
+            state: 'action-required',
+            progress: 5,
+        },
+    },
+    {
+        id: 'node-4',
+        type: 'featureNode',
+        position: { x: 850, y: 120 },
+        data: {
+            name: 'Admin Panel',
+            description: 'Depends on dashboard and API',
+            featureId: '#f4',
+            lifecycle: 'requirements',
+            state: 'blocked',
+            progress: 0,
+            blockedBy: 'User Dashboard',
+        },
+    },
+];
+const connectedEdges = [
+    { id: 'e1-2', source: 'node-1', target: 'node-2' },
+    { id: 'e1-3', source: 'node-1', target: 'node-3' },
+    { id: 'e2-4', source: 'node-2', target: 'node-4' },
+    { id: 'e3-4', source: 'node-3', target: 'node-4' },
+];
+export const Empty = {
+    args: {
+        nodes: [],
+        edges: [],
+        onAddFeature: () => undefined,
+    },
+};
+export const SingleNode = {
+    args: {
+        nodes: [singleNode],
+        edges: [],
+    },
+};
+export const MultipleNodes = {
+    args: {
+        nodes: multipleNodes,
+        edges: [],
+    },
+};
+export const ConnectedNodes = {
+    args: {
+        nodes: connectedNodes,
+        edges: connectedEdges,
+    },
+};
+export const Interactive = {
+    args: {
+        nodes: multipleNodes,
+        edges: [
+            { id: 'e1-2', source: 'node-1', target: 'node-2' },
+            { id: 'e3-4', source: 'node-3', target: 'node-4' },
+        ],
+        onAddFeature: () => undefined,
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+const repoNode = {
+    id: 'repo-1',
+    type: 'repositoryNode',
+    position: { x: 50, y: 162 },
+    data: {
+        name: 'shep-ai/cli',
+    },
+};
+const addRepoNode = {
+    id: 'add-repo',
+    type: 'addRepositoryNode',
+    position: { x: 50, y: 302 },
+    data: {},
+};
+const repoFeatureNodes = [
+    repoNode,
+    addRepoNode,
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 400, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'feat-2',
+        type: 'featureNode',
+        position: { x: 400, y: 230 },
+        data: {
+            name: 'Feature Flow Canvas',
+            description: 'React Flow canvas for features',
+            featureId: '#f2',
+            lifecycle: 'requirements',
+            state: 'action-required',
+            progress: 20,
+        },
+    },
+];
+const dashedEdge = { style: { strokeDasharray: '5 5' } };
+const repoFeatureEdges = [
+    { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
+    { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
+];
+export const ConnectedRepositoryMultipleFeatures = {
+    args: {
+        nodes: repoFeatureNodes,
+        edges: repoFeatureEdges,
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+// --- Story 1: Single repository connected to a single feature ---
+const singleRepoSingleFeatureNodes = [
+    {
+        id: 'repo-1',
+        type: 'repositoryNode',
+        position: { x: 50, y: 127 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'add-repo',
+        type: 'addRepositoryNode',
+        position: { x: 50, y: 267 },
+        data: {},
+    },
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 400, y: 80 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+];
+export const ConnectedRepositorySingleFeature = {
+    args: {
+        nodes: singleRepoSingleFeatureNodes,
+        edges: [
+            { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', type: 'straight', ...dashedEdge },
+        ],
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+// --- Story 2: Single repository connected to multiple features (one-to-many) ---
+const singleRepoMultiFeatNodes = [
+    {
+        id: 'repo-1',
+        type: 'repositoryNode',
+        position: { x: 50, y: 162 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'add-repo',
+        type: 'addRepositoryNode',
+        position: { x: 50, y: 450 },
+        data: {},
+    },
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 400, y: 0 },
+        data: {
+            name: 'SSO Integration',
+            description: 'Single sign-on across all services',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 40,
+        },
+    },
+    {
+        id: 'feat-2',
+        type: 'featureNode',
+        position: { x: 400, y: 185 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f2',
+            lifecycle: 'requirements',
+            state: 'action-required',
+            progress: 10,
+        },
+    },
+    {
+        id: 'feat-3',
+        type: 'featureNode',
+        position: { x: 400, y: 370 },
+        data: {
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f3',
+            lifecycle: 'research',
+            state: 'running',
+            progress: 25,
+        },
+    },
+];
+export const SingleRepositoryMultipleFeatures = {
+    args: {
+        nodes: singleRepoMultiFeatNodes,
+        edges: [
+            { id: 'e-r1-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
+            { id: 'e-r1-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
+            { id: 'e-r1-f3', source: 'repo-1', target: 'feat-3', ...dashedEdge },
+        ],
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+// --- Story 3: Multiple repositories each with their own features ---
+const multiRepoNodes = [
+    {
+        id: 'repo-1',
+        type: 'repositoryNode',
+        position: { x: 50, y: 86 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'repo-2',
+        type: 'repositoryNode',
+        position: { x: 50, y: 270 },
+        data: { name: 'shep-ai/web' },
+    },
+    {
+        id: 'add-repo',
+        type: 'addRepositoryNode',
+        position: { x: 50, y: 470 },
+        data: {},
+    },
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 400, y: 40 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'feat-2',
+        type: 'featureNode',
+        position: { x: 400, y: 225 },
+        data: {
+            name: 'Dashboard UI',
+            description: 'Main dashboard layout and widgets',
+            featureId: '#f2',
+            lifecycle: 'requirements',
+            state: 'action-required',
+            progress: 15,
+        },
+    },
+];
+export const MultipleRepositories = {
+    args: {
+        nodes: multiRepoNodes,
+        edges: [
+            { id: 'e-r1-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
+            { id: 'e-r2-f2', source: 'repo-2', target: 'feat-2', ...dashedEdge },
+        ],
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+// --- Story 4: Multiple repositories with mixed feature connections (dagre layout) ---
+const mixedRepoFeatureNodesRaw = [
+    {
+        id: 'repo-1',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'repo-2',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/web' },
+    },
+    {
+        id: 'repo-3',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/api' },
+    },
+    {
+        id: 'add-repo',
+        type: 'addRepositoryNode',
+        position: { x: 0, y: 0 },
+        data: {},
+    },
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'feat-2',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'SSO Integration',
+            description: 'Single sign-on across services',
+            featureId: '#f2',
+            lifecycle: 'research',
+            state: 'action-required',
+            progress: 20,
+        },
+    },
+    {
+        id: 'feat-3',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f3',
+            lifecycle: 'requirements',
+            state: 'running',
+            progress: 10,
+        },
+    },
+    {
+        id: 'feat-4',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Admin Panel',
+            description: 'Internal admin tools',
+            featureId: '#f4',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+        },
+    },
+];
+const mixedEdges = [
+    // repo-1 (cli) → Auth Module (1 feature)
+    { id: 'e-r1-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
+    // repo-2 (web) → SSO and Admin Panel (multiple features from one repo)
+    { id: 'e-r2-f2', source: 'repo-2', target: 'feat-2', ...dashedEdge },
+    { id: 'e-r2-f4', source: 'repo-2', target: 'feat-4', ...dashedEdge },
+    // repo-3 (api) → API Gateway (1 feature)
+    { id: 'e-r3-f3', source: 'repo-3', target: 'feat-3', ...dashedEdge },
+];
+const { nodes: mixedLayoutedNodes, edges: mixedLayoutedEdges } = layoutWithDagre(mixedRepoFeatureNodesRaw, mixedEdges, { direction: 'LR' });
+export const MultipleRepositoriesMixedConnections = {
+    args: {
+        nodes: mixedLayoutedNodes,
+        edges: mixedLayoutedEdges,
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+    },
+};
+export const InteractiveWithRepository = {
+    args: {
+        nodes: repoFeatureNodes,
+        edges: repoFeatureEdges,
+        onAddFeature: () => undefined,
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+        onRepositoryAdd: () => undefined,
+    },
+};

package/dist/src/presentation/web/components/features/features-canvas/index.d.ts

@@ -0,0 +1,2 @@
+export { FeaturesCanvas, type FeaturesCanvasProps, type CanvasNodeType } from './features-canvas.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/presentation/web/components/features/features-canvas/index.js

@@ -0,0 +1 @@
+export { FeaturesCanvas } from './features-canvas.js';

package/dist/src/presentation/web/components/features/index.d.ts

@@ -0,0 +1,2 @@
+export { FeaturesCanvas, type FeaturesCanvasProps } from './features-canvas/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/features/index.d.ts.map

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

package/dist/src/presentation/web/components/features/index.js

@@ -0,0 +1 @@
+export { FeaturesCanvas } from './features-canvas/index.js';

package/dist/src/presentation/web/components/features/version/version-page-client.d.ts

@@ -1,4 +1,4 @@
-import type { VersionInfo, SystemInfo } from '../../../lib/version';
+import type { VersionInfo, SystemInfo } from '../../../lib/version.js';
 interface VersionPageClientProps {
     versionInfo: VersionInfo;
     systemInfo: SystemInfo;

package/dist/src/presentation/web/components/features/version/version-page-client.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card';
-import { Badge } from '../../ui/badge';
-import { Button } from '../../ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card.js';
+import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs.js';
 function InfoRow({ label, value, badge, badgeVariant = 'secondary' }) {
     return (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: label }), badge ? (_jsx(Badge, { variant: badgeVariant, children: value })) : (_jsx("span", { className: "font-mono text-sm", children: value }))] }));
 }

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAenD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAcnD"}

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js

@@ -1,9 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SidebarProvider, SidebarInset, SidebarTrigger } from '../../ui/sidebar';
-import { Separator } from '../../ui/separator';
-import { AppSidebar } from '../../layouts/app-sidebar';
-import { ThemeToggle } from '../../common/theme-toggle';
+import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
+import { AppSidebar } from '../../layouts/app-sidebar/index.js';
+import { ThemeToggle } from '../../common/theme-toggle/index.js';
 export function AppShell({ children }) {
-    return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: [] }), _jsxs(SidebarInset, { children: [_jsxs("header", { className: "flex h-14 items-center gap-2 border-b px-4", children: [_jsx(SidebarTrigger, {}), _jsx(Separator, { orientation: "vertical", className: "h-4" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "flex-1 overflow-auto p-6", children: children })] })] }));
+    return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: [] }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsx("div", { className: "absolute top-3 right-3 z-50", children: _jsx(ThemeToggle, {}) }), _jsx("main", { className: "h-full", children: children })] }) })] }));
 }

package/dist/src/presentation/web/components/layouts/app-shell/index.d.ts

@@ -1,2 +1,2 @@
-export { AppShell } from './app-shell';
+export { AppShell } from './app-shell.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/layouts/app-shell/index.js

@@ -1 +1 @@
-export { AppShell } from './app-shell';
+export { AppShell } from './app-shell.js';

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts

@@ -1,4 +1,4 @@
-import type { FeatureStatus } from '../../common/feature-status-config';
+import type { FeatureStatus } from '../../common/feature-status-config.js';
 interface FeatureItem {
     name: string;
     status: FeatureStatus;