feat(cli): TUI slash command parsing + local commands (P8-009) (#176)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

packages/cli/src/tui/components/input-bar.tsx

@@ -1,9 +1,14 @@
 import React, { useState, useCallback } from 'react';
 import { Box, Text } from 'ink';
 import TextInput from 'ink-text-input';
+import type { ParsedCommand } from '@mosaic/types';
+import { parseSlashCommand, commandRegistry } from '../commands/index.js';
 
 export interface InputBarProps {
   onSubmit: (value: string) => void;
+  onSystemMessage?: (message: string) => void;
+  onLocalCommand?: (parsed: ParsedCommand) => void;
+  onGatewayCommand?: (parsed: ParsedCommand) => void;
   isStreaming: boolean;
   connected: boolean;
   placeholder?: string;
@@ -11,6 +16,9 @@ export interface InputBarProps {
 
 export function InputBar({
   onSubmit,
+  onSystemMessage,
+  onLocalCommand,
+  onGatewayCommand,
   isStreaming,
   connected,
   placeholder: placeholderOverride,
@@ -20,10 +28,39 @@ export function InputBar({
   const handleSubmit = useCallback(
     (value: string) => {
       if (!value.trim() || isStreaming || !connected) return;
+
+      const trimmed = value.trim();
+
+      if (trimmed.startsWith('/')) {
+        const parsed = parseSlashCommand(trimmed);
+        if (!parsed) {
+          onSystemMessage?.(`Unknown command format: ${trimmed}`);
+          setInput('');
+          return;
+        }
+        const def = commandRegistry.find(parsed.command);
+        if (!def) {
+          onSystemMessage?.(
+            `Unknown command: /${parsed.command}. Type /help for available commands.`,
+          );
+          setInput('');
+          return;
+        }
+        if (def.execution === 'local') {
+          onLocalCommand?.(parsed);
+          setInput('');
+          return;
+        }
+        // Gateway-executed commands
+        onGatewayCommand?.(parsed);
+        setInput('');
+        return;
+      }
+
       onSubmit(value);
       setInput('');
     },
-    [onSubmit, isStreaming, connected],
+    [onSubmit, onSystemMessage, onLocalCommand, onGatewayCommand, isStreaming, connected],
   );
 
   const placeholder =

packages/cli/src/tui/components/message-list.tsx

@@ -24,6 +24,17 @@ function formatTime(date: Date): string {
   });
 }
 
+function SystemMessageBubble({ msg }: { msg: Message }) {
+  return (
+    <Box flexDirection="row" marginBottom={1} marginLeft={2}>
+      <Text dimColor>{'⚙ '}</Text>
+      <Text dimColor wrap="wrap">
+        {msg.content}
+      </Text>
+    </Box>
+  );
+}
+
 function MessageBubble({
   msg,
   highlight,
@@ -31,6 +42,10 @@ function MessageBubble({
   msg: Message;
   highlight?: 'match' | 'current' | undefined;
 }) {
+  if (msg.role === 'system') {
+    return <SystemMessageBubble msg={msg} />;
+  }
+
   const isUser = msg.role === 'user';
   const prefix = isUser ? '❯' : '◆';
   const color = isUser ? 'green' : 'cyan';