mu-coding 0.2.0 → 0.5.0

package/src/tui/{useChat.ts → chat/useChat.ts}

@@ -1,16 +1,18 @@
 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 { useEffect, useRef, useState } from 'react';
+import type { ShutdownFn } from '../../app/shutdown';
+import { listSessionsAsync, type SessionInfo } from '../../sessions/index';
 import { type AbortState, useAbort } from './useAbort';
+import { type AttachmentState, type TogglesState, useAttachment, useToggles } from './useAttachment';
 import { type ChatSessionState, useChatSession } from './useChatSession';
-import { type AttachmentState, type TogglesState, useAttachment, useToggles } from './useChatUI';
-import { type ModelListState, useModelList } from './useModelList';
+import { type ModelListState, useModelList } from './useModels';
 
 const ABORT_TIMEOUT_MS = 2000;
 
 export interface ChatContextValue {
+  config: ProviderConfig;
   session: ChatSessionState;
   toggles: TogglesState;
   attachment: AttachmentState;
@@ -24,6 +26,7 @@ export function useChat(
   config: ProviderConfig,
   registry: PluginRegistry,
   initialMessages?: ChatMessage[],
+  shutdown?: ShutdownFn,
 ): ChatContextValue {
   const { exit } = useApp();
   const controllerRef = useRef<AbortController | null>(null);
@@ -38,15 +41,38 @@ export function useChat(
     initialMessages,
     registry,
   });
-  const abort = useAbort(session.streaming, controllerRef, exit, ABORT_TIMEOUT_MS);
+  const abort = useAbort(session.streaming, controllerRef, exit, ABORT_TIMEOUT_MS, shutdown);
+
+  // Stream the session list asynchronously when the picker opens. Empty until
+  // the first listing settles; subsequent opens hit the in-memory peek cache
+  // so they're effectively instant.
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  useEffect(() => {
+    if (!toggles.showSessionPicker) {
+      setSessions([]);
+      return;
+    }
+    let cancelled = false;
+    listSessionsAsync()
+      .then((list) => {
+        if (!cancelled) setSessions(list);
+      })
+      .catch(() => {
+        if (!cancelled) setSessions([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [toggles.showSessionPicker]);
 
   return {
+    config,
     session,
     toggles,
     attachment,
     models,
     abort,
-    sessions: toggles.showSessionPicker ? listSessions() : [],
+    sessions,
     registry,
   };
 }

package/src/tui/chat/useChatPanel.ts

@@ -0,0 +1,96 @@
+import { type DOMElement as InkDOMElement, useInput } from 'ink';
+import type { PluginRegistry } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { useEffect, useMemo, useRef } from 'react';
+import type { ShutdownFn } from '../../app/shutdown';
+import type { ChatPanelBodyProps } from '../components/chat/ChatPanelBody';
+import { useToast } from '../components/primitives/toast';
+import { useScroll } from '../hooks/useScroll';
+import { useMeasure, useTerminalSize } from '../hooks/useTerminal';
+import type { InkUIService, ToastRequest } from '../plugins/InkUIService';
+import { useChat } from './useChat';
+import { usePluginStatus } from './usePluginStatus';
+import { useStatusSegments } from './useStatusSegments';
+
+const TOAST_LEVEL_COLORS: Record<string, string> = {
+  info: 'cyan',
+  success: 'green',
+  warning: 'yellow',
+  error: 'red',
+};
+
+interface UseChatPanelOptions {
+  config: ProviderConfig;
+  initialMessages?: ChatMessage[];
+  registry: PluginRegistry;
+  uiService?: InkUIService;
+  shutdown?: ShutdownFn;
+}
+
+export function useChatPanel(options: UseChatPanelOptions) {
+  const { config, initialMessages, registry, uiService, shutdown } = options;
+  const ctx = useChat(config, registry, initialMessages, shutdown);
+  const { width, height } = useTerminalSize();
+  const viewRef = useRef<InkDOMElement>(null);
+  const contentRef = useRef<InkDOMElement>(null);
+  // The composite key only needs to change when content visible to the layout
+  // shifts: number of messages or active stream length. Mapping over every
+  // message's content per render was O(n) wasted work.
+  const measureKey = useMemo(
+    () =>
+      [ctx.session.messages.length, ctx.session.stream.text.length, ctx.session.stream.reasoning?.length ?? 0].join(
+        '|',
+      ),
+    [ctx.session.messages.length, ctx.session.stream.text.length, ctx.session.stream.reasoning?.length],
+  );
+  const { viewHeight, contentHeight } = useMeasure(viewRef, contentRef, measureKey);
+  const { scrollOffset, onScrollUp, onScrollDown } = useScroll(contentHeight, viewHeight);
+  const anyModalOpen = ctx.toggles.showModelPicker || ctx.toggles.showSessionPicker;
+  const pluginStatus = usePluginStatus(registry, uiService);
+  const { toasts, show, dismiss } = useToast();
+
+  useInput((input, key) => key.ctrl && input === 'c' && ctx.abort.onCtrlC(), { isActive: anyModalOpen });
+
+  useEffect(() => {
+    if (!uiService) return;
+    return uiService.onToast((toast: ToastRequest) => {
+      show(toast.message, TOAST_LEVEL_COLORS[toast.level] ?? 'white');
+    });
+  }, [uiService, show]);
+
+  const statusSegments = useStatusSegments({
+    streaming: ctx.session.streaming,
+    abortWarning: ctx.abort.abortWarning,
+    quitWarning: ctx.abort.quitWarning,
+    error: ctx.session.error,
+    modelError: ctx.models.modelError,
+    tokensPerSecond: ctx.session.stream.tps,
+    pluginStatus,
+  });
+
+  const bodyProps: ChatPanelBodyProps = {
+    width,
+    height,
+    viewRef,
+    contentRef,
+    scrollOffset,
+    viewHeight,
+    contentHeight,
+    isActive: !anyModalOpen,
+    onScrollUp,
+    onScrollDown,
+    uiService,
+    messages: ctx.session.messages,
+    streaming: ctx.session.streaming,
+    stream: ctx.session.stream,
+    error: ctx.session.error,
+    onSubmit: ctx.session.onSend,
+    model: ctx.models.currentModel,
+    history: ctx.session.inputHistory,
+    statusSegments,
+    toasts,
+    onDismissToast: dismiss,
+  };
+
+  return { ctx, bodyProps };
+}

package/src/tui/chat/useChatSession.ts

@@ -0,0 +1,115 @@
+import type { PluginRegistry } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { useCallback } from 'react';
+import type { AttachmentState } from './useAttachment';
+import { useSessionPersistence } from './useSessionPersistence';
+import { type StreamState, useStreamConsumer } from './useStreamConsumer';
+
+export type { StreamState } from './useStreamConsumer';
+
+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;
+}
+
+/**
+ * Top-level chat-session hook. Composes:
+ *  - `useSessionPersistence` — transcript, history, save path
+ *  - `useStreamConsumer`     — in-flight tokens, tps, error
+ *
+ * Provides the `onSend` glue that wires user input through the agent.
+ */
+export function useChatSession(deps: SessionDeps): ChatSessionState {
+  const { config, currentModel, attachment, controllerRef, initialMessages, registry } = deps;
+  const persistence = useSessionPersistence(initialMessages);
+  const consumer = useStreamConsumer();
+  const { messages, setMessages, appendHistory, saveCurrent } = persistence;
+
+  const onSend = useCallback(
+    async (text: string) => {
+      if (consumer.streaming) {
+        return;
+      }
+      const userMsg: ChatMessage = {
+        role: 'user',
+        content: text,
+        ...(attachment.attachment ? { images: [attachment.attachment] } : {}),
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      appendHistory(text);
+      attachment.clear();
+
+      const controller = new AbortController();
+      controllerRef.current = controller;
+
+      try {
+        const final = await consumer.runStream(
+          [...messages, userMsg],
+          config,
+          currentModel,
+          controller.signal,
+          registry,
+          setMessages,
+        );
+        if (final) {
+          saveCurrent(final);
+        }
+      } finally {
+        controllerRef.current = null;
+      }
+    },
+    [
+      consumer.streaming,
+      consumer.runStream,
+      messages,
+      config,
+      currentModel,
+      attachment,
+      controllerRef,
+      registry,
+      setMessages,
+      appendHistory,
+      saveCurrent,
+    ],
+  );
+
+  const onNew = useCallback(() => {
+    persistence.onNew();
+    consumer.resetError();
+    attachment.clear();
+  }, [persistence.onNew, consumer.resetError, attachment]);
+
+  const onLoadSession = useCallback(
+    (path: string) => {
+      persistence.onLoadSession(path);
+      consumer.resetError();
+    },
+    [persistence.onLoadSession, consumer.resetError],
+  );
+
+  return {
+    messages: persistence.messages,
+    streaming: consumer.streaming,
+    error: consumer.error,
+    stream: consumer.stream,
+    inputHistory: persistence.inputHistory,
+    onSend,
+    onNew,
+    onLoadSession,
+  };
+}

package/src/tui/{useModelList.ts → chat/useModels.ts}

@@ -1,6 +1,6 @@
 import { type ApiModel, listModels } from 'mu-provider';
 import { useCallback, useEffect, useState } from 'react';
-import { saveConfig } from '../config';
+import { saveConfig } from '../../config/index';
 
 export interface ModelListState {
   models: ApiModel[];
@@ -16,8 +16,13 @@ export function useModelList(baseUrl: string, preferredModel?: string): ModelLis
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    // Guard against late resolution: if the user quits or `baseUrl` changes
+    // before the request settles, swallow the response so we don't call
+    // setState on an unmounted hook.
+    let cancelled = false;
     listModels(baseUrl)
       .then((list) => {
+        if (cancelled) return;
         if (list.length === 0) {
           setError(`No models found at ${baseUrl}`);
           return;
@@ -28,8 +33,12 @@ export function useModelList(baseUrl: string, preferredModel?: string): ModelLis
         setCurrentModel(target);
       })
       .catch((err) => {
+        if (cancelled) return;
         setError(err instanceof Error ? err.message : 'Failed to fetch models');
       });
+    return () => {
+      cancelled = true;
+    };
   }, [baseUrl, preferredModel]);
 
   const cycleModel = useCallback(() => {

package/src/tui/chat/usePluginStatus.ts

@@ -0,0 +1,44 @@
+import type { PluginRegistry, StatusSegment } from 'mu-agents';
+import { useEffect, useMemo, useState } from 'react';
+import type { InkUIService } from '../plugins/InkUIService';
+
+/**
+ * Aggregate plugin status from the two complementary channels into one
+ * flat segment list:
+ *
+ *  1. `registry.onStatusChange` — push-based, structured `StatusSegment[]` per
+ *     plugin (color/dim metadata). Producers use `PluginContext.setStatusLine`.
+ *  2. `uiService.onStatusChange` — free-form `key → text` map. Producers use
+ *     `UIService.setStatus` (e.g. `mu-repomap` progress, Pi `pi.ui.setStatus`,
+ *     Pi `pi.ui.setWidget`). Rendered as dim text since the API carries no
+ *     color metadata.
+ *
+ * The split lets producers pick the right granularity; callers see a single
+ * pre-merged list ready for the status bar.
+ */
+export function usePluginStatus(registry: PluginRegistry, uiService?: InkUIService): StatusSegment[] {
+  const [pluginStatus, setPluginStatus] = useState<StatusSegment[]>([]);
+  const [uiStatus, setUiStatus] = useState<StatusSegment[]>([]);
+
+  useEffect(() => {
+    setPluginStatus(registry.getStatusSegments());
+    return registry.onStatusChange(() => {
+      setPluginStatus(registry.getStatusSegments());
+    });
+  }, [registry]);
+
+  useEffect(() => {
+    if (!uiService) return;
+    const apply = (entries: Map<string, string>) => {
+      const segments: StatusSegment[] = [];
+      for (const [, text] of entries) {
+        segments.push({ text, dim: true });
+      }
+      setUiStatus(segments);
+    };
+    apply(uiService.getStatusEntries());
+    return uiService.onStatusChange(apply);
+  }, [uiService]);
+
+  return useMemo(() => [...pluginStatus, ...uiStatus], [pluginStatus, uiStatus]);
+}

package/src/tui/chat/useSessionPersistence.ts

@@ -0,0 +1,57 @@
+import type { ChatMessage } from 'mu-provider';
+import { useCallback, useRef, useState } from 'react';
+import { generateSessionPath, loadSession, saveSession } from '../../sessions/index';
+
+export interface SessionPersistenceState {
+  messages: ChatMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
+  inputHistory: string[];
+  appendHistory: (text: string) => void;
+  sessionPathRef: React.RefObject<string>;
+  saveCurrent: (messages: ChatMessage[]) => void;
+  onNew: () => void;
+  onLoadSession: (path: string) => void;
+}
+
+function userPromptsFrom(messages: ChatMessage[]): string[] {
+  return messages.filter((m) => m.role === 'user').map((m) => m.content);
+}
+
+/**
+ * Owns the conversation transcript and its on-disk persistence. Keeps the
+ * current session path, the transcript, and the user-input history in sync.
+ *
+ * Save errors are logged to stderr and do not surface to the chat error
+ * channel — they're considered non-fatal (next save attempt may succeed).
+ */
+export function useSessionPersistence(initialMessages?: ChatMessage[]): SessionPersistenceState {
+  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages ?? []);
+  const [inputHistory, setInputHistory] = useState<string[]>(userPromptsFrom(initialMessages ?? []));
+  const sessionPathRef = useRef(generateSessionPath());
+
+  const appendHistory = useCallback((text: string) => {
+    setInputHistory((prev) => [...prev, text]);
+  }, []);
+
+  const saveCurrent = useCallback((finalMessages: ChatMessage[]) => {
+    saveSession(sessionPathRef.current, finalMessages).catch((err) => {
+      console.error('Failed to save session:', err);
+    });
+  }, []);
+
+  const onNew = useCallback(() => {
+    setMessages([]);
+    sessionPathRef.current = generateSessionPath();
+  }, []);
+
+  const onLoadSession = useCallback((path: string) => {
+    const msgs = loadSession(path);
+    if (msgs.length > 0) {
+      setMessages(msgs);
+      setInputHistory(userPromptsFrom(msgs));
+      sessionPathRef.current = path;
+    }
+  }, []);
+
+  return { messages, setMessages, inputHistory, appendHistory, sessionPathRef, saveCurrent, onNew, onLoadSession };
+}

package/src/tui/chat/useStatusSegments.ts

@@ -0,0 +1,49 @@
+import type { StatusSegment } from 'mu-agents';
+import type { StatusBarSegment } from '../components/statusBar';
+import { useSpinner } from '../hooks/useUI';
+
+const ERROR_PREVIEW_LEN = 40;
+
+interface StatusSegmentOptions {
+  streaming: boolean;
+  abortWarning: boolean;
+  quitWarning: boolean;
+  error: string | null;
+  modelError: string | null;
+  tokensPerSecond: number;
+  pluginStatus?: StatusSegment[];
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+export function useStatusSegments(options: StatusSegmentOptions): StatusBarSegment[] {
+  const spinner = useSpinner(options.streaming);
+  const segments: StatusBarSegment[] = [];
+
+  if (options.streaming) {
+    segments.push({ text: `${spinner} generating`, color: 'yellow' });
+  }
+  if (options.tokensPerSecond > 0) {
+    segments.push({ text: `${options.tokensPerSecond} tok/s`, dim: true });
+  }
+  if (options.abortWarning) {
+    segments.push({ text: 'Esc again to stop', color: 'yellow' });
+  } else if (options.quitWarning) {
+    segments.push({ text: 'Ctrl+C again to quit', color: 'yellow' });
+  } else if (options.streaming) {
+    segments.push({ text: 'Esc to stop', dim: true });
+  }
+  if (options.error) {
+    segments.push({ text: `⚠ ${truncate(options.error, ERROR_PREVIEW_LEN)}`, color: 'red' });
+  }
+  if (options.modelError) {
+    segments.push({ text: `⚠ ${truncate(options.modelError, ERROR_PREVIEW_LEN)}`, color: 'red' });
+  }
+  if (options.pluginStatus) {
+    segments.push(...options.pluginStatus);
+  }
+
+  return segments;
+}

package/src/tui/chat/useStreamConsumer.ts

@@ -0,0 +1,118 @@
+import { type AgentEvent, type PluginRegistry, runAgent } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { useCallback, useState } from 'react';
+
+export interface StreamState {
+  text: string;
+  reasoning: string;
+  tps: number;
+}
+
+const EMPTY_STREAM: StreamState = { text: '', reasoning: '', tps: 0 };
+const TPS_WARMUP_SEC = 0.5;
+
+export interface StreamConsumerState {
+  streaming: boolean;
+  error: string | null;
+  stream: StreamState;
+  /**
+   * Run the agent against `messages` and stream events into local state.
+   * Returns the final message array (or null if the agent didn't produce one,
+   * e.g. on abort). Throws are caught and reported via `error`.
+   */
+  runStream: (
+    messages: ChatMessage[],
+    config: ProviderConfig,
+    model: string,
+    signal: AbortSignal,
+    registry: PluginRegistry,
+    onMessages: (messages: ChatMessage[]) => void,
+  ) => Promise<ChatMessage[] | null>;
+  resetError: () => void;
+}
+
+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 '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 > TPS_WARMUP_SEC ? 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;
+}
+
+/**
+ * Owns the in-flight streaming view: which tokens have been received, the
+ * tokens-per-second meter, error text, and the streaming flag. Decoupled
+ * from message persistence so it can be reused by single-shot agents or
+ * test harnesses.
+ */
+export function useStreamConsumer(): StreamConsumerState {
+  const [streaming, setStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [stream, setStream] = useState<StreamState>(EMPTY_STREAM);
+
+  const resetError = useCallback(() => setError(null), []);
+
+  const runStream = useCallback(
+    async (
+      messages: ChatMessage[],
+      config: ProviderConfig,
+      model: string,
+      signal: AbortSignal,
+      registry: PluginRegistry,
+      onMessages: (messages: ChatMessage[]) => void,
+    ): Promise<ChatMessage[] | null> => {
+      setStream(EMPTY_STREAM);
+      setError(null);
+      setStreaming(true);
+      try {
+        return await consumeAgent(runAgent(messages, config, model, signal, registry), setStream, onMessages);
+      } catch (err) {
+        if (!(err instanceof Error && err.name === 'AbortError')) {
+          setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+        return null;
+      } finally {
+        setStreaming(false);
+        // Preserve partial output on abort so the user can see what arrived;
+        // clear it on clean completion so the persisted assistant message
+        // doesn't render twice.
+        if (!signal.aborted) {
+          setStream((s) => ({ ...s, text: '', reasoning: '' }));
+        }
+      }
+    },
+    [],
+  );
+
+  return { streaming, error, stream, runStream, resetError };
+}

package/src/tui/components/chat/ChatPanel.tsx

@@ -1,12 +1,10 @@
-import { type DOMElement as InkDOMElement, useInput } from 'ink';
 import type { PluginRegistry } from 'mu-agents';
 import type { ChatMessage, ProviderConfig } from 'mu-provider';
-import { useRef } from 'react';
-import { ChatContext } from '../../context/chat';
-import { useScroll } from '../../hooks/useScroll';
-import { useMeasure, useTerminalSize } from '../../hooks/useTerminal';
-import type { InkUIService } from '../../services/uiService';
-import { useChat } from '../../useChat';
+import type { ShutdownFn } from '../../../app/shutdown';
+import { ChatContext } from '../../chat/ChatContext';
+import { ToolDisplayProvider, useToolDisplayMap } from '../../chat/ToolDisplayContext';
+import { useChatPanel } from '../../chat/useChatPanel';
+import type { InkUIService } from '../../plugins/InkUIService';
 import { ChatPanelBody } from './ChatPanelBody';
 
 export function ChatPanel({
@@ -14,46 +12,22 @@ export function ChatPanel({
   initialMessages,
   registry,
   uiService,
+  shutdown,
 }: {
   config: ProviderConfig;
   initialMessages?: ChatMessage[];
   registry: PluginRegistry;
   uiService?: InkUIService;
+  shutdown?: ShutdownFn;
 }) {
-  const ctx = useChat(config, registry, initialMessages);
-  const { width, height } = useTerminalSize();
-  const viewRef = useRef<InkDOMElement>(null);
-  const contentRef = useRef<InkDOMElement>(null);
-  const { viewHeight, contentHeight } = useMeasure(
-    viewRef,
-    contentRef,
-    [
-      ctx.session.messages.length,
-      ...ctx.session.messages.map((m) => m.content.length),
-      ctx.session.stream.text.length,
-      ctx.session.stream.reasoning?.length ?? 0,
-    ].join('|'),
-  );
-  const { scrollOffset, onScrollUp, onScrollDown } = useScroll(contentHeight, viewHeight);
-
-  const anyModalOpen = ctx.toggles.showModelPicker || ctx.toggles.showSessionPicker;
-  useInput((input, key) => key.ctrl && input === 'c' && ctx.abort.onCtrlC(), { isActive: anyModalOpen });
+  const { ctx, bodyProps } = useChatPanel({ config, initialMessages, registry, uiService, shutdown });
+  const toolDisplays = useToolDisplayMap(registry);
 
   return (
     <ChatContext.Provider value={ctx}>
-      <ChatPanelBody
-        width={width}
-        height={height}
-        viewRef={viewRef}
-        contentRef={contentRef}
-        scrollOffset={scrollOffset}
-        viewHeight={viewHeight}
-        contentHeight={contentHeight}
-        isActive={!anyModalOpen}
-        onScrollUp={onScrollUp}
-        onScrollDown={onScrollDown}
-        uiService={uiService}
-      />
+      <ToolDisplayProvider value={toolDisplays}>
+        <ChatPanelBody {...bodyProps} />
+      </ToolDisplayProvider>
     </ChatContext.Provider>
   );
 }