@shepai/cli 1.175.0 → 1.175.1-pr536.17338e9

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

@@ -1,136 +1,207 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
-import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, ExternalLink, } from 'lucide-react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { SendHorizontal, Paperclip, Loader2, LayoutGrid, Zap, ClipboardList, ChevronDown, Check, X, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { cn } from '../../../lib/utils.js';
-import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
-import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
-import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
-import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
-import { checkAgentAuth } from '../../../app/actions/check-agent-auth.js';
-import { checkToolStatus } from '../../../app/actions/check-tool-status.js';
-import { WelcomeAgentSetup } from './welcome-agent-setup.js';
-const commands = ['cd ~/my-repo', 'shep feat new "sleek dashboard"'];
-export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
+import { createProjectAndFeature } from '../../../app/actions/create-project-and-feature.js';
+import { createApplication } from '../../../app/actions/create-application.js';
+import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
+import { AttachmentChip } from '../../common/attachment-chip/index.js';
+import { ShepLogo } from '../../common/shep-logo/index.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../ui/dropdown-menu.js';
+import { useAttachments } from '../../../hooks/use-attachments.js';
+const BUILD_MODES = ['application', 'fast', 'spec'];
+const BUILD_MODE_CONFIG = {
+    application: {
+        icon: LayoutGrid,
+        label: 'Application',
+        placeholder: 'Build a modern e-commerce storefront with product catalog...',
+        suggestions: [
+            'A landing page with hero, features, and pricing sections',
+            'Full-stack SaaS app with auth, billing, and dashboard',
+            'Mobile-first social media app with real-time chat',
+            'Personal portfolio with blog and project showcase',
+        ],
+    },
+    fast: {
+        icon: Zap,
+        label: 'Fast',
+        placeholder: 'Add a dark mode toggle to the settings page...',
+        suggestions: [
+            'Add pagination to the users list endpoint',
+            'Fix the broken logout redirect',
+            'Add input validation to the signup form',
+            'Refactor the API error handling middleware',
+        ],
+    },
+    spec: {
+        icon: ClipboardList,
+        label: 'Spec Driven',
+        placeholder: 'Implement a role-based access control system with audit logging...',
+        suggestions: [
+            'OAuth2 authentication with SSO and MFA support',
+            'Event-driven notification system with email and push',
+            'REST API with versioning, rate limiting, and OpenAPI docs',
+            'Data pipeline with ETL, validation, and monitoring',
+        ],
+    },
+};
+export function ControlCenterEmptyState({ onRepositorySelect, onApplicationCreated, onClose, className, }) {
     const { t } = useTranslation('web');
-    const [copied, setCopied] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [showReactPicker, setShowReactPicker] = useState(false);
-    const [agentReady, setAgentReady] = useState(null);
-    const [authStatus, setAuthStatus] = useState(null);
-    const [cliExpanded, setCliExpanded] = useState(false);
-    const [toolStatus, setToolStatus] = useState(null);
-    const { reactFileManager: useReactFileManager } = useFeatureFlags();
-    useEffect(() => {
-        isAgentSetupComplete().then((done) => {
-            setAgentReady(done);
+    const [description, setDescription] = useState('');
+    const [overrideAgent, setOverrideAgent] = useState(undefined);
+    const [overrideModel, setOverrideModel] = useState(undefined);
+    const [buildMode, setBuildMode] = useState('application');
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef(null);
+    const att = useAttachments();
+    // Circular mode switching with Shift+Tab, close overlay with Escape
+    const cycleBuildMode = useCallback(() => {
+        setBuildMode((prev) => {
+            const idx = BUILD_MODES.indexOf(prev);
+            return BUILD_MODES[(idx + 1) % BUILD_MODES.length];
         });
     }, []);
     useEffect(() => {
-        if (!agentReady)
-            return;
-        checkAgentAuth().then(setAuthStatus);
-        checkToolStatus().then(setToolStatus);
-    }, [agentReady]);
-    async function handlePickerClick() {
-        if (loading)
-            return;
-        if (useReactFileManager) {
-            setShowReactPicker(true);
+        const handleGlobalKeyDown = (e) => {
+            if (e.key === 'Escape' && onClose)
+                onClose();
+            if (e.key === 'Tab' && e.shiftKey) {
+                e.preventDefault();
+                cycleBuildMode();
+            }
+        };
+        window.addEventListener('keydown', handleGlobalKeyDown);
+        return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [onClose, cycleBuildMode]);
+    const handleSubmit = useCallback(async () => {
+        if (!description.trim() || submitting)
             return;
-        }
-        setLoading(true);
+        setSubmitting(true);
+        setError(null);
         try {
-            const path = await pickFolder();
-            if (path) {
-                onRepositorySelect?.(path);
+            if (buildMode === 'application') {
+                const result = await createApplication({
+                    description: description.trim(),
+                    agentType: overrideAgent,
+                    modelOverride: overrideModel,
+                });
+                if (result.error) {
+                    setError(result.error);
+                    setSubmitting(false);
+                    return;
+                }
+                if (result.repositoryPath) {
+                    onRepositorySelect?.(result.repositoryPath);
+                }
+                if (result.application) {
+                    window.dispatchEvent(new CustomEvent('shep:application-created', {
+                        detail: {
+                            applicationId: result.application.id,
+                            name: result.application.name,
+                            description: result.application.description,
+                            repositoryPath: result.repositoryPath,
+                            status: result.application.status,
+                        },
+                    }));
+                    onApplicationCreated?.(result.application.id, description.trim());
+                }
+            }
+            else {
+                const result = await createProjectAndFeature({
+                    description: description.trim(),
+                    attachments: att.completedAttachments.map((a) => ({
+                        path: a.path,
+                        name: a.name,
+                        notes: a.notes,
+                    })),
+                    agentType: overrideAgent,
+                    model: overrideModel,
+                    fast: buildMode === 'fast',
+                });
+                if (result.error) {
+                    setError(result.error);
+                    setSubmitting(false);
+                    return;
+                }
+                if (result.repositoryPath) {
+                    onRepositorySelect?.(result.repositoryPath);
+                }
+                if (result.feature && result.repositoryPath) {
+                    window.dispatchEvent(new CustomEvent('shep:feature-created', {
+                        detail: {
+                            featureId: result.feature.id,
+                            name: result.feature.name,
+                            description: result.feature.description,
+                            repositoryPath: result.repositoryPath,
+                        },
+                    }));
+                }
             }
         }
         catch {
-            // Native picker failed — fall back to React file manager
-            setShowReactPicker(true);
+            setError('Something went wrong. Please try again.');
+            setSubmitting(false);
         }
-        finally {
-            setLoading(false);
+    }, [
+        description,
+        submitting,
+        buildMode,
+        att.completedAttachments,
+        overrideAgent,
+        overrideModel,
+        onRepositorySelect,
+        onApplicationCreated,
+    ]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            handleSubmit();
         }
-    }
-    function handleReactPickerSelect(path) {
-        if (path) {
-            onRepositorySelect?.(path);
+    }, [handleSubmit]);
+    const handlePickFiles = useCallback(async () => {
+        try {
+            const res = await fetch('/api/dialog/pick-files');
+            if (!res.ok)
+                return;
+            const data = (await res.json());
+            if (!data.paths?.length)
+                return;
+            for (const filePath of data.paths) {
+                const uploadRes = await fetch('/api/attachments/upload-from-path', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ path: filePath, sessionId: 'onboarding' }),
+                });
+                if (!uploadRes.ok)
+                    continue;
+                const uploaded = (await uploadRes.json());
+                att.addAttachment(uploaded);
+            }
         }
-        setShowReactPicker(false);
-    }
-    const handleCopy = useCallback(async () => {
-        await navigator.clipboard.writeText(commands.join('\n'));
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-    }, []);
-    const handleAgentSetupComplete = useCallback(() => {
-        setAgentReady(true);
-    }, []);
-    const handleRetryAuth = useCallback(() => {
-        setAuthStatus(null);
-        checkAgentAuth().then(setAuthStatus);
+        catch {
+            // Native picker not available — ignore
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- att.addAttachment is stable
+    }, [att.addAttachment]);
+    const handleSuggestionClick = useCallback((suggestion) => {
+        setDescription(suggestion);
+        textareaRef.current?.focus();
     }, []);
-    if (agentReady === null)
-        return null;
-    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative flex h-full w-full flex-col items-center justify-center px-8', className), children: [!agentReady ? (
-            /* Agent setup wizard — owns its own hero */
-            _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete })) : (
-            /* Repository step — fade in to match wizard transitions */
-            _jsxs("div", { className: "animate-in fade-in flex w-full max-w-md flex-col items-center duration-300", children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: t('emptyState.addProject') }), _jsxs("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: [t('emptyState.addProjectDescription'), _jsx("br", {}), t('emptyState.addProjectDescriptionLine2')] }), _jsxs("div", { className: "mt-8 flex w-full flex-col gap-3", children: [_jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }), _jsx(ToolStatusRow, { label: t('emptyState.git'), status: toolStatus?.git ?? null, missingHint: t('emptyState.gitRequired') }), _jsx(ToolStatusRow, { label: t('emptyState.githubCli'), status: toolStatus?.gh ?? null, missingHint: t('emptyState.githubCliRequired') })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "bg-foreground text-background hover:bg-foreground/90 mt-10 flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl px-6 py-4 text-base font-medium shadow-lg transition-all duration-200 hover:shadow-xl active:scale-[0.98] disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(FolderOpen, { className: "h-5 w-5" })), loading ? t('emptyState.opening') : t('emptyState.chooseFolder')] }), _jsx("p", { className: "text-muted-foreground/60 mt-3 text-center text-sm", children: t('emptyState.folderHint') })] })), agentReady ? (_jsxs("div", { className: "absolute bottom-8 flex flex-col items-center", style: {
-                    animationDelay: '400ms',
-                    animationDuration: '600ms',
-                    animationFillMode: 'both',
-                }, children: [_jsxs("button", { type: "button", onClick: () => setCliExpanded(!cliExpanded), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 transition-colors duration-200", children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-sm", children: t('emptyState.orUseCli') }), _jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform duration-200', cliExpanded ? '' : 'rotate-180') })] }), cliExpanded ? (_jsx("div", { className: "animate-in fade-in slide-in-from-top-1 mt-3 w-80 duration-200", children: _jsxs("div", { "data-testid": "cli-code-block", className: "relative rounded-xl bg-zinc-900 px-5 py-4 font-mono text-[13px] leading-relaxed text-zinc-400", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded-md p-1.5 text-zinc-600 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": t('emptyState.copyCommands'), children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-600 select-none", children: "$ " }), _jsx("span", { className: "text-zinc-300", children: cmd })] }, cmd))) })] }) })) : null] })) : null, _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
-                    if (!open)
-                        setShowReactPicker(false);
-                }, onSelect: handleReactPickerSelect })] }));
-}
-/** Status row for the AI agent (Claude Code, etc.) */
-function AgentAuthBanner({ status, onRetry, }) {
-    const { t } = useTranslation('web');
-    if (!status) {
-        return (_jsx(ChecklistRow, { icon: _jsx(Loader2, { className: "text-muted-foreground/50 h-4 w-4 animate-spin" }), children: _jsx("span", { className: "text-muted-foreground/50 text-sm", children: t('emptyState.checkingSetup') }) }));
-    }
-    if (status.installed && status.authenticated) {
-        return (_jsx(ChecklistRow, { icon: _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), children: _jsx("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: t('emptyState.ready', { label: status.label }) }) }));
-    }
-    if (!status.installed) {
-        return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsx("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: t('emptyState.notInstalled', { label: status.label }) }), status.installCommand ? _jsx(CopyableCommand, { command: status.installCommand }) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: t('emptyState.reCheck') })] }));
-    }
-    return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsx("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: t('emptyState.needsAuth', { label: status.label }) }), status.authCommand ? _jsx(CopyableCommand, { command: status.authCommand }) : null, _jsxs("div", { className: "flex items-center gap-3", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
-                            try {
-                                const toolId = status.agentType === 'claude-code' ? 'claude-code' : status.agentType;
-                                await fetch(`/api/tools/${toolId}/launch`, { method: 'POST' });
-                            }
-                            catch {
-                                /* best effort */
-                            }
-                        }, className: "flex items-center gap-1 text-xs font-medium text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: [_jsx(Terminal, { className: "h-3 w-3" }), t('emptyState.open', { label: status.label })] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: t('emptyState.reCheck') })] })] }));
-}
-/** Status row for system tools (git, gh) */
-function ToolStatusRow({ label, status, missingHint, }) {
-    const { t } = useTranslation('web');
-    if (!status) {
-        return (_jsx(ChecklistRow, { icon: _jsx(Loader2, { className: "text-muted-foreground/50 h-4 w-4 animate-spin" }), children: _jsx("span", { className: "text-muted-foreground/50 text-sm", children: t('emptyState.checking', { label }) }) }));
-    }
-    if (status.installed) {
-        return (_jsx(ChecklistRow, { icon: _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), children: _jsxs("span", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: t('emptyState.ready', { label }) }), status.version ? (_jsxs("span", { className: "text-muted-foreground/40 text-xs", children: ["v", status.version] })) : null] }) }));
-    }
-    return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsx("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: t('emptyState.notFound', { label }) }), _jsx("span", { className: "text-muted-foreground/50 text-xs", children: missingHint }), status.installCommand ? _jsx(CopyableCommand, { command: status.installCommand }) : null, status.installUrl ? (_jsxs("a", { href: status.installUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: [t('emptyState.docs'), " ", _jsx(ExternalLink, { className: "h-3 w-3" })] })) : null] }));
-}
-/** Checklist row: icon pinned left, children stacked vertically and fill width */
-function ChecklistRow({ icon, children }) {
-    return (_jsxs("div", { className: "animate-in fade-in flex items-start gap-2.5", children: [_jsx("div", { className: "mt-0.5 shrink-0", children: icon }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: children })] }));
-}
-/** Compact copyable command block — fills available row width */
-function CopyableCommand({ command }) {
-    const [copied, setCopied] = useState(false);
-    return (_jsxs("button", { type: "button", onClick: async () => {
-            await navigator.clipboard.writeText(command);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }, className: "group/cmd flex cursor-pointer items-center justify-between gap-2 rounded-md bg-zinc-100 py-1 ps-2.5 pe-2 text-start transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700", children: [_jsx("code", { className: "min-w-0 truncate text-[11px] leading-relaxed text-zinc-600 dark:text-zinc-300", children: command }), copied ? (_jsx(Check, { className: "h-3 w-3 shrink-0 text-emerald-500" })) : (_jsx(Copy, { className: "h-3 w-3 shrink-0 text-zinc-400 opacity-0 transition-opacity group-hover/cmd:opacity-100" }))] }));
+    const modeConfig = BUILD_MODE_CONFIG[buildMode];
+    const ModeIcon = modeConfig.icon;
+    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-8', className), children: [_jsx("div", { className: "onboard-bg pointer-events-none absolute inset-0 animate-[onboard-fade-in_1.2s_ease-out_both]" }), onClose ? (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "text-muted-foreground hover:text-foreground hover:bg-accent/50 absolute top-4 right-4 z-10 cursor-pointer rounded p-1.5 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })) : null, _jsxs("div", { className: "relative flex w-full max-w-2xl flex-col items-center", children: [_jsx("div", { className: "mb-6 animate-[onboard-logo_0.8s_cubic-bezier(0.16,1,0.3,1)_both]", style: { animationDelay: '0ms' }, children: _jsx(ShepLogo, { size: 72, className: "text-foreground" }) }), _jsx("h1", { className: "text-foreground animate-[onboard-fade-up_0.7s_cubic-bezier(0.16,1,0.3,1)_both] text-center text-5xl font-extralight tracking-tight", style: { animationDelay: '120ms' }, children: "What do you want to build?" }), _jsx("p", { className: "text-muted-foreground mt-3 animate-[onboard-fade-up_0.7s_cubic-bezier(0.16,1,0.3,1)_both] text-center text-lg leading-relaxed font-light", style: { animationDelay: '220ms' }, children: "Describe your idea and Shep creates the project for you." }), _jsxs("div", { className: "mt-10 w-full animate-[onboard-fade-up_0.7s_cubic-bezier(0.16,1,0.3,1)_both]", style: { animationDelay: '350ms' }, children: [_jsxs("div", { onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, className: cn('flex flex-col rounded-xl border transition-all duration-200', 'border-border/60 bg-background shadow-sm dark:border-white/10 dark:bg-white/[0.04]', isFocused &&
+                                    'ring-ring/50 border-ring shadow-md ring-[3px] dark:border-orange-500/40 dark:ring-orange-500/25', att.isDragOver && 'border-primary/50 bg-primary/5', submitting && 'opacity-70'), children: [_jsx("textarea", { ref: textareaRef, rows: 2, autoFocus: true, value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: handleKeyDown, onPaste: att.handlePaste, placeholder: modeConfig.placeholder, disabled: submitting, className: "text-foreground placeholder:text-muted-foreground/60 max-h-[10rem] min-h-[4.5rem] w-full resize-none border-0 bg-transparent px-4 py-3.5 text-sm leading-relaxed focus:outline-none disabled:cursor-not-allowed" }), att.attachments.length > 0 ? (_jsx("div", { className: "flex shrink-0 items-center gap-2.5 overflow-x-auto overflow-y-visible px-5 pt-2 pb-2", children: att.attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => att.removeAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => att.updateNotes(file.id, notes) }, file.id))) })) : null, att.uploadError ? (_jsx("p", { className: "text-destructive px-4 pb-2 text-xs", children: att.uploadError })) : null, _jsxs("div", { className: "border-border/60 flex shrink-0 items-center gap-3 border-t px-3 py-2 dark:border-white/10", children: [_jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", showInstallStatus: true, onAgentModelChange: (agent, model) => {
+                                                    setOverrideAgent(agent);
+                                                    setOverrideModel(model);
+                                                }, className: "w-55" }), _jsx("div", { className: "flex-1" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-testid": "build-mode-selector", className: "text-muted-foreground hover:text-foreground hover:bg-accent/50 flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs transition-colors", children: [_jsxs("span", { className: "flex animate-[onboard-fade-up_0.25s_ease-out_both] items-center gap-1.5", children: [_jsx(ModeIcon, { className: "h-3.5 w-3.5" }), modeConfig.label] }, buildMode), _jsx(ChevronDown, { className: "h-3 w-3 opacity-50" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: BUILD_MODES.map((mode) => {
+                                                            const cfg = BUILD_MODE_CONFIG[mode];
+                                                            const Icon = cfg.icon;
+                                                            const isActive = buildMode === mode;
+                                                            return (_jsxs(DropdownMenuItem, { onClick: () => setBuildMode(mode), "data-testid": `build-mode-${mode}`, className: "flex items-center gap-2", children: [_jsx(Icon, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "flex-1", children: cfg.label }), isActive ? _jsx(Check, { className: "text-foreground h-3.5 w-3.5" }) : null] }, mode));
+                                                        }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: handlePickFiles, disabled: submitting, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors disabled:opacity-50", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx("button", { type: "button", onClick: handleSubmit, disabled: !description.trim() || submitting, className: cn('bg-foreground text-background inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg', 'hover:bg-foreground/90 disabled:pointer-events-none disabled:opacity-30', 'transition-all duration-150'), children: submitting ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(SendHorizontal, { className: "h-3.5 w-3.5" })) })] })] }), error ? _jsx("p", { className: "text-destructive mt-2 text-center text-sm", children: error }) : null] }), _jsx("div", { className: "mt-6 flex animate-[onboard-fade-up_0.4s_ease-out_both] flex-wrap justify-center gap-2", children: modeConfig.suggestions.map((suggestion) => (_jsx("button", { type: "button", onClick: () => handleSuggestionClick(suggestion), disabled: submitting, className: "text-muted-foreground hover:text-foreground border-border/60 hover:border-border hover:bg-accent/50 cursor-pointer rounded-full border px-3.5 py-1.5 text-xs transition-all duration-150 disabled:opacity-50 dark:border-white/10 dark:hover:border-white/20 dark:hover:bg-white/[0.06]", children: suggestion }, suggestion))) }, buildMode)] })] }));
 }

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

@@ -3,22 +3,10 @@ import { ControlCenterEmptyState } from './control-center-empty-state.js';
 declare const meta: Meta<typeof ControlCenterEmptyState>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-/** All tools installed — the happy path */
-export declare const AllToolsReady: Story;
-/** Git is missing — blocks all workflow phases */
-export declare const GitMissing: Story;
-/** GitHub CLI is missing — PR features unavailable */
-export declare const GhCliMissing: Story;
-/** Both git and gh are missing */
-export declare const BothToolsMissing: Story;
-/** Claude Code not installed */
-export declare const ClaudeCodeNotInstalled: Story;
-/** Cursor CLI not installed */
-export declare const CursorCliNotInstalled: Story;
-/** Gemini CLI not installed */
-export declare const GeminiCliNotInstalled: Story;
-/** Agent not installed + tools missing — worst case */
-export declare const EverythingMissing: Story;
+/** Prompt-first onboarding — the default view after agent setup */
+export declare const Default: Story;
 /** With callback — for interaction testing */
 export declare const WithCallback: Story;
+/** As overlay — with close button */
+export declare const AsOverlay: Story;
 //# sourceMappingURL=control-center-empty-state.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAc9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA+FnC,2CAA2C;AAC3C,eAAO,MAAM,aAAa,EAAE,KAG3B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,UAAU,EAAE,KAGxB,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,sBAAsB,EAAE,KAGpC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,EAAE,KAG/B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}
+{"version":3,"file":"control-center-empty-state.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAc9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,mEAAmE;AACnE,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC"}

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

@@ -12,116 +12,9 @@ const meta = {
     ],
 };
 export default meta;
-const agentReady = {
-    agentType: 'claude-code',
-    installed: true,
-    authenticated: true,
-    label: 'Claude Code',
-    binaryName: 'claude',
-    installCommand: 'curl -fsSL https://claude.ai/install.sh | bash',
-    authCommand: null,
-};
-const claudeNotInstalled = {
-    agentType: 'claude-code',
-    installed: false,
-    authenticated: false,
-    label: 'Claude Code',
-    binaryName: 'claude',
-    installCommand: 'curl -fsSL https://claude.ai/install.sh | bash',
-    authCommand: 'Install Claude Code first',
-};
-const cursorNotInstalled = {
-    agentType: 'cursor',
-    installed: false,
-    authenticated: false,
-    label: 'Cursor CLI',
-    binaryName: 'cursor-agent',
-    installCommand: 'curl https://cursor.com/install -fsS | bash',
-    authCommand: 'Install Cursor CLI first',
-};
-const geminiNotInstalled = {
-    agentType: 'gemini-cli',
-    installed: false,
-    authenticated: false,
-    label: 'Gemini CLI',
-    binaryName: 'gemini',
-    installCommand: 'npm install -g @google/gemini-cli',
-    authCommand: 'Install Gemini CLI first',
-};
-const gitReady = {
-    installed: true,
-    version: '2.43.0',
-    installCommand: 'sudo apt-get install -y git',
-    installUrl: 'https://git-scm.com',
-};
-const gitMissing = {
-    installed: false,
-    version: null,
-    installCommand: 'sudo apt-get install -y git',
-    installUrl: 'https://git-scm.com',
-};
-const ghReady = {
-    installed: true,
-    version: '2.40.1',
-    installCommand: 'sudo apt install gh -y',
-    installUrl: 'https://cli.github.com',
-};
-const ghMissing = {
-    installed: false,
-    version: null,
-    installCommand: 'sudo apt install gh -y',
-    installUrl: 'https://cli.github.com',
-};
-function setMocks(agent, git, gh) {
-    return () => {
-        const win = globalThis;
-        win.__mockAgentAuth = agent;
-        win.__mockToolStatus = { git, gh };
-        return () => {
-            delete win.__mockAgentAuth;
-            delete win.__mockToolStatus;
-        };
-    };
-}
-/** All tools installed — the happy path */
-export const AllToolsReady = {
+/** Prompt-first onboarding — the default view after agent setup */
+export const Default = {
     args: {},
-    beforeEach: setMocks(agentReady, gitReady, ghReady),
-};
-/** Git is missing — blocks all workflow phases */
-export const GitMissing = {
-    args: {},
-    beforeEach: setMocks(agentReady, gitMissing, ghReady),
-};
-/** GitHub CLI is missing — PR features unavailable */
-export const GhCliMissing = {
-    args: {},
-    beforeEach: setMocks(agentReady, gitReady, ghMissing),
-};
-/** Both git and gh are missing */
-export const BothToolsMissing = {
-    args: {},
-    beforeEach: setMocks(agentReady, gitMissing, ghMissing),
-};
-/** Claude Code not installed */
-export const ClaudeCodeNotInstalled = {
-    args: {},
-    beforeEach: setMocks(claudeNotInstalled, gitReady, ghReady),
-};
-/** Cursor CLI not installed */
-export const CursorCliNotInstalled = {
-    args: {},
-    beforeEach: setMocks(cursorNotInstalled, gitReady, ghReady),
-};
-/** Gemini CLI not installed */
-export const GeminiCliNotInstalled = {
-    args: {},
-    beforeEach: setMocks(geminiNotInstalled, gitReady, ghReady),
-};
-/** Agent not installed + tools missing — worst case */
-export const EverythingMissing = {
-    args: {},
-    beforeEach: setMocks(claudeNotInstalled, gitMissing, ghMissing),
 };
 /** With callback — for interaction testing */
 export const WithCallback = {
@@ -130,5 +23,19 @@ export const WithCallback = {
             // eslint-disable-next-line no-console
             console.log('Selected repository:', path);
         },
+        onApplicationCreated: (appId) => {
+            // eslint-disable-next-line no-console
+            console.log('Application created:', appId);
+        },
+    },
+};
+/** As overlay — with close button */
+export const AsOverlay = {
+    args: {
+        onClose: () => {
+            // eslint-disable-next-line no-console
+            console.log('Close clicked');
+        },
+        className: 'bg-background',
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAgC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAiezF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAgC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA2iBzF"}

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { Sparkles, FolderPlus, Github, GitBranch, LayoutGrid } 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';
@@ -36,7 +36,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const { fitView } = useReactFlow();
     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);
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleArchiveFeature, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleUnarchiveFeature, handleDeleteRepository, handleDeleteApplication, createFeatureNode, addApplication, showArchived, setShowArchived, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features + repo state to context
     const { setFeatures: setSidebarFeatures, setHasRepositories: setSidebarHasRepos } = useSidebarFeaturesContext();
     const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
@@ -73,6 +73,9 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         setSidebarFeatures(sidebarItems);
     }, [sidebarKey, featureNodes, setSidebarFeatures]);
     // ── URL-based navigation handlers ────────────────────────────────────
+    const handleApplicationClick = useCallback((applicationId) => {
+        guardedNavigate(() => router.push(`/application/${applicationId}`));
+    }, [router, guardedNavigate]);
     const handleNodeClick = useCallback((event, node) => {
         if (node.type === 'featureNode') {
             const data = node.data;
@@ -210,6 +213,23 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:feature-created', handler);
         return () => window.removeEventListener('shep:feature-created', handler);
     }, [nodes, createFeatureNode]);
+    // Listen for application creation events from the empty state prompt overlay
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            const appNodeId = `app-${detail.applicationId}`;
+            addApplication(appNodeId, {
+                id: detail.applicationId,
+                name: detail.name,
+                description: detail.description ?? '',
+                status: detail.status ?? 'Idle',
+                repositoryPath: detail.repositoryPath ?? '',
+                additionalPathCount: 0,
+            });
+        };
+        window.addEventListener('shep:application-created', handler);
+        return () => window.removeEventListener('shep:application-created', handler);
+    }, [addApplication]);
     // 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.
@@ -252,6 +272,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             onRepositoryAdd: handleAddFeatureToRepo,
             onRepositoryClick: handleRepositoryClick,
             onRepositoryDelete: handleDeleteRepository,
+            onApplicationClick: handleApplicationClick,
+            onApplicationDelete: handleDeleteApplication,
         });
     }, [
         setCallbacks,
@@ -265,6 +287,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleAddFeatureToRepo,
         handleRepositoryClick,
         handleDeleteRepository,
+        handleApplicationClick,
+        handleDeleteApplication,
     ]);
     const handleMoveEnd = useCallback((_event, viewport) => {
         handleViewportChange(viewport);
@@ -316,6 +340,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const handlePickFolder = useCallback(() => {
         window.dispatchEvent(new CustomEvent('shep:pick-folder'));
     }, []);
+    // ── Full-screen create prompt overlay ────────────────────────────────
+    const [showCreatePrompt, setShowCreatePrompt] = useState(false);
     const featureFlags = useFeatureFlags();
     // (+) FAB actions — only visible on control center
     const fabActions = useMemo(() => {
@@ -335,6 +361,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 icon: _jsx(FolderPlus, { className: "h-4 w-4" }),
                 onClick: handlePickFolder,
             },
+            {
+                id: 'new-application',
+                label: t('fab.newApplication'),
+                icon: _jsx(LayoutGrid, { className: "h-4 w-4" }),
+                onClick: () => setShowCreatePrompt(true),
+            },
         ];
         if (featureFlags.adoptBranch) {
             actions.push({
@@ -367,7 +399,15 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         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] }));
+    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, onApplicationCreated: (appId, initialPrompt) => {
+                        router.push(`/application/${appId}?prompt=${encodeURIComponent(initialPrompt)}`);
+                    } }) }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null, showCreatePrompt ? (_jsx("div", { className: "absolute inset-0 z-50", children: _jsx(ControlCenterEmptyState, { onRepositorySelect: (path) => {
+                        setShowCreatePrompt(false);
+                        addRepoAndFocus(path);
+                    }, onApplicationCreated: (appId, initialPrompt) => {
+                        setShowCreatePrompt(false);
+                        router.push(`/application/${appId}?prompt=${encodeURIComponent(initialPrompt)}`);
+                    }, onClose: () => setShowCreatePrompt(false), className: "bg-background" }) })) : null] }));
 }
 /** (+) FAB that tracks sidebar width via CSS var + transition.
  *  When fabLayout.swapPosition is true, moves to the end side (right in LTR). */