amosblomqvist
6db4465ff3
The sub-agents fleet panel was a w-64 fixed aside with no left edge — aligned with the plan panel only by coincidence in list mode, floating detached in rail (w-10) and graph (w-96) modes. It now stretches to the sidebar column's current width and shares the panel's border-l, so the sidebar is one continuous panel with SUB-AGENTS above PLAN (thin border-b divider). Verified headlessly in list and graph mode: identical edges and widths (256/256 and 384/384), perfect vertical stack (fleet 0..99.5, tree 99.5..800), no overlap, 9-node graph intact. The rail-mode-while-jobs-run question (fleet cards would cram into w-10) is logged as wave-2 UX design work for the UI stream.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { BotIcon, PenToolIcon, PlayIcon, SearchIcon } from "lucide-react";
|
|
import type { JobKind, JobRecord } from "@/src/core";
|
|
|
|
/**
|
|
* The sub-agents sidebar section (vision §2.5 live observability): what the
|
|
* teacher's background fleet is doing RIGHT NOW in this session — one card
|
|
* per running sub-agent with its live activity line (current tool + args)
|
|
* and elapsed time, fed by the central jobs poll.
|
|
*
|
|
* Renders nothing when the fleet is idle (zero clutter); finished jobs
|
|
* vanish from the list — their artifacts live in the transcript. Sits at
|
|
* the top of the right sidebar, above the plan-tree panel.
|
|
*/
|
|
|
|
const KIND_META: Record<JobKind, { label: string; Icon: typeof SearchIcon }> = {
|
|
research: { label: "Researcher", Icon: SearchIcon },
|
|
demo: { label: "Demo builder", Icon: PlayIcon },
|
|
visual: { label: "Figure maker", Icon: PenToolIcon },
|
|
};
|
|
|
|
export function SubAgentsPanel({ jobs }: { jobs: JobRecord[] }) {
|
|
const running = jobs.filter((j) => j.status === "running");
|
|
if (running.length === 0) return null;
|
|
return (
|
|
<aside
|
|
data-testid="sub-agents-panel"
|
|
className="flex w-full shrink-0 flex-col border-b border-l border-border/60 bg-card/30 px-3 py-2.5"
|
|
>
|
|
<div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
|
|
<BotIcon className="size-3.5" />
|
|
Sub-agents
|
|
</div>
|
|
<ul className="mt-2 flex flex-col gap-2">
|
|
{running.map((job) => (
|
|
<li
|
|
key={job.id}
|
|
className="rounded-lg border bg-card px-2.5 py-2 text-card-foreground"
|
|
data-testid="sub-agent-card"
|
|
>
|
|
<div className="flex items-center gap-2 text-xs font-medium">
|
|
{(() => {
|
|
const { label, Icon } = KIND_META[job.kind] ?? KIND_META.research;
|
|
return <Icon className="size-3.5 shrink-0 text-muted-foreground" />;
|
|
})()}
|
|
<span className="min-w-0 flex-1 truncate">{KIND_META[job.kind]?.label ?? job.kind}</span>
|
|
<span
|
|
className="inline-block size-1.5 animate-pulse rounded-full bg-primary"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="shrink-0 tabular-nums text-muted-foreground" data-testid="sub-agent-elapsed">
|
|
{elapsedOf(job)}
|
|
</span>
|
|
</div>
|
|
{job.activity && (
|
|
<div
|
|
className="mt-1 truncate text-xs text-muted-foreground"
|
|
data-testid="sub-agent-activity"
|
|
title={job.activity}
|
|
>
|
|
{job.activity}
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function elapsedOf(job: JobRecord): string {
|
|
if (!job.createdAt) return "";
|
|
const seconds = Math.max(0, Math.round((Date.now() - Date.parse(job.createdAt)) / 1000));
|
|
return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
|
|
}
|