fix(vscode): keep background subagent cards collapsed and cap reasoning

.changeset/background-subagent-reasoning-preview.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Keep background subagent task cards collapsed and show their reasoning as a compact preview instead of expanding while the agent runs.

packages/kilo-ui/src/components/message-part.tsx

@@ -162,6 +162,9 @@ export interface MessagePartProps {
    * lets that one nested item open instead of every file in the patch. */
   forceOpenFile?: string
   reasoningAutoCollapse?: boolean
+  /** Show reasoning as a capped preview that starts open and never auto-expands
+   * while streaming. Used for background subagent transcripts. */
+  reasoningCapped?: boolean
   /** True when the stream has moved past this reasoning part. Encrypted
    * reasoning items hold every summary's `time.end` until the whole item
    * finishes, so the caller settles finished summaries from the part order. */
@@ -1081,6 +1084,7 @@ export function Part(props: MessagePartProps) {
         forceOpen={props.forceOpen}
         forceOpenFile={props.forceOpenFile}
         reasoningAutoCollapse={props.reasoningAutoCollapse}
+        reasoningCapped={props.reasoningCapped}
         settled={props.settled}
         showAssistantCopyPartID={props.showAssistantCopyPartID}
         showTurnDiffSummary={props.showTurnDiffSummary}
@@ -1884,12 +1888,15 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props: MessagePartProp
 
   // Auto-collapse mode: streaming or streamed this session -> open (capped),
   // historical -> collapsed, unless the user toggled it. Expanded mode: open
-  // unless the user explicitly collapsed this reasoning part.
-  const initial = props.reasoningAutoCollapse
-    ? !userCollapsed.has(id) && (streamed.has(id) || userOpened.has(id))
-    : !userCollapsed.has(id)
+  // unless the user explicitly collapsed this reasoning part. Background
+  // transcripts always start open in the capped preview so they stay compact.
+  const capped = () => props.reasoningAutoCollapse || props.reasoningCapped
+  const initial =
+    props.reasoningAutoCollapse && !props.reasoningCapped
+      ? !userCollapsed.has(id) && (streamed.has(id) || userOpened.has(id))
+      : !userCollapsed.has(id)
   const [open, setOpen] = createSignal(initial)
-  const [manual, setManual] = createSignal(props.reasoningAutoCollapse && userOpened.has(id))
+  const [manual, setManual] = createSignal(capped() && userOpened.has(id))
   const title = createMemo(() => {
     const value = view().title
     if (value) return value
@@ -1908,7 +1915,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props: MessagePartProp
   const track = (value: boolean) => {
     if (value) userCollapsed.delete(id)
     else rememberReasoningState(userCollapsed, id)
-    if (props.reasoningAutoCollapse) {
+    if (capped()) {
       if (value) rememberReasoningState(userOpened, id)
       else userOpened.delete(id)
       setManual(value)
@@ -1924,7 +1931,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props: MessagePartProp
   createEffect(() => {
     if (!props.forceOpen || open()) return
     userCollapsed.delete(id)
-    if (props.reasoningAutoCollapse) {
+    if (capped()) {
       rememberReasoningState(userOpened, id)
       setManual(true)
     }
@@ -2007,7 +2014,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props: MessagePartProp
       <div
         data-component="reasoning-part"
         data-streaming={!done() ? "" : undefined}
-        data-auto-collapse={props.reasoningAutoCollapse ? "" : undefined}
+        data-auto-collapse={capped() ? "" : undefined}
         data-manual={manual() ? "" : undefined}
       >
         <Show

packages/kilo-vscode/src/KiloProvider.ts

@@ -1294,6 +1294,7 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
             message.sessionID,
             message.title,
             this.getWorkspaceDirectory(message.parentSessionID),
+            message.background === true,
           )
           break
         case "saveImage":

packages/kilo-vscode/src/SubAgentViewerProvider.ts

@@ -14,17 +14,25 @@ import type { KiloConnectionService } from "./services/cli-backend"
 export class SubAgentViewerProvider implements vscode.Disposable {
   private panels = new Map<string, vscode.WebviewPanel>()
   private providers = new Map<string, KiloProvider>()
+  private backgrounds = new Map<string, boolean>()
 
   constructor(
     private readonly extensionUri: vscode.Uri,
     private readonly connectionService: KiloConnectionService,
     private readonly context: vscode.ExtensionContext,
   ) {}
 
-  openPanel(sessionID: string, title?: string, directory?: string): void {
+  openPanel(sessionID: string, title?: string, directory?: string, background?: boolean): void {
     const existing = this.panels.get(sessionID)
     if (existing) {
       if (directory) this.providers.get(sessionID)?.setSessionDirectory(sessionID, directory)
+      // A reused panel keeps its original flag. Re-post when the caller reports
+      // a different one so a transcript that first opened before the task
+      // metadata landed still gets the reasoning cap.
+      if (background !== undefined && this.backgrounds.get(sessionID) !== background) {
+        this.backgrounds.set(sessionID, background)
+        this.providers.get(sessionID)?.postMessage({ type: "viewSubAgentSession", sessionID, background })
+      }
       existing.reveal(vscode.ViewColumn.One)
       return
     }
@@ -61,7 +69,7 @@ export class SubAgentViewerProvider implements vscode.Disposable {
       if (msg.type !== "webviewReady") return
       readyDisposable.dispose()
 
-      provider.postMessage({ type: "viewSubAgentSession", sessionID })
+      provider.postMessage({ type: "viewSubAgentSession", sessionID, background })
       void provider.loadMessages(sessionID)
 
       try {
@@ -86,13 +94,15 @@ export class SubAgentViewerProvider implements vscode.Disposable {
 
     this.panels.set(sessionID, panel)
     this.providers.set(sessionID, provider)
+    this.backgrounds.set(sessionID, background === true)
 
     panel.onDidDispose(() => {
       console.log("[Kilo New] Sub-agent viewer panel disposed:", sessionID)
       closeDisposable.dispose()
       provider.dispose()
       this.panels.delete(sessionID)
       this.providers.delete(sessionID)
+      this.backgrounds.delete(sessionID)
     })
   }
 
@@ -102,5 +112,6 @@ export class SubAgentViewerProvider implements vscode.Disposable {
     }
     this.panels.clear()
     this.providers.clear()
+    this.backgrounds.clear()
   }
 }

packages/kilo-vscode/src/extension.ts

@@ -598,8 +598,8 @@ export async function activate(context: vscode.ExtensionContext) {
     ),
     vscode.commands.registerCommand(
       "kilo-code.new.openSubAgentViewer",
-      (sessionID: string, title?: string, directory?: string) => {
-        subAgentViewerProvider.openPanel(sessionID, title, directory)
+      (sessionID: string, title?: string, directory?: string, background?: boolean) => {
+        subAgentViewerProvider.openPanel(sessionID, title, directory, background)
       },
     ),
     vscode.commands.registerCommand("kilo-code.new.agentManager.previousSession", () => {

packages/kilo-vscode/tests/unit/background-agents.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "bun:test"
 import {
   backgroundAgents,
+  backgroundChildren,
   backgroundJobAgents,
   fitBackgroundAgents,
   showBackgroundAgent,
@@ -73,6 +74,33 @@ describe("fitBackgroundAgents", () => {
   })
 })
 
+describe("backgroundChildren", () => {
+  it("collects only children spawned with the background flag", () => {
+    const tools = [
+      taskPart({ id: "part_1", child: "ses_a", background: true }),
+      taskPart({ id: "part_2", child: "ses_b", background: false }),
+      taskPart({ id: "part_3", child: "ses_c" }),
+    ]
+
+    expect([...backgroundChildren(tools)]).toEqual(["ses_a"])
+  })
+
+  it("reads the flag from either the state or the part metadata", () => {
+    const tools = [
+      taskPart({ id: "part_1", child: "ses_a", background: true }),
+      taskPart({ id: "part_2", child: "ses_b", background: true, onPart: true }),
+    ]
+
+    expect([...backgroundChildren(tools)].sort()).toEqual(["ses_a", "ses_b"])
+  })
+
+  it("ignores non-task tools and parts without a child session", () => {
+    const bash = { id: "part_3", type: "tool", tool: "bash", state: { status: "running", input: {} } } as ToolPart
+
+    expect([...backgroundChildren([bash, taskPart({ id: "part_4", background: true })])]).toEqual([])
+  })
+})
+
 describe("backgroundAgents", () => {
   it("lists a running background agent from tool state metadata", () => {
     const tools = [taskPart({ child: "ses_child", background: true, description: "Audit deps", agent: "explore" })]

packages/kilo-vscode/webview-ui/agent-manager/SubagentPanel.tsx

@@ -11,7 +11,7 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button"
 import { createEffect, createMemo, on, type Accessor, type Component } from "solid-js"
 import { DataBridge } from "../src/App"
 import { ChatView } from "../src/components/chat"
-import { children } from "../src/components/chat/background-agents"
+import { children, backgroundChildren } from "../src/components/chat/background-agents"
 import { useLanguage } from "../src/context/language"
 import { SessionProvider, useSession, useSessionVisibility } from "../src/context/session"
 import { description, label, type Activity } from "../src/utils/session-activity"
@@ -32,7 +32,7 @@ interface Props {
   onClosePanel: () => void
 }
 
-const SubagentChat: Component<{ active: Accessor<string | undefined> }> = (props) => {
+const SubagentChat: Component<{ active: Accessor<string | undefined>; capped: Accessor<boolean> }> = (props) => {
   const session = useSession()
 
   createEffect(
@@ -44,12 +44,22 @@ const SubagentChat: Component<{ active: Accessor<string | undefined> }> = (props
 
   return (
     <DataBridge>
-      <ChatView readonly interactivePrompts={false} promptBoxId="agent-manager:subagent" />
+      <ChatView
+        readonly
+        interactivePrompts={false}
+        reasoningCapped={props.capped()}
+        promptBoxId="agent-manager:subagent"
+      />
     </DataBridge>
   )
 }
 
-const SubagentContent: Component<Props & { activity: (id: string) => Activity }> = (props) => {
+interface ContentProps extends Props {
+  activity: (id: string) => Activity
+  background: Accessor<ReadonlySet<string>>
+}
+
+const SubagentContent: Component<ContentProps> = (props) => {
   const session = useSession()
   const language = useLanguage()
   const ids = () => props.tabs().map((tab) => tab.id)
@@ -131,7 +141,7 @@ const SubagentContent: Component<Props & { activity: (id: string) => Activity }>
         }}
       />
       <div class="am-subagent-chat">
-        <SubagentChat active={props.active} />
+        <SubagentChat active={props.active} capped={() => props.background().has(props.active() ?? "")} />
       </div>
     </section>
   )
@@ -145,10 +155,15 @@ export const SubagentPanel: Component<Props> = (props) => {
     const id = session.currentSessionID()
     return id ? children(session.getSessionToolParts(id)) : []
   })
+  // Background subagent transcripts show reasoning as a compact capped preview.
+  const background = createMemo(() => {
+    const id = session.currentSessionID()
+    return id ? backgroundChildren(session.getSessionToolParts(id)) : new Set<string>()
+  })
   return (
     <AgentAvatarPalette ids={siblings()}>
       <SessionProvider>
-        <SubagentContent {...props} activity={session.activityFor} />
+        <SubagentContent {...props} activity={session.activityFor} background={background} />
       </SessionProvider>
     </AgentAvatarPalette>
   )

packages/kilo-vscode/webview-ui/src/App.tsx

@@ -14,6 +14,7 @@ import { ChatView } from "./components/chat"
 import { SidebarEmptyState } from "./components/chat/SidebarEmptyState"
 import { SidebarTopBar } from "./components/chat/SidebarTopBar"
 import { openSubagent } from "./components/chat/open-subagent"
+import { backgroundChildren } from "./components/chat/background-agents"
 import { registerExpandedTaskTool } from "./components/chat/TaskToolExpanded"
 import { registerVscodeToolOverrides } from "./components/chat/VscodeToolOverrides"
 import { useWorktreeMode } from "./context/worktree-mode"
@@ -132,10 +133,12 @@ export const DataBridge: Component<{ children: any }> = (props) => {
 
   const openAgent = (id: string, title?: string) => {
     const parent = session.sessions().find((item) => item.id === id)?.parentID ?? session.currentSessionID()
+    const background = parent ? backgroundChildren(session.getSessionToolParts(parent)).has(id) : false
     openSubagent({
       sessionID: id,
       title,
       parentSessionID: parent,
+      background,
       worktree: !!worktree,
       post: vscode.postMessage,
     })
@@ -243,6 +246,7 @@ const AppContent: Component = () => {
   const [currentView, setCurrentView] = createSignal<ViewType>("newTask")
   const [settingsTab, setSettingsTab] = createSignal<string | undefined>()
   const [agentManagerProjectId, setAgentManagerProjectId] = createSignal<string | undefined>()
+  const [subAgentCapped, setSubAgentCapped] = createSignal(false)
   const [migration, setMigration] = createSignal(false)
   const session = useSession()
   const tabs = useLocalTabs()
@@ -345,6 +349,7 @@ const AppContent: Component = () => {
       handleForked(message)
       if (message?.type === "viewSubAgentSession" && message.sessionID) {
         console.log("[Kilo New] App: 🔍 viewSubAgentSession:", message.sessionID)
+        setSubAgentCapped(message.background === true)
         session.setCurrentSessionID(message.sessionID)
         setCurrentView("subAgentViewer")
       }
@@ -439,7 +444,7 @@ const AppContent: Component = () => {
               />
             </Match>
             <Match when={currentView() === "subAgentViewer"}>
-              <ChatView readonly />
+              <ChatView readonly reasoningCapped={subAgentCapped()} />
             </Match>
           </Switch>
         }

packages/kilo-vscode/webview-ui/src/components/chat/AssistantMessage.tsx

@@ -117,6 +117,8 @@ interface AssistantMessageProps {
   highlight?: () => TimelineHighlight | undefined
   readonly?: boolean
   interactivePrompts?: boolean
+  /** Show reasoning as a compact capped preview (background subagent transcripts). */
+  reasoningCapped?: boolean
 }
 
 type ToolStateProps = {
@@ -364,6 +366,7 @@ export const AssistantMessage: Component<AssistantMessageProps> = (props) => {
                                       forceOpen={forceOpen()}
                                       forceOpenFile={forceOpen() ? props.forceOpenFile : undefined}
                                       reasoningAutoCollapse={display.reasoningAutoCollapse()}
+                                      reasoningCapped={props.reasoningCapped}
                                       settled={settled()}
                                       feedback={props.feedback}
                                       throughput={throughputEl()}

packages/kilo-vscode/webview-ui/src/components/chat/BackgroundAgents.tsx

@@ -196,6 +196,7 @@ export const BackgroundAgents: Component<{ readonly?: boolean }> = (props) => {
       sessionID: agent.id,
       title: agent.description,
       parentSessionID: session.currentSessionID(),
+      background: true,
       worktree: !!worktree,
       post: vscode.postMessage,
     })

packages/kilo-vscode/webview-ui/src/components/chat/ChatView.tsx

@@ -40,6 +40,8 @@ interface ChatViewProps {
   onForkMessage?: (sessionId: string, messageId: string) => void
   onForkSession?: (sessionId: string) => void
   readonly?: boolean
+  /** Show reasoning as a compact capped preview (background subagent transcripts). */
+  reasoningCapped?: boolean
   /** Whether this chat owns actionable prompt controls. Defaults to true. */
   interactivePrompts?: boolean
   /** When true, show the "Continue in Worktree" button. Defaults to true in the sidebar. */
@@ -399,6 +401,7 @@ export const ChatView: Component<ChatViewProps> = (props) => {
                 questions={standaloneQuestions}
                 suggestions={standaloneSuggestions}
                 readonly={props.readonly}
+                reasoningCapped={props.reasoningCapped}
                 interactivePrompts={ownsPrompts()}
                 emptyState={props.emptyState}
                 introduction={props.introduction}

packages/kilo-vscode/webview-ui/src/components/chat/MessageList.tsx

@@ -96,6 +96,8 @@ interface MessageListProps {
   suggestions?: () => SuggestionRequest[]
   /** When true (subagent viewer), replace the welcome screen with an initializing indicator */
   readonly?: boolean
+  /** Show reasoning as a compact capped preview (background subagent transcripts). */
+  reasoningCapped?: boolean
   /** Whether inline questions and suggestions are actionable on this surface. */
   interactivePrompts?: boolean
   queuedDisabled?: boolean
@@ -1362,6 +1364,7 @@ export const MessageList: Component<MessageListProps> = (props) => {
                         activeSearchPartFile={activeKey() === row.key ? activeMatch()?.partFile : undefined}
                         readonly={props.readonly}
                         interactivePrompts={props.interactivePrompts}
+                        reasoningCapped={props.reasoningCapped}
                       />
                     )}
                   </Virtualizer>
@@ -1382,6 +1385,7 @@ export const MessageList: Component<MessageListProps> = (props) => {
                       activeSearchPartFile={activeKey() === key ? activeMatch()?.partFile : undefined}
                       readonly={props.readonly}
                       interactivePrompts={props.interactivePrompts}
+                      reasoningCapped={props.reasoningCapped}
                     />
                   )}
                 </For>
@@ -1404,6 +1408,7 @@ export const MessageList: Component<MessageListProps> = (props) => {
                   activeSearchPartFile={activeKey() === row.key ? activeMatch()?.partFile : undefined}
                   readonly={props.readonly}
                   interactivePrompts={props.interactivePrompts}
+                  reasoningCapped={props.reasoningCapped}
                 />
               )}
             </For>