@sns-myagent/cli 0.3.5 → 0.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sns-myagent/cli",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "SNS-MyAgent \u2014 BYOK coding agent CLI. Multi-agent + Telegram + self-learning memory. ~120MB binary, zero forced cost.",
   "homepage": "https://github.com/Reihantt6/sns-myagent",
   "author": "Reihantt6",

package/scripts/smoke-tui.ts

@@ -11,15 +11,8 @@ import { renderChatBlock, renderSessionHeader } from "../src/tui/chat-blocks.js"
 import { CHAT_COMMANDS, renderCommandPalette } from "../src/tui/command-palette.js";
 import { renderErrorDisplay } from "../src/ui/error-display.js";
 import { renderMemoryToast, renderMemoryRecall } from "../src/ui/memory-toast.js";
-import {
-  brand,
-  accentGrad,
-  subtle,
-  gradientLine,
-  labeledGradientLine,
-  roleGradient,
-  statusGradient,
-} from "../src/ui/gradient.js";
+import { renderStatusBar } from "../src/ui/status-bar.js";
+import { accent, brand, subtle, inline } from "../src/ui/gradient.js";
 
 // Stub stdout.columns so width-dependent renderers behave deterministically.
 Object.defineProperty(process.stdout, "columns", { value: 100, configurable: true });
@@ -69,7 +62,7 @@ console.log(
 );
 
 section("3. SESSION HEADER");
-console.log(renderSessionHeader("openai/gpt-4o-mini", "0.3.4"));
+console.log(renderSessionHeader("openai/gpt-4o-mini", "0.3.5"));
 
 section("4. COMMAND PALETTE");
 console.log(
@@ -99,16 +92,19 @@ console.log(
   renderMemoryRecall("dark theme", "user prefers dark theme for terminal UI", 0.92),
 );
 
-section("7. GRADIENT HELPERS");
-console.log("brand:        ", brand("SnsAgent — premium CLI"));
-console.log("accentGrad:   ", accentGrad("accent gradient text"));
-console.log("subtle:       ", subtle("subtle gradient"));
-console.log("gradientLine: ", gradientLine(60));
-console.log("labeledLine:  ", labeledGradientLine("VERIFIED", 60));
-console.log("roleGradient: ", roleGradient("assistant")("assistant message border"));
-console.log("statusGradient(success):", statusGradient("success")("✓ ok"));
-console.log("statusGradient(warning):", statusGradient("warning")("⚠ warning"));
-console.log("statusGradient(error):  ", statusGradient("error")("✗ failed"));
-console.log("statusGradient(info):   ", statusGradient("info")("ℹ info"));
+section("8. STATUS BAR");
+renderStatusBar({
+  model: "gpt-4o-mini",
+  tokensUsed: 12345,
+  sessionStarted: Date.now() - 10_000,
+  memoryHits: 3,
+});
+console.log(); // newline after status bar (renderStatusBar writes to stdout directly)
 
-console.log("\n\x1b[1m\x1b[32m✓ All 7 TUI components rendered without crashing.\x1b[0m");
+section("9. GRADIENT HELPERS (minimal)");
+console.log("brand:        ", brand("SnsAgent — coding agent CLI"));
+console.log("accent:       ", accent("accent cyan"));
+console.log("subtle:       ", subtle("dim text"));
+console.log("inline:       ", inline("file.ts:42"));
+
+console.log("\n\x1b[1m\x1b[32m✓ All 7 TUI components rendered without crashing.\x1b[0m");

package/src/tui/chat-blocks.ts

@@ -1,205 +1,148 @@
 /**
- * Chat message block renderers — bordered terminal blocks for each message role.
- * User, assistant, tool, system messages each get distinct gradient border treatment.
- * Premium branded terminal UI for SNS-MyAgent.
+ * Chat message block renderers — single-accent bordered blocks.
+ * One border style (rounded), one accent color (cyan). No role-specific
+ * rainbow. Per-role distinction via bold label only.
  */
 import chalk from "chalk";
-import gradient from "gradient-string";
 import { visibleWidth } from "@oh-my-pi/pi-tui";
-import { BRAND_GRADIENT, ROLE_HEX } from "#src/ui/colors.js";
 
-// ── Box-drawing chars (rounded) ──
 const BOX = {
-  topLeft: "╭",
-  topRight: "╮",
-  bottomLeft: "╰",
-  bottomRight: "╯",
-  horizontal: "─",
-  vertical: "│",
-  teeRight: "├",
-  teeLeft: "┤",
+	topLeft: "╭",
+	topRight: "╮",
+	bottomLeft: "╰",
+	bottomRight: "╯",
+	horizontal: "─",
+	vertical: "│",
 } as const;
 
-// ── Color themes per role ──
-const ROLE_COLORS = {
-  user: { border: chalk.cyan, label: chalk.cyan.bold, gradient: [ROLE_HEX.user, "#0099cc"] },
-  assistant: { border: chalk.magenta, label: chalk.magenta.bold, gradient: [ROLE_HEX.assistant, "#9b59b6"] },
-  tool: { border: chalk.yellow, label: chalk.yellow, gradient: [ROLE_HEX.tool, "#e6a700"] },
-  system: { border: chalk.dim, label: chalk.dim, gradient: [ROLE_HEX.system, "#555555"] },
-  error: { border: chalk.red, label: chalk.red.bold, gradient: [ROLE_HEX.error, "#cc0000"] },
-} as const;
+const ACCENT = chalk.cyan;
+
+export type MessageRole = "user" | "assistant" | "tool" | "system" | "error";
 
-export type MessageRole = keyof typeof ROLE_COLORS;
+const ROLE_LABEL: Record<MessageRole, string> = {
+	user: "you",
+	assistant: "snsagent",
+	tool: "tool",
+	system: "system",
+	error: "error",
+};
 
 export interface ChatBlockOptions {
-  role: MessageRole;
-  label?: string;
-  content: string;
-  width?: number;
-  meta?: string;
-  streaming?: boolean;
+	role: MessageRole;
+	label?: string;
+	content: string;
+	width?: number;
+	meta?: string;
+	streaming?: boolean;
 }
 
-/**
- * Word-wrap text respecting ANSI escape sequences.
- * Returns array of lines fitting within `maxWidth` visible columns.
- */
 function wrapAnsi(text: string, maxWidth: number): string[] {
-  const lines: string[] = [];
-  for (const rawLine of text.split("\n")) {
-    if (visibleWidth(rawLine) <= maxWidth) {
-      lines.push(rawLine);
-      continue;
-    }
-    // Simple word-wrap
-    let current = "";
-    let currentWidth = 0;
-    const words = rawLine.split(/(\s+)/);
-    for (const word of words) {
-      const wWidth = visibleWidth(word);
-      if (currentWidth + wWidth > maxWidth && current.length > 0) {
-        lines.push(current);
-        current = word.trimStart();
-        currentWidth = visibleWidth(current);
-      } else {
-        current += word;
-        currentWidth += wWidth;
-      }
-    }
-    if (current.length > 0) lines.push(current);
-  }
-  return lines;
+	const lines: string[] = [];
+	for (const rawLine of text.split("\n")) {
+		if (visibleWidth(rawLine) <= maxWidth) {
+			lines.push(rawLine);
+			continue;
+		}
+		let current = "";
+		let currentWidth = 0;
+		const words = rawLine.split(/(\s+)/);
+		for (const word of words) {
+			const wWidth = visibleWidth(word);
+			if (currentWidth + wWidth > maxWidth && current.length > 0) {
+				lines.push(current);
+				current = word.trimStart();
+				currentWidth = visibleWidth(current);
+			} else {
+				current += word;
+				currentWidth += wWidth;
+			}
+		}
+		if (current.length > 0) lines.push(current);
+	}
+	return lines;
 }
 
-/**
- * Render a single chat message as a bordered block with gradient border.
- */
 export function renderChatBlock(opts: ChatBlockOptions): string {
-  const cols = process.stdout.columns ?? 80;
-  const width = Math.min(opts.width ?? cols, cols) - 2; // margin
-  const colors = ROLE_COLORS[opts.role];
-  const border = colors.border;
-
-  const pad = 1;
-  const innerWidth = width - 2 - pad * 2; // borders + padding
-
-  const lines: string[] = [];
-
-  // ── Top bar with gradient label ──
-  const label = opts.label ?? opts.role.toUpperCase();
-  const labelText = ` ${label} `;
-  const topFill = BOX.horizontal.repeat(
-    Math.max(0, innerWidth - visibleWidth(labelText) + pad * 2)
-  );
-  const gradBorder = gradient(colors.gradient as [string, string]);
-  lines.push(
-    gradBorder(BOX.topLeft + BOX.horizontal.repeat(2)) +
-      colors.label(labelText) +
-      gradBorder(topFill + BOX.topRight)
-  );
-
-  // ── Content lines with gradient side borders ──
-  const contentLines = wrapAnsi(opts.content, innerWidth);
-  const padStr = " ".repeat(pad);
-  for (const line of contentLines) {
-    const vis = visibleWidth(line);
-    const fill = " ".repeat(Math.max(0, innerWidth - vis));
-    lines.push(
-      gradBorder(BOX.vertical) + padStr + line + fill + padStr + gradBorder(BOX.vertical)
-    );
-  }
-
-  // ── Meta line (timestamp, tokens, etc.) ──
-  if (opts.meta) {
-    const metaText = chalk.dim(opts.meta);
-    const metaFill = " ".repeat(Math.max(0, innerWidth - visibleWidth(opts.meta)));
-    lines.push(
-      gradBorder(BOX.vertical) + padStr + metaText + metaFill + padStr + gradBorder(BOX.vertical)
-    );
-  }
-
-  // ── Streaming indicator (animated) ──
-  if (opts.streaming) {
-    const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-    const frameIdx = Date.now() % (frames.length * 80);
-    const frame = frames[Math.floor(frameIdx / 80)];
-    const spinnerText = `${chalk.cyan(frame)} ${chalk.dim("thinking...")}`;
-    const spinFill = " ".repeat(Math.max(0, innerWidth - visibleWidth(spinnerText)));
-    lines.push(
-      gradBorder(BOX.vertical) + padStr + spinnerText + spinFill + padStr + gradBorder(BOX.vertical)
-    );
-  }
-
-  // ── Bottom bar ──
-  lines.push(
-    gradBorder(BOX.bottomLeft + BOX.horizontal.repeat(width - 2) + BOX.bottomRight)
-  );
-
-  return lines.join("\n");
+	const cols = process.stdout.columns ?? 80;
+	const width = Math.min(opts.width ?? cols, cols) - 2;
+	const pad = 1;
+	const innerWidth = width - 2 - pad * 2;
+
+	const lines: string[] = [];
+
+	// Top bar: accent line + label
+	const label = opts.label ?? ROLE_LABEL[opts.role];
+	const labelText = ` ${label} `;
+	const topFill = BOX.horizontal.repeat(Math.max(0, innerWidth - visibleWidth(labelText) + pad * 2));
+	lines.push(ACCENT(BOX.topLeft + BOX.horizontal.repeat(2)) + chalk.bold(labelText) + ACCENT(topFill + BOX.topRight));
+
+	// Content
+	const contentLines = wrapAnsi(opts.content, innerWidth);
+	const padStr = " ".repeat(pad);
+	for (const line of contentLines) {
+		const vis = visibleWidth(line);
+		const fill = " ".repeat(Math.max(0, innerWidth - vis));
+		lines.push(ACCENT(BOX.vertical) + padStr + line + fill + padStr + ACCENT(BOX.vertical));
+	}
+
+	// Meta
+	if (opts.meta) {
+		const metaText = chalk.dim(opts.meta);
+		const metaFill = " ".repeat(Math.max(0, innerWidth - visibleWidth(opts.meta)));
+		lines.push(ACCENT(BOX.vertical) + padStr + metaText + metaFill + padStr + ACCENT(BOX.vertical));
+	}
+
+	// Streaming
+	if (opts.streaming) {
+		const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+		const frameIdx = Date.now() % (frames.length * 80);
+		const frame = frames[Math.floor(frameIdx / 80)];
+		const spinnerText = `${ACCENT(frame)} ${chalk.dim("thinking...")}`;
+		const spinFill = " ".repeat(Math.max(0, innerWidth - visibleWidth(spinnerText)));
+		lines.push(ACCENT(BOX.vertical) + padStr + spinnerText + spinFill + padStr + ACCENT(BOX.vertical));
+	}
+
+	// Bottom bar
+	lines.push(ACCENT(BOX.bottomLeft + BOX.horizontal.repeat(width - 2) + BOX.bottomRight));
+
+	return lines.join("\n");
 }
 
-/**
- * Render a compact inline message (no box, just colored prefix).
- */
+/** Compact inline message — no box. */
 export function renderInline(role: MessageRole, text: string): string {
-  const colors = ROLE_COLORS[role];
-  const prefix = colors.label(`[${role}]`);
-  return `${prefix} ${text}`;
+	const label = chalk.bold(`[${ROLE_LABEL[role]}]`);
+	return `${label} ${text}`;
 }
 
-/**
- * Render a separator/divider line with gradient accent.
- */
+/** Separator line, optional label. */
 export function renderDivider(label?: string): string {
-  const cols = process.stdout.columns ?? 80;
-  const grad = gradient(BRAND_GRADIENT);
-  if (!label) {
-    return grad("─".repeat(cols - 2));
-  }
-  const labelText = ` ${label} `;
-  const fill = BOX.horizontal.repeat(Math.max(0, cols - 4 - visibleWidth(labelText)));
-  return grad(`${fill.slice(0, Math.floor(fill.length / 2))}`) +
-    chalk.dim(labelText) +
-    grad(`${fill.slice(Math.floor(fill.length / 2))}`);
+	const cols = process.stdout.columns ?? 80;
+	if (!label) {
+		return chalk.dim("─".repeat(cols - 2));
+	}
+	const labelText = ` ${label} `;
+	const fill = "─".repeat(Math.max(0, cols - 2 - visibleWidth(labelText)));
+	return chalk.dim(fill.slice(0, Math.floor(fill.length / 2))) + chalk.dim(labelText) + chalk.dim(fill.slice(Math.floor(fill.length / 2)));
 }
 
-/**
- * Render a tool-call status block (compact, with gradient border).
- */
+/** Tool-call status line. */
 export function renderToolBlock(
-  toolName: string,
-  status: "running" | "done" | "error",
-  detail?: string,
+	toolName: string,
+	status: "running" | "done" | "error",
+	detail?: string,
 ): string {
-  const cols = process.stdout.columns ?? 80;
-  const width = Math.min(cols - 2, 72);
-  const gradColors = status === "error"
-    ? ["#ff4444", "#cc0000"]
-    : status === "running"
-    ? ["#ffd700", "#e6a700"]
-    : ["#00d2ff", "#7b2ff7"];
-  const grad = gradient(gradColors as [string, string]);
-
-  const icon = status === "running" ? chalk.yellow("⚙") : status === "done" ? chalk.green("✓") : chalk.red("✗");
-  const label = ` ${icon} tool:${toolName} `;
-  const detailText = detail ? chalk.dim(` ${detail}`) : "";
-  const fill = BOX.horizontal.repeat(
-    Math.max(0, width - 2 - visibleWidth(` ⚙ tool:${toolName} `) - visibleWidth(detail ?? ""))
-  );
-
-  return grad(BOX.topLeft + BOX.horizontal) + label + detailText + grad(fill + BOX.topRight);
+	const icon = status === "running" ? chalk.cyan("⚙") : status === "done" ? chalk.green("✓") : chalk.red("✗");
+	const label = ` ${icon} tool:${toolName} `;
+	const detailText = detail ? chalk.dim(` ${detail}`) : "";
+	return label + detailText;
 }
 
-/**
- * Build a gradient header line for the top of the session.
- */
+/** Session header. */
 export function renderSessionHeader(model: string, version: string): string {
-  const cols = process.stdout.columns ?? 80;
-  const left = gradient(["#00d2ff", "#7b2ff7"])(" SnsAgent");
-  const ver = chalk.dim(` v${version}`);
-  const modelStr = chalk.cyan(` ${model}`);
-  const sep = chalk.dim(" │ ");
-  const line = `${left}${ver}${sep}${modelStr}`;
-  const fill = chalk.dim("─".repeat(Math.max(0, cols - visibleWidth(line) - 2)));
-  return `\n${line}\n${fill}\n`;
+	const cols = process.stdout.columns ?? 80;
+	const left = ACCENT.bold(" snsagent");
+	const ver = chalk.dim(` v${version}`);
+	const modelStr = chalk.dim(" · ") + chalk.cyan(model);
+	const sep = chalk.dim("─".repeat(Math.max(0, cols - visibleWidth(left + ver + modelStr) - 2)));
+	return `\n${left}${ver}${modelStr}\n${sep}\n`;
 }

package/src/tui/code-cell.ts

@@ -3,7 +3,6 @@
  */
 import { Markdown, visibleWidth } from "@oh-my-pi/pi-tui";
 import chalk from "chalk";
-import gradient from "gradient-string";
 import { getMarkdownTheme, highlightCode, type Theme } from "../modes/theme/theme";
 import {
 	formatDuration,
@@ -241,7 +240,6 @@ export function renderCollapsibleOutput(
   theme: Theme,
   maxLines: number = 8,
 ): string[] {
-  const grad = theme.fg;
   const lines: string[] = [];
   const inner = Math.max(20, width - 4);
 
@@ -249,20 +247,22 @@ export function renderCollapsibleOutput(
     // Collapsed: just header + hint
     const lineCount = content.split("\n").length;
     const hint = chalk.dim(` (${lineCount} lines, click to expand)`);
-    lines.push(`  ${grad("accent", "▸")} ${grad("toolTitle", label)}${hint}`);
+    lines.push(`  ${chalk.cyan("▸")} ${chalk.bold(label)}${hint}`);
     return lines;
   }
 
   // Expanded: bordered block
-  const gradColors = ["#00d2ff", "#7b2ff7"] as [string, string];
-  const g = gradient(gradColors);
+  const accent = chalk.cyan;
+
+  	// Expanded: bordered block
+  	const accentFn = (s: string) => chalk.cyan(s);
 
   // Header
   const headerText = ` ${label} `;
   const headerFill = COLLAPSE_BORDER.horizontal.repeat(
     Math.max(0, inner - headerText.length - 2),
   );
-  lines.push(g(COLLAPSE_BORDER.topLeft + COLLAPSE_BORDER.horizontal) + grad("toolTitle", headerText) + g(headerFill + COLLAPSE_BORDER.topRight));
+  lines.push(accent(COLLAPSE_BORDER.topLeft + COLLAPSE_BORDER.horizontal) + chalk.bold(headerText) + accent(headerFill + COLLAPSE_BORDER.topRight));
 
   // Content
   const rawLines = content.split("\n");
@@ -270,7 +270,7 @@ export function renderCollapsibleOutput(
   for (const line of visibleLines) {
     const visLen = visibleWidth(line);
     const fill = " ".repeat(Math.max(0, inner - visLen));
-    lines.push(g(COLLAPSE_BORDER.vertical) + " " + line + fill + " " + g(COLLAPSE_BORDER.vertical));
+    lines.push(accent(COLLAPSE_BORDER.vertical) + " " + line + fill + " " + accent(COLLAPSE_BORDER.vertical));
   }
 
   // Hidden lines hint
@@ -278,11 +278,11 @@ export function renderCollapsibleOutput(
   if (remaining > 0) {
     const moreText = `  ... +${remaining} more lines`;
     const moreFill = " ".repeat(Math.max(0, inner - moreText.length));
-    lines.push(g(COLLAPSE_BORDER.vertical) + chalk.dim(moreText) + moreFill + g(COLLAPSE_BORDER.vertical));
+    lines.push(accent(COLLAPSE_BORDER.vertical) + chalk.dim(moreText) + moreFill + accent(COLLAPSE_BORDER.vertical));
   }
 
   // Footer
-  lines.push(g(COLLAPSE_BORDER.bottomLeft + COLLAPSE_BORDER.horizontal.repeat(inner) + COLLAPSE_BORDER.bottomRight));
+  lines.push(accent(COLLAPSE_BORDER.bottomLeft + COLLAPSE_BORDER.horizontal.repeat(inner) + COLLAPSE_BORDER.bottomRight));
 
   return lines;
 }