add print mode event for agent headers

Author: charleslien

backend/src/tools/handlers/tool/spawn-agent-utils.ts

@@ -328,18 +328,12 @@ export async function executeAgent({
   isOnlyChild?: boolean
   clearUserPromptMessagesAfterResponse?: boolean
 }) {
-  const width = 60
-  const fullAgentName = `${agentTemplate.displayName} (${agentTemplate.id})`
-  const dashesLength = Math.max(
-    0,
-    Math.floor((width - fullAgentName.length - 2) / 2),
-  )
-  const dashes = '-'.repeat(dashesLength)
-
-  // Send agent start notification if this is the only child
-  if (isOnlyChild) {
-    onResponseChunk(`\n\n${dashes} ${fullAgentName} ${dashes}\n\n`)
-  }
+  onResponseChunk({
+    type: 'subagent_start',
+    agentId: agentTemplate.id,
+    displayName: agentTemplate.displayName,
+    onlyChild: isOnlyChild,
+  })
 
   // Import loopAgentSteps dynamically to avoid circular dependency
   const { loopAgentSteps } = await import('../../../run-agent-step')
@@ -360,18 +354,12 @@ export async function executeAgent({
     clearUserPromptMessagesAfterResponse,
   })
 
-  // Send agent end notification if this is the only child
-  if (isOnlyChild) {
-    const endedFullAgentName = `Completed: ${fullAgentName}`
-    const dashesLength = Math.max(
-      0,
-      Math.floor((width - endedFullAgentName.length - 2) / 2),
-    )
-    const dashesForEndedAgent = '-'.repeat(dashesLength)
-    onResponseChunk(
-      `\n\n${dashesForEndedAgent} ${endedFullAgentName} ${dashesForEndedAgent}\n\n`,
-    )
-  }
+  onResponseChunk({
+    type: 'subagent_finish',
+    agentId: agentTemplate.id,
+    displayName: agentTemplate.displayName,
+    onlyChild: isOnlyChild,
+  })
 
   if (result.agentState.runId) {
     parentAgentState.childRunIds.push(result.agentState.runId)

common/src/types/print-mode.ts

@@ -51,11 +51,33 @@ export const printModeFinishSchema = z.object({
 })
 export type PrintModeFinish = z.infer<typeof printModeFinishSchema>
 
+export const printModeSubagentStartSchema = z.object({
+  type: z.literal('subagent_start'),
+  agentId: z.string(),
+  displayName: z.string(),
+  onlyChild: z.boolean(),
+})
+export type PrintModeSubagentStart = z.infer<
+  typeof printModeSubagentStartSchema
+>
+
+export const printModeSubagentFinishSchema = z.object({
+  type: z.literal('subagent_finish'),
+  agentId: z.string(),
+  displayName: z.string(),
+  onlyChild: z.boolean(),
+})
+export type PrintModeSubagentFinish = z.infer<
+  typeof printModeSubagentFinishSchema
+>
+
 export const printModeEventSchema = z.discriminatedUnion('type', [
-  printModeErrorSchema,
   printModeDownloadStatusSchema,
+  printModeErrorSchema,
   printModeFinishSchema,
   printModeStartSchema,
+  printModeSubagentFinishSchema,
+  printModeSubagentStartSchema,
   printModeTextSchema,
   printModeToolCallSchema,
   printModeToolResultSchema,

npm-app/src/client.ts

@@ -74,6 +74,7 @@ import {
   startNewChat,
 } from './project-files'
 import { logAndHandleStartup } from './startup-process-handler'
+import { printSubagentHeader } from './subagent-headers'
 import {
   clearSubagentStorage,
   getAllSubagentIds,
@@ -1018,11 +1019,8 @@ export class Client {
           DiffManager.receivedResponse()
           process.stdout.write(chunk)
         } else {
-          if (chunk.type === 'error') {
-            printModeLog(chunk)
-          } else {
-            printModeLog(chunk)
-          }
+          printModeLog(chunk)
+          printSubagentHeader(chunk)
         }
       },
       userInputId,

npm-app/src/subagent-headers.ts

@@ -0,0 +1,45 @@
+import { Spinner } from './utils/spinner'
+
+import type {
+  PrintModeEvent,
+  PrintModeSubagentFinish,
+} from '@codebuff/common/types/print-mode'
+
+export function printSubagentHeader(event: PrintModeEvent) {
+  if (event.type !== 'subagent_start' && event.type !== 'subagent_finish') {
+    return
+  }
+
+  if (!event.onlyChild) {
+    return
+  }
+
+  const width = 60
+  const fullAgentName = `${event.displayName} (${event.agentId})`
+  const dashesLength = Math.max(
+    0,
+    Math.floor((width - fullAgentName.length - 2) / 2),
+  )
+  const dashes = '-'.repeat(dashesLength)
+
+  const shouldResumeSpinner = Spinner.get().stop()
+  if (event.type === 'subagent_start') {
+    console.log(`\n\n${dashes} ${fullAgentName} ${dashes}\n`)
+  } else {
+    event satisfies PrintModeSubagentFinish
+
+    const endedFullAgentName = `Completed: ${fullAgentName}`
+    const dashesLength = Math.max(
+      0,
+      Math.floor((width - endedFullAgentName.length - 2) / 2),
+    )
+    const dashesForEndedAgent = '-'.repeat(dashesLength)
+    console.log(
+      `\n\n${dashesForEndedAgent} ${endedFullAgentName} ${dashesForEndedAgent}\n`,
+    )
+    console.log(``)
+  }
+  if (shouldResumeSpinner) {
+    return Spinner.get().start(null)
+  }
+}

npm-app/src/utils/spinner.ts

@@ -27,8 +27,15 @@ export class Spinner {
     return Spinner.instance
   }
 
-  start(text: string) {
-    this.text = text
+  /**
+   * Start the spinner with the given text.
+   *
+   * @param text The text to display in the spinner. If this is `null`, the spinner will resume with the previous text.
+   */
+  start(text: string | null): void {
+    if (text !== null) {
+      this.text = text
+    }
     if (this.loadingInterval) {
       return
     }
@@ -47,12 +54,21 @@ export class Spinner {
     }, 100)
   }
 
-  stop() {
+  isActive(): boolean {
+    return !!this.loadingInterval
+  }
+
+  /**
+   * Stop the spinner and restore the cursor.
+   *
+   * @returns `true` if the spinner was active before calling this method, `false` otherwise.
+   */
+  stop(): boolean {
     // Clear hang detection
     this.hangDetector.stop()
 
     if (!this.loadingInterval) {
-      return
+      return false
     }
 
     clearInterval(this.loadingInterval)
@@ -64,6 +80,7 @@ export class Spinner {
       setPrevious(this.previous)
     }
     this.previous = null
+    return true
   }
 
   restoreCursor() {