mu-coding 0.4.0 → 0.8.0

package/src/tui/components/chatLayout.tsx

@@ -1,192 +0,0 @@
-import type { DOMElement } from 'ink';
-import { Box, Text } from 'ink';
-import type { StatusSegment } from 'mu-agents';
-import type { ChatMessage } from 'mu-provider';
-import type React from 'react';
-import { useSpinner } from '../hooks/useUI';
-import type { StreamState } from '../useChatSession';
-import { MessageItem } from './messages/messageItem';
-import { StreamingOutput } from './messages/streamingOutput';
-import { Dropdown } from './ui/dropdown';
-import { Modal } from './ui/modal';
-
-function Scrollbar({
-  viewHeight,
-  contentHeight,
-  scrollOffset,
-}: {
-  viewHeight: number;
-  contentHeight: number;
-  scrollOffset: number;
-}) {
-  if (contentHeight <= viewHeight || viewHeight < 1) {
-    return null;
-  }
-  const maxScroll = contentHeight - viewHeight;
-  const ratio = scrollOffset / maxScroll;
-  const thumbSize = Math.max(1, Math.round((viewHeight / contentHeight) * viewHeight));
-  const thumbPos = Math.round(ratio * (viewHeight - thumbSize));
-
-  const track = Array.from({ length: viewHeight }, (_, i) => (i >= thumbPos && i < thumbPos + thumbSize ? '┃' : '│'));
-
-  return (
-    <Box flexDirection="column" flexShrink={0} width={1}>
-      <Text>{track.join('')}</Text>
-    </Box>
-  );
-}
-
-export function StatusBar({
-  streaming,
-  abortWarning,
-  quitWarning,
-  error,
-  modelError,
-  totalTokens,
-  tokensPerSecond,
-  pluginStatus,
-}: {
-  streaming: boolean;
-  abortWarning: boolean;
-  quitWarning: boolean;
-  error: string | null;
-  modelError: string | null;
-  totalTokens: number;
-  tokensPerSecond: number;
-  pluginStatus?: StatusSegment[];
-}) {
-  const spinner = useSpinner(streaming);
-  const segments: Array<{ text: string; color?: string; dim?: boolean }> = [];
-  if (streaming) {
-    segments.push({ text: `${spinner} generating`, color: 'yellow' });
-  }
-  if (tokensPerSecond > 0) {
-    segments.push({ text: `${tokensPerSecond} tok/s`, dim: true });
-  }
-  if (abortWarning) {
-    segments.push({ text: 'Esc again to stop', color: 'yellow' });
-  } else if (quitWarning) {
-    segments.push({ text: 'Ctrl+C again to quit', color: 'yellow' });
-  } else if (streaming) {
-    segments.push({ text: 'Esc to stop', dim: true });
-  }
-  if (error) {
-    segments.push({ text: '⚠ error', color: 'red' });
-  }
-  if (modelError) {
-    segments.push({ text: `⚠ ${modelError}`, color: 'red' });
-  }
-
-  if (totalTokens > 0) {
-    segments.push({ text: `${formatTokens(totalTokens)} tokens`, dim: true });
-  }
-  if (pluginStatus) {
-    segments.push(...pluginStatus);
-  }
-
-  return (
-    <Box flexShrink={0} paddingX={1} marginY={1}>
-      <Box justifyContent="flex-end" flexGrow={1}>
-        {segments.map((seg, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: positional static list
-          <Box key={i}>
-            {i > 0 && <Text dimColor={true}> · </Text>}
-            <Text color={seg.color} dimColor={seg.dim}>
-              {seg.text}
-            </Text>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-}
-
-function formatTokens(tokens: number): string {
-  if (tokens >= 1_000_000) {
-    return `${(tokens / 1_000_000).toFixed(1)}M`;
-  }
-  if (tokens >= 1_000) {
-    return `${(tokens / 1_000).toFixed(1)}k`;
-  }
-  return String(tokens);
-}
-
-interface PickerItem {
-  label: string;
-  value: string;
-  description?: string;
-}
-
-export function PickerModal({
-  visible,
-  title,
-  items,
-  placeholder,
-  emptyMessage,
-  onSelect,
-  onCancel,
-}: {
-  visible: boolean;
-  title: string;
-  items: PickerItem[];
-  placeholder: string;
-  emptyMessage?: string;
-  onSelect: (value: string) => void;
-  onCancel?: () => void;
-}) {
-  return (
-    <Modal visible={visible} title={title}>
-      {items.length === 0 && emptyMessage ? (
-        <Text dimColor={true} italic={true}>
-          {emptyMessage}
-        </Text>
-      ) : (
-        <Dropdown
-          items={items}
-          placeholder={placeholder}
-          isActive={visible}
-          onSelect={(item) => onSelect(item.value)}
-          onCancel={onCancel}
-        />
-      )}
-    </Modal>
-  );
-}
-
-export function MessageView({
-  viewRef,
-  contentRef,
-  messages,
-  streaming,
-  stream,
-  error,
-  scrollOffset,
-  viewHeight,
-  contentHeight,
-}: {
-  viewRef: React.RefObject<DOMElement | null>;
-  contentRef: React.RefObject<DOMElement | null>;
-  messages: ChatMessage[];
-  streaming: boolean;
-  stream: StreamState;
-  error: string | null;
-  scrollOffset: number;
-  viewHeight: number;
-  contentHeight: number;
-}) {
-  return (
-    <Box flexGrow={1} overflow="hidden">
-      <Box ref={viewRef} flexDirection="column" flexGrow={1} paddingX={1} overflow="hidden">
-        <Box ref={contentRef} flexDirection="column" flexShrink={0} marginTop={-scrollOffset}>
-          {messages.map((msg, i) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: messages have no stable id
-            <MessageItem key={i} msg={msg} messages={messages} index={i} />
-          ))}
-          {streaming && <StreamingOutput currentText={stream.text} currentReasoning={stream.reasoning} />}
-          {error && <Text color="red">Error: {error}</Text>}
-        </Box>
-      </Box>
-      <Scrollbar viewHeight={viewHeight} contentHeight={contentHeight} scrollOffset={scrollOffset} />
-    </Box>
-  );
-}

package/src/tui/components/inputBox.tsx

@@ -1,153 +0,0 @@
-import { Box, Text } from 'ink';
-import type { SlashCommand } from '../commands';
-import { useChatContext } from '../context/chat';
-import { type InputActions, useInputHandler } from '../hooks/useInputHandler';
-
-interface InputBoxProps {
-  onSubmit: (text: string) => void;
-  onScrollUp?: () => void;
-  onScrollDown?: () => void;
-  isActive?: boolean;
-  model?: string;
-  history?: string[];
-}
-
-function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; selectedIndex: number }) {
-  if (!commands.length) {
-    return null;
-  }
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      {commands.map((cmd, i) => (
-        <Box key={cmd.name} paddingX={1}>
-          <Text color={i === selectedIndex ? 'green' : undefined} bold={i === selectedIndex}>
-            {i === selectedIndex ? '▸ ' : '  '}
-            {cmd.name}
-          </Text>
-          <Text dimColor={true}> {cmd.description}</Text>
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
-function InputFooter({
-  model,
-  attachmentName,
-  attachmentError,
-  hasContent,
-  isCommandMode,
-}: {
-  model: string;
-  attachmentName: string | null;
-  attachmentError: string | null;
-  hasContent: boolean;
-  isCommandMode: boolean;
-}) {
-  const hint = hasContent
-    ? isCommandMode
-      ? '↑↓ select · Enter execute'
-      : 'Enter to send · Shift+Enter for newline'
-    : 'Type / for commands';
-
-  return (
-    <Box justifyContent="space-between">
-      <Box gap={1}>
-        {model && (
-          <Text color="white" bold={true}>
-            {model}
-          </Text>
-        )}
-        {attachmentName && <Text color="cyan">📷 {attachmentName}</Text>}
-        {attachmentError && <Text color="red">{attachmentError}</Text>}
-      </Box>
-      <Text dimColor={true}>{hint}</Text>
-    </Box>
-  );
-}
-
-function InputDisplay({
-  value,
-  isCommandMode,
-  streaming,
-  isActive,
-}: {
-  value: string;
-  isCommandMode: boolean;
-  streaming: boolean;
-  isActive: boolean;
-}) {
-  const showCursor = !streaming && isActive;
-  if (!value.length) {
-    return <Text>{showCursor && <Text inverse={true}>▎</Text>}</Text>;
-  }
-  const lines = value.split('\n');
-  return (
-    <>
-      {lines.map((line, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: static input display lines
-        <Text key={`${i}-${line}`} wrap="wrap">
-          {i === 0 && isCommandMode ? <Text color="green">{line}</Text> : line}
-          {i === lines.length - 1 && showCursor && <Text inverse={true}>▎</Text>}
-        </Text>
-      ))}
-    </>
-  );
-}
-
-export function InputBox({
-  onSubmit,
-  onScrollUp,
-  onScrollDown,
-  isActive = true,
-  model = '',
-  history = [],
-}: InputBoxProps) {
-  const { session, toggles, attachment, models, abort, registry } = useChatContext();
-
-  const actions: InputActions = {
-    onCtrlC: abort.onCtrlC,
-    onEsc: abort.onEsc,
-    onPaste: attachment.onPaste,
-    onNew: session.onNew,
-    onCycleModel: models.cycleModel,
-    onTogglePicker: toggles.onTogglePicker,
-    onToggleSessionPicker: toggles.onToggleSessionPicker,
-    onScrollUp,
-    onScrollDown,
-    modelCount: models.models.length,
-  };
-
-  const { value, commands, cmdIndex, isCommandMode } = useInputHandler({
-    isActive,
-    streaming: session.streaming,
-    history,
-    actions,
-    onSubmit,
-    pluginCommands: registry.getCommands(),
-  });
-
-  return (
-    <Box
-      flexDirection="column"
-      flexShrink={0}
-      backgroundColor="#222222"
-      paddingX={1}
-      paddingY={1}
-      marginX={1}
-      marginTop={1}
-    >
-      {isCommandMode && <CommandHints commands={commands} selectedIndex={cmdIndex} />}
-      <Box flexDirection="column" minHeight={2}>
-        <InputDisplay value={value} isCommandMode={isCommandMode} streaming={session.streaming} isActive={isActive} />
-      </Box>
-      <InputFooter
-        model={model}
-        attachmentName={attachment.attachment?.name ?? null}
-        attachmentError={attachment.attachmentError}
-        hasContent={value.length > 0}
-        isCommandMode={isCommandMode}
-      />
-    </Box>
-  );
-}

package/src/tui/hooks/useInputHandler.ts

@@ -1,268 +0,0 @@
-import { type Key, useInput, useStdin } from 'ink';
-import type { SlashCommand as PluginSlashCommand } from 'mu-agents';
-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;
-  pluginCommands?: PluginSlashCommand[];
-}
-
-// 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();
-  }
-}
-
-function executeCommand(cmd: SlashCommand, args: string, actions: InputActions): void {
-  if (cmd.execute) {
-    cmd.execute(args);
-  } else if (cmd.action) {
-    const actionKey = COMMAND_ACTIONS[cmd.action];
-    if (actionKey) {
-      (actions[actionKey] as (() => void) | undefined)?.();
-    }
-  }
-}
-
-export function useInputHandler(options: UseInputHandlerOptions): InputState {
-  const { isActive, streaming, history, actions, onSubmit, pluginCommands } = 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(), pluginCommands), [value, pluginCommands]);
-  const isCommandMode = commands.length > 0 && value.trim().startsWith('/');
-
-  const submit = useCallback(() => {
-    if (streaming) {
-      return;
-    }
-    if (isCommandMode) {
-      const cmd = commands[cmdIndex];
-      if (cmd) {
-        const args = value.trim().slice(cmd.name.length).trim();
-        setValue('');
-        executeCommand(cmd, args, actions);
-      }
-      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/useChat.ts

@@ -1,52 +0,0 @@
-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,
-  };
-}