mu-coding 0.1.0

package/src/tui/components/messages/ReadOutput.tsx

@@ -0,0 +1,43 @@
+import { Box, Text } from 'ink';
+
+interface ReadOutputProps {
+  args: string;
+  error: boolean;
+}
+
+export function ReadOutput({ args, error }: ReadOutputProps) {
+  let paths: string[] = ['(unknown)'];
+  let startLine: number | undefined;
+  let endLine: number | undefined;
+
+  try {
+    const parsed = JSON.parse(args);
+    const p = parsed.path;
+    paths = Array.isArray(p) ? p : [p];
+    startLine = parsed.start;
+    endLine = parsed.end;
+  } catch {
+    // ignore
+  }
+
+  const rangeLabel = startLine != null && endLine != null ? ` (lines ${startLine}-${endLine})` : '';
+
+  return (
+    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <Text dimColor={true} wrap="wrap">
+        <Text color={error ? 'red' : 'green'} bold={true}>
+          {error ? '✗' : '✓'} read_file
+        </Text>{' '}
+        {paths.length > 1 ? `(${paths.length} files)` : ''}
+        {paths.length > 1 ? '\n' : ''}
+        {paths.map((p) => (
+          <Text key={p} dimColor={true} wrap="wrap">
+            {paths.length > 1 ? '  • ' : ''}
+            {p}
+          </Text>
+        ))}
+        {rangeLabel}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/WriteOutput.tsx

@@ -0,0 +1,68 @@
+import { Box, Text } from 'ink';
+
+const PREVIEW_LINES = 30;
+
+interface WriteOutputProps {
+  args: string;
+  content: string;
+  error: boolean;
+  expanded: boolean;
+}
+
+export function WriteOutput({ args, content, error, expanded }: WriteOutputProps) {
+  let path = '(unknown)';
+  try {
+    const parsed = JSON.parse(args);
+    path = parsed.path ?? '(unknown)';
+  } catch {
+    // ignore
+  }
+
+  if (error) {
+    return (
+      <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+        <Text color="red" bold={true}>
+          ✗ write_file
+        </Text>
+        <Text dimColor={true} wrap="wrap">
+          {content}
+        </Text>
+      </Box>
+    );
+  }
+
+  const lines = content.split('\n');
+  const totalLines = lines.length;
+  const preview = lines.slice(0, PREVIEW_LINES).join('\n');
+  const hasMore = totalLines > PREVIEW_LINES;
+
+  return (
+    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      <Text color="green" bold={true}>
+        ✓ write_file
+      </Text>
+      <Text dimColor={true}> {path}</Text>
+      <Box flexDirection="column" flexShrink={0}>
+        <Text dimColor={true}>
+          {totalLines} line{totalLines !== 1 ? 's' : ''}
+        </Text>
+        <Box flexDirection="column" flexShrink={0}>
+          <Text dimColor={true} wrap="wrap">
+            {expanded ? content : preview}
+          </Text>
+          {hasMore && !expanded && <Text dimColor={true}>… ({totalLines - PREVIEW_LINES} more lines)</Text>}
+          {!expanded && (
+            <Box>
+              <Text color="cyan"> [Enter] show more </Text>
+            </Box>
+          )}
+          {expanded && (
+            <Box>
+              <Text color="cyan"> [Enter] show less </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/messages/assistantMessage.tsx

@@ -0,0 +1,24 @@
+import { Box, Text } from 'ink';
+import type { ChatMessage } from 'mu-provider';
+import React from 'react';
+import { ReasoningBlock } from './reasoningBlock';
+import { ToolCallBlock } from './toolCallBlock';
+
+export const AssistantMessage: React.FC<{
+  msg: ChatMessage;
+  toolMessages?: ChatMessage[];
+}> = React.memo(function AssistantMessage({ msg, toolMessages }) {
+  return (
+    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      {msg.reasoning && <ReasoningBlock reasoning={msg.reasoning} />}
+      {msg.toolCalls?.length ? (
+        <Box flexDirection="column" marginBottom={1}>
+          {msg.toolCalls.map((tc, i) => (
+            <ToolCallBlock key={tc.id} toolCall={tc} toolMsg={toolMessages?.[i]} />
+          ))}
+        </Box>
+      ) : null}
+      {msg.content && <Text wrap="wrap">{msg.content}</Text>}
+    </Box>
+  );
+});

package/src/tui/components/messages/messageItem.tsx

@@ -0,0 +1,36 @@
+import type { ChatMessage } from 'mu-provider';
+import React from 'react';
+import { AssistantMessage } from './assistantMessage';
+import { UserMessage } from './userMessage';
+
+export const MessageItem: React.FC<{
+  msg: ChatMessage;
+  messages: ChatMessage[];
+  index: number;
+}> = React.memo(function MessageItem({ msg, messages, index }) {
+  // Tool result messages are rendered inline within ToolCallBlock
+  if (msg.role === 'tool') {
+    return null;
+  }
+
+  // Check if this assistant message has tool calls
+  if (msg.role === 'assistant' && msg.toolCalls?.length) {
+    // Collect following tool messages
+    const toolMessages: ChatMessage[] = [];
+    for (let i = index + 1; i < messages.length; i++) {
+      if (messages[i].role === 'tool') {
+        toolMessages.push(messages[i]);
+      } else {
+        break;
+      }
+    }
+
+    return <AssistantMessage msg={msg} toolMessages={toolMessages} />;
+  }
+
+  if (msg.role === 'user') {
+    return <UserMessage msg={msg} />;
+  }
+
+  return <AssistantMessage msg={msg} />;
+});

package/src/tui/components/messages/reasoningBlock.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from 'ink';
+
+export function ReasoningBlock({ reasoning }: { reasoning: string }) {
+  return (
+    <Box flexDirection="column" marginTop={0} marginBottom={1}>
+      <Text color="yellow" italic={true}>
+        thinking
+      </Text>
+      <Text dimColor={true} italic={true} wrap="wrap">
+        {reasoning}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/streamingOutput.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from 'ink';
+import { ReasoningBlock } from './reasoningBlock';
+
+export function StreamingOutput({ currentText, currentReasoning }: { currentText: string; currentReasoning: string }) {
+  return (
+    <Box flexDirection="column" flexShrink={0} marginBottom={1}>
+      {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
+      <Text wrap="wrap">
+        {currentText}
+        <Text inverse={true}>▎</Text>
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/toolCallBlock.tsx

@@ -0,0 +1,99 @@
+import { Box, Text } from 'ink';
+import type { ChatMessage } from 'mu-provider';
+import { useSpinner } from '../../hooks/useUI';
+import { EditOutput } from './EditOutput';
+import { ReadOutput } from './ReadOutput';
+import { WriteOutput } from './WriteOutput';
+
+const TOOL_VERBS: Record<string, string> = {
+  bash: 'running',
+  read_file: 'reading',
+  write_file: 'writing',
+  edit_file: 'editing',
+};
+
+function getToolArgSummary(name: string, args: string): string {
+  if (name === 'bash') {
+    try {
+      const parsed = JSON.parse(args);
+      return parsed.command ?? args;
+    } catch {
+      return args;
+    }
+  }
+  return args;
+}
+
+export function ToolCallBlock({
+  toolCall,
+  toolMsg,
+}: {
+  toolCall: { id: string; function: { name: string; arguments: string } };
+  toolMsg?: ChatMessage;
+}) {
+  const name = toolCall.function.name;
+  const args = toolCall.function.arguments;
+
+  // Find the matching tool result message
+  const result = toolMsg?.toolResult;
+  const hasResult = result !== undefined;
+  const spinner = useSpinner(!hasResult);
+  const verb = TOOL_VERBS[name] ?? 'executing';
+  const argSummary = getToolArgSummary(name, args);
+
+  return (
+    <Box flexDirection="column" flexShrink={0}>
+      {!hasResult ? (
+        <Box>
+          <Text dimColor={true}>
+            {' '}
+            {spinner} {verb}... <Text dimColor={true}>{argSummary}</Text>
+          </Text>
+        </Box>
+      ) : (
+        renderToolOutput(name, args, result.content, result.error ?? false, result.expanded)
+      )}
+    </Box>
+  );
+}
+
+function renderToolOutput(name: string, args: string, content: string, error: boolean, expanded?: boolean) {
+  if (name === 'read_file') {
+    return <ReadOutput args={args} error={error} />;
+  }
+  if (name === 'write_file') {
+    return <WriteOutput args={args} content={content} error={error} expanded={expanded ?? false} />;
+  }
+  if (name === 'edit_file') {
+    return <EditOutput args={args} content={content} error={error} />;
+  }
+
+  // Fallback for bash and unknown tools
+  let command = '';
+  if (name === 'bash') {
+    try {
+      const parsed = JSON.parse(args);
+      command = parsed.command ?? '';
+    } catch {
+      // ignore
+    }
+  }
+
+  const preview = content.length > 200 ? `${content.slice(0, 200)}…` : content;
+  return (
+    <Box flexDirection="column" flexShrink={0}>
+      <Text color={error ? 'red' : 'green'} bold={true}>
+        {error ? '✗' : '✓'} {name}
+        {command && (
+          <>
+            {' '}
+            <Text dimColor={true}>{command}</Text>
+          </>
+        )}
+      </Text>
+      <Box flexDirection="column" backgroundColor="#111111" padding={1} marginTop={1}>
+        <Text color="white">{preview}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/messages/userMessage.tsx

@@ -0,0 +1,29 @@
+import { Box, Text } from 'ink';
+import type { ChatMessage } from 'mu-provider';
+
+export function UserMessage({ msg }: { msg: ChatMessage }) {
+  return (
+    <Box
+      flexDirection="column"
+      flexShrink={0}
+      marginY={1}
+      backgroundColor="#1a1a1a"
+      paddingX={1}
+      paddingY={1}
+      borderLeft={true}
+      borderTop={false}
+      borderBottom={false}
+      borderRight={false}
+      borderColor="yellow"
+      borderStyle="single"
+    >
+      {msg.images && msg.images.length > 0 && (
+        <Box>
+          <Text color="cyan">📷 </Text>
+          <Text color="cyan">{msg.images.map((img) => img.name).join(', ')}</Text>
+        </Box>
+      )}
+      <Text wrap="wrap">{msg.content}</Text>
+    </Box>
+  );
+}

package/src/tui/components/ui/dropdown.tsx

@@ -0,0 +1,96 @@
+import { Box, Text, useInput } from 'ink';
+import { useMemo, useState } from 'react';
+
+interface DropdownItem {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+function matches(query: string) {
+  const q = query.toLowerCase();
+  return (item: DropdownItem) =>
+    item.label.toLowerCase().includes(q) ||
+    item.value.toLowerCase().includes(q) ||
+    item.description?.toLowerCase().includes(q);
+}
+
+interface DropdownProps {
+  items: DropdownItem[];
+  placeholder?: string;
+  maxVisible?: number;
+  onSelect: (item: DropdownItem) => void;
+  onCancel?: () => void;
+  isActive?: boolean;
+}
+
+export function Dropdown({
+  items,
+  placeholder = 'Search...',
+  maxVisible = 8,
+  onSelect,
+  onCancel,
+  isActive = true,
+}: DropdownProps) {
+  const [query, setQuery] = useState('');
+  const [index, setIndex] = useState(0);
+
+  const filtered = useMemo(() => (query ? items.filter(matches(query)) : items), [items, query]);
+
+  const visibleStart = Math.max(0, Math.min(index - Math.floor(maxVisible / 2), filtered.length - maxVisible));
+  const visibleItems = filtered.slice(visibleStart, visibleStart + maxVisible);
+
+  useInput(
+    (input, key) => {
+      if (!isActive || key.tab) return;
+      if (key.escape) onCancel?.();
+      else if (key.return && filtered[index]) onSelect(filtered[index]);
+      else if (key.upArrow) setIndex((i) => Math.max(0, i - 1));
+      else if (key.downArrow) setIndex((i) => Math.min(filtered.length - 1, i + 1));
+      else if (key.backspace) setQuery((q) => q.slice(0, -1));
+      else if (input?.length === 1) setQuery((q) => q + input);
+    },
+    { isActive },
+  );
+
+  function renderResults() {
+    if (filtered.length === 0) {
+      return (
+        <Box paddingX={1}>
+          <Text dimColor={true} italic={true}>
+            No results
+          </Text>
+        </Box>
+      );
+    }
+    return visibleItems.map((item, i) => {
+      const isSel = i === index - visibleStart;
+      const color = isSel ? 'green' : undefined;
+      return (
+        <Box key={item.value} paddingX={1}>
+          <Text color={color} bold={isSel}>
+            {isSel && '▸ '}
+            {item.label}
+            {item.description && <Text dimColor={true}> {item.description}</Text>}
+          </Text>
+        </Box>
+      );
+    });
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box paddingX={1} marginBottom={1}>
+        <Text dimColor={true}>{placeholder} </Text>
+        <Text>{query}</Text>
+        <Text inverse={true}>▎</Text>
+      </Box>
+      {renderResults()}
+      {filtered.length > maxVisible && (
+        <Box paddingX={1} marginTop={1}>
+          <Text dimColor={true}>{filtered.length} items · ↑↓ navigate · Enter select</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/ui/modal.tsx

@@ -0,0 +1,45 @@
+import { Box, Text, useStdout } from 'ink';
+import type { ReactNode } from 'react';
+
+interface ModalProps {
+  visible: boolean;
+  title?: string;
+  width?: number;
+  children: ReactNode;
+}
+
+export function Modal({ visible, title, width: requestedWidth, children }: ModalProps) {
+  const { stdout } = useStdout();
+  const columns = stdout.columns;
+  const rows = stdout.rows;
+
+  if (!visible) {
+    return null;
+  }
+
+  const modalWidth = requestedWidth ?? Math.min(60, columns - 4);
+
+  return (
+    <Box
+      position="absolute"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      width={columns}
+      height={rows}
+      top={0}
+      left={0}
+    >
+      <Box flexDirection="column" width={modalWidth} backgroundColor="#1a1a1a" paddingX={2} paddingY={1}>
+        {title && (
+          <Box marginBottom={1}>
+            <Text bold={true}>{title}</Text>
+            <Box flexGrow={1} />
+            <Text dimColor={true}>Esc to close</Text>
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/ui/toast.tsx

@@ -0,0 +1,45 @@
+import { Box, Text, useStdout } from 'ink';
+import { useState } from 'react';
+
+export interface Toast {
+  id: number;
+  message: string;
+  color?: string;
+}
+
+let nextId = 0;
+
+export function useToast() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const show = (message: string, color?: string, durationMs = 2000) => {
+    const id = nextId++;
+    setToasts((prev) => [...prev, { id, message, color }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, durationMs);
+  };
+
+  return { toasts, show };
+}
+
+export function ToastContainer({ toasts }: { toasts: Toast[] }) {
+  const { stdout } = useStdout();
+  const columns = stdout.columns;
+
+  if (toasts.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box position="absolute" top={0} left={0} width={columns} justifyContent="flex-end" paddingX={2} paddingY={1}>
+      <Box flexDirection="column" gap={1}>
+        {toasts.map((t) => (
+          <Box key={t.id} backgroundColor="#1a1a1a" paddingX={2} paddingY={0}>
+            <Text color={t.color ?? 'green'}>{t.message}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/context/chat.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import type { ChatContextValue } from '../useChat';
+
+export const ChatContext = createContext<ChatContextValue | null>(null);
+
+export function useChatContext() {
+  const ctx = useContext(ChatContext);
+  if (!ctx) throw new Error('useChatContext requires ChatProvider');
+  return ctx;
+}