@shepai/cli 1.95.0 → 1.96.0-pr281.fcbc0cd

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

@@ -99,7 +99,14 @@ export function useControlCenterState(initialNodes, initialEdges) {
         processedEventCountRef.current = events.length;
         for (const { featureId, state, lifecycle } of resolveSseEventUpdates(newEvents)) {
             if (state !== undefined || lifecycle !== undefined) {
-                updateFeature(`feat-${featureId}`, {
+                const nodeId = `feat-${featureId}`;
+                // Skip SSE updates for features in 'deleting' state — the optimistic
+                // delete state must not be overwritten by stale SSE events (e.g. agent
+                // cancellation emitting AgentFailed during the soft-delete window).
+                const existingNode = nodesRef.current.find((n) => n.id === nodeId);
+                if (existingNode && existingNode.data.state === 'deleting')
+                    continue;
+                updateFeature(nodeId, {
                     ...(state !== undefined && { state }),
                     ...(lifecycle !== undefined && { lifecycle }),
                 });
@@ -192,32 +199,62 @@ export function useControlCenterState(initialNodes, initialEdges) {
     }, [addPendingFeature]);
     const handleDeleteFeature = useCallback((featureId, cleanup) => {
         const nodeId = `feat-${featureId}`;
-        // Find the current entry for rollback
-        const prevEntry = nodesRef.current
-            .filter((n) => n.id === nodeId)
-            .map((n) => ({
-            nodeId: n.id,
-            data: n.data,
-        }))[0];
-        // Optimistic removal
-        removeFeature(nodeId);
+        // Collect all descendant feature node IDs (children, grandchildren, etc.)
+        const descendants = [];
+        const queue = [nodeId];
+        while (queue.length > 0) {
+            const current = queue.shift();
+            for (const edge of edgesRef.current) {
+                if (edge.type === 'dependencyEdge' && edge.source === current) {
+                    descendants.push(edge.target);
+                    queue.push(edge.target);
+                }
+            }
+        }
+        // Snapshot current states for rollback (parent + descendants)
+        const prevStates = new Map();
+        for (const nid of [nodeId, ...descendants]) {
+            const node = nodesRef.current.find((n) => n.id === nid);
+            if (node) {
+                prevStates.set(nid, node.data.state);
+            }
+        }
+        // Optimistic: show "deleting" state on parent AND all descendants
+        updateFeature(nodeId, { state: 'deleting' });
+        for (const childId of descendants) {
+            updateFeature(childId, { state: 'deleting' });
+        }
         deleteSound.play();
-        toast.success('Feature deleted successfully');
+        toast.success('Deleting feature…');
         router.push('/');
         deleteFeature(featureId, cleanup)
             .then((result) => {
             if (result.error) {
-                if (prevEntry)
-                    restoreFeature(nodeId, prevEntry);
+                // Rollback all to previous states
+                for (const [nid, prevState] of prevStates) {
+                    if (prevState)
+                        updateFeature(nid, { state: prevState });
+                }
                 toast.error(result.error);
             }
+            else {
+                // Delete succeeded — remove features from the canvas.  The polling
+                // reconcile would eventually clean them up, but we remove them
+                // explicitly so the user sees them disappear promptly.
+                removeFeature(nodeId);
+                for (const childId of descendants) {
+                    removeFeature(childId);
+                }
+            }
         })
             .catch(() => {
-            if (prevEntry)
-                restoreFeature(nodeId, prevEntry);
+            for (const [nid, prevState] of prevStates) {
+                if (prevState)
+                    updateFeature(nid, { state: prevState });
+            }
             toast.error('Failed to delete feature');
         });
-    }, [router, deleteSound, removeFeature, restoreFeature]);
+    }, [router, deleteSound, updateFeature, removeFeature]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
         // Find children of this repo via edges

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

@@ -0,0 +1,6 @@
+export interface WelcomeAgentSetupProps {
+    onComplete: () => void;
+    className?: string;
+}
+export declare function WelcomeAgentSetup({ onComplete, className }: WelcomeAgentSetupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=welcome-agent-setup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"welcome-agent-setup.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAoTlF"}

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Check, ChevronRight, ChevronLeft, Download, Loader2, CheckCircle2, Circle, AlertCircle, Bot, Terminal, ExternalLink, } from 'lucide-react';
+import { getAllAgentModels } from '../../../app/actions/get-all-agent-models.js';
+import { checkAgentTool } from '../../../app/actions/check-agent-tool.js';
+import { updateAgentAndModel } from '../../../app/actions/update-agent-and-model.js';
+import { getAgentTypeIcon } from '../../common/feature-node/agent-type-icons.js';
+import { getModelMeta } from '../../../lib/model-metadata.js';
+import { useToolInstallStream } from '../../../hooks/use-tool-install-stream.js';
+import { cn } from '../../../lib/utils.js';
+const STEPS = ['select-agent', 'select-model', 'check-tool', 'authenticate'];
+/** Fixed width for the wizard content area to prevent layout jumps */
+const WIZARD_WIDTH = 'w-72';
+export function WelcomeAgentSetup({ onComplete, className }) {
+    const [groups, setGroups] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [step, setStep] = useState('select-agent');
+    const [selectedAgent, setSelectedAgent] = useState(null);
+    const [selectedModel, setSelectedModel] = useState(null);
+    const [toolStatus, setToolStatus] = useState(null);
+    const [checkingTool, setCheckingTool] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [transitioning, setTransitioning] = useState(false);
+    const [visible, setVisible] = useState(true);
+    const timeoutRef = useRef(undefined);
+    useEffect(() => {
+        getAllAgentModels()
+            .then(setGroups)
+            .finally(() => setLoading(false));
+    }, []);
+    const activeGroup = selectedAgent ? groups.find((g) => g.agentType === selectedAgent) : null;
+    /** Animate step transition: fade out → change step → fade in */
+    const transitionTo = useCallback((nextStep, setup) => {
+        setTransitioning(true);
+        setVisible(false);
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            setup?.();
+            setStep(nextStep);
+            // Small delay to let React render the new content before fading in
+            requestAnimationFrame(() => {
+                setVisible(true);
+                setTransitioning(false);
+            });
+        }, 150);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    const handleAgentSelect = useCallback((agentType) => {
+        const group = groups.find((g) => g.agentType === agentType);
+        if (group && group.models.length > 0) {
+            transitionTo('select-model', () => {
+                setSelectedAgent(agentType);
+            });
+        }
+        else {
+            transitionTo('check-tool', () => {
+                setSelectedAgent(agentType);
+                setSelectedModel('');
+            });
+        }
+    }, [groups, transitionTo]);
+    const handleModelSelect = useCallback((model) => {
+        transitionTo('check-tool', () => {
+            setSelectedModel(model);
+        });
+    }, [transitionTo]);
+    const handleProceedToAuth = useCallback(() => {
+        transitionTo('authenticate');
+    }, [transitionTo]);
+    const handleBack = useCallback(() => {
+        if (step === 'select-model') {
+            transitionTo('select-agent', () => {
+                setSelectedAgent(null);
+            });
+        }
+        else if (step === 'check-tool') {
+            if (activeGroup && activeGroup.models.length > 0) {
+                transitionTo('select-model', () => {
+                    setSelectedModel(null);
+                });
+            }
+            else {
+                transitionTo('select-agent', () => {
+                    setSelectedAgent(null);
+                });
+            }
+        }
+        else if (step === 'authenticate') {
+            // If tool needed install, go back to check-tool; otherwise skip to model/agent
+            if (toolStatus && !toolStatus.installed && toolStatus.toolId) {
+                transitionTo('check-tool');
+            }
+            else if (activeGroup && activeGroup.models.length > 0) {
+                transitionTo('select-model', () => {
+                    setSelectedModel(null);
+                });
+            }
+            else {
+                transitionTo('select-agent', () => {
+                    setSelectedAgent(null);
+                });
+            }
+        }
+    }, [step, activeGroup, toolStatus, transitionTo]);
+    useEffect(() => {
+        if (step !== 'check-tool' || !selectedAgent)
+            return;
+        setCheckingTool(true);
+        checkAgentTool(selectedAgent)
+            .then((status) => {
+            setToolStatus(status);
+            // Auto-skip to authenticate when tool is already available or not required
+            if (status.installed || !status.toolId) {
+                transitionTo('authenticate');
+            }
+        })
+            .finally(() => setCheckingTool(false));
+    }, [step, selectedAgent, transitionTo]);
+    const handleConfirm = useCallback(async () => {
+        if (!selectedAgent)
+            return;
+        setSaving(true);
+        try {
+            await updateAgentAndModel(selectedAgent, selectedModel ?? null);
+            onComplete();
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [selectedAgent, selectedModel, onComplete]);
+    if (loading) {
+        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center justify-center gap-3', className), children: [_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Loading agents\u2026" })] }));
+    }
+    const stepIndex = STEPS.indexOf(step);
+    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center gap-4', WIZARD_WIDTH, className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [step === 'select-agent' && (_jsxs(_Fragment, { children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Choose your agent" })] })), step === 'select-model' && activeGroup
+                            ? (() => {
+                                const AgentIcon = getAgentTypeIcon(activeGroup.agentType);
+                                return (_jsxs(_Fragment, { children: [_jsx(AgentIcon, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: [activeGroup.label, " \u2014 Pick a model"] })] }));
+                            })()
+                            : null, step === 'check-tool' && (_jsxs(_Fragment, { children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Verifying setup" })] })), step === 'authenticate' && activeGroup
+                            ? (() => {
+                                const AgentIcon = getAgentTypeIcon(activeGroup.agentType);
+                                return (_jsxs(_Fragment, { children: [_jsx(AgentIcon, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Authenticate" })] }));
+                            })()
+                            : null] }) }), _jsx("div", { className: "flex w-32 items-center gap-1", children: STEPS.map((s, i) => (_jsx("div", { className: cn('h-0.5 flex-1 rounded-full transition-colors duration-300', i <= stepIndex ? 'bg-foreground/60' : 'bg-muted') }, s))) }), _jsxs("div", { className: cn('flex w-full flex-col items-center transition-opacity duration-150', visible && !transitioning ? 'opacity-100' : 'opacity-0'), children: [step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", className: "flex w-full flex-col gap-1.5", children: groups.map((group) => {
+                            const GroupIcon = getAgentTypeIcon(group.agentType);
+                            return (_jsxs("button", { type: "button", "data-testid": `agent-option-${group.agentType}`, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 transition-colors", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs font-medium", children: group.label }), _jsx(ChevronRight, { className: "text-muted-foreground h-3 w-3" })] }, group.agentType));
+                        }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", className: "flex w-full flex-col gap-1.5", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground mb-0.5 flex cursor-pointer items-center gap-1 self-start text-[10px] font-medium transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-3 w-3" }), "Back"] }), _jsx("div", { className: "flex max-h-48 w-full flex-col gap-1.5 overflow-y-auto", children: activeGroup.models.map((m) => {
+                                    const meta = getModelMeta(m.id);
+                                    return (_jsxs("button", { type: "button", "data-testid": `model-option-${m.id}`, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 text-left transition-colors", onClick: () => handleModelSelect(m.id), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-[10px] leading-tight", children: meta.description || m.description })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-3 w-3 shrink-0" })] }, m.id));
+                                }) })] })) : null, step === 'check-tool' && (_jsx(ToolCheckStep, { toolStatus: toolStatus, checking: checkingTool, saving: false, onConfirm: handleProceedToAuth, onBack: handleBack, onToolInstalled: () => {
+                            if (selectedAgent) {
+                                setCheckingTool(true);
+                                checkAgentTool(selectedAgent)
+                                    .then(setToolStatus)
+                                    .finally(() => setCheckingTool(false));
+                            }
+                        } })), step === 'authenticate' && toolStatus ? (_jsx(AuthenticateStep, { toolStatus: toolStatus, agentLabel: activeGroup?.label ?? selectedAgent ?? 'Agent', saving: saving, onConfirm: handleConfirm, onBack: handleBack })) : null] })] }));
+}
+/** Sub-component for the tool verification step */
+function ToolCheckStep({ toolStatus, checking, saving, onConfirm, onBack, onToolInstalled, }) {
+    if (checking || !toolStatus) {
+        return (_jsxs("div", { className: "flex flex-col items-center gap-2 py-4", children: [_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-[10px]", children: "Checking tool availability\u2026" })] }));
+    }
+    // Agent doesn't require a tool (e.g., dev/demo)
+    if (!toolStatus.toolId) {
+        return (_jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-xs", children: "No additional tools required" })] }), _jsx(ConfirmRow, { saving: saving, onConfirm: onConfirm, onBack: onBack })] }));
+    }
+    if (toolStatus.installed) {
+        return (_jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "text-xs", children: [toolStatus.tool?.name ?? toolStatus.toolId, " is installed"] })] }), _jsx(ConfirmRow, { saving: saving, onConfirm: onConfirm, onBack: onBack })] }));
+    }
+    return (_jsx(ToolInstallInline, { toolStatus: toolStatus, saving: saving, onConfirm: onConfirm, onBack: onBack, onInstalled: onToolInstalled }));
+}
+/** Shared back + continue row */
+function ConfirmRow({ saving, onConfirm, onBack, label = 'Continue', }) {
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-[10px] transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3 w-3" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-border hover:border-foreground/40 flex cursor-pointer items-center gap-1.5 rounded-md border border-dashed px-4 py-2 text-xs font-medium transition-colors disabled:opacity-50", onClick: onConfirm, children: [saving ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Check, { className: "h-3 w-3" }), label] })] }));
+}
+/** Authenticate step — optional agent launch for auth */
+function AuthenticateStep({ toolStatus, agentLabel, saving, onConfirm, onBack, }) {
+    const [launching, setLaunching] = useState(false);
+    const [launched, setLaunched] = useState(false);
+    const handleLaunch = useCallback(async () => {
+        if (!toolStatus.toolId)
+            return;
+        setLaunching(true);
+        try {
+            const res = await fetch(`/api/tools/${toolStatus.toolId}/launch`, { method: 'POST' });
+            if (res.ok)
+                setLaunched(true);
+        }
+        finally {
+            setLaunching(false);
+        }
+    }, [toolStatus.toolId]);
+    // No tool = no auth needed, skip straight to confirm
+    if (!toolStatus.toolId) {
+        return (_jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [_jsx("p", { className: "text-muted-foreground text-[10px]", children: "No authentication required" }), _jsx(ConfirmRow, { saving: saving, onConfirm: onConfirm, onBack: onBack, label: "Done" })] }));
+    }
+    return (_jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [_jsxs("p", { className: "text-muted-foreground text-center text-[10px] leading-relaxed", children: ["Open ", agentLabel, " in a terminal to sign in.", _jsx("br", {}), "Follow the prompts, then come back here."] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-launch", disabled: launching, onClick: handleLaunch, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 transition-colors disabled:opacity-50", children: [launching ? (_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })) : (_jsx(Terminal, { className: "text-muted-foreground h-4 w-4" })), _jsx("span", { className: "flex-1 text-left text-xs font-medium", children: launched ? 'Open again' : `Open ${agentLabel}` }), _jsx(ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }), launched ? (_jsx("p", { className: "text-muted-foreground text-[10px]", children: "Terminal opened \u2014 complete sign-in there" })) : null, toolStatus.binaryName ? (_jsxs("div", { className: "flex w-full flex-col gap-1", children: [_jsx("p", { className: "text-muted-foreground text-[10px]", children: "Or run manually in any terminal:" }), _jsxs("div", { className: "w-full rounded-md bg-zinc-900 px-3 py-1.5 font-mono text-[11px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), toolStatus.binaryName] })] })) : null, _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-[10px] transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3 w-3" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-border hover:border-foreground/40 flex cursor-pointer items-center gap-1.5 rounded-md border border-dashed px-4 py-2 text-xs font-medium transition-colors disabled:opacity-50", onClick: onConfirm, children: [saving ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Check, { className: "h-3 w-3" }), launched ? 'Done' : 'Skip'] })] })] }));
+}
+/** Inline tool installer for the welcome wizard */
+function ToolInstallInline({ toolStatus, saving, onConfirm, onBack, onInstalled, }) {
+    const toolId = toolStatus.toolId ?? '';
+    const { logs, status, startInstall } = useToolInstallStream(toolId);
+    const isInstallDone = status === 'done';
+    const isInstallError = status === 'error';
+    useEffect(() => {
+        if (isInstallDone) {
+            onInstalled();
+        }
+    }, [isInstallDone, onInstalled]);
+    return (_jsxs("div", { className: "flex w-full flex-col items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [isInstallDone ? (_jsx(CheckCircle2, { className: "text-muted-foreground h-3.5 w-3.5" })) : isInstallError ? (_jsx(AlertCircle, { className: "text-destructive h-3.5 w-3.5" })) : (_jsx(Circle, { className: "text-muted-foreground h-3.5 w-3.5" })), _jsxs("span", { className: "text-xs", children: [toolStatus.tool?.name ?? toolId, ' ', isInstallDone ? 'installed' : isInstallError ? 'install failed' : 'is not installed'] })] }), toolStatus.tool?.installCommand && status === 'idle' ? (_jsxs("div", { className: "w-full rounded-md bg-zinc-900 px-3 py-2 font-mono text-[11px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), toolStatus.tool.installCommand] })) : null, (status === 'streaming' || isInstallDone || isInstallError) && logs.length > 0 ? (_jsxs("div", { className: "max-h-28 w-full overflow-auto rounded-md bg-zinc-900 px-3 py-2 font-mono text-[10px] leading-relaxed text-zinc-400", children: [logs.map((line, idx) => (
+                    // eslint-disable-next-line react/no-array-index-key -- logs are append-only, never reorder
+                    _jsx("div", { className: "break-all whitespace-pre-wrap", children: line }, idx))), isInstallDone ? (_jsx("div", { className: "text-muted-foreground mt-1", children: "Installation complete" })) : null, isInstallError ? (_jsx("div", { className: "text-destructive mt-1", children: "Installation failed \u2014 try manually" })) : null] })) : null, _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-[10px] transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3 w-3" }), "Back"] }), !isInstallDone && toolStatus.tool?.autoInstall ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-install", disabled: status === 'streaming', className: "border-border hover:border-foreground/40 flex cursor-pointer items-center gap-1.5 rounded-md border border-dashed px-4 py-2 text-xs font-medium transition-colors disabled:opacity-50", onClick: startInstall, children: [status === 'streaming' ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Download, { className: "h-3 w-3" })), status === 'streaming' ? 'Installing…' : 'Install'] })) : null, isInstallDone ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-border hover:border-foreground/40 flex cursor-pointer items-center gap-1.5 rounded-md border border-dashed px-4 py-2 text-xs font-medium transition-colors disabled:opacity-50", onClick: onConfirm, children: [saving ? _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) : _jsx(Check, { className: "h-3 w-3" }), "Continue"] })) : null] })] }));
+}

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WelcomeAgentSetup } from './welcome-agent-setup.js';
+declare const meta: Meta<typeof WelcomeAgentSetup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=welcome-agent-setup.stories.d.ts.map

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"welcome-agent-setup.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.stories.tsx"],"names":[],"mappings":"AAAA,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,CAcxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { WelcomeAgentSetup } from './welcome-agent-setup.js';
+const meta = {
+    title: 'Features/WelcomeAgentSetup',
+    component: WelcomeAgentSetup,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: 480, padding: 48, display: 'flex', justifyContent: 'center' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        onComplete: fn(),
+    },
+};

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

@@ -29,7 +29,7 @@ function AppShellInner({ children }) {
     const handleRepositorySelect = useCallback((path) => {
         window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
     }, []);
-    return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onNewFeature: handleNewFeature, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", children: [_jsx(AddRepositoryButton, { onSelect: handleRepositorySelect }), _jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children })] }) })] }));
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onNewFeature: handleNewFeature, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", children: [_jsx(AddRepositoryButton, { onSelect: handleRepositorySelect }), _jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children })] }) })] }));
 }
 export function AppShell({ children }) {
     return (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(AppShellInner, { children: children }) }) }) }));

package/dist/src/presentation/web/hooks/sidebar-features-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAeD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAQjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}
+{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CACvD;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAQjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}

package/dist/src/presentation/web/hooks/sidebar-features-context.js

@@ -11,6 +11,7 @@ const stateMapping = {
     blocked: 'blocked',
     error: 'error',
     creating: null,
+    deleting: null,
 };
 /**
  * Maps a canvas FeatureNodeState to the sidebar's 5-state FeatureStatus.

package/dist/src/presentation/web/hooks/use-graph-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AAWF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,mBAAmB,CAoRrB"}
+{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AAWF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,mBAAmB,CAgTrB"}

package/dist/src/presentation/web/hooks/use-graph-state.js

@@ -45,6 +45,10 @@ export function useGraphState(initialNodes, initialEdges) {
     // Buffer for SSE updates that arrive before their feature is in featureMap.
     // When reconcile adds new features, buffered updates are applied automatically.
     const pendingUpdatesRef = useRef(new Map());
+    // Track 'deleting' features that the server no longer returns.
+    // Retained for one extra reconcile cycle so the user sees the deleting state
+    // before the node disappears from the canvas.
+    const deletingRetainedRef = useRef(new Set());
     // Callbacks stored in a ref so changing them doesn't trigger re-render.
     // The stable wrapper object reads from the ref so node closures always use latest callbacks.
     const callbacksRef = useRef({});
@@ -113,6 +117,29 @@ export function useGraphState(initialNodes, initialEdges) {
                     merged.set(tempId, pendingEntry);
                 }
             }
+            // Preserve 'deleting' state for features being deleted.
+            // If the server still returns the feature, override its state to 'deleting'.
+            // If the server no longer returns it (soft-deleted), retain it for one
+            // extra reconcile cycle so the user sees the deleting animation.
+            const nextRetained = new Set();
+            for (const [id, entry] of currentFeatureMap) {
+                if (entry.data.state === 'deleting') {
+                    if (merged.has(id)) {
+                        // Server still has it — override state to keep showing 'deleting'
+                        merged.set(id, {
+                            ...merged.get(id),
+                            data: { ...merged.get(id).data, state: 'deleting' },
+                        });
+                    }
+                    else if (!deletingRetainedRef.current.has(id)) {
+                        // First reconcile after server removal — retain with deleting state
+                        merged.set(id, entry);
+                        nextRetained.add(id);
+                    }
+                    // else: already retained once — let it disappear
+                }
+            }
+            deletingRetainedRef.current = nextRetained;
             // Apply any buffered SSE updates to features that now exist in the map
             for (const [nodeId, updates] of pendingUpdatesRef.current) {
                 const entry = merged.get(nodeId);