mu-coding 0.4.0 → 0.8.0

package/src/tui/{services/uiService.ts → plugins/InkUIService.ts}

@@ -1,3 +1,5 @@
+import type { UIService } from 'mu-core';
+
 export type DialogType = 'confirm' | 'select' | 'input';
 
 export interface DialogRequest {
@@ -17,32 +19,44 @@ export interface ToastRequest {
 
 let nextDialogId = 0;
 
+type ToastListener = (toast: ToastRequest) => void;
+type StatusListener = (entries: Map<string, string>) => void;
+
 /**
- * InkUIService bridges plugin UI requests with ink's React rendering.
+ * InkUIService bridges plugin UI requests with Ink's React rendering.
+ *
+ * All event channels (dialogs, toasts, status) follow the same multi-listener
+ * pattern: `subscribe`/`onToast`/`onStatusChange` return an unsubscribe
+ * function. This lets multiple components observe the same service safely
+ * (e.g. during hot-reload or component swaps) without one handler clobbering
+ * another.
  *
- * Dialog methods (confirm, select, input) push requests into a queue.
- * The TUI's DialogLayer component consumes the queue and renders appropriate modals.
- * When the user interacts, the promise is resolved.
+ * Toasts emitted before any listener subscribes are buffered and replayed
+ * to the first subscriber; this avoids losing plugin-load errors emitted
+ * before the TUI mounts.
  *
- * This class implements the same shape as mu-pi-compat's UIService interface
- * via structural typing — no import needed.
+ * Implements `UIService` from `mu-agents` — gives nominal typing so a
+ * change on either side fails the build.
  */
-export class InkUIService {
+export class InkUIService implements UIService {
   private dialogQueue: DialogRequest[] = [];
-  private subscribers: Set<() => void> = new Set();
-  private toastCallback: ((toast: ToastRequest) => void) | null = null;
+  private dialogSubscribers: Set<() => void> = new Set();
+  private toastListeners: Set<ToastListener> = new Set();
+  private pendingToasts: ToastRequest[] = [];
   private statusMap: Map<string, string> = new Map();
-  private statusCallback: ((entries: Map<string, string>) => void) | null = null;
+  private statusListeners: Set<StatusListener> = new Set();
 
-  // ─── Subscription (used by React hooks) ─────────────────────────────────
+  // ─── Dialog Subscription (used by DialogLayer) ──────────────────────────
 
   subscribe(fn: () => void): () => void {
-    this.subscribers.add(fn);
-    return () => this.subscribers.delete(fn);
+    this.dialogSubscribers.add(fn);
+    return () => {
+      this.dialogSubscribers.delete(fn);
+    };
   }
 
-  private notifySubscribers(): void {
-    for (const fn of this.subscribers) {
+  private notifyDialogSubscribers(): void {
+    for (const fn of this.dialogSubscribers) {
       fn();
     }
   }
@@ -57,7 +71,7 @@ export class InkUIService {
     const dialog = this.dialogQueue.shift();
     if (dialog) {
       dialog.resolve(value);
-      this.notifySubscribers();
+      this.notifyDialogSubscribers();
     }
   }
 
@@ -66,27 +80,44 @@ export class InkUIService {
     const dialog = this.dialogQueue.shift();
     if (dialog) {
       dialog.resolve(dialog.type === 'confirm' ? false : null);
-      this.notifySubscribers();
+      this.notifyDialogSubscribers();
     }
   }
 
   // ─── Toast ──────────────────────────────────────────────────────────────
 
-  private pendingToasts: ToastRequest[] = [];
-
-  onToast(callback: (toast: ToastRequest) => void): void {
-    this.toastCallback = callback;
-    // Flush any toasts that fired before the TUI mounted
-    for (const toast of this.pendingToasts) {
-      callback(toast);
+  /**
+   * Subscribe to toast events. Returns an unsubscribe function. If toasts
+   * were emitted before any listener attached, they are replayed to the
+   * first subscriber once.
+   */
+  onToast(callback: ToastListener): () => void {
+    this.toastListeners.add(callback);
+    if (this.pendingToasts.length > 0) {
+      const buffered = this.pendingToasts;
+      this.pendingToasts = [];
+      for (const toast of buffered) {
+        callback(toast);
+      }
     }
-    this.pendingToasts = [];
+    return () => {
+      this.toastListeners.delete(callback);
+    };
   }
 
   // ─── Status ─────────────────────────────────────────────────────────────
 
-  onStatusChange(callback: (entries: Map<string, string>) => void): void {
-    this.statusCallback = callback;
+  onStatusChange(callback: StatusListener): () => void {
+    this.statusListeners.add(callback);
+    return () => {
+      this.statusListeners.delete(callback);
+    };
+  }
+
+  private emitStatus(): void {
+    for (const fn of this.statusListeners) {
+      fn(this.statusMap);
+    }
   }
 
   getStatusEntries(): Map<string, string> {
@@ -97,10 +128,12 @@ export class InkUIService {
 
   notify(message: string, level?: 'info' | 'success' | 'warning' | 'error'): void {
     const toast: ToastRequest = { message, level: level ?? 'info' };
-    if (this.toastCallback) {
-      this.toastCallback(toast);
-    } else {
+    if (this.toastListeners.size === 0) {
       this.pendingToasts.push(toast);
+      return;
+    }
+    for (const listener of this.toastListeners) {
+      listener(toast);
     }
   }
 
@@ -113,7 +146,7 @@ export class InkUIService {
         message,
         resolve: resolve as (value: unknown) => void,
       });
-      this.notifySubscribers();
+      this.notifyDialogSubscribers();
     });
   }
 
@@ -126,7 +159,7 @@ export class InkUIService {
         options,
         resolve: resolve as (value: unknown) => void,
       });
-      this.notifySubscribers();
+      this.notifyDialogSubscribers();
     });
   }
 
@@ -139,17 +172,17 @@ export class InkUIService {
         placeholder,
         resolve: resolve as (value: unknown) => void,
       });
-      this.notifySubscribers();
+      this.notifyDialogSubscribers();
     });
   }
 
   setStatus(key: string, text: string): void {
     this.statusMap.set(key, text);
-    this.statusCallback?.(this.statusMap);
+    this.emitStatus();
   }
 
   clearStatus(key: string): void {
     this.statusMap.delete(key);
-    this.statusCallback?.(this.statusMap);
+    this.emitStatus();
   }
 }

package/src/tui/renderApp.tsx

@@ -0,0 +1,43 @@
+import { type Instance, render } from 'ink';
+import type { ChatMessage, PluginRegistry } from 'mu-core';
+import type { ShutdownFn } from '../app/shutdown';
+import type { AppConfig } from '../config/index';
+import type { HostMessageBus } from '../runtime/messageBus';
+import { ChatPanel } from './components/chat/ChatPanel';
+import { ThemeProvider } from './context/ThemeContext';
+import type { InkUIService } from './plugins/InkUIService';
+import { resolveTheme } from './theme';
+
+interface RenderAppOptions {
+  config: AppConfig;
+  initialMessages?: ChatMessage[];
+  registry: PluginRegistry;
+  messageBus: HostMessageBus;
+  uiService: InkUIService;
+  shutdown: ShutdownFn;
+}
+
+/**
+ * Renders the chat TUI and returns the Ink `Instance` so callers (the TUI
+ * channel, tests) can unmount it explicitly. Ink stays mounted until the
+ * caller invokes `instance.unmount()` or the process exits.
+ */
+export function renderApp(options: RenderAppOptions): Instance {
+  const theme = resolveTheme(options.config.theme);
+  return render(
+    <ThemeProvider theme={theme}>
+      <ChatPanel
+        config={options.config}
+        initialMessages={options.initialMessages}
+        registry={options.registry}
+        messageBus={options.messageBus}
+        uiService={options.uiService}
+        shutdown={options.shutdown}
+      />
+    </ThemeProvider>,
+    {
+      exitOnCtrlC: false,
+      kittyKeyboard: { mode: 'enabled' },
+    },
+  );
+}

package/src/tui/theme/index.ts

@@ -0,0 +1 @@
+export { resolveTheme } from './merge';

package/src/tui/theme/merge.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'bun:test';
+import { mergeTheme, resolveTheme } from './merge';
+import { DEFAULT_THEME } from './presets';
+
+describe('mergeTheme', () => {
+  it('returns the base theme untouched when no override is provided', () => {
+    expect(mergeTheme(DEFAULT_THEME)).toBe(DEFAULT_THEME);
+  });
+
+  it('merges leaf overrides without dropping siblings', () => {
+    const merged = mergeTheme(DEFAULT_THEME, { input: { cursor: '#ff00ff' } });
+    expect(merged.input.cursor).toBe('#ff00ff');
+    expect(merged.input.background).toBe(DEFAULT_THEME.input.background);
+    expect(merged.user).toEqual(DEFAULT_THEME.user);
+  });
+
+  it('does not mutate the base theme', () => {
+    const before = DEFAULT_THEME.input.cursor;
+    mergeTheme(DEFAULT_THEME, { input: { cursor: '#000000' } });
+    expect(DEFAULT_THEME.input.cursor).toBe(before);
+  });
+
+  it('ignores non-object sections defensively', () => {
+    // biome-ignore lint/suspicious/noExplicitAny: testing malformed user input on purpose
+    const merged = mergeTheme(DEFAULT_THEME, { input: 'red' as any });
+    expect(merged.input).toEqual(DEFAULT_THEME.input);
+  });
+});
+
+describe('resolveTheme', () => {
+  it('returns the default theme when config is undefined', () => {
+    expect(resolveTheme(undefined)).toBe(DEFAULT_THEME);
+  });
+
+  it('applies overrides on top of the default theme', () => {
+    const theme = resolveTheme({ user: { border: 'magenta' } });
+    expect(theme.user.border).toBe('magenta');
+    expect(theme.input).toEqual(DEFAULT_THEME.input);
+  });
+
+  it('returns default for non-object input', () => {
+    // biome-ignore lint/suspicious/noExplicitAny: malformed value
+    expect(resolveTheme(42 as any)).toBe(DEFAULT_THEME);
+    // biome-ignore lint/suspicious/noExplicitAny: malformed value
+    expect(resolveTheme(null as any)).toBe(DEFAULT_THEME);
+    // biome-ignore lint/suspicious/noExplicitAny: string presets are no longer supported
+    expect(resolveTheme('dark' as any)).toBe(DEFAULT_THEME);
+  });
+});

package/src/tui/theme/merge.ts

@@ -0,0 +1,43 @@
+import { DEFAULT_THEME } from './presets';
+import type { PartialTheme, Theme, ThemeConfig } from './types';
+
+/**
+ * Two-level deep merge tailored to the `Theme` shape: each top-level key maps
+ * to an object of color leaves (strings), so we never need recursion beyond
+ * one nesting level. Keeping it flat avoids accidentally merging into nested
+ * structures users haven't opted into and also avoids `any`/recursion that
+ * would trip Biome's complexity rules.
+ */
+function mergeTheme(base: Theme, override?: PartialTheme): Theme {
+  if (!override) return base;
+  const out: Theme = { ...base };
+  const keys = Object.keys(override) as (keyof Theme)[];
+  for (const key of keys) {
+    mergeSection(out, base, override, key);
+  }
+  return out;
+}
+
+function mergeSection<K extends keyof Theme>(out: Theme, base: Theme, override: PartialTheme, key: K): void {
+  const section = override[key];
+  if (section && typeof section === 'object') {
+    out[key] = { ...base[key], ...section };
+  }
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Resolve the user-supplied `theme` field from config.json into a fully
+ * populated `Theme`. Tolerates malformed input (wrong type) by silently
+ * falling back to the default — config corruption should never crash the TUI.
+ */
+export function resolveTheme(config: ThemeConfig | undefined): Theme {
+  if (config === undefined) return DEFAULT_THEME;
+  if (!isPlainObject(config)) return DEFAULT_THEME;
+  return mergeTheme(DEFAULT_THEME, config as PartialTheme);
+}
+
+export { mergeTheme };

package/src/tui/theme/presets.ts

@@ -0,0 +1,79 @@
+import type { Theme } from './types';
+
+/**
+ * The single built-in theme. Reproduces the exact hard-coded colors that
+ * lived inline in the components prior to the theme extraction — using it
+ * must be a visual no-op. Users may still override individual leaves via
+ * the `theme` field in their config.
+ */
+export const DEFAULT_THEME: Theme = {
+  input: {
+    background: '#222222',
+    text: 'white',
+    cursor: 'white',
+    commandHighlight: 'green',
+    footerHint: 'gray',
+    attachmentName: 'cyan',
+    attachmentError: 'red',
+    modelLabel: 'white',
+  },
+  user: {
+    background: '#1a1a1a',
+    border: 'yellow',
+    attachment: 'cyan',
+  },
+  assistant: {
+    text: 'white',
+  },
+  tool: {
+    success: 'green',
+    error: 'red',
+    previewBackground: '#111111',
+    previewText: 'white',
+    summaryDim: 'gray',
+    warning: 'yellow',
+  },
+  reasoning: {
+    title: 'yellow',
+    body: 'gray',
+  },
+  modal: {
+    background: '#1a1a1a',
+    hint: 'gray',
+  },
+  toast: {
+    background: '#1a1a1a',
+    defaultColor: 'green',
+    closeHint: 'gray',
+  },
+  dropdown: {
+    selected: 'green',
+    description: 'gray',
+    placeholder: 'gray',
+    cursor: 'white',
+    empty: 'gray',
+  },
+  dialog: {
+    confirmYes: 'green',
+    confirmNo: 'red',
+    hint: 'gray',
+    cursor: 'white',
+    placeholder: 'gray',
+  },
+  diff: {
+    added: 'green',
+    removed: 'red',
+    context: 'gray',
+    warning: 'yellow',
+  },
+  status: {
+    separator: 'gray',
+  },
+  common: {
+    error: 'red',
+    warning: 'yellow',
+    success: 'green',
+    accent: 'cyan',
+    info: 'blue',
+  },
+};

package/src/tui/theme/types.ts

@@ -0,0 +1,116 @@
+// Theme type definitions. Kept free of any Ink import so the type can travel
+// to `config/index.ts` without dragging the renderer into the config layer.
+//
+// Color values are plain strings: either an Ink-supported color name
+// ("red", "cyan", "yellow"...) or a hex code ("#1a1a1a"). All optional fields
+// in `PartialTheme` mirror this so users can override one leaf at a time
+// without having to redeclare a full theme.
+
+interface ThemeInput {
+  background: string;
+  text: string;
+  cursor: string;
+  commandHighlight: string;
+  footerHint: string;
+  attachmentName: string;
+  attachmentError: string;
+  modelLabel: string;
+}
+
+interface ThemeUser {
+  background: string;
+  border: string;
+  attachment: string;
+}
+
+interface ThemeAssistant {
+  text: string;
+}
+
+interface ThemeTool {
+  success: string;
+  error: string;
+  previewBackground: string;
+  previewText: string;
+  summaryDim: string;
+  warning: string;
+}
+
+interface ThemeReasoning {
+  title: string;
+  body: string;
+}
+
+interface ThemeModal {
+  background: string;
+  hint: string;
+}
+
+interface ThemeToast {
+  background: string;
+  defaultColor: string;
+  closeHint: string;
+}
+
+interface ThemeDropdown {
+  selected: string;
+  description: string;
+  placeholder: string;
+  cursor: string;
+  empty: string;
+}
+
+interface ThemeDialog {
+  confirmYes: string;
+  confirmNo: string;
+  hint: string;
+  cursor: string;
+  placeholder: string;
+}
+
+interface ThemeDiff {
+  added: string;
+  removed: string;
+  context: string;
+  warning: string;
+}
+
+interface ThemeStatus {
+  separator: string;
+}
+
+interface ThemeCommon {
+  error: string;
+  warning: string;
+  success: string;
+  accent: string;
+  info: string;
+}
+
+export interface Theme {
+  input: ThemeInput;
+  user: ThemeUser;
+  assistant: ThemeAssistant;
+  tool: ThemeTool;
+  reasoning: ThemeReasoning;
+  modal: ThemeModal;
+  toast: ThemeToast;
+  dropdown: ThemeDropdown;
+  dialog: ThemeDialog;
+  diff: ThemeDiff;
+  status: ThemeStatus;
+  common: ThemeCommon;
+}
+
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+export type PartialTheme = DeepPartial<Theme>;
+
+/**
+ * Shape stored in `~/.config/mu/config.json` under the `theme` key. An object
+ * with per-leaf overrides on top of the default theme. Kept loose on purpose:
+ * malformed input falls back to the default theme rather than throwing.
+ */
+export type ThemeConfig = PartialTheme;

package/src/utils/clipboard.ts

@@ -0,0 +1,97 @@
+import { execFileSync, execSync } from 'node:child_process';
+import { existsSync, readFileSync, statSync, unlinkSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import type { ImageAttachment } from 'mu-core';
+
+const CLIPBOARD_TIMEOUT = 3000;
+
+function tryExecFile(file: string, args: string[]): boolean {
+  try {
+    execFileSync(file, args, { stdio: 'pipe', timeout: CLIPBOARD_TIMEOUT });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function tryShell(command: string): boolean {
+  try {
+    execSync(command, { stdio: 'pipe', timeout: CLIPBOARD_TIMEOUT });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function commandExists(name: string): boolean {
+  return tryExecFile('which', [name]);
+}
+
+function extractMacImage(tmpFile: string): boolean {
+  if (commandExists('pngpaste')) {
+    return tryExecFile('pngpaste', [tmpFile]);
+  }
+  // Each `-e` is a discrete script line — passing as separate args avoids shell quoting traps.
+  return tryExecFile('osascript', [
+    '-e',
+    'tell application "System Events"',
+    '-e',
+    'set imgData to the clipboard as «class PNGf»',
+    '-e',
+    `set fp to open for access POSIX file "${tmpFile}" with write permission`,
+    '-e',
+    'write imgData to fp',
+    '-e',
+    'close access fp',
+    '-e',
+    'end tell',
+  ]);
+}
+
+function extractLinuxImage(tmpFile: string): boolean {
+  // xclip / wl-paste write to stdout; redirection still requires a shell.
+  // tmpFile is constructed from tmpdir() + a numeric timestamp, so quoting is safe.
+  if (tryShell(`xclip -selection clipboard -t image/png -o > "${tmpFile}"`)) {
+    return true;
+  }
+  return tryShell(`wl-paste --type image/png > "${tmpFile}"`);
+}
+
+function extractPlatformImage(tmpFile: string): boolean {
+  if (process.platform === 'darwin') {
+    return extractMacImage(tmpFile);
+  }
+  if (process.platform === 'linux') {
+    return extractLinuxImage(tmpFile);
+  }
+  return false;
+}
+
+function readTmpAsAttachment(tmpFile: string): ImageAttachment | null {
+  if (!existsSync(tmpFile)) {
+    return null;
+  }
+  if (statSync(tmpFile).size === 0) {
+    unlinkSync(tmpFile);
+    return null;
+  }
+  const buffer = readFileSync(tmpFile);
+  unlinkSync(tmpFile);
+  return { data: buffer.toString('base64'), mimeType: 'image/png', name: 'clipboard.png' };
+}
+
+export function readClipboardImage(): ImageAttachment | null {
+  const tmpFile = join(tmpdir(), `mu-clip-${Date.now()}.png`);
+  try {
+    if (!extractPlatformImage(tmpFile)) {
+      return null;
+    }
+    return readTmpAsAttachment(tmpFile);
+  } catch {
+    if (existsSync(tmpFile)) {
+      unlinkSync(tmpFile);
+    }
+    return null;
+  }
+}

package/src/utils/diff.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'bun:test';
+import { computeDiff, renderDiff } from './diff';
+
+describe('computeDiff', () => {
+  it('emits only context lines when texts are identical', () => {
+    const diff = computeDiff('a\nb\nc', 'a\nb\nc');
+    expect(diff.lines.every((l) => l.type === 'context')).toBe(true);
+    expect(diff.lines.find((l) => l.type === 'old')).toBeUndefined();
+    expect(diff.lines.find((l) => l.type === 'new')).toBeUndefined();
+    expect(diff.totalOldLines).toBe(3);
+    expect(diff.totalNewLines).toBe(3);
+  });
+
+  it('detects an added line in the middle', () => {
+    const diff = computeDiff('a\nb\nc', 'a\nx\nb\nc');
+    const types = diff.lines.map((l) => l.type);
+    expect(types).toContain('new');
+    expect(diff.lines.find((l) => l.type === 'new')?.value).toBe('x');
+  });
+
+  it('detects a removed line', () => {
+    const diff = computeDiff('a\nb\nc', 'a\nc');
+    expect(diff.lines.find((l) => l.type === 'old')?.value).toBe('b');
+  });
+
+  it('returns no lines when either side exceeds the size limit', () => {
+    const huge = Array.from({ length: 600 }, (_, i) => `line${i}`).join('\n');
+    const diff = computeDiff(huge, huge.replace('line0', 'lineX'));
+    expect(diff.lines).toEqual([]);
+    expect(diff.totalOldLines).toBe(600);
+  });
+
+  it('emits up to CONTEXT_LINES of leading/trailing context', () => {
+    const diff = computeDiff('a\nb\nc\nd\ne', 'a\nb\nc\nX\ne');
+    const contextValues = diff.lines.filter((l) => l.type === 'context').map((l) => l.value);
+    expect(contextValues).toContain('c');
+    expect(contextValues).toContain('e');
+  });
+});
+
+describe('renderDiff', () => {
+  it('prefixes added/removed/context lines and reports truncation', () => {
+    const diff = computeDiff('a\nb', 'a\nc');
+    const { lines, truncated } = renderDiff(diff, 100);
+    expect(lines.some((l) => l.startsWith('-'))).toBe(true);
+    expect(lines.some((l) => l.startsWith('+'))).toBe(true);
+    expect(truncated).toBe(false);
+  });
+
+  it('reports truncated when diff exceeds maxLines', () => {
+    const diff = computeDiff('a', Array.from({ length: 50 }, (_, i) => `n${i}`).join('\n'));
+    const { lines, truncated } = renderDiff(diff, 5);
+    expect(lines).toHaveLength(5);
+    expect(truncated).toBe(true);
+  });
+});