mu-coding 0.15.0 → 0.16.1

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

@@ -1,125 +0,0 @@
-import { Box, Text, useInput } from 'ink';
-import { useMemo, useState } from 'react';
-import { useTheme } from '../../context/ThemeContext';
-import { sanitizeTerminalInput } from '../../input/sanitize';
-
-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 theme = useTheme();
-  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) return;
-      // Tab is reserved for the input box's "insert two spaces" binding when
-      // dropdowns are not focused; inside a focused dropdown we ignore it
-      // rather than risk inserting whitespace into the query.
-      if (key.tab) return;
-      if (key.escape) {
-        onCancel?.();
-        return;
-      }
-      if (key.return && filtered[index]) {
-        onSelect(filtered[index]);
-        return;
-      }
-      if (key.upArrow) {
-        setIndex((i) => Math.max(0, i - 1));
-        return;
-      }
-      if (key.downArrow) {
-        setIndex((i) => Math.min(filtered.length - 1, i + 1));
-        return;
-      }
-      if (key.backspace) {
-        setQuery((q) => q.slice(0, -1));
-        return;
-      }
-      // Accept multi-char input (paste) into the filter; strip control bytes
-      // and any SGR mouse sequences that may leak through. Single-line: drop \t/\n.
-      if (input) {
-        const clean = sanitizeTerminalInput(input).replace(/[\t\n]/g, '');
-        if (clean) setQuery((q) => q + clean);
-      }
-    },
-    { isActive },
-  );
-
-  function renderResults() {
-    if (filtered.length === 0) {
-      return (
-        <Box paddingX={1}>
-          <Text color={theme.dropdown.empty} italic={true}>
-            No results
-          </Text>
-        </Box>
-      );
-    }
-    return visibleItems.map((item, i) => {
-      const isSel = i === index - visibleStart;
-      const color = isSel ? theme.dropdown.selected : 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 color={theme.dropdown.placeholder}>{placeholder} </Text>
-        <Text>{query}</Text>
-        <Text color={theme.dropdown.cursor} 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/primitives/modal.tsx

@@ -1,47 +0,0 @@
-import { Box, Text, useStdout } from 'ink';
-import type { ReactNode } from 'react';
-import { useTheme } from '../../context/ThemeContext';
-
-interface ModalProps {
-  visible: boolean;
-  title?: string;
-  width?: number;
-  children: ReactNode;
-}
-
-export function Modal({ visible, title, width: requestedWidth, children }: ModalProps) {
-  const theme = useTheme();
-  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={theme.modal.background} paddingX={2} paddingY={1}>
-        {title && (
-          <Box marginBottom={1}>
-            <Text bold={true}>{title}</Text>
-            <Box flexGrow={1} />
-            <Text color={theme.modal.hint}>Esc to close</Text>
-          </Box>
-        )}
-        {children}
-      </Box>
-    </Box>
-  );
-}

package/src/tui/components/primitives/pickerModal.tsx

@@ -1,47 +0,0 @@
-import { Text } from 'ink';
-import { useTheme } from '../../context/ThemeContext';
-import { Dropdown } from './dropdown';
-import { Modal } from './modal';
-
-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;
-}) {
-  const theme = useTheme();
-  return (
-    <Modal visible={visible} title={title}>
-      {items.length === 0 && emptyMessage ? (
-        <Text color={theme.dropdown.empty} italic={true}>
-          {emptyMessage}
-        </Text>
-      ) : (
-        <Dropdown
-          items={items}
-          placeholder={placeholder}
-          isActive={visible}
-          onSelect={(item) => onSelect(item.value)}
-          onCancel={onCancel}
-        />
-      )}
-    </Modal>
-  );
-}

package/src/tui/components/primitives/scrollbar.tsx

@@ -1,27 +0,0 @@
-import { Box, Text } from 'ink';
-
-export 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>
-  );
-}

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

@@ -1,100 +0,0 @@
-import { Box, Text, useInput, useStdout } from 'ink';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useTheme } from '../../context/ThemeContext';
-
-export interface Toast {
-  id: number;
-  message: string;
-  color?: string;
-}
-
-const TOAST_TIMEOUT_MS = 60_000;
-
-let nextId = 0;
-
-export function useToast() {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-  const timersRef = useRef(new Map<number, ReturnType<typeof setTimeout>>());
-
-  const dismiss = useCallback((id: number) => {
-    const timer = timersRef.current.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      timersRef.current.delete(id);
-    }
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  const show = useCallback(
-    (message: string, color?: string) => {
-      const id = nextId++;
-      setToasts((prev) => [...prev, { id, message, color }]);
-      const timer = setTimeout(() => dismiss(id), TOAST_TIMEOUT_MS);
-      timersRef.current.set(id, timer);
-    },
-    [dismiss],
-  );
-
-  const dismissFirst = useCallback(() => {
-    setToasts((prev) => {
-      const [first, ...rest] = prev;
-      if (first) {
-        const timer = timersRef.current.get(first.id);
-        if (timer) {
-          clearTimeout(timer);
-          timersRef.current.delete(first.id);
-        }
-      }
-      return rest;
-    });
-  }, []);
-
-  useEffect(() => {
-    const timers = timersRef.current;
-    return () => {
-      for (const timer of timers.values()) clearTimeout(timer);
-      timers.clear();
-    };
-  }, []);
-
-  return { toasts, show, dismiss, dismissFirst };
-}
-
-export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
-  const theme = useTheme();
-  const { stdout } = useStdout();
-  const columns = stdout.columns;
-
-  useInput((_input, key) => {
-    if (toasts.length > 0 && key.escape) {
-      onDismiss(toasts[0].id);
-    }
-  });
-
-  if (toasts.length === 0) {
-    return null;
-  }
-
-  const maxWidth = Math.min(60, columns - 4);
-
-  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={theme.toast.background} paddingX={2} paddingY={0} width={maxWidth}>
-            <Box flexGrow={1} flexShrink={1}>
-              <Text color={t.color ?? theme.toast.defaultColor} wrap="wrap">
-                {t.message}
-              </Text>
-            </Box>
-            <Box marginLeft={1} flexShrink={0}>
-              <Text color={theme.toast.closeHint} dimColor={true}>
-                [esc]✕
-              </Text>
-            </Box>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
-}

package/src/tui/components/statusBar.tsx

@@ -1,41 +0,0 @@
-import { Box, Text } from 'ink';
-import { useTheme } from '../context/ThemeContext';
-
-export interface StatusBarSegment {
-  text: string;
-  color?: string;
-  dim?: boolean;
-  /** Pin to the left zone of the status bar. Defaults to right-aligned. */
-  align?: 'left' | 'right';
-}
-
-function renderZone(segments: StatusBarSegment[], separatorColor: string) {
-  return segments.map((seg, i) => (
-    // biome-ignore lint/suspicious/noArrayIndexKey: positional static list
-    <Box key={i}>
-      {i > 0 && (
-        <Text color={separatorColor} dimColor={true}>
-          {' '}
-          ·{' '}
-        </Text>
-      )}
-      <Text color={seg.color} dimColor={seg.dim}>
-        {seg.text}
-      </Text>
-    </Box>
-  ));
-}
-
-export function StatusBar({ segments }: { segments: StatusBarSegment[] }) {
-  const theme = useTheme();
-  const left = segments.filter((s) => s.align === 'left');
-  const right = segments.filter((s) => s.align !== 'left');
-  return (
-    <Box flexShrink={0} paddingX={1} marginTop={1}>
-      <Box>{renderZone(left, theme.status.separator)}</Box>
-      <Box justifyContent="flex-end" flexGrow={1}>
-        {renderZone(right, theme.status.separator)}
-      </Box>
-    </Box>
-  );
-}

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

@@ -1,175 +0,0 @@
-import { Box, Text, useInput } from 'ink';
-import { useCallback, useEffect, useState } from 'react';
-import { useTheme } from '../../context/ThemeContext';
-import { sanitizeTerminalInput } from '../../input/sanitize';
-import type { DialogRequest, InkUIService } from '../../plugins/InkUIService';
-import { Dropdown } from '../primitives/dropdown';
-import { Modal } from '../primitives/modal';
-
-// ─── Confirm Dialog ───────────────────────────────────────────────────────────
-
-function ConfirmDialog({
-  dialog,
-  onResolve,
-  onCancel,
-}: {
-  dialog: DialogRequest;
-  onResolve: (value: unknown) => void;
-  onCancel: () => void;
-}) {
-  const theme = useTheme();
-  const [selected, setSelected] = useState(0);
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onCancel();
-    } else if (key.return) {
-      onResolve(selected === 0);
-    } else if (key.leftArrow || input === 'h') {
-      setSelected(0);
-    } else if (key.rightArrow || input === 'l') {
-      setSelected(1);
-    } else if (input === 'y' || input === 'Y') {
-      onResolve(true);
-    } else if (input === 'n' || input === 'N') {
-      onResolve(false);
-    }
-  });
-
-  return (
-    <Modal visible={true} title={dialog.title}>
-      {dialog.message && (
-        <Box marginBottom={1}>
-          <Text>{dialog.message}</Text>
-        </Box>
-      )}
-      <Box gap={2}>
-        <Text color={selected === 0 ? theme.dialog.confirmYes : undefined} bold={selected === 0}>
-          {selected === 0 ? '▸ ' : '  '}Yes
-        </Text>
-        <Text color={selected === 1 ? theme.dialog.confirmNo : undefined} bold={selected === 1}>
-          {selected === 1 ? '▸ ' : '  '}No
-        </Text>
-      </Box>
-      <Box marginTop={1}>
-        <Text color={theme.dialog.hint}>y/n · Enter to confirm · Esc to cancel</Text>
-      </Box>
-    </Modal>
-  );
-}
-
-// ─── Select Dialog ────────────────────────────────────────────────────────────
-
-function SelectDialog({
-  dialog,
-  onResolve,
-  onCancel,
-}: {
-  dialog: DialogRequest;
-  onResolve: (value: unknown) => void;
-  onCancel: () => void;
-}) {
-  const items = (dialog.options ?? []).map((opt) => ({
-    label: opt,
-    value: opt,
-  }));
-
-  return (
-    <Modal visible={true} title={dialog.title}>
-      <Dropdown items={items} placeholder="Filter..." onSelect={(item) => onResolve(item.value)} onCancel={onCancel} />
-    </Modal>
-  );
-}
-
-// ─── Input Dialog ─────────────────────────────────────────────────────────────
-
-function sanitizeDialogInput(text: string): string {
-  // Strip mouse sequences + control bytes via the shared helper, then drop
-  // \t/\n that the shared helper preserves — this dialog is single-line.
-  return sanitizeTerminalInput(text).replace(/[\t\n]/g, '');
-}
-
-function InputDialog({
-  dialog,
-  onResolve,
-  onCancel,
-}: {
-  dialog: DialogRequest;
-  onResolve: (value: unknown) => void;
-  onCancel: () => void;
-}) {
-  const theme = useTheme();
-  const [value, setValue] = useState('');
-
-  useInput((input, key) => {
-    if (key.escape) {
-      onCancel();
-      return;
-    }
-    if (key.return) {
-      onResolve(value || null);
-      return;
-    }
-    if (key.backspace || key.delete) {
-      setValue((v) => v.slice(0, -1));
-      return;
-    }
-    const insert = sanitizeDialogInput(input);
-    if (insert) {
-      setValue((v) => v + insert);
-    }
-  });
-
-  return (
-    <Modal visible={true} title={dialog.title}>
-      <Box flexDirection="column">
-        <Box paddingX={1} marginBottom={1}>
-          {!value && dialog.placeholder && <Text color={theme.dialog.placeholder}>{dialog.placeholder}</Text>}
-          {value && <Text>{value}</Text>}
-          <Text color={theme.dialog.cursor} inverse={true}>
-            ▎
-          </Text>
-        </Box>
-        <Box>
-          <Text color={theme.dialog.hint}>Enter to submit · Esc to cancel</Text>
-        </Box>
-      </Box>
-    </Modal>
-  );
-}
-
-// ─── Dialog Layer ─────────────────────────────────────────────────────────────
-
-export function DialogLayer({ service }: { service: InkUIService }) {
-  const [dialog, setDialog] = useState<DialogRequest | null>(service.currentDialog());
-
-  useEffect(() => {
-    return service.subscribe(() => {
-      setDialog(service.currentDialog());
-    });
-  }, [service]);
-
-  const handleResolve = useCallback(
-    (value: unknown) => {
-      service.resolveDialog(value);
-    },
-    [service],
-  );
-
-  const handleCancel = useCallback(() => {
-    service.cancelDialog();
-  }, [service]);
-
-  if (!dialog) return null;
-
-  switch (dialog.type) {
-    case 'confirm':
-      return <ConfirmDialog dialog={dialog} onResolve={handleResolve} onCancel={handleCancel} />;
-    case 'select':
-      return <SelectDialog dialog={dialog} onResolve={handleResolve} onCancel={handleCancel} />;
-    case 'input':
-      return <InputDialog dialog={dialog} onResolve={handleResolve} onCancel={handleCancel} />;
-    default:
-      return null;
-  }
-}

package/src/tui/context/ThemeContext.tsx

@@ -1,18 +0,0 @@
-import { createContext, type ReactNode, useContext } from 'react';
-import { DEFAULT_THEME } from '../theme/presets';
-import type { Theme } from '../theme/types';
-
-/**
- * Theme is read in many small components, so a dedicated context keeps
- * `ChatContext` focused on session/runtime state and avoids re-renders
- * cascading through unrelated subtrees when chat state changes.
- */
-const ThemeContext = createContext<Theme>(DEFAULT_THEME);
-
-export function ThemeProvider({ theme, children }: { theme: Theme; children: ReactNode }) {
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme(): Theme {
-  return useContext(ThemeContext);
-}

package/src/tui/hooks/useChordKeyboard.ts

@@ -1,87 +0,0 @@
-/**
- * Two-key emacs-style chord prefix.
- *
- * `useChordKeyboard` takes a prefix predicate (e.g. "Ctrl+X") and a map of
- * follow-up handlers. Pressing the prefix arms a chord state for
- * `timeoutMs` (default 1000); the next key event dispatches to the
- * matching handler, or — if nothing matches before the timer fires — the
- * chord is dropped silently.
- *
- * Integrates with Ink's `useInput` so it cooperates with the rest of the
- * keyboard pipeline; keys consumed while armed are swallowed regardless of
- * whether they matched a follow-up handler, so a stray `g` after `Ctrl+X`
- * does not leak into the chat input.
- */
-
-import { type Key, useInput } from 'ink';
-import { useEffect, useRef } from 'react';
-
-export interface ChordKey {
-  /** Lower-case input character, when the press produced one. */
-  input: string;
-  /** Modifiers / arrow keys provided by Ink. */
-  key: Key;
-}
-
-export type ChordPredicate = (k: ChordKey) => boolean;
-export type ChordHandler = () => void;
-
-export interface ChordSpec {
-  /** Predicate matching the prefix (e.g. `({key, input}) => key.ctrl && input === 'x'`). */
-  prefix: ChordPredicate;
-  /**
-   * Follow-up handlers. The first matching predicate (by insertion order)
-   * runs; non-matching follow-ups still consume the key and clear the
-   * armed state — i.e. the chord is "spent" on any keypress.
-   */
-  followUps: Array<{
-    match: ChordPredicate;
-    handler: ChordHandler;
-  }>;
-  /** When false, the hook is dormant. Defaults to `true`. */
-  isActive?: boolean;
-  /** Window after the prefix during which a follow-up is accepted. */
-  timeoutMs?: number;
-}
-
-export function useChordKeyboard(spec: ChordSpec): void {
-  const armedRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const timeoutMs = spec.timeoutMs ?? 1000;
-
-  // Clear any pending timer if the component using the hook unmounts mid-chord.
-  useEffect(() => {
-    return () => {
-      if (armedRef.current) {
-        clearTimeout(armedRef.current);
-        armedRef.current = null;
-      }
-    };
-  }, []);
-
-  useInput(
-    (input, key) => {
-      const event: ChordKey = { input, key };
-
-      if (armedRef.current) {
-        // We're inside the chord window. Any keypress consumes the chord;
-        // dispatch when one of the follow-ups matches.
-        clearTimeout(armedRef.current);
-        armedRef.current = null;
-        for (const fu of spec.followUps) {
-          if (fu.match(event)) {
-            fu.handler();
-            return;
-          }
-        }
-        return;
-      }
-
-      if (spec.prefix(event)) {
-        armedRef.current = setTimeout(() => {
-          armedRef.current = null;
-        }, timeoutMs);
-      }
-    },
-    { isActive: spec.isActive ?? true },
-  );
-}

package/src/tui/hooks/useInputInfoSegments.ts

@@ -1,22 +0,0 @@
-import type { InputInfoSegment } from 'mu-core';
-import { useEffect, useState } from 'react';
-import { useChatContext } from '../chat/ChatContext';
-
-/**
- * Subscribe to the aggregated input-info segments published by plugins via
- * `PluginContext.setInputInfo`. Returns the live snapshot; re-renders on
- * every push from any plugin.
- */
-export function useInputInfoSegments(): InputInfoSegment[] {
-  const { registry } = useChatContext();
-  const [segments, setSegments] = useState<InputInfoSegment[]>(() => registry.getInputInfoSegments());
-
-  useEffect(() => {
-    const unsub = registry.onInputInfoChange(() => {
-      setSegments(registry.getInputInfoSegments());
-    });
-    return unsub;
-  }, [registry]);
-
-  return segments;
-}