mu-coding 0.1.0

package/src/singleShot.ts

@@ -0,0 +1,42 @@
+import type { PluginRegistry } from 'mu-agents';
+import type { ChatMessage, ProviderConfig } from 'mu-provider';
+import { listModels, streamChat } from 'mu-provider';
+
+export async function runSingleShot(prompt: string, config: ProviderConfig, registry: PluginRegistry): Promise<void> {
+  const messages: ChatMessage[] = [{ role: 'user', content: prompt }];
+
+  let resolvedModel = config.model;
+  if (!resolvedModel) {
+    const models = await listModels(config.baseUrl);
+    if (models.length === 0) {
+      console.error('Error: no models available at', config.baseUrl);
+      process.exit(1);
+    }
+    resolvedModel = models[0].id;
+  }
+
+  const toolDefinitions = registry.getToolDefinitions();
+
+  let tokens = 0;
+  let hasToolCalls = false;
+  process.stdout.write('mu: ');
+  for await (const chunk of streamChat(messages, config, resolvedModel, {
+    onUsage: (usage) => {
+      tokens = usage.totalTokens;
+    },
+    tools: toolDefinitions,
+  })) {
+    if (chunk.type === 'content') {
+      process.stdout.write(chunk.text);
+    } else if (chunk.type === 'tool_call') {
+      hasToolCalls = true;
+    }
+  }
+  if (hasToolCalls) {
+    process.stderr.write('\n[tool calls made — use interactive mode for tool execution]\n');
+  }
+  process.stdout.write('\n');
+  if (tokens > 0) {
+    process.stderr.write(`(${tokens} tokens)\n`);
+  }
+}

package/src/tui/commands.ts

@@ -0,0 +1,19 @@
+export interface SlashCommand {
+  name: string;
+  description: string;
+  action: string;
+}
+
+const COMMANDS: SlashCommand[] = [
+  { name: '/model', description: 'Select a model', action: 'model' },
+  { name: '/sessions', description: 'List project sessions', action: 'sessions' },
+  { name: '/new', description: 'New conversation', action: 'new' },
+];
+
+export function matchCommands(input: string): SlashCommand[] {
+  if (!input.startsWith('/')) {
+    return [];
+  }
+  const q = input.toLowerCase();
+  return COMMANDS.filter((cmd) => cmd.name.startsWith(q));
+}

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

@@ -0,0 +1,55 @@
+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 { useChat } from '../../useChat';
+import { ChatPanelBody } from './ChatPanelBody';
+
+export function ChatPanel({
+  config,
+  initialMessages,
+  registry,
+}: {
+  config: ProviderConfig;
+  initialMessages?: ChatMessage[];
+  registry: PluginRegistry;
+}) {
+  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 });
+
+  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}
+      />
+    </ChatContext.Provider>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { Box, type DOMElement as InkDOMElement } from 'ink';
+import type { StatusSegment } from 'mu-agents';
+import { useEffect, useState } from 'react';
+import { useChatContext } from '../../context/chat';
+import { MessageView, StatusBar } from '../chatLayout';
+import { InputBox } from '../inputBox';
+import { Pickers } from './Pickers';
+
+interface LayoutProps {
+  width: number;
+  height: number;
+  viewRef: React.RefObject<InkDOMElement | null>;
+  contentRef: React.RefObject<InkDOMElement | null>;
+  scrollOffset: number;
+  viewHeight: number;
+  contentHeight: number;
+  isActive: boolean;
+  onScrollUp: () => void;
+  onScrollDown: () => void;
+}
+
+export function ChatPanelBody(props: LayoutProps) {
+  const { session, models, abort, registry } = useChatContext();
+  const [pluginStatus, setPluginStatus] = useState<StatusSegment[]>([]);
+
+  useEffect(() => {
+    const refresh = () => setPluginStatus(registry.getStatusSegments());
+    refresh();
+    const interval = setInterval(refresh, 2000);
+    return () => clearInterval(interval);
+  }, [registry]);
+
+  return (
+    <Box flexDirection="column" height={props.height} width={props.width}>
+      <MessageView
+        viewRef={props.viewRef}
+        contentRef={props.contentRef}
+        messages={session.messages}
+        streaming={session.streaming}
+        stream={session.stream}
+        error={session.error}
+        scrollOffset={props.scrollOffset}
+        viewHeight={props.viewHeight}
+        contentHeight={props.contentHeight}
+      />
+      <InputBox
+        onSubmit={session.onSend}
+        onScrollUp={props.onScrollUp}
+        onScrollDown={props.onScrollDown}
+        isActive={props.isActive}
+        model={models.currentModel}
+        history={session.inputHistory}
+      />
+      <StatusBar
+        streaming={session.streaming}
+        abortWarning={abort.abortWarning}
+        quitWarning={abort.quitWarning}
+        error={session.error}
+        modelError={models.modelError}
+        totalTokens={session.stream.totalTokens}
+        tokensPerSecond={session.stream.tps}
+        pluginStatus={pluginStatus}
+      />
+      <Pickers />
+    </Box>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { useChatContext } from '../../context/chat';
+import { PickerModal } from '../chatLayout';
+
+export function Pickers() {
+  const { toggles, models, sessions, session } = useChatContext();
+  const sessionItems = useMemo(
+    () =>
+      sessions.map((s) => ({
+        label: s.preview,
+        value: s.path,
+        description: `${s.messageCount} msgs`,
+      })),
+    [sessions],
+  );
+
+  return (
+    <>
+      <PickerModal
+        visible={toggles.showModelPicker}
+        title="Select model"
+        items={models.models.map((m) => ({ label: m.id, value: m.id }))}
+        placeholder="Search models..."
+        onSelect={(id) => {
+          models.selectModel(id);
+          toggles.onTogglePicker();
+        }}
+        onCancel={toggles.onTogglePicker}
+      />
+      <PickerModal
+        visible={toggles.showSessionPicker}
+        title={`Sessions · ${sessions[0]?.project ?? 'project'}`}
+        items={sessionItems}
+        placeholder="Search sessions..."
+        emptyMessage="No sessions found for this project"
+        onSelect={(p) => {
+          session.onLoadSession(p);
+          toggles.onToggleSessionPicker();
+        }}
+        onCancel={toggles.onToggleSessionPicker}
+      />
+    </>
+  );
+}

package/src/tui/components/chatLayout.tsx

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,152 @@
+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 } = 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,
+  });
+
+  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/components/messages/EditOutput.tsx

@@ -0,0 +1,89 @@
+import { Box, Text } from 'ink';
+import { computeDiff, renderDiff } from '../../../diff';
+
+interface EditOutputProps {
+  args: string;
+  content: string;
+  error: boolean;
+}
+
+export function EditOutput({ args, content, error }: EditOutputProps) {
+  let path = '(unknown)';
+  let oldString = '';
+  let newString = '';
+
+  try {
+    const parsed = JSON.parse(args);
+    path = parsed.path ?? '(unknown)';
+    oldString = parsed.old_string ?? '';
+    newString = parsed.new_string ?? '';
+  } catch {
+    // ignore
+  }
+
+  if (error) {
+    return (
+      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+        <Text color="red" bold={true}>
+          ✗ edit_file
+        </Text>
+        <Text dimColor={true}> {path}</Text>
+        <Text dimColor={true} wrap="wrap">
+          {content}
+        </Text>
+      </Box>
+    );
+  }
+
+  const diff = computeDiff(oldString, newString);
+
+  if (diff.lines.length === 0 && diff.totalOldLines > 0 && diff.totalNewLines > 0) {
+    return (
+      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+        <Text color="yellow" bold={true}>
+          ! edit_file
+        </Text>
+        <Text dimColor={true}> {path}</Text>
+        <Text dimColor={true}>
+          Diff too large to display ({diff.totalOldLines} → {diff.totalNewLines} lines)
+        </Text>
+      </Box>
+    );
+  }
+
+  if (diff.lines.length === 0) {
+    return (
+      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+        <Text color="green" bold={true}>
+          ✓ edit_file
+        </Text>
+        <Text dimColor={true}> {path}</Text>
+        <Text dimColor={true}>No changes (content identical)</Text>
+      </Box>
+    );
+  }
+
+  const { lines, truncated } = renderDiff(diff, 30);
+
+  return (
+    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <Text color="green" bold={true}>
+        ✓ edit_file
+      </Text>
+      <Text dimColor={true}> {path}</Text>
+      <Box flexDirection="column" flexShrink={0}>
+        {lines.map((line) => {
+          let color: string | undefined;
+          if (line.startsWith('-')) color = 'red';
+          else if (line.startsWith('+')) color = 'green';
+          return (
+            <Text key={line} color={color} dimColor={color === undefined} wrap="wrap">
+              {line}
+            </Text>
+          );
+        })}
+        {truncated && <Text dimColor={true}>… (truncated, 30 line limit)</Text>}
+      </Box>
+    </Box>
+  );
+}