@shepai/cli 1.66.4 → 1.67.0

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

@@ -1 +1 @@
-{"version":3,"file":"base-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/base-drawer/base-drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGpF,QAAA,MAAM,cAAc;;8EAUlB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAa,EACb,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EAAE,MAAM,EACrB,YAAY,GACb,EAAE,eAAe,2CA8CjB"}
+{"version":3,"file":"base-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/base-drawer/base-drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGpF,QAAA,MAAM,cAAc;;8EAUlB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAa,EACb,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EAAE,MAAM,EACrB,YAAY,GACb,EAAE,eAAe,2CAyEjB"}

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

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
 import { XIcon, Play, Square } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils.js';
 import { ActionButton } from '../../common/action-button/index.js';
 import { DeploymentStatusBadge } from '../../common/deployment-status-badge/index.js';
 import { Drawer, DrawerContent, DrawerHeader, DrawerFooter, DrawerOverlay, } from '../../ui/drawer.js';
+import { Separator } from '../../ui/separator.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { useDeployAction } from '../../../hooks/use-deploy-action.js';
 import { featureFlags } from '../../../lib/feature-flags.js';
@@ -21,10 +23,28 @@ const drawerVariants = cva('', {
     },
 });
 export function BaseDrawer({ open, onClose, modal = false, size, header, children, footer, className, 'data-testid': testId, deployTarget, }) {
+    const contentRef = useRef(null);
+    // Close when clicking outside the drawer panel (no overlay needed — canvas stays draggable).
+    // Uses `click` (not `pointerdown`) so canvas drags don't trigger this.
+    useEffect(() => {
+        if (!open || modal)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            if (contentRef.current?.contains(target))
+                return;
+            // Don't close when clicking inside the canvas or other Radix overlays
+            if (target.closest('[data-no-drawer-close], [role="alertdialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]'))
+                return;
+            onClose();
+        };
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+    }, [open, modal, onClose]);
     return (_jsxs(Drawer, { direction: "right", modal: modal, handleOnly: true, open: open, onOpenChange: (isOpen) => {
             if (!isOpen)
                 onClose();
-        }, children: [modal ? _jsx(DrawerOverlay, {}) : null, _jsxs(DrawerContent, { direction: "right", showCloseButton: false, className: cn(drawerVariants({ size }), className), "data-testid": testId, children: [_jsxs("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", "data-testid": testId ? `${testId}-close-button` : undefined, children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), header ? _jsx(DrawerHeader, { children: header }) : null, featureFlags.envDeploy && deployTarget ? _jsx(DeployBar, { deployTarget: deployTarget }) : null, _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("div", { className: "flex flex-col", children: children }) }), footer ? _jsx(DrawerFooter, { children: footer }) : null] })] }));
+        }, children: [modal ? _jsx(DrawerOverlay, {}) : null, _jsxs(DrawerContent, { ref: contentRef, direction: "right", showCloseButton: false, className: cn(drawerVariants({ size }), className), "data-testid": testId, children: [_jsxs("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", "data-testid": testId ? `${testId}-close-button` : undefined, children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), header ? _jsx(DrawerHeader, { className: "shrink-0", children: header }) : null, header ? _jsx(Separator, {}) : null, featureFlags.envDeploy && deployTarget ? _jsx(DeployBar, { deployTarget: deployTarget }) : null, _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children }), footer ? _jsx(DrawerFooter, { className: "shrink-0", children: footer }) : null] })] }));
 }
 function DeployBar({ deployTarget }) {
     const deployAction = useDeployAction(deployTarget);

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

@@ -19,6 +19,20 @@ export declare const WithFooter: Story;
 export declare const WithHeaderAndFooter: Story;
 /** Drawer with deployTarget prop showing the dev server bar below the header. */
 export declare const WithDevServerBar: Story;
-/** Drawer with content that exceeds viewport to demonstrate scroll behavior. */
+/**
+ * Drawer with content that exceeds viewport to demonstrate scroll behavior.
+ *
+ * **Fixed Header/Footer Layout:**
+ * - The header (DrawerTitle + DrawerDescription) remains fixed at the top while scrolling
+ * - A Separator is automatically rendered below the header — no need to add one manually
+ * - The footer (if present, e.g., DrawerActionBar) remains fixed at the bottom while scrolling
+ * - Only the content area (children) scrolls when drawer content exceeds available height
+ *
+ * **Spacing Conventions:**
+ * - Content consumers should add `p-4` padding for consistent spacing (as shown in this example)
+ * - Footer components like DrawerActionBar should use `border-t` for visual separation
+ *
+ * Try scrolling the content below to see the fixed header behavior.
+ */
 export declare const ScrollableContent: Story;
 //# sourceMappingURL=base-drawer.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/base-drawer/base-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAuBzC,6DAA6D;AAC7D,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,EAAE,KAsCjC,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAC"}
+{"version":3,"file":"base-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/base-drawer/base-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAuBzC,6DAA6D;AAC7D,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,EAAE,KAsCjC,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,gBAAgB,EAAE,KAuB9B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAC"}

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

@@ -4,7 +4,7 @@ import { BaseDrawer } from './base-drawer.js';
 import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
 import { Button } from '../../ui/button.js';
 const meta = {
-    title: 'Common/BaseDrawer',
+    title: 'Drawers/Base/BaseDrawer',
     component: BaseDrawer,
     tags: ['autodocs'],
     parameters: {
@@ -59,7 +59,21 @@ export const WithDevServerBar = {
             branch: 'feat/auth-module',
         }, children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "The deploy bar appears between the header and this content." }) }) })),
 };
-/** Drawer with content that exceeds viewport to demonstrate scroll behavior. */
+/**
+ * Drawer with content that exceeds viewport to demonstrate scroll behavior.
+ *
+ * **Fixed Header/Footer Layout:**
+ * - The header (DrawerTitle + DrawerDescription) remains fixed at the top while scrolling
+ * - A Separator is automatically rendered below the header — no need to add one manually
+ * - The footer (if present, e.g., DrawerActionBar) remains fixed at the bottom while scrolling
+ * - Only the content area (children) scrolls when drawer content exceeds available height
+ *
+ * **Spacing Conventions:**
+ * - Content consumers should add `p-4` padding for consistent spacing (as shown in this example)
+ * - Footer components like DrawerActionBar should use `border-t` for visual separation
+ *
+ * Try scrolling the content below to see the fixed header behavior.
+ */
 export const ScrollableContent = {
     render: () => (_jsx(DrawerTrigger, { header: _jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: "Scrollable Content" }), _jsx(DrawerDescription, { children: "Content below overflows and scrolls" })] }), children: _jsx("div", { className: "flex flex-col gap-4 p-4", children: Array.from({ length: 30 }, (_, i) => (_jsxs("div", { className: "border-border rounded-md border p-3", children: [_jsxs("h4", { className: "text-sm font-medium", children: ["Item ", i + 1] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "This is a scrollable content item to demonstrate overflow handling." })] }, i))) }) })),
 };

package/dist/src/presentation/web/components/common/control-center-drawer/control-center-drawer.d.ts

@@ -0,0 +1,12 @@
+import type { FeatureCreatePayload } from '../../common/feature-create-drawer/index.js';
+import type { DrawerView } from './drawer-view.js';
+export interface ControlCenterDrawerProps {
+    view: DrawerView | null;
+    onClose: () => void;
+    onDelete?: (featureId: string) => void;
+    isDeleting?: boolean;
+    onCreateSubmit: (data: FeatureCreatePayload) => void;
+    isSubmitting?: boolean;
+}
+export declare function ControlCenterDrawer({ view, onClose, onDelete, isDeleting, onCreateSubmit, isSubmitting, }: ControlCenterDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=control-center-drawer.d.ts.map

package/dist/src/presentation/web/components/common/control-center-drawer/control-center-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-center-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/control-center-drawer.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,cAAc,EACd,YAAY,GACb,EAAE,wBAAwB,2CAke1B"}

package/dist/src/presentation/web/components/common/control-center-drawer/control-center-drawer.js

@@ -0,0 +1,284 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
+import { Loader2, Trash2, ExternalLink, GitCommitHorizontal, Code2, Terminal, FolderOpen, } from 'lucide-react';
+import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { approveFeature } from '../../../app/actions/approve-feature.js';
+import { rejectFeature } from '../../../app/actions/reject-feature.js';
+import { getFeatureArtifact } from '../../../app/actions/get-feature-artifact.js';
+import { getResearchArtifact } from '../../../app/actions/get-research-artifact.js';
+import { getMergeReviewData } from '../../../app/actions/get-merge-review-data.js';
+import { cn } from '../../../lib/utils.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
+import { Button } from '../../ui/button.js';
+import { Badge } from '../../ui/badge.js';
+import { Separator } from '../../ui/separator.js';
+import { CometSpinner } from '../../ui/comet-spinner.js';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '../../ui/alert-dialog.js';
+import { CiStatusBadge } from '../../common/ci-status-badge/index.js';
+import { ActionButton } from '../../common/action-button/index.js';
+import { OpenActionMenu } from '../../common/open-action-menu/index.js';
+import { FeatureCreateDrawer } from '../../common/feature-create-drawer/index.js';
+import { PrdQuestionnaire } from '../../common/prd-questionnaire/index.js';
+import { TechDecisionsReview } from '../../common/tech-decisions-review/index.js';
+import { MergeReview } from '../../common/merge-review/index.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
+import { useFeatureActions } from '../../common/feature-drawer/use-feature-actions.js';
+import { useRepositoryActions } from '../../common/repository-node/use-repository-actions.js';
+export function ControlCenterDrawer({ view, onClose, onDelete, isDeleting, onCreateSubmit, isSubmitting, }) {
+    // ── PRD questionnaire state ─────────────────────────────────────────────
+    const [prdData, setPrdData] = useState(null);
+    const [prdSelections, setPrdSelections] = useState({});
+    const [isLoadingPrd, setIsLoadingPrd] = useState(false);
+    // ── Tech decisions state ────────────────────────────────────────────────
+    const [techData, setTechData] = useState(null);
+    const [isLoadingTech, setIsLoadingTech] = useState(false);
+    // ── Merge review state ──────────────────────────────────────────────────
+    const [mergeData, setMergeData] = useState(null);
+    const [isLoadingMerge, setIsLoadingMerge] = useState(false);
+    // ── Shared reject state ─────────────────────────────────────────────────
+    const [isRejecting, setIsRejecting] = useState(false);
+    const rejectSound = useSoundAction('reject');
+    // ── Data fetching ───────────────────────────────────────────────────────
+    const prdFeatureId = view?.type === 'prd-review' ? view.node.featureId : null;
+    useEffect(() => {
+        setPrdSelections({});
+        setPrdData(null);
+        if (!prdFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingPrd(true);
+        getFeatureArtifact(prdFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.error) {
+                toast.error(result.error);
+                return;
+            }
+            if (result.questionnaire) {
+                setPrdData(result.questionnaire);
+                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)
+                setIsLoadingPrd(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [prdFeatureId]);
+    const techFeatureId = view?.type === 'tech-review' ? view.node.featureId : null;
+    useEffect(() => {
+        setTechData(null);
+        if (!techFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingTech(true);
+        getResearchArtifact(techFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.error) {
+                toast.error(result.error);
+                return;
+            }
+            if (result.techDecisions)
+                setTechData(result.techDecisions);
+        })
+            .catch(() => {
+            if (!cancelled)
+                toast.error('Failed to load tech decisions');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoadingTech(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [techFeatureId]);
+    const mergeFeatureId = view?.type === 'merge-review' ? view.node.featureId : null;
+    useEffect(() => {
+        setMergeData(null);
+        if (!mergeFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingMerge(true);
+        getMergeReviewData(mergeFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if ('error' in result) {
+                toast.error(result.error);
+                return;
+            }
+            setMergeData(result);
+        })
+            .catch(() => {
+            if (!cancelled)
+                toast.error('Failed to load merge review data');
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoadingMerge(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [mergeFeatureId]);
+    // ── Approve / reject handlers ───────────────────────────────────────────
+    const reviewNode = view?.type === 'prd-review' || view?.type === 'tech-review' || view?.type === 'merge-review'
+        ? view.node
+        : null;
+    const handleReject = useCallback(async (feedback, label, onDone) => {
+        if (!reviewNode?.featureId)
+            return;
+        setIsRejecting(true);
+        try {
+            const result = await rejectFeature(reviewNode.featureId, feedback);
+            if (!result.rejected) {
+                toast.error(result.error ?? `Failed to reject ${label.toLowerCase()}`);
+                return;
+            }
+            rejectSound.play();
+            toast.success(`${label} rejected — agent re-iterating (iteration ${result.iteration})`);
+            if (result.iterationWarning) {
+                toast.warning(`Iteration ${result.iteration} — consider approving or adjusting feedback to avoid excessive iterations`);
+            }
+            onClose();
+            onDone?.();
+        }
+        finally {
+            setIsRejecting(false);
+        }
+    }, [reviewNode, onClose, rejectSound]);
+    const handlePrdReject = useCallback((feedback) => handleReject(feedback, 'Requirements', () => setPrdSelections({})), [handleReject]);
+    const handleTechReject = useCallback((feedback) => handleReject(feedback, 'Plan'), [handleReject]);
+    const handleMergeReject = useCallback((feedback) => handleReject(feedback, 'Merge'), [handleReject]);
+    const handleSimpleApprove = useCallback(async (label) => {
+        if (!reviewNode?.featureId)
+            return;
+        const result = await approveFeature(reviewNode.featureId);
+        if (!result.approved) {
+            toast.error(result.error ?? `Failed to approve ${label.toLowerCase()}`);
+            return;
+        }
+        toast.success(`${label} approved — agent resuming`);
+        onClose();
+    }, [reviewNode, onClose]);
+    const handlePrdApprove = useCallback(async (_actionId) => {
+        if (view?.type !== 'prd-review')
+            return;
+        let payload;
+        if (prdData) {
+            const changedSelections = [];
+            for (const [questionId, optionId] of Object.entries(prdSelections)) {
+                const question = prdData.questions.find((q) => q.id === questionId);
+                const option = question?.options.find((o) => o.id === optionId);
+                if (question && option) {
+                    changedSelections.push({ questionId: question.question, selectedOption: option.label });
+                }
+            }
+            payload = { approved: true, changedSelections };
+        }
+        const result = await approveFeature(view.node.featureId, payload);
+        if (!result.approved) {
+            toast.error(result.error ?? 'Failed to approve requirements');
+            return;
+        }
+        toast.success('Requirements approved — agent resuming');
+        setPrdSelections({});
+        onClose();
+    }, [view, prdData, prdSelections, onClose]);
+    const handleTechApprove = useCallback(() => handleSimpleApprove('Plan'), [handleSimpleApprove]);
+    const handleMergeApprove = useCallback(() => handleSimpleApprove('Merge'), [handleSimpleApprove]);
+    // ── Derived view data ───────────────────────────────────────────────────
+    const isCreateView = view?.type === 'feature-create';
+    const createView = isCreateView ? view : null;
+    const featureNode = view?.type === 'feature' ||
+        view?.type === 'prd-review' ||
+        view?.type === 'tech-review' ||
+        view?.type === 'merge-review'
+        ? view.node
+        : null;
+    const repoData = view?.type === 'repository' ? view.data : null;
+    // ── Hooks (always called unconditionally per Rules of Hooks) ────────────
+    const featureActionsInput = featureNode?.repositoryPath && featureNode?.branch
+        ? {
+            repositoryPath: featureNode.repositoryPath,
+            branch: featureNode.branch,
+            specPath: featureNode.specPath,
+        }
+        : null;
+    const featureActions = useFeatureActions(featureActionsInput);
+    const repoActions = useRepositoryActions(repoData?.repositoryPath ? { repositoryPath: repoData.repositoryPath } : null);
+    // ── Header ──────────────────────────────────────────────────────────────
+    let header = undefined;
+    if (featureNode) {
+        header = (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: featureNode.name }), featureNode.description ? (_jsx(DrawerDescription, { children: featureNode.description })) : featureNode.featureId ? (_jsx(DrawerDescription, { className: "sr-only", children: featureNode.featureId })) : null] }), featureActionsInput ? (_jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(OpenActionMenu, { actions: featureActions, repositoryPath: featureActionsInput.repositoryPath, showSpecs: !!featureActionsInput.specPath }), onDelete && featureNode.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": "feature-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: featureNode.name }), " (", featureNode.featureId, "). This action cannot be undone.", featureNode.state === 'running' ? (_jsx(_Fragment, { children: " This feature has a running agent that will be stopped." })) : null] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", disabled: isDeleting, onClick: () => onDelete(featureNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })] })) : null] })) : null] }));
+    }
+    else if (repoData) {
+        header = (_jsxs("div", { "data-testid": "repository-drawer-header", children: [_jsx(DrawerTitle, { children: repoData.name }), repoData.repositoryPath ? (_jsx(DrawerDescription, { className: "truncate font-mono text-xs", children: repoData.repositoryPath })) : null] }));
+    }
+    // ── Body ────────────────────────────────────────────────────────────────
+    let body = null;
+    if (view?.type === 'feature' && featureNode) {
+        body = (_jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[featureNode.lifecycle] }), _jsx(FeatureStateBadge, { data: featureNode }), featureNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [featureNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[featureNode.state].progressClass), style: { width: `${featureNode.progress}%` } }) })] })) : null] }), featureNode.pr ? (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(FeaturePrInfo, { pr: featureNode.pr })] })) : null, _jsx(FeatureDetails, { data: featureNode })] }));
+    }
+    else if (view?.type === 'prd-review') {
+        body = prdData ? (_jsx(PrdQuestionnaire, { data: prdData, selections: prdSelections, onSelect: (qId, oId) => setPrdSelections((prev) => ({ ...prev, [qId]: oId })), onApprove: handlePrdApprove, onReject: handlePrdReject, isProcessing: isLoadingPrd, isRejecting: isRejecting })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
+    }
+    else if (view?.type === 'tech-review') {
+        body = techData ? (_jsx(TechDecisionsReview, { data: techData, onApprove: handleTechApprove, onReject: handleTechReject, isProcessing: isLoadingTech, isRejecting: isRejecting })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
+    }
+    else if (view?.type === 'merge-review') {
+        body = mergeData ? (_jsx(MergeReview, { data: mergeData, onApprove: handleMergeApprove, onReject: handleMergeReject, isProcessing: isLoadingMerge, isRejecting: isRejecting })) : (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin" }) }));
+    }
+    else if (view?.type === 'repository' && repoData?.repositoryPath) {
+        body = (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "OPEN WITH" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ActionButton, { label: "Open in IDE", onClick: repoActions.openInIde, loading: repoActions.ideLoading, error: !!repoActions.ideError, icon: Code2, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open in Shell", onClick: repoActions.openInShell, loading: repoActions.shellLoading, error: !!repoActions.shellError, icon: Terminal, variant: "outline", size: "sm" }), _jsx(ActionButton, { label: "Open Folder", onClick: repoActions.openFolder, loading: repoActions.folderLoading, error: !!repoActions.folderError, icon: FolderOpen, variant: "outline", size: "sm" })] })] })] }));
+    }
+    // ── Render ──────────────────────────────────────────────────────────────
+    return (_jsxs(_Fragment, { children: [_jsx(BaseDrawer, { open: view !== null && !isCreateView, onClose: onClose, size: "md", modal: false, header: header, "data-testid": view?.type === 'feature'
+                    ? 'feature-drawer'
+                    : view?.type === 'repository'
+                        ? 'repository-drawer'
+                        : 'review-drawer', children: body }), _jsx(FeatureCreateDrawer, { open: isCreateView, onClose: onClose, onSubmit: onCreateSubmit, repositoryPath: createView?.repositoryPath ?? '', features: createView?.features ?? [], workflowDefaults: createView?.workflowDefaults, initialParentId: createView?.initialParentId, isSubmitting: isSubmitting })] }));
+}
+// ── Private sub-components ────────────────────────────────────────────────────
+function FeatureStateBadge({ data }) {
+    const config = featureNodeStateConfig[data.state];
+    const Icon = config.icon;
+    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
+}
+const prStatusStyles = {
+    [PrStatus.Open]: 'border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50',
+    [PrStatus.Merged]: 'border-transparent bg-purple-50 text-purple-700 hover:bg-purple-50',
+    [PrStatus.Closed]: 'border-transparent bg-red-50 text-red-700 hover:bg-red-50',
+};
+function FeaturePrInfo({ pr }) {
+    return (_jsx("div", { "data-testid": "feature-drawer-pr", className: "border-border mx-4 rounded-lg border", children: _jsxs("div", { className: "space-y-3 px-4 py-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("a", { href: pr.url, target: "_blank", rel: "noopener noreferrer", className: "text-primary flex items-center gap-1.5 text-sm font-semibold underline underline-offset-2", children: ["PR #", pr.number, _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }), _jsx(Badge, { className: prStatusStyles[pr.status], children: pr.status })] }), pr.ciStatus ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "CI Status" }), _jsx(CiStatusBadge, { status: pr.ciStatus })] })) : null, pr.commitHash ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Commit" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3.5 w-3.5" }), _jsx("code", { className: "bg-muted text-foreground rounded-md px-1.5 py-0.5 font-mono text-[11px]", children: pr.commitHash.slice(0, 7) })] })] })) : null] }) }));
+}
+function FeatureDetails({ data }) {
+    const hasAnyDetail = data.agentType ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+    if (!hasAnyDetail)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.agentType ? _jsx(DetailRow, { label: "Agent", value: data.agentType }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] })] }));
+}
+function DetailRow({ label, value }) {
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
+}

package/dist/src/presentation/web/components/common/control-center-drawer/control-center-drawer.stories.d.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlCenterDrawer } from './control-center-drawer.js';
+declare const meta: Meta<typeof ControlCenterDrawer>;
+export default meta;
+type Story = StoryObj<typeof ControlCenterDrawer>;
+/** Feature info view — running state with progress. Default story. */
+export declare const Default: Story;
+/** Feature info view — completed (maintain lifecycle, done state, merged PR). */
+export declare const FeatureDone: Story;
+/** Feature info view — error state. */
+export declare const FeatureError: Story;
+/**
+ * PRD review view — loads questionnaire data via server action.
+ * Shows spinner in Storybook (no real API available).
+ */
+export declare const PrdReview: Story;
+/**
+ * Tech decisions review view — loads research artifact via server action.
+ * Shows spinner in Storybook.
+ */
+export declare const TechReview: Story;
+/**
+ * Merge review view — loads merge review data via server action.
+ * Shows spinner in Storybook.
+ */
+export declare const MergeReview: Story;
+/** Feature create form. */
+export declare const FeatureCreate: Story;
+/** Repository actions view. */
+export declare const Repository: Story;
+/** Interactive — click any view type to open that drawer panel. */
+export declare const AllViews: Story;
+//# sourceMappingURL=control-center-drawer.stories.d.ts.map

package/dist/src/presentation/web/components/common/control-center-drawer/control-center-drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-center-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/control-center-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAO1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AA+JlD,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AA0DF,mEAAmE;AACnE,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}