mu-coding 0.5.0 → 0.8.0

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

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

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

@@ -1,13 +1,17 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../../context/ThemeContext';
 import { ReasoningBlock } from './reasoningBlock';
 
 export function StreamingOutput({ currentText, currentReasoning }: { currentText: string; currentReasoning: string }) {
+  const theme = useTheme();
   return (
     <Box flexDirection="column" flexShrink={0} marginBottom={1}>
       {currentReasoning && <ReasoningBlock reasoning={currentReasoning} />}
       <Text wrap="wrap">
         {currentText}
-        <Text inverse={true}>▎</Text>
+        <Text color={theme.input.cursor} inverse={true}>
+          ▎
+        </Text>
       </Text>
     </Box>
   );

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

@@ -1,7 +1,7 @@
 import { Box, Text } from 'ink';
-import type { ToolDisplayHint } from 'mu-agents';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage, ToolDisplayHint } from 'mu-core';
 import { useToolDisplay } from '../../chat/ToolDisplayContext';
+import { useTheme } from '../../context/ThemeContext';
 import { useSpinner } from '../../hooks/useUI';
 import { EditOutput } from './EditOutput';
 import { ReadOutput } from './ReadOutput';
@@ -90,6 +90,7 @@ interface GenericProps {
 }
 
 function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
+  const theme = useTheme();
   let summary = '';
   const commandField = hint?.fields?.command;
   if (commandField) {
@@ -104,7 +105,7 @@ function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
   const preview = content.length > 200 ? `${content.slice(0, 200)}…` : content;
   return (
     <Box flexDirection="column" flexShrink={0}>
-      <Text color={error ? 'red' : 'green'} bold={true}>
+      <Text color={error ? theme.tool.error : theme.tool.success} bold={true}>
         {error ? '✗' : '✓'} {name}
         {summary && (
           <>
@@ -113,8 +114,8 @@ function GenericToolOutput({ name, args, content, error, hint }: GenericProps) {
           </>
         )}
       </Text>
-      <Box flexDirection="column" backgroundColor="#111111" padding={1} marginTop={1}>
-        <Text color="white">{preview}</Text>
+      <Box flexDirection="column" backgroundColor={theme.tool.previewBackground} padding={1} marginTop={1}>
+        <Text color={theme.tool.previewText}>{preview}</Text>
       </Box>
     </Box>
   );

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

@@ -1,29 +1,44 @@
 import { Box, Text } from 'ink';
-import type { ChatMessage } from 'mu-provider';
+import type { ChatMessage } from 'mu-core';
+import { useTheme } from '../../context/ThemeContext';
 
 export function UserMessage({ msg }: { msg: ChatMessage }) {
+  const theme = useTheme();
+  const borderColor = msg.display?.color ?? theme.user.border;
+  const badge = msg.display?.badge;
+  const prefix = msg.display?.prefix;
   return (
     <Box
       flexDirection="column"
       flexShrink={0}
       marginY={1}
-      backgroundColor="#1a1a1a"
+      backgroundColor={theme.user.background}
       paddingX={1}
       paddingY={1}
       borderLeft={true}
       borderTop={false}
       borderBottom={false}
       borderRight={false}
-      borderColor="yellow"
+      borderColor={borderColor}
       borderStyle="single"
     >
+      {badge && (
+        <Box marginBottom={1}>
+          <Text color={msg.display?.color} bold={true}>
+            [{badge}]
+          </Text>
+        </Box>
+      )}
       {msg.images && msg.images.length > 0 && (
         <Box>
-          <Text color="cyan">📷 </Text>
-          <Text color="cyan">{msg.images.map((img) => img.name).join(', ')}</Text>
+          <Text color={theme.user.attachment}>📷 </Text>
+          <Text color={theme.user.attachment}>{msg.images.map((img) => img.name).join(', ')}</Text>
         </Box>
       )}
-      <Text wrap="wrap">{msg.content}</Text>
+      <Text wrap="wrap">
+        {prefix && <Text color={msg.display?.color}>{prefix}</Text>}
+        {msg.content}
+      </Text>
     </Box>
   );
 }

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 { useTheme } from '../../context/ThemeContext';
 
 export interface Toast {
   id: number;
@@ -29,6 +30,7 @@ export function useToast() {
 }
 
 export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
+  const theme = useTheme();
   const { stdout } = useStdout();
   const columns = stdout.columns;
 
@@ -48,14 +50,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,4 +1,5 @@
 import { Box, Text } from 'ink';
+import { useTheme } from '../context/ThemeContext';
 
 export interface StatusBarSegment {
   text: string;
@@ -7,13 +8,19 @@ export interface StatusBarSegment {
 }
 
 export function StatusBar({ segments }: { segments: StatusBarSegment[] }) {
+  const theme = useTheme();
   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>}
+            {i > 0 && (
+              <Text color={theme.status.separator} dimColor={true}>
+                {' '}
+                ·{' '}
+              </Text>
+            )}
             <Text color={seg.color} dimColor={seg.dim}>
               {seg.text}
             </Text>

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/input/InputBoxView.tsx

@@ -1,8 +1,18 @@
 import { Box, Text } from 'ink';
+import type { MentionCompletion } from 'mu-core';
+import { useTheme } from '../context/ThemeContext';
+import type { Theme } from '../theme/types';
 import type { SlashCommand } from './commands';
 
+interface MentionPickerView {
+  completions: MentionCompletion[];
+  selectedIndex: number;
+  partial: string;
+}
+
 export interface InputBoxViewProps {
   value: string;
+  cursor: number;
   commands: SlashCommand[];
   cmdIndex: number;
   isCommandMode: boolean;
@@ -11,9 +21,18 @@ export interface InputBoxViewProps {
   model: string;
   attachmentName: string | null;
   attachmentError: string | null;
+  mentions: MentionPickerView | null;
 }
 
-function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; selectedIndex: number }) {
+function CommandHints({
+  commands,
+  selectedIndex,
+  theme,
+}: {
+  commands: SlashCommand[];
+  selectedIndex: number;
+  theme: Theme;
+}) {
   if (!commands.length) {
     return null;
   }
@@ -21,7 +40,7 @@ function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; s
     <Box flexDirection="column" marginBottom={1}>
       {commands.map((cmd, i) => (
         <Box key={cmd.name} paddingX={1}>
-          <Text color={i === selectedIndex ? 'green' : undefined} bold={i === selectedIndex}>
+          <Text color={i === selectedIndex ? theme.input.commandHighlight : undefined} bold={i === selectedIndex}>
             {i === selectedIndex ? '▸ ' : '  '}
             {cmd.name}
           </Text>
@@ -32,88 +51,176 @@ function CommandHints({ commands, selectedIndex }: { commands: SlashCommand[]; s
   );
 }
 
+function MentionHints({ mentions, theme }: { mentions: MentionPickerView; theme: Theme }) {
+  if (!mentions.completions.length) {
+    return null;
+  }
+  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>}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
 function InputFooter({
   model,
   attachmentName,
   attachmentError,
   hasContent,
   isCommandMode,
+  hasMentions,
+  theme,
 }: {
   model: string;
   attachmentName: string | null;
   attachmentError: string | null;
   hasContent: boolean;
   isCommandMode: boolean;
+  hasMentions: boolean;
+  theme: Theme;
 }) {
-  const hint = hasContent
-    ? isCommandMode
-      ? '↑↓ select · Enter execute'
-      : 'Enter to send · Shift+Enter for newline'
-    : 'Type / for commands';
+  const hint = hasMentions
+    ? '↑↓ select · Tab/Enter accept'
+    : hasContent
+      ? isCommandMode
+        ? '↑↓ select · Enter execute'
+        : 'Enter to send · Shift+Enter for newline · ←→ move'
+      : 'Type / for commands · @ for mentions';
 
   return (
     <Box justifyContent="space-between">
       <Box gap={1}>
         {model && (
-          <Text color="white" bold={true}>
+          <Text color={theme.input.modelLabel} bold={true}>
             {model}
           </Text>
         )}
-        {attachmentName && <Text color="cyan">📷 {attachmentName}</Text>}
-        {attachmentError && <Text color="red">{attachmentError}</Text>}
+        {attachmentName && <Text color={theme.input.attachmentName}>📷 {attachmentName}</Text>}
+        {attachmentError && <Text color={theme.input.attachmentError}>{attachmentError}</Text>}
       </Box>
-      <Text dimColor={true}>{hint}</Text>
+      <Text color={theme.input.footerHint}>{hint}</Text>
     </Box>
   );
 }
 
-function InputDisplay({
-  value,
-  isCommandMode,
-  streaming,
-  isActive,
-}: {
+interface RowProps {
+  line: string;
+  cursorCol: number | null;
+  isCommandLine: boolean;
+  theme: Theme;
+}
+
+/**
+ * Render one buffer row, splicing the cursor glyph at `cursorCol` if the
+ * cursor lives on this row. Splitting around the cursor (rather than rendering
+ * the whole line and overlaying) keeps the layout flowing inside Ink's text
+ * wrapping engine.
+ */
+function InputRow({ line, cursorCol, isCommandLine, theme }: RowProps) {
+  const colorize = (text: string) => (isCommandLine ? <Text color={theme.input.commandHighlight}>{text}</Text> : text);
+
+  if (cursorCol === null) {
+    return <Text wrap="wrap">{colorize(line)}</Text>;
+  }
+
+  const before = line.slice(0, cursorCol);
+  const after = line.slice(cursorCol);
+  return (
+    <Text wrap="wrap">
+      {colorize(before)}
+      <Text color={theme.input.cursor} inverse={true}>
+        ▎
+      </Text>
+      {colorize(after)}
+    </Text>
+  );
+}
+
+interface DisplayProps {
   value: string;
+  cursor: number;
   isCommandMode: boolean;
   streaming: boolean;
   isActive: boolean;
-}) {
+  theme: Theme;
+}
+
+function InputDisplay({ value, cursor, isCommandMode, streaming, isActive, theme }: DisplayProps) {
   const showCursor = !streaming && isActive;
   if (!value.length) {
-    return <Text>{showCursor && <Text inverse={true}>▎</Text>}</Text>;
+    return (
+      <Text>
+        {showCursor && (
+          <Text color={theme.input.cursor} inverse={true}>
+            ▎
+          </Text>
+        )}
+      </Text>
+    );
   }
   const lines = value.split('\n');
+  // Locate cursor row/col by walking newline offsets.
+  let row = 0;
+  let consumed = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const lineEnd = consumed + lines[i].length;
+    if (cursor <= lineEnd) {
+      row = i;
+      break;
+    }
+    consumed = lineEnd + 1; // +1 for the newline
+    row = i + 1;
+  }
+  const col = cursor - consumed;
   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>
+        <InputRow
+          // biome-ignore lint/suspicious/noArrayIndexKey: static input display lines
+          key={`${i}-${line}`}
+          line={line}
+          cursorCol={showCursor && i === row ? col : null}
+          isCommandLine={i === 0 && isCommandMode}
+          theme={theme}
+        />
       ))}
     </>
   );
 }
 
 export function InputBoxView(props: InputBoxViewProps) {
+  const theme = useTheme();
   return (
     <Box
       flexDirection="column"
       flexShrink={0}
-      backgroundColor="#222222"
+      backgroundColor={theme.input.background}
       paddingX={1}
       paddingY={1}
       marginX={1}
       marginTop={1}
     >
-      {props.isCommandMode && <CommandHints commands={props.commands} selectedIndex={props.cmdIndex} />}
+      {props.isCommandMode && <CommandHints commands={props.commands} selectedIndex={props.cmdIndex} theme={theme} />}
+      {props.mentions && <MentionHints mentions={props.mentions} theme={theme} />}
       <Box flexDirection="column" minHeight={2}>
         <InputDisplay
           value={props.value}
+          cursor={props.cursor}
           isCommandMode={props.isCommandMode}
           streaming={props.streaming}
           isActive={props.isActive}
+          theme={theme}
         />
       </Box>
       <InputFooter
@@ -122,6 +229,8 @@ export function InputBoxView(props: InputBoxViewProps) {
         attachmentError={props.attachmentError}
         hasContent={props.value.length > 0}
         isCommandMode={props.isCommandMode}
+        hasMentions={Boolean(props.mentions)}
+        theme={theme}
       />
     </Box>
   );

package/src/tui/input/commands.test.ts

@@ -23,7 +23,8 @@ describe('BUILTIN_COMMANDS', () => {
     const onTogglePicker = mock(() => undefined);
     const onToggleSessionPicker = mock(() => undefined);
     const onNew = mock(() => undefined);
-    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew };
+    const onShowContext = mock(() => undefined);
+    const actions: InputActions = { onTogglePicker, onToggleSessionPicker, onNew, onShowContext };
 
     for (const cmd of BUILTIN_COMMANDS) {
       cmd.invoke?.(actions);
@@ -32,6 +33,7 @@ describe('BUILTIN_COMMANDS', () => {
     expect(onTogglePicker).toHaveBeenCalledTimes(1);
     expect(onToggleSessionPicker).toHaveBeenCalledTimes(1);
     expect(onNew).toHaveBeenCalledTimes(1);
+    expect(onShowContext).toHaveBeenCalledTimes(1);
   });
 });
 

package/src/tui/input/commands.ts

@@ -1,4 +1,4 @@
-import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-agents';
+import type { CommandContext, SlashCommand as PluginSlashCommand } from 'mu-core';
 import type { InputActions } from './useInputHandler';
 
 /**
@@ -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: '/context',
+    description: 'Show the LLM context (system prompt, messages, tools) as plain text',
+    invoke: (a) => a.onShowContext?.(),
+  },
 ];
 
 export function fromPluginCommand(command: PluginSlashCommand, context: CommandContext): SlashCommand {