@sns-myagent/cli 0.2.0 → 0.3.0

package/src/tui/chat-blocks.ts

@@ -0,0 +1,205 @@
+/**
+ * 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.
+ */
+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: "┤",
+} 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;
+
+export type MessageRole = keyof typeof ROLE_COLORS;
+
+export interface ChatBlockOptions {
+  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;
+}
+
+/**
+ * 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");
+}
+
+/**
+ * Render a compact inline message (no box, just colored prefix).
+ */
+export function renderInline(role: MessageRole, text: string): string {
+  const colors = ROLE_COLORS[role];
+  const prefix = colors.label(`[${role}]`);
+  return `${prefix} ${text}`;
+}
+
+/**
+ * Render a separator/divider line with gradient accent.
+ */
+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))}`);
+}
+
+/**
+ * Render a tool-call status block (compact, with gradient border).
+ */
+export function renderToolBlock(
+  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);
+}
+
+/**
+ * Build a gradient header line for the top of the session.
+ */
+export function renderSessionHeader(model: string, version: string): string {
+  const cols = process.stdout.columns ?? 80;
+  const left = gradient(["#00d2ff", "#7b2ff7"])(" SnsCoder");
+  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`;
+}

package/src/tui/chat-ui.ts

@@ -0,0 +1,270 @@
+/**
+ * Chat UI orchestrator — block-style terminal chat loop.
+ * Renders messages as bordered blocks, handles /commands, manages conversation.
+ * Lightweight: no pi-agent-core dependency. Pure terminal rendering.
+ */
+import chalk from "chalk";
+import gradient from "gradient-string";
+import ora from "ora";
+import { createInterface } from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+import { platform } from "node:os";
+import { cwd } from "node:process";
+import { renderSplash, type SplashInfo } from "./splash.js";
+import { renderStatusBar, clearStatusBar, type StatusBarState } from "../ui/status-bar.js";
+import {
+  renderChatBlock,
+  renderToolBlock,
+  renderDivider,
+  renderSessionHeader,
+  type MessageRole,
+} from "./chat-blocks.js";
+
+// ── Types ──
+
+interface ChatMessage {
+  role: MessageRole;
+  content: string;
+  timestamp: Date;
+  meta?: string;
+}
+
+interface ChatSessionConfig {
+  model?: string;
+  provider?: string;
+  version: string;
+  agentName?: string;
+  tokensUsed?: number;
+  memoryHits?: number;
+  onUserMessage?: (msg: string) => Promise<string | null>;
+}
+
+// ── Helpers ──
+
+function formatTime(d: Date): string {
+  return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+function clearScreen(): void {
+  stdout.write("\x1b[2J\x1b[H");
+}
+
+function moveCursor(row: number, col: number): void {
+  stdout.write(`\x1b[${row};${col}H`);
+}
+
+// ── Slash commands ──
+
+interface SlashCommand {
+  name: string;
+  description: string;
+  handler: (args: string[], ctx: ChatContext) => void | Promise<void>;
+}
+
+interface ChatContext {
+  messages: ChatMessage[];
+  config: ChatSessionConfig;
+  print: (text: string) => void;
+}
+
+const BUILTIN_COMMANDS: SlashCommand[] = [
+  {
+    name: "/exit",
+    description: "Quit the chat",
+    handler: (_args, ctx) => {
+      ctx.print(chalk.dim("\n  Goodbye. 👋\n"));
+      process.exit(0);
+    },
+  },
+  {
+    name: "/quit",
+    description: "Quit the chat",
+    handler: (_args, ctx) => {
+      ctx.print(chalk.dim("\n  Goodbye. 👋\n"));
+      process.exit(0);
+    },
+  },
+  {
+    name: "/clear",
+    description: "Clear screen and show header",
+    handler: (_args, ctx) => {
+      clearScreen();
+      const model = ctx.config.model ? `${ctx.config.provider ?? "?"}/${ctx.config.model}` : "none";
+      ctx.print(renderSessionHeader(model, ctx.config.version));
+    },
+  },
+  {
+    name: "/help",
+    description: "Show available commands",
+    handler: (_args, ctx) => {
+      const lines = BUILTIN_COMMANDS.map(
+        c => `  ${chalk.cyan(c.name.padEnd(14))}${chalk.dim(c.description)}`
+      ).join("\n");
+      ctx.print(renderChatBlock({
+        role: "system",
+        label: "HELP",
+        content: lines,
+      }));
+    },
+  },
+  {
+    name: "/history",
+    description: "Show conversation history",
+    handler: (_args, ctx) => {
+      if (ctx.messages.length === 0) {
+        ctx.print(chalk.dim("  No messages yet."));
+        return;
+      }
+      for (const msg of ctx.messages) {
+        ctx.print(renderChatBlock({
+          role: msg.role,
+          content: msg.content,
+          meta: formatTime(msg.timestamp),
+        }));
+      }
+    },
+  },
+  {
+    name: "/model",
+    description: "Show current model info",
+    handler: (_args, ctx) => {
+      const model = ctx.config.model ?? "not set";
+      const provider = ctx.config.provider ?? "not set";
+      ctx.print(renderChatBlock({
+        role: "system",
+        label: "MODEL",
+        content: `Provider: ${provider}\nModel: ${model}\nAgent: ${ctx.config.agentName ?? "SnsCoder"}`,
+      }));
+    },
+  },
+];
+
+// ── Main chat loop ──
+
+export async function runChatSession(config: ChatSessionConfig): Promise<void> {
+  const messages: ChatMessage[] = [];
+  const model = config.model ? `${config.provider ?? "??"}/${config.model}` : "defaults";
+  const sessionStarted = Date.now();
+  const statusState: StatusBarState = {
+    model: config.model ?? "none",
+    tokensUsed: config.tokensUsed ?? 0,
+    sessionStarted,
+    memoryHits: config.memoryHits ?? 0,
+  };
+
+  const updateStatus = (): void => {
+    clearStatusBar();
+    renderStatusBar(statusState);
+  };
+  // Print splash
+  const splashInfo: SplashInfo = {
+    model: config.model,
+    provider: config.provider,
+    cwd: cwd(),
+    platform: platform(),
+  };
+  clearScreen();
+  stdout.write(renderSplash(splashInfo) + "\n\n");
+  updateStatus();
+  const print = (text: string): void => {
+    clearStatusBar();
+    stdout.write(text + "\n");
+    updateStatus();
+  };
+
+  const ctx: ChatContext = { messages, config, print };
+
+  // Readline loop
+  while (true) {
+    const promptStr = chalk.cyan("you") + chalk.dim(" › ");
+    let line: string;
+    try {
+      const rl = createInterface({ input: stdin, output: stdout });
+      try {
+        line = await rl.question(promptStr);
+      } finally {
+        rl.close();
+      }
+    } catch {
+      // EOF / Ctrl+C
+      print(chalk.dim("\n  Goodbye. 👋\n"));
+      process.exit(0);
+    }
+
+    const trimmed = line.trim();
+    if (trimmed === "") continue;
+
+    // Handle slash commands
+    if (trimmed.startsWith("/")) {
+      const [cmd, ...args] = trimmed.split(/\s+/);
+      const command = BUILTIN_COMMANDS.find(c => c.name === cmd);
+      if (command) {
+        await command.handler(args, ctx);
+        continue;
+      }
+      print(chalk.yellow(`  Unknown command: ${cmd}. Type /help for available commands.`));
+      continue;
+    }
+
+    // User message
+    const userMsg: ChatMessage = { role: "user", content: trimmed, timestamp: new Date() };
+    messages.push(userMsg);
+    statusState.tokensUsed += trimmed.split(/\s+/).length; // rough word count
+    updateStatus();
+    print(renderChatBlock({
+      role: "user",
+      content: trimmed,
+      meta: formatTime(userMsg.timestamp),
+    }));
+
+    // Assistant response
+    let response: string | null = null;
+    if (config.onUserMessage) {
+      // Show spinner while waiting
+      const spinner = ora({
+        text: chalk.dim("thinking..."),
+        spinner: "dots",
+        color: "cyan",
+      }).start();
+
+      try {
+        response = await config.onUserMessage(trimmed);
+      } catch (err) {
+        spinner.fail(chalk.red("error"));
+        const errMsg = err instanceof Error ? err.message : String(err);
+        print(renderChatBlock({
+          role: "error",
+          label: "ERROR",
+          content: errMsg,
+        }));
+        continue;
+      }
+      spinner.stop();
+    }
+
+    // Display response
+    const reply = response ?? `echo: ${trimmed}`;
+    const assistantMsg: ChatMessage = { role: "assistant", content: reply, timestamp: new Date() };
+    messages.push(assistantMsg);
+    statusState.tokensUsed += reply.split(/\s+/).length;
+    statusState.memoryHits += 1;
+    updateStatus();
+    print(renderChatBlock({
+      role: "assistant",
+      content: reply,
+      meta: `${formatTime(assistantMsg.timestamp)} │ ${config.agentName ?? "SnsCoder"}`,
+    }));
+    print(""); // spacing
+  }
+}
+
+/**
+ * Minimal chat session with echo fallback (no LLM connected).
+ * Used when no onUserMessage handler is provided.
+ */
+export async function runEchoChat(config: Omit<ChatSessionConfig, "onUserMessage">): Promise<void> {
+  return runChatSession({
+    ...config,
+    onUserMessage: async (msg: string) => `echo: ${msg}`,
+  });
+}

package/src/tui/code-cell.ts

@@ -1,7 +1,9 @@
 /**
  * Render a code or markdown cell with optional output section.
  */
-import { Markdown } from "@oh-my-pi/pi-tui";
+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,
@@ -215,6 +217,93 @@ export interface MarkdownCellOptions {
 	width: number;
 }
 
+// ── Collapsible tool output helpers ──
+
+const COLLAPSE_BORDER = {
+  topLeft: "╭",
+  topRight: "╮",
+  bottomLeft: "╰",
+  bottomRight: "╯",
+  horizontal: "─",
+  vertical: "│",
+} as const;
+
+/**
+ * Render a collapsible section for tool output.
+ * When collapsed: shows header + line count hint.
+ * When expanded: shows full output in bordered block.
+ */
+export function renderCollapsibleOutput(
+  label: string,
+  content: string,
+  expanded: boolean,
+  width: number,
+  theme: Theme,
+  maxLines: number = 8,
+): string[] {
+  const grad = theme.fg;
+  const lines: string[] = [];
+  const inner = Math.max(20, width - 4);
+
+  if (!expanded) {
+    // 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}`);
+    return lines;
+  }
+
+  // Expanded: bordered block
+  const gradColors = ["#00d2ff", "#7b2ff7"] as [string, string];
+  const g = gradient(gradColors);
+
+  // 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));
+
+  // Content
+  const rawLines = content.split("\n");
+  const visibleLines = rawLines.slice(0, maxLines);
+  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));
+  }
+
+  // Hidden lines hint
+  const remaining = rawLines.length - maxLines;
+  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));
+  }
+
+  // Footer
+  lines.push(g(COLLAPSE_BORDER.bottomLeft + COLLAPSE_BORDER.horizontal.repeat(inner) + COLLAPSE_BORDER.bottomRight));
+
+  return lines;
+}
+
+/**
+ * Render a collapsible tool output cell with gradient border.
+ * Wraps renderCodeCell with collapsible behavior.
+ */
+export function renderCollapsibleCodeCell(options: {
+  code: string;
+  language?: string;
+  title?: string;
+  status?: "pending" | "running" | "warning" | "complete" | "error";
+  output?: string;
+  expanded?: boolean;
+  width: number;
+}, theme: Theme): string[] {
+  const { expanded = false, ...rest } = options;
+  return renderCodeCell({ ...rest, codeMaxLines: expanded ? 200 : 8, outputMaxLines: expanded ? 50 : 4, expanded }, theme);
+}
+
 export function renderMarkdownCell(options: MarkdownCellOptions, theme: Theme): string[] {
 	const { content, output, expanded = false, outputMaxLines = 6, contentMaxLines = 12, width } = options;
 	const codeOptions: CodeCellOptions = {