@shepai/cli 1.92.1-pr278.546c1d4 → 1.92.1-pr278.e659c75

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
-import { Check, ChevronRight, ChevronLeft, Download, Loader2, CheckCircle2, Circle, AlertCircle, Bot, } from 'lucide-react';
+import { Check, ChevronRight, ChevronLeft, Download, Loader2, CheckCircle2, Circle, AlertCircle, } from 'lucide-react';
 import { getAllAgentModels } from '../../../app/actions/get-all-agent-models.js';
 import { checkAgentTool } from '../../../app/actions/check-agent-tool.js';
 import { updateAgentAndModel } from '../../../app/actions/update-agent-and-model.js';
@@ -79,37 +79,37 @@ export function WelcomeAgentSetup({ onComplete, className }) {
         }
     }, [selectedAgent, selectedModel, onComplete]);
     if (loading) {
-        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center justify-center gap-3', className), children: [_jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Loading agents..." })] }));
+        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('bg-card flex flex-col items-center justify-center gap-3 rounded-xl border p-8', 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..." })] }));
     }
-    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex w-full flex-col items-center gap-4', className), children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "h-4 w-4" }), _jsxs("span", { className: "text-xs font-semibold tracking-widest uppercase", children: [step === 'select-agent' && 'Choose your agent', step === 'select-model' && 'Pick a model', step === 'check-tool' && 'Verifying setup'] })] }), _jsx("div", { className: "flex w-48 items-center gap-1.5", children: ['select-agent', 'select-model', 'check-tool'].map((s, i) => (_jsx("div", { className: cn('h-1 flex-1 rounded-full transition-colors', i <= ['select-agent', 'select-model', 'check-tool'].indexOf(step)
-                        ? 'bg-primary'
-                        : 'bg-muted') }, s))) }), step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", className: "flex flex-col gap-2", children: groups.map((group) => {
-                    const GroupIcon = getAgentTypeIcon(group.agentType);
-                    return (_jsxs("button", { type: "button", "data-testid": `agent-option-${group.agentType}`, className: "border-muted-foreground/30 hover:border-primary hover:text-primary flex cursor-pointer items-center gap-3 rounded-lg border-2 border-dashed px-8 py-4 transition-colors", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "h-5 w-5 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: group.label }), group.models.length > 0 && (_jsxs("span", { className: "text-muted-foreground ml-1.5 text-xs", children: [group.models.length, " model", group.models.length !== 1 ? 's' : ''] }))] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4" })] }, group.agentType));
-                }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", className: "flex flex-col gap-2", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground mb-1 flex cursor-pointer items-center gap-1.5 self-start text-xs font-medium transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5" }), "Back to agents"] }), activeGroup.models.map((m) => {
-                        const meta = getModelMeta(m.id);
-                        return (_jsxs("button", { type: "button", "data-testid": `model-option-${m.id}`, className: "border-muted-foreground/30 hover:border-primary hover:text-primary flex cursor-pointer items-center gap-3 rounded-lg border-2 border-dashed px-8 py-4 text-left transition-colors", onClick: () => handleModelSelect(m.id), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-sm font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-xs", children: meta.description || m.description })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-3.5 w-3.5" })] }, m.id));
-                    })] })) : null, step === 'check-tool' && (_jsx(ToolCheckStep, { toolStatus: toolStatus, checking: checkingTool, saving: saving, onConfirm: handleConfirm, onBack: handleBack, onToolInstalled: () => {
-                    // Re-check tool after install
-                    if (selectedAgent) {
-                        setCheckingTool(true);
-                        checkAgentTool(selectedAgent)
-                            .then(setToolStatus)
-                            .finally(() => setCheckingTool(false));
-                    }
-                } }))] }));
+    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('bg-card w-full max-w-md rounded-xl border shadow-sm', className), children: [_jsxs("div", { className: "border-b px-5 py-4", children: [_jsx("h2", { className: "text-sm font-bold", children: "Set up your AI agent" }), _jsxs("p", { className: "text-muted-foreground mt-0.5 text-xs", children: [step === 'select-agent' && 'Choose the coding agent you want to use', step === 'select-model' && 'Pick a model for your agent', step === 'check-tool' && 'Verifying tool availability'] }), _jsx("div", { className: "mt-3 flex items-center gap-1.5", children: ['select-agent', 'select-model', 'check-tool'].map((s, i) => (_jsx("div", { className: cn('h-1 flex-1 rounded-full transition-colors', i <= ['select-agent', 'select-model', 'check-tool'].indexOf(step)
+                                ? 'bg-primary'
+                                : 'bg-muted') }, s))) })] }), _jsxs("div", { className: "p-2", children: [step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", children: groups.map((group) => {
+                            const GroupIcon = getAgentTypeIcon(group.agentType);
+                            return (_jsxs("button", { type: "button", "data-testid": `agent-option-${group.agentType}`, className: "hover:bg-accent flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "h-5 w-5 shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: group.label }), group.models.length > 0 && (_jsxs("span", { className: "text-muted-foreground ml-1.5 text-xs", children: [group.models.length, " model", group.models.length !== 1 ? 's' : ''] }))] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4" })] }, group.agentType));
+                        }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground mb-1 flex w-full cursor-pointer items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5" }), "Back to agents"] }), activeGroup.models.map((m) => {
+                                const meta = getModelMeta(m.id);
+                                return (_jsxs("button", { type: "button", "data-testid": `model-option-${m.id}`, className: "hover:bg-accent flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors", onClick: () => handleModelSelect(m.id), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-sm font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-xs", children: meta.description || m.description })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-3.5 w-3.5" })] }, m.id));
+                            })] })) : null, step === 'check-tool' && (_jsx(ToolCheckStep, { toolStatus: toolStatus, checking: checkingTool, saving: saving, onConfirm: handleConfirm, onBack: handleBack, onToolInstalled: () => {
+                            // Re-check tool after install
+                            if (selectedAgent) {
+                                setCheckingTool(true);
+                                checkAgentTool(selectedAgent)
+                                    .then(setToolStatus)
+                                    .finally(() => setCheckingTool(false));
+                            }
+                        } }))] })] }));
 }
 /** Sub-component for the tool verification step */
 function ToolCheckStep({ toolStatus, checking, saving, onConfirm, onBack, onToolInstalled, }) {
     if (checking || !toolStatus) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-3 py-4", children: [_jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Checking tool availability..." })] }));
+        return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-6", children: [_jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Checking tool availability..." })] }));
     }
     // Agent doesn't require a tool (e.g., dev/demo)
     if (!toolStatus.toolId) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm font-medium", children: "No additional tools required" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground flex cursor-pointer items-center gap-1.5 rounded-lg border-2 border-dashed px-8 py-4 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })] })] }));
+        return (_jsxs("div", { className: "flex flex-col gap-3 px-3 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm font-medium", children: "No additional tools required" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "bg-primary text-primary-foreground hover:bg-primary/90 ml-auto flex cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })] })] }));
     }
     if (toolStatus.installed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), _jsxs("span", { className: "text-sm font-medium", children: [toolStatus.tool?.name ?? toolStatus.toolId, " is installed"] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground flex cursor-pointer items-center gap-1.5 rounded-lg border-2 border-dashed px-8 py-4 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })] })] }));
+        return (_jsxs("div", { className: "flex flex-col gap-3 px-3 py-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-600 dark:text-emerald-400", children: [_jsx(CheckCircle2, { className: "h-4 w-4" }), _jsxs("span", { className: "text-sm font-medium", children: [toolStatus.tool?.name ?? toolStatus.toolId, " is installed"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "bg-primary text-primary-foreground hover:bg-primary/90 ml-auto flex cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })] })] }));
     }
     // Tool not installed — show install option
     return (_jsx(ToolInstallInline, { toolStatus: toolStatus, saving: saving, onConfirm: onConfirm, onBack: onBack, onInstalled: onToolInstalled }));
@@ -125,11 +125,11 @@ function ToolInstallInline({ toolStatus, saving, onConfirm, onBack, onInstalled,
             onInstalled();
         }
     }, [isInstallDone, onInstalled]);
-    return (_jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isInstallDone ? (_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600 dark:text-emerald-400" })) : isInstallError ? (_jsx(AlertCircle, { className: "h-4 w-4 text-red-500" })) : (_jsx(Circle, { className: "text-muted-foreground h-4 w-4" })), _jsxs("span", { className: "text-sm font-medium", children: [toolStatus.tool?.name ?? toolId, ' ', isInstallDone
+    return (_jsxs("div", { className: "flex flex-col gap-3 px-3 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isInstallDone ? (_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-600 dark:text-emerald-400" })) : isInstallError ? (_jsx(AlertCircle, { className: "h-4 w-4 text-red-500" })) : (_jsx(Circle, { className: "text-muted-foreground h-4 w-4" })), _jsxs("span", { className: "text-sm font-medium", children: [toolStatus.tool?.name ?? toolId, ' ', isInstallDone
                                 ? 'installed successfully'
                                 : isInstallError
                                     ? 'installation failed'
-                                    : 'is not installed'] })] }), toolStatus.tool?.installCommand && status === 'idle' ? (_jsxs("div", { className: "w-full rounded-lg bg-zinc-900 px-5 py-4 font-mono text-sm text-zinc-100", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), toolStatus.tool.installCommand] })) : null, (status === 'streaming' || isInstallDone || isInstallError) && logs.length > 0 ? (_jsxs("div", { className: "max-h-32 w-full overflow-auto rounded-lg bg-zinc-900 px-5 py-4 font-mono text-[11px] leading-relaxed text-zinc-300", children: [logs.map((line, idx) => (
+                                    : 'is not installed'] })] }), toolStatus.tool?.installCommand && status === 'idle' ? (_jsxs("div", { className: "rounded-md bg-zinc-900 px-3 py-2 font-mono text-xs text-zinc-100", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), toolStatus.tool.installCommand] })) : null, (status === 'streaming' || isInstallDone || isInstallError) && logs.length > 0 ? (_jsxs("div", { className: "max-h-32 overflow-auto rounded-md bg-zinc-900 p-2 font-mono text-[11px] leading-relaxed text-zinc-300", children: [logs.map((line, idx) => (
                     // eslint-disable-next-line react/no-array-index-key -- logs are append-only, never reorder
-                    _jsx("div", { className: "break-all whitespace-pre-wrap", children: line }, idx))), isInstallDone ? (_jsx("div", { className: "mt-1 text-emerald-400", children: "Installation complete" })) : null, isInstallError ? (_jsx("div", { className: "mt-1 text-red-400", children: "Installation failed \u2014 try installing manually" })) : null] })) : null, _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isInstallDone && toolStatus.tool?.autoInstall ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-install", disabled: status === 'streaming', className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground flex cursor-pointer items-center gap-1.5 rounded-lg border-2 border-dashed px-8 py-4 text-sm font-medium transition-colors disabled:opacity-60", onClick: startInstall, children: [status === 'streaming' ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Download, { className: "h-3.5 w-3.5" })), status === 'streaming' ? 'Installing...' : 'Install'] })) : null, isInstallDone ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground flex cursor-pointer items-center gap-1.5 rounded-lg border-2 border-dashed px-8 py-4 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })) : null] })] })] }));
+                    _jsx("div", { className: "break-all whitespace-pre-wrap", children: line }, idx))), isInstallDone ? (_jsx("div", { className: "mt-1 text-emerald-400", children: "Installation complete" })) : null, isInstallError ? (_jsx("div", { className: "mt-1 text-red-400", children: "Installation failed \u2014 try installing manually" })) : null] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors", onClick: onBack, children: [_jsx(ChevronLeft, { className: "mr-0.5 inline h-3.5 w-3.5" }), "Back"] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [!isInstallDone && toolStatus.tool?.autoInstall ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-install", disabled: status === 'streaming', className: "bg-primary text-primary-foreground hover:bg-primary/90 flex cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-60", onClick: startInstall, children: [status === 'streaming' ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Download, { className: "h-3.5 w-3.5" })), status === 'streaming' ? 'Installing...' : 'Install'] })) : null, isInstallDone ? (_jsxs("button", { type: "button", "data-testid": "agent-setup-confirm", disabled: saving, className: "bg-primary text-primary-foreground hover:bg-primary/90 flex cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-60", onClick: onConfirm, children: [saving ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(Check, { className: "h-3.5 w-3.5" })), "Continue"] })) : null] })] })] }));
 }

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

@@ -9,7 +9,7 @@ const meta = {
         layout: 'centered',
     },
     decorators: [
-        (Story) => (_jsx("div", { style: { width: 480, padding: 48, display: 'flex', justifyContent: 'center' }, children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { style: { width: 420, padding: 24 }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;