mu-coding 0.5.0 → 0.9.0

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

@@ -1,5 +1,6 @@
 import { Box, Text, useInput } from 'ink';
 import { useMemo, useState } from 'react';
+import { useTheme } from '../../context/ThemeContext';
 import { sanitizeTerminalInput } from '../../input/sanitize';
 
 interface DropdownItem {
@@ -33,6 +34,7 @@ export function Dropdown({
   onCancel,
   isActive = true,
 }: DropdownProps) {
+  const theme = useTheme();
   const [query, setQuery] = useState('');
   const [index, setIndex] = useState(0);
 
@@ -82,7 +84,7 @@ export function Dropdown({
     if (filtered.length === 0) {
       return (
         <Box paddingX={1}>
-          <Text dimColor={true} italic={true}>
+          <Text color={theme.dropdown.empty} italic={true}>
             No results
           </Text>
         </Box>
@@ -90,7 +92,7 @@ export function Dropdown({
     }
     return visibleItems.map((item, i) => {
       const isSel = i === index - visibleStart;
-      const color = isSel ? 'green' : undefined;
+      const color = isSel ? theme.dropdown.selected : undefined;
       return (
         <Box key={item.value} paddingX={1}>
           <Text color={color} bold={isSel}>
@@ -106,9 +108,11 @@ export function Dropdown({
   return (
     <Box flexDirection="column">
       <Box paddingX={1} marginBottom={1}>
-        <Text dimColor={true}>{placeholder} </Text>
+        <Text color={theme.dropdown.placeholder}>{placeholder} </Text>
         <Text>{query}</Text>
-        <Text inverse={true}>▎</Text>
+        <Text color={theme.dropdown.cursor} inverse={true}>
+          ▎
+        </Text>
       </Box>
       {renderResults()}
       {filtered.length > maxVisible && (

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

@@ -1,5 +1,6 @@
 import { Box, Text, useStdout } from 'ink';
 import type { ReactNode } from 'react';
+import { useTheme } from '../../context/ThemeContext';
 
 interface ModalProps {
   visible: boolean;
@@ -9,6 +10,7 @@ interface ModalProps {
 }
 
 export function Modal({ visible, title, width: requestedWidth, children }: ModalProps) {
+  const theme = useTheme();
   const { stdout } = useStdout();
   const columns = stdout.columns;
   const rows = stdout.rows;
@@ -30,12 +32,12 @@ export function Modal({ visible, title, width: requestedWidth, children }: Modal
       top={0}
       left={0}
     >
-      <Box flexDirection="column" width={modalWidth} backgroundColor="#1a1a1a" paddingX={2} paddingY={1}>
+      <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 dimColor={true}>Esc to close</Text>
+            <Text color={theme.modal.hint}>Esc to close</Text>
           </Box>
         )}
         {children}

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

@@ -1,4 +1,5 @@
 import { Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 import { Dropdown } from './dropdown';
 import { Modal } from './modal';
 
@@ -25,10 +26,11 @@ export function PickerModal({
   onSelect: (value: string) => void;
   onCancel?: () => void;
 }) {
+  const theme = useTheme();
   return (
     <Modal visible={visible} title={title}>
       {items.length === 0 && emptyMessage ? (
-        <Text dimColor={true} italic={true}>
+        <Text color={theme.dropdown.empty} italic={true}>
           {emptyMessage}
         </Text>
       ) : (

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

@@ -1,5 +1,6 @@
 import { Box, Text, useInput, useStdout } from 'ink';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTheme } from '../../context/ThemeContext';
 
 export interface Toast {
   id: number;
@@ -7,28 +8,60 @@ export interface Toast {
   color?: string;
 }
 
+const TOAST_TIMEOUT_MS = 60_000;
+
 let nextId = 0;
 
 export function useToast() {
   const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const show = useCallback((message: string, color?: string) => {
-    const id = nextId++;
-    setToasts((prev) => [...prev, { id, message, color }]);
-  }, []);
+  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) => prev.slice(1));
+    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;
 
@@ -48,14 +81,14 @@ export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismi
     <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} width={maxWidth}>
+          <Box key={t.id} backgroundColor={theme.toast.background} paddingX={2} paddingY={0} width={maxWidth}>
             <Box flexGrow={1} flexShrink={1}>
-              <Text color={t.color ?? 'green'} wrap="wrap">
+              <Text color={t.color ?? theme.toast.defaultColor} wrap="wrap">
                 {t.message}
               </Text>
             </Box>
             <Box marginLeft={1} flexShrink={0}>
-              <Text color="gray" dimColor={true}>
+              <Text color={theme.toast.closeHint} dimColor={true}>
                 [esc]✕
               </Text>
             </Box>

package/src/tui/components/statusBar.tsx

@@ -1,24 +1,40 @@
 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} marginY={1}>
+    <Box flexShrink={0} paddingX={1} marginTop={1}>
+      <Box>{renderZone(left, theme.status.separator)}</Box>
       <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>
-        ))}
+        {renderZone(right, theme.status.separator)}
       </Box>
     </Box>
   );

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

@@ -1,5 +1,6 @@
 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';
@@ -16,6 +17,7 @@ function ConfirmDialog({
   onResolve: (value: unknown) => void;
   onCancel: () => void;
 }) {
+  const theme = useTheme();
   const [selected, setSelected] = useState(0);
 
   useInput((input, key) => {
@@ -42,15 +44,15 @@ function ConfirmDialog({
         </Box>
       )}
       <Box gap={2}>
-        <Text color={selected === 0 ? 'green' : undefined} bold={selected === 0}>
+        <Text color={selected === 0 ? theme.dialog.confirmYes : undefined} bold={selected === 0}>
           {selected === 0 ? '▸ ' : '  '}Yes
         </Text>
-        <Text color={selected === 1 ? 'red' : undefined} bold={selected === 1}>
+        <Text color={selected === 1 ? theme.dialog.confirmNo : undefined} bold={selected === 1}>
           {selected === 1 ? '▸ ' : '  '}No
         </Text>
       </Box>
       <Box marginTop={1}>
-        <Text dimColor={true}>y/n · Enter to confirm · Esc to cancel</Text>
+        <Text color={theme.dialog.hint}>y/n · Enter to confirm · Esc to cancel</Text>
       </Box>
     </Modal>
   );
@@ -96,6 +98,7 @@ function InputDialog({
   onResolve: (value: unknown) => void;
   onCancel: () => void;
 }) {
+  const theme = useTheme();
   const [value, setValue] = useState('');
 
   useInput((input, key) => {
@@ -121,12 +124,14 @@ function InputDialog({
     <Modal visible={true} title={dialog.title}>
       <Box flexDirection="column">
         <Box paddingX={1} marginBottom={1}>
-          {!value && dialog.placeholder && <Text dimColor={true}>{dialog.placeholder}</Text>}
+          {!value && dialog.placeholder && <Text color={theme.dialog.placeholder}>{dialog.placeholder}</Text>}
           {value && <Text>{value}</Text>}
-          <Text inverse={true}>▎</Text>
+          <Text color={theme.dialog.cursor} inverse={true}>
+            ▎
+          </Text>
         </Box>
         <Box>
-          <Text dimColor={true}>Enter to submit · Esc to cancel</Text>
+          <Text color={theme.dialog.hint}>Enter to submit · Esc to cancel</Text>
         </Box>
       </Box>
     </Modal>

package/src/tui/context/ThemeContext.tsx

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

@@ -0,0 +1,87 @@
+/**
+ * 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

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