@sns-myagent/cli 0.2.0 → 0.3.0

package/src/tui/command-palette.ts

@@ -0,0 +1,189 @@
+/**
+ * Command palette component for SNS-MyAgent terminal UI.
+ *
+ * Fuzzy-searchable command overlay with gradient styling.
+ * Triggered by Ctrl+P or typing "/" in the input.
+ */
+import chalk from "chalk";
+import gradient from "gradient-string";
+import { BRAND_GRADIENT, ACCENT_GRADIENT } from "../ui/colors.js";
+
+export interface PaletteCommand {
+  /** Command name (e.g., "/help"). */
+  name: string;
+  /** Short description. */
+  description: string;
+  /** Category for grouping. */
+  category: string;
+  /** Keyboard shortcut (optional). */
+  shortcut?: string;
+  /** Whether command is enabled. */
+  enabled?: boolean;
+}
+
+export interface CommandPaletteOptions {
+  /** Available commands. */
+  commands: PaletteCommand[];
+  /** Search query filter. */
+  query?: string;
+  /** Currently highlighted index. */
+  highlighted?: number;
+  /** Width of the palette. */
+  width?: number;
+}
+
+// ── Pre-built command lists ──
+
+export const CHAT_COMMANDS: PaletteCommand[] = [
+  { name: "/help", description: "Show available commands", category: "General", shortcut: "?" },
+  { name: "/clear", description: "Clear screen", category: "General", shortcut: "⌘K" },
+  { name: "/exit", description: "Quit the chat", category: "General", shortcut: "⌘Q" },
+  { name: "/model", description: "Show/switch model", category: "Config" },
+  { name: "/history", description: "Show conversation history", category: "General" },
+  { name: "/memory", description: "Recall from memory", category: "Memory" },
+  { name: "/skills", description: "List available skills", category: "Extensibility" },
+  { name: "/plugins", description: "List installed plugins", category: "Extensibility" },
+  { name: "/mcp", description: "MCP server management", category: "Extensibility" },
+  { name: "/theme", description: "Change terminal theme", category: "Config" },
+  { name: "/bench", description: "Run benchmarks", category: "Debug" },
+  { name: "/debug", description: "Debug info", category: "Debug" },
+];
+
+// ── Fuzzy match ──
+
+function fuzzyMatch(query: string, text: string): number {
+  if (!query) return 1;
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+
+  // Exact prefix match — highest score
+  if (t.startsWith(q)) return 1;
+
+  // Subsequence match
+  let qi = 0;
+  let score = 0;
+  let consecutive = 0;
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) {
+      qi++;
+      consecutive++;
+      score += consecutive; // bonus for consecutive chars
+    } else {
+      consecutive = 0;
+    }
+  }
+
+  return qi === q.length ? score / (q.length * q.length) : 0;
+}
+
+// ── Renderer ──
+
+/**
+ * Render the command palette as a bordered overlay.
+ */
+export function renderCommandPalette(opts: CommandPaletteOptions): string {
+  const cols = process.stdout.columns ?? 80;
+  const width = Math.min(opts.width ?? cols - 4, 64);
+  const grad = gradient(BRAND_GRADIENT);
+  const accentGrad = gradient(ACCENT_GRADIENT);
+
+  // Filter and score commands
+  const query = opts.query ?? "";
+  const scored = opts.commands
+    .map(cmd => ({
+      cmd,
+      score: fuzzyMatch(query, cmd.name) + fuzzyMatch(query, cmd.description) * 0.5,
+    }))
+    .filter(s => s.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 12);
+
+  const highlighted = opts.highlighted ?? 0;
+
+  // Group by category
+  const groups = new Map<string, typeof scored>();
+  for (const item of scored) {
+    const cat = item.cmd.category;
+    if (!groups.has(cat)) groups.set(cat, []);
+    groups.get(cat)!.push(item);
+  }
+
+  const lines: string[] = [];
+  const inner = width - 4;
+
+  // ── Header ──
+  const searchIcon = "🔍";
+  const headerText = `${searchIcon} ${accentGrad("Command Palette")}`;
+  const fill = "─".repeat(Math.max(0, inner - 22));
+  lines.push(grad("╭─") + headerText + grad(fill + "─╮"));
+
+  // ── Search bar ──
+  const searchDisplay = query ? chalk.white(query) + chalk.dim("█") : chalk.dim("Type to search...");
+  const searchFill = " ".repeat(Math.max(0, inner - searchDisplay.length + 8));
+  lines.push(grad("│") + `  ${searchDisplay}${searchFill}` + grad("│"));
+
+  // ── Separator ──
+  lines.push(grad("├") + "─".repeat(inner) + grad("┤"));
+
+  // ── Commands ──
+  let globalIdx = 0;
+  for (const [category, items] of groups) {
+    // Category header
+    const catText = chalk.dim(` ${category.toUpperCase()} `);
+    const catFill = " ".repeat(Math.max(0, inner - category.length - 2));
+    lines.push(grad("│") + catText + catFill + grad("│"));
+
+    for (const { cmd } of items) {
+      const isSelected = globalIdx === highlighted;
+      const nameStr = isSelected
+        ? chalk.bgCyan.black(` ${cmd.name} `)
+        : chalk.cyan(cmd.name);
+      const descStr = chalk.dim(cmd.description);
+      const shortcutStr = cmd.shortcut ? chalk.dim(` [${cmd.shortcut}]`) : "";
+
+      const line = `  ${nameStr}  ${descStr}${shortcutStr}`;
+      const padding = " ".repeat(Math.max(0, inner - visibleLen(line) + 4));
+
+      if (isSelected) {
+        lines.push(grad("│") + chalk.bgHex("#1a1a2e")(line) + padding + grad("│"));
+      } else {
+        lines.push(grad("│") + line + padding + grad("│"));
+      }
+
+      globalIdx++;
+    }
+  }
+
+  // ── Footer ──
+  const footer = chalk.dim(" ↑↓ navigate  ⏎ select  esc close ");
+  const footerFill = " ".repeat(Math.max(0, inner - footer.length + 4));
+  lines.push(grad("├") + "─".repeat(inner) + grad("┤"));
+  lines.push(grad("│") + footer + footerFill + grad("│"));
+  lines.push(grad("╰") + "─".repeat(inner) + grad("╯"));
+
+  return lines.join("\n");
+}
+
+/**
+ * Get filtered commands for a query.
+ */
+export function filterCommands(
+  commands: PaletteCommand[],
+  query: string,
+): PaletteCommand[] {
+  return commands
+    .map(cmd => ({
+      cmd,
+      score: fuzzyMatch(query, cmd.name) + fuzzyMatch(query, cmd.description) * 0.5,
+    }))
+    .filter(s => s.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .map(s => s.cmd);
+}
+
+// ── Helpers ──
+
+function visibleLen(str: string): number {
+  // Strip ANSI escape sequences for length calculation
+  return str.replace(/\x1b\[[0-9;]*m/g, "").length;
+}

package/src/tui/index.ts

@@ -11,3 +11,7 @@ export * from "./tree-list";
 export * from "./types";
 export * from "./utils";
 export * from "./width-aware-text";
+export * from "./splash";
+export * from "./chat-blocks";
+export * from "./chat-ui";
+export { renderCommandPalette, filterCommands, CHAT_COMMANDS, type PaletteCommand, type CommandPaletteOptions } from "./command-palette";

package/src/tui/splash.ts

@@ -0,0 +1,130 @@
+/**
+ * SNS-MyAgent splash screen — branded gradient banner + system info blocks.
+ * Premium terminal UI with gradient logo, rounded box, and info panel.
+ */
+import chalk from "chalk";
+import gradient from "gradient-string";
+import boxen from "boxen";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const BANNER_ART = `
+███╗   ██╗███████╗██╗  ██╗██╗   ██╗███████╗
+████╗  ██║██╔════╝╚██╗██╔╝██║   ██║██╔════╝
+██╔██╗ ██║█████╗   ╚███╔╝ ██║   ██║███████╗
+██║╚██╗██║██╔══╝   ██╔██╗ ██║   ██║╚════██║
+██║ ╚████║███████╗██╔╝ ╚██╗╚██████╔╝███████║
+╚═╝  ╚═══╝╚══════╝╚═╝   ╚═╝ ╚═════╝ ╚══════╝`;
+
+const SUBTITLE = "My-Agent • SnsCoder CLI";
+
+const SNY_GRADIENT = ["#00d2ff", "#7b2ff7", "#ff6b9d"];
+const ACCENT_GRADIENT = ["#7b2ff7", "#00d2ff"];
+
+function readVersion(): string {
+  try {
+    // Strategy 1: import.meta.url relative path (works in most bundler/ts-node setups)
+    const here = dirname(fileURLToPath(import.meta.url));
+    const candidates = [
+      resolve(here, "..", "..", "package.json"),       // src/tui/ → root
+      resolve(here, "..", "package.json"),              // dist/tui/ → dist/ (fallback)
+      resolve(here, "..", "..", "dist", "package.json"), // flat dist
+    ];
+
+    for (const pkgPath of candidates) {
+      try {
+        const raw = readFileSync(pkgPath, "utf8");
+        const pkg = JSON.parse(raw) as { version?: string };
+        if (pkg.version && pkg.version !== "0.0.0") return pkg.version;
+      } catch { /* try next */ }
+    }
+
+    // Strategy 2: Walk up from CWD looking for package.json with matching name
+    let dir = process.cwd();
+    for (let i = 0; i < 5; i++) {
+      try {
+        const raw = readFileSync(resolve(dir, "package.json"), "utf8");
+        const pkg = JSON.parse(raw) as { name?: string; version?: string };
+        if (pkg.name === "@sns-myagent/cli" && pkg.version) return pkg.version;
+      } catch { /* continue */ }
+      const parent = dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
+
+    return "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+
+export interface SplashInfo {
+  model?: string;
+  provider?: string;
+  cwd?: string;
+  platform?: string;
+  nodeVersion?: string;
+}
+
+function makeInfoBlocks(info: SplashInfo, width: number): string {
+  const inner = Math.min(width - 4, 56);
+  const sep = chalk.dim("─".repeat(inner));
+
+  const rows: string[] = [];
+  const kv = (k: string, v: string) =>
+    `  ${chalk.dim(k.padEnd(12))}${chalk.white(v)}`;
+
+  rows.push(sep);
+  if (info.model) rows.push(kv("Model", `${info.provider ?? "unknown"}/${info.model}`));
+  if (info.cwd) rows.push(kv("Working Dir", info.cwd));
+  if (info.platform) rows.push(kv("Platform", info.platform));
+  rows.push(kv("Version", readVersion()));
+  rows.push(sep);
+
+  const hint = chalk.dim("  Type your message to start chatting.");
+  const exit = chalk.dim("  /exit or Ctrl+C to quit.");
+  rows.push(hint);
+  rows.push(exit);
+
+  return rows.join("\n");
+}
+
+export function renderSplash(info: SplashInfo = {}): string {
+  const cols = process.stdout.columns ?? 80;
+  const bannerWidth = Math.min(cols - 2, 64);
+
+  // Gradient banner
+  const bannerLines = BANNER_ART.split("\n").filter(l => l.trim().length > 0);
+  const coloredBanner = bannerLines
+    .map(l => gradient(SNY_GRADIENT).multiline(l))
+    .join("\n");
+
+  // Subtitle
+  const subtitle = gradient(ACCENT_GRADIENT)(SUBTITLE);
+
+  // Info block
+  const infoBlock = makeInfoBlocks(info, bannerWidth);
+
+  // Wrap in boxen
+  const content = `${coloredBanner}\n${subtitle}\n${infoBlock}`;
+
+  const box = boxen(content, {
+    padding: { top: 1, bottom: 1, left: 2, right: 2 },
+    margin: { top: 0, bottom: 0, left: 1, right: 1 },
+    borderStyle: "round",
+    borderColor: "cyan",
+    width: bannerWidth,
+    textAlignment: "center",
+  });
+
+  return box;
+}
+
+export function renderInlineHeader(info: SplashInfo = {}): string {
+  const model = info.model
+    ? chalk.cyan(`${info.provider ?? "?"}/${info.model}`)
+    : chalk.dim("no model");
+  const ver = chalk.dim(`v${readVersion()}`);
+  return `\n  ${gradient(SNY_GRADIENT)("SnsCoder")} ${ver}  ${chalk.dim("│")}  ${model}\n`;
+}

package/src/ui/banner.ts

@@ -1,41 +1,81 @@
 /**
- * ASCII art banner for SNS-MyAgent.
+ * Premium ASCII art banner for SNS-MyAgent.
  *
- * Renders the snscoder logo + runtime info on `snscoder chat`.
+ * Renders the branded logo + runtime info using chalk, gradient-string, and boxen.
+ * Called at the start of `snscoder launch`.
  */
 
+import chalk from "chalk";
+import gradient from "gradient-string";
+import boxen from "boxen";
 import type { FullConfig } from "#src/config/index.js";
-import { accent, bold, muted, primary, success, warning } from "./colors.js";
 import { loadSnsConfig } from "#src/config/sns-config.js";
+import { BRAND_GRADIENT, ACCENT_GRADIENT } from "./colors.js";
 
-const LOGO = [
-	`  ___            _      ___                _`,
-	` / __| ___  __ _| |__  / __|___  ___  __ _| |___`,
-	` \\__ \\/ _ \\/ _\` | '_ \\| |  / __|/ _ \\/ _\` | / __|`,
-	` |___/\\___/\\__,_|_.__/|_|  \\___|\\___/\\__,_|_\\___|`,
-].join("\n");
+const LOGO = `
+███╗   ██╗███████╗██╗  ██╗██╗   ██╗███████╗
+████╗  ██║██╔════╝╚██╗██╔╝██║   ██║██╔════╝
+██╔██╗ ██║█████╗   ╚███╔╝ ██║   ██║███████╗
+██║╚██╗██║██╔══╝   ██╔██╗ ██║   ██║╚════██║
+██║ ╚████║███████╗██╔╝ ╚██╗╚██████╔╝███████║
+╚═╝  ╚═══╝╚══════╝╚═╝   ╚═╝ ╚═════╝ ╚══════╝`;
+
+const SUBTITLE = "My-Agent • SnsCoder CLI";
 
 /**
- * Show the banner with config info.
- * Called at the start of `snscoder chat`.
+ * Show the premium banner with gradient logo + config info.
+ * Called at the start of `snscoder launch`.
  */
 export function showBanner(config: FullConfig): void {
-	const line = muted("─".repeat(52));
-
-	console.log();
-	console.log(accent(LOGO));
-	console.log(line);
-
-	const version = bold(`v${config.version}`);
-	const provider = primary(config.provider);
-	const model = primary(config.model);
-	const hasKey = Boolean(loadSnsConfig().apiKey);
-	const memStatus = hasKey ? success("✓ API key set") : warning("⚠ no API key (BYOK)");
-
-	console.log(`  ${muted("version")}  ${version}`);
-	console.log(`  ${muted("provider")} ${provider}`);
-	console.log(`  ${muted("model")}    ${model}`);
-	console.log(`  ${muted("memory")}   ${memStatus}`);
-	console.log(line);
-	console.log();
+  const cols = process.stdout.columns ?? 80;
+  const width = Math.min(cols - 2, 64);
+
+  // Gradient logo
+  const bannerLines = LOGO.split("\n").filter(l => l.trim().length > 0);
+  const coloredLogo = bannerLines
+    .map(l => gradient(BRAND_GRADIENT).multiline(l))
+    .join("\n");
+
+  // Subtitle
+  const subtitle = gradient(ACCENT_GRADIENT)(SUBTITLE);
+
+  // Info block
+  const version = chalk.bold(`v${config.version}`);
+  const provider = chalk.cyan(config.provider);
+  const model = chalk.cyan(config.model);
+  const hasKey = Boolean(loadSnsConfig().apiKey);
+  const memStatus = hasKey
+    ? chalk.green("✓ API key set")
+    : chalk.yellow("⚠ no API key (BYOK)");
+
+  const inner = Math.min(width - 4, 56);
+  const sep = chalk.dim("─".repeat(inner));
+  const kv = (k: string, v: string) =>
+    `  ${chalk.dim(k.padEnd(12))}${chalk.white(v)}`;
+
+  const info = [
+    sep,
+    kv("Version", version),
+    kv("Provider", provider),
+    kv("Model", model),
+    kv("Memory", memStatus),
+    sep,
+    chalk.dim("  Type your message to start chatting."),
+    chalk.dim("  /exit or Ctrl+C to quit."),
+  ].join("\n");
+
+  // Wrap in boxen
+  const content = `${coloredLogo}\n${subtitle}\n${info}`;
+
+  const box = boxen(content, {
+    padding: { top: 1, bottom: 1, left: 2, right: 2 },
+    margin: { top: 1, bottom: 0, left: 0, right: 0 },
+    borderStyle: "round",
+    borderColor: "cyan",
+    width,
+    textAlignment: "center",
+  });
+
+  console.log(box);
+  console.log();
 }

package/src/ui/colors.ts

@@ -2,10 +2,13 @@
  * Brand color palette for SNS-MyAgent terminal UI.
  *
  * Uses picocolors for zero-dependency color output.
+ * Brand gradient: #00d2ff → #7b2ff7 → #ff6b9d
  */
 
 import pc from "picocolors";
 
+// ── Brand identity colors ──
+
 /** Primary brand color — used for headers and highlights. */
 export const primary = pc.cyan;
 
@@ -35,3 +38,24 @@ export const muted = pc.dim;
 
 /** Bold alias for emphasis. */
 export const bold = pc.bold;
+
+// ── Brand gradient constants (for gradient-string) ──
+
+/** Full brand gradient: cyan → purple → pink. */
+export const BRAND_GRADIENT = ["#00d2ff", "#7b2ff7", "#ff6b9d"];
+
+/** Accent gradient: purple → cyan. */
+export const ACCENT_GRADIENT = ["#7b2ff7", "#00d2ff"];
+
+/** Subtle gradient: cyan → purple. */
+export const SUBTLE_GRADIENT = ["#00d2ff", "#7b2ff7"];
+
+// ── Role-specific border colors (hex for gradient-string) ──
+
+export const ROLE_HEX = {
+  user: "#00d2ff",
+  assistant: "#7b2ff7",
+  tool: "#ffd700",
+  system: "#666666",
+  error: "#ff4444",
+} as const;

package/src/ui/error-display.ts

@@ -0,0 +1,130 @@
+/**
+ * Premium error display component for SNS-MyAgent terminal UI.
+ *
+ * Renders errors in styled bordered blocks with gradient accents.
+ * Supports error hierarchy: main error + optional cause chain.
+ */
+import chalk from "chalk";
+import gradient from "gradient-string";
+import boxen from "boxen";
+import { BRAND_GRADIENT, ROLE_HEX } from "./colors.js";
+
+const ERROR_GRADIENT = [ROLE_HEX.error, "#cc0000"] as const;
+const WARN_GRADIENT = ["#ffd700", "#ff8c00"] as const;
+
+export type ErrorSeverity = "error" | "warning" | "info";
+
+export interface ErrorDisplayOptions {
+  /** Error title / short description. */
+  title: string;
+  /** Detailed error message. */
+  message: string;
+  /** Error code (e.g., "E001", "HTTP_404"). */
+  code?: string;
+  /** Severity level. */
+  severity?: ErrorSeverity;
+  /** Stack trace (shown collapsed). */
+  stack?: string;
+  /** Suggestion for fixing the error. */
+  suggestion?: string;
+  /** Additional context lines. */
+  context?: string[];
+}
+
+function getSeverityColors(severity: ErrorSeverity) {
+  switch (severity) {
+    case "error":
+      return { border: "red" as const, gradient: [...ERROR_GRADIENT], icon: "✗", label: "ERROR" };
+    case "warning":
+      return { border: "yellow" as const, gradient: [...WARN_GRADIENT], icon: "⚠", label: "WARNING" };
+    case "info":
+      return { border: "cyan" as const, gradient: ["#00d2ff", "#7b2ff7"] as [string, string], icon: "ℹ", label: "INFO" };
+  }
+}
+
+/**
+ * Render an error display block.
+ */
+export function renderErrorDisplay(opts: ErrorDisplayOptions): string {
+  const severity = opts.severity ?? "error";
+  const colors = getSeverityColors(severity);
+  const grad = gradient(colors.gradient);
+  const cols = process.stdout.columns ?? 80;
+  const width = Math.min(cols - 2, 72);
+
+  const lines: string[] = [];
+
+  // ── Header ──
+  const headerIcon = severity === "error"
+    ? chalk.red.bold(colors.icon)
+    : severity === "warning"
+    ? chalk.yellow.bold(colors.icon)
+    : chalk.cyan(colors.icon);
+  const headerLabel = grad(` ${colors.label} `);
+  const codeStr = opts.code ? chalk.dim(` [${opts.code}]`) : "";
+  lines.push(`${headerIcon} ${headerLabel}${codeStr}`);
+
+  // ── Title ──
+  lines.push("");
+  lines.push(chalk.bold.white(opts.title));
+
+  // ── Message ──
+  lines.push("");
+  const msgLines = opts.message.split("\n");
+  for (const line of msgLines) {
+    lines.push(chalk.white(line));
+  }
+
+  // ── Context lines ──
+  if (opts.context && opts.context.length > 0) {
+    lines.push("");
+    lines.push(chalk.dim("Context:"));
+    for (const ctx of opts.context.slice(0, 5)) {
+      lines.push(chalk.dim(`  ${ctx}`));
+    }
+    if (opts.context.length > 5) {
+      lines.push(chalk.dim(`  ... +${opts.context.length - 5} more`));
+    }
+  }
+
+  // ── Suggestion ──
+  if (opts.suggestion) {
+    lines.push("");
+    lines.push(`${chalk.green("💡")} ${chalk.green.bold("Suggestion:")}`);
+    lines.push(chalk.green(`  ${opts.suggestion}`));
+  }
+
+  // ── Stack trace (collapsed preview) ──
+  if (opts.stack) {
+    lines.push("");
+    const stackLines = opts.stack.split("\n").slice(0, 3);
+    lines.push(chalk.dim("Stack trace (first 3 lines):"));
+    for (const sl of stackLines) {
+      lines.push(chalk.dim(`  ${sl.trim()}`));
+    }
+  }
+
+  // ── Render in boxen ──
+  const content = lines.join("\n");
+  return boxen(content, {
+    padding: { top: 1, bottom: 1, left: 2, right: 2 },
+    margin: { top: 0, bottom: 1, left: 0, right: 0 },
+    borderStyle: "round",
+    borderColor: colors.border,
+    width,
+  });
+}
+
+/**
+ * Quick error render — wraps a simple error message in a styled block.
+ */
+export function renderQuickError(title: string, message: string): string {
+  return renderErrorDisplay({ title, message, severity: "error" });
+}
+
+/**
+ * Render a warning display.
+ */
+export function renderWarning(title: string, message: string, suggestion?: string): string {
+  return renderErrorDisplay({ title, message, severity: "warning", suggestion });
+}