@shepai/cli 1.95.0 → 1.96.0

package/dist/packages/core/src/application/use-cases/settings/complete-web-onboarding.use-case.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Complete Web Onboarding Use Case
+ *
+ * Lighter variant of CompleteOnboardingUseCase for the web UI wizard.
+ * Only updates agent type, model, and sets onboardingComplete=true.
+ * Other settings (IDE, workflow defaults) keep their current values.
+ */
+import type { Settings, AgentType } from '../../../domain/generated/output.js';
+import type { ISettingsRepository } from '../../ports/output/repositories/settings.repository.interface.js';
+export interface CompleteWebOnboardingInput {
+    agentType: AgentType;
+    model: string | null;
+}
+export declare class CompleteWebOnboardingUseCase {
+    private readonly settingsRepository;
+    constructor(settingsRepository: ISettingsRepository);
+    execute(input: CompleteWebOnboardingInput): Promise<Settings>;
+}
+//# sourceMappingURL=complete-web-onboarding.use-case.d.ts.map

package/dist/packages/core/src/application/use-cases/settings/complete-web-onboarding.use-case.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complete-web-onboarding.use-case.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/application/use-cases/settings/complete-web-onboarding.use-case.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kEAAkE,CAAC;AAE5G,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,qBACa,4BAA4B;IAGrC,OAAO,CAAC,QAAQ,CAAC,kBAAkB;gBAAlB,kBAAkB,EAAE,mBAAmB;IAGpD,OAAO,CAAC,KAAK,EAAE,0BAA0B,GAAG,OAAO,CAAC,QAAQ,CAAC;CAsBpE"}

package/dist/packages/core/src/application/use-cases/settings/complete-web-onboarding.use-case.js

@@ -0,0 +1,52 @@
+/**
+ * Complete Web Onboarding Use Case
+ *
+ * Lighter variant of CompleteOnboardingUseCase for the web UI wizard.
+ * Only updates agent type, model, and sets onboardingComplete=true.
+ * Other settings (IDE, workflow defaults) keep their current values.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { injectable, inject } from 'tsyringe';
+let CompleteWebOnboardingUseCase = class CompleteWebOnboardingUseCase {
+    settingsRepository;
+    constructor(settingsRepository) {
+        this.settingsRepository = settingsRepository;
+    }
+    async execute(input) {
+        const settings = await this.settingsRepository.load();
+        if (!settings) {
+            throw new Error('Settings not found. Please run initialization first.');
+        }
+        const updatedSettings = {
+            ...settings,
+            agent: {
+                ...settings.agent,
+                type: input.agentType,
+            },
+            models: {
+                default: input.model?.trim() ?? settings.models.default,
+            },
+            onboardingComplete: true,
+            updatedAt: new Date(),
+        };
+        await this.settingsRepository.update(updatedSettings);
+        return updatedSettings;
+    }
+};
+CompleteWebOnboardingUseCase = __decorate([
+    injectable(),
+    __param(0, inject('ISettingsRepository')),
+    __metadata("design:paramtypes", [Object])
+], CompleteWebOnboardingUseCase);
+export { CompleteWebOnboardingUseCase };

package/dist/packages/core/src/application/use-cases/settings/index.d.ts

@@ -9,4 +9,6 @@ export { UpdateSettingsUseCase } from './update-settings.use-case.js';
 export { CheckOnboardingStatusUseCase } from './check-onboarding-status.use-case.js';
 export { CompleteOnboardingUseCase } from './complete-onboarding.use-case.js';
 export type { CompleteOnboardingInput } from './complete-onboarding.use-case.js';
+export { CompleteWebOnboardingUseCase } from './complete-web-onboarding.use-case.js';
+export type { CompleteWebOnboardingInput } from './complete-web-onboarding.use-case.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/packages/core/src/application/use-cases/settings/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/application/use-cases/settings/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,YAAY,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/core/src/application/use-cases/settings/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,YAAY,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AACrF,YAAY,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/packages/core/src/application/use-cases/settings/index.js

@@ -8,3 +8,4 @@ export { LoadSettingsUseCase } from './load-settings.use-case.js';
 export { UpdateSettingsUseCase } from './update-settings.use-case.js';
 export { CheckOnboardingStatusUseCase } from './check-onboarding-status.use-case.js';
 export { CompleteOnboardingUseCase } from './complete-onboarding.use-case.js';
+export { CompleteWebOnboardingUseCase } from './complete-web-onboarding.use-case.js';

package/dist/packages/core/src/infrastructure/di/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CAsSrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/di/container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiHrC;;;;;;GAMG;AACH,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,SAAS,CAAC,CA0SrE;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAEhD;AAED;;;GAGG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/packages/core/src/infrastructure/di/container.js

@@ -45,6 +45,7 @@ import { InitializeSettingsUseCase } from '../../application/use-cases/settings/
 import { LoadSettingsUseCase } from '../../application/use-cases/settings/load-settings.use-case.js';
 import { UpdateSettingsUseCase } from '../../application/use-cases/settings/update-settings.use-case.js';
 import { CompleteOnboardingUseCase } from '../../application/use-cases/settings/complete-onboarding.use-case.js';
+import { CompleteWebOnboardingUseCase } from '../../application/use-cases/settings/complete-web-onboarding.use-case.js';
 import { ConfigureAgentUseCase } from '../../application/use-cases/agents/configure-agent.use-case.js';
 import { ValidateAgentAuthUseCase } from '../../application/use-cases/agents/validate-agent-auth.use-case.js';
 import { RunAgentUseCase } from '../../application/use-cases/agents/run-agent.use-case.js';
@@ -244,6 +245,7 @@ export async function initializeContainer() {
     container.registerSingleton(LoadSettingsUseCase);
     container.registerSingleton(UpdateSettingsUseCase);
     container.registerSingleton(CompleteOnboardingUseCase);
+    container.registerSingleton(CompleteWebOnboardingUseCase);
     container.registerSingleton(ConfigureAgentUseCase);
     container.registerSingleton(ValidateAgentAuthUseCase);
     container.registerSingleton(RunAgentUseCase);
@@ -352,6 +354,9 @@ export async function initializeContainer() {
     container.register('UpdateSettingsUseCase', {
         useFactory: (c) => c.resolve(UpdateSettingsUseCase),
     });
+    container.register('CompleteWebOnboardingUseCase', {
+        useFactory: (c) => c.resolve(CompleteWebOnboardingUseCase),
+    });
     container.register('CleanupFeatureWorktreeUseCase', {
         useFactory: (c) => c.resolve(CleanupFeatureWorktreeUseCase),
     });

package/dist/src/presentation/cli/commands/feat/new.command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"new.command.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/cli/commands/feat/new.command.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA0DpC;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAgI1C"}
+{"version":3,"file":"new.command.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/cli/commands/feat/new.command.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA4DpC;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAwI1C"}

package/dist/src/presentation/cli/commands/feat/new.command.js

@@ -19,6 +19,8 @@ import { SdlcLifecycle } from '../../../../../packages/core/src/domain/generated
 import { colors, messages, spinner } from '../../ui/index.js';
 import { getShepHomeDir } from '../../../../../packages/core/src/infrastructure/services/filesystem/shep-directory.service.js';
 import { getSettings, hasSettings } from '../../../../../packages/core/src/infrastructure/services/settings.service.js';
+import { CheckOnboardingStatusUseCase } from '../../../../../packages/core/src/application/use-cases/settings/check-onboarding-status.use-case.js';
+import { onboardingWizard } from '../../../tui/wizards/onboarding/onboarding.wizard.js';
 /** Commander collect pattern for repeatable options. */
 function collect(value, previous) {
     return [...previous, value];
@@ -58,6 +60,13 @@ export function createNewCommand() {
         .option('--attach <path>', 'Attach a file (repeatable)', collect, [])
         .action(async (description, options) => {
         try {
+            // First-run onboarding gate — only for interactive terminals
+            if (process.stdin.isTTY) {
+                const { isComplete } = await new CheckOnboardingStatusUseCase().execute();
+                if (!isComplete) {
+                    await onboardingWizard();
+                }
+            }
             const useCase = container.resolve(CreateFeatureUseCase);
             const repoPath = options.repo ?? process.cwd();
             // Resolve openPr from CLI flags or settings defaults

package/dist/src/presentation/cli/index.js

@@ -54,7 +54,6 @@ import { startDaemon } from './commands/daemon/start-daemon.js';
 import { initializeContainer, container } from '../../../packages/core/src/infrastructure/di/container.js';
 import { InitializeSettingsUseCase } from '../../../packages/core/src/application/use-cases/settings/initialize-settings.use-case.js';
 import { initializeSettings } from '../../../packages/core/src/infrastructure/services/settings.service.js';
-import { CheckOnboardingStatusUseCase } from '../../../packages/core/src/application/use-cases/settings/check-onboarding-status.use-case.js';
 /**
  * Bootstrap function - initializes all dependencies before CLI starts.
  * Performs async initialization (database, settings) before parsing commands.
@@ -83,17 +82,6 @@ async function bootstrap() {
             messages.error('Failed to initialize settings', err);
             throw error;
         }
-        // Step 2.5: First-run onboarding gate
-        // Only run in interactive terminals (the wizard needs TTY for prompts)
-        if (process.stdin.isTTY) {
-            const onboardingCheck = new CheckOnboardingStatusUseCase();
-            const { isComplete } = await onboardingCheck.execute();
-            if (!isComplete) {
-                // Lazy-import to avoid ~460ms startup cost when onboarding is already complete
-                const { onboardingWizard } = await import('../tui/wizards/onboarding/onboarding.wizard.js');
-                await onboardingWizard();
-            }
-        }
         // Step 3: Set up Commander CLI
         const versionService = container.resolve('IVersionService');
         const { version, description } = versionService.getVersion();

package/dist/src/presentation/web/app/actions/agent-setup-flag.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check whether onboarding has been completed.
+ * Delegates to the in-memory settings singleton (zero DB overhead).
+ */
+export declare function isAgentSetupComplete(): Promise<boolean>;
+//# sourceMappingURL=agent-setup-flag.d.ts.map

package/dist/src/presentation/web/app/actions/agent-setup-flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-setup-flag.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/agent-setup-flag.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,OAAO,CAAC,CAM7D"}

package/dist/src/presentation/web/app/actions/agent-setup-flag.js

@@ -0,0 +1,14 @@
+'use server';
+import { getSettings } from '../../../../../packages/core/src/infrastructure/services/settings.service.js';
+/**
+ * Check whether onboarding has been completed.
+ * Delegates to the in-memory settings singleton (zero DB overhead).
+ */
+export async function isAgentSetupComplete() {
+    try {
+        return getSettings().onboardingComplete;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/src/presentation/web/app/actions/check-agent-tool.d.ts

@@ -0,0 +1,11 @@
+import type { ToolItem } from '../../../../../packages/core/src/application/use-cases/tools/list-tools.use-case.js';
+export interface AgentToolStatus {
+    agentType: string;
+    toolId: string | null;
+    tool: ToolItem | null;
+    installed: boolean;
+    /** CLI binary name for manual run instructions (e.g. "claude", "gemini") */
+    binaryName: string | null;
+}
+export declare function checkAgentTool(agentType: string): Promise<AgentToolStatus>;
+//# sourceMappingURL=check-agent-tool.d.ts.map

package/dist/src/presentation/web/app/actions/check-agent-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-agent-tool.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/check-agent-tool.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8DAA8D,CAAC;AAmB7F,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,wBAAsB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAmBhF"}

package/dist/src/presentation/web/app/actions/check-agent-tool.js

@@ -0,0 +1,35 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+/**
+ * Maps agent types to their corresponding tool IDs in the tool registry.
+ * These IDs match the JSON file names in tool-installer/tools/.
+ */
+const AGENT_TOOL_MAP = {
+    'claude-code': 'claude-code',
+    cursor: 'cursor-cli',
+    'gemini-cli': 'gemini-cli',
+};
+/** CLI binary names matching the `binary` field in each tool JSON */
+const AGENT_BINARY_MAP = {
+    'claude-code': 'claude',
+    cursor: 'cursor',
+    'gemini-cli': 'gemini',
+};
+export async function checkAgentTool(agentType) {
+    const toolId = AGENT_TOOL_MAP[agentType] ?? null;
+    const binaryName = AGENT_BINARY_MAP[agentType] ?? null;
+    // Dev agent and unknown agents don't need a tool
+    if (!toolId) {
+        return { agentType, toolId: null, tool: null, installed: true, binaryName: null };
+    }
+    try {
+        const useCase = resolve('ListToolsUseCase');
+        const tools = await useCase.execute();
+        const tool = tools.find((t) => t.id === toolId) ?? null;
+        const installed = tool?.status.status === 'available';
+        return { agentType, toolId, tool, installed, binaryName };
+    }
+    catch {
+        return { agentType, toolId, tool: null, installed: false, binaryName };
+    }
+}

package/dist/src/presentation/web/app/actions/update-agent-and-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-agent-and-model.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/update-agent-and-model.ts"],"names":[],"mappings":"AAUA,wBAAsB,mBAAmB,CACvC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,OAAO,CAAC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CA2B1C"}
+{"version":3,"file":"update-agent-and-model.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/update-agent-and-model.ts"],"names":[],"mappings":"AAUA,wBAAsB,mBAAmB,CACvC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,OAAO,CAAC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAoB1C"}

package/dist/src/presentation/web/app/actions/update-agent-and-model.js

@@ -1,22 +1,16 @@
 'use server';
 import { resolve } from '../../lib/server-container.js';
-import { getSettings, resetSettings, initializeSettings, } from '../../../../../packages/core/src/infrastructure/services/settings.service.js';
+import { resetSettings, initializeSettings, } from '../../../../../packages/core/src/infrastructure/services/settings.service.js';
 export async function updateAgentAndModel(agentType, model) {
     if (!agentType.trim()) {
         return { ok: false, error: 'agent type is required' };
     }
     try {
-        const currentSettings = getSettings();
-        const updatedSettings = {
-            ...currentSettings,
-            agent: {
-                ...currentSettings.agent,
-                type: agentType.trim(),
-            },
-            models: { default: model?.trim() ?? currentSettings.models.default },
-        };
-        const updateUseCase = resolve('UpdateSettingsUseCase');
-        await updateUseCase.execute(updatedSettings);
+        const useCase = resolve('CompleteWebOnboardingUseCase');
+        const updatedSettings = await useCase.execute({
+            agentType: agentType.trim(),
+            model,
+        });
         resetSettings();
         initializeSettings(updatedSettings);
         return { ok: true };

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,2CAsG9B"}
+{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,2CAiI9B"}

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

@@ -1,13 +1,22 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
 import { Github, Plus, TerminalSquare, Copy, Check, Loader2 } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
-const commands = ['cd ~/my-repo', 'shep feat new "create modern, sleek dashboards"'];
+import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
+import { WelcomeAgentSetup } from './welcome-agent-setup.js';
+const commands = ['cd ~/my-repo', 'shep feat new "sleek dashboard"'];
 export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [copied, setCopied] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [agentReady, setAgentReady] = useState(false);
+    useEffect(() => {
+        isAgentSetupComplete().then((done) => {
+            if (done)
+                setAgentReady(true);
+        });
+    }, []);
     async function handlePickerClick() {
         if (loading)
             return;
@@ -27,5 +36,12 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     }, []);
-    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative h-full w-full', className), children: [_jsx("div", { className: "absolute inset-0 [background-image:radial-gradient(circle,_var(--color-border)_1px,_transparent_1px)] [background-size:24px_24px]" }), _jsxs("div", { className: "absolute top-8 left-8 z-10", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight", children: "Features" }), _jsx("p", { className: "text-muted-foreground text-3xl font-light", children: "Control Center" })] }), _jsx("div", { className: "relative z-10 flex h-full items-center justify-center", children: _jsxs("div", { className: "flex max-w-lg flex-col items-center gap-6", children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Github, { className: "h-4 w-4" }), _jsx("span", { className: "text-xs font-semibold tracking-widest uppercase", children: "Repositories" })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, 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 disabled:cursor-wait disabled:opacity-60", children: [loading ? _jsx(Loader2, { className: "h-5 w-5 animate-spin" }) : _jsx(Plus, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: loading ? 'Opening...' : 'Add Repository' })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-3", children: [_jsx("div", { className: "bg-border h-px w-16" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(TerminalSquare, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-xs font-semibold tracking-widest uppercase", children: "Or start from the command line" })] }), _jsx("div", { className: "bg-border h-px w-16" })] }), _jsxs("div", { "data-testid": "cli-code-block", className: "relative w-full rounded-lg bg-zinc-900 px-5 py-4 font-mono text-sm text-zinc-100", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded p-1.5 text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-200", "aria-label": "Copy commands", children: copied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), _jsx("span", { children: cmd })] }, cmd))) })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Feature will appear on canvas once created" })] }) })] }));
+    const handleAgentSetupComplete = useCallback(() => {
+        setAgentReady(true);
+    }, []);
+    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative h-full w-full', className), children: [_jsx("div", { className: "absolute inset-0 [background-image:radial-gradient(circle,_var(--color-border)_1px,_transparent_1px)] [background-size:24px_24px]" }), _jsxs("div", { className: "absolute top-8 left-8 z-10", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight", children: "Features" }), _jsx("p", { className: "text-muted-foreground text-3xl font-light", children: "Control Center" })] }), _jsx("div", { className: "relative z-10 flex h-full items-center justify-center", children: _jsx("div", { className: "flex w-72 flex-col items-center gap-4", children: !agentReady ? (
+                    /* Step 1: Agent setup */
+                    _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete })) : (
+                    /* Step 2: Add repository (shown after agent is configured) */
+                    _jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Github, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Repositories" })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, 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:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "text-muted-foreground h-4 w-4" })), _jsx("span", { className: "text-xs font-medium", children: loading ? 'Opening…' : 'Add Repository' })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx("div", { className: "bg-border h-px w-10" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TerminalSquare, { className: "h-3 w-3" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Or via CLI" })] }), _jsx("div", { className: "bg-border h-px w-10" })] }), _jsxs("div", { "data-testid": "cli-code-block", className: "relative w-full rounded-md bg-zinc-900 px-3 py-2 font-mono text-[11px] text-zinc-300", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-2 right-2 cursor-pointer rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(Copy, { className: "h-3 w-3" }) }), _jsx("div", { className: "space-y-0.5", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), _jsx("span", { children: cmd })] }, cmd))) })] }), _jsx("p", { className: "text-muted-foreground text-[10px]", children: "Feature will appear on canvas once created" })] })) }) })] }));
 }

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

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

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

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

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

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

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

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