UI: Identity component, LiveRunWidget, issue identifiers, and UX improvements

Add Identity component (avatar + name) used across agent/issue displays. Add
LiveRunWidget for real-time streaming of active heartbeat runs on issue detail
pages via WebSocket. Display issue identifiers (PAP-42) instead of UUID
fragments throughout Issues, Inbox, CommandPalette, and detail pages.
Enhance CommentThread with re-open checkbox, Cmd+Enter submit, sorted display,
and run linking. Improve Activity page with richer formatting and filtering.
Update Dashboard with live metrics. Add reports-to agent link in AgentProperties.
Various small fixes: StatusIcon centering, CopyText ref init, agent detail
run-issue cross-links.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/components/AgentProperties.tsx

@@ -1,5 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
 import type { Agent, AgentRuntimeState } from "@paperclip/shared";
+import { agentsApi } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
 import { StatusBadge } from "./StatusBadge";
+import { Identity } from "./Identity";
 import { formatCents, formatDate } from "../lib/utils";
 import { Separator } from "@/components/ui/separator";
 
@@ -25,6 +31,16 @@ function PropertyRow({ label, children }: { label: string; children: React.React
 }
 
 export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
+  const { selectedCompanyId } = useCompany();
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId && !!agent.reportsTo,
+  });
+
+  const reportsToAgent = agent.reportsTo ? agents?.find((a) => a.id === agent.reportsTo) : null;
+
   return (
     <div className="space-y-4">
       <div className="space-y-1">
@@ -82,7 +98,13 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
         )}
         {agent.reportsTo && (
           <PropertyRow label="Reports To">
-            <span className="text-sm font-mono">{agent.reportsTo.slice(0, 8)}</span>
+            {reportsToAgent ? (
+              <Link to={`/agents/${reportsToAgent.id}`} className="hover:underline">
+                <Identity name={reportsToAgent.name} size="sm" />
+              </Link>
+            ) : (
+              <span className="text-sm font-mono">{agent.reportsTo.slice(0, 8)}</span>
+            )}
           </PropertyRow>
         )}
         <PropertyRow label="Created">

ui/src/components/CommandPalette.tsx

@@ -28,6 +28,7 @@ import {
   SquarePen,
   Plus,
 } from "lucide-react";
+import { Identity } from "./Identity";
 
 export function CommandPalette() {
   const [open, setOpen] = useState(false);
@@ -151,14 +152,13 @@ export function CommandPalette() {
                 <CommandItem key={issue.id} onSelect={() => go(`/issues/${issue.id}`)}>
                   <CircleDot className="mr-2 h-4 w-4" />
                   <span className="text-muted-foreground mr-2 font-mono text-xs">
-                    {issue.id.slice(0, 8)}
+                    {issue.identifier ?? issue.id.slice(0, 8)}
                   </span>
                   <span className="flex-1 truncate">{issue.title}</span>
-                  {issue.assigneeAgentId && (
-                    <span className="text-xs text-muted-foreground ml-2">
-                      {agentName(issue.assigneeAgentId)}
-                    </span>
-                  )}
+                  {issue.assigneeAgentId && (() => {
+                    const name = agentName(issue.assigneeAgentId);
+                    return name ? <Identity name={name} size="sm" className="ml-2" /> : null;
+                  })()}
                 </CommandItem>
               ))}
             </CommandGroup>

ui/src/components/CommentThread.tsx

@@ -1,27 +1,48 @@
-import { useState } from "react";
-import type { IssueComment } from "@paperclip/shared";
+import { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import type { IssueComment, Agent } from "@paperclip/shared";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { Identity } from "./Identity";
 import { formatDate } from "../lib/utils";
 
-interface CommentThreadProps {
-  comments: IssueComment[];
-  onAdd: (body: string) => Promise<void>;
+interface CommentWithRunMeta extends IssueComment {
+  runId?: string | null;
+  runAgentId?: string | null;
 }
 
-export function CommentThread({ comments, onAdd }: CommentThreadProps) {
+interface CommentThreadProps {
+  comments: CommentWithRunMeta[];
+  onAdd: (body: string, reopen?: boolean) => Promise<void>;
+  issueStatus?: string;
+  agentMap?: Map<string, Agent>;
+}
+
+const CLOSED_STATUSES = new Set(["done", "cancelled"]);
+
+export function CommentThread({ comments, onAdd, issueStatus, agentMap }: CommentThreadProps) {
   const [body, setBody] = useState("");
+  const [reopen, setReopen] = useState(true);
   const [submitting, setSubmitting] = useState(false);
 
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
+  const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
+
+  // Display oldest-first
+  const sorted = useMemo(
+    () => [...comments].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
+    [comments],
+  );
+
+  async function handleSubmit(e?: React.FormEvent) {
+    e?.preventDefault();
     const trimmed = body.trim();
     if (!trimmed) return;
 
     setSubmitting(true);
     try {
-      await onAdd(trimmed);
+      await onAdd(trimmed, isClosed && reopen ? true : undefined);
       setBody("");
+      setReopen(false);
     } finally {
       setSubmitting(false);
     }
@@ -36,17 +57,32 @@ export function CommentThread({ comments, onAdd }: CommentThreadProps) {
       )}
 
       <div className="space-y-3">
-        {comments.map((comment) => (
+        {sorted.map((comment) => (
           <div key={comment.id} className="border border-border p-3">
             <div className="flex items-center justify-between mb-1">
-              <span className="text-xs font-medium text-muted-foreground">
-                {comment.authorAgentId ? "Agent" : "Human"}
-              </span>
+              <Identity
+                name={
+                  comment.authorAgentId
+                    ? agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8)
+                    : "You"
+                }
+                size="sm"
+              />
               <span className="text-xs text-muted-foreground">
                 {formatDate(comment.createdAt)}
               </span>
             </div>
             <p className="text-sm whitespace-pre-wrap">{comment.body}</p>
+            {comment.runId && comment.runAgentId && (
+              <div className="mt-2 pt-2 border-t border-border/60">
+                <Link
+                  to={`/agents/${comment.runAgentId}/runs/${comment.runId}`}
+                  className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+                >
+                  run {comment.runId.slice(0, 8)}
+                </Link>
+              </div>
+            )}
           </div>
         ))}
       </div>
@@ -56,11 +92,30 @@ export function CommentThread({ comments, onAdd }: CommentThreadProps) {
           placeholder="Leave a comment..."
           value={body}
           onChange={(e) => setBody(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
           rows={3}
         />
-        <Button type="submit" size="sm" disabled={!body.trim() || submitting}>
-          {submitting ? "Posting..." : "Comment"}
-        </Button>
+        <div className="flex items-center justify-end gap-3">
+          {isClosed && (
+            <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={reopen}
+                onChange={(e) => setReopen(e.target.checked)}
+                className="rounded border-border"
+              />
+              Re-open
+            </label>
+          )}
+          <Button type="submit" size="sm" disabled={!body.trim() || submitting}>
+            {submitting ? "Posting..." : "Comment"}
+          </Button>
+        </div>
       </form>
     </div>
   );

ui/src/components/CopyText.tsx

@@ -12,7 +12,7 @@ interface CopyTextProps {
 
 export function CopyText({ text, children, className, copiedLabel = "Copied!" }: CopyTextProps) {
   const [visible, setVisible] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const handleClick = useCallback(() => {

ui/src/components/Identity.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+type IdentitySize = "sm" | "default" | "lg";
+
+export interface IdentityProps {
+  name: string;
+  avatarUrl?: string | null;
+  initials?: string;
+  size?: IdentitySize;
+  className?: string;
+}
+
+function deriveInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+const textSize: Record<IdentitySize, string> = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-sm",
+};
+
+export function Identity({ name, avatarUrl, initials, size = "default", className }: IdentityProps) {
+  const displayInitials = initials ?? deriveInitials(name);
+
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", size === "lg" && "gap-2", className)}>
+      <Avatar size={size}>
+        {avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
+        <AvatarFallback>{displayInitials}</AvatarFallback>
+      </Avatar>
+      <span className={cn("truncate", textSize[size])}>{name}</span>
+    </span>
+  );
+}

ui/src/components/IssueProperties.tsx

@@ -7,6 +7,7 @@ import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
+import { Identity } from "./Identity";
 import { formatDate } from "../lib/utils";
 import { timeAgo } from "../lib/timeAgo";
 import { Separator } from "@/components/ui/separator";
@@ -87,9 +88,9 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
           {assignee ? (
             <Link
               to={`/agents/${assignee.id}`}
-              className="text-sm hover:underline"
+              className="hover:underline"
             >
-              {assignee.name}
+              <Identity name={assignee.name} size="sm" />
             </Link>
           ) : (
             <span className="text-sm text-muted-foreground">Unassigned</span>

ui/src/components/LiveRunWidget.tsx

@@ -0,0 +1,381 @@
+import { useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
+import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import type { LiveEvent } from "@paperclip/shared";
+import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
+import { getUIAdapter } from "../adapters";
+import type { TranscriptEntry } from "../adapters";
+import { queryKeys } from "../lib/queryKeys";
+import { cn, relativeTime } from "../lib/utils";
+import { ExternalLink } from "lucide-react";
+import { Identity } from "./Identity";
+
+interface LiveRunWidgetProps {
+  issueId: string;
+  companyId?: string | null;
+}
+
+type FeedTone = "info" | "warn" | "error" | "assistant" | "tool";
+
+interface FeedItem {
+  id: string;
+  ts: string;
+  runId: string;
+  agentId: string;
+  agentName: string;
+  text: string;
+  tone: FeedTone;
+}
+
+const MAX_FEED_ITEMS = 80;
+
+function readString(value: unknown): string | null {
+  return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+
+function summarizeEntry(entry: TranscriptEntry): { text: string; tone: FeedTone } | null {
+  if (entry.kind === "assistant") {
+    const text = entry.text.trim();
+    return text ? { text, tone: "assistant" } : null;
+  }
+  if (entry.kind === "thinking") {
+    const text = entry.text.trim();
+    return text ? { text: `[thinking] ${text}`, tone: "info" } : null;
+  }
+  if (entry.kind === "tool_call") {
+    return { text: `tool ${entry.name}`, tone: "tool" };
+  }
+  if (entry.kind === "tool_result") {
+    const base = entry.content.trim();
+    return {
+      text: entry.isError ? `tool error: ${base}` : `tool result: ${base}`,
+      tone: entry.isError ? "error" : "tool",
+    };
+  }
+  if (entry.kind === "stderr") {
+    const text = entry.text.trim();
+    return text ? { text, tone: "error" } : null;
+  }
+  if (entry.kind === "system") {
+    const text = entry.text.trim();
+    return text ? { text, tone: "warn" } : null;
+  }
+  if (entry.kind === "stdout") {
+    const text = entry.text.trim();
+    return text ? { text, tone: "info" } : null;
+  }
+  return null;
+}
+
+function createFeedItem(
+  run: LiveRunForIssue,
+  ts: string,
+  text: string,
+  tone: FeedTone,
+  nextId: number,
+): FeedItem | null {
+  const trimmed = text.trim();
+  if (!trimmed) return null;
+  return {
+    id: `${run.id}:${nextId}`,
+    ts,
+    runId: run.id,
+    agentId: run.agentId,
+    agentName: run.agentName,
+    text: trimmed.slice(0, 220),
+    tone,
+  };
+}
+
+function parseStdoutChunk(
+  run: LiveRunForIssue,
+  chunk: string,
+  ts: string,
+  pendingByRun: Map<string, string>,
+  nextIdRef: MutableRefObject<number>,
+): FeedItem[] {
+  const pendingKey = `${run.id}:stdout`;
+  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
+  const split = combined.split(/\r?\n/);
+  pendingByRun.set(pendingKey, split.pop() ?? "");
+  const adapter = getUIAdapter(run.adapterType);
+
+  const items: FeedItem[] = [];
+  for (const line of split.slice(-8)) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    const parsed = adapter.parseStdoutLine(trimmed, ts);
+    if (parsed.length === 0) {
+      const fallback = createFeedItem(run, ts, trimmed, "info", nextIdRef.current++);
+      if (fallback) items.push(fallback);
+      continue;
+    }
+    for (const entry of parsed) {
+      const summary = summarizeEntry(entry);
+      if (!summary) continue;
+      const item = createFeedItem(run, ts, summary.text, summary.tone, nextIdRef.current++);
+      if (item) items.push(item);
+    }
+  }
+
+  return items;
+}
+
+function parseStderrChunk(
+  run: LiveRunForIssue,
+  chunk: string,
+  ts: string,
+  pendingByRun: Map<string, string>,
+  nextIdRef: MutableRefObject<number>,
+): FeedItem[] {
+  const pendingKey = `${run.id}:stderr`;
+  const combined = `${pendingByRun.get(pendingKey) ?? ""}${chunk}`;
+  const split = combined.split(/\r?\n/);
+  pendingByRun.set(pendingKey, split.pop() ?? "");
+
+  const items: FeedItem[] = [];
+  for (const line of split.slice(-8)) {
+    const item = createFeedItem(run, ts, line, "error", nextIdRef.current++);
+    if (item) items.push(item);
+  }
+  return items;
+}
+
+export function LiveRunWidget({ issueId, companyId }: LiveRunWidgetProps) {
+  const [feed, setFeed] = useState<FeedItem[]>([]);
+  const seenKeysRef = useRef(new Set<string>());
+  const pendingByRunRef = useRef(new Map<string, string>());
+  const runMetaByIdRef = useRef(new Map<string, { agentId: string; agentName: string }>());
+  const nextIdRef = useRef(1);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  const { data: liveRuns } = useQuery({
+    queryKey: queryKeys.issues.liveRuns(issueId),
+    queryFn: () => heartbeatsApi.liveRunsForIssue(issueId),
+    enabled: !!companyId,
+    refetchInterval: 3000,
+  });
+
+  const runs = liveRuns ?? [];
+  const runById = useMemo(() => new Map(runs.map((run) => [run.id, run])), [runs]);
+  const activeRunIds = useMemo(() => new Set(runs.map((run) => run.id)), [runs]);
+
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (!body) return;
+    body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
+  }, [feed.length]);
+
+  useEffect(() => {
+    for (const run of runs) {
+      runMetaByIdRef.current.set(run.id, { agentId: run.agentId, agentName: run.agentName });
+    }
+  }, [runs]);
+
+  useEffect(() => {
+    const stillActive = new Set<string>();
+    for (const runId of activeRunIds) {
+      stillActive.add(`${runId}:stdout`);
+      stillActive.add(`${runId}:stderr`);
+    }
+    for (const key of pendingByRunRef.current.keys()) {
+      if (!stillActive.has(key)) {
+        pendingByRunRef.current.delete(key);
+      }
+    }
+  }, [activeRunIds]);
+
+  useEffect(() => {
+    if (!companyId || activeRunIds.size === 0) return;
+
+    let closed = false;
+    let reconnectTimer: number | null = null;
+    let socket: WebSocket | null = null;
+
+    const appendItems = (items: FeedItem[]) => {
+      if (items.length === 0) return;
+      setFeed((prev) => [...prev, ...items].slice(-MAX_FEED_ITEMS));
+    };
+
+    const scheduleReconnect = () => {
+      if (closed) return;
+      reconnectTimer = window.setTimeout(connect, 1500);
+    };
+
+    const connect = () => {
+      if (closed) return;
+      const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+      const url = `${protocol}://${window.location.host}/api/companies/${encodeURIComponent(companyId)}/events/ws`;
+      socket = new WebSocket(url);
+
+      socket.onmessage = (message) => {
+        const raw = typeof message.data === "string" ? message.data : "";
+        if (!raw) return;
+
+        let event: LiveEvent;
+        try {
+          event = JSON.parse(raw) as LiveEvent;
+        } catch {
+          return;
+        }
+
+        if (event.companyId !== companyId) return;
+        const payload = event.payload ?? {};
+        const runId = readString(payload["runId"]);
+        if (!runId || !activeRunIds.has(runId)) return;
+
+        const run = runById.get(runId);
+        if (!run) return;
+
+        if (event.type === "heartbeat.run.event") {
+          const seq = typeof payload["seq"] === "number" ? payload["seq"] : null;
+          const eventType = readString(payload["eventType"]) ?? "event";
+          const messageText = readString(payload["message"]) ?? eventType;
+          const dedupeKey = `${runId}:event:${seq ?? `${eventType}:${messageText}:${event.createdAt}`}`;
+          if (seenKeysRef.current.has(dedupeKey)) return;
+          seenKeysRef.current.add(dedupeKey);
+          if (seenKeysRef.current.size > 2000) {
+            seenKeysRef.current.clear();
+          }
+          const tone = eventType === "error" ? "error" : eventType === "lifecycle" ? "warn" : "info";
+          const item = createFeedItem(run, event.createdAt, messageText, tone, nextIdRef.current++);
+          if (item) appendItems([item]);
+          return;
+        }
+
+        if (event.type === "heartbeat.run.status") {
+          const status = readString(payload["status"]) ?? "updated";
+          const dedupeKey = `${runId}:status:${status}:${readString(payload["finishedAt"]) ?? ""}`;
+          if (seenKeysRef.current.has(dedupeKey)) return;
+          seenKeysRef.current.add(dedupeKey);
+          if (seenKeysRef.current.size > 2000) {
+            seenKeysRef.current.clear();
+          }
+          const tone = status === "failed" || status === "timed_out" ? "error" : "warn";
+          const item = createFeedItem(run, event.createdAt, `run ${status}`, tone, nextIdRef.current++);
+          if (item) appendItems([item]);
+          return;
+        }
+
+        if (event.type === "heartbeat.run.log") {
+          const chunk = readString(payload["chunk"]);
+          if (!chunk) return;
+          const stream = readString(payload["stream"]) === "stderr" ? "stderr" : "stdout";
+          if (stream === "stderr") {
+            appendItems(parseStderrChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
+            return;
+          }
+          appendItems(parseStdoutChunk(run, chunk, event.createdAt, pendingByRunRef.current, nextIdRef));
+        }
+      };
+
+      socket.onerror = () => {
+        socket?.close();
+      };
+
+      socket.onclose = () => {
+        scheduleReconnect();
+      };
+    };
+
+    connect();
+
+    return () => {
+      closed = true;
+      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
+      if (socket) {
+        socket.onmessage = null;
+        socket.onerror = null;
+        socket.onclose = null;
+        socket.close(1000, "issue_live_widget_unmount");
+      }
+    };
+  }, [activeRunIds, companyId, runById]);
+
+  if (runs.length === 0 && feed.length === 0) return null;
+
+  const recent = feed.slice(-25);
+  const headerRun =
+    runs[0] ??
+    (() => {
+      const last = recent[recent.length - 1];
+      if (!last) return null;
+      const meta = runMetaByIdRef.current.get(last.runId);
+      if (!meta) return null;
+      return {
+        id: last.runId,
+        agentId: meta.agentId,
+      };
+    })();
+
+  return (
+    <div className="rounded-lg border border-cyan-500/30 bg-background/80 overflow-hidden shadow-[0_0_12px_rgba(6,182,212,0.08)]">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
+        <div className="flex items-center gap-2">
+          {runs.length > 0 && (
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-400" />
+            </span>
+          )}
+          <span className="text-xs font-medium">
+            {runs.length > 0 ? `Live issue runs (${runs.length})` : "Recent run updates"}
+          </span>
+        </div>
+        {headerRun && (
+          <Link
+            to={`/agents/${headerRun.agentId}/runs/${headerRun.id}`}
+            className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
+          >
+            Open run
+            <ExternalLink className="h-2.5 w-2.5" />
+          </Link>
+        )}
+      </div>
+
+      <div ref={bodyRef} className="max-h-[220px] overflow-y-auto p-2 font-mono text-[11px] space-y-1">
+        {recent.length === 0 && (
+          <div className="text-xs text-muted-foreground">Waiting for run output...</div>
+        )}
+        {recent.map((item, index) => (
+          <div
+            key={item.id}
+            className={cn(
+              "grid grid-cols-[auto_1fr] gap-2 items-start",
+              index === recent.length - 1 && "animate-in fade-in slide-in-from-bottom-1 duration-300",
+            )}
+          >
+            <span className="text-[10px] text-muted-foreground">{relativeTime(item.ts)}</span>
+            <div className={cn(
+              "min-w-0",
+              item.tone === "error" && "text-red-300",
+              item.tone === "warn" && "text-amber-300",
+              item.tone === "assistant" && "text-emerald-200",
+              item.tone === "tool" && "text-cyan-300",
+              item.tone === "info" && "text-foreground/80",
+            )}>
+              <Identity name={item.agentName} size="sm" className="text-cyan-400" />
+              <span className="text-muted-foreground"> [{item.runId.slice(0, 8)}] </span>
+              <span className="break-words">{item.text}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {runs.length > 0 && (
+        <div className="border-t border-border/50 px-3 py-2 flex flex-wrap gap-2">
+          {runs.map((run) => (
+            <Link
+              key={run.id}
+              to={`/agents/${run.agentId}/runs/${run.id}`}
+              className="inline-flex items-center gap-1 text-[10px] text-cyan-300 hover:text-cyan-200"
+            >
+              <Identity name={run.agentName} size="sm" /> {run.id.slice(0, 8)}
+              <ExternalLink className="h-2.5 w-2.5" />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/components/StatusIcon.tsx

@@ -33,14 +33,14 @@ export function StatusIcon({ status, onChange, className }: StatusIconProps) {
   const circle = (
     <span
       className={cn(
-        "inline-flex items-center justify-center h-4 w-4 rounded-full border-2 shrink-0",
+        "relative inline-flex h-4 w-4 rounded-full border-2 shrink-0",
         colorClass,
         onChange && "cursor-pointer",
         className
       )}
     >
       {isDone && (
-        <span className={cn("h-2 w-2 rounded-full bg-current")} />
+        <span className="absolute inset-0 m-auto h-2 w-2 rounded-full bg-current" />
       )}
     </span>
   );