mu-coding 0.5.0 → 0.9.0

package/src/tui/input/useMentionPicker.ts

@@ -0,0 +1,133 @@
+import type { MentionCompletion, PluginRegistry } from 'mu-core';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface MentionPickerState {
+  /** Current trigger character (e.g. "@") when the picker is active. */
+  trigger: string | null;
+  /** Partial text after the trigger (excluding the trigger itself). */
+  partial: string;
+  /** Suggestions returned by the active provider. Empty array hides the picker. */
+  completions: MentionCompletion[];
+  /**
+   * Cursor offset where the trigger sits in the input. Lets the host replace
+   * `[triggerStart, cursor)` when the user accepts a completion.
+   */
+  triggerStart: number;
+  /** 0-based index of the currently highlighted completion. */
+  selectedIndex: number;
+  setSelectedIndex: (i: number) => void;
+}
+
+type BaseState = Omit<MentionPickerState, 'setSelectedIndex' | 'selectedIndex'>;
+
+const EMPTY: BaseState = {
+  trigger: null,
+  partial: '',
+  completions: [],
+  triggerStart: -1,
+};
+
+interface DetectResult {
+  trigger: string;
+  start: number;
+}
+
+/**
+ * Detect a `<trigger><partial>` token at the cursor. Triggers are
+ * single-character (e.g. `@`) and the partial is anything up to the next
+ * whitespace before the cursor. Returns `null` when no trigger is active.
+ *
+ * Triggers must follow whitespace (or beginning of input) so they don't match
+ * inside email addresses.
+ */
+function detectTrigger(value: string, cursor: number, triggers: Set<string>): DetectResult | null {
+  for (let i = cursor - 1; i >= 0; i--) {
+    const ch = value[i];
+    if (/\s/.test(ch)) return null;
+    if (triggers.has(ch)) {
+      const prev = i === 0 ? ' ' : value[i - 1];
+      if (!/\s/.test(prev)) return null;
+      return { trigger: ch, start: i };
+    }
+  }
+  return null;
+}
+
+/**
+ * Watch the input and resolve plugin-provided mention completions. Keeps the
+ * provider list in sync with `registry.onMentionProvidersChange`.
+ */
+export function useMentionPicker(registry: PluginRegistry, value: string, cursor: number): MentionPickerState {
+  const [providers, setProviders] = useState(() => registry.getMentionProviders());
+  const [base, setBase] = useState<BaseState>(EMPTY);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    setProviders(registry.getMentionProviders());
+    return registry.onMentionProvidersChange(() => setProviders(registry.getMentionProviders()));
+  }, [registry]);
+
+  useEffect(() => {
+    if (providers.length === 0) {
+      setBase(EMPTY);
+      return;
+    }
+    const triggers = new Set(providers.map((p) => p.trigger));
+    const match = detectTrigger(value, cursor, triggers);
+    if (!match) {
+      setBase(EMPTY);
+      return;
+    }
+    const partial = value.slice(match.start + 1, cursor);
+    const matching = providers.filter((p) => p.trigger === match.trigger);
+    if (matching.length === 0) {
+      setBase(EMPTY);
+      return;
+    }
+    let cancelled = false;
+    // Run every provider that registered for this trigger and concatenate
+    // results in registration order. Providers tag completions with
+    // `category` so the picker can render section headers (e.g. agents
+    // first, then files) without the picker hard-coding any plugin id.
+    Promise.all(
+      matching.map(async (entry) => {
+        try {
+          const out = await Promise.resolve(entry.provider(partial));
+          // Default the category to the plugin name so legacy providers
+          // that don't set `category` still get visually grouped.
+          return out.map((c) => ({ ...c, category: c.category ?? entry.plugin }));
+        } catch {
+          return [];
+        }
+      }),
+    ).then((groups) => {
+      if (cancelled) return;
+      const completions = groups.flat();
+      setBase({
+        trigger: match.trigger,
+        partial,
+        completions,
+        triggerStart: match.start,
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [providers, value, cursor]);
+
+  // Reset highlight whenever the active partial / completion list changes so
+  // the cursor tracks the visible options. Depending on `completions.length`
+  // (rather than the array reference) keeps the highlight stable when the
+  // provider returns equivalent results twice while still re-anchoring on a
+  // genuine list change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger reset is intentional
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [base.partial, base.completions.length, base.trigger]);
+
+  const setIndex = useCallback((i: number) => {
+    setSelectedIndex(i);
+  }, []);
+
+  return { ...base, selectedIndex, setSelectedIndex: setIndex };
+}

package/src/tui/input/usePluginShortcuts.ts

@@ -0,0 +1,29 @@
+import type { PluginRegistry, ShortcutHandler } from 'mu-core';
+import { useEffect, useState } from 'react';
+
+interface PluginShortcuts {
+  /** Map of `keyId` (e.g. "tab", "ctrl+t") to plugin handler. */
+  handlers: Map<string, ShortcutHandler>;
+}
+
+/**
+ * Subscribe to the registry's shortcut bindings and expose a stable map keyed
+ * by keyId. Multiple registrations on the same key are last-write-wins; the
+ * agent plugin is expected to grab Tab and unregister cleanly on deactivation.
+ */
+export function usePluginShortcuts(registry: PluginRegistry): PluginShortcuts {
+  const [handlers, setHandlers] = useState<Map<string, ShortcutHandler>>(() => buildMap(registry));
+  useEffect(() => {
+    setHandlers(buildMap(registry));
+    return registry.onShortcutsChange(() => setHandlers(buildMap(registry)));
+  }, [registry]);
+  return { handlers };
+}
+
+function buildMap(registry: PluginRegistry): Map<string, ShortcutHandler> {
+  const out = new Map<string, ShortcutHandler>();
+  for (const entry of registry.getShortcuts()) {
+    out.set(entry.key.toLowerCase(), entry.handler);
+  }
+  return out;
+}

package/src/tui/plugins/InkApprovalChannel.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'bun:test';
+import type { ApprovalRequest } from 'mu-agents';
+import { createInkApprovalChannel } from './InkApprovalChannel';
+import { InkUIService } from './InkUIService';
+
+function fakeRequest(extra?: Partial<ApprovalRequest>): ApprovalRequest {
+  return {
+    id: 'r1',
+    token: 't1',
+    agentId: 'build',
+    toolName: 'bash',
+    toolArgs: { cmd: 'echo hi' },
+    channelId: 'tui',
+    createdAt: 0,
+    status: 'pending',
+    ...extra,
+  };
+}
+
+describe('InkApprovalChannel', () => {
+  it('returns approved when user confirms', async () => {
+    const ui = new InkUIService();
+    const channel = createInkApprovalChannel(ui);
+    const promise = channel.sendApprovalRequest(fakeRequest());
+    // Resolve the dialog with `true` (approve).
+    await new Promise((r) => setTimeout(r, 0));
+    ui.resolveDialog(true);
+    expect(await promise).toBe('approved');
+  });
+
+  it('returns denied when user declines', async () => {
+    const ui = new InkUIService();
+    const channel = createInkApprovalChannel(ui);
+    const promise = channel.sendApprovalRequest(fakeRequest());
+    await new Promise((r) => setTimeout(r, 0));
+    ui.resolveDialog(false);
+    expect(await promise).toBe('denied');
+  });
+
+  it('serialises tool args into the dialog message', async () => {
+    const ui = new InkUIService();
+    const channel = createInkApprovalChannel(ui);
+    const promise = channel.sendApprovalRequest(fakeRequest({ toolArgs: { path: 'src/x.ts' } }));
+    await new Promise((r) => setTimeout(r, 0));
+    const dialog = ui.currentDialog();
+    expect(dialog?.title).toBe('Run `bash`?');
+    expect(dialog?.message).toContain('src/x.ts');
+    ui.resolveDialog(true);
+    await promise;
+  });
+});

package/src/tui/plugins/InkApprovalChannel.ts

@@ -0,0 +1,30 @@
+/**
+ * InkApprovalChannel — bridges the ApprovalGateway to the Ink confirm
+ * dialog. Returns the user's choice synchronously (no token round-trip
+ * through HTTP / Telegram); the gateway honours that immediate result.
+ */
+
+import type { ApprovalChannel, ApprovalRequest, ApprovalResult } from 'mu-agents';
+import type { InkUIService } from './InkUIService';
+
+function formatArgs(args: unknown): string {
+  if (args === null || args === undefined) return '';
+  if (typeof args === 'string') return args;
+  try {
+    const json = JSON.stringify(args, null, 2);
+    return json.length > 800 ? `${json.slice(0, 800)}…` : json;
+  } catch {
+    return String(args);
+  }
+}
+
+export function createInkApprovalChannel(ui: InkUIService): ApprovalChannel {
+  return {
+    async sendApprovalRequest(req: ApprovalRequest): Promise<ApprovalResult | undefined> {
+      const title = `Run \`${req.toolName}\`?`;
+      const message = formatArgs(req.toolArgs);
+      const ok = await ui.confirm(title, message);
+      return ok ? 'approved' : 'denied';
+    },
+  };
+}

package/src/tui/plugins/InkUIService.ts

@@ -1,4 +1,4 @@
-import type { UIService } from 'mu-agents';
+import type { UIService } from 'mu-core';
 
 export type DialogType = 'confirm' | 'select' | 'input';
 

package/src/tui/renderApp.tsx

@@ -1,27 +1,61 @@
-import { render } from 'ink';
-import type { PluginRegistry } from 'mu-agents';
-import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { type Instance, render } from 'ink';
+import { type SubagentRunRegistry, SubagentRunsProvider } from 'mu-agents';
+import type { ChatMessage, PluginRegistry } from 'mu-core';
+import type { ReactNode } from 'react';
 import type { ShutdownFn } from '../app/shutdown';
+import type { AppConfig } from '../config/index';
+import type { SessionPathHolder } from '../runtime/createRegistry';
+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: ProviderConfig;
+  config: AppConfig;
   initialMessages?: ChatMessage[];
   registry: PluginRegistry;
+  messageBus: HostMessageBus;
   uiService: InkUIService;
   shutdown: ShutdownFn;
+  sessionPathHolder?: SessionPathHolder;
+  subagentRuns?: SubagentRunRegistry;
 }
 
-export function renderApp(options: RenderAppOptions): void {
-  render(
-    <ChatPanel
-      config={options.config}
-      initialMessages={options.initialMessages}
-      registry={options.registry}
-      uiService={options.uiService}
-      shutdown={options.shutdown}
-    />,
+/**
+ * Optionally wrap children with the subagent-runs provider so the
+ * `↳ subagent` header renderer can subscribe to live status updates.
+ * Wrapping is conditional because hosts that disabled the agent plugin
+ * have no registry to provide.
+ */
+function withSubagentProvider(runs: SubagentRunRegistry | undefined, children: ReactNode): ReactNode {
+  if (!runs) return <>{children}</>;
+  return <SubagentRunsProvider registry={runs}>{children}</SubagentRunsProvider>;
+}
+
+/**
+ * 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}>
+      {withSubagentProvider(
+        options.subagentRuns,
+        <ChatPanel
+          config={options.config}
+          initialMessages={options.initialMessages}
+          registry={options.registry}
+          messageBus={options.messageBus}
+          uiService={options.uiService}
+          shutdown={options.shutdown}
+          sessionPathHolder={options.sessionPathHolder}
+          subagentRuns={options.subagentRuns}
+        />,
+      )}
+    </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,90 @@
+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: '#2a2a2a',
+    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',
+  },
+  markdown: {
+    heading: 'cyan',
+    codeBackground: '#2a2a2a',
+    codeText: 'yellow',
+    codeBlockBackground: '#2a2a2a',
+    codeBlockText: 'white',
+    link: 'cyan',
+    blockquote: 'gray',
+    bullet: 'cyan',
+    tableBorder: 'gray',
+  },
+  common: {
+    error: 'red',
+    warning: 'yellow',
+    success: 'green',
+    accent: 'cyan',
+    info: 'blue',
+  },
+};

package/src/tui/theme/types.ts

@@ -0,0 +1,138 @@
+// 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 ThemeMarkdown {
+  /** Heading text color (h1/h2/h3 share this color, h1 is also bold). */
+  heading: string;
+  /** Inline code background. */
+  codeBackground: string;
+  /** Inline code text color. */
+  codeText: string;
+  /** Fenced code-block background. */
+  codeBlockBackground: string;
+  /** Fenced code-block text color. */
+  codeBlockText: string;
+  /** Link `[label](url)` rendering — label color. */
+  link: string;
+  /** Blockquote (`> …`) text color (also dimmed). */
+  blockquote: string;
+  /** List bullet color. */
+  bullet: string;
+  /** Table border color. */
+  tableBorder: 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;
+  markdown: ThemeMarkdown;
+  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

@@ -2,7 +2,7 @@ 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-provider';
+import type { ImageAttachment } from 'mu-core';
 
 const CLIPBOARD_TIMEOUT = 3000;