mu-coding 0.15.0 → 0.16.1

package/src/ui/commands.ts

@@ -0,0 +1,35 @@
+export interface ChatCommand {
+  name: string;
+  description: string;
+  run: (args: string) => void | Promise<void>;
+}
+
+export interface CommandHost {
+  newSession(): void;
+  openModelPicker(): void;
+  toggleExpand(): void;
+  toggleThinking(): void;
+  exportContext(args: string): void | Promise<void>;
+  quit(): void;
+}
+
+export function buildCommands(host: CommandHost): ChatCommand[] {
+  return [
+    { name: 'new', description: 'start a new session', run: () => host.newSession() },
+    { name: 'model', description: 'switch the active model', run: () => host.openModelPicker() },
+    { name: 'thinking', description: 'expand/collapse reasoning blocks', run: () => host.toggleThinking() },
+    { name: 'expand', description: 'toggle output block expansion', run: () => host.toggleExpand() },
+    {
+      name: 'context-export',
+      description: 'export the conversation to a JSON file',
+      run: (args) => host.exportContext(args),
+    },
+    { name: 'quit', description: 'exit mu', run: () => host.quit() },
+  ];
+}
+
+export function filterCommands(commands: ChatCommand[], value: string, dismissedFor: string): ChatCommand[] {
+  if (!value.startsWith('/') || value.includes(' ') || value === dismissedFor) return [];
+  const query = value.slice(1).toLowerCase();
+  return commands.filter((command) => command.name.toLowerCase().startsWith(query));
+}

package/src/ui/editor.ts

@@ -0,0 +1,166 @@
+import type { Component, InputEvent, KeyInputEvent, Surface } from 'mu-tui';
+import { truncateToWidth, visibleWidth } from 'mu-tui';
+
+export interface MultilineEditorOptions {
+  placeholder?: string;
+  maxRows?: number;
+  onSubmit?: (value: string) => void;
+  onChange?: (value: string) => void;
+}
+
+const CURSOR = '\x1b[7m';
+const RESET = '\x1b[0m';
+const DIM = '\x1b[2m';
+
+export class MultilineEditor implements Component {
+  private value = '';
+  private cursor = 0;
+  private readonly placeholder: string;
+  private readonly maxRows: number;
+  hiddenPrefix = '';
+  onSubmit?: (value: string) => void;
+  onChange?: (value: string) => void;
+
+  constructor(opts: MultilineEditorOptions = {}) {
+    this.placeholder = opts.placeholder ?? '';
+    this.maxRows = opts.maxRows ?? 7;
+    this.onSubmit = opts.onSubmit;
+    this.onChange = opts.onChange;
+  }
+
+  getValue(): string {
+    return this.value;
+  }
+
+  setValue(value: string): void {
+    this.value = value;
+    if (this.cursor > value.length) this.cursor = value.length;
+    this.onChange?.(value);
+  }
+
+  get cursorPos(): number {
+    return this.cursor;
+  }
+
+  setCursor(n: number): void {
+    this.cursor = Math.max(0, Math.min(n, this.value.length));
+  }
+
+  rows(): number {
+    return Math.min(this.maxRows, Math.max(1, this.value.split('\n').length));
+  }
+
+  handleInput(event: InputEvent): void {
+    if (event.type === 'paste') {
+      this.insert(event.text);
+      return;
+    }
+    if (event.type === 'text') {
+      this.insert(event.text);
+      return;
+    }
+    if (event.type !== 'key' || event.kind === 'release') return;
+    this.handleKey(event);
+  }
+
+  private handleKey(event: KeyInputEvent): void {
+    switch (event.key) {
+      case 'enter':
+        if (event.ctrl || event.shift) this.insert('\n');
+        else this.onSubmit?.(this.value);
+        return;
+      case 'backspace':
+        this.backspace();
+        return;
+      case 'delete':
+        this.deleteForward();
+        return;
+      case 'left':
+        this.cursor = Math.max(0, this.cursor - 1);
+        return;
+      case 'right':
+        this.cursor = Math.min(this.value.length, this.cursor + 1);
+        return;
+      case 'home':
+        this.cursor = this.lineStart();
+        return;
+      case 'end':
+        this.cursor = this.lineEnd();
+        return;
+      default:
+        if (event.text && !event.ctrl && !event.meta && !event.alt) this.insert(event.text);
+    }
+  }
+
+  private lineStart(): number {
+    return this.value.lastIndexOf('\n', this.cursor - 1) + 1;
+  }
+
+  private lineEnd(): number {
+    const next = this.value.indexOf('\n', this.cursor);
+    return next === -1 ? this.value.length : next;
+  }
+
+  private insert(text: string): void {
+    this.value = this.value.slice(0, this.cursor) + text + this.value.slice(this.cursor);
+    this.cursor += text.length;
+    this.onChange?.(this.value);
+  }
+
+  private backspace(): void {
+    if (this.cursor === 0) return;
+    this.value = this.value.slice(0, this.cursor - 1) + this.value.slice(this.cursor);
+    this.cursor -= 1;
+    this.onChange?.(this.value);
+  }
+
+  private deleteForward(): void {
+    if (this.cursor >= this.value.length) return;
+    this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + 1);
+    this.onChange?.(this.value);
+  }
+
+  private cursorRowCol(lines: string[], cursor: number): { row: number; col: number } {
+    let remaining = cursor;
+    for (let i = 0; i < lines.length; i++) {
+      if (remaining <= lines[i].length) return { row: i, col: remaining };
+      remaining -= lines[i].length + 1;
+    }
+    return { row: lines.length - 1, col: lines[lines.length - 1]?.length ?? 0 };
+  }
+
+  render(s: Surface): void {
+    const width = s.width;
+    if (width <= 0) return;
+
+    const hidden = this.hiddenPrefix !== '' && this.value.startsWith(this.hiddenPrefix);
+    const value = hidden ? this.value.slice(1) : this.value;
+    const cursorIdx = hidden ? Math.max(0, this.cursor - 1) : this.cursor;
+
+    if (value.length === 0 && this.placeholder && !s.focused) {
+      const ph = visibleWidth(this.placeholder) > width ? truncateToWidth(this.placeholder, width) : this.placeholder;
+      s.text(0, 0, `${DIM}${ph}${RESET}`);
+      return;
+    }
+
+    const lines = value.split('\n');
+    const { row: cr, col: cc } = this.cursorRowCol(lines, cursorIdx);
+    const height = Math.max(1, s.height);
+    const top = cr >= height ? cr - height + 1 : 0;
+
+    for (let r = 0; r < height && top + r < lines.length; r++) {
+      const line = lines[top + r];
+      if (top + r === cr && s.focused) {
+        const hscroll = cc >= width ? cc - width + 1 : 0;
+        const visible = line.slice(hscroll, hscroll + width);
+        const col = cc - hscroll;
+        const before = visible.slice(0, col);
+        const at = visible.slice(col, col + 1) || ' ';
+        const after = visible.slice(col + 1);
+        s.text(0, r, `${before}${CURSOR}${at}${RESET}${after}`);
+      } else {
+        s.text(0, r, line.length > width ? line.slice(0, width) : line);
+      }
+    }
+  }
+}

package/src/ui/markdown.ts

@@ -0,0 +1,363 @@
+import { type Component, truncateToWidth, visibleWidth, wrapText } from 'mu-tui';
+import { styleToAnsi, type Theme } from './theme';
+
+const RESET = '\x1b[0m';
+const HEADING_RE = /^(#{1,6})\s+(.+)$/;
+const QUOTE_RE = /^>\s?(.*)$/;
+const LIST_RE = /^(\s*)((?:[-*+])|\d+[.)])\s+(.+)$/;
+const INLINE_CODE_RE = /`([^`\n]+)`/g;
+const INLINE_MARKDOWN_RE = /(`([^`\n]+)`|\*\*([^*\n]+)\*\*|__([^_\n]+)__)/g;
+const TABLE_SEPARATOR_RE = /^\s*\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)+\|?\s*$/;
+const FENCE_RE = /^\s*```/;
+
+function stripMarkdown(line: string): string {
+  const heading = HEADING_RE.exec(line);
+  const quote = QUOTE_RE.exec(line);
+  const list = LIST_RE.exec(line);
+  const text = heading ? (heading[2] ?? '') : quote ? (quote[1] ?? '') : list ? `${list[2]} ${list[3]}` : line;
+  return text.replace(INLINE_CODE_RE, '$1').replace(/\*\*([^*\n]+)\*\*|__([^_\n]+)__/g, '$1$2');
+}
+
+function styleSegment(text: string, prefix: string): string {
+  if (!text) return '';
+  return prefix ? `${prefix}${text}${RESET}` : text;
+}
+
+interface StyledSegment {
+  text: string;
+  prefix: string;
+}
+
+function markdownSegments(
+  line: string,
+  textPrefix: string,
+  headingPrefix: string,
+  boldPrefix: string,
+  codePrefix: string,
+): StyledSegment[] {
+  const heading = HEADING_RE.exec(line);
+  const text = heading ? (heading[2] ?? '') : line;
+  const prefix = heading ? headingPrefix : textPrefix;
+  const segments: StyledSegment[] = [];
+  let last = 0;
+  for (const match of text.matchAll(INLINE_MARKDOWN_RE)) {
+    const index = match.index ?? 0;
+    if (index > last) segments.push({ text: text.slice(last, index), prefix });
+    if (match[2] !== undefined) segments.push({ text: match[2], prefix: codePrefix });
+    else segments.push({ text: match[3] ?? match[4] ?? '', prefix: boldPrefix });
+    last = index + match[0].length;
+  }
+  if (last < text.length) segments.push({ text: text.slice(last), prefix });
+  return segments;
+}
+
+interface WrapState {
+  lines: string[];
+  current: string;
+  col: number;
+}
+
+function pushLine(state: WrapState): void {
+  state.lines.push(state.current);
+  state.current = '';
+  state.col = 0;
+}
+
+function appendStyled(state: WrapState, text: string, prefix: string): void {
+  if (!text) return;
+  state.current += styleSegment(text, prefix);
+  state.col += visibleWidth(text);
+}
+
+function appendWrappedToken(state: WrapState, token: string, prefix: string, width: number): void {
+  const tokenWidth = visibleWidth(token);
+  if (tokenWidth === 0) return;
+
+  if (/^\s+$/.test(token)) {
+    if (state.col + tokenWidth <= width) appendStyled(state, token, prefix);
+    else pushLine(state);
+    return;
+  }
+
+  if (tokenWidth <= width) {
+    if (state.col > 0 && state.col + tokenWidth > width) pushLine(state);
+    appendStyled(state, token, prefix);
+    return;
+  }
+
+  if (state.col > 0) pushLine(state);
+  let chunk = '';
+  let chunkWidth = 0;
+  for (const ch of token) {
+    const chWidth = visibleWidth(ch);
+    if (chunkWidth + chWidth > width) {
+      appendStyled(state, chunk, prefix);
+      pushLine(state);
+      chunk = ch;
+      chunkWidth = chWidth;
+    } else {
+      chunk += ch;
+      chunkWidth += chWidth;
+    }
+  }
+  appendStyled(state, chunk, prefix);
+}
+
+function wrapMarkdownLine(
+  line: string,
+  textPrefix: string,
+  headingPrefix: string,
+  quotePrefix: string,
+  markerPrefix: string,
+  boldPrefix: string,
+  codePrefix: string,
+  width: number,
+): string[] {
+  const quote = QUOTE_RE.exec(line);
+  if (quote) {
+    const innerWidth = Math.max(1, width - 2);
+    return wrapMarkdownLine(
+      quote[1] ?? '',
+      quotePrefix,
+      quotePrefix,
+      quotePrefix,
+      quotePrefix,
+      boldPrefix,
+      codePrefix,
+      innerWidth,
+    )
+      .map((wrappedLine) => `${styleSegment('| ', quotePrefix)}${wrappedLine}`);
+  }
+
+  const list = LIST_RE.exec(line);
+  if (list) {
+    const marker = `${list[2]} `;
+    const markerWidth = visibleWidth(marker);
+    const innerWidth = Math.max(1, width - markerWidth);
+    return wrapMarkdownLine(
+      list[3] ?? '',
+      textPrefix,
+      headingPrefix,
+      quotePrefix,
+      markerPrefix,
+      boldPrefix,
+      codePrefix,
+      innerWidth,
+    )
+      .map((wrappedLine, index) => {
+        const prefix = index === 0
+          ? styleSegment(marker, markerPrefix)
+          : styleSegment(' '.repeat(markerWidth), markerPrefix);
+        return `${prefix}${wrappedLine}`;
+      });
+  }
+
+  const state: WrapState = { lines: [], current: '', col: 0 };
+  const segments = markdownSegments(line, textPrefix, headingPrefix, boldPrefix, codePrefix);
+  for (const segment of segments) {
+    for (const token of segment.text.split(/(\s+)/)) {
+      appendWrappedToken(state, token, segment.prefix, width);
+    }
+  }
+  state.lines.push(state.current);
+  return state.lines;
+}
+
+function isTableStart(lines: string[], index: number): boolean {
+  const header = lines[index] ?? '';
+  const separator = lines[index + 1] ?? '';
+  return header.includes('|') && TABLE_SEPARATOR_RE.test(separator);
+}
+
+function splitTableRow(line: string): string[] {
+  return line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((cell) => cell.trim());
+}
+
+function tableColumnWidths(rows: string[][], width: number): number[] {
+  const columnCount = Math.max(0, ...rows.map((row) => row.length));
+  const widths = Array.from({ length: columnCount }, (_, column) => {
+    let max = 1;
+    for (const row of rows) {
+      const cellWidth = visibleWidth(stripMarkdown(row[column] ?? ''));
+      if (cellWidth > max) max = cellWidth;
+    }
+    return max;
+  });
+
+  const separatorWidth = Math.max(0, columnCount - 1) * 3;
+  let total = widths.reduce((sum, value) => sum + value, 0) + separatorWidth;
+  while (total > width && Math.max(...widths) > 3) {
+    const widest = widths.indexOf(Math.max(...widths));
+    widths[widest] -= 1;
+    total -= 1;
+  }
+  return widths;
+}
+
+function renderTableCell(
+  cell: string,
+  width: number,
+  textPrefix: string,
+  boldPrefix: string,
+  codePrefix: string,
+): string {
+  const plain = stripMarkdown(cell);
+  if (visibleWidth(plain) > width) return styleSegment(truncateToWidth(plain, width), textPrefix);
+  const styled = wrapMarkdownLine(
+    cell,
+    textPrefix,
+    textPrefix,
+    textPrefix,
+    textPrefix,
+    boldPrefix,
+    codePrefix,
+    Math.max(1, width),
+  )[0] ?? '';
+  const padding = Math.max(0, width - visibleWidth(plain));
+  return `${styled}${styleSegment(' '.repeat(padding), textPrefix)}`;
+}
+
+function renderTableRow(
+  cells: string[],
+  widths: number[],
+  cellPrefix: string,
+  borderPrefix: string,
+  boldPrefix: string,
+  codePrefix: string,
+): string {
+  return widths.map((columnWidth, index) =>
+    renderTableCell(cells[index] ?? '', columnWidth, cellPrefix, boldPrefix, codePrefix)
+  )
+    .join(styleSegment(' | ', borderPrefix));
+}
+
+function renderTableBlock(
+  lines: string[],
+  start: number,
+  width: number,
+  textPrefix: string,
+  headingPrefix: string,
+  borderPrefix: string,
+  boldPrefix: string,
+  codePrefix: string,
+): { lines: string[]; nextIndex: number } {
+  const header = splitTableRow(lines[start] ?? '');
+  const rows: string[][] = [header];
+  let index = start + 2;
+  while (index < lines.length && lines[index]?.includes('|') && !TABLE_SEPARATOR_RE.test(lines[index] ?? '')) {
+    rows.push(splitTableRow(lines[index] ?? ''));
+    index += 1;
+  }
+
+  const widths = tableColumnWidths(rows, width);
+  const rendered = [
+    renderTableRow(header, widths, headingPrefix, borderPrefix, boldPrefix, codePrefix),
+    styleSegment(widths.map((columnWidth) => '-'.repeat(columnWidth)).join('-+-'), borderPrefix),
+    ...rows.slice(1).map((row) => renderTableRow(row, widths, textPrefix, borderPrefix, boldPrefix, codePrefix)),
+  ];
+  return {
+    lines: rendered.map((line) => (visibleWidth(line) > width ? truncateToWidth(line, width) : line)),
+    nextIndex: index,
+  };
+}
+
+function renderCodeBlock(
+  lines: string[],
+  start: number,
+  width: number,
+  codeBlockPrefix: string,
+  labelPrefix: string,
+): { lines: string[]; nextIndex: number } {
+  const rendered: string[] = [];
+  const fenceLine = lines[start] ?? '';
+  const lang = fenceLine.replace(/^\s*```/, '').trim();
+
+  if (lang) {
+    const label = ` ${lang}`;
+    const padded = visibleWidth(label) > width
+      ? truncateToWidth(label, width)
+      : label + ' '.repeat(Math.max(0, width - visibleWidth(label)));
+    rendered.push(styleSegment(padded, labelPrefix));
+  }
+
+  const PAD = 2;
+  const innerWidth = Math.max(1, width - PAD);
+  let index = start + 1;
+  while (index < lines.length && !FENCE_RE.test(lines[index] ?? '')) {
+    const line = lines[index] ?? '';
+    const content = visibleWidth(line) > innerWidth ? truncateToWidth(line, innerWidth) : line;
+    const padded = `${' '.repeat(PAD)}${content}${' '.repeat(Math.max(0, innerWidth - visibleWidth(content)))}`;
+    rendered.push(styleSegment(padded, codeBlockPrefix));
+    index += 1;
+  }
+
+  if (rendered.length === 0 || (lang && rendered.length === 1)) {
+    rendered.push(styleSegment(' '.repeat(width), codeBlockPrefix));
+  }
+
+  return { lines: rendered, nextIndex: index < lines.length ? index + 1 : index };
+}
+
+interface Prefixes {
+  text: string;
+  heading: string;
+  quote: string;
+  border: string;
+  marker: string;
+  bold: string;
+  code: string;
+  codeBlock: string;
+  codeBlockLabel: string;
+}
+
+function renderBlocks(content: string, width: number, p: Prefixes): string[] {
+  const lines = content.split('\n');
+  const rendered: string[] = [];
+  for (let i = 0; i < lines.length;) {
+    if (FENCE_RE.test(lines[i] ?? '')) {
+      const block = renderCodeBlock(lines, i, width, p.codeBlock, p.codeBlockLabel);
+      rendered.push(...block.lines);
+      i = block.nextIndex;
+      continue;
+    }
+    if (isTableStart(lines, i)) {
+      const table = renderTableBlock(lines, i, width, p.text, p.heading, p.border, p.bold, p.code);
+      rendered.push(...table.lines);
+      i = table.nextIndex;
+      continue;
+    }
+    rendered.push(...wrapMarkdownLine(lines[i] ?? '', p.text, p.heading, p.quote, p.marker, p.bold, p.code, width));
+    i += 1;
+  }
+  return rendered;
+}
+
+export function renderMarkdown(content: string, width: number, theme: Theme): string[] {
+  const p: Prefixes = {
+    text: styleToAnsi(theme.styles.assistantMessage),
+    heading: styleToAnsi({ ...theme.styles.assistantMessage, fg: theme.colors.warning, bold: true }),
+    quote: styleToAnsi(theme.styles.muted),
+    border: styleToAnsi(theme.styles.muted),
+    marker: styleToAnsi(theme.styles.muted),
+    bold: styleToAnsi({ ...theme.styles.assistantMessage, bold: true }),
+    code: styleToAnsi({ ...theme.styles.assistantMessage, fg: theme.colors.success }),
+    codeBlock: styleToAnsi({ ...theme.styles.assistantMessage, bg: theme.colors.surfaceMuted }),
+    codeBlockLabel: styleToAnsi({ fg: theme.colors.textMuted, bg: theme.colors.surfaceMuted, dim: true }),
+  };
+  return renderBlocks(content, Math.max(1, width), p);
+}
+
+export function markdown(content: string, theme: Theme): Component {
+  return {
+    render: (s) => {
+      if (s.width <= 0) return;
+      const lines = renderMarkdown(content, s.width, theme);
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        s.text(0, i, visibleWidth(line) > s.width ? truncateToWidth(line, s.width) : line);
+      }
+    },
+  };
+}
+
+export { wrapText };

package/src/ui/picker.ts

@@ -0,0 +1,126 @@
+import { readdirSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+export interface Candidate {
+  label: string;
+  insert: string;
+  kind: 'file' | 'agent';
+}
+
+const IGNORED = new Set([
+  'node_modules',
+  '.git',
+  'dist',
+  'build',
+  '.next',
+  'target',
+  '.cache',
+  'coverage',
+  '.venv',
+  'venv',
+  '__pycache__',
+  '.idea',
+  '.vscode',
+  'npm',
+  'vendor',
+]);
+
+const MAX_ENTRIES = 5000;
+const MAX_DEPTH = 6;
+
+let cache: { cwd: string; files: string[] } | undefined;
+
+function walk(cwd: string): string[] {
+  const out: string[] = [];
+  const stack: { dir: string; depth: number }[] = [{ dir: cwd, depth: 0 }];
+  while (stack.length > 0 && out.length < MAX_ENTRIES) {
+    const { dir, depth } = stack.pop()!;
+    let entries: string[];
+    try {
+      entries = readdirSync(dir);
+    } catch {
+      continue;
+    }
+    for (const name of entries) {
+      if (name.startsWith('.') && name !== '.mu') continue;
+      if (IGNORED.has(name)) continue;
+      const full = join(dir, name);
+      let isDir: boolean;
+      try {
+        isDir = statSync(full).isDirectory();
+      } catch {
+        continue;
+      }
+      if (isDir) {
+        if (depth < MAX_DEPTH) stack.push({ dir: full, depth: depth + 1 });
+      } else {
+        out.push(relative(cwd, full));
+        if (out.length >= MAX_ENTRIES) break;
+      }
+    }
+  }
+  return out.sort();
+}
+
+export function collectCandidates(cwd: string, agentNames: string[]): Candidate[] {
+  if (!cache || cache.cwd !== cwd) cache = { cwd, files: walk(cwd) };
+  const agents: Candidate[] = agentNames.map((name) => ({ label: `@${name}`, insert: name, kind: 'agent' }));
+  const files: Candidate[] = cache.files.map((path) => ({ label: path, insert: path, kind: 'file' }));
+  return [...agents, ...files];
+}
+
+export function invalidateCandidates(): void {
+  cache = undefined;
+}
+
+function score(query: string, target: string): number | undefined {
+  if (query.length === 0) return 0;
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  let qi = 0;
+  let total = 0;
+  let prev = -2;
+  for (let i = 0; i < t.length && qi < q.length; i++) {
+    if (t[i] === q[qi]) {
+      let s = 1;
+      if (i === prev + 1) s += 2;
+      if (i === 0 || /[/_\-. ]/.test(t[i - 1] ?? '')) s += 3;
+      total += s;
+      prev = i;
+      qi += 1;
+    }
+  }
+  if (qi < q.length) return undefined;
+  return total - t.length * 0.01;
+}
+
+export function rank(query: string, candidates: Candidate[], limit = 8): Candidate[] {
+  if (!query) return candidates.slice(0, limit);
+  const scored: { candidate: Candidate; score: number }[] = [];
+  for (const candidate of candidates) {
+    const s = score(query, candidate.label);
+    if (s !== undefined) scored.push({ candidate, score: s });
+  }
+  scored.sort((a, b) => b.score - a.score);
+  return scored.slice(0, limit).map((entry) => entry.candidate);
+}
+
+export interface ActiveMention {
+  start: number;
+  query: string;
+}
+
+export function activeMention(value: string, cursor: number): ActiveMention | undefined {
+  let start = -1;
+  for (let i = cursor - 1; i >= 0; i--) {
+    const ch = value[i];
+    if (ch === '@') {
+      start = i;
+      break;
+    }
+    if (ch === ' ' || ch === '\n' || ch === '\t') break;
+  }
+  if (start === -1) return undefined;
+  if (start > 0 && !/\s/.test(value[start - 1] ?? ' ')) return undefined;
+  return { start, query: value.slice(start + 1, cursor) };
+}