@shepai/cli 1.37.3 → 1.38.0

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.d.ts

@@ -0,0 +1,3 @@
+import type { ReviewDrawerShellProps } from './review-drawer-shell-config.js';
+export declare function ReviewDrawerShell({ open, onClose, featureName, featureId, repositoryPath, branch, specPath, onDelete, isDeleting, children, }: ReviewDrawerShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=review-drawer-shell.d.ts.map

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-drawer-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAE3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAoGxB"}

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Loader2, Trash2, XIcon } from 'lucide-react';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
+import { Button } from '../../ui/button.js';
+import { Separator } from '../../ui/separator.js';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '../../ui/alert-dialog.js';
+import { OpenActionMenu } from '../../common/open-action-menu/index.js';
+import { useFeatureActions } from '../../common/feature-drawer/use-feature-actions.js';
+export function ReviewDrawerShell({ open, onClose, featureName, featureId, repositoryPath, branch, specPath, onDelete, isDeleting, children, }) {
+    const actionsInput = repositoryPath && branch ? { repositoryPath, branch, specPath } : null;
+    const actions = useFeatureActions(actionsInput);
+    return (_jsx(Drawer, { direction: "right", modal: false, handleOnly: true, open: open, onOpenChange: (isOpen) => {
+            if (!isOpen)
+                onClose();
+        }, children: _jsxs(DrawerContent, { direction: "right", className: "w-xl", showCloseButton: false, children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { children: [_jsx(DrawerTitle, { children: featureName }), featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureId })) : null] }), actionsInput ? (_jsxs("div", { className: "flex items-center gap-2 px-4 pb-3", children: [_jsx(OpenActionMenu, { actions: actions, repositoryPath: actionsInput.repositoryPath, showSpecs: !!specPath }), onDelete && featureId ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-border mx-1 h-4 w-px" }), _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Delete feature", disabled: isDeleting, className: "text-muted-foreground hover:text-destructive", "data-testid": "review-drawer-delete", children: isDeleting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Trash2, { className: "size-4" })) }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete feature?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently delete ", _jsx("strong", { children: featureName }), " (", featureId, "). This action cannot be undone."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })] })) : null] })) : null, _jsx(Separator, {}), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children })] }) }));
+}

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReviewDrawerShell } from './review-drawer-shell.js';
+declare const meta: Meta<typeof ReviewDrawerShell>;
+export default meta;
+type Story = StoryObj<typeof ReviewDrawerShell>;
+/** Default shell with action buttons. */
+export declare const Default: Story;
+/** Shell with inline delete button. */
+export declare const WithDelete: Story;
+/** Shell with delete in progress. */
+export declare const DeletingState: Story;
+/** Shell without action buttons (no repositoryPath). */
+export declare const NoActions: Story;
+//# sourceMappingURL=review-drawer-shell.stories.d.ts.map

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-drawer-shell.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAOxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAyBhD,yCAAyC;AACzC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}

package/dist/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { fn } from '@storybook/test';
+import { ReviewDrawerShell } from './review-drawer-shell.js';
+const meta = {
+    title: 'Composed/ReviewDrawerShell',
+    component: ReviewDrawerShell,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+function ShellTemplate(props) {
+    const [open, setOpen] = useState(true);
+    return (_jsxs("div", { style: { height: '100vh', background: '#f8fafc', padding: '2rem' }, children: [_jsx("button", { type: "button", onClick: () => setOpen(true), style: { padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }, children: "Open Drawer" }), _jsx(ReviewDrawerShell, { ...props, open: open, onClose: () => setOpen(false), children: _jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Review content goes here" }) }) })] }));
+}
+/** Default shell with action buttons. */
+export const Default = {
+    render: () => (_jsx(ShellTemplate, { featureName: "User Authentication Flow", featureId: "FEAT-042", repositoryPath: "/Users/dev/my-project", branch: "feat/auth-flow", specPath: "/Users/dev/my-project/specs/042-auth-flow" })),
+};
+/** Shell with inline delete button. */
+export const WithDelete = {
+    render: () => (_jsx(ShellTemplate, { featureName: "User Authentication Flow", featureId: "FEAT-042", repositoryPath: "/Users/dev/my-project", branch: "feat/auth-flow", specPath: "/Users/dev/my-project/specs/042-auth-flow", onDelete: fn().mockName('onDelete') })),
+};
+/** Shell with delete in progress. */
+export const DeletingState = {
+    render: () => (_jsx(ShellTemplate, { featureName: "User Authentication Flow", featureId: "FEAT-042", repositoryPath: "/Users/dev/my-project", branch: "feat/auth-flow", onDelete: fn().mockName('onDelete'), isDeleting: true })),
+};
+/** Shell without action buttons (no repositoryPath). */
+export const NoActions = {
+    render: () => _jsx(ShellTemplate, { featureName: "Standalone Feature", featureId: "FEAT-001" }),
+};

package/dist/src/presentation/web/components/common/tech-decisions-review/index.d.ts

@@ -0,0 +1,4 @@
+export { TechDecisionsReview } from './tech-decisions-review.js';
+export { TechDecisionsDrawer } from './tech-decisions-drawer.js';
+export type { TechDecisionsReviewProps, TechDecisionsDrawerProps, TechDecisionsReviewData, TechDecision, } from './tech-decisions-review-config.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/tech-decisions-review/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACvB,YAAY,GACb,MAAM,gCAAgC,CAAC"}

package/dist/src/presentation/web/components/common/tech-decisions-review/index.js

@@ -0,0 +1,2 @@
+export { TechDecisionsReview } from './tech-decisions-review.js';
+export { TechDecisionsDrawer } from './tech-decisions-drawer.js';

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-drawer.d.ts

@@ -0,0 +1,3 @@
+import type { TechDecisionsDrawerProps } from './tech-decisions-review-config.js';
+export declare function TechDecisionsDrawer({ open, onClose, featureName, featureId, repositoryPath, branch, specPath, onDelete, isDeleting, ...reviewProps }: TechDecisionsDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tech-decisions-drawer.d.ts.map

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tech-decisions-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE/E,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,GAAG,WAAW,EACf,EAAE,wBAAwB,2CAgB1B"}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-drawer.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReviewDrawerShell } from '../../common/review-drawer-shell/index.js';
+import { TechDecisionsReview } from './tech-decisions-review.js';
+export function TechDecisionsDrawer({ open, onClose, featureName, featureId, repositoryPath, branch, specPath, onDelete, isDeleting, ...reviewProps }) {
+    return (_jsx(ReviewDrawerShell, { open: open, onClose: onClose, featureName: featureName, featureId: featureId, repositoryPath: repositoryPath, branch: branch, specPath: specPath, onDelete: onDelete, isDeleting: isDeleting, children: _jsx(TechDecisionsReview, { ...reviewProps }) }));
+}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review-config.d.ts

@@ -0,0 +1,39 @@
+import type { TechDecision } from '../../../../../../packages/core/src/domain/generated/output.js';
+export type { TechDecision };
+export interface TechDecisionsReviewData {
+    name: string;
+    summary: string;
+    decisions: TechDecision[];
+    technologies: string[];
+}
+export interface TechDecisionsReviewProps {
+    /** Tech decisions data from the research artifact */
+    data: TechDecisionsReviewData;
+    /** Chat refinement callback — sends user feedback to the agent */
+    onRefine: (text: string) => void;
+    /** Approve plan callback */
+    onApprove: () => void;
+    /** Controls disabled state during loading */
+    isProcessing?: boolean;
+}
+export interface TechDecisionsDrawerProps extends TechDecisionsReviewProps {
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Feature name shown in drawer header */
+    featureName: string;
+    /** Feature ID shown below the name */
+    featureId?: string;
+    /** Absolute path to the repository on disk */
+    repositoryPath?: string;
+    /** Git branch name for this feature */
+    branch?: string;
+    /** Absolute path to the specs folder on disk */
+    specPath?: string;
+    /** Callback to delete the feature — shows delete button when provided */
+    onDelete?: (featureId: string) => void;
+    /** Whether a delete operation is in progress */
+    isDeleting?: boolean;
+}
+//# sourceMappingURL=tech-decisions-review-config.d.ts.map

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tech-decisions-review-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-review-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,wBAAwB;IACvC,qDAAqD;IACrD,IAAI,EAAE,uBAAuB,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,4BAA4B;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,wBAAyB,SAAQ,wBAAwB;IACxE,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,wCAAwC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review-config.js

@@ -0,0 +1 @@
+export {};

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.d.ts

@@ -0,0 +1,3 @@
+import type { TechDecisionsReviewProps } from './tech-decisions-review-config.js';
+export declare function TechDecisionsReview({ data, onRefine, onApprove, isProcessing, }: TechDecisionsReviewProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=tech-decisions-review.d.ts.map

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tech-decisions-review.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAgB,MAAM,gCAAgC,CAAC;AAoG7F,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,YAAoB,GACrB,EAAE,wBAAwB,kDAyE1B"}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Markdown from 'react-markdown';
+import { Check, ChevronRight, GitCompareArrows, Layers, Send } from 'lucide-react';
+import { Badge } from '../../ui/badge.js';
+import { Button } from '../../ui/button.js';
+import { Input } from '../../ui/input.js';
+const markdownComponents = {
+    p: ({ children }) => (_jsx("p", { className: "text-muted-foreground mb-2 text-xs leading-relaxed last:mb-0", children: children })),
+    strong: ({ children }) => _jsx("strong", { className: "text-foreground font-semibold", children: children }),
+    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
+    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-[11px]`, children: children })) : (_jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: children })),
+    pre: ({ children }) => (_jsx("pre", { className: "bg-muted my-2 overflow-x-auto rounded-lg border p-3", children: children })),
+    ul: ({ children }) => (_jsx("ul", { className: "text-muted-foreground mb-2 list-disc space-y-1 pl-4 text-xs", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "text-muted-foreground mb-2 list-decimal space-y-1 pl-4 text-xs", children: children })),
+    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
+    a: ({ children, href }) => (_jsx("a", { href: href, className: "text-primary underline underline-offset-2", target: "_blank", rel: "noopener noreferrer", children: children })),
+};
+function DecisionCard({ decision, index }) {
+    const [alternativesOpen, setAlternativesOpen] = useState(false);
+    return (_jsxs("div", { className: "border-border rounded-lg border", children: [_jsxs("div", { className: "space-y-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "bg-primary text-primary-foreground flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold", children: index + 1 }), _jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-foreground text-sm leading-tight font-semibold", children: decision.title }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: decision.chosen })] })] }), 'decisionName' in decision &&
+                                decision.decisionName ? (_jsx(Badge, { variant: "secondary", className: "bg-primary/10 text-primary shrink-0", children: decision.decisionName })) : null] }), decision.rationale ? (_jsx(Markdown, { components: markdownComponents, children: decision.rationale })) : null] }), decision.rejected.length > 0 ? (_jsxs("div", { className: "border-border border-t", children: [_jsxs("button", { type: "button", onClick: () => setAlternativesOpen((prev) => !prev), className: "text-muted-foreground hover:bg-muted/50 flex w-full items-center gap-1.5 px-4 py-3 text-xs font-medium transition-colors", children: [_jsx(ChevronRight, { className: `h-3.5 w-3.5 transition-transform ${alternativesOpen ? 'rotate-90' : ''}` }), _jsx(Layers, { className: "h-3.5 w-3.5" }), "Other Options Considered (", decision.rejected.length, ")"] }), alternativesOpen ? (_jsx("div", { className: "space-y-1.5 px-4 pb-3", children: decision.rejected.map((alt) => (_jsx("div", { className: "bg-primary/5 rounded-md px-3 py-2", children: _jsx("span", { className: "text-foreground text-xs", children: alt }) }, alt))) })) : null] })) : null] }));
+}
+export function TechDecisionsReview({ data, onRefine, onApprove, isProcessing = false, }) {
+    const { summary, decisions } = data;
+    const [chatInput, setChatInput] = useState('');
+    function handleSubmit(e) {
+        e.preventDefault();
+        const text = chatInput.trim();
+        if (!text)
+            return;
+        onRefine(text);
+        setChatInput('');
+    }
+    if (decisions.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsxs("div", { className: "flex-1", children: [_jsx("h2", { className: "text-foreground text-sm font-bold", children: "Technical Implementation Plan Review" }), summary ? (_jsx("p", { className: "text-muted-foreground mt-1 text-xs leading-relaxed", children: summary })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(GitCompareArrows, { className: "text-primary h-4 w-4" }), _jsx("h3", { className: "text-foreground text-sm font-bold", children: "Technical Decisions" })] }), decisions.map((decision, i) => (_jsx(DecisionCard, { decision: decision, index: i }, decision.title)))] }), _jsxs("div", { className: "border-border shrink-0 border-t", children: [_jsxs("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-4 pb-2", children: [_jsx(Input, { type: "text", placeholder: "Ask AI to revise the plan...", "aria-label": "Ask AI to revise the plan", disabled: isProcessing, value: chatInput, onChange: (e) => setChatInput(e.target.value), className: "flex-1" }), _jsx(Button, { type: "submit", variant: "secondary", size: "icon", "aria-label": "Send", disabled: isProcessing, children: _jsx(Send, {}) })] }), _jsx("div", { className: "px-4 pt-2 pb-4", children: _jsxs(Button, { type: "button", className: "w-full", disabled: isProcessing, onClick: onApprove, children: [_jsx(Check, { className: "mr-1.5 h-4 w-4" }), "Approve Plan"] }) })] })] }));
+}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TechDecisionsReview } from './tech-decisions-review.js';
+import { TechDecisionsDrawer } from './tech-decisions-drawer.js';
+declare const meta: Meta<typeof TechDecisionsReview>;
+export default meta;
+type Story = StoryObj<typeof TechDecisionsReview>;
+/** Default — scrollable list of decisions taken. */
+export declare const Default: Story;
+/** Processing state — approve button disabled. */
+export declare const Processing: Story;
+/** Single decision. */
+export declare const SingleDecision: Story;
+/** No technologies listed. */
+export declare const NoTechnologies: Story;
+type DrawerStory = StoryObj<typeof TechDecisionsDrawer>;
+/** Drawer with tech decisions list. */
+export declare const InDrawer: DrawerStory;
+/** Drawer with delete button visible. */
+export declare const WithDeleteButton: DrawerStory;
+/** Drawer with delete in progress (button disabled). */
+export declare const DeletingState: DrawerStory;
+//# sourceMappingURL=tech-decisions-review.stories.d.ts.map

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tech-decisions-review.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AA0C9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAc1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAElD,oDAAoD;AACpD,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,uBAAuB;AACvB,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,8BAA8B;AAC9B,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAIF,KAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AA8BxD,uCAAuC;AACvC,eAAO,MAAM,QAAQ,EAAE,WAWtB,CAAC;AAEF,yCAAyC;AACzC,eAAO,MAAM,gBAAgB,EAAE,WAY9B,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,WAa3B,CAAC"}

package/dist/src/presentation/web/components/common/tech-decisions-review/tech-decisions-review.stories.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { fn } from '@storybook/test';
+import { TechDecisionsReview } from './tech-decisions-review.js';
+import { TechDecisionsDrawer } from './tech-decisions-drawer.js';
+const mockData = {
+    name: 'Agent Executor Abstraction',
+    summary: 'Research into the best approach for abstracting agent executors to support multiple AI backends (Claude Code, Cursor, custom agents).',
+    technologies: ['TypeScript', 'tsyringe', 'LangGraph', 'Claude API'],
+    decisions: [
+        {
+            title: 'Agent Execution Framework',
+            chosen: 'LangGraph',
+            rejected: ['Custom state machine', 'Temporal.io', 'Step Functions'],
+            rationale: 'LangGraph provides built-in checkpointing, human-in-the-loop support, and integrates natively with LangChain. The custom state machine approach was too low-level and would require rebuilding features LangGraph offers out of the box.',
+        },
+        {
+            title: 'Dependency Injection',
+            chosen: 'tsyringe',
+            rejected: ['InversifyJS', 'TypeDI', 'Manual DI'],
+            rationale: 'tsyringe is lightweight, uses standard decorators, and has minimal overhead. InversifyJS was too complex for our needs, and manual DI would not scale well as the agent system grows.',
+        },
+        {
+            title: 'Inter-Process Communication',
+            chosen: 'Server-Sent Events (SSE)',
+            rejected: ['WebSockets', 'Long Polling', 'gRPC'],
+            rationale: 'SSE provides a simple one-way streaming protocol that fits our use case perfectly — the agent streams status updates to the UI. WebSockets would add unnecessary complexity for bidirectional communication we do not need.',
+        },
+        {
+            title: 'Configuration Storage',
+            chosen: 'SQLite',
+            rejected: ['JSON files', 'LevelDB', 'PostgreSQL'],
+            rationale: 'SQLite offers ACID transactions, SQL query support, and zero-config deployment. JSON files lack transactions and concurrent access support. PostgreSQL would be overkill for a local CLI tool.',
+        },
+    ],
+};
+/* ─── Standalone TechDecisionsReview ─── */
+const meta = {
+    title: 'Composed/TechDecisionsReview',
+    component: TechDecisionsReview,
+    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;
+/** Default — scrollable list of decisions taken. */
+export const Default = {
+    args: {
+        data: mockData,
+        onRefine: fn().mockName('onRefine'),
+        onApprove: fn().mockName('onApprove'),
+    },
+};
+/** Processing state — approve button disabled. */
+export const Processing = {
+    args: {
+        data: mockData,
+        onApprove: fn().mockName('onApprove'),
+        isProcessing: true,
+    },
+};
+/** Single decision. */
+export const SingleDecision = {
+    args: {
+        data: { ...mockData, decisions: [mockData.decisions[0]] },
+        onRefine: fn().mockName('onRefine'),
+        onApprove: fn().mockName('onApprove'),
+    },
+};
+/** No technologies listed. */
+export const NoTechnologies = {
+    args: {
+        data: { ...mockData, technologies: [] },
+        onRefine: fn().mockName('onRefine'),
+        onApprove: fn().mockName('onApprove'),
+    },
+};
+const drawerMeta = {
+    title: 'Composed/TechDecisionsDrawer',
+    component: TechDecisionsDrawer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+function DrawerTemplate(props) {
+    const [open, setOpen] = useState(true);
+    return (_jsxs("div", { style: { height: '100vh', background: '#f8fafc', padding: '2rem' }, children: [_jsx("button", { type: "button", onClick: () => setOpen(true), style: { padding: '8px 16px', border: '1px solid #ccc', borderRadius: '6px' }, children: "Open Drawer" }), _jsx(TechDecisionsDrawer, { ...props, open: open, onClose: () => setOpen(false) })] }));
+}
+/** Drawer with tech decisions list. */
+export const InDrawer = {
+    ...drawerMeta,
+    render: () => (_jsx(DrawerTemplate, { featureName: "Agent Executor Abstraction", featureId: "FEAT-099", data: mockData, onRefine: fn().mockName('onRefine'), onApprove: fn().mockName('onApprove') })),
+};
+/** Drawer with delete button visible. */
+export const WithDeleteButton = {
+    ...drawerMeta,
+    render: () => (_jsx(DrawerTemplate, { featureName: "Agent Executor Abstraction", featureId: "FEAT-099", data: mockData, onRefine: fn().mockName('onRefine'), onApprove: fn().mockName('onApprove'), onDelete: fn().mockName('onDelete') })),
+};
+/** Drawer with delete in progress (button disabled). */
+export const DeletingState = {
+    ...drawerMeta,
+    render: () => (_jsx(DrawerTemplate, { featureName: "Agent Executor Abstraction", featureId: "FEAT-099", data: mockData, onRefine: fn().mockName('onRefine'), onApprove: fn().mockName('onApprove'), onDelete: fn().mockName('onDelete'), isDeleting: true })),
+};

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAK5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAyDzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAS5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA2OzF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -1,17 +1,148 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { approveFeature } from '../../../app/actions/approve-feature.js';
+import { getFeatureArtifact } from '../../../app/actions/get-feature-artifact.js';
+import { getResearchArtifact } from '../../../app/actions/get-research-artifact.js';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
 import { FeatureDrawer, FeatureCreateDrawer } from '../../common/index.js';
+import { PrdQuestionnaireDrawer } from '../../common/prd-questionnaire/index.js';
+import { TechDecisionsDrawer } from '../../common/tech-decisions-review/index.js';
+import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 export function ControlCenterInner({ initialNodes, initialEdges }) {
     const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, closeCreateDrawer, } = useControlCenterState(initialNodes, initialEdges);
+    // PRD questionnaire drawer state
+    const [prdSelections, setPrdSelections] = useState({});
+    const [isPrdProcessing, setIsPrdProcessing] = useState(false);
+    const [questionnaireData, setQuestionnaireData] = useState(null);
+    const [isLoadingQuestionnaire, setIsLoadingQuestionnaire] = useState(false);
+    // Tech decisions drawer state
+    const [techDecisionsData, setTechDecisionsData] = useState(null);
+    const [isLoadingTechDecisions, setIsLoadingTechDecisions] = useState(false);
+    const showPrdDrawer = selectedNode?.lifecycle === 'requirements' && selectedNode?.state === 'action-required';
+    const showTechDecisionsDrawer = selectedNode?.lifecycle === 'implementation' && selectedNode?.state === 'action-required';
+    const handlePrdSelect = useCallback((questionId, optionId) => {
+        setPrdSelections((prev) => ({ ...prev, [questionId]: optionId }));
+    }, []);
+    const handlePrdRefine = useCallback(async (_text) => {
+        setIsPrdProcessing(true);
+        // TODO: Call API to refine requirements
+        // For now simulate a delay
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        setIsPrdProcessing(false);
+    }, []);
+    const handlePrdApprove = useCallback(async (_actionId) => {
+        const featureId = selectedNode?.featureId;
+        if (!featureId)
+            return;
+        const result = await approveFeature(featureId);
+        if (!result.approved) {
+            toast.error(result.error ?? 'Failed to approve requirements');
+            return;
+        }
+        toast.success('Requirements approved — agent resuming');
+        clearSelection();
+        setPrdSelections({});
+    }, [selectedNode?.featureId, clearSelection]);
+    const handleTechDecisionsRefine = useCallback(async (_text) => {
+        setIsLoadingTechDecisions(true);
+        // TODO: Call API to refine tech decisions
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        setIsLoadingTechDecisions(false);
+    }, []);
+    const handleTechDecisionsApprove = useCallback(async () => {
+        const featureId = selectedNode?.featureId;
+        if (!featureId)
+            return;
+        const result = await approveFeature(featureId);
+        if (!result.approved) {
+            toast.error(result.error ?? 'Failed to approve plan');
+            return;
+        }
+        toast.success('Plan approved — agent resuming');
+        clearSelection();
+    }, [selectedNode?.featureId, clearSelection]);
+    // Fetch questionnaire data and reset selections when a different feature is selected
+    const prdFeatureId = showPrdDrawer ? selectedNode?.featureId : null;
+    useEffect(() => {
+        setPrdSelections({});
+        setQuestionnaireData(null);
+        if (!prdFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingQuestionnaire(true);
+        getFeatureArtifact(prdFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.error) {
+                toast.error(result.error);
+                return;
+            }
+            if (result.questionnaire) {
+                setQuestionnaireData(result.questionnaire);
+                // Pre-select AI-recommended answers
+                const defaults = {};
+                for (const q of result.questionnaire.questions) {
+                    const recommended = q.options.find((o) => o.recommended);
+                    if (recommended)
+                        defaults[q.id] = recommended.id;
+                }
+                setPrdSelections(defaults);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                toast.error('Failed to load questionnaire');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoadingQuestionnaire(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [prdFeatureId]);
+    // Fetch tech decisions data when a feature is in research + action-required
+    const techDecisionsFeatureId = showTechDecisionsDrawer ? selectedNode?.featureId : null;
+    useEffect(() => {
+        setTechDecisionsData(null);
+        if (!techDecisionsFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingTechDecisions(true);
+        getResearchArtifact(techDecisionsFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.error) {
+                toast.error(result.error);
+                return;
+            }
+            if (result.techDecisions) {
+                setTechDecisionsData(result.techDecisions);
+            }
+        })
+            .catch(() => {
+            if (!cancelled)
+                toast.error('Failed to load tech decisions');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoadingTechDecisions(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [techDecisionsFeatureId]);
     // Listen for global "open create drawer" events from the sidebar
     useEffect(() => {
         const handler = () => handleAddFeature();
         window.addEventListener('shep:open-create-drawer', handler);
         return () => window.removeEventListener('shep:open-create-drawer', handler);
     }, [handleAddFeature]);
-    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), questionnaireData ? (_jsx(PrdQuestionnaireDrawer, { open: showPrdDrawer, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onRefine: handlePrdRefine, onApprove: handlePrdApprove, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isPrdProcessing || isLoadingQuestionnaire })) : null, techDecisionsData ? (_jsx(TechDecisionsDrawer, { open: showTechDecisionsDrawer, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onRefine: handleTechDecisionsRefine, onApprove: handleTechDecisionsApprove, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath })] }));
 }

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA6YpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAKhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAmZpB"}

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -1,9 +1,12 @@
 'use client';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { applyNodeChanges } from '@xyflow/react';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+import { createFeature } from '../../../app/actions/create-feature.js';
+import { deleteFeature } from '../../../app/actions/delete-feature.js';
+import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
 let nextFeatureId = 0;
 export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
@@ -22,6 +25,8 @@ export function useControlCenterState(initialNodes, initialEdges) {
         .map((e) => e.id)
         .sort()
         .join(',');
+    // Sync server props into local state — keyed by derived strings (initialNodeKey/initialEdgeKey)
+    // to avoid infinite re-renders from unstable array references.
     useEffect(() => {
         setNodes((currentNodes) => {
             // Build a lookup of current node positions by ID
@@ -47,10 +52,22 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 return serverNode;
             });
         });
-    }, [initialNodeKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [initialNodeKey, initialNodes]);
     useEffect(() => {
         setEdges(initialEdges);
-    }, [initialEdgeKey]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [initialEdgeKey, initialEdges]);
+    // Refresh server data when SSE agent events arrive (status changes)
+    const { lastEvent } = useAgentEventsContext();
+    const processedEventRef = useRef(null);
+    useEffect(() => {
+        if (!lastEvent)
+            return;
+        const key = `${lastEvent.agentRunId}-${lastEvent.eventType}-${lastEvent.timestamp}`;
+        if (processedEventRef.current === key)
+            return;
+        processedEventRef.current = key;
+        router.refresh();
+    }, [lastEvent, router]);
     const onNodesChange = useCallback((changes) => {
         setNodes((ns) => applyNodeChanges(changes, ns));
     }, []);
@@ -223,19 +240,14 @@ export function useControlCenterState(initialNodes, initialEdges) {
         // 2. Close drawer and clear pending state immediately
         setIsCreateDrawerOpen(false);
         setPendingRepoNodeId(null);
-        // 3. Fire API call in the background
-        fetch('/api/features/create', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(data),
-        })
-            .then(async (response) => {
-            if (!response.ok) {
-                const body = await response.json();
+        // 3. Fire server action in the background
+        createFeature(data)
+            .then((result) => {
+            if (result.error) {
                 // Rollback: remove optimistic node and edge
                 setNodes((prev) => prev.filter((n) => n.id !== tempId));
                 setEdges((prev) => prev.filter((e) => e.target !== tempId));
-                toast.error(body.error ?? 'Failed to create feature');
+                toast.error(result.error);
                 return;
             }
             router.refresh();
@@ -253,12 +265,9 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const handleDeleteFeature = useCallback(async (featureId) => {
         setIsDeleting(true);
         try {
-            const response = await fetch(`/api/features/${featureId}`, {
-                method: 'DELETE',
-            });
-            if (!response.ok) {
-                const body = await response.json();
-                toast.error(body.error ?? 'Failed to delete feature');
+            const result = await deleteFeature(featureId);
+            if (result.error) {
+                toast.error(result.error);
                 return;
             }
             setSelectedNode(null);

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,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAqBnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0BD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAMnD"}