@shepai/cli 1.122.2 → 1.123.0

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

@@ -1,15 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { ChevronRight, ChevronLeft, Loader2, Bot } from 'lucide-react';
+import { ChevronLeft, Loader2 } from 'lucide-react';
 import { getAllAgentModels } from '../../../app/actions/get-all-agent-models.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 { cn } from '../../../lib/utils.js';
 const STEPS = ['select-agent', 'select-model'];
-/** 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);
@@ -25,7 +23,6 @@ export function WelcomeAgentSetup({ onComplete, className }) {
             .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);
@@ -46,14 +43,19 @@ export function WelcomeAgentSetup({ onComplete, className }) {
                 clearTimeout(timeoutRef.current);
         };
     }, []);
-    /** Save agent+model selection and complete the wizard */
     const saveAndComplete = useCallback(async (agentType, model) => {
         setSaving(true);
         try {
             await updateAgentAndModel(agentType, model);
-            onComplete();
+            // Fade out the entire wizard before handing off to the next view
+            setVisible(false);
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => {
+                onComplete();
+            }, 200);
         }
-        finally {
+        catch {
             setSaving(false);
         }
     }, [onComplete]);
@@ -65,7 +67,6 @@ export function WelcomeAgentSetup({ onComplete, className }) {
             });
         }
         else {
-            // No models — save immediately
             saveAndComplete(agentType, null);
         }
     }, [groups, transitionTo, saveAndComplete]);
@@ -82,19 +83,25 @@ export function WelcomeAgentSetup({ onComplete, className }) {
         }
     }, [step, transitionTo]);
     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" })] }));
+        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center justify-center gap-4', className), children: [_jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-sm", 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] }) }), _jsx("div", { className: "flex w-full 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", disabled: saving, "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 disabled:opacity-50", 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", disabled: saving, 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", disabled: saving, "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 disabled:opacity-50", 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] })] }));
+    // Dynamic hero text per step
+    const heroTitle = step === 'select-agent' ? 'Choose your agent' : activeGroup ? `Pick a model` : 'Pick a model';
+    const heroSubtitle = step === 'select-agent'
+        ? 'Select the AI coding agent you want Shep to use.'
+        : activeGroup
+            ? `Choose which ${activeGroup.label} model to run.`
+            : '';
+    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex w-full flex-col items-center', className), children: [_jsx("div", { className: "mb-8 flex w-full max-w-xs items-center gap-1.5", children: STEPS.map((s, i) => (_jsx("div", { className: cn('h-[3px] 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-200', visible && !transitioning ? 'opacity-100' : 'opacity-0'), children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: heroTitle }), _jsx("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: heroSubtitle }), _jsxs("div", { className: "mt-8 flex w-full flex-col items-center", children: [step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", className: "grid w-full max-w-lg gap-3", style: {
+                                    gridTemplateColumns: `repeat(${Math.min(groups.length, 4)}, minmax(0, 1fr))`,
+                                }, children: groups.map((group) => {
+                                    const GroupIcon = getAgentTypeIcon(group.agentType);
+                                    return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `agent-option-${group.agentType}`, className: "border-border hover:bg-accent hover:border-foreground/20 flex cursor-pointer flex-col items-center gap-3 rounded-2xl border px-4 py-5 transition-all duration-150 active:scale-[0.97] disabled:opacity-50", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "text-foreground/70 h-7 w-7" }), _jsx("span", { className: "text-sm font-medium", children: group.label })] }, group.agentType));
+                                }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", className: "flex w-full max-w-lg flex-col items-center gap-4", children: [_jsxs("button", { type: "button", disabled: saving, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 self-start text-sm transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), "Back"] }), _jsx("div", { className: "grid w-full gap-3", style: {
+                                            gridTemplateColumns: `repeat(${Math.min(activeGroup.models.length, 3)}, minmax(0, 1fr))`,
+                                        }, children: activeGroup.models.map((m) => {
+                                            const meta = getModelMeta(m.id);
+                                            return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `model-option-${m.id}`, className: "border-border hover:bg-accent hover:border-foreground/20 flex cursor-pointer flex-col items-center gap-2 rounded-2xl border px-4 py-5 text-center transition-all duration-150 active:scale-[0.97] disabled:opacity-50", onClick: () => handleModelSelect(m.id), children: [_jsx("span", { className: "text-sm font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-xs leading-tight", children: meta.description || m.description })] }, m.id));
+                                        }) })] })) : null] })] })] }));
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -60,5 +60,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewpor
     }, [isEmpty]);
     const fallbackEmptyState = isEmpty && !emptyState ? (_jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) })) : null;
     const overlayContent = emptyState ?? fallbackEmptyState;
-    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && (_jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null })), toolbar] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto", children: overlayContent }) })) : null] }));
+    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && (_jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null })), toolbar] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null] }));
 }

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0FD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA4FD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}

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

@@ -26,7 +26,7 @@ function AppShellInner({ children }) {
     const featureFlags = useFeatureFlags();
     // Subscribe to agent lifecycle events and dispatch toast/browser notifications
     useNotifications();
-    const { features } = useSidebarFeaturesContext();
+    const { features, hasRepositories } = useSidebarFeaturesContext();
     const handleNewFeature = useCallback(() => {
         guardedNavigate(() => router.push('/create'));
     }, [router, guardedNavigate]);
@@ -63,7 +63,7 @@ function AppShellInner({ children }) {
             loading: addingRepo,
         },
     ], [handleNewFeature, handleAddRepository, addingRepo]);
-    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, 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", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && _jsx(FloatingActionButton, { actions: fabActions })] }) })] }));
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, 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", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null] }) })] }));
 }
 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

@@ -18,6 +18,8 @@ export declare function mapNodeStateToSidebarStatus(state: FeatureNodeState): Fe
 interface SidebarFeaturesContextValue {
     features: SidebarFeatureItem[];
     setFeatures: (features: SidebarFeatureItem[]) => void;
+    hasRepositories: boolean;
+    setHasRepositories: (value: boolean) => void;
 }
 interface SidebarFeaturesProviderProps {
     children: ReactNode;

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;AAiBD;;;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;AAiBD;;;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;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAYjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}

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

@@ -24,7 +24,8 @@ export function mapNodeStateToSidebarStatus(state) {
 const SidebarFeaturesContext = createContext(null);
 export function SidebarFeaturesProvider({ children }) {
     const [features, setFeatures] = useState([]);
-    const value = useMemo(() => ({ features, setFeatures }), [features]);
+    const [hasRepositories, setHasRepositories] = useState(false);
+    const value = useMemo(() => ({ features, setFeatures, hasRepositories, setHasRepositories }), [features, hasRepositories]);
     return (_jsx(SidebarFeaturesContext.Provider, { value: value, children: children }));
 }
 export function useSidebarFeaturesContext() {

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -8,7 +8,7 @@ export const CANVAS_LAYOUT_DEFAULTS = {
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
     featureNode: { width: 288, height: 140 },
-    repositoryNode: { width: 328, height: 50 },
+    repositoryNode: { width: 400, height: 110 },
 };
 function getNodeSize(node, defaultSize) {
     // Prefer per-node size from data, then type-based lookup, then default