mu-coding 0.13.0 → 0.16.1

package/src/ui/status.ts

@@ -0,0 +1,61 @@
+import type { Component } from 'mu-tui';
+import { truncateToWidth, visibleWidth } from 'mu-tui';
+import type { AgentSessionEvent } from 'mu-harness';
+import { styleToAnsi, type Theme } from './theme';
+
+const RESET = '\x1b[0m';
+const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export const spinnerFrame = (tick: number): string =>
+  SPINNER[((tick % SPINNER.length) + SPINNER.length) % SPINNER.length];
+
+export const formatTokens = (n: number): string =>
+  n >= 1000 ? `${(n / 1000).toFixed(1).replace(/\.0$/, '')}k` : String(Math.round(n));
+
+export interface StatusState {
+  label: string;
+  busy: boolean;
+  spinnerTick: number;
+  context: string;
+}
+
+export function statusFromEvent(event: AgentSessionEvent): string | undefined {
+  switch (event.type) {
+    case 'turn_start':
+      return 'thinking…';
+    case 'reasoning':
+      return 'reasoning…';
+    case 'text':
+      return 'responding…';
+    case 'tool_call':
+      return `calling ${event.name}…`;
+    case 'message':
+      return event.message.role === 'assistant' ? undefined : 'running…';
+    case 'turn_end':
+    case 'done':
+      return 'ready';
+    case 'error':
+      return 'error';
+    default:
+      return undefined;
+  }
+}
+
+export function statusComponent(state: StatusState, theme: Theme): Component {
+  return {
+    render: (s) => {
+      if (s.width <= 0) return;
+      const muted = styleToAnsi(theme.styles.muted);
+      const spinner = `${muted}${spinnerFrame(state.spinnerTick)}${RESET}`;
+      const left = state.busy ? (state.label ? `${spinner} ${muted}${state.label}${RESET}` : spinner) : '';
+      const right = state.context ? `${muted}${state.context}${RESET}` : '';
+      if (!left && !right) {
+        s.text(0, 0, '');
+        return;
+      }
+      const gap = Math.max(1, s.width - visibleWidth(left) - visibleWidth(right));
+      const line = right ? `${left}${' '.repeat(gap)}${right}` : left;
+      s.text(0, 0, visibleWidth(line) > s.width ? truncateToWidth(line, s.width) : line);
+    },
+  };
+}

package/src/ui/theme.ts

@@ -0,0 +1,241 @@
+import type { Color } from 'mu-tui';
+
+export interface TextStyle {
+  fg?: Color;
+  bg?: Color;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}
+
+export interface ThemeColors {
+  background: Color;
+  surface: Color;
+  surfaceMuted: Color;
+  border: Color;
+  text: Color;
+  textMuted: Color;
+  accent: Color;
+  success: Color;
+  warning: Color;
+  danger: Color;
+}
+
+export interface ThemeStyles {
+  body: TextStyle;
+  muted: TextStyle;
+  title: TextStyle;
+  userMessage: TextStyle;
+  assistantMessage: TextStyle;
+  reasoning: TextStyle;
+  commandPaletteItem: TextStyle;
+  commandPaletteHover: TextStyle;
+  commandPaletteSelected: TextStyle;
+  bashPrompt: TextStyle;
+  errorLine: TextStyle;
+  errorPrefix: TextStyle;
+}
+
+export interface Theme {
+  name: string;
+  colors: ThemeColors;
+  styles: ThemeStyles;
+}
+
+export const palette = {
+  neutral: {
+    0: '#ffffff' as Color,
+    50: '#fafafa' as Color,
+    100: '#f4f4f5' as Color,
+    200: '#e4e4e7' as Color,
+    300: '#d4d4d8' as Color,
+    400: '#a1a1aa' as Color,
+    500: '#71717a' as Color,
+    600: '#52525b' as Color,
+    700: '#3f3f46' as Color,
+    800: '#27272a' as Color,
+    900: '#18181b' as Color,
+    925: '#111114' as Color,
+    950: '#0b0b0e' as Color,
+  },
+  blue: { 300: '#93c5fd' as Color, 400: '#60a5fa' as Color, 600: '#2563eb' as Color },
+  red: { 400: '#f87171' as Color, 600: '#dc2626' as Color },
+  green: { 400: '#4ade80' as Color, 600: '#16a34a' as Color, 800: '#2d6a3f' as Color },
+  yellow: { 300: '#f0ae5d' as Color, 400: '#e89b24' as Color, 500: '#c87f12' as Color },
+} as const;
+
+export const darkTheme: Theme = {
+  name: 'dark',
+  colors: {
+    background: palette.neutral[950],
+    surface: palette.neutral[900],
+    surfaceMuted: palette.neutral[800],
+    border: palette.neutral[700],
+    text: palette.neutral[100],
+    textMuted: palette.neutral[400],
+    accent: palette.blue[400],
+    success: palette.green[400],
+    warning: palette.yellow[400],
+    danger: palette.red[400],
+  },
+  styles: {
+    body: { fg: palette.neutral[100] },
+    muted: { fg: palette.neutral[400], dim: true },
+    title: { fg: palette.neutral[0], bold: true },
+    userMessage: { fg: palette.neutral[100], bg: palette.neutral[925] },
+    assistantMessage: { fg: palette.neutral[100] },
+    reasoning: { fg: palette.neutral[400], italic: true },
+    commandPaletteItem: { fg: palette.neutral[100], bg: palette.neutral[900] },
+    commandPaletteHover: { fg: palette.neutral[100], bg: palette.neutral[800] },
+    commandPaletteSelected: { fg: palette.neutral[950], bg: palette.yellow[300], bold: true },
+    bashPrompt: { fg: palette.neutral[0] },
+    errorLine: { fg: palette.neutral[100] },
+    errorPrefix: { fg: palette.red[400], bold: true },
+  },
+};
+
+export const lightTheme: Theme = {
+  name: 'light',
+  colors: {
+    background: palette.neutral[0],
+    surface: palette.neutral[50],
+    surfaceMuted: palette.neutral[100],
+    border: palette.neutral[300],
+    text: palette.neutral[900],
+    textMuted: palette.neutral[600],
+    accent: palette.blue[600],
+    success: palette.green[600],
+    warning: palette.yellow[500],
+    danger: palette.red[600],
+  },
+  styles: {
+    body: { fg: palette.neutral[900] },
+    muted: { fg: palette.neutral[500] },
+    title: { fg: palette.neutral[950], bold: true },
+    userMessage: { fg: palette.neutral[900] },
+    assistantMessage: { fg: palette.neutral[900] },
+    reasoning: { fg: palette.neutral[600], italic: true },
+    commandPaletteItem: { fg: palette.neutral[900], bg: palette.neutral[50] },
+    commandPaletteHover: { fg: palette.neutral[900], bg: palette.neutral[100] },
+    commandPaletteSelected: { fg: palette.neutral[950], bg: palette.yellow[300], bold: true },
+    bashPrompt: { fg: palette.neutral[950] },
+    errorLine: { fg: palette.neutral[900] },
+    errorPrefix: { fg: palette.red[600], bold: true },
+  },
+};
+
+export const themesByName: Record<string, Theme> = { dark: darkTheme, light: lightTheme };
+
+const NAMED_FG: Record<string, string> = {
+  black: '\x1b[30m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  brightBlack: '\x1b[90m',
+  brightRed: '\x1b[91m',
+  brightGreen: '\x1b[92m',
+  brightYellow: '\x1b[93m',
+  brightBlue: '\x1b[94m',
+  brightMagenta: '\x1b[95m',
+  brightCyan: '\x1b[96m',
+  brightWhite: '\x1b[97m',
+};
+
+const NAMED_BG: Record<string, string> = {
+  black: '\x1b[40m',
+  red: '\x1b[41m',
+  green: '\x1b[42m',
+  yellow: '\x1b[43m',
+  blue: '\x1b[44m',
+  magenta: '\x1b[45m',
+  cyan: '\x1b[46m',
+  white: '\x1b[47m',
+  brightBlack: '\x1b[100m',
+  brightRed: '\x1b[101m',
+  brightGreen: '\x1b[102m',
+  brightYellow: '\x1b[103m',
+  brightBlue: '\x1b[104m',
+  brightMagenta: '\x1b[105m',
+  brightCyan: '\x1b[106m',
+  brightWhite: '\x1b[107m',
+};
+
+function hexToRgb(hex: string): [number, number, number] | undefined {
+  let h = hex.startsWith('#') ? hex.slice(1) : hex;
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (h.length !== 6) return undefined;
+  const value = Number.parseInt(h, 16);
+  if (!Number.isFinite(value)) return undefined;
+  return [(value >> 16) & 0xff, (value >> 8) & 0xff, value & 0xff];
+}
+
+export function fgToAnsi(color: Color): string {
+  if (color.startsWith('#')) {
+    const rgb = hexToRgb(color);
+    return rgb ? `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m` : '';
+  }
+  return NAMED_FG[color] ?? '';
+}
+
+export function bgToAnsi(color: Color): string {
+  if (color.startsWith('#')) {
+    const rgb = hexToRgb(color);
+    return rgb ? `\x1b[48;2;${rgb[0]};${rgb[1]};${rgb[2]}m` : '';
+  }
+  return NAMED_BG[color] ?? '';
+}
+
+export function styleToAnsi(style: TextStyle): string {
+  let out = '';
+  if (style.bold) out += '\x1b[1m';
+  if (style.dim) out += '\x1b[2m';
+  if (style.italic) out += '\x1b[3m';
+  if (style.underline) out += '\x1b[4m';
+  if (style.fg) out += fgToAnsi(style.fg);
+  if (style.bg) out += bgToAnsi(style.bg);
+  return out;
+}
+
+export function asHexColor(value: string | undefined): `#${string}` | undefined {
+  if (value && value.startsWith('#')) return value as `#${string}`;
+  return undefined;
+}
+
+export type ThemeSubscriber = (theme: Theme) => void;
+
+export class ThemeProvider {
+  private theme: Theme;
+  private readonly subscribers = new Set<ThemeSubscriber>();
+
+  constructor(initial: Theme) {
+    this.theme = initial;
+  }
+
+  current(): Theme {
+    return this.theme;
+  }
+
+  setTheme(next: Theme): void {
+    if (this.theme === next) return;
+    this.theme = next;
+    for (const subscriber of this.subscribers) {
+      try {
+        subscriber(next);
+      } catch {
+        // a faulty subscriber must not break theme switching
+      }
+    }
+  }
+
+  subscribe(fn: ThemeSubscriber): () => void {
+    this.subscribers.add(fn);
+    return () => {
+      this.subscribers.delete(fn);
+    };
+  }
+}

package/src/ui/transcript.test.ts

@@ -0,0 +1,121 @@
+import { expect } from '@std/expect';
+import { describe, it } from '@std/testing/bdd';
+import type { AgentSessionEvent } from 'mu-harness';
+import type { Message } from 'mu-core';
+import { formatToolArgs, Transcript } from './transcript';
+
+const userMsg = (text: string): Message => ({ role: 'user', content: [{ type: 'text', text }] });
+
+describe('Transcript', () => {
+  it('builds the streamed user + assistant entries from the events', () => {
+    const t = new Transcript();
+    t.appendUser('hi');
+    const events: AgentSessionEvent[] = [
+      { type: 'turn_start', input: userMsg('hi') },
+      { type: 'text', text: 'Hello ' },
+      { type: 'text', text: 'world' },
+      { type: 'message', message: { role: 'assistant', content: [{ type: 'text', text: 'Hello world' }] } },
+      { type: 'turn_end' },
+    ];
+    for (const event of events) t.applyEvent(event);
+
+    expect(t.entries.length).toBe(2);
+    expect(t.entries[0]).toEqual({ kind: 'user', text: 'hi' });
+    expect(t.entries[1]).toEqual({ kind: 'assistant', text: 'Hello world' });
+  });
+
+  it('accumulates streamed reasoning into a reasoning entry before the response', () => {
+    const t = new Transcript();
+    t.appendUser('hi');
+    const events: AgentSessionEvent[] = [
+      { type: 'turn_start', input: userMsg('hi') },
+      { type: 'reasoning', text: 'Let me ' },
+      { type: 'reasoning', text: 'think.' },
+      { type: 'text', text: 'Hello' },
+      { type: 'message', message: { role: 'assistant', content: [{ type: 'text', text: 'Hello' }] } },
+      { type: 'turn_end' },
+    ];
+    for (const event of events) t.applyEvent(event);
+
+    expect(t.entries.map((e) => e.kind)).toEqual(['user', 'reasoning', 'assistant']);
+    const reasoning = t.entries[1];
+    expect(reasoning.kind === 'reasoning' && reasoning.text).toBe('Let me think.');
+  });
+
+  it('records the tool calls but hides the raw tool results in the transcript', () => {
+    const t = new Transcript();
+    t.appendUser('read it');
+    t.applyEvent({ type: 'turn_start', input: userMsg('read it') });
+    t.applyEvent({ type: 'tool_call', id: 'c1', name: 'read', input: { path: 'a.ts' } });
+    t.applyEvent({
+      type: 'message',
+      message: { role: 'assistant', content: [{ type: 'tool_call', id: 'c1', name: 'read', input: { path: 'a.ts' } }] },
+    });
+    t.applyEvent({
+      type: 'message',
+      message: {
+        role: 'user',
+        content: [{ type: 'tool_result', id: 'c1', content: [{ type: 'text', text: 'line 1\nline 2' }] }],
+      },
+    });
+
+    const kinds = t.entries.map((e) => e.kind);
+    expect(kinds).toEqual(['user', 'tool_call']);
+    const call = t.entries[1];
+    expect(call.kind === 'tool_call' && call.name).toBe('read');
+  });
+
+  it('initializes from an existing message list, ignoring the system message', () => {
+    const t = new Transcript();
+    t.seed([
+      { role: 'system', content: [{ type: 'text', text: 'sys' }] },
+      userMsg('hey'),
+      { role: 'assistant', content: [{ type: 'text', text: 'yo' }] },
+    ]);
+    expect(t.entries).toEqual([
+      { kind: 'user', text: 'hey' },
+      { kind: 'assistant', text: 'yo' },
+    ]);
+  });
+
+  it('formats the tool arguments according to the tool', () => {
+    expect(formatToolArgs('read', { path: 'src/a.ts' })).toBe('src/a.ts');
+    expect(formatToolArgs('bash', { cmd: 'ls -la' })).toBe('ls -la');
+    expect(formatToolArgs('subagent', { agent: 'reviewer', task: 'x' })).toBe('reviewer');
+  });
+
+  it('suppresses the live subagent tool line (the card replaces it)', () => {
+    const t = new Transcript();
+    t.appendUser('delegate');
+    t.applyEvent({ type: 'turn_start', input: userMsg('delegate') });
+    t.applyEvent({ type: 'tool_call', id: 'c1', name: 'subagent', input: { agent: 'reviewer', task: 'x' } });
+    expect(t.entries.map((e) => e.kind)).toEqual(['user']);
+  });
+
+  it('tracks a sub-agent run through its handle (tools, then result)', () => {
+    const t = new Transcript();
+    const handle = t.appendSubAgent('reviewer');
+    const entry = t.entries[0];
+    expect(entry.kind === 'subagent' && entry.status).toBe('running');
+
+    handle.addTool('bash ls');
+    handle.addTool('read a.ts');
+    expect(entry.kind === 'subagent' && entry.tools).toBe(2);
+    expect(entry.kind === 'subagent' && entry.activity).toBe('read a.ts');
+    expect(entry.kind === 'subagent' && entry.log).toEqual(['bash ls', 'read a.ts']);
+
+    handle.finish('all good');
+    expect(entry.kind === 'subagent' && entry.status).toBe('done');
+    expect(entry.kind === 'subagent' && entry.result).toBe('all good');
+    expect(entry.kind === 'subagent' && entry.activity).toBe('');
+  });
+
+  it('marks a failed sub-agent run as an error with its message', () => {
+    const t = new Transcript();
+    const handle = t.appendSubAgent('reviewer');
+    handle.fail('boom');
+    const entry = t.entries[0];
+    expect(entry.kind === 'subagent' && entry.status).toBe('error');
+    expect(entry.kind === 'subagent' && entry.result).toBe('boom');
+  });
+});