@meowlynxsea/koi 0.1.0

package/src/tui/components/side-bar.tsx

@@ -0,0 +1,349 @@
+/**
+ * Side Bar Component
+ *
+ * Right sidebar: Logo, session title, working directory, model info,
+ * context usage, cost estimate, MCP servers, and task list.
+ */
+
+import { createTextAttributes } from "@opentui/core";
+import { getMcpConnections, getMcpStatusSummary } from "../../services/mcp/index.js";
+
+const KOI_LOGO = [
+  "██   ███   ███████   ██████",
+  "██  ██    ██    ███    ██   ",
+  "████      ██  █  ██    ██   ",
+  "██  ██    ███    ██    ██   ",
+  "██   ███   ███████   ██████",
+];
+
+const VERSION = "v0.1.0";
+
+// 水墨风格渐变色：从淡蓝墨到浓墨
+const GRADIENT_STOPS = [
+  "#778899", // 淡蓝灰（偏向蓝色）
+  "#708090", // 石板灰（主色调）
+  "#5a6a7a", // 中墨色
+  "#4a5a6a", // 浓墨
+  "#3a4a5a", // 最深墨色
+];
+
+function abbreviatePath(path: string, maxLen: number = 24): string {
+  if (path.length <= maxLen) return path;
+  if (path === "/" || path === "~") return path;
+
+  const prefix = path.startsWith("~") ? "~" : "";
+  const cleanPath = path.startsWith("~") ? path.slice(1) : path;
+  const parts = cleanPath.split("/").filter(Boolean);
+
+  if (parts.length <= 1) {
+    return path.length > maxLen ? path.slice(0, maxLen - 1) + "…" : path;
+  }
+
+  // Try keeping tail segments intact, drop leading ones
+  for (let i = 0; i < parts.length; i++) {
+    const tail = parts.slice(i).join("/");
+    const candidate = prefix ? `${prefix}/${tail}` : `/${tail}`;
+    if (candidate.length <= maxLen) {
+      return candidate;
+    }
+  }
+
+  // Even the last segment is too long — truncate it
+  const last = parts[parts.length - 1]!;
+  const abbreviatedLast =
+    last.length > maxLen - 4 ? last.slice(0, maxLen - 4) + "…" : last;
+  return prefix ? `${prefix}/…/${abbreviatedLast}` : `/…/${abbreviatedLast}`;
+}
+
+function FixedWidthText({
+  text,
+  width,
+  fg,
+}: {
+  text: string;
+  width: number;
+  fg?: string;
+}) {
+  const display = text.length <= width ? text : text.slice(0, Math.max(0, width - 1)) + "…";
+  return (
+    <box width={width}>
+      <text fg={fg}>{display}</text>
+    </box>
+  );
+}
+
+const TASK_STATUS_COLORS: Record<string, string> = {
+  pending: "#fbbf24",
+  in_progress: "#00d9ff",
+  completed: "#00ff99",
+};
+
+const SUBAGENT_STATUS_COLORS: Record<string, string> = {
+  running: "#00d9ff",
+  completed: "#00ff99",
+  failed: "#ff6b6b",
+  killed: "#fbbf24",
+};
+
+const MONITOR_STATUS_COLORS: Record<string, string> = {
+  running: "#00d9ff",
+  completed: "#00ff99",
+  error: "#ff6b6b",
+  killed: "#fbbf24",
+};
+
+const MCP_STATUS_COLORS: Record<string, string> = {
+  connected: "#00ff99",
+  failed: "#ff6b6b",
+  disabled: "#fbbf24",
+  disconnected: "#6c6c7c",
+  pending: "#00d9ff",
+};
+
+function Divider({
+  width,
+  char = "─",
+  fg: color = "#9aabb8",
+}: {
+  width: number;
+  char?: string;
+  fg?: string;
+}) {
+  const pattern = char.repeat(width + 1);
+  return (
+    <text fg={color} wrapMode="none" truncate={true}>
+      {pattern.slice(0, width)}
+    </text>
+  );
+}
+
+interface TaskItem {
+  id: string;
+  content: string;
+  status: "pending" | "in_progress" | "completed";
+}
+
+interface SubagentItem {
+  id: string;
+  description: string;
+  status: "running" | "completed" | "failed" | "killed";
+}
+
+interface MonitorItem {
+  id: string;
+  description: string;
+  status: "running" | "completed" | "killed" | "error";
+  lastOutput?: string;
+}
+
+interface SideBarProps {
+  width?: number;
+  workingDir?: string;
+  sessionTitle?: string;
+  modelName?: string;
+  provider?: string;
+  contextUsage?: string;
+  tokenCount?: string;
+  cost?: string;
+  tasks?: TaskItem[];
+  subagents?: SubagentItem[];
+  monitors?: MonitorItem[];
+}
+
+export function SideBar({
+  width = 28,
+  workingDir = "/",
+  sessionTitle = "New Session",
+  modelName = "Not configured",
+  provider = "Use /model to select",
+  contextUsage = "0%",
+  tokenCount = "(0)",
+  cost = "$0.00",
+  tasks = [],
+  subagents = [],
+  monitors = [],
+}: SideBarProps) {
+  const usableWidth = Math.max(1, width - 1);
+
+  const visibleTasks = tasks.slice(0, 12);
+  const hasMoreTasks = tasks.length > visibleTasks.length;
+
+  const visibleSubagents = subagents.slice(0, 8);
+  const hasMoreSubagents = subagents.length > visibleSubagents.length;
+
+  const visibleMonitors = monitors.slice(0, 8);
+  const hasMoreMonitors = monitors.length > visibleMonitors.length;
+
+  return (
+    <box width={width} flexDirection="column" paddingLeft={1}>
+      {/* Top spacer */}
+      <text> </text>
+
+      {/* Row 0: Meowdream (left) + version (right) */}
+      <box width={usableWidth} flexDirection="row" justifyContent="space-between">
+        <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">Meowdream</text>
+        <text fg="#7a8a9a">{VERSION}</text>
+      </box>
+
+      {/* Spacer between header and logo */}
+      <text> </text>
+
+      {/* Divider above logo */}
+      <Divider width={usableWidth} />
+      <Divider width={usableWidth} char="·" fg="#c5cdd5" />
+
+      {/* Rows 1-5: KOI ASCII logo with gradient */}
+      {KOI_LOGO.map((line, i) => {
+        const color = GRADIENT_STOPS[Math.min(i, GRADIENT_STOPS.length - 1)];
+        return (
+          <text key={i} fg={color} wrapMode="none" truncate={true}>
+            {line.slice(0, usableWidth)}
+          </text>
+        );
+      })}
+
+      {/* Divider below logo */}
+      <Divider width={usableWidth} char="·" fg="#c5cdd5" />
+      <Divider width={usableWidth} />
+
+      {/* Spacer */}
+      <text> </text>
+
+      {/* Session title */}
+      <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">{sessionTitle}</text>
+
+      {/* Spacer between session title and directory */}
+      <text> </text>
+
+      {/* Working directory */}
+      <text fg="#8a9aaa">{abbreviatePath(workingDir, usableWidth)}</text>
+
+      {/* Empty row */}
+      <text> </text>
+
+      {/* Model name */}
+      <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">{modelName}</text>
+
+      {/* Provider */}
+      <text fg="#8a9aaa">{provider}</text>
+
+      {/* Context usage + cost */}
+      <text fg="#8a9aaa">{`${contextUsage} ${tokenCount} ${cost}`}</text>
+
+      {/* MCP Servers section - get live data */}
+      {(() => {
+        const mcpSummary = getMcpStatusSummary();
+        const mcpConnections = getMcpConnections();
+        if (mcpSummary.total === 0) return null;
+        return (
+          <>
+            <text> </text>
+            <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">
+              MCP ({mcpSummary.connected}/{mcpSummary.total})
+            </text>
+            {Array.from(mcpConnections.entries()).map(([name, connection]) => {
+              const color = MCP_STATUS_COLORS[connection.status] ?? "#6c6c7c";
+              return (
+                <box key={name} flexDirection="row" gap={1}>
+                  <text fg={color}>●</text>
+                  <FixedWidthText
+                    text={name}
+                    width={Math.max(1, usableWidth - 4)}
+                    fg="#8a9aaa"
+                  />
+                </box>
+              );
+            })}
+          </>
+        );
+      })()}
+
+      {/* Subagents section */}
+      {visibleSubagents.length > 0 && (
+        <>
+          <text> </text>
+          <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">
+            Subagents ({subagents.length})
+          </text>
+          {visibleSubagents.map((sa) => {
+            const color = SUBAGENT_STATUS_COLORS[sa.status] ?? "#fbbf24";
+            return (
+              <box key={sa.id} flexDirection="row" gap={1}>
+                <text fg={color}>●</text>
+                <FixedWidthText
+                  text={sa.description}
+                  width={Math.max(1, usableWidth - 4)}
+                  fg="#8a9aaa"
+                />
+              </box>
+            );
+          })}
+          {hasMoreSubagents && (
+            <text fg="#9aa5b0">
+              {`… and ${subagents.length - visibleSubagents.length} more`}
+            </text>
+          )}
+        </>
+      )}
+
+      {/* Tasks section */}
+      {visibleTasks.length > 0 && (
+        <>
+          <text> </text>
+          <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">
+            Tasks ({tasks.length})
+          </text>
+          {visibleTasks.map((task) => {
+            const color = TASK_STATUS_COLORS[task.status] ?? "#fbbf24";
+            return (
+              <box key={task.id} flexDirection="row" gap={1}>
+                <text fg={color}>●</text>
+                <FixedWidthText
+                  text={task.content}
+                  width={Math.max(1, usableWidth - 4)}
+                  fg="#8a9aaa"
+                />
+              </box>
+            );
+          })}
+          {hasMoreTasks && (
+            <text fg="#9aa5b0">
+              {`… and ${tasks.length - visibleTasks.length} more`}
+            </text>
+          )}
+        </>
+      )}
+
+      {/* Monitors section */}
+      {visibleMonitors.length > 0 && (
+        <>
+          <text> </text>
+          <text attributes={createTextAttributes({ bold: true })} fg="#5a6a7a">
+            Monitors ({monitors.length})
+          </text>
+          {visibleMonitors.map((mon) => {
+            const color = MONITOR_STATUS_COLORS[mon.status] ?? "#fbbf24";
+            const displayText = mon.lastOutput
+              ? `${mon.description}: ${mon.lastOutput.slice(0, 20)}`
+              : mon.description;
+            return (
+              <box key={mon.id} flexDirection="row" gap={1}>
+                <text fg={color}>●</text>
+                <FixedWidthText
+                  text={displayText}
+                  width={Math.max(1, usableWidth - 4)}
+                  fg="#8a9aaa"
+                />
+              </box>
+            );
+          })}
+          {hasMoreMonitors && (
+            <text fg="#9aa5b0">
+              {`… and ${monitors.length - visibleMonitors.length} more`}
+            </text>
+          )}
+        </>
+      )}
+    </box>
+  );
+}

package/src/tui/components/tool-output.ts

@@ -0,0 +1,6 @@
+/**
+ * Tool Output Component
+ *
+ * Displays streamed tool execution results: bash output, file diffs,
+ * and custom tool renderers.
+ */

package/src/tui/hooks/user-prompt-history.ts

@@ -0,0 +1,114 @@
+/**
+ * User Prompt History Hook
+ *
+ * Global, session-independent history for user-sent messages.
+ * Filters out internal notifications (Monitor, background agent messages).
+ * Maximum 100 entries. Persisted to ~/.config/koi/prompt-history.json
+ */
+
+import fs from "fs";
+import path from "path";
+import os from "os";
+
+const MAX_HISTORY_SIZE = 100;
+const HISTORY_FILE = path.join(os.homedir(), ".config", "koi", "prompt-history.json");
+
+// Global shared history - persists across all sessions
+let userPromptHistory: string[] = [];
+
+/**
+ * Get the directory for storing history file.
+ */
+function getHistoryDir(): string {
+  return path.dirname(HISTORY_FILE);
+}
+
+/**
+ * Load history from disk.
+ */
+function loadHistory(): string[] {
+  try {
+    if (fs.existsSync(HISTORY_FILE)) {
+      const data = fs.readFileSync(HISTORY_FILE, "utf-8");
+      const parsed = JSON.parse(data) as unknown;
+      if (Array.isArray(parsed)) {
+        return parsed.slice(0, MAX_HISTORY_SIZE) as string[];
+      }
+    }
+  } catch (_err) {
+    // Ignore errors, return empty array
+  }
+  return [];
+}
+
+/**
+ * Save history to disk.
+ */
+function saveHistory(history: string[]): void {
+  try {
+    const dir = getHistoryDir();
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(HISTORY_FILE, JSON.stringify(history, null, 2), "utf-8");
+  } catch (_err) {
+    // Ignore write errors
+  }
+}
+
+// Load history on module initialization
+userPromptHistory = loadHistory();
+
+/**
+ * Check if a message is an internal notification from Monitor or background agent.
+ * These should not be added to user prompt history.
+ */
+export function isInternalUserMessage(text: string): boolean {
+  const trimmed = text.trimStart();
+  return (
+    trimmed.startsWith("<task-notification>") ||
+    trimmed.startsWith("<monitor-notification>")
+  );
+}
+
+/**
+ * Add a message to the user prompt history.
+ * Only adds if not an internal notification.
+ * Maintains maximum size of 100 entries.
+ */
+export function addToUserHistory(text: string): void {
+  if (isInternalUserMessage(text)) {
+    return;
+  }
+
+  // Avoid duplicates: if the same message is at the top, don't add it again
+  if (userPromptHistory.length > 0 && userPromptHistory[0] === text) {
+    return;
+  }
+
+  // Add to the beginning (most recent first)
+  userPromptHistory.unshift(text);
+
+  // Trim to max size
+  if (userPromptHistory.length > MAX_HISTORY_SIZE) {
+    userPromptHistory = userPromptHistory.slice(0, MAX_HISTORY_SIZE);
+  }
+
+  // Persist to disk
+  saveHistory(userPromptHistory);
+}
+
+/**
+ * Get the entire user prompt history.
+ */
+export function getUserHistory(): readonly string[] {
+  return userPromptHistory;
+}
+
+/**
+ * Clear all user prompt history.
+ */
+export function clearUserHistory(): void {
+  userPromptHistory = [];
+  saveHistory([]);
+}

package/src/tui/theme.ts

@@ -0,0 +1,63 @@
+/**
+ * TUI Theme Configuration
+ *
+ * Color tokens, border styles, and semantic mappings.
+ */
+
+import chalk from "chalk";
+
+// ─── Base Colors ───
+
+export const borderColor = chalk.hex("#4a4a5a");
+export const dimText = chalk.hex("#6c6c7c");
+export const highlightText = chalk.hex("#ff79c6");
+export const agentPrefixColor = chalk.hex("#ff79c6").bold;
+
+// ─── 水墨风渐变 ───
+// 从淡墨到浓墨的渐变色
+
+const gradientStops = [
+  "#8fbc8f", // 淡石绿（远山）
+  "#708090", // 石板灰（主色调）
+  "#5a6a7a", // 中墨色
+  "#4a5a6a", // 浓墨
+  "#3a4a5a", // 最深墨色
+];
+
+export function gradientPinkPurple(text: string, rowIndex: number, totalRows: number): string {
+  if (totalRows <= 1) return chalk.hex(gradientStops[0]!)(text);
+  const t = rowIndex / (totalRows - 1);
+  const idx = Math.min(Math.floor(t * (gradientStops.length - 1)), gradientStops.length - 2);
+  const localT = t * (gradientStops.length - 1) - idx;
+  const stop1 = gradientStops[idx]!;
+  const stop2 = gradientStops[idx + 1]!;
+  const c1 = hexToRgb(stop1);
+  const c2 = hexToRgb(stop2);
+  const r = Math.round(c1.r + (c2.r - c1.r) * localT);
+  const g = Math.round(c1.g + (c2.g - c1.g) * localT);
+  const b = Math.round(c1.b + (c2.b - c1.b) * localT);
+  return chalk.rgb(r, g, b)(text);
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const n = Number.parseInt(hex.slice(1), 16);
+  return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff };
+}
+
+// ─── Sidebar 水墨风配色 ───
+
+export function sidebarTitle(text: string): string {
+  return chalk.hex("#5a6a7a").bold(text);
+}
+
+export function sidebarVersion(text: string): string {
+  return chalk.hex("#7a8a9a")(text);
+}
+
+export function sidebarModelName(text: string): string {
+  return chalk.hex("#5a6a7a")(text);
+}
+
+export function sidebarDim(text: string): string {
+  return chalk.hex("#8a9aaa")(text);
+}

package/src/types/commands.ts

@@ -0,0 +1,80 @@
+/**
+ * Command System Types
+ *
+ * Defines the command interface for Koi's command palette.
+ */
+
+/**
+ * Command context passed to command actions
+ */
+export interface CommandContext {
+  cwd: string;
+  session: unknown;
+  onOpenSkillsModal?: () => void;
+  onOpenMCPSettings?: () => void;
+  onSwitchSession?: () => void;
+  onNewSession?: () => void;
+  onOpenModelModal?: () => void;
+  onOpenConnectModal?: () => void;
+  onFork?: () => void;
+  onCompact?: () => void;
+  onRename?: () => void;
+}
+
+/**
+ * Command action result
+ */
+export interface CommandResult {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * Command definition
+ */
+export interface Command {
+  /** Unique command identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Description shown in command palette */
+  description: string;
+  /** Search keywords */
+  keywords?: string[];
+  /** Command action */
+  action: (context: CommandContext) => Promise<CommandResult> | CommandResult;
+  /** Whether the command requires an active session */
+  requiresSession?: boolean;
+  /** Whether to show in command palette */
+  hidden?: boolean;
+}
+
+/**
+ * Command group for organization
+ */
+export interface CommandGroup {
+  id: string;
+  name: string;
+  commands: Command[];
+}
+
+/**
+ * Built-in command IDs
+ */
+export const BUILTIN_COMMANDS = {
+  SKILLS: "skills",
+  NEW_SESSION: "new-session",
+  FORK: "fork",
+  SESSIONS: "sessions",
+  COMPACT: "compact",
+  RENAME: "rename",
+  CONNECT: "connect",
+  MODEL: "model",
+  MCP: "mcp",
+  YOLO: "yolo",
+  MODE: "mode",
+  PLAN: "plan",
+} as const;
+
+export type BuiltinCommandId = (typeof BUILTIN_COMMANDS)[keyof typeof BUILTIN_COMMANDS];

package/src/types/cross-spawn.d.ts

@@ -0,0 +1,24 @@
+declare module "cross-spawn" {
+  import type { ChildProcess } from "node:child_process";
+
+  interface SpawnOptions {
+    cwd?: string | URL;
+    env?: Record<string, unknown>;
+    argv0?: string;
+    stdio?: "pipe" | "ignore" | "inherit" | Array<"pipe" | "ignore" | "inherit" | "ipc" | number>;
+    shell?: boolean | string;
+    windowsHide?: boolean;
+    windowsVerbatimArguments?: boolean;
+    detached?: boolean;
+    uid?: number;
+    gid?: number;
+  }
+
+  interface SpawnReturns extends ChildProcess {
+    pid: number;
+  }
+
+  function spawn(command: string, args?: string[], options?: SpawnOptions): SpawnReturns;
+
+  export = spawn;
+}