File size: 2,706 Bytes
7c5ed63 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import { Link, useParams } from 'react-router-dom';
import type { AgentNode } from '../../types';
import { Pill, type PillTone } from '../shared/Pill';
const TYPE_TONE: Record<AgentNode['type'], PillTone> = {
main: 'conversation',
sub: 'subagent',
independent: 'tools',
};
interface Props {
node: AgentNode;
sessionId: string;
}
export function SubagentNode({ node, sessionId }: Props) {
const { agentId: activeAgentId } = useParams<{ agentId?: string }>();
const selected = activeAgentId === node.agentId;
const broken = !node.wireExists;
return (
<div className="my-1">
<Link
to={`/sessions/${sessionId}/agents/${node.agentId}`}
className={[
'relative flex items-start gap-3 border border-border bg-surface-0 px-3 py-2 transition-colors hover:bg-surface-1',
selected ? 'border-[var(--color-cat-subagent)]' : '',
].join(' ')}
>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
<Pill tone={TYPE_TONE[node.type]} variant="soft">
{node.type}
</Pill>
<span className="font-mono text-[12px] text-fg-0">{node.agentId}</span>
{node.profileName ? (
<Pill tone="config" variant="outline">
{node.profileName}
</Pill>
) : null}
{node.swarmItem ? (
<Pill tone="subagent" variant="outline" title={node.swarmItem}>
{node.swarmItem}
</Pill>
) : null}
{node.parentAgentId !== null ? (
<span className="font-mono text-[10.5px] text-fg-3">
← {node.parentAgentId}
</span>
) : null}
{broken ? (
<Pill tone="warning" variant="outline">
no wire
</Pill>
) : null}
<span className="ml-auto font-mono text-[10.5px] text-fg-3 tabular">
{node.wireRecordCount} rec{node.wireRecordCount === 1 ? '' : 's'}
{node.wireProtocolVersion !== null
? ` · v${node.wireProtocolVersion}`
: ''}
</span>
</div>
<div
className="mt-1 truncate font-mono text-[10.5px] text-fg-3"
title={node.homedir}
>
{node.homedir}
</div>
</div>
</Link>
{node.children.length > 0 ? (
<div className="mt-1 border-l border-border pl-3 ml-3">
{node.children.map((c) => (
<SubagentNode key={c.agentId} node={c} sessionId={sessionId} />
))}
</div>
) : null}
</div>
);
}
|