diff --git a/ui/web/src/pages/teams/event-sections/agent-event-cards.tsx b/ui/web/src/pages/teams/event-sections/agent-event-cards.tsx
index 65acaf66..22ad603c 100644
--- a/ui/web/src/pages/teams/event-sections/agent-event-cards.tsx
+++ b/ui/web/src/pages/teams/event-sections/agent-event-cards.tsx
@@ -11,44 +11,35 @@ export function AgentEventCard({ entry, resolveAgent }: Props) {
   const p = entry.payload as EnrichedAgentEventPayload;
   const subtype = p.type;
 
-  const subtypeBadgeVariant =
+  if (subtype === "tool.call" || subtype === "tool.result") {
+    return <ToolEventCard p={p} resolveAgent={resolveAgent} />;
+  }
+
+  return <RunEventCard p={p} resolveAgent={resolveAgent} />;
+}
+
+/** run.started / run.completed / run.failed / run.retrying */
+function RunEventCard({ p, resolveAgent }: { p: EnrichedAgentEventPayload; resolveAgent: Props["resolveAgent"] }) {
+  const subtype = p.type;
+  const variant =
     subtype === "run.completed"
       ? ("success" as const)
       : subtype === "run.failed"
         ? ("destructive" as const)
-        : subtype === "run.started" || subtype === "run.retrying"
-          ? ("info" as const)
-          : ("secondary" as const);
+        : subtype === "run.retrying"
+          ? ("warning" as const)
+          : ("info" as const);
 
   return (
     <div className="space-y-1 text-sm">
       <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5">
-        <Badge variant={subtypeBadgeVariant} className="shrink-0 font-mono text-xs">
+        <Badge variant={variant} className="shrink-0 font-mono text-xs">
           {subtype}
         </Badge>
         <span className="truncate font-medium">{resolveAgent(p.agentId)}</span>
-        {p.delegationId && (
-          <span className="shrink-0 text-xs text-muted-foreground">
-            deleg: {p.delegationId.slice(0, 8)}
-          </span>
-        )}
-        {p.parentAgentId && (
-          <span className="truncate text-xs text-muted-foreground">
-            parent: {resolveAgent(p.parentAgentId)}
-          </span>
-        )}
       </div>
 
-      {(subtype === "tool.call" || subtype === "tool.result") && p.payload && (
-        <div className="flex items-center gap-1 text-xs">
-          {p.payload.name && (
-            <span className="truncate font-mono font-medium">{p.payload.name}</span>
-          )}
-          {p.payload.is_error && (
-            <Badge variant="destructive" className="shrink-0 text-xs">error</Badge>
-          )}
-        </div>
-      )}
+      <ContextRow p={p} resolveAgent={resolveAgent} />
 
       {subtype === "run.failed" && p.payload?.error && (
         <p className="break-words text-xs text-destructive line-clamp-2">{p.payload.error}</p>
@@ -56,3 +47,76 @@ export function AgentEventCard({ entry, resolveAgent }: Props) {
     </div>
   );
 }
+
+/** tool.call / tool.result */
+function ToolEventCard({ p, resolveAgent }: { p: EnrichedAgentEventPayload; resolveAgent: Props["resolveAgent"] }) {
+  const isResult = p.type === "tool.result";
+  const toolName = p.payload?.name;
+  const isError = isResult && p.payload?.is_error;
+
+  return (
+    <div className="space-y-1 text-sm">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5">
+        <Badge variant={isError ? "destructive" : "secondary"} className="shrink-0 font-mono text-xs">
+          {p.type}
+        </Badge>
+        {toolName && (
+          <span className="truncate font-mono font-medium">{toolName}</span>
+        )}
+        {isResult && (
+          <Badge variant={isError ? "destructive" : "success"} className="shrink-0 text-xs">
+            {isError ? "error" : "ok"}
+          </Badge>
+        )}
+        <span className="shrink-0 text-muted-foreground">&rarr;</span>
+        <span className="truncate">{resolveAgent(p.agentId)}</span>
+      </div>
+
+      <ContextRow p={p} resolveAgent={resolveAgent} showCallId />
+    </div>
+  );
+}
+
+/** Shared context row: channel, delegation, parent, team task, call ID */
+function ContextRow({
+  p,
+  resolveAgent,
+  showCallId,
+}: {
+  p: EnrichedAgentEventPayload;
+  resolveAgent: Props["resolveAgent"];
+  showCallId?: boolean;
+}) {
+  const hasContext = p.channel || p.delegationId || p.parentAgentId || p.teamTaskId || (showCallId && p.payload?.id);
+  if (!hasContext) return null;
+
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+      {p.channel && (
+        <Badge variant="outline" className="shrink-0 text-xs">{p.channel}</Badge>
+      )}
+      {p.delegationId && (
+        <ShortId label="deleg" id={p.delegationId} />
+      )}
+      {p.parentAgentId && (
+        <span className="truncate">
+          parent: <span className="font-medium text-foreground">{resolveAgent(p.parentAgentId)}</span>
+        </span>
+      )}
+      {p.teamTaskId && (
+        <ShortId label="task" id={p.teamTaskId} />
+      )}
+      {showCallId && p.payload?.id && (
+        <ShortId label="call" id={p.payload.id} />
+      )}
+    </div>
+  );
+}
+
+function ShortId({ label, id }: { label: string; id: string }) {
+  return (
+    <span className="shrink-0 text-xs text-muted-foreground">
+      {label}: <span className="font-mono">{id.slice(0, 8)}</span>
+    </span>
+  );
+}
diff --git a/ui/web/src/pages/teams/event-sections/delegation-event-cards.tsx b/ui/web/src/pages/teams/event-sections/delegation-event-cards.tsx
index b54e143c..d5841ee6 100644
--- a/ui/web/src/pages/teams/event-sections/delegation-event-cards.tsx
+++ b/ui/web/src/pages/teams/event-sections/delegation-event-cards.tsx
@@ -49,11 +49,19 @@ function DelegationLifecycleCard({ entry, resolveAgent }: Props) {
             {p.mode}
           </Badge>
         )}
+        {p.channel && (
+          <Badge variant="outline" className="shrink-0 text-xs">{p.channel}</Badge>
+        )}
       </div>
       {p.task && <p className="break-words text-xs text-muted-foreground line-clamp-2">{p.task}</p>}
       <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+        {p.delegation_id && (
+          <span className="shrink-0">
+            deleg: <span className="font-mono">{p.delegation_id.slice(0, 8)}</span>
+          </span>
+        )}
         {p.elapsed_ms != null && p.elapsed_ms > 0 && <span>{formatDuration(p.elapsed_ms)}</span>}
-        {p.error && <span className="break-all text-destructive">{p.error}</span>}
+        {p.error && <span className="break-words text-destructive">{p.error}</span>}
       </div>
     </div>
   );
@@ -97,11 +105,19 @@ function DelegationAccumulatedCard({ payload: p, resolveAgent }: { payload: Dele
 function DelegationAnnounceCard({ payload: p, resolveAgent }: { payload: DelegationAnnouncePayload } & ResolverProp) {
   return (
     <div className="space-y-1.5 text-sm">
-      <p className="text-muted-foreground">
-        <span className="font-medium text-foreground">{p.source_display_name || resolveAgent(p.source_agent_key)}</span>
-        {" "}announcing {p.results.length} result(s)
-        <span className="ml-1 text-xs">({formatDuration(p.total_elapsed_ms)})</span>
-      </p>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5">
+        <span className="font-medium">{p.source_display_name || resolveAgent(p.source_agent_key)}</span>
+        <span className="text-muted-foreground">announcing {p.results.length} result(s)</span>
+        <span className="text-xs text-muted-foreground">({formatDuration(p.total_elapsed_ms)})</span>
+        {p.has_media && (
+          <Badge variant="outline" className="shrink-0 text-xs">media</Badge>
+        )}
+        {p.completed_task_ids && p.completed_task_ids.length > 0 && (
+          <Badge variant="success" className="shrink-0 text-xs">
+            {p.completed_task_ids.length} task(s) auto-completed
+          </Badge>
+        )}
+      </div>
       <div className="space-y-1">
         {p.results.map((r) => (
           <div key={r.agent_key} className="min-w-0 text-xs">
diff --git a/ui/web/src/pages/teams/event-sections/message-event-card.tsx b/ui/web/src/pages/teams/event-sections/message-event-card.tsx
index f99020df..c3bdb83d 100644
--- a/ui/web/src/pages/teams/event-sections/message-event-card.tsx
+++ b/ui/web/src/pages/teams/event-sections/message-event-card.tsx
@@ -27,6 +27,11 @@ export function MessageEventCard({ entry, resolveAgent }: Props) {
       {p.preview && (
         <p className="break-words text-xs text-muted-foreground line-clamp-2">{p.preview}</p>
       )}
+      {p.task_id && (
+        <span className="text-xs text-muted-foreground">
+          task: <span className="font-mono">{p.task_id.slice(0, 8)}</span>
+        </span>
+      )}
     </div>
   );
 }
diff --git a/ui/web/src/pages/teams/event-sections/task-event-cards.tsx b/ui/web/src/pages/teams/event-sections/task-event-cards.tsx
index 4cea4adb..d685e269 100644
--- a/ui/web/src/pages/teams/event-sections/task-event-cards.tsx
+++ b/ui/web/src/pages/teams/event-sections/task-event-cards.tsx
@@ -18,8 +18,16 @@ export function TaskEventCard({ entry, resolveAgent }: Props) {
         <Badge variant={taskStatusBadgeVariant(p.status)} className="shrink-0 text-xs">
           {p.status}
         </Badge>
+        {p.channel && (
+          <Badge variant="outline" className="shrink-0 text-xs">{p.channel}</Badge>
+        )}
       </div>
       <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+        {p.task_id && (
+          <span className="shrink-0">
+            task: <span className="font-mono">{p.task_id.slice(0, 8)}</span>
+          </span>
+        )}
         {p.owner_agent_key && <span className="truncate">Owner: {owner}</span>}
         {p.reason && <span className="break-words">Reason: {p.reason}</span>}
       </div>