84 lines
2.6 KiB
Markdown
84 lines
2.6 KiB
Markdown
|
# 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.
|