Skip to content

Commit 11088af

Browse files
committed
refactor(agent-group): replace left-border accents with status dots and
- Replace left-border accent styling with animated status dot indicator - Remove `isLive` prop and conditional violet left-border from card container - Add "parallel" prefix to agent group labels for multi-agent groups - Improve spacing and alignment by moving status indicator to row start
1 parent 3e4e1a2 commit 11088af

2 files changed

Lines changed: 21 additions & 21 deletions

File tree

apps/web/src/components/chat/AgentGroupCard.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ function formatAgentTaskType(taskType: string | null): string | null {
2626
.join(" ");
2727
}
2828

29-
function agentTaskStatusAccent(status: AgentTaskSummary["status"]): string {
29+
function agentTaskStatusDotColor(status: AgentTaskSummary["status"]): string {
3030
switch (status) {
3131
case "running":
32-
return "border-l-amber-400/70";
32+
return "bg-amber-400/70";
3333
case "failed":
34-
return "border-l-rose-400/70";
34+
return "bg-rose-400/70";
3535
case "completed":
36-
return "border-l-emerald-500/70";
36+
return "bg-emerald-500/70";
3737
case "stopped":
38-
return "border-l-muted-foreground/40";
38+
return "bg-muted-foreground/40";
3939
}
4040
}
4141

@@ -63,10 +63,15 @@ const AgentTaskRow = memo(function AgentTaskRow(props: { task: AgentTaskSummary
6363
const meta = agentTaskMeta(task);
6464

6565
return (
66-
<div
67-
className={cn("rounded-md border-l-2 py-1 pl-2.5 pr-1.5", agentTaskStatusAccent(task.status))}
68-
>
66+
<div className="rounded-md py-1 pr-1.5 pl-2">
6967
<div className="flex items-center gap-1.5">
68+
<span
69+
className={cn(
70+
"size-1.5 shrink-0 rounded-full",
71+
isRunning && "animate-pulse",
72+
agentTaskStatusDotColor(task.status),
73+
)}
74+
/>
7075
{typeLabel && (
7176
<span className="shrink-0 rounded bg-muted/50 px-1 py-px text-[10px] text-muted-foreground/60">
7277
{typeLabel}
@@ -95,13 +100,10 @@ const AgentTaskRow = memo(function AgentTaskRow(props: { task: AgentTaskSummary
95100
render={
96101
<p
97102
className={cn(
98-
"truncate text-[10px] leading-4",
103+
"truncate pl-[9px] text-[10px] leading-4",
99104
isRunning ? "text-amber-400/70" : "text-muted-foreground/50",
100105
)}
101106
>
102-
{isRunning && (
103-
<span className="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-amber-400/80 align-middle" />
104-
)}
105107
{activityLine}
106108
</p>
107109
}
@@ -119,16 +121,13 @@ const AgentTaskRow = memo(function AgentTaskRow(props: { task: AgentTaskSummary
119121
});
120122

121123
export const AgentGroupCard = memo(function AgentGroupCard(props: AgentGroupCardProps) {
122-
const { agentGroup, label, isLive } = props;
124+
const { agentGroup, label } = props;
123125
const tasks = agentGroup.tasks;
124126

125127
return (
126128
<div
127129
data-scroll-anchor-target
128-
className={cn(
129-
"overflow-hidden rounded-xl border border-border/40 border-l-2 bg-card/25",
130-
isLive ? "border-l-violet-400/40" : "border-l-violet-400/20",
131-
)}
130+
className="overflow-hidden rounded-xl border border-border/40 bg-card/25"
132131
>
133132
<div className="flex items-center gap-2 px-3 py-1.5">
134133
<BotIcon className="size-3.5 shrink-0 text-violet-400/60" />

apps/web/src/session-logic.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -777,16 +777,17 @@ function buildAgentGroupLabel(tasks: ReadonlyArray<AgentTaskSummary>): string {
777777
const total = tasks.length;
778778
const runningCount = tasks.filter((t) => t.status === "running").length;
779779
const failedCount = tasks.filter((t) => t.status === "failed").length;
780+
const parallel = total > 1 ? "parallel " : "";
780781
const noun = total === 1 ? "agent" : "agents";
781782

782783
if (runningCount > 0) {
783-
if (runningCount === total) return `${total} ${noun} running`;
784-
return `${total} ${noun} (${runningCount} running)`;
784+
if (runningCount === total) return `${total} ${parallel}${noun} running`;
785+
return `${total} ${parallel}${noun} (${runningCount} running)`;
785786
}
786787
if (failedCount > 0) {
787-
return `${total} ${noun} finished (${failedCount} failed)`;
788+
return `${total} ${parallel}${noun} finished (${failedCount} failed)`;
788789
}
789-
return `${total} ${noun} finished`;
790+
return `${total} ${parallel}${noun} finished`;
790791
}
791792

792793
function buildAgentGroupEntry(

0 commit comments

Comments
 (0)