claude-code-best/src/components/TeammateViewHeader.tsx
2026-05-01 21:39:30 +08:00

40 lines
1.1 KiB
TypeScript

import * as React from 'react';
import { Box, Text, KeyboardShortcutHint } from '@anthropic/ink';
import { toInkColor } from '../utils/ink.js';
import { useAppState } from '../state/AppState.js';
import { getViewedTeammateTask } from '../state/selectors.js';
import { OffscreenFreeze } from './OffscreenFreeze.js';
/**
* Header shown when viewing a teammate's transcript.
* Displays teammate name (colored), task description, and exit hint.
*/
export function TeammateViewHeader(): React.ReactNode {
const viewedTeammate = useAppState(s => getViewedTeammateTask(s));
if (!viewedTeammate) {
return null;
}
const nameColor = toInkColor(viewedTeammate.identity.color);
return (
<OffscreenFreeze>
<Box flexDirection="column" marginBottom={1}>
<Box>
<Text>Viewing </Text>
<Text color={nameColor} bold>
@{viewedTeammate.identity.agentName}
</Text>
<Text dimColor>
{' · '}
<KeyboardShortcutHint shortcut="esc" action="return" />
</Text>
</Box>
<Text dimColor>{viewedTeammate.prompt}</Text>
</Box>
</OffscreenFreeze>
);
}