@sylphx/flow 3.15.0 → 3.17.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @sylphx/flow
 
+## 3.17.0 (2026-02-05)
+
+### ♻️ Refactoring
+
+- **flow:** migrate CLI prompts to Clack and logging to Pino ([08aceb7](https://github.com/SylphxAI/flow/commit/08aceb7d))
+
+### 🐛 Bug Fixes
+
+- **flow:** remove unsafe separator pattern from Clack prompts ([aaf17a7](https://github.com/SylphxAI/flow/commit/aaf17a7d))
+
+### 📝 Documentation
+
+- **builder:** add Zod v4 to tech stack ([2b37327](https://github.com/SylphxAI/flow/commit/2b373279))
+- **builder:** restructure tech stack - Zod as standalone category ([90875ba](https://github.com/SylphxAI/flow/commit/90875baa))
+
+## 3.16.0 (2026-02-05)
+
+### ✨ Features
+
+- **builder:** add Ink and Clack for CLI apps ([e9c3f15](https://github.com/SylphxAI/flow/commit/e9c3f1569f61bf9523c51afee31092584edf0db3))
+- **builder:** add Pino logging to tech stack ([76c9893](https://github.com/SylphxAI/flow/commit/76c98934c0926676e01705bae5ac719cc8bdd3d8))
+- **builder:** expand tech stack with modern React libraries ([af758b0](https://github.com/SylphxAI/flow/commit/af758b0847f450349a192385ccc2d466e0ce1a7f))
+
+### 🐛 Bug Fixes
+
+- **builder:** use Pragmatic Drag and Drop over dnd-kit ([75db518](https://github.com/SylphxAI/flow/commit/75db518f392ebebce65fa59739be03a983a0ed95))
+
+### ♻️ Refactoring
+
+- **builder:** consolidate tech stack to single best choice per category ([b149175](https://github.com/SylphxAI/flow/commit/b149175889c7838bf8f0a56459c0bd9ca811d01f))
+- **builder:** replace Radix UI with Base UI in tech stack ([a4e81df](https://github.com/SylphxAI/flow/commit/a4e81dfcd382030e99c49fe60082aafe033e3981))
+
 ## 3.15.0 (2026-02-05)
 
 ### ✨ Features

package/assets/agents/builder.md

@@ -46,13 +46,15 @@ State-of-the-art industrial standard. Every time. Would you stake your reputatio
 
 **Framework & Runtime:** Next.js 16+, React, Bun
 
+**Schema & Validation:** Zod v4
+
 **Data & API:** Hono + @hono/zod-openapi + hc (type-safe client), React Query, Drizzle ORM
 
 **Database & Infrastructure:** Neon PostgreSQL, Upstash Workflow, Vercel, Vercel Blob, Modal (serverless long-running)
 
 **UI & Styling:** Base UI, Tailwind CSS v4 (CSS-first), Motion v12 (animation)
 
-**Forms:** React Hook Form + Zod
+**Forms:** React Hook Form + @hookform/resolvers
 
 **Tables & Lists:** TanStack Table, TanStack Virtual
 
@@ -62,6 +64,8 @@ State-of-the-art industrial standard. Every time. Would you stake your reputatio
 
 **Logging:** Pino
 
+**CLI Apps:** Ink (React CLI), Clack (prompts)
+
 **AI:** AI SDK v6+
 
 **Auth & Services:** Better Auth, Resend (email)

package/package.json

@@ -1,81 +1,82 @@
 {
-	"name": "@sylphx/flow",
-	"version": "3.15.0",
-	"description": "One CLI to rule them all. Unified orchestration layer for AI coding assistants. Auto-detection, auto-installation, auto-upgrade.",
-	"type": "module",
-	"bin": {
-		"sylphx-flow": "./src/index.ts",
-		"flow": "./src/index.ts"
-	},
-	"exports": {
-		".": {
-			"import": "./src/index.ts",
-			"types": "./src/index.ts"
-		}
-	},
-	"engines": {
-		"node": ">=18.0.0"
-	},
-	"scripts": {
-		"dev": "bun src/index.ts",
-		"start": "bun src/index.ts",
-		"test": "bun test",
-		"test:watch": "bun test --watch",
-		"type-check": "tsc --noEmit",
-		"prepublishOnly": "echo 'Using assets from packages/flow/assets'"
-	},
-	"dependencies": {
-		"commander": "^14.0.2",
-		"chalk": "^5.6.2",
-		"boxen": "^8.0.1",
-		"gradient-string": "^3.0.0",
-		"ora": "^9.0.0",
-		"inquirer": "^12.10.0",
-		"gray-matter": "^4.0.3",
-		"yaml": "^2.8.1",
-		"zod": "^4.1.12",
-		"debug": "^4.4.3"
-	},
-	"devDependencies": {
-		"@types/node": "^24.9.2",
-		"typescript": "^5.9.3"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"files": [
-		"src",
-		"assets",
-		"README.md",
-		"CHANGELOG.md",
-		"LOOP_MODE.md",
-		"UPGRADE.md",
-		"package.json"
-	],
-	"keywords": [
-		"ai",
-		"automation",
-		"workflow",
-		"claude-code",
-		"opencode",
-		"cursor",
-		"cli",
-		"orchestration",
-		"unified",
-		"meta-layer",
-		"developer-tools",
-		"auto-install",
-		"auto-upgrade"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/sylphxltd/flow.git",
-		"directory": "packages/flow"
-	},
-	"bugs": {
-		"url": "https://github.com/sylphxltd/flow/issues"
-	},
-	"homepage": "https://github.com/sylphxltd/flow#readme",
-	"license": "MIT",
-	"author": "sylphxltd"
+  "name": "@sylphx/flow",
+  "version": "3.17.0",
+  "description": "One CLI to rule them all. Unified orchestration layer for AI coding assistants. Auto-detection, auto-installation, auto-upgrade.",
+  "type": "module",
+  "bin": {
+    "sylphx-flow": "./src/index.ts",
+    "flow": "./src/index.ts"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "bun src/index.ts",
+    "start": "bun src/index.ts",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "echo 'Using assets from packages/flow/assets'"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "boxen": "^8.0.1",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.2",
+    "debug": "^4.4.3",
+    "gradient-string": "^3.0.0",
+    "gray-matter": "^4.0.3",
+    "pino": "^9.0.0",
+    "pino-pretty": "^11.0.0",
+    "yaml": "^2.8.1",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.2",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "assets",
+    "README.md",
+    "CHANGELOG.md",
+    "LOOP_MODE.md",
+    "UPGRADE.md",
+    "package.json"
+  ],
+  "keywords": [
+    "ai",
+    "automation",
+    "workflow",
+    "claude-code",
+    "opencode",
+    "cursor",
+    "cli",
+    "orchestration",
+    "unified",
+    "meta-layer",
+    "developer-tools",
+    "auto-install",
+    "auto-upgrade"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sylphxltd/flow.git",
+    "directory": "packages/flow"
+  },
+  "bugs": {
+    "url": "https://github.com/sylphxltd/flow/issues"
+  },
+  "homepage": "https://github.com/sylphxltd/flow#readme",
+  "license": "MIT",
+  "author": "sylphxltd"
 }

package/src/commands/flow/execute-v2.ts

@@ -7,7 +7,6 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import chalk from 'chalk';
-import inquirer from 'inquirer';
 import { FlowExecutor } from '../../core/flow-executor.js';
 import { targetManager } from '../../core/target-manager.js';
 import { AutoUpgrade } from '../../services/auto-upgrade.js';
@@ -18,6 +17,7 @@ import { extractAgentInstructions, loadAgentContent } from '../../utils/agent-en
 import { showAttachSummary, showHeader } from '../../utils/display/banner.js';
 import { CLIError } from '../../utils/error-handler.js';
 import { UserCancelledError } from '../../utils/errors.js';
+import { log, promptConfirm, promptSelect } from '../../utils/prompts/index.js';
 import { ensureTargetInstalled, promptForTargetSelection } from '../../utils/target-selection.js';
 import { resolvePrompt } from './prompt.js';
 import type { FlowOptions } from './types.js';
@@ -62,66 +62,52 @@ function configureProviderEnv(provider: 'kimi' | 'zai', apiKey: string): void {
  * Select and configure provider for Claude Code (silent unless prompting)
  */
 async function selectProvider(configService: GlobalConfigService): Promise<void> {
-  try {
-    const providerConfig = await configService.loadProviderConfig();
-    const defaultProvider = providerConfig.claudeCode.defaultProvider;
-
-    // If not "ask-every-time", use the default provider silently
-    if (defaultProvider !== 'ask-every-time') {
-      if (defaultProvider === 'kimi' || defaultProvider === 'zai') {
-        const provider = providerConfig.claudeCode.providers[defaultProvider];
-        if (provider?.apiKey) {
-          configureProviderEnv(defaultProvider, provider.apiKey);
-        }
+  const providerConfig = await configService.loadProviderConfig();
+  const defaultProvider = providerConfig.claudeCode.defaultProvider;
+
+  // If not "ask-every-time", use the default provider silently
+  if (defaultProvider !== 'ask-every-time') {
+    if (defaultProvider === 'kimi' || defaultProvider === 'zai') {
+      const provider = providerConfig.claudeCode.providers[defaultProvider];
+      if (provider?.apiKey) {
+        configureProviderEnv(defaultProvider, provider.apiKey);
       }
-      return;
-    }
-
-    // Ask user which provider to use for this session
-    const { selectedProvider, rememberChoice } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'selectedProvider',
-        message: 'Select provider:',
-        choices: [
-          { name: 'Default (Claude Code built-in)', value: 'default' },
-          { name: 'Kimi', value: 'kimi' },
-          { name: 'Z.ai', value: 'zai' },
-        ],
-        default: 'default',
-      },
-      {
-        type: 'confirm',
-        name: 'rememberChoice',
-        message: 'Remember this choice?',
-        default: true,
-      },
-    ]);
-
-    // Save choice if user wants to remember
-    if (rememberChoice) {
-      providerConfig.claudeCode.defaultProvider = selectedProvider;
-      await configService.saveProviderConfig(providerConfig);
     }
+    return;
+  }
 
-    // Configure environment variables based on selection
-    if (selectedProvider === 'kimi' || selectedProvider === 'zai') {
-      const provider = providerConfig.claudeCode.providers[selectedProvider];
+  // Ask user which provider to use for this session
+  const selectedProvider = await promptSelect({
+    message: 'Select provider:',
+    options: [
+      { label: 'Default (Claude Code built-in)', value: 'default' },
+      { label: 'Kimi', value: 'kimi' },
+      { label: 'Z.ai', value: 'zai' },
+    ],
+    initialValue: 'default',
+  });
+
+  const rememberChoice = await promptConfirm({
+    message: 'Remember this choice?',
+    initialValue: true,
+  });
+
+  // Save choice if user wants to remember
+  if (rememberChoice) {
+    providerConfig.claudeCode.defaultProvider = selectedProvider;
+    await configService.saveProviderConfig(providerConfig);
+  }
 
-      if (!provider?.apiKey) {
-        console.log(chalk.yellow('  API key not configured. Use: sylphx-flow settings'));
-        return;
-      }
+  // Configure environment variables based on selection
+  if (selectedProvider === 'kimi' || selectedProvider === 'zai') {
+    const provider = providerConfig.claudeCode.providers[selectedProvider];
 
-      configureProviderEnv(selectedProvider, provider.apiKey);
-    }
-  } catch (error: unknown) {
-    // Handle user cancellation (Ctrl+C)
-    const err = error as Error & { name?: string };
-    if (err.name === 'ExitPromptError' || err.message?.includes('force closed')) {
-      throw new UserCancelledError('Provider selection cancelled');
+    if (!provider?.apiKey) {
+      log.warn('API key not configured. Use: sylphx-flow settings');
+      return;
     }
-    throw error;
+
+    configureProviderEnv(selectedProvider, provider.apiKey);
   }
 }
 
@@ -221,11 +207,11 @@ export async function executeFlowV2(
 
     if (!installedTargets.includes(selectedTargetId)) {
       const installation = targetInstaller.getInstallationInfo(selectedTargetId);
-      console.log(chalk.yellow(`\n  ${installation?.name} not installed`));
+      log.warn(`${installation?.name} not installed`);
       const installed = await targetInstaller.install(selectedTargetId, true);
 
       if (!installed) {
-        console.log(chalk.red(`  Cannot proceed: installation failed\n`));
+        log.error('Cannot proceed: installation failed');
         process.exit(1);
       }
     }
@@ -313,7 +299,7 @@ export async function executeFlowV2(
   } catch (error) {
     // Handle user cancellation gracefully
     if (error instanceof UserCancelledError) {
-      console.log(chalk.yellow('\n  Cancelled'));
+      log.warn('Cancelled');
       try {
         await executor.cleanup(projectPath);
       } catch {

package/src/commands/settings/checkbox-config.ts

@@ -4,7 +4,7 @@
  */
 
 import chalk from 'chalk';
-import inquirer from 'inquirer';
+import { log, type MultiselectOption, promptMultiselect } from '../../utils/prompts/index.js';
 
 // ============================================================================
 // Types
@@ -47,16 +47,16 @@ export const getEnabledKeys = (config: ConfigMap): string[] =>
   Object.keys(config).filter((key) => config[key]?.enabled);
 
 /**
- * Build checkbox choices from available items
+ * Build multiselect options from available items
  */
-export const buildChoices = <T extends string>(
+export const buildOptions = <T extends string>(
   available: Record<T, string>,
   enabledKeys: string[]
-): Array<{ name: string; value: T; checked: boolean }> =>
+): MultiselectOption<T>[] =>
   Object.entries(available).map(([key, name]) => ({
-    name: name as string,
+    label: name as string,
     value: key as T,
-    checked: enabledKeys.includes(key),
+    hint: enabledKeys.includes(key) ? 'enabled' : undefined,
   }));
 
 /**
@@ -82,11 +82,11 @@ export const printHeader = (icon: string, title: string): void => {
 };
 
 /**
- * Print confirmation message
+ * Print confirmation message using Clack log
  */
 export const printConfirmation = (itemType: string, count: number): void => {
-  console.log(chalk.green(`\n✓ ${itemType} configuration saved`));
-  console.log(chalk.dim(`  Enabled ${itemType.toLowerCase()}: ${count}`));
+  log.success(`${itemType} configuration saved`);
+  log.info(`Enabled ${itemType.toLowerCase()}: ${count}`);
 };
 
 // ============================================================================
@@ -108,15 +108,15 @@ export const handleCheckboxConfig = async <T extends string>(
   // Get current enabled items
   const enabledKeys = getEnabledKeys(current);
 
-  // Show checkbox prompt
-  const { selected } = await inquirer.prompt([
-    {
-      type: 'checkbox',
-      name: 'selected',
-      message,
-      choices: buildChoices(available, enabledKeys),
-    },
-  ]);
+  // Build options for multiselect
+  const multiselectOptions = buildOptions(available, enabledKeys);
+
+  // Show multiselect prompt
+  const selected = await promptMultiselect<T>({
+    message,
+    options: multiselectOptions,
+    initialValues: enabledKeys as T[],
+  });
 
   // Update config
   const updated = updateConfig(available, selected);