@shepai/cli 1.71.0 → 1.72.1

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

@@ -0,0 +1,388 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { toast } from 'sonner';
+import { Loader2, Trash2, ExternalLink, GitCommitHorizontal, Play, Square } 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 { deleteFeature } from '../../../app/actions/delete-feature.js';
+import { cn } from '../../../lib/utils.js';
+import { featureFlags } from '../../../lib/feature-flags.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
+import { useDeployAction } from '../../../hooks/use-deploy-action.js';
+import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { DeploymentStatusBadge } from '../../common/deployment-status-badge/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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.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 { PrdQuestionnaire } from '../../common/prd-questionnaire/index.js';
+import { TechReviewTabs } from '../../common/tech-review-tabs/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 { mapEventTypeToState, mapPhaseNameToLifecycle, } from '../../common/feature-node/derive-feature-state.js';
+export function FeatureDrawerClient({ view: initialView }) {
+    const router = useRouter();
+    const deleteSound = useSoundAction('delete');
+    const rejectSound = useSoundAction('reject');
+    // Track the view locally so SSE events can update the drawer type in real-time
+    const [view, setView] = useState(initialView);
+    // Sync when server re-renders with new props (e.g. after router.refresh())
+    useEffect(() => {
+        setView(initialView);
+    }, [initialView]);
+    const featureNode = view.type === 'feature' ||
+        view.type === 'prd-review' ||
+        view.type === 'tech-review' ||
+        view.type === 'merge-review'
+        ? view.node
+        : null;
+    // SSE: update drawer view when feature state changes
+    const { events } = useAgentEventsContext();
+    const processedCountRef = useRef(0);
+    useEffect(() => {
+        if (!featureNode || events.length <= processedCountRef.current)
+            return;
+        const newEvents = events.slice(processedCountRef.current);
+        processedCountRef.current = events.length;
+        for (const event of newEvents) {
+            if (event.featureId !== featureNode.featureId)
+                continue;
+            const newState = mapEventTypeToState(event.eventType);
+            const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
+            // Trigger a server refresh to get the latest drawer view
+            router.refresh();
+            // Optimistically update the node data for immediate UI feedback
+            setView((prev) => {
+                if (prev.type !== 'feature' &&
+                    prev.type !== 'prd-review' &&
+                    prev.type !== 'tech-review' &&
+                    prev.type !== 'merge-review')
+                    return prev;
+                return {
+                    ...prev,
+                    node: {
+                        ...prev.node,
+                        state: newState,
+                        ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
+                    },
+                };
+            });
+        }
+    }, [events, featureNode, router]);
+    // Derive open state from the URL. Next.js parallel routes preserve slot
+    // content during soft navigation, so this component is NOT unmounted when
+    // navigating to `/`. Instead, we watch the pathname and let Vaul handle
+    // the close animation when the path no longer matches a feature route.
+    const pathname = usePathname();
+    const isOpen = pathname.startsWith('/feature/');
+    const onClose = useCallback(() => {
+        router.push('/');
+    }, [router]);
+    // ── PRD state ──────────────────────────────────────────────────────────
+    const [prdData, setPrdData] = useState(null);
+    const [prdSelections, setPrdSelections] = useState({});
+    const [isLoadingPrd, setIsLoadingPrd] = useState(false);
+    // ── Tech state ─────────────────────────────────────────────────────────
+    const [techData, setTechData] = useState(null);
+    const [isLoadingTech, setIsLoadingTech] = useState(false);
+    // ── Product decisions state (for tech review Product tab) ─────────────
+    const [techProductData, setTechProductData] = useState(undefined);
+    const [isLoadingTechProduct, setIsLoadingTechProduct] = useState(false);
+    // ── Merge state ────────────────────────────────────────────────────────
+    const [mergeData, setMergeData] = useState(null);
+    const [isLoadingMerge, setIsLoadingMerge] = useState(false);
+    // ── Delete state ───────────────────────────────────────────────────────
+    const [isDeleting, setIsDeleting] = useState(false);
+    // ── Shared reject state ────────────────────────────────────────────────
+    const [isRejecting, setIsRejecting] = useState(false);
+    // ── 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]);
+    useEffect(() => {
+        setTechProductData(undefined);
+        if (!techFeatureId)
+            return;
+        let cancelled = false;
+        setIsLoadingTechProduct(true);
+        getFeatureArtifact(techFeatureId)
+            .then((result) => {
+            if (cancelled)
+                return;
+            if (result.productDecisions) {
+                setTechProductData(result.productDecisions);
+            }
+        })
+            .catch(() => {
+            // Silent failure — the product tab is supplementary
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoadingTechProduct(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]);
+    const handleDelete = useCallback(async (featureId) => {
+        setIsDeleting(true);
+        try {
+            const result = await deleteFeature(featureId);
+            if (result.error) {
+                toast.error(result.error);
+                return;
+            }
+            deleteSound.play();
+            toast.success('Feature deleted successfully');
+            router.push('/');
+            router.refresh();
+        }
+        catch {
+            toast.error('Failed to delete feature');
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }, [router, deleteSound]);
+    // ── 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 featureDeployTarget = featureNode?.repositoryPath && featureNode.branch
+        ? {
+            targetId: featureNode.featureId,
+            targetType: 'feature',
+            repositoryPath: featureNode.repositoryPath,
+            branch: featureNode.branch,
+        }
+        : null;
+    const deployAction = useDeployAction(featureDeployTarget);
+    const isFeatureDeployActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
+    // ── 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 }), featureFlags.envDeploy && featureDeployTarget ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsx(ActionButton, { label: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isFeatureDeployActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isFeatureDeployActive ? Square : Play, iconOnly: true, variant: "outline", size: "icon-sm" }) }) }), _jsx(TooltipContent, { children: isFeatureDeployActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isFeatureDeployActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: featureDeployTarget?.targetId })) : null] })) : null, featureNode.featureId ? (_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 ml-auto", "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: () => handleDelete(featureNode.featureId), children: isDeleting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Deleting\u2026"] })) : ('Delete') })] })] })] })) : null] })) : 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(TechReviewTabs, { techData: techData, productData: isLoadingTechProduct ? null : techProductData, 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" }) }));
+    }
+    return (_jsx(BaseDrawer, { open: isOpen, onClose: onClose, size: "md", modal: false, header: header, "data-testid": view.type === 'feature'
+            ? 'feature-drawer'
+            : view.type === 'repository'
+                ? 'repository-drawer'
+                : 'review-drawer', children: body }));
+}
+// ── 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 })] }));
+}
+function FeaturePrInfo({ pr }) {
+    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',
+    };
+    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/repository-drawer-client.d.ts

@@ -0,0 +1,6 @@
+import type { RepositoryNodeData } from '../../common/repository-node/index.js';
+export interface RepositoryDrawerClientProps {
+    data: RepositoryNodeData;
+}
+export declare function RepositoryDrawerClient({ data }: RepositoryDrawerClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=repository-drawer-client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"repository-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/repository-drawer-client.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,EAAE,2BAA2B,2CAgF3E"}

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Code2, Terminal, FolderOpen } from 'lucide-react';
+import { BaseDrawer } from '../../common/base-drawer/index.js';
+import { ActionButton } from '../../common/action-button/index.js';
+import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
+import { Separator } from '../../ui/separator.js';
+import { useRepositoryActions } from '../../common/repository-node/use-repository-actions.js';
+import { featureFlags } from '../../../lib/feature-flags.js';
+export function RepositoryDrawerClient({ data }) {
+    const router = useRouter();
+    const repoActions = useRepositoryActions(data.repositoryPath ? { repositoryPath: data.repositoryPath } : null);
+    const onClose = useCallback(() => {
+        router.push('/');
+    }, [router]);
+    const repoDeployTarget = data.repositoryPath
+        ? {
+            targetId: data.repositoryPath,
+            targetType: 'repository',
+            repositoryPath: data.repositoryPath,
+        }
+        : undefined;
+    const header = (_jsxs("div", { "data-testid": "repository-drawer-header", children: [_jsx(DrawerTitle, { children: data.name }), data.repositoryPath ? (_jsx(DrawerDescription, { className: "truncate font-mono text-xs", children: data.repositoryPath })) : null] }));
+    return (_jsx(BaseDrawer, { open: true, onClose: onClose, size: "md", modal: false, header: header, deployTarget: featureFlags.envDeploy ? repoDeployTarget : undefined, "data-testid": "repository-drawer", children: data.repositoryPath ? (_jsxs("div", { className: "flex-1 overflow-y-auto", 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" })] })] })] })) : null }));
+}

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;AAc5E,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,2CAiMzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAa5E,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,2CAmMzF"}

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

@@ -1,15 +1,20 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
-import { ControlCenterDrawer, computeDrawerView } from '../../common/control-center-drawer/index.js';
 import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
-import { getWorkflowDefaults } from '../../../app/actions/get-workflow-defaults.js';
 import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../../hooks/sidebar-features-context.js';
+import { useSelectedFeatureId } from '../../../hooks/use-selected-feature-id.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.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, handleDeleteRepository, closeCreateDrawer, selectFeatureById, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
+    const router = useRouter();
+    const pathname = usePathname();
+    const selectedFeatureId = useSelectedFeatureId();
+    const clickSound = useSoundAction('click');
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
     const sidebarKey = useMemo(() => {
@@ -41,55 +46,59 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             .filter(Boolean);
         setSidebarFeatures(sidebarItems);
     }, [sidebarKey, nodes, setSidebarFeatures]);
-    // Feature list for the parent selector in the create drawer
-    const featureOptions = useMemo(() => nodes
-        .filter((n) => n.type === 'featureNode')
-        .map((n) => {
-        const data = n.data;
-        return { id: data.featureId, name: data.name };
-    })
-        .filter((f) => f.id && !f.id.startsWith('#')), [nodes]);
-    // Workflow defaults for the create-feature drawer
-    const [workflowDefaults, setWorkflowDefaults] = useState();
-    useEffect(() => {
-        getWorkflowDefaults()
-            .then(setWorkflowDefaults)
-            .catch(() => {
-            // Settings unavailable — create drawer falls back to all-false defaults
-        });
-    }, []);
-    // Repository drawer state (independent of feature selection)
-    const [selectedRepoNode, setSelectedRepoNode] = useState(null);
-    // Close all drawers — used on pane click and canvas drag
-    const handleClearDrawers = useCallback(() => {
-        clearSelection();
-        setSelectedRepoNode(null);
-        closeCreateDrawer();
-    }, [clearSelection, closeCreateDrawer]);
-    // Open repository drawer when a repo node is clicked
+    // ── URL-based navigation handlers ────────────────────────────────────
+    const handleNodeClick = useCallback((_event, node) => {
+        if (node.type === 'featureNode') {
+            const data = node.data;
+            if (data.state === 'creating')
+                return;
+            clickSound.play();
+            router.push(`/feature/${data.featureId}`);
+        }
+    }, [router, clickSound]);
+    const handleAddFeature = useCallback(() => {
+        clickSound.play();
+        router.push('/create');
+    }, [router, clickSound]);
+    const handleAddFeatureToRepo = useCallback((repoNodeId) => {
+        clickSound.play();
+        const node = nodes.find((n) => n.id === repoNodeId);
+        const repoPath = node?.data?.repositoryPath;
+        if (repoPath) {
+            router.push(`/create?repo=${encodeURIComponent(repoPath)}`);
+        }
+        else {
+            router.push('/create');
+        }
+    }, [nodes, router, clickSound]);
+    const handleAddFeatureToFeature = useCallback((featureNodeId) => {
+        const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
+        // Find the repo node that owns this feature
+        const repoEdge = edges.find((e) => e.target === featureNodeId);
+        const repoNode = repoEdge ? nodes.find((n) => n.id === repoEdge.source) : null;
+        const repoPath = repoNode?.data?.repositoryPath;
+        clickSound.play();
+        const params = new URLSearchParams();
+        if (repoPath)
+            params.set('repo', repoPath);
+        params.set('parent', featureId);
+        router.push(`/create?${params.toString()}`);
+    }, [nodes, edges, router, clickSound]);
     const handleRepositoryClick = useCallback((nodeId) => {
         const node = nodes.find((n) => n.id === nodeId);
         if (node?.type === 'repositoryNode') {
-            clearSelection();
-            setSelectedRepoNode(node.data);
+            const data = node.data;
+            if (data.id) {
+                router.push(`/repository/${data.id}`);
+            }
         }
-    }, [nodes, clearSelection]);
-    // Derive the single active drawer view from all current state
-    const drawerView = computeDrawerView({
-        selectedNode,
-        isCreateDrawerOpen,
-        pendingRepositoryPath,
-        pendingParentFeatureId,
-        selectedRepoNode,
-        features: featureOptions,
-        workflowDefaults,
-    });
-    // 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]);
+    }, [nodes, router]);
+    // Close all drawers — navigate back to root
+    const handleClearDrawers = useCallback(() => {
+        if (pathname !== '/') {
+            router.push('/');
+        }
+    }, [router, pathname]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {
@@ -99,18 +108,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:add-repository', handler);
         return () => window.removeEventListener('shep:add-repository', handler);
     }, [handleAddRepository]);
-    // Listen for notification "Review" clicks to open the relevant drawer
+    // Listen for optimistic create events from the create drawer
     useEffect(() => {
         const handler = (e) => {
-            const featureId = e.detail.featureId;
-            selectFeatureById(featureId);
+            const detail = e.detail;
+            // Find the repo node to connect to
+            const repoNode = nodes.find((n) => n.type === 'repositoryNode' &&
+                n.data.repositoryPath === detail.repositoryPath);
+            createFeatureNode(repoNode?.id ?? null, {
+                state: 'creating',
+                name: detail.name,
+                description: detail.description,
+                repositoryPath: detail.repositoryPath,
+            });
         };
-        window.addEventListener('shep:select-feature', handler);
-        return () => window.removeEventListener('shep:select-feature', handler);
-    }, [selectFeatureById]);
+        window.addEventListener('shep:feature-created', handler);
+        return () => window.removeEventListener('shep:feature-created', handler);
+    }, [nodes, createFeatureNode]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
     if (!hasRepositories) {
-        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onFeatureDelete: handleDeleteFeature, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, selectedFeatureId: selectedFeatureId, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onFeatureDelete: handleDeleteFeature, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) })] }));
 }

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

@@ -1,8 +1,11 @@
+import type { ReactNode } from 'react';
 import type { Edge } from '@xyflow/react';
 import type { CanvasNodeType } from '../../features/features-canvas/index.js';
 export interface ControlCenterProps {
     initialNodes: CanvasNodeType[];
     initialEdges: Edge[];
+    /** Drawer content rendered by the @drawer parallel route slot. */
+    drawer?: ReactNode;
 }
-export declare function ControlCenter({ initialNodes, initialEdges }: ControlCenterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ControlCenter({ initialNodes, initialEdges, drawer }: ControlCenterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=control-center.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-center.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAG5E,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAQ/E"}
+{"version":3,"file":"control-center.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAG5E,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,kBAAkB,2CASvF"}