@shepai/cli 1.177.0 → 1.178.1

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

@@ -1,11 +1,18 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { Sparkles, FolderPlus, Github, GitBranch } from 'lucide-react';
+import { FolderPlus } from 'lucide-react';
 import { useReactFlow } from '@xyflow/react';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
 import { CanvasToolbar } from '../../features/features-canvas/canvas-toolbar.js';
+import { WorkspaceSelector } from '../../features/features-canvas/workspace-selector.js';
+import { ManageWorkspaceDialog } from '../../features/features-canvas/manage-workspace-dialog.js';
+import { WorkspaceNameDialog } from '../../features/features-canvas/workspace-name-dialog.js';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '../../ui/alert-dialog.js';
+import { useWorkspaces, DEFAULT_WORKSPACE_ID } from '../../../hooks/use-workspaces.js';
+import { Layers, Plus } from 'lucide-react';
+import { Button } from '../../ui/button.js';
 import { FloatingActionButton, } from '../../common/floating-action-button/index.js';
 import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../../hooks/sidebar-features-context.js';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +25,11 @@ import { useViewportPersistence } from '../../../hooks/use-viewport-persistence.
 import { useSidebar } from '../../ui/sidebar.js';
 import { useFabLayout } from '../../../hooks/fab-layout-context.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
+import { NewProjectDialog } from './new-project-dialog.js';
 import { useControlCenterState } from './use-control-center-state.js';
+import { useCanvasEventListeners } from './use-canvas-event-listeners.js';
+import { useWorkspaceFitView } from './use-workspace-fit-view.js';
+import { useFabActions } from './use-fab-actions.js';
 const AUTO_FOCUS_OPTIONS = {
     maxZoom: 1.0,
     padding: 0.5,
@@ -26,7 +37,6 @@ const AUTO_FOCUS_OPTIONS = {
 };
 const AUTO_FOCUS_DRAWER_DELAY_MS = 600;
 export function ControlCenterInner({ initialNodes, initialEdges }) {
-    const { t } = useTranslation('web');
     const router = useRouter();
     const pathname = usePathname();
     const selectedFeatureId = useSelectedFeatureId();
@@ -37,6 +47,21 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const drawerTimerRef = useRef(null);
     const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleArchiveFeature, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleUnarchiveFeature, handleDeleteRepository, createFeatureNode, showArchived, setShowArchived, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
+    // ── Workspaces (client-only prototype) ────────────────────────────────
+    const { workspaces, activeWorkspace, isDefaultActive, setActiveWorkspace, createWorkspace, renameWorkspace, deleteWorkspace, setWorkspaceMembers, addToActiveWorkspace, } = useWorkspaces();
+    // Tracks the set of node ids we've already seen, so we can detect new
+    // repo/feature nodes appearing on the canvas and auto-include them in the
+    // active workspace (when it isn't the default).
+    const knownNodeIdsRef = useRef(new Set());
+    const [manageWorkspaceOpen, setManageWorkspaceOpen] = useState(false);
+    const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
+    const [renameWorkspaceOpen, setRenameWorkspaceOpen] = useState(false);
+    const [deleteWorkspaceOpen, setDeleteWorkspaceOpen] = useState(false);
+    // Target of the delete confirmation dialog. Allows deleting any workspace
+    // (not just the active one) directly from the workspace dropdown.
+    const [pendingDeleteWorkspaceId, setPendingDeleteWorkspaceId] = useState(null);
+    // Inline "New Project" dialog launched from the empty-workspace state.
+    const [workspaceNewProjectOpen, setWorkspaceNewProjectOpen] = useState(false);
     // Publish sidebar features + repo state to context
     const { setFeatures: setSidebarFeatures, setHasRepositories: setSidebarHasRepos } = useSidebarFeaturesContext();
     const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
@@ -165,80 +190,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             focusOnNode(tempNodeId);
         }
     }, [handleAddRepository, focusAndOpenDrawer, focusOnNode]);
-    // Listen for global "add repository" events from the top bar button
+    // All five window-level CustomEvent listeners (add-repository, feature-
+    // created, delete/archive/unarchive requests) live in this hook so the
+    // parent component stays focused on graph state + rendering.
+    useCanvasEventListeners({
+        addRepoAndFocus,
+        createFeatureNode,
+        nodes,
+        handleDeleteFeature,
+        handleArchiveFeature,
+        handleUnarchiveFeature,
+    });
+    // Cleanup the drawer timer on unmount. Used to live inside the inlined
+    // shep:add-repository listener; now standalone since the listener moved.
     useEffect(() => {
-        const handler = (e) => {
-            const path = e.detail.path;
-            addRepoAndFocus(path);
-        };
-        window.addEventListener('shep:add-repository', handler);
         return () => {
-            window.removeEventListener('shep:add-repository', handler);
             if (drawerTimerRef.current != null) {
                 clearTimeout(drawerTimerRef.current);
             }
         };
-    }, [addRepoAndFocus]);
-    // Listen for create events from the create drawer (with real feature ID from server)
-    useEffect(() => {
-        const handler = (e) => {
-            const detail = e.detail;
-            // When a parentId is provided, connect to the parent feature node
-            // via a dependency edge instead of the repo node.
-            if (detail.parentId) {
-                const parentNodeId = `feat-${detail.parentId}`;
-                createFeatureNode(parentNodeId, {
-                    state: 'creating',
-                    featureId: detail.featureId,
-                    name: detail.name,
-                    description: detail.description,
-                    repositoryPath: detail.repositoryPath,
-                }, 'dependencyEdge');
-                return;
-            }
-            // 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: 'running',
-                featureId: detail.featureId,
-                name: detail.name,
-                description: detail.description,
-                repositoryPath: detail.repositoryPath,
-            });
-        };
-        window.addEventListener('shep:feature-created', handler);
-        return () => window.removeEventListener('shep:feature-created', handler);
-    }, [nodes, createFeatureNode]);
-    // Listen for delete requests from the feature drawer (fires when the user
-    // confirms delete inside the drawer). Delegates to handleDeleteFeature so
-    // the canvas gets optimistic state, mutation guard, and node removal.
-    useEffect(() => {
-        const handler = (e) => {
-            const { featureId, cleanup, cascadeDelete, closePr } = e.detail;
-            handleDeleteFeature(featureId, cleanup, cascadeDelete, closePr);
-        };
-        window.addEventListener('shep:feature-delete-requested', handler);
-        return () => window.removeEventListener('shep:feature-delete-requested', handler);
-    }, [handleDeleteFeature]);
-    // Listen for archive requests from the feature drawer.
-    useEffect(() => {
-        const handler = (e) => {
-            const { featureId } = e.detail;
-            handleArchiveFeature(featureId);
-        };
-        window.addEventListener('shep:feature-archive-requested', handler);
-        return () => window.removeEventListener('shep:feature-archive-requested', handler);
-    }, [handleArchiveFeature]);
-    // Listen for unarchive requests from the feature drawer.
-    useEffect(() => {
-        const handler = (e) => {
-            const { featureId } = e.detail;
-            handleUnarchiveFeature(featureId);
-        };
-        window.addEventListener('shep:feature-unarchive-requested', handler);
-        return () => window.removeEventListener('shep:feature-unarchive-requested', handler);
-    }, [handleUnarchiveFeature]);
+    }, []);
     // Wire callbacks into derived node data (via ref — no re-render).
     useEffect(() => {
         setCallbacks({
@@ -302,72 +273,111 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 clearTimeout(latchTimerRef.current);
         };
     }, [hasRepositories, showCanvas, resetViewport]);
+    // Auto-include any newly-appearing repo/feature nodes in the active
+    // workspace (skipped when default is active — that workspace shows
+    // everything anyway). We diff the current node id list against the set
+    // we've already seen so we only add the deltas.
+    useEffect(() => {
+        const seen = knownNodeIdsRef.current;
+        const newRepoIds = [];
+        const newFeatureIds = [];
+        for (const n of nodes) {
+            if (seen.has(n.id))
+                continue;
+            seen.add(n.id);
+            if (n.type === 'repositoryNode')
+                newRepoIds.push(n.id);
+            else if (n.type === 'featureNode')
+                newFeatureIds.push(n.id);
+        }
+        if (isDefaultActive)
+            return;
+        if (newRepoIds.length === 0 && newFeatureIds.length === 0)
+            return;
+        addToActiveWorkspace({ repoIds: newRepoIds, featureIds: newFeatureIds });
+    }, [nodes, isDefaultActive, addToActiveWorkspace]);
+    // Filter nodes by the active workspace (default workspace = no filter).
+    // We always filter from the full `nodes` list so `displayNodes` already
+    // reflects workspace membership before pulse-add decoration runs.
+    const workspaceFilteredNodes = useMemo(() => {
+        if (isDefaultActive)
+            return nodes;
+        const allowedRepos = new Set(activeWorkspace.repoIds);
+        const allowedFeatures = new Set(activeWorkspace.featureIds);
+        return nodes.filter((n) => {
+            if (n.type === 'repositoryNode')
+                return allowedRepos.has(n.id);
+            if (n.type === 'featureNode')
+                return allowedFeatures.has(n.id);
+            return true;
+        });
+    }, [nodes, isDefaultActive, activeWorkspace]);
+    // Drop edges whose endpoints were filtered out.
+    const workspaceFilteredEdges = useMemo(() => {
+        if (isDefaultActive)
+            return edges;
+        const visibleIds = new Set(workspaceFilteredNodes.map((n) => n.id));
+        return edges.filter((e) => visibleIds.has(e.source) && visibleIds.has(e.target));
+    }, [edges, isDefaultActive, workspaceFilteredNodes]);
     // Pulse the "+" button when there's a single repo with no features and the
     // create-feature drawer is not open — draws attention to the next action.
     const isCreateDrawerOpen = pathname.startsWith('/create');
     const displayNodes = useMemo(() => {
-        const repoNodes = nodes.filter((n) => n.type === 'repositoryNode');
-        const hasFeatures = nodes.some((n) => n.type === 'featureNode');
+        const source = workspaceFilteredNodes;
+        const repoNodes = source.filter((n) => n.type === 'repositoryNode');
+        const hasFeatures = source.some((n) => n.type === 'featureNode');
         const shouldPulse = repoNodes.length === 1 && !hasFeatures && !isCreateDrawerOpen;
         if (!shouldPulse)
-            return nodes;
-        return nodes.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
-    }, [nodes, isCreateDrawerOpen]);
+            return source;
+        return source.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
+    }, [workspaceFilteredNodes, isCreateDrawerOpen]);
     const handlePickFolder = useCallback(() => {
         window.dispatchEvent(new CustomEvent('shep:pick-folder'));
     }, []);
+    // Re-fit the viewport when the active workspace's visible node set changes.
+    // See use-workspace-fit-view.ts for the scoping rules.
+    useWorkspaceFitView({
+        activeWorkspace,
+        isDefaultActive,
+        workspaceFilteredNodes,
+        fitView,
+    });
+    // When the active (non-default) workspace has no members but real repos
+    // exist on the canvas, show a workspace-aware empty state instead of the
+    // welcome wizard. The wizard would imply "no repos at all", which is wrong
+    // here — and crucially, leaves the workspace selector visible via the
+    // toolbar so users can switch back to the default workspace.
+    const workspaceFilteredEmpty = hasRepositories && !isDefaultActive && workspaceFilteredNodes.length === 0;
+    const emptyStateNode = workspaceFilteredEmpty ? (_jsxs("div", { className: "pointer-events-auto flex h-full w-full flex-col items-center justify-center px-8", children: [_jsx("div", { className: "bg-primary/10 text-primary mb-5 flex h-12 w-12 items-center justify-center rounded-2xl", children: _jsx(Layers, { className: "h-6 w-6" }) }), _jsx("h2", { className: "text-foreground/90 text-center text-2xl font-light tracking-tight", children: "This workspace is empty" }), _jsx("p", { className: "text-muted-foreground mt-2 max-w-sm text-center text-sm leading-relaxed", children: "Add repositories or features from the canvas, or switch back to the default workspace to see everything." }), _jsxs("div", { className: "mt-6 flex items-center gap-2", children: [_jsxs(Button, { size: "sm", onClick: () => setWorkspaceNewProjectOpen(true), className: "bg-blue-500 text-white hover:bg-blue-600", children: [_jsx(FolderPlus, { className: "me-1.5 h-3.5 w-3.5" }), "New project"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setManageWorkspaceOpen(true), children: [_jsx(Plus, { className: "me-1.5 h-3.5 w-3.5" }), "Manage items"] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setActiveWorkspace(DEFAULT_WORKSPACE_ID), children: "Switch to Default" })] })] })) : (_jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }));
     const featureFlags = useFeatureFlags();
-    // (+) FAB actions — only visible on control center
-    const fabActions = useMemo(() => {
-        const actions = [
-            {
-                id: 'new-feature',
-                label: t('fab.newFeature'),
-                icon: _jsx(Sparkles, { className: "h-4 w-4" }),
-                onClick: () => {
-                    clickSound.play();
-                    guardedNavigate(() => router.push('/create'));
-                },
-            },
-            {
-                id: 'add-local-repo',
-                label: t('fab.localFolder'),
-                icon: _jsx(FolderPlus, { className: "h-4 w-4" }),
-                onClick: handlePickFolder,
-            },
-        ];
-        if (featureFlags.adoptBranch) {
-            actions.push({
-                id: 'adopt-branch',
-                label: t('fab.adoptBranch'),
-                icon: _jsx(GitBranch, { className: "h-4 w-4" }),
-                onClick: () => {
-                    guardedNavigate(() => router.push('/adopt'));
-                },
-            });
-        }
-        if (featureFlags.githubImport) {
-            actions.push({
-                id: 'add-github-repo',
-                label: t('fab.fromGithub'),
-                icon: _jsx(Github, { className: "h-4 w-4" }),
-                onClick: () => {
-                    window.dispatchEvent(new CustomEvent('shep:open-github-import'));
-                },
-            });
-        }
-        return actions;
-    }, [
-        t,
+    // (+) FAB actions — only visible on control center. Action list lives in
+    // its own hook so this component stays focused on graph state + rendering.
+    const fabActions = useFabActions({
+        router,
         clickSound,
         guardedNavigate,
-        router,
         handlePickFolder,
-        featureFlags.adoptBranch,
-        featureFlags.githubImport,
-    ]);
-    const canvasToolbar = (_jsx(CanvasToolbar, { showArchived: showArchived, onToggleArchived: () => setShowArchived(!showArchived), onResetViewport: resetViewport }));
-    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, toolbar: canvasToolbar, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null] }));
+        onNewProject: () => setWorkspaceNewProjectOpen(true),
+        featureFlags,
+    });
+    const canvasToolbar = (_jsx(CanvasToolbar, { showArchived: showArchived, onToggleArchived: () => setShowArchived(!showArchived), onResetViewport: resetViewport, startSlot: _jsx(WorkspaceSelector, { workspaces: workspaces, activeWorkspace: activeWorkspace, onSelect: setActiveWorkspace, onRequestCreate: () => setCreateWorkspaceOpen(true), onRequestRename: () => setRenameWorkspaceOpen(true), onRequestDelete: (id) => {
+                setPendingDeleteWorkspaceId(id);
+                setDeleteWorkspaceOpen(true);
+            }, onManage: () => setManageWorkspaceOpen(true) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? workspaceFilteredEdges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, toolbar: canvasToolbar, emptyState: emptyStateNode }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null, _jsx(NewProjectDialog, { open: workspaceNewProjectOpen, onOpenChange: setWorkspaceNewProjectOpen, onCreated: (path) => addRepoAndFocus(path) }), _jsx(ManageWorkspaceDialog, { open: manageWorkspaceOpen, onOpenChange: setManageWorkspaceOpen, workspace: activeWorkspace, allNodes: nodes, onSave: (members) => setWorkspaceMembers(activeWorkspace.id, members) }), _jsx(WorkspaceNameDialog, { open: createWorkspaceOpen, onOpenChange: setCreateWorkspaceOpen, title: "New workspace", description: "Create a workspace to filter the canvas to a specific set of repositories and features.", confirmLabel: "Create", onConfirm: (name) => {
+                    createWorkspace(name);
+                    setManageWorkspaceOpen(true);
+                } }), _jsx(WorkspaceNameDialog, { open: renameWorkspaceOpen, onOpenChange: setRenameWorkspaceOpen, title: "Rename workspace", initialValue: activeWorkspace.name, confirmLabel: "Rename", onConfirm: (name) => renameWorkspace(activeWorkspace.id, name) }), _jsx(AlertDialog, { open: deleteWorkspaceOpen, onOpenChange: (open) => {
+                    setDeleteWorkspaceOpen(open);
+                    if (!open)
+                        setPendingDeleteWorkspaceId(null);
+                }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Delete workspace?" }), _jsxs(AlertDialogDescription, { children: ["This will permanently remove the workspace \u201C", workspaces.find((w) => w.id === pendingDeleteWorkspaceId)?.name ??
+                                            activeWorkspace.name, "\u201D. The repositories and features themselves are not affected."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => {
+                                        if (pendingDeleteWorkspaceId) {
+                                            deleteWorkspace(pendingDeleteWorkspaceId);
+                                            setPendingDeleteWorkspaceId(null);
+                                        }
+                                    }, children: "Delete" })] })] }) })] }));
 }
 /** (+) FAB that tracks sidebar width via CSS var + transition.
  *  When fabLayout.swapPosition is true, moves to the end side (right in LTR). */

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

@@ -0,0 +1,8 @@
+export interface NewProjectDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Called with the absolute path of the newly-created project folder. */
+    onCreated: (path: string) => void;
+}
+export declare function NewProjectDialog({ open, onOpenChange, onCreated }: NewProjectDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=new-project-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"new-project-dialog.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/new-project-dialog.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,yEAAyE;IACzE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAsFxF"}

package/dist/src/presentation/web/components/features/control-center/new-project-dialog.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Input } from '../../ui/input.js';
+import { Button } from '../../ui/button.js';
+import { createProjectFolder } from '../../../app/actions/create-project-folder.js';
+export function NewProjectDialog({ open, onOpenChange, onCreated }) {
+    const [name, setName] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    // Reset state every time the dialog opens.
+    useEffect(() => {
+        if (open) {
+            setName('');
+            setBusy(false);
+            setError(null);
+        }
+    }, [open]);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        const trimmed = name.trim();
+        if (!trimmed || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        const result = await createProjectFolder(trimmed);
+        if (!result.ok || !result.path) {
+            setError(result.error ?? 'Failed to create project.');
+            setBusy(false);
+            return;
+        }
+        // Hand the new path off to the empty state's existing add-repo flow.
+        onCreated(result.path);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { className: "max-w-sm", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "New project" }), _jsx(DialogDescription, { children: "Create an empty project folder inside your Shep home directory. Git will be initialised automatically when the project is added." })] }), _jsxs("div", { className: "py-4", children: [_jsx(Input, { autoFocus: true, value: name, onChange: (e) => {
+                                    setName(e.target.value);
+                                    if (error)
+                                        setError(null);
+                                }, placeholder: "my-prototype", disabled: busy, "data-testid": "new-project-name-input" }), error ? (_jsx("p", { className: "text-destructive mt-2 text-xs", role: "alert", children: error })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), disabled: busy, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: !name.trim() || busy, children: busy ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Creating\u2026"] })) : ('Create project') })] })] }) }) }));
+}

package/dist/src/presentation/web/components/features/control-center/use-canvas-event-listeners.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Wire global window events used by the control center canvas to the
+ * appropriate handlers. The canvas listens for cross-component requests
+ * dispatched as CustomEvents:
+ *
+ *   - shep:add-repository           → addRepoAndFocus(path)
+ *   - shep:feature-created          → createFeatureNode(...)
+ *   - shep:feature-delete-requested → handleDeleteFeature(...)
+ *   - shep:feature-archive-requested → handleArchiveFeature(...)
+ *   - shep:feature-unarchive-requested → handleUnarchiveFeature(...)
+ *
+ * Extracted from control-center-inner.tsx so the parent component stays
+ * focused on graph state + rendering, not event-bus plumbing.
+ */
+import type { CanvasNodeType } from '../../features/features-canvas/index.js';
+import type { FeatureNodeData } from '../../common/feature-node/index.js';
+export type CreateFeatureNodeFn = (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>, edgeType?: string) => string;
+export interface CanvasEventListenerHandlers {
+    addRepoAndFocus: (path: string) => void;
+    createFeatureNode: CreateFeatureNodeFn;
+    nodes: CanvasNodeType[];
+    handleDeleteFeature: (featureId: string, cleanup?: boolean, cascadeDelete?: boolean, closePr?: boolean) => void;
+    handleArchiveFeature: (featureId: string) => void;
+    handleUnarchiveFeature: (featureId: string) => void;
+}
+export declare function useCanvasEventListeners(handlers: CanvasEventListenerHandlers): void;
+//# sourceMappingURL=use-canvas-event-listeners.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-canvas-event-listeners.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-canvas-event-listeners.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,MAAM,MAAM,mBAAmB,GAAG,CAChC,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;AAEZ,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iBAAiB,EAAE,mBAAmB,CAAC;IACvC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,2BAA2B,GAAG,IAAI,CAyGnF"}

package/dist/src/presentation/web/components/features/control-center/use-canvas-event-listeners.js

@@ -0,0 +1,84 @@
+/**
+ * Wire global window events used by the control center canvas to the
+ * appropriate handlers. The canvas listens for cross-component requests
+ * dispatched as CustomEvents:
+ *
+ *   - shep:add-repository           → addRepoAndFocus(path)
+ *   - shep:feature-created          → createFeatureNode(...)
+ *   - shep:feature-delete-requested → handleDeleteFeature(...)
+ *   - shep:feature-archive-requested → handleArchiveFeature(...)
+ *   - shep:feature-unarchive-requested → handleUnarchiveFeature(...)
+ *
+ * Extracted from control-center-inner.tsx so the parent component stays
+ * focused on graph state + rendering, not event-bus plumbing.
+ */
+import { useEffect } from 'react';
+export function useCanvasEventListeners(handlers) {
+    const { addRepoAndFocus, createFeatureNode, nodes, handleDeleteFeature, handleArchiveFeature, handleUnarchiveFeature, } = handlers;
+    // shep:add-repository — top-bar "add folder" button
+    useEffect(() => {
+        const handler = (e) => {
+            const path = e.detail.path;
+            addRepoAndFocus(path);
+        };
+        window.addEventListener('shep:add-repository', handler);
+        return () => window.removeEventListener('shep:add-repository', handler);
+    }, [addRepoAndFocus]);
+    // shep:feature-created — fired by the create drawer with the real server feature ID
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            // When parentId is provided, attach to the parent feature node via a
+            // dependency edge instead of the repo node.
+            if (detail.parentId) {
+                const parentNodeId = `feat-${detail.parentId}`;
+                createFeatureNode(parentNodeId, {
+                    state: 'creating',
+                    featureId: detail.featureId,
+                    name: detail.name,
+                    description: detail.description,
+                    repositoryPath: detail.repositoryPath,
+                }, 'dependencyEdge');
+                return;
+            }
+            const repoNode = nodes.find((n) => n.type === 'repositoryNode' &&
+                n.data.repositoryPath === detail.repositoryPath);
+            createFeatureNode(repoNode?.id ?? null, {
+                state: 'running',
+                featureId: detail.featureId,
+                name: detail.name,
+                description: detail.description,
+                repositoryPath: detail.repositoryPath,
+            });
+        };
+        window.addEventListener('shep:feature-created', handler);
+        return () => window.removeEventListener('shep:feature-created', handler);
+    }, [nodes, createFeatureNode]);
+    // shep:feature-delete-requested — fired from the feature drawer
+    useEffect(() => {
+        const handler = (e) => {
+            const { featureId, cleanup, cascadeDelete, closePr } = e.detail;
+            handleDeleteFeature(featureId, cleanup, cascadeDelete, closePr);
+        };
+        window.addEventListener('shep:feature-delete-requested', handler);
+        return () => window.removeEventListener('shep:feature-delete-requested', handler);
+    }, [handleDeleteFeature]);
+    // shep:feature-archive-requested — fired from the feature drawer
+    useEffect(() => {
+        const handler = (e) => {
+            const { featureId } = e.detail;
+            handleArchiveFeature(featureId);
+        };
+        window.addEventListener('shep:feature-archive-requested', handler);
+        return () => window.removeEventListener('shep:feature-archive-requested', handler);
+    }, [handleArchiveFeature]);
+    // shep:feature-unarchive-requested — fired from the feature drawer
+    useEffect(() => {
+        const handler = (e) => {
+            const { featureId } = e.detail;
+            handleUnarchiveFeature(featureId);
+        };
+        window.addEventListener('shep:feature-unarchive-requested', handler);
+        return () => window.removeEventListener('shep:feature-unarchive-requested', handler);
+    }, [handleUnarchiveFeature]);
+}

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

@@ -21,7 +21,9 @@ export interface ControlCenterState {
     handleStartFeature: (featureId: string) => void;
     handleStopFeature: (featureId: string) => void;
     handleUnarchiveFeature: (featureId: string) => void;
-    handleDeleteRepository: (repositoryId: string) => Promise<void>;
+    handleDeleteRepository: (repositoryId: string, options?: {
+        deleteFromDisk?: boolean;
+    }) => Promise<void>;
     createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>, edgeType?: string) => string;
     /** Whether archived features are shown on the canvas. */
     showArchived: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QACrC,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAilBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QACrC,QAAQ,EAAE,OAAO,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CACtB,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,KACnC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAmlBpB"}

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

@@ -388,7 +388,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
         })
             .finally(() => endMutation());
     }, [router, deleteSound, updateFeature, removeFeature, beginMutation, endMutation]);
-    const handleDeleteRepository = useCallback(async (repositoryId) => {
+    const handleDeleteRepository = useCallback(async (repositoryId, options) => {
         const repoNodeId = `repo-${repositoryId}`;
         // Find children of this repo via edges
         const childFeatureIds = new Set(edgesRef.current.filter((e) => e.source === repoNodeId).map((e) => e.target));
@@ -415,7 +415,9 @@ export function useControlCenterState(initialNodes, initialEdges) {
             removeFeature(childId);
         }
         try {
-            const result = await deleteRepository(repositoryId);
+            const result = await deleteRepository(repositoryId, {
+                deleteFromDisk: options?.deleteFromDisk === true,
+            });
             if (!result.success) {
                 toast.error(result.error ?? 'Failed to remove repository');
                 rollback();

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

@@ -0,0 +1,21 @@
+/**
+ * Build the action list for the (+) FloatingActionButton on the control
+ * center. Extracted from control-center-inner.tsx so the parent component
+ * stays focused on graph state + rendering.
+ */
+import type { useRouter } from 'next/navigation';
+import type { FloatingActionButtonAction } from '../../common/floating-action-button/index.js';
+import type { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
+interface UseFabActionsParams {
+    router: ReturnType<typeof useRouter>;
+    clickSound: {
+        play: () => void;
+    };
+    guardedNavigate: (fn: () => void) => void;
+    handlePickFolder: () => void;
+    onNewProject: () => void;
+    featureFlags: ReturnType<typeof useFeatureFlags>;
+}
+export declare function useFabActions({ router, clickSound, guardedNavigate, handlePickFolder, onNewProject, featureFlags, }: UseFabActionsParams): FloatingActionButtonAction[];
+export {};
+//# sourceMappingURL=use-fab-actions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-fab-actions.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-fab-actions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAC7F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIrE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;IACrC,UAAU,EAAE;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACjC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC1C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;CAClD;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,EAAE,mBAAmB,GAAG,0BAA0B,EAAE,CA6DpD"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Build the action list for the (+) FloatingActionButton on the control
+ * center. Extracted from control-center-inner.tsx so the parent component
+ * stays focused on graph state + rendering.
+ */
+import { useMemo } from 'react';
+import { FolderOpen, FolderPlus, GitBranch, Github, Sparkles } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+export function useFabActions({ router, clickSound, guardedNavigate, handlePickFolder, onNewProject, featureFlags, }) {
+    const { t } = useTranslation('web');
+    return useMemo(() => {
+        const actions = [
+            {
+                id: 'new-project',
+                label: 'New project',
+                icon: _jsx(FolderPlus, { className: "h-4 w-4" }),
+                onClick: () => {
+                    clickSound.play();
+                    onNewProject();
+                },
+            },
+            {
+                id: 'new-feature',
+                label: t('fab.newFeature'),
+                icon: _jsx(Sparkles, { className: "h-4 w-4" }),
+                onClick: () => {
+                    clickSound.play();
+                    guardedNavigate(() => router.push('/create'));
+                },
+            },
+            {
+                id: 'add-local-repo',
+                label: t('fab.localFolder'),
+                icon: _jsx(FolderOpen, { className: "h-4 w-4" }),
+                onClick: handlePickFolder,
+            },
+        ];
+        if (featureFlags.adoptBranch) {
+            actions.push({
+                id: 'adopt-branch',
+                label: t('fab.adoptBranch'),
+                icon: _jsx(GitBranch, { className: "h-4 w-4" }),
+                onClick: () => {
+                    guardedNavigate(() => router.push('/adopt'));
+                },
+            });
+        }
+        if (featureFlags.githubImport) {
+            actions.push({
+                id: 'add-github-repo',
+                label: t('fab.fromGithub'),
+                icon: _jsx(Github, { className: "h-4 w-4" }),
+                onClick: () => {
+                    window.dispatchEvent(new CustomEvent('shep:open-github-import'));
+                },
+            });
+        }
+        return actions;
+    }, [
+        t,
+        clickSound,
+        guardedNavigate,
+        router,
+        handlePickFolder,
+        onNewProject,
+        featureFlags.adoptBranch,
+        featureFlags.githubImport,
+    ]);
+}