From b8fe0095d14a08c36b5648fe3c957c81e402911c Mon Sep 17 00:00:00 2001
From: marius-kilocode <marius@kilocode.ai>
Date: Tue, 8 Sep 2026 20:49:49 +0200
Subject: [PATCH 1/5] tmp

---
 .changeset/subagent-avatars.md                |  5 ++
 packages/kilo-ui/package.json                 |  1 +
 .../components/agent-avatar-identity.test.ts  | 28 ++++++++++
 .../src/components/agent-avatar-identity.ts   | 14 +++++
 .../kilo-ui/src/components/agent-avatar.css   | 54 +++++++++++++++++++
 .../kilo-ui/src/components/agent-avatar.tsx   | 29 ++++++++++
 .../kilo-ui/src/components/basic-tool.css     |  7 +++
 .../kilo-ui/src/components/board-message.css  |  2 +-
 .../kilo-ui/src/components/board-message.tsx  |  7 +--
 .../kilo-ui/src/components/message-part.tsx   |  4 ++
 packages/kilo-ui/src/styles/index.css         |  1 +
 .../agent-manager/SubagentPanel.tsx           | 12 +++--
 .../agent-manager/agent-manager.css           |  6 +++
 .../src/components/chat/BackgroundAgents.tsx  | 17 ++++--
 .../src/components/chat/TaskToolExpanded.tsx  | 10 ++--
 .../webview-ui/src/styles/tool-overrides.css  | 14 +++++
 packages/ui/src/components/basic-tool.tsx     |  3 +-
 17 files changed, 197 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/subagent-avatars.md
 create mode 100644 packages/kilo-ui/src/components/agent-avatar-identity.test.ts
 create mode 100644 packages/kilo-ui/src/components/agent-avatar-identity.ts
 create mode 100644 packages/kilo-ui/src/components/agent-avatar.css
 create mode 100644 packages/kilo-ui/src/components/agent-avatar.tsx

diff --git a/.changeset/subagent-avatars.md b/.changeset/subagent-avatars.md
new file mode 100644
index 000000000000..f495b8f425df
--- /dev/null
+++ b/.changeset/subagent-avatars.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": minor
+---
+
+Identify subagents with consistent theme-colored avatars in Task cards, background agents, subagent tabs, and swarm messages. Animate running avatars instead of showing a separate loading indicator.
diff --git a/packages/kilo-ui/package.json b/packages/kilo-ui/package.json
index 81d67922830c..771bd1e17078 100644
--- a/packages/kilo-ui/package.json
+++ b/packages/kilo-ui/package.json
@@ -26,6 +26,7 @@
     "./tabs": "./src/components/tabs.tsx",
     "./card": "./src/components/card.tsx",
     "./avatar": "./src/components/avatar.tsx",
+    "./agent-avatar": "./src/components/agent-avatar.tsx",
     "./logo": "./src/components/logo.tsx",
     "./favicon": "./src/components/favicon.tsx",
     "./file-icon": "./src/components/file-icon.tsx",
diff --git a/packages/kilo-ui/src/components/agent-avatar-identity.test.ts b/packages/kilo-ui/src/components/agent-avatar-identity.test.ts
new file mode 100644
index 000000000000..c512d92a8048
--- /dev/null
+++ b/packages/kilo-ui/src/components/agent-avatar-identity.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "bun:test"
+import { identity } from "./agent-avatar-identity"
+
+describe("agent avatar identity", () => {
+  test("uses the same identity for the same participant", () => {
+    expect(identity("ses_agent-one")).toEqual(identity("ses_agent-one"))
+    expect(identity("ses_agent-one").cells).not.toEqual(identity("ses_agent-two").cells)
+  })
+
+  test("keeps unknown participants neutral", () => {
+    expect(identity("").color).toBeUndefined()
+    expect(identity("unknown")).toEqual(identity(""))
+    expect(identity("  ")).toEqual(identity(""))
+    expect(identity("main").color).toBeNumber()
+  })
+
+  test("produces visible symmetric patterns within the avatar", () => {
+    for (const id of ["main", "ses_agent-one", "ses_agent-two", "participant", ""]) {
+      const avatar = identity(id)
+      expect(avatar.cells.length).toBeGreaterThan(0)
+      for (const cell of avatar.cells) {
+        expect(cell).toBeGreaterThanOrEqual(0)
+        expect(cell).toBeLessThan(25)
+        expect(avatar.cells).toContain(Math.floor(cell / 5) * 5 + 4 - (cell % 5))
+      }
+    }
+  })
+})
diff --git a/packages/kilo-ui/src/components/agent-avatar-identity.ts b/packages/kilo-ui/src/components/agent-avatar-identity.ts
new file mode 100644
index 000000000000..8727da1088b7
--- /dev/null
+++ b/packages/kilo-ui/src/components/agent-avatar-identity.ts
@@ -0,0 +1,14 @@
+export function identity(id: string) {
+  const known = id.trim() !== "" && id !== "unknown"
+  let hash = 2166136261
+  for (let index = 0; index < id.length; index++) {
+    hash = Math.imul(hash ^ id.charCodeAt(index), 16777619) >>> 0
+  }
+  // Mirror three columns into a five-column pattern. Keep the center visible.
+  const mask = known ? (hash >>> 8) | (1 << 8) : (1 << 5) | (1 << 7) | (1 << 8) | (1 << 11)
+  const cells = Array.from({ length: 25 }, (_, index) => index).filter((index) => {
+    const x = index % 5
+    return mask & (1 << (Math.floor(index / 5) * 3 + Math.min(x, 4 - x)))
+  })
+  return { color: known ? hash % 6 : undefined, cells }
+}
diff --git a/packages/kilo-ui/src/components/agent-avatar.css b/packages/kilo-ui/src/components/agent-avatar.css
new file mode 100644
index 000000000000..19d092dfa3a5
--- /dev/null
+++ b/packages/kilo-ui/src/components/agent-avatar.css
@@ -0,0 +1,54 @@
+[data-component="agent-avatar"] {
+  display: inline-block;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  color: var(--icon-weak-base);
+  fill: currentColor;
+  shape-rendering: crispEdges;
+
+  &[data-running] rect {
+    animation: agent-avatar-shimmer 1.6s ease-in-out infinite;
+  }
+
+  &[data-color="0"] {
+    color: var(--vscode-charts-blue, var(--icon-info-base));
+  }
+
+  &[data-color="1"] {
+    color: var(--vscode-charts-green, var(--icon-success-base));
+  }
+
+  &[data-color="2"] {
+    color: var(--vscode-charts-yellow, var(--icon-warning-base));
+  }
+
+  &[data-color="3"] {
+    color: var(--vscode-charts-orange, var(--icon-warning-base));
+  }
+
+  &[data-color="4"] {
+    color: var(--vscode-charts-purple, var(--icon-info-base));
+  }
+
+  &[data-color="5"] {
+    color: var(--vscode-charts-red, var(--icon-critical-base));
+  }
+}
+
+@keyframes agent-avatar-shimmer {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="agent-avatar"][data-running] rect {
+    animation: none;
+  }
+}
diff --git a/packages/kilo-ui/src/components/agent-avatar.tsx b/packages/kilo-ui/src/components/agent-avatar.tsx
new file mode 100644
index 000000000000..b28f26cf4b05
--- /dev/null
+++ b/packages/kilo-ui/src/components/agent-avatar.tsx
@@ -0,0 +1,29 @@
+import { createMemo, For } from "solid-js"
+import { identity } from "./agent-avatar-identity"
+
+export function AgentAvatar(props: { id: string; running?: boolean }) {
+  const avatar = createMemo(() => identity(props.id))
+  return (
+    <svg
+      data-component="agent-avatar"
+      data-color={avatar().color}
+      data-running={props.running || undefined}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <For each={avatar().cells}>
+        {(cell) => (
+          <rect
+            x={2 + (cell % 5) * 3}
+            y={2 + Math.floor(cell / 5) * 3}
+            width="3"
+            height="3"
+            style={{ "animation-delay": `${-((cell % 5) + Math.floor(cell / 5)) * 0.12}s` }}
+          />
+        )}
+      </For>
+    </svg>
+  )
+}
diff --git a/packages/kilo-ui/src/components/basic-tool.css b/packages/kilo-ui/src/components/basic-tool.css
index 23224ffb4b15..593ae36e596a 100644
--- a/packages/kilo-ui/src/components/basic-tool.css
+++ b/packages/kilo-ui/src/components/basic-tool.css
@@ -36,6 +36,13 @@
 
   [data-slot="basic-tool-icon"] {
     display: none;
+
+    &:has([data-component="agent-avatar"]) {
+      display: inline-flex;
+      flex: 0 0 20px;
+      width: 20px;
+      height: 20px;
+    }
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
diff --git a/packages/kilo-ui/src/components/board-message.css b/packages/kilo-ui/src/components/board-message.css
index 6e97fefade52..85d5beae9838 100644
--- a/packages/kilo-ui/src/components/board-message.css
+++ b/packages/kilo-ui/src/components/board-message.css
@@ -66,7 +66,7 @@
 @container (max-width: 260px) {
   [data-component="board-route"] {
     display: grid;
-    grid-template-columns: 16px auto minmax(0, 1fr);
+    grid-template-columns: 20px auto minmax(0, 1fr);
     gap: 4px 6px;
 
     .board-route-member {
diff --git a/packages/kilo-ui/src/components/board-message.tsx b/packages/kilo-ui/src/components/board-message.tsx
index a5575ddeca76..c1e1aca471f7 100644
--- a/packages/kilo-ui/src/components/board-message.tsx
+++ b/packages/kilo-ui/src/components/board-message.tsx
@@ -1,6 +1,7 @@
 import { Show } from "solid-js"
 import { useI18n } from "../context/i18n"
 import { Icon } from "./icon"
+import { AgentAvatar } from "./agent-avatar"
 import { Markdown } from "./markdown"
 import { Tooltip } from "./tooltip"
 
@@ -35,7 +36,7 @@ export function BoardRoute(props: Route) {
       role="group"
       aria-label={i18n.t("ui.messagePart.board.route", { from: sender(), to: recipient() })}
     >
-      <Icon name="task" size="small" />
+      <AgentAvatar id={from()} />
       <Tooltip
         class="board-route-member board-route-sender"
         contentClass="board-route-tooltip"
@@ -45,8 +46,8 @@ export function BoardRoute(props: Route) {
       </Tooltip>
       <Icon name="arrow-right" size="small" />
       <span data-slot="board-route-recipient-icon" data-broadcast={to() === "ALL"}>
-        <Icon name="task" size="small" />
-        <Show when={to() === "ALL"}>
+        <Show when={to() === "ALL"} fallback={<AgentAvatar id={to()} />}>
+          <Icon name="task" size="small" />
           <Icon name="task" size="small" />
         </Show>
       </span>
diff --git a/packages/kilo-ui/src/components/message-part.tsx b/packages/kilo-ui/src/components/message-part.tsx
index ed539bb61e02..9a360689ae9d 100644
--- a/packages/kilo-ui/src/components/message-part.tsx
+++ b/packages/kilo-ui/src/components/message-part.tsx
@@ -36,6 +36,7 @@ import { useClipboard } from "../context/clipboard"
 import { type UiI18n, useI18n } from "../context/i18n"
 import { BasicTool, useToolApprovalLine } from "./basic-tool"
 import { BoardMessage, BoardRoute } from "./board-message"
+import { AgentAvatar } from "./agent-avatar"
 import { Accordion } from "./accordion"
 import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { Card } from "./card"
@@ -2457,6 +2458,9 @@ ToolRegistry.register({
         hideDetails
         approvalPlacement="hidden"
         icon="task"
+        iconNode={
+          <AgentAvatar id={childSessionId() ?? ""} running={props.status === "running" || props.status === "pending"} />
+        }
         status={props.status}
         trigger={trigger()}
         animated
diff --git a/packages/kilo-ui/src/styles/index.css b/packages/kilo-ui/src/styles/index.css
index 2b3687ac3406..4814bb1feecc 100644
--- a/packages/kilo-ui/src/styles/index.css
+++ b/packages/kilo-ui/src/styles/index.css
@@ -6,6 +6,7 @@
 
 /* Per-component Kilo overrides */
 @import "../components/accordion.css";
+@import "../components/agent-avatar.css";
 @import "../components/basic-tool.css";
 @import "../components/board-message.css";
 @import "../components/auto-approve-bar.css";
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx b/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
index 1502ed9d34ad..fa15a7e55448 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
+++ b/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
@@ -6,14 +6,15 @@
  */
 
 import { Icon } from "@kilocode/kilo-ui/icon"
+import { AgentAvatar } from "@kilocode/kilo-ui/agent-avatar"
 import { IconButton } from "@kilocode/kilo-ui/icon-button"
-import { createEffect, createMemo, on, type Accessor, type Component } from "solid-js"
+import { createEffect, createMemo, on, Show, type Accessor, type Component } from "solid-js"
 import { DataBridge } from "../src/App"
 import { ChatView } from "../src/components/chat"
 import { ActivityIcon } from "../src/components/shared/ActivityIcon"
 import { useLanguage } from "../src/context/language"
 import { SessionProvider, useSession, useSessionVisibility } from "../src/context/session"
-import { description, label, type Activity } from "../src/utils/session-activity"
+import { description, label, running, type Activity } from "../src/utils/session-activity"
 import { SortableClosableTab } from "./ClosableTab"
 import { InspectorTabStrip } from "./InspectorTabStrip"
 import type { SubagentTab } from "./subagent-tabs"
@@ -104,7 +105,12 @@ const SubagentContent: Component<Props & { activity: (id: string) => Activity }>
               tooltip={() => (state() === "idle" ? name : `${name}: ${language.t(description(state()))}`)}
               icon="task"
               iconNode={
-                <ActivityIcon state={state()} idle={<Icon name="task" size="small" />} spinner="am-tab-spinner" />
+                <>
+                  <AgentAvatar id={id} running={running(state())} />
+                  <Show when={state() !== "idle" && !running(state())}>
+                    <ActivityIcon state={state()} spinner="am-tab-spinner" />
+                  </Show>
+                </>
               }
               state={state()}
               stateLabel={state() === "idle" ? undefined : language.t(label(state()))}
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
index 7978f988827f..1e9939b690b6 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
+++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
@@ -1520,6 +1520,12 @@ html[data-theme="kilo-vscode"]
   color: currentColor;
 }
 
+.am-subagent-panel .am-tab-icon:has([data-component="agent-avatar"]) {
+  width: auto;
+  height: 20px;
+  gap: 4px;
+}
+
 .am-tab-icon[data-run-status="success"] {
   color: var(--vscode-testing-iconPassed, #34d399);
 }
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
index fded16433704..9b6775fbf716 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
@@ -12,6 +12,7 @@
 
 import { Component, For, Show, createMemo, createSignal, onCleanup, onMount, createEffect, on } from "solid-js"
 import { Button } from "@kilocode/kilo-ui/button"
+import { AgentAvatar } from "@kilocode/kilo-ui/agent-avatar"
 import { Icon } from "@kilocode/kilo-ui/icon"
 import { IconButton } from "@kilocode/kilo-ui/icon-button"
 import { Tooltip } from "@kilocode/kilo-ui/tooltip"
@@ -264,17 +265,19 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
                         aria-label={tooltip(agent())}
                         onClick={() => openAgent(agent())}
                       >
+                        <AgentAvatar
+                          id={agent().id}
+                          running={agent().status === "running" && !agent().permission && !agent().question}
+                        />
+                        <span dir="auto">{label(agent())}</span>
                         <Show
                           when={agent().permission || agent().question}
                           fallback={
-                            <Show when={icon(agent().status)} fallback={<Spinner />}>
-                              {(name) => <Icon name={name()} size="small" />}
-                            </Show>
+                            <Show when={icon(agent().status)}>{(name) => <Icon name={name()} size="small" />}</Show>
                           }
                         >
                           <Icon name="warning" size="small" />
                         </Show>
-                        <span dir="auto">{label(agent())}</span>
                       </Button>
                     )}
                   </Show>
@@ -360,7 +363,11 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
                 <Show when={visible().find((agent) => agent.jobID === id)}>
                   {(agent) => (
                     <div data-slot="task-header-agent" data-status={agent().status}>
-                      <Show when={icon(agent().status)} fallback={<Spinner />}>
+                      <AgentAvatar
+                        id={agent().id}
+                        running={agent().status === "running" && !agent().permission && !agent().question}
+                      />
+                      <Show when={icon(agent().status)}>
                         {(name) => <Icon name={name()} size="small" data-slot="task-header-agent-status" />}
                       </Show>
                       <button
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
index 568245bcc6c9..f7f0a22888ec 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
@@ -11,6 +11,7 @@ import { Component, createEffect, createMemo, createSignal, Index, Show, on, onC
 import { ToolRegistry, ToolProps, getToolInfo } from "@kilocode/kilo-ui/message-part"
 import { BasicTool, initialOpen } from "@kilocode/kilo-ui/basic-tool"
 import { Icon } from "@kilocode/kilo-ui/icon"
+import { AgentAvatar } from "@kilocode/kilo-ui/agent-avatar"
 import { IconButton } from "@kilocode/kilo-ui/icon-button"
 import { Markdown } from "@kilocode/kilo-ui/markdown"
 import { Tooltip } from "@kilocode/kilo-ui/tooltip"
@@ -161,14 +162,14 @@ const TaskToolRenderer: Component<ToolProps> = (props) => {
   }
 
   const trigger = () => (
-    <div data-slot="basic-tool-tool-info-structured">
+    <div data-slot="basic-tool-tool-info-structured" data-component="task-tool-heading">
       <div data-slot="basic-tool-tool-info-main">
-        <span data-slot="basic-tool-tool-title" class="capitalize">
-          {title()}
+        <span data-slot="basic-tool-tool-title" title={description() || title()}>
+          {description() || title()}
         </span>
         <Show when={description() || childToolCount() > 0}>
           <span data-slot="basic-tool-tool-subtitle">
-            {description()}
+            {description() ? title() : undefined}
             <Show when={childToolCount() > 0}>
               {description() ? " " : ""}({childToolCount()})
             </Show>
@@ -202,6 +203,7 @@ const TaskToolRenderer: Component<ToolProps> = (props) => {
     <div data-component="tool-part-wrapper">
       <BasicTool
         icon="task"
+        iconNode={<AgentAvatar id={childSessionId() ?? ""} running={running()} />}
         status={props.status}
         tool={props.tool}
         partID={props.partID}
diff --git a/packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css b/packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css
index 956e85f5abc1..f8659d2fc629 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/tool-overrides.css
@@ -3,6 +3,20 @@
    tool-output scrollable container size override
    ============================================ */
 
+[data-component="task-tool-heading"] {
+  [data-slot="basic-tool-tool-title"] {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-slot="basic-tool-tool-subtitle"] {
+    flex: 0 0 auto;
+  }
+}
+
 [data-component="tool-output"][data-scrollable]:has([data-component="task-tools"]) {
   margin-inline: -6px;
   max-height: 200px;
diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
index 1b1e3dd16ea4..76061977f82b 100644
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -24,6 +24,7 @@ const isTriggerTitle = (val: any): val is TriggerTitle => {
 
 export interface BasicToolProps {
   icon: IconProps["name"]
+  iconNode?: JSX.Element // kilocode_change
   trigger: TriggerTitle | JSX.Element
   children?: JSX.Element
   status?: string
@@ -201,7 +202,7 @@ export function BasicTool(props: BasicToolProps) {
       <div data-slot="basic-tool-tool-trigger-content">
         {/* kilocode_change start */}
         <span data-slot="basic-tool-icon">
-          <Icon name={props.icon} size="small" />
+          {props.iconNode ?? <Icon name={props.icon} size="small" />}
         </span>
         {/* kilocode_change end */}
         <div data-slot="basic-tool-tool-info">

From 4bb09b1256201f8d45e5fc7ca4687d0dac797de0 Mon Sep 17 00:00:00 2001
From: marius-kilocode <marius@kilocode.ai>
Date: Tue, 8 Sep 2026 22:23:51 +0200
Subject: [PATCH 2/5] feat(vscode): round subagent avatars with sibling colors
 and live shimmer

Subagent avatars use the spinner dot grid as round 18px glyphs. Siblings take distinct hues in spawn order, running children shimmer their frame dots, and finished or waiting children keep the static glyph. Board routes show the parent as the static spinner and stay static as recorded communication.
---
 .../components/agent-avatar-identity.test.ts  |  35 ++++-
 .../src/components/agent-avatar-identity.ts   |  83 ++++++++--
 .../kilo-ui/src/components/agent-avatar.css   |  67 +++++---
 .../kilo-ui/src/components/agent-avatar.tsx   |  57 +++++--
 .../kilo-ui/src/components/basic-tool.css     |  12 +-
 .../kilo-ui/src/components/board-message.css  |  12 +-
 .../kilo-ui/src/components/board-message.tsx  |  14 +-
 .../kilo-ui/src/components/message-part.tsx   |  54 +++----
 .../agent-manager/SubagentPanel.tsx           |  28 ++--
 .../agent-manager/agent-manager.css           |   4 +-
 .../src/components/chat/BackgroundAgents.tsx  |  34 +----
 .../src/components/chat/ChatView.tsx          | 143 +++++++++---------
 .../src/components/chat/TaskToolExpanded.tsx  |   8 +-
 .../src/components/chat/background-agents.ts  |  12 ++
 .../src/components/chat/task-tool-state.ts    |  15 ++
 15 files changed, 384 insertions(+), 194 deletions(-)

diff --git a/packages/kilo-ui/src/components/agent-avatar-identity.test.ts b/packages/kilo-ui/src/components/agent-avatar-identity.test.ts
index c512d92a8048..a7659ab1fa53 100644
--- a/packages/kilo-ui/src/components/agent-avatar-identity.test.ts
+++ b/packages/kilo-ui/src/components/agent-avatar-identity.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { identity } from "./agent-avatar-identity"
+import { COLORS, identity, palette } from "./agent-avatar-identity"
 
 describe("agent avatar identity", () => {
   test("uses the same identity for the same participant", () => {
@@ -21,8 +21,41 @@ describe("agent avatar identity", () => {
       for (const cell of avatar.cells) {
         expect(cell).toBeGreaterThanOrEqual(0)
         expect(cell).toBeLessThan(25)
+        expect([0, 4, 20, 24]).not.toContain(cell)
         expect(avatar.cells).toContain(Math.floor(cell / 5) * 5 + 4 - (cell % 5))
       }
     }
   })
+
+  test("gives the first siblings distinct colors and keeps earlier assignments stable", () => {
+    const ids = Array.from({ length: COLORS + 3 }, (_, index) => `ses_sibling_${index}`)
+    const colors = palette(ids)
+    expect(new Set(ids.slice(0, COLORS).map((id) => colors.get(id))).size).toBe(COLORS)
+    for (const id of ids) expect(colors.get(id)).toBeNumber()
+    // Adding a later sibling never changes the color of an earlier one.
+    const fewer = palette(ids.slice(0, 5))
+    for (const id of ids.slice(0, 5)) expect(fewer.get(id)).toBe(colors.get(id))
+    expect(palette(["", "unknown", "ses_x"]).get("")).toBeUndefined()
+  })
+
+  test("draws one connected glyph with a bounded size", () => {
+    for (let index = 0; index < 200; index++) {
+      const cells = identity(`ses_${index}`).cells
+      const lit = new Set(cells)
+      expect(cells.length).toBeGreaterThanOrEqual(7)
+      expect(cells.length).toBeLessThanOrEqual(18)
+      const seen = new Set([cells[0]])
+      const queue = [cells[0]]
+      while (queue.length > 0) {
+        const cell = queue.pop()!
+        const near = [cell - 5, cell + 5, cell % 5 > 0 ? cell - 1 : -1, cell % 5 < 4 ? cell + 1 : -1]
+        for (const next of near) {
+          if (!lit.has(next) || seen.has(next)) continue
+          seen.add(next)
+          queue.push(next)
+        }
+      }
+      expect(seen.size).toBe(cells.length)
+    }
+  })
 })
diff --git a/packages/kilo-ui/src/components/agent-avatar-identity.ts b/packages/kilo-ui/src/components/agent-avatar-identity.ts
index 8727da1088b7..8e37a28178d1 100644
--- a/packages/kilo-ui/src/components/agent-avatar-identity.ts
+++ b/packages/kilo-ui/src/components/agent-avatar-identity.ts
@@ -1,14 +1,77 @@
-export function identity(id: string) {
-  const known = id.trim() !== "" && id !== "unknown"
-  let hash = 2166136261
-  for (let index = 0; index < id.length; index++) {
-    hash = Math.imul(hash ^ id.charCodeAt(index), 16777619) >>> 0
+export const COLORS = 8
+const HALF = 15
+
+/**
+ * Assign colors to sibling agents in spawn order. Each agent keeps its hashed
+ * color when it is still free; otherwise it takes the next free hue, so the
+ * first eight siblings never share a color. After that, colors repeat and the
+ * glyph shape is what tells agents apart.
+ */
+export function palette(ids: string[]) {
+  const used = new Set<number>()
+  const result = new Map<string, number>()
+  for (const id of ids) {
+    if (result.has(id)) continue
+    const color = identity(id).color
+    if (color == null) continue
+    if (used.size >= COLORS) used.clear()
+    const pick = Array.from({ length: COLORS }, (_, index) => (color + index) % COLORS).find((hue) => !used.has(hue))
+    if (pick == null) continue
+    used.add(pick)
+    result.set(id, pick)
   }
-  // Mirror three columns into a five-column pattern. Keep the center visible.
-  const mask = known ? (hash >>> 8) | (1 << 8) : (1 << 5) | (1 << 7) | (1 << 8) | (1 << 11)
-  const cells = Array.from({ length: 25 }, (_, index) => index).filter((index) => {
+  return result
+}
+const MIN = 6
+const MAX = 9
+
+function fnv(input: string, seed: number) {
+  let hash = seed
+  for (let index = 0; index < input.length; index++) {
+    hash = Math.imul(hash ^ input.charCodeAt(index), 16777619) >>> 0
+  }
+  return hash
+}
+
+// Mirror three columns into a five-column grid, like the loading spinner grid.
+// The half-cell index is row * 3 + min(column, 4 - column).
+function expand(half: (index: number) => boolean) {
+  return Array.from({ length: 25 }, (_, index) => index).filter((index) => {
     const x = index % 5
-    return mask & (1 << (Math.floor(index / 5) * 3 + Math.min(x, 4 - x)))
+    return half(Math.floor(index / 5) * 3 + Math.min(x, 4 - x))
   })
-  return { color: known ? hash % 6 : undefined, cells }
+}
+
+export function identity(id: string) {
+  const known = id.trim() !== "" && id !== "unknown"
+  if (!known) {
+    const neutral = new Set([4, 7, 10, 13])
+    return { color: undefined, cells: expand((index) => neutral.has(index)) }
+  }
+  const shape = fnv(id, 2166136261)
+  const tone = fnv(id, 0x9747b28c)
+  // Grow one connected shape from a center-column seed so the glyph reads as a
+  // single figure instead of scattered dots. The bounded count avoids
+  // near-empty and near-full blobs that look alike.
+  const count = MIN + (tone % (MAX - MIN + 1))
+  const rank = (index: number) => Math.imul(shape ^ (index + 1), 0x27d4eb2d) >>> 0
+  const lit = new Set([2 + (shape % 5) * 3])
+  while (lit.size < count) {
+    const edge = Array.from({ length: HALF }, (_, index) => index).filter((index) => {
+      if (lit.has(index)) return false
+      // Half-cells 0 and 12 are the grid corners, which the round avatar does not draw.
+      if (index === 0 || index === 12) return false
+      const row = Math.floor(index / 3)
+      const col = index % 3
+      return (
+        (col > 0 && lit.has(index - 1)) ||
+        (col < 2 && lit.has(index + 1)) ||
+        (row > 0 && lit.has(index - 3)) ||
+        (row < 4 && lit.has(index + 3))
+      )
+    })
+    const next = edge.reduce((best, index) => (rank(index) > rank(best) ? index : best))
+    lit.add(next)
+  }
+  return { color: (tone >>> 4) % COLORS, cells: expand((index) => lit.has(index)) }
 }
diff --git a/packages/kilo-ui/src/components/agent-avatar.css b/packages/kilo-ui/src/components/agent-avatar.css
index 19d092dfa3a5..0173758adf7a 100644
--- a/packages/kilo-ui/src/components/agent-avatar.css
+++ b/packages/kilo-ui/src/components/agent-avatar.css
@@ -1,54 +1,87 @@
 [data-component="agent-avatar"] {
+  --agent-avatar-a: var(--icon-weak-base);
+  --agent-avatar-b: var(--icon-weak-base);
   display: inline-block;
-  flex: 0 0 20px;
-  width: 20px;
-  height: 20px;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
   vertical-align: middle;
-  color: var(--icon-weak-base);
+  color: color-mix(in oklch, var(--agent-avatar-a), var(--agent-avatar-b));
   fill: currentColor;
-  shape-rendering: crispEdges;
 
-  &[data-running] rect {
-    animation: agent-avatar-shimmer 1.6s ease-in-out infinite;
+  /* Unlit dots stay faintly visible, like the spinner's outer ring, but low
+     enough that the lit glyph stays readable. */
+  circle {
+    opacity: 0.1;
   }
 
+  circle[data-lit] {
+    opacity: 1;
+  }
+
+  /* While running, the glyph stays solid and the faint frame dots shimmer
+     around it, so the symbol remains recognizable. */
+  &[data-status="running"] circle:not([data-lit]) {
+    animation: agent-avatar-pulse 1.4s ease-in-out infinite both;
+  }
+
+  /* Eight well-separated hues: the six VS Code chart colors plus teal and pink,
+     ordered so neighbors in the palette are far apart in hue. Siblings take
+     colors in this order, so the first eight agents never share one. */
   &[data-color="0"] {
-    color: var(--vscode-charts-blue, var(--icon-info-base));
+    --agent-avatar-a: var(--vscode-charts-blue, var(--icon-info-base));
+    --agent-avatar-b: var(--agent-avatar-a);
   }
 
   &[data-color="1"] {
-    color: var(--vscode-charts-green, var(--icon-success-base));
+    --agent-avatar-a: var(--vscode-charts-orange, var(--icon-warning-base));
+    --agent-avatar-b: var(--agent-avatar-a);
   }
 
   &[data-color="2"] {
-    color: var(--vscode-charts-yellow, var(--icon-warning-base));
+    --agent-avatar-a: var(--vscode-charts-green, var(--icon-success-base));
+    --agent-avatar-b: var(--agent-avatar-a);
   }
 
   &[data-color="3"] {
-    color: var(--vscode-charts-orange, var(--icon-warning-base));
+    --agent-avatar-a: var(--vscode-charts-purple, var(--icon-info-base));
+    --agent-avatar-b: var(--agent-avatar-a);
   }
 
   &[data-color="4"] {
-    color: var(--vscode-charts-purple, var(--icon-info-base));
+    --agent-avatar-a: var(--vscode-charts-yellow, var(--icon-warning-base));
+    --agent-avatar-b: var(--agent-avatar-a);
   }
 
   &[data-color="5"] {
-    color: var(--vscode-charts-red, var(--icon-critical-base));
+    --agent-avatar-a: var(--vscode-charts-green, var(--icon-success-base));
+    --agent-avatar-b: var(--vscode-charts-blue, var(--icon-info-base));
+  }
+
+  &[data-color="6"] {
+    --agent-avatar-a: var(--vscode-charts-red, var(--icon-critical-base));
+    --agent-avatar-b: var(--agent-avatar-a);
+  }
+
+  &[data-color="7"] {
+    --agent-avatar-a: var(--vscode-charts-purple, var(--icon-info-base));
+    --agent-avatar-b: var(--vscode-charts-red, var(--icon-critical-base));
   }
 }
 
-@keyframes agent-avatar-shimmer {
+@keyframes agent-avatar-pulse {
   0%,
   100% {
-    opacity: 0.35;
+    opacity: 0.1;
   }
   50% {
-    opacity: 1;
+    opacity: 0.45;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component="agent-avatar"][data-running] rect {
+  [data-component="agent-avatar"][data-status="running"] circle:not([data-lit]) {
     animation: none;
+    opacity: 0.25;
   }
 }
diff --git a/packages/kilo-ui/src/components/agent-avatar.tsx b/packages/kilo-ui/src/components/agent-avatar.tsx
index b28f26cf4b05..628a5b26cda5 100644
--- a/packages/kilo-ui/src/components/agent-avatar.tsx
+++ b/packages/kilo-ui/src/components/agent-avatar.tsx
@@ -1,26 +1,53 @@
-import { createMemo, For } from "solid-js"
-import { identity } from "./agent-avatar-identity"
+import { createContext, createMemo, For, useContext, type Accessor, type JSX } from "solid-js"
+import { identity, palette } from "./agent-avatar-identity"
 
-export function AgentAvatar(props: { id: string; running?: boolean }) {
+export type AgentAvatarStatus = "running"
+
+// Map a tool part status to the only avatar state that changes its rendering.
+// Finished, errored, cancelled, and waiting children all keep the static glyph.
+export function taskStatus(status: string | undefined): AgentAvatarStatus | undefined {
+  return status === "pending" || status === "running" ? "running" : undefined
+}
+
+// Sibling-aware colors. Surfaces that know the child list of one parent session
+// provide it here, so the same agent gets the same color in every surface and
+// siblings avoid sharing a color until the palette runs out.
+const Palette = createContext<Accessor<Map<string, number>>>()
+
+export function AgentAvatarPalette(props: { ids: string[]; children: JSX.Element }) {
+  const parent = useContext(Palette)
+  const value = createMemo(() => palette(props.ids))
+  // The outermost provider wins so nested transcripts keep the parent's colors.
+  return <Palette.Provider value={parent ?? value}>{props.children}</Palette.Provider>
+}
+
+// Corner cells are dropped so the dot grid reads as a circle.
+const GRID = Array.from({ length: 25 }, (_, index) => index).filter((index) => ![0, 4, 20, 24].includes(index))
+
+// Same cell geometry as the loading spinner, drawn as round dots on a 1px gap grid.
+export function AgentAvatar(props: { id: string; status?: AgentAvatarStatus }) {
+  const shared = useContext(Palette)
   const avatar = createMemo(() => identity(props.id))
+  const color = createMemo(() => shared?.().get(props.id) ?? avatar().color)
+  const lit = createMemo(() => new Set(avatar().cells))
   return (
     <svg
       data-component="agent-avatar"
-      data-color={avatar().color}
-      data-running={props.running || undefined}
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      data-color={color()}
+      data-status={props.status}
+      width="18"
+      height="18"
+      viewBox="0 0 19 19"
       aria-hidden="true"
     >
-      <For each={avatar().cells}>
+      <For each={GRID}>
         {(cell) => (
-          <rect
-            x={2 + (cell % 5) * 3}
-            y={2 + Math.floor(cell / 5) * 3}
-            width="3"
-            height="3"
-            style={{ "animation-delay": `${-((cell % 5) + Math.floor(cell / 5)) * 0.12}s` }}
+          <circle
+            data-lit={lit().has(cell) || undefined}
+            cx={(cell % 5) * 4 + 1.5}
+            cy={Math.floor(cell / 5) * 4 + 1.5}
+            r="1.5"
+            style={{ "animation-delay": `${-(((cell * 7) % 11) / 11) * 1.4}s` }}
           />
         )}
       </For>
diff --git a/packages/kilo-ui/src/components/basic-tool.css b/packages/kilo-ui/src/components/basic-tool.css
index 593ae36e596a..49714f6bb4ce 100644
--- a/packages/kilo-ui/src/components/basic-tool.css
+++ b/packages/kilo-ui/src/components/basic-tool.css
@@ -4,6 +4,11 @@
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
+
+    /* Variant B status badges intentionally extend into the existing gap. */
+    &:has([data-component="agent-avatar"]) {
+      overflow: visible;
+    }
   }
 
   [data-slot="basic-tool-tool-info"] {
@@ -39,9 +44,10 @@
 
     &:has([data-component="agent-avatar"]) {
       display: inline-flex;
-      flex: 0 0 20px;
-      width: 20px;
-      height: 20px;
+      flex: 0 0 18px;
+      width: 18px;
+      height: 18px;
+      overflow: visible;
     }
   }
 
diff --git a/packages/kilo-ui/src/components/board-message.css b/packages/kilo-ui/src/components/board-message.css
index 85d5beae9838..90ae47cda290 100644
--- a/packages/kilo-ui/src/components/board-message.css
+++ b/packages/kilo-ui/src/components/board-message.css
@@ -31,6 +31,16 @@
   [data-slot="board-route-recipient-icon"] {
     display: inline-flex;
   }
+
+  /* Parent session marker: the spinner grid, static, in the avatar slot size. */
+  .board-route-parent {
+    width: 18px;
+    color: var(--text-weak);
+
+    > rect {
+      animation: none !important;
+    }
+  }
 }
 
 [data-component="board-messages"] {
@@ -66,7 +76,7 @@
 @container (max-width: 260px) {
   [data-component="board-route"] {
     display: grid;
-    grid-template-columns: 20px auto minmax(0, 1fr);
+    grid-template-columns: 18px auto minmax(0, 1fr);
     gap: 4px 6px;
 
     .board-route-member {
diff --git a/packages/kilo-ui/src/components/board-message.tsx b/packages/kilo-ui/src/components/board-message.tsx
index c1e1aca471f7..4bf636784c6c 100644
--- a/packages/kilo-ui/src/components/board-message.tsx
+++ b/packages/kilo-ui/src/components/board-message.tsx
@@ -3,8 +3,18 @@ import { useI18n } from "../context/i18n"
 import { Icon } from "./icon"
 import { AgentAvatar } from "./agent-avatar"
 import { Markdown } from "./markdown"
+import { Spinner } from "./spinner"
 import { Tooltip } from "./tooltip"
 
+// The parent session keeps the plain spinner grid; only subagents get a glyph.
+function Member(props: { id: string }) {
+  return (
+    <Show when={props.id !== "main"} fallback={<Spinner class="board-route-parent" />}>
+      <AgentAvatar id={props.id} />
+    </Show>
+  )
+}
+
 type Route = { from?: unknown; to?: unknown; fromLabel?: unknown; toLabel?: unknown }
 
 export function BoardRoute(props: Route) {
@@ -36,7 +46,7 @@ export function BoardRoute(props: Route) {
       role="group"
       aria-label={i18n.t("ui.messagePart.board.route", { from: sender(), to: recipient() })}
     >
-      <AgentAvatar id={from()} />
+      <Member id={from()} />
       <Tooltip
         class="board-route-member board-route-sender"
         contentClass="board-route-tooltip"
@@ -46,7 +56,7 @@ export function BoardRoute(props: Route) {
       </Tooltip>
       <Icon name="arrow-right" size="small" />
       <span data-slot="board-route-recipient-icon" data-broadcast={to() === "ALL"}>
-        <Show when={to() === "ALL"} fallback={<AgentAvatar id={to()} />}>
+        <Show when={to() === "ALL"} fallback={<Member id={to()} />}>
           <Icon name="task" size="small" />
           <Icon name="task" size="small" />
         </Show>
diff --git a/packages/kilo-ui/src/components/message-part.tsx b/packages/kilo-ui/src/components/message-part.tsx
index 9a360689ae9d..01379f802c0b 100644
--- a/packages/kilo-ui/src/components/message-part.tsx
+++ b/packages/kilo-ui/src/components/message-part.tsx
@@ -36,7 +36,7 @@ import { useClipboard } from "../context/clipboard"
 import { type UiI18n, useI18n } from "../context/i18n"
 import { BasicTool, useToolApprovalLine } from "./basic-tool"
 import { BoardMessage, BoardRoute } from "./board-message"
-import { AgentAvatar } from "./agent-avatar"
+import { AgentAvatar, taskStatus } from "./agent-avatar"
 import { Accordion } from "./accordion"
 import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { Card } from "./card"
@@ -2170,9 +2170,9 @@ ToolRegistry.register({
               animate={props.reveal}
               onClick={data.openFile ? () => data.openFile!(filepath) : undefined}
             />
-    )}
+          )}
         </For>
-      <Show when={images().length > 0}>
+        <Show when={images().length > 0}>
           <div data-slot="tool-read-images">
             <For each={images()}>
               {(file) => (
@@ -2458,9 +2458,7 @@ ToolRegistry.register({
         hideDetails
         approvalPlacement="hidden"
         icon="task"
-        iconNode={
-          <AgentAvatar id={childSessionId() ?? ""} running={props.status === "running" || props.status === "pending"} />
-        }
+        iconNode={<AgentAvatar id={childSessionId() ?? ""} status={taskStatus(props.status)} />}
         status={props.status}
         trigger={trigger()}
         animated
@@ -2908,24 +2906,26 @@ ToolRegistry.register({
       const diffs = files().flatMap((file) => {
         const diff = view(file)
         return diff
-          ? [{
-              file: file.relativePath,
-              patch: diff.patch,
-              status:
-                file.type === "add"
-                  ? ("added" as const)
-                  : file.type === "delete"
-                    ? ("deleted" as const)
-                    : ("modified" as const),
-              additions:
-                file.type === "add" && diff.additions === 0
-                  ? diff.fileDiff.hunks.reduce((sum, hunk) => sum + hunk.additionLines, 0)
-                  : diff.additions,
-              deletions:
-                file.type === "delete" && diff.deletions === 0
-                  ? diff.fileDiff.hunks.reduce((sum, hunk) => sum + hunk.deletionLines, 0)
-                  : diff.deletions,
-            }]
+          ? [
+              {
+                file: file.relativePath,
+                patch: diff.patch,
+                status:
+                  file.type === "add"
+                    ? ("added" as const)
+                    : file.type === "delete"
+                      ? ("deleted" as const)
+                      : ("modified" as const),
+                additions:
+                  file.type === "add" && diff.additions === 0
+                    ? diff.fileDiff.hunks.reduce((sum, hunk) => sum + hunk.additionLines, 0)
+                    : diff.additions,
+                deletions:
+                  file.type === "delete" && diff.deletions === 0
+                    ? diff.fileDiff.hunks.reduce((sum, hunk) => sum + hunk.deletionLines, 0)
+                    : diff.deletions,
+              },
+            ]
           : []
       })
       const first = diffs[0]
@@ -3074,11 +3074,7 @@ ToolRegistry.register({
                                       <span data-slot="apply-patch-directory">{`\u2066${getDirectory(file.relativePath)}\u2069`}</span>
                                     </Show>
 
-                                    <span
-                                      data-slot="apply-patch-filename"
-                                    >
-                                      {getFilename(file.relativePath)}
-                                    </span>
+                                    <span data-slot="apply-patch-filename">{getFilename(file.relativePath)}</span>
                                   </div>
                                 </div>
                                 <div data-slot="apply-patch-trigger-actions">
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx b/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
index fa15a7e55448..89c412d41885 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
+++ b/packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx
@@ -6,15 +6,15 @@
  */
 
 import { Icon } from "@kilocode/kilo-ui/icon"
-import { AgentAvatar } from "@kilocode/kilo-ui/agent-avatar"
+import { AgentAvatar, AgentAvatarPalette } from "@kilocode/kilo-ui/agent-avatar"
 import { IconButton } from "@kilocode/kilo-ui/icon-button"
-import { createEffect, createMemo, on, Show, type Accessor, type Component } from "solid-js"
+import { createEffect, createMemo, on, type Accessor, type Component } from "solid-js"
 import { DataBridge } from "../src/App"
 import { ChatView } from "../src/components/chat"
-import { ActivityIcon } from "../src/components/shared/ActivityIcon"
+import { children } from "../src/components/chat/background-agents"
 import { useLanguage } from "../src/context/language"
 import { SessionProvider, useSession, useSessionVisibility } from "../src/context/session"
-import { description, label, running, type Activity } from "../src/utils/session-activity"
+import { description, label, type Activity } from "../src/utils/session-activity"
 import { SortableClosableTab } from "./ClosableTab"
 import { InspectorTabStrip } from "./InspectorTabStrip"
 import type { SubagentTab } from "./subagent-tabs"
@@ -105,12 +105,7 @@ const SubagentContent: Component<Props & { activity: (id: string) => Activity }>
               tooltip={() => (state() === "idle" ? name : `${name}: ${language.t(description(state()))}`)}
               icon="task"
               iconNode={
-                <>
-                  <AgentAvatar id={id} running={running(state())} />
-                  <Show when={state() !== "idle" && !running(state())}>
-                    <ActivityIcon state={state()} spinner="am-tab-spinner" />
-                  </Show>
-                </>
+                <AgentAvatar id={id} status={state() === "busy" || state() === "retry" ? "running" : undefined} />
               }
               state={state()}
               stateLabel={state() === "idle" ? undefined : language.t(label(state()))}
@@ -145,9 +140,16 @@ const SubagentContent: Component<Props & { activity: (id: string) => Activity }>
 export const SubagentPanel: Component<Props> = (props) => {
   const session = useSession()
   useSessionVisibility(() => (props.visible() ? props.active() : undefined))
+  // Colors follow the parent's spawn order so tabs match the parent transcript.
+  const siblings = createMemo(() => {
+    const id = session.currentSessionID()
+    return id ? children(session.getSessionToolParts(id)) : []
+  })
   return (
-    <SessionProvider>
-      <SubagentContent {...props} activity={session.activityFor} />
-    </SessionProvider>
+    <AgentAvatarPalette ids={siblings()}>
+      <SessionProvider>
+        <SubagentContent {...props} activity={session.activityFor} />
+      </SessionProvider>
+    </AgentAvatarPalette>
   )
 }
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
index 1e9939b690b6..ec363fb5a03b 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
+++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
@@ -1521,9 +1521,7 @@ html[data-theme="kilo-vscode"]
 }
 
 .am-subagent-panel .am-tab-icon:has([data-component="agent-avatar"]) {
-  width: auto;
-  height: 20px;
-  gap: 4px;
+  overflow: visible;
 }
 
 .am-tab-icon[data-run-status="success"] {
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
index 9b6775fbf716..7393fed3e8d2 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx
@@ -237,15 +237,8 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
               aria-expanded={open()}
               onClick={() => setOpen((value) => !value)}
             >
-              <Show
-                when={waiting() > 0}
-                fallback={
-                  <Show when={icon(state())} fallback={<Spinner />}>
-                    {(name) => <Icon name={name()} size="small" />}
-                  </Show>
-                }
-              >
-                <Icon name="warning" size="small" />
+              <Show when={icon(state())} fallback={<Spinner />}>
+                {(name) => <Icon name={name()} size="small" />}
               </Show>
               <span data-slot="task-header-todos-summary">{caption()}</span>
             </Button>
@@ -265,19 +258,8 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
                         aria-label={tooltip(agent())}
                         onClick={() => openAgent(agent())}
                       >
-                        <AgentAvatar
-                          id={agent().id}
-                          running={agent().status === "running" && !agent().permission && !agent().question}
-                        />
+                        <AgentAvatar id={agent().id} status={agent().status === "running" ? "running" : undefined} />
                         <span dir="auto">{label(agent())}</span>
-                        <Show
-                          when={agent().permission || agent().question}
-                          fallback={
-                            <Show when={icon(agent().status)}>{(name) => <Icon name={name()} size="small" />}</Show>
-                          }
-                        >
-                          <Icon name="warning" size="small" />
-                        </Show>
                       </Button>
                     )}
                   </Show>
@@ -308,7 +290,6 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
             ref={toggle}
             variant="ghost"
             size="small"
-            icon={waiting() > 0 ? "warning" : undefined}
             aria-label={accessible()}
             title={accessible()}
             aria-expanded={open()}
@@ -354,7 +335,6 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
           <div data-slot="task-header-todos-list" ref={list}>
             <Show when={visible().some((agent) => agent.permission || agent.question)}>
               <div data-slot="task-header-agent-attention">
-                <Icon name="warning" size="small" />
                 <span>{language.t("task.backgroundAgents.waiting")}</span>
               </div>
             </Show>
@@ -363,13 +343,7 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
                 <Show when={visible().find((agent) => agent.jobID === id)}>
                   {(agent) => (
                     <div data-slot="task-header-agent" data-status={agent().status}>
-                      <AgentAvatar
-                        id={agent().id}
-                        running={agent().status === "running" && !agent().permission && !agent().question}
-                      />
-                      <Show when={icon(agent().status)}>
-                        {(name) => <Icon name={name()} size="small" data-slot="task-header-agent-status" />}
-                      </Show>
+                      <AgentAvatar id={agent().id} status={agent().status === "running" ? "running" : undefined} />
                       <button
                         data-slot="task-header-agent-main"
                         title={`${language.t("task.backgroundAgents.open")}: ${label(agent())}`}
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/ChatView.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/ChatView.tsx
index b859c9321506..2b4467981f6f 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/ChatView.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/ChatView.tsx
@@ -6,6 +6,7 @@
  */
 
 import { type Component, type JSX, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { AgentAvatarPalette } from "@kilocode/kilo-ui/agent-avatar"
 import { Button } from "@kilocode/kilo-ui/button"
 import { Icon } from "@kilocode/kilo-ui/icon"
 import { Spinner } from "@kilocode/kilo-ui/spinner"
@@ -27,6 +28,7 @@ import { useWorktreeMode } from "../../context/worktree-mode"
 import { useServer } from "../../context/server"
 import { TranscriptSearchProvider } from "../../context/transcript-search"
 import { isPromptBlocked, isSuggesting, isQuestioning } from "./prompt-input-utils"
+import { children } from "./background-agents"
 import { showTabStrip } from "../../utils/local-tabs"
 import type { WorktreeReference } from "../../hooks/file-mention-utils"
 
@@ -360,77 +362,82 @@ export const ChatView: Component<ChatViewProps> = (props) => {
     </Show>
   )
 
+  // Sibling-aware avatar colors for every subagent spawned by this session.
+  const siblings = createMemo(() => (id() ? children(session.getSessionToolParts(id()!)) : []))
+
   return (
-    <TranscriptSearchProvider>
-      <div class="chat-view">
-        <Show when={isSidebar() && !props.readonly && tabs && showTabStrip(tabs.ids())}>
-          <SessionTabStrip />
-        </Show>
-        <TaskHeader readonly={props.readonly} projectId={props.projectId} />
-        <div class="chat-messages-wrapper">
-          <div class="chat-messages">
-            <MessageList
-              onSelectSession={props.onSelectSession}
-              isSessionOpen={props.isSessionOpen}
-              onShowHistory={props.onShowHistory}
-              onForkMessage={props.onForkMessage}
-              onEditMessage={edit}
-              queuedDisabled={editing()?.sessionID === id() && !!editing()}
-              editDisabled={!editable() || !!editing()}
-              questions={standaloneQuestions}
-              suggestions={standaloneSuggestions}
-              readonly={props.readonly}
-              emptyState={props.emptyState}
-              introduction={props.introduction}
-              announce={isSidebar()}
-              sessionID={pendingSessionID}
-            />
+    <AgentAvatarPalette ids={siblings()}>
+      <TranscriptSearchProvider>
+        <div class="chat-view">
+          <Show when={isSidebar() && !props.readonly && tabs && showTabStrip(tabs.ids())}>
+            <SessionTabStrip />
+          </Show>
+          <TaskHeader readonly={props.readonly} projectId={props.projectId} />
+          <div class="chat-messages-wrapper">
+            <div class="chat-messages">
+              <MessageList
+                onSelectSession={props.onSelectSession}
+                isSessionOpen={props.isSessionOpen}
+                onShowHistory={props.onShowHistory}
+                onForkMessage={props.onForkMessage}
+                onEditMessage={edit}
+                queuedDisabled={editing()?.sessionID === id() && !!editing()}
+                editDisabled={!editable() || !!editing()}
+                questions={standaloneQuestions}
+                suggestions={standaloneSuggestions}
+                readonly={props.readonly}
+                emptyState={props.emptyState}
+                introduction={props.introduction}
+                announce={isSidebar()}
+                sessionID={pendingSessionID}
+              />
+            </div>
           </div>
-        </div>
 
-        <Show when={dock()}>
-          <div class="chat-input">
-            <Show when={server.connectionState() === "error" && server.errorMessage()}>
-              <StartupErrorBanner errorMessage={server.errorMessage()!} errorDetails={server.errorDetails()!} />
-            </Show>
-            <Show when={permissionRequest()} keyed>
-              {(perm) => (
-                <PermissionDock
-                  request={perm}
-                  responding={session.respondingPermissions().has(perm.id)}
-                  onDecide={decide}
-                />
-              )}
-            </Show>
-            <SessionDock
-              blocked={dockBlocked()}
-              hasActions={() => !props.readonly && (hasActions(hasMessages()) || !!goal())}
-              actions={(control) => renderActions(hasMessages(), control)}
-              readonly={props.readonly}
-            />
-            <Show when={!props.readonly}>
-              <PromptInput
-                blocked={blocked}
-                edit={editing()}
-                onEditComplete={() => setEditing(undefined)}
-                onEditReady={setEditable}
-                suggesting={suggesting}
-                questioning={questioning}
-                worktree={props.worktree}
-                onUpdateBase={props.onUpdateBase}
-                boxId={props.promptBoxId}
-                terminalContext={props.terminalContext}
-                worktrees={props.worktrees}
-                deferFocusToQuestion={props.deferFocusToQuestion}
-                pendingSessionID={pendingSessionID()}
-                focusOnDraftChange={props.focusOnDraftChange}
-                onFocusChange={props.onFocusChange}
-                resolveEmbeddedTerminal={props.resolveEmbeddedTerminal}
+          <Show when={dock()}>
+            <div class="chat-input">
+              <Show when={server.connectionState() === "error" && server.errorMessage()}>
+                <StartupErrorBanner errorMessage={server.errorMessage()!} errorDetails={server.errorDetails()!} />
+              </Show>
+              <Show when={permissionRequest()} keyed>
+                {(perm) => (
+                  <PermissionDock
+                    request={perm}
+                    responding={session.respondingPermissions().has(perm.id)}
+                    onDecide={decide}
+                  />
+                )}
+              </Show>
+              <SessionDock
+                blocked={dockBlocked()}
+                hasActions={() => !props.readonly && (hasActions(hasMessages()) || !!goal())}
+                actions={(control) => renderActions(hasMessages(), control)}
+                readonly={props.readonly}
               />
-            </Show>
-          </div>
-        </Show>
-      </div>
-    </TranscriptSearchProvider>
+              <Show when={!props.readonly}>
+                <PromptInput
+                  blocked={blocked}
+                  edit={editing()}
+                  onEditComplete={() => setEditing(undefined)}
+                  onEditReady={setEditable}
+                  suggesting={suggesting}
+                  questioning={questioning}
+                  worktree={props.worktree}
+                  onUpdateBase={props.onUpdateBase}
+                  boxId={props.promptBoxId}
+                  terminalContext={props.terminalContext}
+                  worktrees={props.worktrees}
+                  deferFocusToQuestion={props.deferFocusToQuestion}
+                  pendingSessionID={pendingSessionID()}
+                  focusOnDraftChange={props.focusOnDraftChange}
+                  onFocusChange={props.onFocusChange}
+                  resolveEmbeddedTerminal={props.resolveEmbeddedTerminal}
+                />
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </TranscriptSearchProvider>
+    </AgentAvatarPalette>
   )
 }
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
index f7f0a22888ec..8a0fc7d4e48a 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/TaskToolExpanded.tsx
@@ -24,7 +24,7 @@ import { useWorktreeMode } from "../../context/worktree-mode"
 import { childID, latestTaskPart } from "../../context/session-utils"
 import { useConfig } from "../../context/config"
 import { openSubagent } from "./open-subagent"
-import { showChildPromotion, taskResult, taskRunning, taskVisible } from "./task-tool-state"
+import { showChildPromotion, taskAvatarStatus, taskResult, taskRunning, taskVisible } from "./task-tool-state"
 
 const TaskToolRenderer: Component<ToolProps> = (props) => {
   const i18n = useI18n()
@@ -59,6 +59,10 @@ const TaskToolRenderer: Component<ToolProps> = (props) => {
   )
 
   const running = createMemo(() => taskRunning(props.status))
+  const avatar = createMemo(() => {
+    const id = childSessionId()
+    return taskAvatarStatus(id, props.status, session.allStatusMap())
+  })
   // BasicTool's forceOpen effect only fires onOpenChange on a false->true
   // transition — a virtualized remount that starts with forceOpen already
   // true never transitions, so this local signal must also seed itself from
@@ -203,7 +207,7 @@ const TaskToolRenderer: Component<ToolProps> = (props) => {
     <div data-component="tool-part-wrapper">
       <BasicTool
         icon="task"
-        iconNode={<AgentAvatar id={childSessionId() ?? ""} running={running()} />}
+        iconNode={<AgentAvatar id={childSessionId() ?? ""} status={avatar()} />}
         status={props.status}
         tool={props.tool}
         partID={props.partID}
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/background-agents.ts b/packages/kilo-vscode/webview-ui/src/components/chat/background-agents.ts
index 14d57fa6f26c..e276668f8136 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/background-agents.ts
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/background-agents.ts
@@ -66,6 +66,18 @@ function meta(part: ToolPart, key: string): unknown {
   return (part.state as { metadata?: Record<string, unknown> }).metadata?.[key]
 }
 
+/** Child session IDs of every Task tool part, in spawn order, without duplicates. */
+export function children(tools: ToolPart[]): string[] {
+  const ids: string[] = []
+  for (const part of tools) {
+    if (part.tool !== "task") continue
+    const id = text(meta(part, "sessionId"))
+    if (!id || ids.includes(id)) continue
+    ids.push(id)
+  }
+  return ids
+}
+
 function working(status: SessionStatusInfo | undefined): boolean {
   return status?.type === "busy" || status?.type === "retry"
 }
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/task-tool-state.ts b/packages/kilo-vscode/webview-ui/src/components/chat/task-tool-state.ts
index f54bbb72e187..7014587d2fa2 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/task-tool-state.ts
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/task-tool-state.ts
@@ -4,6 +4,21 @@ export function taskRunning(status: string | undefined) {
   return status === "pending" || status === "running"
 }
 
+/**
+ * Avatar state for a Task card. The child session's live status wins, because
+ * a background Task tool part completes as soon as the child is started while
+ * the child keeps working. Finished and waiting children keep a static glyph.
+ */
+export function taskAvatarStatus(
+  id: string | undefined,
+  tool: string | undefined,
+  status: Record<string, SessionStatusInfo>,
+) {
+  if (id && (status[id]?.type === "busy" || status[id]?.type === "retry")) return "running" as const
+  if (taskRunning(tool)) return "running" as const
+  return undefined
+}
+
 export function childForeground(
   id: string | undefined,
   part: Record<string, unknown> | undefined,

From 3fd7be42694ee2c341e9051790955112255f91a3 Mon Sep 17 00:00:00 2001
From: marius-kilocode <marius@kilocode.ai>
Date: Wed, 9 Sep 2026 09:02:19 +0200
Subject: [PATCH 3/5] fix(vscode): update avatar CI expectations

---
 .../kilo-ui/src/components/board-message.tsx  |  3 +--
 .../kilo-vscode/tests/accessibility.spec.ts   | 24 +++++++++----------
 .../kilo-vscode/tests/swarm-board.spec.ts     |  6 +++--
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/kilo-ui/src/components/board-message.tsx b/packages/kilo-ui/src/components/board-message.tsx
index 4bf636784c6c..862fa727fbef 100644
--- a/packages/kilo-ui/src/components/board-message.tsx
+++ b/packages/kilo-ui/src/components/board-message.tsx
@@ -3,13 +3,12 @@ import { useI18n } from "../context/i18n"
 import { Icon } from "./icon"
 import { AgentAvatar } from "./agent-avatar"
 import { Markdown } from "./markdown"
-import { Spinner } from "./spinner"
 import { Tooltip } from "./tooltip"
 
 // The parent session keeps the plain spinner grid; only subagents get a glyph.
 function Member(props: { id: string }) {
   return (
-    <Show when={props.id !== "main"} fallback={<Spinner class="board-route-parent" />}>
+    <Show when={props.id !== "main"} fallback={<Icon class="board-route-parent" name="task" size="small" />}>
       <AgentAvatar id={props.id} />
     </Show>
   )
diff --git a/packages/kilo-vscode/tests/accessibility.spec.ts b/packages/kilo-vscode/tests/accessibility.spec.ts
index 8b615d6561a7..2dd1e447f9e7 100644
--- a/packages/kilo-vscode/tests/accessibility.spec.ts
+++ b/packages/kilo-vscode/tests/accessibility.spec.ts
@@ -73,7 +73,7 @@ test.describe("webview accessibility ratchet", () => {
     await expect(list).toBeHidden()
   })
 
-  test("Background agents preserve running spinners and collapse after completion", async ({ page }) => {
+  test("Background agents preserve running avatars and collapse after completion", async ({ page }) => {
     await page.emulateMedia({ reducedMotion: "no-preference" })
     await page.clock.install()
     await page.clock.pauseAt(new Date())
@@ -117,15 +117,15 @@ test.describe("webview accessibility ratchet", () => {
     const row = list.locator('[data-slot="task-header-agent"]')
     await expect(row).toContainText("Background agent 1")
     const node = await row.elementHandle()
-    const spinner = await row.locator('[data-component="spinner"]').elementHandle()
-    expect(spinner).not.toBeNull()
+    const avatar = await row.locator('[data-component="agent-avatar"]').elementHandle()
+    expect(avatar).not.toBeNull()
 
     for (const revision of [2, 3]) {
       await page.clock.runFor(1000)
       await expect(row).toContainText(`Background agent ${revision}`)
       await expect(row).toHaveAttribute("data-status", "running")
       expect(await node!.evaluate((node) => node.isConnected)).toBe(true)
-      expect(await spinner!.evaluate((node) => node.isConnected)).toBe(true)
+      expect(await avatar!.evaluate((node) => node.isConnected)).toBe(true)
     }
 
     await row.locator('[data-slot="task-header-agent-main"]').focus()
@@ -138,8 +138,7 @@ test.describe("webview accessibility ratchet", () => {
     await expect(preview).toHaveAttribute("aria-hidden", "false")
     await expect(preview).toHaveAccessibleName("Open background agent: Background agent 4 (Done)")
     await expect(preview).toHaveAttribute("title", "Open background agent: Background agent 4 (Done)")
-    await expect(preview.locator('[data-component="icon"]')).toBeVisible()
-    await expect(preview.locator('[data-component="icon"] use')).toHaveAttribute("href", "#opencode-icon-circle-check")
+    await expect(preview.locator('[data-component="agent-avatar"]')).toBeVisible()
     await expect(agents.locator('[data-component="spinner"]')).toHaveCount(0)
 
     await toggle.click()
@@ -204,10 +203,10 @@ test.describe("webview accessibility ratchet", () => {
     const clear = agents.getByRole("button", { name: "Clear finished", exact: true })
     await expect(clear).toHaveText("")
     await expect(clear).toHaveAttribute("title", "Clear finished")
-    for (const [status, label, icon] of [
-      ["completed", "Done", "circle-check"],
-      ["cancelled", "Cancelled", "circle-ban-sign"],
-      ["error", "Error", "warning"],
+    for (const [status, label] of [
+      ["completed", "Done"],
+      ["cancelled", "Cancelled"],
+      ["error", "Error"],
     ] as const) {
       const item = agents.locator(`[data-slot="task-header-agents-item"][data-status="${status}"]`)
       const name = `Open background agent: Background agent ${status} (${label})`
@@ -215,8 +214,7 @@ test.describe("webview accessibility ratchet", () => {
       await expect(item).toHaveText(`Background agent ${status}`)
       await expect(item).toHaveAccessibleName(name)
       await expect(item).toHaveAttribute("title", name)
-      await expect(item.locator('[data-component="icon"]')).toBeVisible()
-      await expect(item.locator('[data-component="icon"] use')).toHaveAttribute("href", `#opencode-icon-${icon}`)
+      await expect(item.locator('[data-component="agent-avatar"]')).toBeVisible()
     }
     await expect(agents.locator('[data-component="spinner"]')).toHaveCount(0)
 
@@ -239,7 +237,7 @@ test.describe("webview accessibility ratchet", () => {
     await expect(items).toHaveCount(4)
     await expect(items.first()).toHaveAttribute("data-status", "running")
     await expect(items.first()).toHaveAttribute("aria-hidden", "false")
-    await expect(items.first().locator('[data-component="spinner"]')).toBeVisible()
+    await expect(items.first().locator('[data-component="agent-avatar"]')).toHaveAttribute("data-status", "running")
     await expect(agents.locator('[data-slot="task-header-agents-overflow"]')).toHaveAttribute("aria-hidden", "false")
   })
 
diff --git a/packages/kilo-vscode/tests/swarm-board.spec.ts b/packages/kilo-vscode/tests/swarm-board.spec.ts
index 898051efaf81..0a0463062883 100644
--- a/packages/kilo-vscode/tests/swarm-board.spec.ts
+++ b/packages/kilo-vscode/tests/swarm-board.spec.ts
@@ -106,7 +106,9 @@ test("uses a distinct icon and fills short histories without manual paging", asy
   const rows = page.locator('.task-board-list [data-slot="board-message"]')
   await expect(rows.last().getByRole("group", { name: "Agent to All agents" })).toBeVisible()
   await expect(rows.last().locator('[data-slot="board-route-recipient-icon"] [data-component="icon"]')).toHaveCount(2)
-  await expect(rows.first().locator('[data-slot="board-route-recipient-icon"] [data-component="icon"]')).toHaveCount(1)
+  await expect(
+    rows.first().locator('[data-slot="board-route-recipient-icon"] [data-component="agent-avatar"]'),
+  ).toHaveCount(1)
   await expect(rows.last().locator("strong")).toHaveText("formatted")
   await expect(rows.last().locator("code")).toHaveText("code")
   expect(icon).not.toBe(await rows.first().locator('[data-component="board-route"] svg').first().innerHTML())
@@ -188,7 +190,7 @@ for (const width of [420, 200]) {
     await expect(routes).toHaveCount(2)
     await expect(routes.first()).toHaveCSS("display", width === 200 ? "grid" : "flex")
     await expect(
-      routes.first().locator('[data-slot="board-route-recipient-icon"] [data-component="icon"]'),
+      routes.first().locator('[data-slot="board-route-recipient-icon"] [data-component="agent-avatar"]'),
     ).toHaveCount(1)
     await expect(routes.last().locator('[data-slot="board-route-recipient-icon"] [data-component="icon"]')).toHaveCount(
       2,

From 501d08daa0efa8084881f9d99ab8d508a48c675b Mon Sep 17 00:00:00 2001
From: "kilo-maintainer[bot]" <kilo-maintainer[bot]@users.noreply.github.com>
Date: Wed, 9 Sep 2026 07:05:49 +0000
Subject: [PATCH 4/5] chore: update kilo-vscode visual regression baselines

---
 .../task-header-background-agents-1280-chromium-linux.png     | 4 ++--
 ...task-header-single-background-agent-420-chromium-linux.png | 4 ++--
 .../composite-webview/agent-messages-200-chromium-linux.png   | 4 ++--
 .../composite-webview/agent-messages-chromium-linux.png       | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-background-agents-1280-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-background-agents-1280-chromium-linux.png
index 64afb32dda6e..64534c09cd01 100644
--- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-background-agents-1280-chromium-linux.png
+++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-background-agents-1280-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a356afcc1d81da64ec5b498840abeadc77c44bb2da9cebbb3ffff99dd7183d6
-size 9020
+oid sha256:16da0a97cf729959168dd4ebec51dce6cf47ee9f681d601247c775bc38830f63
+size 12601
diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-single-background-agent-420-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-single-background-agent-420-chromium-linux.png
index e7c1a5fc3b59..78a10205a983 100644
--- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-single-background-agent-420-chromium-linux.png
+++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/chat/task-header-single-background-agent-420-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ebd62d9dda76da0d8e430ed7c81e5cb66c3233bc6193f4aa077bd1d6d53fbef6
-size 5370
+oid sha256:c5777d424590ad3fd22cb1a782ea84e1269ff04203377798922627e40063a408
+size 7227
diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-200-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-200-chromium-linux.png
index 50311aaf6f78..b392a38b65f5 100644
--- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-200-chromium-linux.png
+++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-200-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ba38eac2577fa87faa72731583f5d6b0681a4636f77e247c896989c732d43fc9
-size 37024
+oid sha256:9df99cbf6043b0444aac6ef3bde54d60649d99b30a14a147ab4f512cfc9dd0ff
+size 40030
diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-chromium-linux.png
index 3e58381a089f..fc8a25d1365a 100644
--- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-chromium-linux.png
+++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/agent-messages-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d4302f30f282fe7d5b5094c01991c9729a75a7c31f1040324bc5bccfa469102
-size 39172
+oid sha256:48b1142f018593b8cf0f9164ae5b1181f626fd4eedd5d3811db7dbf72edb7035
+size 42533

From 6e38e1d923e700ffd302dd153b9353c27711399b Mon Sep 17 00:00:00 2001
From: marius-kilocode <marius@kilocode.ai>
Date: Wed, 9 Sep 2026 09:11:58 +0200
Subject: [PATCH 5/5] fix(vscode): update subagent activity fixture

---
 .../tests/fixtures/session-provider-activity.tsx         | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/kilo-vscode/tests/fixtures/session-provider-activity.tsx b/packages/kilo-vscode/tests/fixtures/session-provider-activity.tsx
index 10d29b96f9bd..c474583f5d31 100644
--- a/packages/kilo-vscode/tests/fixtures/session-provider-activity.tsx
+++ b/packages/kilo-vscode/tests/fixtures/session-provider-activity.tsx
@@ -276,10 +276,17 @@ const check = async (id: string, expected: string) => {
   const actual = state(id)
   if (id === "root") card(expected)
   const tab = host.querySelector(`[data-tab-id="${id}"] [data-activity]`)
-  if (id === "root" || id === "background" || (inspector() && (id === "task-child" || id === "task-grand"))) {
+  if (id === "root" || id === "background") {
     assert(tab, `Missing rendered tab for ${id}`)
     assert.equal(!!tab.querySelector('[data-component="spinner"]'), expected === "busy" || expected === "retry")
   }
+  if (inspector() && (id === "task-child" || id === "task-grand")) {
+    assert(tab, `Missing rendered subagent tab for ${id}`)
+    assert.equal(
+      !!tab.querySelector('[data-component="agent-avatar"]')?.getAttribute("data-status"),
+      expected === "busy" || expected === "retry",
+    )
+  }
   if (tab && (id === "task-child" || id === "task-grand")) {
     assert.equal(tab.querySelector(".am-tab-icon")?.getAttribute("data-activity"), expected)
     assert.equal(!!tab.querySelector(".am-tab-icon")?.getAttribute("aria-label"), expected !== "idle")