mu-coding 0.8.0 → 0.9.0

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;
+}

package/src/tui/input/InputBoxView.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from 'ink';
-import type { MentionCompletion } from 'mu-core';
+import type { InputInfoSegment, MentionCompletion } from 'mu-core';
 import { useTheme } from '../context/ThemeContext';
 import type { Theme } from '../theme/types';
 import type { SlashCommand } from './commands';
@@ -19,6 +19,7 @@ export interface InputBoxViewProps {
   streaming: boolean;
   isActive: boolean;
   model: string;
+  infoSegments: InputInfoSegment[];
   attachmentName: string | null;
   attachmentError: string | null;
   mentions: MentionPickerView | null;
@@ -51,22 +52,69 @@ function CommandHints({
   );
 }
 
+/**
+ * Render a label with the substring matching `partial` (case-insensitive)
+ * highlighted using the same accent color the picker uses for the selected
+ * row. Preserves the original casing of the label since we only slice it.
+ */
+function renderHighlightedLabel(label: string, partial: string, theme: Theme) {
+  if (!partial) return <>{label}</>;
+  const idx = label.toLowerCase().indexOf(partial.toLowerCase());
+  if (idx < 0) return <>{label}</>;
+  const head = label.slice(0, idx);
+  const match = label.slice(idx, idx + partial.length);
+  const tail = label.slice(idx + partial.length);
+  return (
+    <>
+      {head}
+      <Text color={theme.input.commandHighlight} bold={true}>
+        {match}
+      </Text>
+      {tail}
+    </>
+  );
+}
+
 function MentionHints({ mentions, theme }: { mentions: MentionPickerView; theme: Theme }) {
   if (!mentions.completions.length) {
     return null;
   }
+  // Group completions by category while preserving the global index so
+  // ↑/↓ navigation still maps to the correct entry. When only one
+  // category is present we hide the header to keep the dropdown compact.
+  const grouped = new Map<string, { c: MentionCompletion; i: number }[]>();
+  mentions.completions.forEach((c, i) => {
+    const key = c.category ?? '';
+    const arr = grouped.get(key);
+    if (arr) arr.push({ c, i });
+    else grouped.set(key, [{ c, i }]);
+  });
+  const showHeaders = grouped.size > 1;
+  const sections = Array.from(grouped.entries());
   return (
     <Box flexDirection="column" marginBottom={1}>
-      {mentions.completions.map((c, i) => (
-        <Box key={c.value} paddingX={1}>
-          <Text
-            color={i === mentions.selectedIndex ? theme.input.commandHighlight : undefined}
-            bold={i === mentions.selectedIndex}
-          >
-            {i === mentions.selectedIndex ? '▸ @' : '  @'}
-            {c.label ?? c.value}
-          </Text>
-          {c.description && <Text dimColor={true}> {c.description}</Text>}
+      {sections.map(([category, items]) => (
+        <Box key={category || 'default'} flexDirection="column">
+          {showHeaders && category && (
+            <Box paddingX={1}>
+              <Text dimColor={true} bold={true}>
+                {category}
+              </Text>
+            </Box>
+          )}
+          {items.map(({ c, i }) => {
+            const selected = i === mentions.selectedIndex;
+            const labelText = c.label ?? c.value;
+            return (
+              <Box key={`${category}:${c.value}`} paddingX={1}>
+                <Text wrap="truncate-start" color={selected ? theme.input.commandHighlight : undefined} bold={selected}>
+                  {selected ? '▸ @' : '  @'}
+                  {renderHighlightedLabel(labelText, mentions.partial, theme)}
+                </Text>
+                {c.description && <Text dimColor={true}> {c.description}</Text>}
+              </Box>
+            );
+          })}
         </Box>
       ))}
     </Box>
@@ -75,6 +123,7 @@ function MentionHints({ mentions, theme }: { mentions: MentionPickerView; theme:
 
 function InputFooter({
   model,
+  infoSegments,
   attachmentName,
   attachmentError,
   hasContent,
@@ -83,6 +132,7 @@ function InputFooter({
   theme,
 }: {
   model: string;
+  infoSegments: InputInfoSegment[];
   attachmentName: string | null;
   attachmentError: string | null;
   hasContent: boolean;
@@ -91,16 +141,21 @@ function InputFooter({
   theme: Theme;
 }) {
   const hint = hasMentions
-    ? '↑↓ select · Tab/Enter accept'
+    ? '↑↓ · Tab accept'
     : hasContent
       ? isCommandMode
-        ? '↑↓ select · Enter execute'
-        : 'Enter to send · Shift+Enter for newline · ←→ move'
-      : 'Type / for commands · @ for mentions';
+        ? '↑↓ · Enter run'
+        : ''
+      : '/ commands · @ mentions';
 
   return (
     <Box justifyContent="space-between">
       <Box gap={1}>
+        {infoSegments.map((seg) => (
+          <Text key={seg.key} color={seg.color} bold={seg.bold}>
+            {seg.text}
+          </Text>
+        ))}
         {model && (
           <Text color={theme.input.modelLabel} bold={true}>
             {model}
@@ -225,6 +280,7 @@ export function InputBoxView(props: InputBoxViewProps) {
       </Box>
       <InputFooter
         model={props.model}
+        infoSegments={props.infoSegments}
         attachmentName={props.attachmentName}
         attachmentError={props.attachmentError}
         hasContent={props.value.length > 0}

package/src/tui/input/commands.ts

@@ -20,6 +20,11 @@ export const BUILTIN_COMMANDS: SlashCommand[] = [
   { name: '/model', description: 'Select a model', invoke: (a) => a.onTogglePicker?.() },
   { name: '/sessions', description: 'List project sessions', invoke: (a) => a.onToggleSessionPicker?.() },
   { name: '/new', description: 'New conversation', invoke: (a) => a.onNew?.() },
+  {
+    name: '/compact',
+    description: 'Summarize the conversation and replace history with the summary (frees context)',
+    invoke: (a) => a.onCompact?.(),
+  },
   {
     name: '/context',
     description: 'Show the LLM context (system prompt, messages, tools) as plain text',

package/src/tui/input/useInputBox.ts

@@ -1,3 +1,4 @@
+import type { InputInfoSegment } from 'mu-core';
 import { useCallback, useMemo, useRef } from 'react';
 import { useChatContext } from '../chat/ChatContext';
 import { dumpContext } from './dumpContext';
@@ -14,6 +15,12 @@ export interface InputBoxProps {
   isActive?: boolean;
   model?: string;
   history?: string[];
+  /**
+   * Extra info chips rendered in the footer (before the model). Generic
+   * mechanism for upstream consumers to surface context (active agent,
+   * branch, ...) without `InputBox` knowing what they are.
+   */
+  infoSegments?: InputInfoSegment[];
 }
 
 interface BufferDraft {
@@ -24,7 +31,9 @@ interface BufferDraft {
 /**
  * Replace `[triggerStart, cursor)` (the `<trigger><partial>` token) with the
  * chosen completion value plus a trailing space, so the user is left in a
- * sensible position for further input.
+ * sensible position for further input. File completions drop the trigger
+ * (`@`) entirely — the path stands alone in the prompt — while other
+ * categories (agents) keep the `@` prefix as a visible marker.
  */
 function applyMention(
   value: string,
@@ -32,10 +41,12 @@ function applyMention(
   cursor: number,
   trigger: string,
   completion: string,
+  category: string | undefined,
 ): BufferDraft {
   const before = value.slice(0, triggerStart);
   const after = value.slice(cursor);
-  const insertion = `${trigger}${completion} `;
+  const keepTrigger = category !== 'files';
+  const insertion = `${keepTrigger ? trigger : ''}${completion} `;
   return { value: before + insertion + after, cursor: triggerStart + insertion.length };
 }
 
@@ -65,7 +76,14 @@ function buildMentionMode(mentions: MentionPickerState, input: InputHandle): Men
       const completion = mentions.completions[mentions.selectedIndex];
       const trig = mentions.trigger;
       if (!(completion && trig)) return;
-      const draft = applyMention(input.value, mentions.triggerStart, input.cursor, trig, completion.value);
+      const draft = applyMention(
+        input.value,
+        mentions.triggerStart,
+        input.cursor,
+        trig,
+        completion.value,
+        completion.category,
+      );
       input.setBuffer(draft.value, draft.cursor);
     },
   };
@@ -90,6 +108,9 @@ function useInputActions(deps: ActionDeps): InputActions {
       onEsc: abort.onEsc,
       onPaste: attachment.onPaste,
       onNew: session.onNew,
+      onCompact: () => {
+        void session.onCompact();
+      },
       onCycleModel: models.cycleModel,
       onTogglePicker: toggles.onTogglePicker,
       onToggleSessionPicker: toggles.onToggleSessionPicker,
@@ -103,6 +124,7 @@ function useInputActions(deps: ActionDeps): InputActions {
       abort.onEsc,
       attachment.onPaste,
       session.onNew,
+      session.onCompact,
       models.cycleModel,
       models.models.length,
       toggles.onTogglePicker,
@@ -114,6 +136,8 @@ function useInputActions(deps: ActionDeps): InputActions {
   );
 }
 
+const EMPTY_SEGMENTS: InputInfoSegment[] = [];
+
 export function useInputBox({
   onSubmit,
   onScrollUp,
@@ -121,6 +145,7 @@ export function useInputBox({
   isActive = true,
   model = '',
   history = [],
+  infoSegments = EMPTY_SEGMENTS,
 }: InputBoxProps): InputBoxViewProps {
   const { config, session, toggles, attachment, models, abort, registry, uiService } = useChatContext();
   // Ref pattern: the mention controls depend on the input handler's
@@ -193,6 +218,7 @@ export function useInputBox({
     streaming: session.streaming,
     isActive,
     model,
+    infoSegments,
     attachmentName: attachment.attachment?.name ?? null,
     attachmentError: attachment.attachmentError,
     mentions:

package/src/tui/input/useInputHandler.ts

@@ -28,6 +28,7 @@ export interface InputActions {
   onCtrlC?: () => void;
   onPaste?: () => void;
   onNew?: () => void;
+  onCompact?: () => void;
   onCycleModel?: () => void;
   onTogglePicker?: () => void;
   onToggleSessionPicker?: () => void;

package/src/tui/input/useMentionPicker.ts

@@ -79,25 +79,37 @@ export function useMentionPicker(registry: PluginRegistry, value: string, cursor
       return;
     }
     const partial = value.slice(match.start + 1, cursor);
-    const provider = providers.find((p) => p.trigger === match.trigger);
-    if (!provider) {
+    const matching = providers.filter((p) => p.trigger === match.trigger);
+    if (matching.length === 0) {
       setBase(EMPTY);
       return;
     }
     let cancelled = false;
-    Promise.resolve(provider.provider(partial))
-      .then((completions) => {
-        if (cancelled) return;
-        setBase({
-          trigger: match.trigger,
-          partial,
-          completions,
-          triggerStart: match.start,
-        });
-      })
-      .catch(() => {
-        if (!cancelled) setBase(EMPTY);
+    // Run every provider that registered for this trigger and concatenate
+    // results in registration order. Providers tag completions with
+    // `category` so the picker can render section headers (e.g. agents
+    // first, then files) without the picker hard-coding any plugin id.
+    Promise.all(
+      matching.map(async (entry) => {
+        try {
+          const out = await Promise.resolve(entry.provider(partial));
+          // Default the category to the plugin name so legacy providers
+          // that don't set `category` still get visually grouped.
+          return out.map((c) => ({ ...c, category: c.category ?? entry.plugin }));
+        } catch {
+          return [];
+        }
+      }),
+    ).then((groups) => {
+      if (cancelled) return;
+      const completions = groups.flat();
+      setBase({
+        trigger: match.trigger,
+        partial,
+        completions,
+        triggerStart: match.start,
       });
+    });
     return () => {
       cancelled = true;
     };

package/src/tui/renderApp.tsx

@@ -1,7 +1,10 @@
 import { type Instance, render } from 'ink';
+import { type SubagentRunRegistry, SubagentRunsProvider } from 'mu-agents';
 import type { ChatMessage, PluginRegistry } from 'mu-core';
+import type { ReactNode } from 'react';
 import type { ShutdownFn } from '../app/shutdown';
 import type { AppConfig } from '../config/index';
+import type { SessionPathHolder } from '../runtime/createRegistry';
 import type { HostMessageBus } from '../runtime/messageBus';
 import { ChatPanel } from './components/chat/ChatPanel';
 import { ThemeProvider } from './context/ThemeContext';
@@ -15,6 +18,19 @@ interface RenderAppOptions {
   messageBus: HostMessageBus;
   uiService: InkUIService;
   shutdown: ShutdownFn;
+  sessionPathHolder?: SessionPathHolder;
+  subagentRuns?: SubagentRunRegistry;
+}
+
+/**
+ * Optionally wrap children with the subagent-runs provider so the
+ * `↳ subagent` header renderer can subscribe to live status updates.
+ * Wrapping is conditional because hosts that disabled the agent plugin
+ * have no registry to provide.
+ */
+function withSubagentProvider(runs: SubagentRunRegistry | undefined, children: ReactNode): ReactNode {
+  if (!runs) return <>{children}</>;
+  return <SubagentRunsProvider registry={runs}>{children}</SubagentRunsProvider>;
 }
 
 /**
@@ -26,14 +42,19 @@ export function renderApp(options: RenderAppOptions): Instance {
   const theme = resolveTheme(options.config.theme);
   return render(
     <ThemeProvider theme={theme}>
-      <ChatPanel
-        config={options.config}
-        initialMessages={options.initialMessages}
-        registry={options.registry}
-        messageBus={options.messageBus}
-        uiService={options.uiService}
-        shutdown={options.shutdown}
-      />
+      {withSubagentProvider(
+        options.subagentRuns,
+        <ChatPanel
+          config={options.config}
+          initialMessages={options.initialMessages}
+          registry={options.registry}
+          messageBus={options.messageBus}
+          uiService={options.uiService}
+          shutdown={options.shutdown}
+          sessionPathHolder={options.sessionPathHolder}
+          subagentRuns={options.subagentRuns}
+        />,
+      )}
     </ThemeProvider>,
     {
       exitOnCtrlC: false,

package/src/tui/theme/presets.ts

@@ -28,7 +28,7 @@ export const DEFAULT_THEME: Theme = {
   tool: {
     success: 'green',
     error: 'red',
-    previewBackground: '#111111',
+    previewBackground: '#2a2a2a',
     previewText: 'white',
     summaryDim: 'gray',
     warning: 'yellow',
@@ -69,6 +69,17 @@ export const DEFAULT_THEME: Theme = {
   status: {
     separator: 'gray',
   },
+  markdown: {
+    heading: 'cyan',
+    codeBackground: '#2a2a2a',
+    codeText: 'yellow',
+    codeBlockBackground: '#2a2a2a',
+    codeBlockText: 'white',
+    link: 'cyan',
+    blockquote: 'gray',
+    bullet: 'cyan',
+    tableBorder: 'gray',
+  },
   common: {
     error: 'red',
     warning: 'yellow',

package/src/tui/theme/types.ts

@@ -79,6 +79,27 @@ interface ThemeStatus {
   separator: string;
 }
 
+interface ThemeMarkdown {
+  /** Heading text color (h1/h2/h3 share this color, h1 is also bold). */
+  heading: string;
+  /** Inline code background. */
+  codeBackground: string;
+  /** Inline code text color. */
+  codeText: string;
+  /** Fenced code-block background. */
+  codeBlockBackground: string;
+  /** Fenced code-block text color. */
+  codeBlockText: string;
+  /** Link `[label](url)` rendering — label color. */
+  link: string;
+  /** Blockquote (`> …`) text color (also dimmed). */
+  blockquote: string;
+  /** List bullet color. */
+  bullet: string;
+  /** Table border color. */
+  tableBorder: string;
+}
+
 interface ThemeCommon {
   error: string;
   warning: string;
@@ -99,6 +120,7 @@ export interface Theme {
   dialog: ThemeDialog;
   diff: ThemeDiff;
   status: ThemeStatus;
+  markdown: ThemeMarkdown;
   common: ThemeCommon;
 }