mu-coding 0.1.0

package/src/tui/hooks/useInputHandler.ts

@@ -0,0 +1,257 @@
+import { type Key, useInput, useStdin } from 'ink';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { matchCommands, type SlashCommand } from '../commands';
+
+const BACKSPACE_BYTES = new Set(['\x7f', '\x08']);
+
+export interface InputActions {
+  onCtrlC?: () => void;
+  onPaste?: () => void;
+  onNew?: () => void;
+  onCycleModel?: () => void;
+  onTogglePicker?: () => void;
+  onToggleSessionPicker?: () => void;
+  onEsc?: () => void;
+  onScrollUp?: () => void;
+  onScrollDown?: () => void;
+  modelCount?: number;
+}
+
+interface InputState {
+  value: string;
+  commands: SlashCommand[];
+  cmdIndex: number;
+  isCommandMode: boolean;
+}
+
+interface UseInputHandlerOptions {
+  isActive: boolean;
+  streaming: boolean;
+  history: string[];
+  actions: InputActions;
+  onSubmit: (text: string) => void;
+}
+
+// Build a stable key identifier from an Ink key event
+function keyId(input: string, key: Key): string | null {
+  if (key.ctrl && key.shift && input) {
+    return `ctrl+shift+${input}`;
+  }
+  if (key.ctrl && input) {
+    return `ctrl+${input}`;
+  }
+  if (key.escape) {
+    return 'escape';
+  }
+  if (key.pageUp) {
+    return 'pageup';
+  }
+  if (key.pageDown) {
+    return 'pagedown';
+  }
+  if (key.return) {
+    return key.shift ? 'shift+return' : 'return';
+  }
+  if (key.tab) {
+    return 'tab';
+  }
+  if (key.upArrow) {
+    return 'up';
+  }
+  if (key.downArrow) {
+    return 'down';
+  }
+  if (key.backspace || key.delete) {
+    return 'backspace';
+  }
+  return null;
+}
+
+function useHistoryNavigation(value: string, history: string[]) {
+  const idx = useRef(-1);
+  const draft = useRef('');
+
+  const up = (): string | null => {
+    if (!history.length) {
+      return null;
+    }
+    if (idx.current === -1) {
+      draft.current = value;
+      idx.current = history.length - 1;
+    } else if (idx.current > 0) {
+      idx.current -= 1;
+    }
+    return history[idx.current] ?? null;
+  };
+
+  const down = (): string | null => {
+    if (idx.current === -1) {
+      return null;
+    }
+    if (idx.current < history.length - 1) {
+      idx.current += 1;
+      return history[idx.current] ?? null;
+    }
+    idx.current = -1;
+    return draft.current;
+  };
+
+  return { up, down, reset: () => (idx.current = -1) };
+}
+
+function useRawBackspace(isActive: boolean, setValue: (fn: (p: string) => string) => void) {
+  const { stdin } = useStdin();
+  const handledRef = useRef(false);
+
+  useEffect(() => {
+    if (!(stdin && isActive)) {
+      return;
+    }
+    const onData = (data: Buffer) => {
+      if (BACKSPACE_BYTES.has(data.toString())) {
+        handledRef.current = true;
+        setValue((p) => p.slice(0, -1));
+      }
+    };
+    stdin.on('data', onData);
+    return () => {
+      stdin.off('data', onData);
+    };
+  }, [stdin, isActive, setValue]);
+
+  return handledRef;
+}
+
+const COMMAND_ACTIONS: Record<string, keyof InputActions> = {
+  model: 'onTogglePicker',
+  sessions: 'onToggleSessionPicker',
+  new: 'onNew',
+};
+
+interface BindingCtx {
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  setCmdIndex: React.Dispatch<React.SetStateAction<number>>;
+  nav: ReturnType<typeof useHistoryNavigation>;
+  submit: () => void;
+  isCommandMode: boolean;
+  commands: SlashCommand[];
+  actions: InputActions;
+}
+
+type Binding = (ctx: BindingCtx) => void;
+
+const BINDINGS: Record<string, Binding> = {
+  'ctrl+c': (c) => c.actions.onCtrlC?.(),
+  'ctrl+v': (c) => c.actions.onPaste?.(),
+  'ctrl+o': (c) => c.actions.onTogglePicker?.(),
+  'ctrl+s': (c) => c.submit(),
+  'ctrl+j': (c) => c.setValue((p) => `${p}\n`),
+  'ctrl+m': (c) => {
+    if (c.actions.modelCount) {
+      c.actions.onCycleModel?.();
+    }
+  },
+  'ctrl+n': (c) => {
+    c.actions.onNew?.();
+    c.setValue('');
+    c.nav.reset();
+  },
+  escape: (c) => c.actions.onEsc?.(),
+  pageup: (c) => c.actions.onScrollUp?.(),
+  pagedown: (c) => c.actions.onScrollDown?.(),
+  'shift+return': (c) => c.setValue((p) => `${p}\n`),
+  return: (c) => c.submit(),
+  tab: (c) => c.setValue((p) => `${p}  `),
+  up: (c) => {
+    if (c.isCommandMode) {
+      c.setCmdIndex((i) => (i > 0 ? i - 1 : c.commands.length - 1));
+      return;
+    }
+    const r = c.nav.up();
+    if (r !== null) {
+      c.setValue(r);
+    }
+  },
+  down: (c) => {
+    if (c.isCommandMode) {
+      c.setCmdIndex((i) => (i < c.commands.length - 1 ? i + 1 : 0));
+      return;
+    }
+    const r = c.nav.down();
+    if (r !== null) {
+      c.setValue(r);
+    }
+  },
+};
+
+function handleBackspace(c: BindingCtx, alreadyHandled: boolean) {
+  if (!alreadyHandled) {
+    c.setValue((p) => p.slice(0, -1));
+  }
+  c.nav.reset();
+}
+
+function handleInsert(input: string, c: BindingCtx) {
+  if (input && input.length === 1) {
+    c.setValue((p) => p + input);
+    c.nav.reset();
+  }
+}
+
+export function useInputHandler(options: UseInputHandlerOptions): InputState {
+  const { isActive, streaming, history, actions, onSubmit } = options;
+  const [value, setValue] = useState('');
+  const [cmdIndex, setCmdIndex] = useState(0);
+  const nav = useHistoryNavigation(value, history);
+  const backspaceHandledRef = useRawBackspace(isActive, setValue);
+
+  const commands = useMemo(() => matchCommands(value.trim()), [value]);
+  const isCommandMode = commands.length > 0 && value.trim().startsWith('/');
+
+  const submit = useCallback(() => {
+    if (streaming) {
+      return;
+    }
+    if (isCommandMode) {
+      const cmd = commands[cmdIndex];
+      if (cmd) {
+        setValue('');
+        const actionKey = COMMAND_ACTIONS[cmd.action];
+        if (actionKey) {
+          (actions[actionKey] as (() => void) | undefined)?.();
+        }
+      }
+      return;
+    }
+    if (!value.trim()) {
+      return;
+    }
+    onSubmit(value);
+    setValue('');
+    nav.reset();
+  }, [streaming, isCommandMode, commands, cmdIndex, value, actions, onSubmit, nav]);
+
+  useInput(
+    (input, key) => {
+      const alreadyHandled = backspaceHandledRef.current;
+      backspaceHandledRef.current = false;
+
+      const ctx: BindingCtx = { value, setValue, setCmdIndex, nav, submit, isCommandMode, commands, actions };
+      const id = keyId(input, key);
+
+      if (id === 'backspace') {
+        handleBackspace(ctx, alreadyHandled);
+        return;
+      }
+      if (id && BINDINGS[id]) {
+        BINDINGS[id](ctx);
+        return;
+      }
+      handleInsert(input, ctx);
+    },
+    { isActive },
+  );
+
+  return { value, commands, cmdIndex, isCommandMode };
+}

package/src/tui/hooks/useScroll.ts

@@ -0,0 +1,56 @@
+import { useInput, useStdout } from 'ink';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const SCROLL_STEP = 3;
+
+export function useScroll(contentHeight: number, viewHeight: number) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const autoScrollRef = useRef(true);
+  const maxScroll = Math.max(0, contentHeight - viewHeight);
+
+  // Enable SGR mouse mode so wheel sequences arrive through Ink's input pipeline
+  const { stdout } = useStdout();
+  useEffect(() => {
+    stdout.write('\x1b[?1002h\x1b[?1006h');
+    return () => {
+      stdout.write('\x1b[?1002l\x1b[?1006l');
+    };
+  }, [stdout]);
+
+  useEffect(() => {
+    if (autoScrollRef.current && contentHeight > viewHeight) {
+      setScrollOffset(contentHeight - viewHeight);
+    }
+  }, [contentHeight, viewHeight]);
+
+  const scrollUp = useCallback(() => {
+    autoScrollRef.current = false;
+    setScrollOffset((o) => Math.max(0, o - SCROLL_STEP));
+  }, []);
+
+  const scrollDown = useCallback(() => {
+    setScrollOffset((o) => {
+      const next = Math.min(maxScroll, o + SCROLL_STEP);
+      if (next >= maxScroll) {
+        autoScrollRef.current = true;
+      }
+      return next;
+    });
+  }, [maxScroll]);
+
+  // Detect SGR mouse wheel sequences via Ink's useInput hook.
+  // Ink's parseKeypress doesn't recognize SGR mouse, so raw sequences
+  // pass through with \x1b stripped: [<64;... (up), [<65;... (down)
+  useInput(
+    (input) => {
+      if (input.startsWith('[<64')) {
+        scrollUp();
+      } else if (input.startsWith('[<65')) {
+        scrollDown();
+      }
+    },
+    { isActive: true },
+  );
+
+  return { scrollOffset, onScrollUp: scrollUp, onScrollDown: scrollDown };
+}

package/src/tui/hooks/useTerminal.ts

@@ -0,0 +1,40 @@
+import type { DOMElement } from 'ink';
+import { measureElement, useStdout } from 'ink';
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+export function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState({ width: stdout.columns, height: stdout.rows });
+  useEffect(() => {
+    const onResize = () => setSize({ width: stdout.columns, height: stdout.rows });
+    stdout.on('resize', onResize);
+    return () => {
+      stdout.off('resize', onResize);
+    };
+  }, [stdout]);
+  return size;
+}
+
+export function useMeasure(
+  viewRef: React.RefObject<DOMElement | null>,
+  contentRef: React.RefObject<DOMElement | null>,
+  contentKey?: unknown,
+) {
+  const [viewHeight, setViewHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: contentKey triggers re-measure on content changes
+  useLayoutEffect(() => {
+    const timer = setTimeout(() => {
+      if (viewRef.current) {
+        setViewHeight(measureElement(viewRef.current).height);
+      }
+      if (contentRef.current) {
+        setContentHeight(measureElement(contentRef.current).height);
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [viewRef, contentRef, contentKey]);
+
+  return { viewHeight, contentHeight };
+}

package/src/tui/hooks/useUI.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function useSpinner(active: boolean): string {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const timer = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
+    return () => clearInterval(timer);
+  }, [active]);
+  return active ? SPINNER_FRAMES[frame] : '';
+}

package/src/tui/useAbort.ts

@@ -0,0 +1,68 @@
+import { useCallback, useRef, useState } from 'react';
+
+function useDoublePress(timeoutMs: number) {
+  const [warning, setWarning] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const confirm = useCallback(() => {
+    if (warning) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      return true;
+    }
+    setWarning(true);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setWarning(false);
+      timerRef.current = null;
+    }, timeoutMs);
+    return false;
+  }, [warning, timeoutMs]);
+
+  return { warning, confirm };
+}
+
+export interface AbortState {
+  controllerRef: React.RefObject<AbortController | null>;
+  quitWarning: boolean;
+  abortWarning: boolean;
+  onCtrlC: () => void;
+  onEsc: () => void;
+}
+
+export function useAbort(
+  streaming: boolean,
+  controllerRef: React.RefObject<AbortController | null>,
+  exit: () => void,
+  timeoutMs: number,
+): AbortState {
+  const { warning: quitWarning, confirm: onCtrlC } = useDoublePress(timeoutMs);
+  const { warning: abortWarning, confirm: onEsc } = useDoublePress(timeoutMs);
+
+  const handleCtrlC = useCallback(() => {
+    if (streaming && controllerRef.current) {
+      controllerRef.current.abort();
+      controllerRef.current = null;
+      return;
+    }
+    if (onCtrlC()) {
+      exit();
+      setTimeout(() => process.exit(0), 100);
+    }
+  }, [streaming, onCtrlC, exit, controllerRef]);
+
+  const handleEsc = useCallback(() => {
+    if (!(streaming && controllerRef.current)) {
+      return;
+    }
+    if (onEsc()) {
+      controllerRef.current.abort();
+      controllerRef.current = null;
+    }
+  }, [streaming, onEsc, controllerRef]);
+
+  return { controllerRef, quitWarning, abortWarning, onCtrlC: handleCtrlC, onEsc: handleEsc };
+}

package/src/tui/useChat.ts

@@ -0,0 +1,52 @@
+import { useApp } from 'ink';
+import type { PluginRegistry } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { useRef } from 'react';
+import { listSessions, type SessionInfo } from '../session';
+import { type AbortState, useAbort } from './useAbort';
+import { type ChatSessionState, useChatSession } from './useChatSession';
+import { type AttachmentState, type TogglesState, useAttachment, useToggles } from './useChatUI';
+import { type ModelListState, useModelList } from './useModelList';
+
+const ABORT_TIMEOUT_MS = 2000;
+
+export interface ChatContextValue {
+  session: ChatSessionState;
+  toggles: TogglesState;
+  attachment: AttachmentState;
+  models: ModelListState;
+  abort: AbortState;
+  sessions: SessionInfo[];
+  registry: PluginRegistry;
+}
+
+export function useChat(
+  config: ProviderConfig,
+  registry: PluginRegistry,
+  initialMessages?: ChatMessage[],
+): ChatContextValue {
+  const { exit } = useApp();
+  const controllerRef = useRef<AbortController | null>(null);
+  const attachment = useAttachment();
+  const toggles = useToggles();
+  const models = useModelList(config.baseUrl, config.model);
+  const session = useChatSession({
+    config,
+    currentModel: models.currentModel,
+    attachment,
+    controllerRef,
+    initialMessages,
+    registry,
+  });
+  const abort = useAbort(session.streaming, controllerRef, exit, ABORT_TIMEOUT_MS);
+
+  return {
+    session,
+    toggles,
+    attachment,
+    models,
+    abort,
+    sessions: toggles.showSessionPicker ? listSessions() : [],
+    registry,
+  };
+}

package/src/tui/useChatSession.ts

@@ -0,0 +1,155 @@
+import { type AgentEvent, type PluginRegistry, runAgent } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { useCallback, useRef, useState } from 'react';
+import { generateSessionPath, loadSession, saveSession } from '../session';
+import type { AttachmentState } from './useChatUI';
+
+export interface StreamState {
+  text: string;
+  reasoning: string;
+  totalTokens: number;
+  tps: number;
+}
+
+const EMPTY_STREAM: StreamState = { text: '', reasoning: '', totalTokens: 0, tps: 0 };
+
+export interface ChatSessionState {
+  messages: ChatMessage[];
+  streaming: boolean;
+  error: string | null;
+  stream: StreamState;
+  inputHistory: string[];
+  onSend: (text: string) => Promise<void>;
+  onNew: () => void;
+  onLoadSession: (path: string) => void;
+}
+
+interface SessionDeps {
+  config: ProviderConfig;
+  currentModel: string;
+  attachment: AttachmentState;
+  controllerRef: React.RefObject<AbortController | null>;
+  initialMessages?: ChatMessage[];
+  registry: PluginRegistry;
+}
+
+function applyEvent(prev: StreamState, event: AgentEvent, tps: number): StreamState {
+  switch (event.type) {
+    case 'content':
+      return { ...prev, text: event.text, tps };
+    case 'reasoning':
+      return { ...prev, reasoning: event.text, tps };
+    case 'usage':
+      return { ...prev, totalTokens: prev.totalTokens + event.totalTokens };
+    case 'turn_end':
+      return { ...prev, text: '', reasoning: '' };
+    default:
+      return prev;
+  }
+}
+
+async function consumeAgent(
+  events: AsyncGenerator<AgentEvent>,
+  onStream: (updater: (prev: StreamState) => StreamState) => void,
+  onMessages: (messages: ChatMessage[]) => void,
+): Promise<ChatMessage[] | null> {
+  let final: ChatMessage[] | null = null;
+  const start = Date.now();
+  let tokenCount = 0;
+
+  for await (const event of events) {
+    if (event.type === 'content' || event.type === 'reasoning') {
+      tokenCount++;
+      const elapsed = (Date.now() - start) / 1000;
+      const tps = elapsed > 0.5 ? Math.round(tokenCount / elapsed) : 0;
+      onStream((prev) => applyEvent(prev, event, tps));
+    } else if (event.type === 'messages') {
+      final = event.messages;
+      onMessages(event.messages);
+    } else {
+      onStream((prev) => applyEvent(prev, event, 0));
+    }
+  }
+  return final;
+}
+
+export function useChatSession(deps: SessionDeps): ChatSessionState {
+  const { config, currentModel, attachment, controllerRef, initialMessages, registry } = deps;
+  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages ?? []);
+  const [streaming, setStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [stream, setStream] = useState<StreamState>(EMPTY_STREAM);
+  const [inputHistory, setInputHistory] = useState<string[]>(
+    initialMessages?.filter((m) => m.role === 'user').map((m) => m.content) ?? [],
+  );
+  const sessionPathRef = useRef(generateSessionPath());
+
+  const reset = useCallback(() => {
+    setStream(EMPTY_STREAM);
+    setError(null);
+  }, []);
+
+  const onSend = useCallback(
+    async (text: string) => {
+      if (streaming) {
+        return;
+      }
+      const userMsg: ChatMessage = {
+        role: 'user',
+        content: text,
+        ...(attachment.attachment ? { images: [attachment.attachment] } : {}),
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      setInputHistory((prev) => [...prev, text]);
+      reset();
+      setStreaming(true);
+      attachment.clear();
+
+      const controller = new AbortController();
+      controllerRef.current = controller;
+
+      try {
+        const final = await consumeAgent(
+          runAgent([...messages, userMsg], config, currentModel, controller.signal, registry),
+          setStream,
+          setMessages,
+        );
+        if (final) {
+          saveSession(sessionPathRef.current, final);
+        }
+      } catch (err) {
+        if (!(err instanceof Error && err.name === 'AbortError')) {
+          setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+      } finally {
+        setStreaming(false);
+        controllerRef.current = null;
+        if (!controller.signal.aborted) {
+          setStream((s) => ({ ...s, text: '', reasoning: '' }));
+        }
+      }
+    },
+    [streaming, messages, config, currentModel, attachment, controllerRef, reset, registry],
+  );
+
+  const onNew = useCallback(() => {
+    setMessages([]);
+    reset();
+    sessionPathRef.current = generateSessionPath();
+    attachment.clear();
+  }, [attachment, reset]);
+
+  const onLoadSession = useCallback(
+    (path: string) => {
+      const msgs = loadSession(path);
+      if (msgs.length > 0) {
+        setMessages(msgs);
+        sessionPathRef.current = path;
+        reset();
+      }
+    },
+    [reset],
+  );
+
+  return { messages, streaming, error, stream, inputHistory, onSend, onNew, onLoadSession };
+}

package/src/tui/useChatUI.ts

@@ -0,0 +1,51 @@
+import type { ImageAttachment } from 'mu-provider';
+import { useCallback, useState } from 'react';
+import { readClipboardImage } from '../clipboard';
+
+export interface AttachmentState {
+  attachment: ImageAttachment | null;
+  attachmentError: string | null;
+  onPaste: () => void;
+  clear: () => void;
+}
+
+export function useAttachment(): AttachmentState {
+  const [attachment, setAttachment] = useState<ImageAttachment | null>(null);
+  const [attachmentError, setAttachmentError] = useState<string | null>(null);
+
+  const onPaste = useCallback(() => {
+    const img = readClipboardImage();
+    if (img) {
+      setAttachment(img);
+      setAttachmentError(null);
+      return;
+    }
+    setAttachmentError('No image on clipboard');
+    setTimeout(() => setAttachmentError(null), 3000);
+  }, []);
+
+  const clear = useCallback(() => {
+    setAttachment(null);
+    setAttachmentError(null);
+  }, []);
+
+  return { attachment, attachmentError, onPaste, clear };
+}
+
+export interface TogglesState {
+  showModelPicker: boolean;
+  showSessionPicker: boolean;
+  onTogglePicker: () => void;
+  onToggleSessionPicker: () => void;
+}
+
+export function useToggles(): TogglesState {
+  const [showModelPicker, setShowModelPicker] = useState(false);
+  const [showSessionPicker, setShowSessionPicker] = useState(false);
+  return {
+    showModelPicker,
+    showSessionPicker,
+    onTogglePicker: useCallback(() => setShowModelPicker((p) => !p), []),
+    onToggleSessionPicker: useCallback(() => setShowSessionPicker((p) => !p), []),
+  };
+}