create-better-t-stack 3.11.0-bun-compile-opentui.37fc326 → 3.11.0-bun-compile-opentui.9db6a48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-better-t-stack",
-  "version": "3.11.0-bun-compile-opentui.37fc326",
+  "version": "3.11.0-bun-compile-opentui.9db6a48",
   "description": "A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
   "keywords": [
     "better-auth",
@@ -68,7 +68,7 @@
     "prepublishOnly": "echo 'Build binaries separately before publishing'"
   },
   "dependencies": {
-    "@better-t-stack/types": "3.11.0-bun-compile-opentui.37fc326",
+    "@better-t-stack/types": "3.11.0-bun-compile-opentui.9db6a48",
     "@opentui/core": "^0.1.62",
     "@opentui/react": "^0.1.62",
     "commander": "^14.0.2",
@@ -90,11 +90,11 @@
     "typescript": "^5.9.3"
   },
   "optionalDependencies": {
-    "@better-t-stack/cli-darwin-arm64": "3.11.0-bun-compile-opentui.37fc326",
-    "@better-t-stack/cli-darwin-x64": "3.11.0-bun-compile-opentui.37fc326",
-    "@better-t-stack/cli-linux-arm64": "3.11.0-bun-compile-opentui.37fc326",
-    "@better-t-stack/cli-linux-x64": "3.11.0-bun-compile-opentui.37fc326",
-    "@better-t-stack/cli-windows-x64": "3.11.0-bun-compile-opentui.37fc326",
+    "@better-t-stack/cli-darwin-arm64": "3.11.0-bun-compile-opentui.9db6a48",
+    "@better-t-stack/cli-darwin-x64": "3.11.0-bun-compile-opentui.9db6a48",
+    "@better-t-stack/cli-linux-arm64": "3.11.0-bun-compile-opentui.9db6a48",
+    "@better-t-stack/cli-linux-x64": "3.11.0-bun-compile-opentui.9db6a48",
+    "@better-t-stack/cli-windows-x64": "3.11.0-bun-compile-opentui.9db6a48",
     "@opentui/core-darwin-arm64": "0.1.63",
     "@opentui/core-darwin-x64": "0.1.63",
     "@opentui/core-linux-arm64": "0.1.63",

package/src/helpers/addons/addons-setup.ts

@@ -1,5 +1,4 @@
 import path from "node:path";
-import { log } from "@clack/prompts";
 import fs from "fs-extra";
 import pc from "picocolors";
 import type { Frontend, ProjectConfig } from "../../types";
@@ -32,7 +31,7 @@ export async function setupAddons(config: ProjectConfig, isAddCommand = false) {
     });
 
     if (isAddCommand) {
-      log.info(`${pc.yellow("Update your package.json scripts:")}
+      console.log(`ℹ ${pc.yellow("Update your package.json scripts:")}
 
 ${pc.dim("Replace:")} ${pc.yellow('"pnpm -r dev"')} ${pc.dim("→")} ${pc.green('"turbo dev"')}
 ${pc.dim("Replace:")} ${pc.yellow('"pnpm --filter web dev"')} ${pc.dim(

package/src/helpers/addons/oxlint-setup.ts

@@ -1,10 +1,10 @@
 import path from "node:path";
-import { spinner } from "@clack/prompts";
 import { $ } from "bun";
 import fs from "fs-extra";
 import type { PackageManager } from "../../types";
 import { addPackageDependency } from "../../utils/add-package-deps";
 import { getPackageExecutionCommand } from "../../utils/package-runner";
+import { log } from "../../utils/logger";
 
 export async function setupOxlint(projectDir: string, packageManager: PackageManager) {
   await addPackageDependency({
@@ -24,13 +24,13 @@ export async function setupOxlint(projectDir: string, packageManager: PackageMan
     await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
   }
 
-  const s = spinner();
+  log.step("Initializing oxlint and oxfmt...");
 
   const oxlintInitCommand = getPackageExecutionCommand(packageManager, "oxlint@latest --init");
-  s.start("Initializing oxlint and oxfmt...");
   await $`${{ raw: oxlintInitCommand }}`.cwd(projectDir).env({ CI: "true" });
 
   const oxfmtInitCommand = getPackageExecutionCommand(packageManager, "oxfmt@latest --init");
   await $`${{ raw: oxfmtInitCommand }}`.cwd(projectDir).env({ CI: "true" });
-  s.stop("oxlint and oxfmt initialized successfully!");
+
+  log.success("oxlint and oxfmt initialized successfully!");
 }

package/src/helpers/addons/starlight-setup.ts

@@ -1,18 +1,17 @@
 import path from "node:path";
-import { spinner } from "@clack/prompts";
 import consola from "consola";
 import { $ } from "bun";
 import fs from "fs-extra";
 import pc from "picocolors";
 import type { ProjectConfig } from "../../types";
 import { getPackageExecutionCommand } from "../../utils/package-runner";
+import { log } from "../../utils/logger";
 
 export async function setupStarlight(config: ProjectConfig) {
   const { packageManager, projectDir } = config;
-  const s = spinner();
 
   try {
-    s.start("Setting up Starlight docs...");
+    log.step("Setting up Starlight docs...");
 
     const starlightArgs = [
       "docs",
@@ -35,9 +34,9 @@ export async function setupStarlight(config: ProjectConfig) {
 
     await $`${{ raw: starlightInitCommand }}`.cwd(appsDir).env({ CI: "true" });
 
-    s.stop("Starlight docs setup successfully!");
+    log.success("Starlight docs setup successfully!");
   } catch (error) {
-    s.stop(pc.red("Failed to set up Starlight docs"));
+    log.error("Failed to set up Starlight docs");
     if (error instanceof Error) {
       consola.error(pc.red(error.message));
     }

package/src/helpers/addons/tauri-setup.ts

@@ -1,5 +1,4 @@
 import path from "node:path";
-import { spinner } from "@clack/prompts";
 import { consola } from "consola";
 import { $ } from "bun";
 import fs from "fs-extra";
@@ -7,10 +6,10 @@ import pc from "picocolors";
 import type { ProjectConfig } from "../../types";
 import { addPackageDependency } from "../../utils/add-package-deps";
 import { getPackageExecutionCommand } from "../../utils/package-runner";
+import { log } from "../../utils/logger";
 
 export async function setupTauri(config: ProjectConfig) {
   const { packageManager, frontend, projectDir } = config;
-  const s = spinner();
   const clientPackageDir = path.join(projectDir, "apps/web");
 
   if (!(await fs.pathExists(clientPackageDir))) {
@@ -18,7 +17,7 @@ export async function setupTauri(config: ProjectConfig) {
   }
 
   try {
-    s.start("Setting up Tauri desktop app support...");
+    log.step("Setting up Tauri desktop app support...");
 
     await addPackageDependency({
       devDependencies: ["@tauri-apps/cli"],
@@ -80,9 +79,9 @@ export async function setupTauri(config: ProjectConfig) {
 
     await $`${{ raw: tauriInitCommand }}`.cwd(clientPackageDir).env({ CI: "true" });
 
-    s.stop("Tauri desktop app support configured successfully!");
+    log.success("Tauri desktop app support configured successfully!");
   } catch (error) {
-    s.stop(pc.red("Failed to set up Tauri"));
+    log.error("Failed to set up Tauri");
     if (error instanceof Error) {
       consola.error(pc.red(error.message));
     }

package/src/helpers/core/add-addons.ts

@@ -1,5 +1,4 @@
 import path from "node:path";
-import { log } from "@clack/prompts";
 import pc from "picocolors";
 import type { AddInput, Addons, ProjectConfig } from "../../types";
 import { updateBtsConfig } from "../../utils/bts-config";
@@ -74,8 +73,8 @@ export async function addAddonsToProject(
         packageManager: config.packageManager,
       });
     } else if (!input.suppressInstallMessage) {
-      log.info(
-        pc.yellow(`Run ${pc.bold(`${config.packageManager} install`)} to install dependencies`),
+      console.log(
+        pc.yellow(`ℹ Run ${pc.bold(`${config.packageManager} install`)} to install dependencies`),
       );
     }
   } catch (error) {

package/src/helpers/core/add-deployment.ts

@@ -1,5 +1,4 @@
 import path from "node:path";
-import { log } from "@clack/prompts";
 import pc from "picocolors";
 import type { AddInput, ProjectConfig, ServerDeploy, WebDeploy } from "../../types";
 import { updateBtsConfig } from "../../utils/bts-config";
@@ -67,13 +66,13 @@ export async function addDeploymentToProject(
     };
 
     if (input.webDeploy && input.webDeploy !== "none") {
-      log.info(
-        pc.green(`Adding ${input.webDeploy} web deployment to ${config.frontend.join("/")}`),
+      console.log(
+        pc.green(`ℹ Adding ${input.webDeploy} web deployment to ${config.frontend.join("/")}`),
       );
     }
 
     if (input.serverDeploy && input.serverDeploy !== "none") {
-      log.info(pc.green(`Adding ${input.serverDeploy} server deployment`));
+      console.log(pc.green(`ℹ Adding ${input.serverDeploy} server deployment`));
     }
 
     await setupDeploymentTemplates(projectDir, config);
@@ -91,8 +90,8 @@ export async function addDeploymentToProject(
         packageManager: config.packageManager,
       });
     } else if (!input.suppressInstallMessage) {
-      log.info(
-        pc.yellow(`Run ${pc.bold(`${config.packageManager} install`)} to install dependencies`),
+      console.log(
+        pc.yellow(`ℹ Run ${pc.bold(`${config.packageManager} install`)} to install dependencies`),
       );
     }
   } catch (error) {

package/src/helpers/core/create-project.ts

@@ -1,6 +1,6 @@
-import { log } from "@clack/prompts";
 import fs from "fs-extra";
 import type { ProjectConfig } from "../../types";
+import { log } from "../../utils/logger";
 import { writeBtsConfig } from "../../utils/bts-config";
 import { exitWithError } from "../../utils/errors";
 import { setupCatalogs } from "../../utils/setup-catalogs";

package/src/helpers/core/git.ts

@@ -1,4 +1,3 @@
-import { log } from "@clack/prompts";
 import { $ } from "bun";
 import pc from "picocolors";
 
@@ -8,7 +7,7 @@ export async function initializeGit(projectDir: string, useGit: boolean) {
   const gitVersionResult = await $`git --version`.cwd(projectDir).nothrow().quiet();
 
   if (gitVersionResult.exitCode !== 0) {
-    log.warn(pc.yellow("Git is not installed"));
+    console.warn(pc.yellow("⚠ Git is not installed"));
     return;
   }
 

package/src/helpers/core/install-dependencies.ts

@@ -1,8 +1,8 @@
-import { spinner } from "@clack/prompts";
 import consola from "consola";
 import { $ } from "bun";
 import pc from "picocolors";
 import type { Addons, PackageManager } from "../../types";
+import { log } from "../../utils/logger";
 
 export async function installDependencies({
   projectDir,
@@ -12,16 +12,14 @@ export async function installDependencies({
   packageManager: PackageManager;
   addons?: Addons[];
 }) {
-  const s = spinner();
-
   try {
-    s.start(`Running ${packageManager} install...`);
+    log.step(`Running ${packageManager} install...`);
 
     await $`${packageManager} install`.cwd(projectDir);
 
-    s.stop("Dependencies installed successfully");
+    log.success("Dependencies installed successfully");
   } catch (error) {
-    s.stop(pc.red("Failed to install dependencies"));
+    log.error("Failed to install dependencies");
     if (error instanceof Error) {
       consola.error(pc.red(`Installation error: ${error.message}`));
     }

package/src/helpers/core/project-config.ts

@@ -1,5 +1,4 @@
 import path from "node:path";
-import { log } from "@clack/prompts";
 import { $ } from "bun";
 import fs from "fs-extra";
 import type { ProjectConfig } from "../../types";
@@ -96,7 +95,7 @@ async function updateRootPackageJson(projectDir: string, options: ProjectConfig)
     const stdout = await $`${packageManager} -v`.cwd(projectDir).text();
     packageJson.packageManager = `${packageManager}@${stdout.trim()}`;
   } catch {
-    log.warn(`Could not determine ${packageManager} version.`);
+    console.warn(`⚠ Could not determine ${packageManager} version.`);
   }
 
   if (backend === "convex") {

package/src/tui/app.tsx

@@ -5,6 +5,8 @@
 import { createCliRenderer } from "@opentui/core";
 import { createRoot, useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { useState, useCallback, useEffect } from "react";
+import { useLogger } from "./use-logger";
+import type { LogEntry } from "../utils/logger";
 import type {
   ProjectConfig,
   Frontend,
@@ -558,6 +560,40 @@ function Spinner(props: { text: string }) {
   );
 }
 
+// LogDisplay component - shows real-time logs during project creation
+function LogDisplay() {
+  const logs = useLogger();
+
+  const getLogIcon = (level: LogEntry["level"]) => {
+    switch (level) {
+      case "success":
+        return { icon: "✓", color: theme.success };
+      case "error":
+        return { icon: "✗", color: theme.error };
+      case "warn":
+        return { icon: "⚠", color: "#f59e0b" };
+      case "step":
+        return { icon: "→", color: theme.primary };
+      default:
+        return { icon: "ℹ", color: theme.muted };
+    }
+  };
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {logs.slice(-15).map((log) => {
+        const { icon, color } = getLogIcon(log.level);
+        return (
+          <text key={log.id}>
+            <span fg={color}>{icon}</span>
+            <span fg={theme.text}> {log.message}</span>
+          </text>
+        );
+      })}
+    </box>
+  );
+}
+
 type Phase = "prompts" | "creating" | "done";
 
 function App(props: {
@@ -788,17 +824,20 @@ function App(props: {
           </>
         )}
 
-        {/* Creating Phase - Show spinner */}
+        {/* Creating Phase - Show spinner and logs */}
         {phase === "creating" && (
-          <box style={{ flexDirection: "column", marginTop: 2 }}>
+          <box style={{ flexDirection: "column", marginTop: 2, flexGrow: 1 }}>
             <Spinner text={creationStatus} />
-            <box style={{ marginTop: 2 }}>
+            <box style={{ marginTop: 1 }}>
               <text>
                 <span fg={theme.muted}>Creating </span>
                 <span fg={theme.primary}>{config.projectName}</span>
                 <span fg={theme.muted}>...</span>
               </text>
             </box>
+            <box style={{ marginTop: 2, flexGrow: 1, overflow: "scroll" }}>
+              <LogDisplay />
+            </box>
           </box>
         )}
 

package/src/tui/use-logger.ts

@@ -0,0 +1,44 @@
+/**
+ * React hook for subscribing to the global logger
+ * Updates component state when new logs are emitted
+ */
+import { useState, useEffect } from "react";
+import { logger, type LogEntry } from "../utils/logger";
+
+export function useLogger() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+
+  useEffect(() => {
+    // Get existing logs
+    setLogs(logger.getLogs());
+
+    // Subscribe to new logs
+    const unsubscribe = logger.subscribe((entry) => {
+      setLogs((prev) => [...prev, entry]);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return logs;
+}
+
+// Hook to get only the latest log entry
+export function useLatestLog() {
+  const [latestLog, setLatestLog] = useState<LogEntry | null>(null);
+
+  useEffect(() => {
+    const existing = logger.getLogs();
+    if (existing.length > 0) {
+      setLatestLog(existing[existing.length - 1]);
+    }
+
+    const unsubscribe = logger.subscribe((entry) => {
+      setLatestLog(entry);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return latestLog;
+}

package/src/utils/logger.ts

@@ -0,0 +1,80 @@
+/**
+ * TUI-integrated logging system
+ * Provides a global logger that emits events for the TUI to display in real-time
+ */
+
+export type LogLevel = "info" | "success" | "warn" | "error" | "step";
+
+export interface LogEntry {
+  id: number;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+}
+
+type LogListener = (entry: LogEntry) => void;
+
+class Logger {
+  private listeners: Set<LogListener> = new Set();
+  private logs: LogEntry[] = [];
+  private idCounter = 0;
+
+  subscribe(listener: LogListener): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private emit(level: LogLevel, message: string) {
+    const entry: LogEntry = {
+      id: this.idCounter++,
+      level,
+      message,
+      timestamp: new Date(),
+    };
+    this.logs.push(entry);
+    for (const listener of this.listeners) {
+      listener(entry);
+    }
+  }
+
+  info(message: string) {
+    this.emit("info", message);
+  }
+
+  success(message: string) {
+    this.emit("success", message);
+  }
+
+  warn(message: string) {
+    this.emit("warn", message);
+  }
+
+  error(message: string) {
+    this.emit("error", message);
+  }
+
+  step(message: string) {
+    this.emit("step", message);
+  }
+
+  getLogs(): LogEntry[] {
+    return [...this.logs];
+  }
+
+  clear() {
+    this.logs = [];
+    this.idCounter = 0;
+  }
+}
+
+// Global logger instance
+export const logger = new Logger();
+
+// Convenience exports for easy importing
+export const log = {
+  info: (msg: string) => logger.info(msg),
+  success: (msg: string) => logger.success(msg),
+  warn: (msg: string) => logger.warn(msg),
+  error: (msg: string) => logger.error(msg),
+  step: (msg: string) => logger.step(msg),
+};

package/src/utils/open-url.ts

@@ -1,4 +1,3 @@
-import { log } from "@clack/prompts";
 import { $ } from "bun";
 
 export async function openUrl(url: string) {
@@ -13,6 +12,6 @@ export async function openUrl(url: string) {
       await $`xdg-open ${url}`.quiet();
     }
   } catch {
-    log.message(`Please open ${url} in your browser.`);
+    console.log(`Please open ${url} in your browser.`);
   }
 }

package/src/prompts/addons.ts

@@ -1,200 +0,0 @@
-import { groupMultiselect, isCancel } from "@clack/prompts";
-import { DEFAULT_CONFIG } from "../constants";
-import { type Addons, AddonsSchema, type Auth, type Frontend } from "../types";
-import { getCompatibleAddons, validateAddonCompatibility } from "../utils/compatibility-rules";
-import { exitCancelled } from "../utils/errors";
-
-type AddonOption = {
-  value: Addons;
-  label: string;
-  hint: string;
-};
-
-function getAddonDisplay(addon: Addons): { label: string; hint: string } {
-  let label: string;
-  let hint: string;
-
-  switch (addon) {
-    case "turborepo":
-      label = "Turborepo";
-      hint = "High-performance build system";
-      break;
-    case "pwa":
-      label = "PWA";
-      hint = "Make your app installable and work offline";
-      break;
-    case "tauri":
-      label = "Tauri";
-      hint = "Build native desktop apps from your web frontend";
-      break;
-    case "biome":
-      label = "Biome";
-      hint = "Format, lint, and more";
-      break;
-    case "oxlint":
-      label = "Oxlint";
-      hint = "Oxlint + Oxfmt (linting & formatting)";
-      break;
-    case "ultracite":
-      label = "Ultracite";
-      hint = "Zero-config Biome preset with AI integration";
-      break;
-    case "ruler":
-      label = "Ruler";
-      hint = "Centralize your AI rules";
-      break;
-    case "husky":
-      label = "Husky";
-      hint = "Modern native Git hooks made easy";
-      break;
-    case "starlight":
-      label = "Starlight";
-      hint = "Build stellar docs with astro";
-      break;
-    case "fumadocs":
-      label = "Fumadocs";
-      hint = "Build excellent documentation site";
-      break;
-    case "opentui":
-      label = "OpenTUI";
-      hint = "Build terminal user interfaces";
-      break;
-    case "wxt":
-      label = "WXT";
-      hint = "Build browser extensions";
-      break;
-    default:
-      label = addon;
-      hint = `Add ${addon}`;
-  }
-
-  return { label, hint };
-}
-
-const ADDON_GROUPS = {
-  Documentation: ["starlight", "fumadocs"],
-  Linting: ["biome", "oxlint", "ultracite"],
-  Other: ["ruler", "pwa", "tauri", "husky", "opentui", "wxt", "turborepo"],
-};
-
-export async function getAddonsChoice(addons?: Addons[], frontends?: Frontend[], auth?: Auth) {
-  if (addons !== undefined) return addons;
-
-  const allAddons = AddonsSchema.options.filter((addon) => addon !== "none");
-  const groupedOptions: Record<string, AddonOption[]> = {
-    Documentation: [],
-    Linting: [],
-    Other: [],
-  };
-
-  const frontendsArray = frontends || [];
-
-  for (const addon of allAddons) {
-    const { isCompatible } = validateAddonCompatibility(addon, frontendsArray, auth);
-    if (!isCompatible) continue;
-
-    const { label, hint } = getAddonDisplay(addon);
-    const option = { value: addon, label, hint };
-
-    if (ADDON_GROUPS.Documentation.includes(addon)) {
-      groupedOptions.Documentation.push(option);
-    } else if (ADDON_GROUPS.Linting.includes(addon)) {
-      groupedOptions.Linting.push(option);
-    } else if (ADDON_GROUPS.Other.includes(addon)) {
-      groupedOptions.Other.push(option);
-    }
-  }
-
-  Object.keys(groupedOptions).forEach((group) => {
-    if (groupedOptions[group].length === 0) {
-      delete groupedOptions[group];
-    } else {
-      const groupOrder = ADDON_GROUPS[group as keyof typeof ADDON_GROUPS] || [];
-      groupedOptions[group].sort((a, b) => {
-        const indexA = groupOrder.indexOf(a.value);
-        const indexB = groupOrder.indexOf(b.value);
-        return indexA - indexB;
-      });
-    }
-  });
-
-  const initialValues = DEFAULT_CONFIG.addons.filter((addonValue) =>
-    Object.values(groupedOptions).some((options) =>
-      options.some((opt) => opt.value === addonValue),
-    ),
-  );
-
-  const response = await groupMultiselect<Addons>({
-    message: "Select addons",
-    options: groupedOptions,
-    initialValues: initialValues,
-    required: false,
-    selectableGroups: false,
-  });
-
-  if (isCancel(response)) return exitCancelled("Operation cancelled");
-
-  return response;
-}
-
-export async function getAddonsToAdd(
-  frontend: Frontend[],
-  existingAddons: Addons[] = [],
-  auth?: Auth,
-) {
-  const groupedOptions: Record<string, AddonOption[]> = {
-    Documentation: [],
-    Linting: [],
-    Other: [],
-  };
-
-  const frontendArray = frontend || [];
-
-  const compatibleAddons = getCompatibleAddons(
-    AddonsSchema.options.filter((addon) => addon !== "none"),
-    frontendArray,
-    existingAddons,
-    auth,
-  );
-
-  for (const addon of compatibleAddons) {
-    const { label, hint } = getAddonDisplay(addon);
-    const option = { value: addon, label, hint };
-
-    if (ADDON_GROUPS.Documentation.includes(addon)) {
-      groupedOptions.Documentation.push(option);
-    } else if (ADDON_GROUPS.Linting.includes(addon)) {
-      groupedOptions.Linting.push(option);
-    } else if (ADDON_GROUPS.Other.includes(addon)) {
-      groupedOptions.Other.push(option);
-    }
-  }
-
-  Object.keys(groupedOptions).forEach((group) => {
-    if (groupedOptions[group].length === 0) {
-      delete groupedOptions[group];
-    } else {
-      const groupOrder = ADDON_GROUPS[group as keyof typeof ADDON_GROUPS] || [];
-      groupedOptions[group].sort((a, b) => {
-        const indexA = groupOrder.indexOf(a.value);
-        const indexB = groupOrder.indexOf(b.value);
-        return indexA - indexB;
-      });
-    }
-  });
-
-  if (Object.keys(groupedOptions).length === 0) {
-    return [];
-  }
-
-  const response = await groupMultiselect<Addons>({
-    message: "Select addons to add",
-    options: groupedOptions,
-    required: false,
-    selectableGroups: false,
-  });
-
-  if (isCancel(response)) return exitCancelled("Operation cancelled");
-
-  return response;
-}