| ... | ... | @@ -15,6 +15,7 @@ import { Fragment } from "react"; |
| 15 | 15 | import { formatSubagentDisplayTitle } from "@t3tools/client-runtime/state/subagent-display"; |
| 16 | 16 | import { |
| 17 | 17 | ProviderDriverKind, |
| 18 | type OrchestrationV2Notification, |
| 18 | 19 | type OrchestrationV2TurnItem, |
| 19 | 20 | type ProviderInstanceId, |
| 20 | 21 | type ServerProvider, |
| ... | ... | @@ -326,6 +327,69 @@ export function SubagentAvatar({ |
| 326 | 327 | ); |
| 327 | 328 | } |
| 328 | 329 | |
| 330 | /** The status a notification reported, frozen at the time it arrived. */ |
| 331 | const NOTIFICATION_OUTCOME_STATUS: Record< |
| 332 | OrchestrationV2Notification["outcome"], |
| 333 | OrchestrationV2TurnItem["status"] | null |
| 334 | > = { |
| 335 | completed: "completed", |
| 336 | failed: "failed", |
| 337 | cancelled: "cancelled", |
| 338 | updated: null, |
| 339 | unknown: null, |
| 340 | }; |
| 341 | |
| 342 | const NOTIFICATION_OUTCOME_LABEL: Record<OrchestrationV2Notification["outcome"], string> = { |
| 343 | completed: "Finished", |
| 344 | failed: "Failed", |
| 345 | cancelled: "Stopped", |
| 346 | updated: "Updated", |
| 347 | unknown: "Finished", |
| 348 | }; |
| 349 | |
| 350 | /** A notification about one subagent, drawn as that subagent's card. Renders `fallback` when the parent has no record of it. */ |
| 351 | export function SubagentNotificationLink(props: { |
| 352 | readonly parentRef: ScopedThreadRef; |
| 353 | readonly childThreadId: ThreadId; |
| 354 | readonly outcome: OrchestrationV2Notification["outcome"]; |
| 355 | readonly createdAt: string; |
| 356 | readonly timestampFormat: TimestampFormat; |
| 357 | readonly providerStatuses: ReadonlyArray<ServerProvider>; |
| 358 | readonly onOpenThread: (threadId: ThreadId) => void; |
| 359 | readonly fallback: ReactNode; |
| 360 | }) { |
| 361 | const agent = useAtomValue( |
| 362 | environmentThreadDetails.threadAtom(props.parentRef), |
| 363 | (thread) => |
| 364 | thread?.projection.subagents.find((agent) => agent.childThreadId === props.childThreadId) ?? |
| 365 | null, |
| 366 | ); |
| 367 | if (agent === null) return props.fallback; |
| 368 | return ( |
| 369 | <SubagentTimelineLink |
| 370 | parentRef={props.parentRef} |
| 371 | subagentId={agent.id} |
| 372 | status={agent.status} |
| 373 | driver={agent.driver} |
| 374 | provider={props.providerStatuses.find( |
| 375 | (provider) => provider.instanceId === agent.providerInstanceId, |
| 376 | )} |
| 377 | title={formatSubagentDisplayTitle(agent.title ?? "Subagent")} |
| 378 | result={agent.result} |
| 379 | progress={agent.progress} |
| 380 | startedAt={agent.startedAt} |
| 381 | completedAt={agent.completedAt} |
| 382 | threadId={props.childThreadId} |
| 383 | onOpenThread={props.onOpenThread} |
| 384 | event={{ |
| 385 | status: NOTIFICATION_OUTCOME_STATUS[props.outcome], |
| 386 | label: NOTIFICATION_OUTCOME_LABEL[props.outcome], |
| 387 | timestamp: formatShortTimestamp(props.createdAt, props.timestampFormat), |
| 388 | }} |
| 389 | /> |
| 390 | ); |
| 391 | } |
| 392 | |
| 329 | 393 | function SubagentTimelineLink(props: { |
| 330 | 394 | readonly parentRef: ScopedThreadRef; |
| 331 | 395 | readonly subagentId: NodeId; |
| ... | ... | @@ -339,35 +403,46 @@ function SubagentTimelineLink(props: { |
| 339 | 403 | readonly completedAt: DateTime.Utc | null; |
| 340 | 404 | readonly threadId: ThreadId | null; |
| 341 | 405 | readonly onOpenThread: (threadId: ThreadId) => void; |
| 406 | /** Draws a past event about the subagent: its status then, and when it happened instead of elapsed time. */ |
| 407 | readonly event?: { |
| 408 | readonly status: OrchestrationV2TurnItem["status"] | null; |
| 409 | readonly label: string; |
| 410 | readonly timestamp: string; |
| 411 | }; |
| 342 | 412 | }) { |
| 343 | 413 | const agent = useAtomValue( |
| 344 | 414 | environmentThreadDetails.threadAtom(props.parentRef), |
| 345 | 415 | (thread) => thread?.projection.subagents.find((agent) => agent.id === props.subagentId) ?? null, |
| 346 | 416 | ); |
| 347 | 417 | const threadId = props.threadId; |
| 348 | | const status = agent?.status ?? props.status; |
| 349 | | const statusLabel = subagentStatusVisual(status).label; |
| 418 | const liveStatus = agent?.status ?? props.status; |
| 419 | const status = props.event ? props.event.status : liveStatus; |
| 420 | const statusLabel = props.event?.label ?? subagentStatusVisual(liveStatus).label; |
| 350 | 421 | const result = (agent?.result ?? props.result)?.trim(); |
| 351 | 422 | const progress = (agent?.progress ?? props.progress)?.trim(); |
| 352 | | const settled = SETTLED_SUBAGENT_STATUSES.has(status); |
| 423 | const settled = SETTLED_SUBAGENT_STATUSES.has(status ?? liveStatus); |
| 353 | 424 | const rawDetail = settled ? result || progress : progress || result; |
| 354 | 425 | const detail = |
| 355 | 426 | rawDetail && !GENERIC_CHILD_END.test(rawDetail) ? plainDetail(rawDetail) || null : null; |
| 356 | 427 | const failed = status === "failed"; |
| 357 | 428 | const timing = { |
| 358 | | status, |
| 429 | status: liveStatus, |
| 359 | 430 | startedAt: isoOrNull(agent?.startedAt ?? props.startedAt), |
| 360 | 431 | completedAt: isoOrNull(agent?.completedAt ?? props.completedAt), |
| 361 | 432 | }; |
| 362 | 433 | const content = ( |
| 363 | 434 | <> |
| 364 | | <SubagentAvatar driver={props.driver} provider={props.provider} status={status} /> |
| 435 | <SubagentAvatar |
| 436 | driver={props.driver} |
| 437 | provider={props.provider} |
| 438 | status={status ?? undefined} |
| 439 | /> |
| 365 | 440 | <span className="min-w-0 flex-1"> |
| 366 | 441 | <span className="flex items-baseline gap-2"> |
| 367 | 442 | <span className="min-w-0 truncate text-xs font-medium text-foreground"> |
| 368 | 443 | {props.title} |
| 369 | 444 | </span> |
| 370 | | {detail !== null && status !== "completed" ? ( |
| 445 | {detail !== null && (props.event !== undefined || status !== "completed") ? ( |
| 371 | 446 | <span |
| 372 | 447 | className={cn( |
| 373 | 448 | "shrink-0 text-3xs", |
| ... | ... | @@ -394,7 +469,7 @@ function SubagentTimelineLink(props: { |
| 394 | 469 | </span> |
| 395 | 470 | </span> |
| 396 | 471 | <span className="shrink-0 font-mono text-3xs text-muted-foreground/80"> |
| 397 | | <SubagentElapsed agent={timing} /> |
| 472 | {props.event ? props.event.timestamp : <SubagentElapsed agent={timing} />} |
| 398 | 473 | </span> |
| 399 | 474 | {threadId !== null ? ( |
| 400 | 475 | <ChevronRightIcon |
| ... | ... | @@ -437,7 +512,7 @@ function SubagentTimelineLink(props: { |
| 437 | 512 | {...props} |
| 438 | 513 | elapsed={agent ? <AgentElapsed agent={projectedSubagentsToRuntime([agent])[0]!} /> : null} |
| 439 | 514 | model={agent?.model ?? null} |
| 440 | | status={status} |
| 515 | status={liveStatus} |
| 441 | 516 | result={agent?.result ?? props.result} |
| 442 | 517 | progress={agent?.progress ?? props.progress} |
| 443 | 518 | /> |