# Task ID: 105

**Title:** Implement Model Studio TUI Base

**Status:** done

**Dependencies:** 104 ✗

**Priority:** medium

**Description:** Create the base TUI for mcpctl console --model-studio that extends --inspect with original vs transformed view.

**Details:**

Create `src/cli/src/commands/console/model-studio.tsx`:

```typescript
import React, { useState, useEffect } from 'react';
import { Box, Text, useInput } from 'ink';
import { TrafficEvent } from './types';

interface ModelStudioProps {
  projectName: string;
  events: TrafficEvent[];
}

export function ModelStudio({ projectName, events }: ModelStudioProps) {
  const [selectedIdx, setSelectedIdx] = useState(0);
  const [viewMode, setViewMode] = useState<'original' | 'transformed' | 'diff'>('transformed');
  const [pauseMode, setPauseMode] = useState(false);
  
  useInput((input, key) => {
    if (input === 'j') setSelectedIdx(i => Math.min(i + 1, events.length - 1));
    if (input === 'k') setSelectedIdx(i => Math.max(i - 1, 0));
    if (input === 'o') setViewMode(m => m === 'original' ? 'transformed' : m === 'transformed' ? 'diff' : 'original');
    if (input === 'p') setPauseMode(p => !p);
    if (input === 'G') setSelectedIdx(events.length - 1);
  });
  
  const selected = events[selectedIdx];
  const isContentEvent = selected?.eventType === 'content_original' || selected?.eventType === 'content_transformed';
  
  return (
    <Box flexDirection="column" height="100%">
      <Box borderStyle="single" padding={1}>
        <Text>Model Studio: {projectName}</Text>
        <Text> | </Text>
        <Text>View: {viewMode}</Text>
        <Text> | </Text>
        <Text color={pauseMode ? 'red' : 'green'}>{pauseMode ? '⏸ PAUSED' : '▶ LIVE'}</Text>
      </Box>
      
      <Box flexGrow={1} flexDirection="row">
        {/* Event list sidebar */}
        <Box width="30%" borderStyle="single">
          {events.map((e, i) => (
            <Text key={i} inverse={i === selectedIdx}>
              {formatEventLine(e)}
            </Text>
          ))}
        </Box>
        
        {/* Content view */}
        <Box width="70%" borderStyle="single">
          {isContentEvent && (
            <ContentView event={selected} mode={viewMode} />
          )}
        </Box>
      </Box>
      
      <Box borderStyle="single">
        <Text>[o] toggle view  [p] pause  [j/k] navigate  [G] latest  [q] quit</Text>
      </Box>
    </Box>
  );
}
```

Add --model-studio flag to console command.

**Test Strategy:**

Manual test: TUI renders correctly, keyboard navigation works, original/transformed/diff views switch correctly, pause indicator shows correctly.