@sns-myagent/cli 0.2.0 → 0.3.1

package/src/ui/gradient.ts

@@ -0,0 +1,104 @@
+/**
+ * Standalone gradient utility for SNS-MyAgent terminal UI.
+ *
+ * Provides reusable gradient renderers for brand colors.
+ * Single source of truth for all gradient-based decorations.
+ */
+import gradient from "gradient-string";
+import chalk from "chalk";
+import { BRAND_GRADIENT, ACCENT_GRADIENT, SUBTLE_GRADIENT, ROLE_HEX } from "./colors.js";
+
+// ── Pre-built gradient instances ──
+
+/** Full brand gradient: cyan → purple → pink. */
+export const brandGradient: (text: string) => string = gradient(BRAND_GRADIENT);
+
+/** Accent gradient: purple → cyan. */
+export const accentGradient: (text: string) => string = gradient(ACCENT_GRADIENT);
+
+/** Subtle gradient: cyan → purple. */
+export const subtleGradient: (text: string) => string = gradient(SUBTLE_GRADIENT);
+
+// ── Gradient functions ──
+
+/**
+ * Apply brand gradient to text.
+ */
+export function brand(text: string): string {
+  return brandGradient(text);
+}
+
+/**
+ * Apply accent gradient to text.
+ */
+export function accentGrad(text: string): string {
+  return accentGradient(text);
+}
+
+/**
+ * Apply subtle gradient to text.
+ */
+export function subtle(text: string): string {
+  return subtleGradient(text);
+}
+
+/**
+ * Create a gradient border line spanning the given width.
+ */
+export function gradientLine(width: number): string {
+  const line = "─".repeat(width);
+  return brandGradient(line);
+}
+
+/**
+ * Create a gradient border with label in the center.
+ */
+export function labeledGradientLine(label: string, width: number): string {
+  const labelLen = label.length + 4; // 2 spaces each side
+  const sideLen = Math.max(0, Math.floor((width - labelLen) / 2));
+  const left = "─".repeat(sideLen);
+  const right = "─".repeat(width - sideLen - labelLen);
+  return brandGradient(left) + chalk.dim(` ${label} `) + brandGradient(right);
+}
+
+/**
+ * Create a role-specific gradient for a message role.
+ */
+export function roleGradient(role: keyof typeof ROLE_HEX): (text: string) => string {
+  const hex = ROLE_HEX[role];
+  const darker = adjustBrightness(hex, -30);
+  return gradient([hex, darker]);
+}
+
+/**
+ * Create a gradient for status indicators.
+ */
+export function statusGradient(status: "success" | "warning" | "error" | "info"): (text: string) => string {
+  switch (status) {
+    case "success":
+      return gradient(["#00d2ff", "#00ff88"]);
+    case "warning":
+      return gradient(["#ffd700", "#ff8c00"]);
+    case "error":
+      return gradient(["#ff4444", "#cc0000"]);
+    case "info":
+      return gradient(["#00d2ff", "#7b2ff7"]);
+  }
+}
+
+/**
+ * Render text with a gradient background (using chalk bg).
+ */
+export function gradientBg(text: string, hex: string): string {
+  return chalk.bgHex(hex)(text);
+}
+
+// ── Internal helpers ──
+
+function adjustBrightness(hex: string, amount: number): string {
+  const num = parseInt(hex.replace("#", ""), 16);
+  const r = Math.min(255, Math.max(0, ((num >> 16) & 0xff) + amount));
+  const g = Math.min(255, Math.max(0, ((num >> 8) & 0xff) + amount));
+  const b = Math.min(255, Math.max(0, (num & 0xff) + amount));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
+}

package/src/ui/index.ts

@@ -4,3 +4,18 @@ export { showBanner } from "./banner.js";
 export { createSpinner } from "./spinner.js";
 export { createPrompt } from "./chat-prompt.js";
 export { renderStatusBar, clearStatusBar, type StatusBarState } from "./status-bar.js";
+export {
+  brandGradient,
+  accentGradient,
+  subtleGradient,
+  brand,
+  accentGrad,
+  subtle,
+  gradientLine,
+  labeledGradientLine,
+  roleGradient,
+  statusGradient,
+  gradientBg,
+} from "./gradient.js";
+export { renderErrorDisplay, renderQuickError, renderWarning, type ErrorDisplayOptions, type ErrorSeverity } from "./error-display.js";
+export { renderMemoryToast, renderMemoryRecall, renderMemorySave, clearToastLine, type MemoryToastOptions, type ToastType } from "./memory-toast.js";

package/src/ui/memory-toast.ts

@@ -0,0 +1,102 @@
+/**
+ * Memory toast notification component for SNS-MyAgent terminal UI.
+ *
+ * Shows brief, non-intrusive memory recall/save notifications.
+ * Auto-dismiss style — fades after a short duration.
+ */
+import chalk from "chalk";
+import gradient from "gradient-string";
+import { BRAND_GRADIENT } from "./colors.js";
+
+export type ToastType = "recall" | "save" | "forget" | "info";
+
+export interface MemoryToastOptions {
+  /** Type of memory operation. */
+  type: ToastType;
+  /** Short description of what happened. */
+  message: string;
+  /** Memory ID (optional, shown as dim). */
+  memoryId?: string;
+  /** Relevance score (0-1). */
+  relevance?: number;
+  /** Duration in ms before auto-dismiss (default: 3000). */
+  duration?: number;
+}
+
+const TOAST_CONFIG = {
+  recall: { icon: "🧠", label: "MEMORY", gradient: ["#00d2ff", "#7b2ff7"] as [string, string] },
+  save: { icon: "💾", label: "SAVED", gradient: ["#00ff88", "#00d2ff"] as [string, string] },
+  forget: { icon: "🗑", label: "FORGOT", gradient: ["#ff8c00", "#ff4444"] as [string, string] },
+  info: { icon: "ℹ", label: "INFO", gradient: ["#7b2ff7", "#ff6b9d"] as [string, string] },
+} as const;
+
+/**
+ * Render a memory toast notification line.
+ * Returns a string that can be printed and then cleared.
+ */
+export function renderMemoryToast(opts: MemoryToastOptions): string {
+  const config = TOAST_CONFIG[opts.type];
+  const grad = gradient(config.gradient);
+
+  const icon = config.icon;
+  const label = grad(chalk.bold(` ${config.label} `));
+  const msg = chalk.white(opts.message);
+
+  const parts = [icon, label, msg];
+
+  if (opts.memoryId) {
+    parts.push(chalk.dim(`#${opts.memoryId.slice(0, 8)}`));
+  }
+
+  if (opts.relevance !== undefined) {
+    const score = Math.round(opts.relevance * 100);
+    const scoreColor = score > 80 ? chalk.green : score > 50 ? chalk.yellow : chalk.dim;
+    parts.push(scoreColor(`(${score}%)`));
+  }
+
+  return `  ${parts.join(" ")}`;
+}
+
+/**
+ * Render a memory recall toast with context snippet.
+ */
+export function renderMemoryRecall(
+  query: string,
+  snippet: string,
+  relevance?: number,
+): string {
+  const grad = gradient(BRAND_GRADIENT);
+  const icon = "🧠";
+  const label = grad(chalk.bold(" MEMORY "));
+  const queryStr = chalk.cyan(`"${query}"`);
+  const scoreStr = relevance !== undefined
+    ? chalk.dim(` ${Math.round(relevance * 100)}% match`)
+    : "";
+
+  const lines = [
+    `${icon} ${label} ${queryStr}${scoreStr}`,
+    `  ${chalk.dim(snippet.slice(0, 120))}${snippet.length > 120 ? chalk.dim("...") : ""}`,
+  ];
+
+  return lines.join("\n");
+}
+
+/**
+ * Render a memory save confirmation toast.
+ */
+export function renderMemorySave(content: string, scope?: string): string {
+  const grad = gradient(["#00ff88", "#00d2ff"]);
+  const icon = "💾";
+  const label = grad(chalk.bold(" SAVED "));
+  const scopeStr = scope ? chalk.dim(` [${scope}]`) : "";
+  const preview = content.length > 80 ? content.slice(0, 80) + "..." : content;
+
+  return `${icon} ${label}${scopeStr} ${chalk.dim(preview)}`;
+}
+
+/**
+ * Clear toast line (ANSI escape to clear current line).
+ */
+export function clearToastLine(): void {
+  process.stdout.write("\x1b[2K\r");
+}

package/src/ui/status-bar.ts

@@ -3,29 +3,32 @@
  *
  * Renders a bottom-line summary: model, tokens, session time, memory hits.
  * Uses ANSI to draw a single-line bar at the bottom of the terminal.
+ * Premium gradient styling.
  */
 
-import { accent, muted, primary, success } from "./colors.js";
+import chalk from "chalk";
+import gradient from "gradient-string";
+import { BRAND_GRADIENT } from "./colors.js";
 
 /** Runtime state passed into the status bar renderer. */
 export interface StatusBarState {
-	/** Active model name. */
-	model: string;
-	/** Total tokens used in the current session. */
-	tokensUsed: number;
-	/** Session start timestamp (ms since epoch). */
-	sessionStarted: number;
-	/** Number of memory/context hits. */
-	memoryHits: number;
+  /** Active model name. */
+  model: string;
+  /** Total tokens used in the current session. */
+  tokensUsed: number;
+  /** Session start timestamp (ms since epoch). */
+  sessionStarted: number;
+  /** Number of memory/context hits. */
+  memoryHits: number;
 }
 
 function formatDuration(ms: number): string {
-	const secs = Math.floor(ms / 1000);
-	const mins = Math.floor(secs / 60);
-	const hrs = Math.floor(mins / 60);
-	if (hrs > 0) return `${hrs}h${mins % 60}m`;
-	if (mins > 0) return `${mins}m${secs % 60}s`;
-	return `${secs}s`;
+  const secs = Math.floor(ms / 1000);
+  const mins = Math.floor(secs / 60);
+  const hrs = Math.floor(mins / 60);
+  if (hrs > 0) return `${hrs}h${mins % 60}m`;
+  if (mins > 0) return `${mins}m${secs % 60}s`;
+  return `${secs}s`;
 }
 
 /**
@@ -33,25 +36,28 @@ function formatDuration(ms: number): string {
  * Overwrites the current line using `\r` + ANSI clear-line.
  */
 export function renderStatusBar(state: StatusBarState): void {
-	const elapsed = formatDuration(Date.now() - state.sessionStarted);
-	const tokens = state.tokensUsed > 1000
-		? `${(state.tokensUsed / 1000).toFixed(1)}k`
-		: String(state.tokensUsed);
-
-	const segments = [
-		`${muted("model")} ${primary(state.model)}`,
-		`${muted("tokens")} ${accent(tokens)}`,
-		`${muted("time")} ${accent(elapsed)}`,
-		`${muted("memory")} ${success(String(state.memoryHits))}`,
-	];
-
-	const bar = `  ${segments.join(muted(" │ "))}  `;
-	process.stdout.write(`\x1b[2K\r${bar}`);
+  const elapsed = formatDuration(Date.now() - state.sessionStarted);
+  const tokens = state.tokensUsed > 1000
+    ? `${(state.tokensUsed / 1000).toFixed(1)}k`
+    : String(state.tokensUsed);
+
+  const grad = gradient(BRAND_GRADIENT);
+
+  const segments = [
+    `${chalk.dim("model")} ${chalk.cyan(state.model)}`,
+    `${chalk.dim("tokens")} ${grad(tokens)}`,
+    `${chalk.dim("time")} ${chalk.magenta(elapsed)}`,
+    `${chalk.dim("mem")} ${chalk.green(String(state.memoryHits))}`,
+  ];
+
+  const sep = chalk.dim(" │ ");
+  const bar = `  ${segments.join(sep)}  `;
+  process.stdout.write(`\x1b[2K\r${bar}`);
 }
 
 /**
  * Clear the status bar line (call before printing normal output).
  */
 export function clearStatusBar(): void {
-	process.stdout.write("\x1b[2K\r");
+  process.stdout.write("\x1b[2K\r");
 }