@shepai/cli 1.21.0 → 1.22.1

package/dist/src/presentation/web/components/ui/select.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from './select';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from './select.js';
 const meta = {
     title: 'Primitives/Select',
     component: Select,

package/dist/src/presentation/web/components/ui/separator.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator as SeparatorPrimitive } from 'radix-ui';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
     return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), ...props }));
 }

package/dist/src/presentation/web/components/ui/sheet.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XIcon } from 'lucide-react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Sheet({ ...props }) {
     return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }

package/dist/src/presentation/web/components/ui/sidebar.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Separator } from '../ui/separator';
-import { TooltipContent } from '../ui/tooltip';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Separator } from '../ui/separator.js';
+import { TooltipContent } from '../ui/tooltip.js';
 interface SidebarContextProps {
     state: 'expanded' | 'collapsed';
     open: boolean;

package/dist/src/presentation/web/components/ui/sidebar.js

@@ -4,14 +4,14 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { PanelLeftIcon } from 'lucide-react';
 import { Slot } from 'radix-ui';
-import { useIsMobile } from '../../hooks/use-mobile';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Separator } from '../ui/separator';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '../ui/sheet';
-import { Skeleton } from '../ui/skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Separator } from '../ui/separator.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '../ui/sheet.js';
+import { Skeleton } from '../ui/skeleton.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';

package/dist/src/presentation/web/components/ui/skeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Skeleton({ className, ...props }) {
     return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-accent animate-pulse rounded-md', className), ...props }));
 }

package/dist/src/presentation/web/components/ui/sonner.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Toaster } from './sonner';
+import { Toaster } from './sonner.js';
 declare const meta: Meta<typeof Toaster>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/presentation/web/components/ui/sonner.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast } from 'sonner';
-import { Toaster } from './sonner';
-import { Button } from './button';
+import { Toaster } from './sonner.js';
+import { Button } from './button.js';
 const meta = {
     title: 'Primitives/Toast',
     component: Toaster,

package/dist/src/presentation/web/components/ui/spinner.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const spinnerVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spinnerVariants> {
+}
+declare function Spinner({ className, size, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner, spinnerVariants };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/src/presentation/web/components/ui/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,eAAe;;8EAWnB,CAAC;AAQH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,eAAe,CAAC;CAAG;AAE3C,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAgBlE;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/spinner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const spinnerVariants = cva('animate-spinner inline-block rounded-full', {
+    variants: {
+        size: {
+            sm: 'size-4',
+            md: 'size-6',
+            lg: 'size-10',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+const BORDER_WIDTH = {
+    sm: '3px',
+    md: '4px',
+    lg: '8px',
+};
+function Spinner({ className, size = 'md', ...props }) {
+    const b = BORDER_WIDTH[size ?? 'md'];
+    return (_jsx("div", { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn(spinnerVariants({ size }), className), style: {
+            background: `conic-gradient(from 220deg, transparent 0%, currentColor 80%, transparent 100%)`,
+            WebkitMask: `radial-gradient(farthest-side, #0000 calc(100% - ${b}), #000 calc(100% - ${b} + 1px))`,
+        }, ...props }));
+}
+export { Spinner, spinnerVariants };

package/dist/src/presentation/web/components/ui/spinner.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner.js';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const AllSizes: Story;
+export declare const CustomColor: Story;
+//# sourceMappingURL=spinner.stories.d.ts.map

package/dist/src/presentation/web/components/ui/spinner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAa9B,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,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/dist/src/presentation/web/components/ui/spinner.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from './spinner.js';
+const meta = {
+    title: 'Primitives/Spinner',
+    component: Spinner,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: 'md',
+    },
+};
+export const Small = {
+    args: {
+        size: 'sm',
+    },
+};
+export const Large = {
+    args: {
+        size: 'lg',
+    },
+};
+export const AllSizes = {
+    render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] })),
+};
+export const CustomColor = {
+    render: () => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Spinner, { className: "text-primary" }), _jsx(Spinner, { className: "text-destructive" }), _jsx(Spinner, { className: "text-muted-foreground" })] })),
+};

package/dist/src/presentation/web/components/ui/tabs.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Tabs as TabsPrimitive } from 'radix-ui';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1', className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;

package/dist/src/presentation/web/components/ui/tabs.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './tabs';
+import { Tabs } from './tabs.js';
 declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/presentation/web/components/ui/tabs.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
-import { Input } from './input';
-import { Label } from './label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
 const meta = {
     title: 'Primitives/Tabs',
     component: Tabs,

package/dist/src/presentation/web/components/ui/tooltip.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function TooltipProvider({ delayDuration = 0, ...props }) {
     return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
 }

package/dist/src/presentation/web/dev-server.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Web UI Development Server
+ *
+ * Initializes the DI container (same as CLI bootstrap) and starts Next.js
+ * programmatically in dev mode. This ensures the globalThis.__shepUseCases
+ * bridge is available when running `pnpm dev:web` standalone.
+ *
+ * Run via: tsx --tsconfig ../../tsconfig.json dev-server.ts
+ */
+import 'reflect-metadata';
+//# sourceMappingURL=dev-server.d.ts.map

package/dist/src/presentation/web/dev-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-server.d.ts","sourceRoot":"","sources":["../../../../src/presentation/web/dev-server.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,kBAAkB,CAAC"}

package/dist/src/presentation/web/dev-server.js

@@ -0,0 +1,68 @@
+/**
+ * Web UI Development Server
+ *
+ * Initializes the DI container (same as CLI bootstrap) and starts Next.js
+ * programmatically in dev mode. This ensures the globalThis.__shepUseCases
+ * bridge is available when running `pnpm dev:web` standalone.
+ *
+ * Run via: tsx --tsconfig ../../tsconfig.json dev-server.ts
+ */
+/* eslint-disable no-console */
+// IMPORTANT: reflect-metadata must be imported first for tsyringe DI
+import 'reflect-metadata';
+import next from 'next';
+import http from 'node:http';
+import { initializeContainer, container } from '../../../packages/core/src/infrastructure/di/container.js';
+import { InitializeSettingsUseCase } from '../../../packages/core/src/application/use-cases/settings/initialize-settings.use-case.js';
+import { ListFeaturesUseCase } from '../../../packages/core/src/application/use-cases/features/list-features.use-case.js';
+import { initializeSettings } from '../../../packages/core/src/infrastructure/services/settings.service.js';
+const DEFAULT_PORT = 3000;
+async function main() {
+    const port = parseInt(process.env.PORT ?? '', 10) || DEFAULT_PORT;
+    // Step 1: Initialize DI container (database + migrations)
+    // Same as CLI bootstrap (src/presentation/cli/index.ts:52-58)
+    try {
+        await initializeContainer();
+        const initSettingsUseCase = container.resolve(InitializeSettingsUseCase);
+        const settings = await initSettingsUseCase.execute();
+        initializeSettings(settings);
+        // Set globalThis bridge for the web layer (same as CLI bootstrap index.ts:74-76)
+        globalThis.__shepUseCases = {
+            listFeatures: container.resolve(ListFeaturesUseCase),
+            agentRunRepo: container.resolve('IAgentRunRepository'),
+        };
+        console.log('[dev-server] DI bridge initialized');
+    }
+    catch (error) {
+        console.warn('[dev-server] DI initialization failed — features will be empty:', error);
+    }
+    // Step 2: Start Next.js dev server
+    const app = next({ dev: true, dir: import.meta.dirname, hostname: 'localhost', port });
+    const handle = app.getRequestHandler();
+    await app.prepare();
+    const server = http.createServer((req, res) => {
+        handle(req, res);
+    });
+    await new Promise((resolve, reject) => {
+        server.on('error', reject);
+        server.listen(port, 'localhost', resolve);
+    });
+    console.log(`[dev-server] Ready at http://localhost:${port}`);
+    // Graceful shutdown
+    let isShuttingDown = false;
+    const shutdown = async () => {
+        if (isShuttingDown)
+            return;
+        isShuttingDown = true;
+        console.log('\n[dev-server] Shutting down...');
+        await new Promise((resolve) => server.close(() => resolve()));
+        await app.close();
+        process.exit(0);
+    };
+    process.on('SIGINT', shutdown);
+    process.on('SIGTERM', shutdown);
+}
+main().catch((error) => {
+    console.error('[dev-server] Fatal error:', error);
+    process.exit(1);
+});

package/dist/src/presentation/web/hooks/useTheme.d.ts

@@ -1,4 +1,4 @@
-import { type Theme } from '../types/theme';
+import { type Theme } from '../types/theme.js';
 /**
  * Hook to manage theme state with localStorage persistence
  * and system preference detection.

package/dist/src/presentation/web/hooks/useTheme.js

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
-import { THEME_STORAGE_KEY } from '../types/theme';
+import { THEME_STORAGE_KEY } from '../types/theme.js';
 /**
  * Hook to manage theme state with localStorage persistence
  * and system preference detection.

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts

@@ -0,0 +1,27 @@
+import type { Edge, Node } from '@xyflow/react';
+export type LayoutDirection = 'TB' | 'LR' | 'BT' | 'RL';
+export interface LayoutOptions {
+    /** Graph direction: top-bottom, left-right, etc. Default "TB" */
+    direction?: LayoutDirection;
+    /** Default node size when per-node size is unavailable */
+    nodeSize?: {
+        width: number;
+        height: number;
+    };
+    /** Vertical separation between ranks (default 80) */
+    ranksep?: number;
+    /** Horizontal separation between nodes in the same rank (default 30) */
+    nodesep?: number;
+}
+/**
+ * Compute an automatic hierarchical layout for React Flow nodes and edges
+ * using Dagre. Returns new node/edge arrays — never mutates the originals.
+ *
+ * Disconnected nodes (no edges) are placed below the laid-out graph
+ * so they remain visible without overlapping.
+ */
+export declare function layoutWithDagre<N extends Node>(nodes: N[], edges: Edge[], opts?: LayoutOptions): {
+    nodes: N[];
+    edges: Edge[];
+};
+//# sourceMappingURL=layout-with-dagre.d.ts.map

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CA+E/B"}

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -0,0 +1,98 @@
+import dagre from '@dagrejs/dagre';
+/** Known node-type dimensions for the canvas node types */
+const NODE_DIMENSIONS = {
+    featureNode: { width: 288, height: 140 },
+    repositoryNode: { width: 224, height: 50 },
+    addRepositoryNode: { width: 224, height: 50 },
+};
+function getNodeSize(node, defaultSize) {
+    // Prefer per-node size from data, then type-based lookup, then default
+    const data = node.data;
+    if (data && typeof data.width === 'number' && typeof data.height === 'number') {
+        return { width: data.width, height: data.height };
+    }
+    return NODE_DIMENSIONS[node.type ?? ''] ?? defaultSize;
+}
+function getHandlePositions(direction) {
+    switch (direction) {
+        case 'LR':
+            return { targetPosition: 'left', sourcePosition: 'right' };
+        case 'RL':
+            return { targetPosition: 'right', sourcePosition: 'left' };
+        case 'BT':
+            return { targetPosition: 'bottom', sourcePosition: 'top' };
+        case 'TB':
+        default:
+            return { targetPosition: 'top', sourcePosition: 'bottom' };
+    }
+}
+/**
+ * Compute an automatic hierarchical layout for React Flow nodes and edges
+ * using Dagre. Returns new node/edge arrays — never mutates the originals.
+ *
+ * Disconnected nodes (no edges) are placed below the laid-out graph
+ * so they remain visible without overlapping.
+ */
+export function layoutWithDagre(nodes, edges, opts = {}) {
+    const { direction = 'TB', nodeSize = { width: 172, height: 36 }, ranksep = 80, nodesep = 30, } = opts;
+    if (nodes.length === 0) {
+        return { nodes: [], edges: [] };
+    }
+    const g = new dagre.graphlib.Graph({ multigraph: true });
+    g.setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: direction, ranksep, nodesep });
+    // Separate connected from disconnected nodes
+    const connectedIds = new Set();
+    for (const edge of edges) {
+        connectedIds.add(edge.source);
+        connectedIds.add(edge.target);
+    }
+    const graphNodes = nodes.filter((n) => connectedIds.has(n.id));
+    const disconnectedNodes = nodes.filter((n) => !connectedIds.has(n.id));
+    // Add nodes to the dagre graph
+    for (const node of graphNodes) {
+        const size = getNodeSize(node, nodeSize);
+        g.setNode(node.id, { width: size.width, height: size.height });
+    }
+    // Add edges — use edge.id as key to support multigraph (duplicate source→target)
+    for (const edge of edges) {
+        if (!g.hasNode(edge.source) || !g.hasNode(edge.target))
+            continue;
+        g.setEdge(edge.source, edge.target, {}, edge.id);
+    }
+    dagre.layout(g);
+    const { targetPosition, sourcePosition } = getHandlePositions(direction);
+    const result = [];
+    // Map laid-out nodes, converting dagre center-coords to React Flow top-left
+    for (const node of graphNodes) {
+        const pos = g.node(node.id);
+        const size = getNodeSize(node, nodeSize);
+        result.push({
+            ...node,
+            targetPosition,
+            sourcePosition,
+            position: { x: pos.x - size.width / 2, y: pos.y - size.height / 2 },
+        });
+    }
+    // Place disconnected nodes after the laid-out graph so they don't overlap
+    if (disconnectedNodes.length > 0) {
+        let maxY = 0;
+        let minX = Infinity;
+        for (const n of result) {
+            const size = getNodeSize(n, nodeSize);
+            maxY = Math.max(maxY, n.position.y + size.height);
+            minX = Math.min(minX, n.position.x);
+        }
+        for (let i = 0; i < disconnectedNodes.length; i++) {
+            const node = disconnectedNodes[i];
+            const size = getNodeSize(node, nodeSize);
+            result.push({
+                ...node,
+                targetPosition,
+                sourcePosition,
+                position: { x: minX, y: maxY + 30 + i * (size.height + 20) },
+            });
+        }
+    }
+    return { nodes: result, edges: [...edges] };
+}

package/dist/src/presentation/web/lib/use-cases.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Global DI Bridge — Web Layer Use Case Access
+ *
+ * Reads resolved use cases from globalThis.__shepUseCases, which is populated
+ * by the CLI bootstrap after DI container initialization. This avoids importing
+ * CLI source files directly (Turbopack cannot resolve Node.js ESM .js imports).
+ *
+ * All TypeScript interfaces are defined locally to avoid cross-package imports.
+ * Server-side only (used in server components).
+ */
+import type { Feature, AgentRun } from '../../../../packages/core/src/domain/generated/index.js';
+/** Filters for listing features. */
+interface FeatureListFilters {
+    repositoryPath?: string;
+    lifecycle?: string;
+}
+/**
+ * List all features for the control center.
+ * Returns an empty array if the DI bridge is not initialized
+ * (e.g. during static builds or when running outside the CLI process).
+ */
+export declare function getFeatures(filters?: FeatureListFilters): Promise<Feature[]>;
+/**
+ * Find an agent run by ID.
+ * Returns null if the DI bridge is not initialized or the run is not found.
+ */
+export declare function getAgentRun(id: string): Promise<AgentRun | null>;
+export {};
+//# sourceMappingURL=use-cases.d.ts.map

package/dist/src/presentation/web/lib/use-cases.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cases.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/use-cases.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEvE,oCAAoC;AACpC,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD;;;;GAIG;AACH,wBAAsB,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC,CAWlF;AAED;;;GAGG;AACH,wBAAsB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAStE"}

package/dist/src/presentation/web/lib/use-cases.js

@@ -0,0 +1,46 @@
+/**
+ * Global DI Bridge — Web Layer Use Case Access
+ *
+ * Reads resolved use cases from globalThis.__shepUseCases, which is populated
+ * by the CLI bootstrap after DI container initialization. This avoids importing
+ * CLI source files directly (Turbopack cannot resolve Node.js ESM .js imports).
+ *
+ * All TypeScript interfaces are defined locally to avoid cross-package imports.
+ * Server-side only (used in server components).
+ */
+function getUseCases() {
+    return globalThis.__shepUseCases;
+}
+/**
+ * List all features for the control center.
+ * Returns an empty array if the DI bridge is not initialized
+ * (e.g. during static builds or when running outside the CLI process).
+ */
+export async function getFeatures(filters) {
+    const useCases = getUseCases();
+    if (!useCases?.listFeatures)
+        return [];
+    try {
+        return await useCases.listFeatures.execute(filters);
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to load features:', error);
+        return [];
+    }
+}
+/**
+ * Find an agent run by ID.
+ * Returns null if the DI bridge is not initialized or the run is not found.
+ */
+export async function getAgentRun(id) {
+    const useCases = getUseCases();
+    if (!useCases?.agentRunRepo)
+        return null;
+    try {
+        return await useCases.agentRunRepo.findById(id);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/src/presentation/web/next.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.config.d.ts","sourceRoot":"","sources":["../../../../src/presentation/web/next.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAgCvC,QAAA,MAAM,UAAU,EAAE,UAYjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"next.config.d.ts","sourceRoot":"","sources":["../../../../src/presentation/web/next.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAgCvC,QAAA,MAAM,UAAU,EAAE,UAejB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/presentation/web/next.config.js

@@ -34,6 +34,8 @@ const nextConfig = {
     typedRoutes: true,
     // Configure the output directory
     distDir: '.next',
+    // Native Node modules used by CLI infrastructure (server-side only)
+    serverExternalPackages: ['better-sqlite3'],
     // Inject version info from package.json for the web UI
     env: loadDevFallbacks(),
 };