feat: display sub-agent names in tree view

services/dashboard/src/routes/conversation-detail.ts

@@ -16,6 +16,17 @@ import {
 } from '../utils/conversation-metrics.js'
 import type { ConversationRequest } from '../types/conversation.js'
 
+// Type definition for Task tool invocations
+interface TaskToolInvocation {
+  name?: string
+  input?: {
+    subagent_type?: string
+    prompt?: string
+    description?: string
+  }
+  linked_conversation_id?: string
+}
+
 export const conversationDetailRoutes = new Hono<{
   Variables: {
     csrfToken?: string
@@ -204,9 +215,26 @@ conversationDetailRoutes.get('/conversation/:id', async c => {
         toolResultStatus = undefined
       }
 
+      // Extract subagent_type from task_tool_invocation if available
+      // Look for the first task invocation that has a valid subagent_type
+      let displayName: string | undefined
+      if (req.task_tool_invocation && Array.isArray(req.task_tool_invocation)) {
+        const invocations = req.task_tool_invocation as TaskToolInvocation[]
+        const taskWithSubagent = invocations.find(
+          invocation =>
+            invocation?.input?.subagent_type &&
+            typeof invocation.input.subagent_type === 'string' &&
+            invocation.input.subagent_type.trim() !== ''
+        )
+        if (taskWithSubagent?.input?.subagent_type) {
+          displayName = taskWithSubagent.input.subagent_type.trim()
+        }
+      }
+
       graphNodes.push({
         id: req.request_id,
         label: `${req.model}`,
+        displayName: displayName,
         timestamp: new Date(req.timestamp),
         branchId: req.branch_id || 'main',
         parentId: parentId,

services/dashboard/src/utils/conversation-graph.ts

@@ -16,6 +16,7 @@ function escapeHtml(str: string): string {
 export interface ConversationNode {
   id: string
   label: string
+  displayName?: string // Sub-agent name or other display override
   timestamp: Date
   branchId: string
   parentId?: string
@@ -51,6 +52,7 @@ export interface LayoutNode {
   branchId: string
   timestamp: Date
   label: string
+  displayName?: string // Sub-agent name or other display override
   tokens: number
   model: string
   hasError: boolean
@@ -272,6 +274,7 @@ function calculateReversedLayout(
         branchId: node.branchId,
         timestamp: node.timestamp,
         label: node.label,
+        displayName: node.displayName,
         tokens: node.tokens,
         model: node.model,
         hasError: node.hasError,
@@ -318,6 +321,7 @@ function calculateReversedLayout(
         branchId: node.branchId,
         timestamp: node.timestamp,
         label: node.label,
+        displayName: node.displayName,
         tokens: node.tokens,
         model: node.model,
         hasError: node.hasError,
@@ -763,9 +767,16 @@ export function renderGraphSVG(layout: GraphLayout, interactive: boolean = true)
         svg += `    <text x="${x + 32}" y="${y + node.height / 2 + 3}" text-anchor="middle" class="graph-node-label" style="font-size: 12px;" title="${title}">${icon}</text>\n`
       }
 
-      // Add request ID (first 8 chars) shifted more to the left
-      const requestIdShort = node.id.substring(0, 8)
-      svg += `    <text x="${x + 42}" y="${y + node.height / 2 + 3}" text-anchor="start" class="graph-node-label" style="font-weight: 500; font-size: 11px;">${requestIdShort}</text>\n`
+      // Add display name (subagent type) or request ID (first 8 chars) shifted more to the left
+      const rawDisplayText = node.displayName || node.id.substring(0, 8)
+      // Truncate if too long and escape HTML for security
+      const displayText =
+        rawDisplayText.length > 20
+          ? escapeHtml(rawDisplayText.substring(0, 17) + '...')
+          : escapeHtml(rawDisplayText)
+      const fullText = escapeHtml(rawDisplayText) // Full text for tooltip
+
+      svg += `    <text x="${x + 42}" y="${y + node.height / 2 + 3}" text-anchor="start" class="graph-node-label" style="font-weight: 500; font-size: 11px;" title="${fullText}">${displayText}</text>\n`
 
       // Add timestamp aligned more to the right
       const time = node.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })