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>

.claude/skills/design-guide/references/component-index.md

@@ -139,6 +139,20 @@ Always use in a responsive grid: `grid md:grid-cols-2 xl:grid-cols-4 gap-4`.
 <FilterBar filters={filters} onRemove={handleRemove} onClear={() => setFilters([])} />
 ```
 
+### Identity
+
+**File:** `Identity.tsx`
+**Props:** `name: string`, `avatarUrl?: string`, `initials?: string`, `size?: "sm" | "default" | "lg"`
+**Usage:** Avatar + name display for users and agents. Derives initials from name automatically. Three sizes matching Avatar sizes.
+
+```tsx
+<Identity name="Agent Alpha" size="sm" />
+<Identity name="CEO Agent" />
+<Identity name="Backend Service" size="lg" avatarUrl="/img/bot.png" />
+```
+
+Use in property rows, comment headers, assignee displays, and anywhere a user/agent reference is shown.
+
 ### InlineEditor
 
 **File:** `InlineEditor.tsx`

ui/src/api/activity.ts

@@ -1,6 +1,26 @@
 import type { ActivityEvent } from "@paperclip/shared";
 import { api } from "./client";
 
+export interface RunForIssue {
+  runId: string;
+  status: string;
+  agentId: string;
+  startedAt: string | null;
+  finishedAt: string | null;
+  createdAt: string;
+  invocationSource: string;
+}
+
+export interface IssueForRun {
+  issueId: string;
+  title: string;
+  status: string;
+  priority: string;
+}
+
 export const activityApi = {
   list: (companyId: string) => api.get<ActivityEvent[]>(`/companies/${companyId}/activity`),
+  forIssue: (issueId: string) => api.get<ActivityEvent[]>(`/issues/${issueId}/activity`),
+  runsForIssue: (issueId: string) => api.get<RunForIssue[]>(`/issues/${issueId}/runs`),
+  issuesForRun: (runId: string) => api.get<IssueForRun[]>(`/heartbeat-runs/${runId}/issues`),
 };

ui/src/api/heartbeats.ts

@@ -1,6 +1,25 @@
 import type { HeartbeatRun, HeartbeatRunEvent } from "@paperclip/shared";
 import { api } from "./client";
 
+export interface ActiveRunForIssue extends HeartbeatRun {
+  agentId: string;
+  agentName: string;
+  adapterType: string;
+}
+
+export interface LiveRunForIssue {
+  id: string;
+  status: string;
+  invocationSource: string;
+  triggerDetail: string | null;
+  startedAt: string | null;
+  finishedAt: string | null;
+  createdAt: string;
+  agentId: string;
+  agentName: string;
+  adapterType: string;
+}
+
 export const heartbeatsApi = {
   list: (companyId: string, agentId?: string) => {
     const params = agentId ? `?agentId=${agentId}` : "";
@@ -15,4 +34,8 @@ export const heartbeatsApi = {
       `/heartbeat-runs/${runId}/log?offset=${encodeURIComponent(String(offset))}&limitBytes=${encodeURIComponent(String(limitBytes))}`,
     ),
   cancel: (runId: string) => api.post<void>(`/heartbeat-runs/${runId}/cancel`, {}),
+  liveRunsForIssue: (issueId: string) =>
+    api.get<LiveRunForIssue[]>(`/issues/${issueId}/live-runs`),
+  activeRunForIssue: (issueId: string) =>
+    api.get<ActiveRunForIssue | null>(`/issues/${issueId}/active-run`),
 };

ui/src/api/issues.ts

@@ -15,5 +15,6 @@ export const issuesApi = {
     }),
   release: (id: string) => api.post<Issue>(`/issues/${id}/release`, {}),
   listComments: (id: string) => api.get<IssueComment[]>(`/issues/${id}/comments`),
-  addComment: (id: string, body: string) => api.post<IssueComment>(`/issues/${id}/comments`, { body }),
+  addComment: (id: string, body: string, reopen?: boolean) =>
+    api.post<IssueComment>(`/issues/${id}/comments`, reopen === undefined ? { body } : { body, reopen }),
 };

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">
+            {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 && (
+                  {issue.assigneeAgentId && (() => {
-                    <span className="text-xs text-muted-foreground ml-2">
+                    const name = agentName(issue.assigneeAgentId);
-                      {agentName(issue.assigneeAgentId)}
+                    return name ? <Identity name={name} size="sm" className="ml-2" /> : null;
-                    </span>
+                  })()}
-                  )}
                 </CommandItem>
               ))}
             </CommandGroup>

ui/src/components/CommentThread.tsx

@@ -1,27 +1,48 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
-import type { IssueComment } from "@paperclip/shared";
+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 {
+interface CommentWithRunMeta extends IssueComment {
-  comments: IssueComment[];
+  runId?: string | null;
-  onAdd: (body: string) => Promise<void>;
+  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) {
+  const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
-    e.preventDefault();
+
+  // 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">
+              <Identity
-                {comment.authorAgentId ? "Agent" : "Human"}
+                name={
-              </span>
+                  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}
         />
+        <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>
   );

ui/src/context/LiveUpdatesProvider.tsx

@@ -41,6 +41,10 @@ function invalidateActivityQueries(
     if (entityId) {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(entityId) });
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(entityId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(entityId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(entityId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(entityId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(entityId) });
     }
     return;
   }

ui/src/lib/queryKeys.ts

@@ -14,6 +14,10 @@ export const queryKeys = {
     list: (companyId: string) => ["issues", companyId] as const,
     detail: (id: string) => ["issues", "detail", id] as const,
     comments: (issueId: string) => ["issues", "comments", issueId] as const,
+    activity: (issueId: string) => ["issues", "activity", issueId] as const,
+    runs: (issueId: string) => ["issues", "runs", issueId] as const,
+    liveRuns: (issueId: string) => ["issues", "live-runs", issueId] as const,
+    activeRun: (issueId: string) => ["issues", "active-run", issueId] as const,
   },
   projects: {
     list: (companyId: string) => ["projects", companyId] as const,
@@ -32,5 +36,6 @@ export const queryKeys = {
   costs: (companyId: string) => ["costs", companyId] as const,
   heartbeats: (companyId: string, agentId?: string) =>
     ["heartbeats", companyId, agentId] as const,
+  runIssues: (runId: string) => ["run-issues", runId] as const,
   org: (companyId: string) => ["org", companyId] as const,
 };

ui/src/pages/Activity.tsx

@@ -1,13 +1,17 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { activityApi } from "../api/activity";
+import { agentsApi } from "../api/agents";
+import { issuesApi } from "../api/issues";
+import { projectsApi } from "../api/projects";
+import { goalsApi } from "../api/goals";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { EmptyState } from "../components/EmptyState";
+import { Identity } from "../components/Identity";
 import { timeAgo } from "../lib/timeAgo";
-import { Badge } from "@/components/ui/badge";
 import {
   Select,
   SelectContent,
@@ -15,43 +19,46 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { History, Bot, User, Settings } from "lucide-react";
+import { History } from "lucide-react";
+import type { Agent } from "@paperclip/shared";
 
-function formatAction(action: string, entityType: string, entityId: string): string {
+// Maps action → verb phrase. When the entity name is available it reads as:
-  const actionMap: Record<string, string> = {
+//   "[Actor] commented on "Fix the bug""
-    "company.created": "Company created",
+// When not available, it falls back to just the verb.
-    "agent.created": `Agent created`,
+const ACTION_VERBS: Record<string, string> = {
-    "agent.updated": `Agent updated`,
+  "issue.created": "created",
-    "agent.paused": `Agent paused`,
+  "issue.updated": "updated",
-    "agent.resumed": `Agent resumed`,
+  "issue.checked_out": "checked out",
-    "agent.terminated": `Agent terminated`,
+  "issue.released": "released",
-    "agent.key_created": `API key created for agent`,
+  "issue.comment_added": "commented on",
-    "issue.created": `Issue created`,
+  "issue.commented": "commented on",
-    "issue.updated": `Issue updated`,
+  "issue.deleted": "deleted",
-    "issue.checked_out": `Issue checked out`,
+  "agent.created": "created",
-    "issue.released": `Issue released`,
+  "agent.updated": "updated",
-    "issue.commented": `Comment added to issue`,
+  "agent.paused": "paused",
-    "heartbeat.invoked": `Heartbeat invoked`,
+  "agent.resumed": "resumed",
-    "heartbeat.completed": `Heartbeat completed`,
+  "agent.terminated": "terminated",
-    "heartbeat.failed": `Heartbeat failed`,
+  "agent.key_created": "created API key for",
-    "approval.created": `Approval requested`,
+  "agent.budget_updated": "updated budget for",
-    "approval.approved": `Approval granted`,
+  "agent.runtime_session_reset": "reset session for",
-    "approval.rejected": `Approval rejected`,
+  "heartbeat.invoked": "invoked heartbeat for",
-    "project.created": `Project created`,
+  "heartbeat.cancelled": "cancelled heartbeat for",
-    "project.updated": `Project updated`,
+  "approval.created": "requested approval",
-    "goal.created": `Goal created`,
+  "approval.approved": "approved",
-    "goal.updated": `Goal updated`,
+  "approval.rejected": "rejected",
-    "cost.recorded": `Cost recorded`,
+  "project.created": "created",
+  "project.updated": "updated",
+  "project.deleted": "deleted",
+  "goal.created": "created",
+  "goal.updated": "updated",
+  "goal.deleted": "deleted",
+  "cost.reported": "reported cost for",
+  "cost.recorded": "recorded cost for",
+  "company.created": "created",
+  "company.updated": "updated",
+  "company.archived": "archived",
+  "company.budget_updated": "updated budget for",
 };
-  return actionMap[action] ?? `${action.replace(/[._]/g, " ")}`;
-}
-
-function actorIcon(entityType: string) {
-  if (entityType === "agent") return <Bot className="h-4 w-4 text-muted-foreground" />;
-  if (entityType === "company" || entityType === "approval")
-    return <User className="h-4 w-4 text-muted-foreground" />;
-  return <Settings className="h-4 w-4 text-muted-foreground" />;
-}
 
 function entityLink(entityType: string, entityId: string): string | null {
   switch (entityType) {
@@ -70,6 +77,15 @@ function entityLink(entityType: string, entityId: string): string | null {
   }
 }
 
+function actorIdentity(actorType: string, actorId: string, agentMap: Map<string, Agent>) {
+  if (actorType === "agent") {
+    const agent = agentMap.get(actorId);
+    return <Identity name={agent?.name ?? actorId.slice(0, 8)} size="sm" />;
+  }
+  if (actorType === "system") return <Identity name="System" size="sm" />;
+  return <Identity name={actorId || "You"} size="sm" />;
+}
+
 export function Activity() {
   const { selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
@@ -86,6 +102,46 @@ export function Activity() {
     enabled: !!selectedCompanyId,
   });
 
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: issues } = useQuery({
+    queryKey: queryKeys.issues.list(selectedCompanyId!),
+    queryFn: () => issuesApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: goals } = useQuery({
+    queryKey: queryKeys.goals.list(selectedCompanyId!),
+    queryFn: () => goalsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const agentMap = useMemo(() => {
+    const map = new Map<string, Agent>();
+    for (const a of agents ?? []) map.set(a.id, a);
+    return map;
+  }, [agents]);
+
+  // Unified map: "entityType:entityId" → display name
+  const entityNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const i of issues ?? []) map.set(`issue:${i.id}`, i.title);
+    for (const a of agents ?? []) map.set(`agent:${a.id}`, a.name);
+    for (const p of projects ?? []) map.set(`project:${p.id}`, p.name);
+    for (const g of goals ?? []) map.set(`goal:${g.id}`, g.title);
+    return map;
+  }, [issues, agents, projects, goals]);
+
   if (!selectedCompanyId) {
     return <EmptyState icon={History} message="Select a company to view activity." />;
   }
@@ -128,25 +184,22 @@ export function Activity() {
         <div className="border border-border divide-y divide-border">
           {filtered.map((event) => {
             const link = entityLink(event.entityType, event.entityId);
+            const verb = ACTION_VERBS[event.action] ?? event.action.replace(/[._]/g, " ");
+            const name = entityNameMap.get(`${event.entityType}:${event.entityId}`);
             return (
               <div
                 key={event.id}
-                className={`px-4 py-3 flex items-center justify-between gap-4 ${
+                className={`px-4 py-2.5 flex items-center justify-between gap-4 ${
                   link ? "cursor-pointer hover:bg-accent/50 transition-colors" : ""
                 }`}
                 onClick={link ? () => navigate(link) : undefined}
               >
-                <div className="flex items-center gap-3 min-w-0">
+                <div className="flex items-center gap-2 min-w-0">
-                  {actorIcon(event.entityType)}
+                  {actorIdentity(event.actorType, event.actorId, agentMap)}
-                  <span className="text-sm">
+                  <span className="text-sm text-muted-foreground">{verb}</span>
-                    {formatAction(event.action, event.entityType, event.entityId)}
+                  {name && (
-                  </span>
+                    <span className="text-sm truncate">{name}</span>
-                  <Badge variant="secondary" className="shrink-0 text-[10px]">
+                  )}
-                    {event.entityType}
-                  </Badge>
-                  <span className="text-xs text-muted-foreground font-mono truncate">
-                    {event.entityId.slice(0, 8)}
-                  </span>
                 </div>
                 <span className="text-xs text-muted-foreground shrink-0">
                   {timeAgo(event.createdAt)}

ui/src/pages/AgentDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate, Link, useBeforeUnload, useSearchParams } from "
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { agentsApi, type AgentKey } from "../api/agents";
 import { heartbeatsApi } from "../api/heartbeats";
+import { activityApi } from "../api/activity";
 import { issuesApi } from "../api/issues";
 import { usePanel } from "../context/PanelContext";
 import { useCompany } from "../context/CompanyContext";
@@ -248,6 +249,7 @@ export function AgentDetail() {
   );
 
   const setActiveTab = useCallback((nextTab: string) => {
+    if (configDirty && !window.confirm("You have unsaved changes. Discard them?")) return;
     const next = parseAgentDetailTab(nextTab);
     // If we're on a /runs/:runId URL and switching tabs, navigate back to base agent URL
     if (urlRunId) {
@@ -259,7 +261,7 @@ export function AgentDetail() {
     if (next === "overview") params.delete("tab");
     else params.set("tab", next);
     setSearchParams(params);
-  }, [searchParams, setSearchParams, urlRunId, agentId, navigate]);
+  }, [searchParams, setSearchParams, urlRunId, agentId, navigate, configDirty]);
 
   if (isLoading) return <p className="text-sm text-muted-foreground">Loading...</p>;
   if (error) return <p className="text-sm text-destructive">{error.message}</p>;
@@ -362,26 +364,16 @@ export function AgentDetail() {
 
       {actionError && <p className="text-sm text-destructive">{actionError}</p>}
 
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
+      {/* Floating Save/Cancel — sticky so it's always reachable when scrolled */}
-        <div className="sticky top-0 z-10 -mx-6 px-6 py-2 bg-background/90 backdrop-blur-sm flex items-center justify-between">
-          <PageTabBar
-            items={[
-              { value: "overview", label: "Overview" },
-              { value: "configuration", label: "Configuration" },
-              { value: "runs", label: `Runs${heartbeats ? ` (${heartbeats.length})` : ""}` },
-              { value: "issues", label: `Issues (${assignedIssues.length})` },
-              { value: "costs", label: "Costs" },
-              { value: "keys", label: "API Keys" },
-            ]}
-          />
       <div
         className={cn(
-              "flex items-center gap-2 transition-opacity duration-150",
+          "sticky top-6 z-10 float-right transition-opacity duration-150",
           activeTab === "configuration" && configDirty
             ? "opacity-100"
             : "opacity-0 pointer-events-none"
         )}
       >
+        <div className="flex items-center gap-2 bg-background/90 backdrop-blur-sm border border-border rounded-lg px-3 py-1.5 shadow-lg">
           <Button
             variant="ghost"
             size="sm"
@@ -400,6 +392,18 @@ export function AgentDetail() {
         </div>
       </div>
 
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <PageTabBar
+          items={[
+            { value: "overview", label: "Overview" },
+            { value: "configuration", label: "Configuration" },
+            { value: "runs", label: `Runs${heartbeats ? ` (${heartbeats.length})` : ""}` },
+            { value: "issues", label: `Issues (${assignedIssues.length})` },
+            { value: "costs", label: "Costs" },
+            { value: "keys", label: "API Keys" },
+          ]}
+        />
+
         {/* OVERVIEW TAB */}
         <TabsContent value="overview" className="space-y-6 mt-4">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -520,7 +524,7 @@ export function AgentDetail() {
               {assignedIssues.map((issue) => (
                 <EntityRow
                   key={issue.id}
-                  identifier={issue.id.slice(0, 8)}
+                  identifier={issue.identifier ?? issue.id.slice(0, 8)}
                   title={issue.title}
                   onClick={() => navigate(`/issues/${issue.id}`)}
                   trailing={<StatusBadge status={issue.status} />}
@@ -698,6 +702,7 @@ function RunsTab({ runs, companyId, agentId, selectedRunId, adapterType }: { run
 
 function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: string }) {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const metrics = runMetrics(run);
   const [sessionOpen, setSessionOpen] = useState(false);
 
@@ -708,6 +713,11 @@ function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
     },
   });
 
+  const { data: touchedIssues } = useQuery({
+    queryKey: queryKeys.runIssues(run.id),
+    queryFn: () => activityApi.issuesForRun(run.id),
+  });
+
   const timeFormat: Intl.DateTimeFormatOptions = { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false };
   const startTime = run.startedAt ? new Date(run.startedAt).toLocaleTimeString("en-US", timeFormat) : null;
   const endTime = run.finishedAt ? new Date(run.finishedAt).toLocaleTimeString("en-US", timeFormat) : null;
@@ -827,6 +837,28 @@ function RunDetail({ run, adapterType }: { run: HeartbeatRun; adapterType: strin
         )}
       </div>
 
+      {/* Issues touched by this run */}
+      {touchedIssues && touchedIssues.length > 0 && (
+        <div className="space-y-2">
+          <span className="text-xs font-medium text-muted-foreground">Issues Touched ({touchedIssues.length})</span>
+          <div className="border border-border rounded-lg divide-y divide-border">
+            {touchedIssues.map((issue) => (
+              <button
+                key={issue.issueId}
+                className="flex items-center justify-between w-full px-3 py-2 text-xs hover:bg-accent/20 transition-colors text-left"
+                onClick={() => navigate(`/issues/${issue.issueId}`)}
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <StatusBadge status={issue.status} />
+                  <span className="truncate">{issue.title}</span>
+                </div>
+                <span className="font-mono text-muted-foreground shrink-0 ml-2">{issue.issueId.slice(0, 8)}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* stderr excerpt for failed runs */}
       {run.stderrExcerpt && (
         <div className="space-y-1">

ui/src/pages/Approvals.tsx

@@ -10,7 +10,8 @@ import { cn } from "../lib/utils";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ShieldCheck, UserPlus, Lightbulb, CheckCircle2, XCircle, Clock } from "lucide-react";
-import type { Approval } from "@paperclip/shared";
+import { Identity } from "../components/Identity";
+import type { Approval, Agent } from "@paperclip/shared";
 
 type StatusFilter = "pending" | "all";
 
@@ -89,13 +90,13 @@ function CeoStrategyPayload({ payload }: { payload: Record<string, unknown> }) {
 
 function ApprovalCard({
   approval,
-  requesterName,
+  requesterAgent,
   onApprove,
   onReject,
   isPending,
 }: {
   approval: Approval;
-  requesterName: string | null;
+  requesterAgent: Agent | null;
   onApprove: () => void;
   onReject: () => void;
   isPending: boolean;
@@ -109,11 +110,11 @@ function ApprovalCard({
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2">
           <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
-          <div>
+          <div className="flex items-center gap-2">
             <span className="font-medium text-sm">{label}</span>
-            {requesterName && (
+            {requesterAgent && (
-              <span className="text-xs text-muted-foreground ml-2">
+              <span className="text-xs text-muted-foreground">
-                requested by {requesterName}
+                requested by <Identity name={requesterAgent.name} size="sm" className="inline-flex" />
               </span>
             )}
           </div>
@@ -209,11 +210,6 @@ export function Approvals() {
     },
   });
 
-  const agentName = (id: string | null) => {
-    if (!id || !agents) return null;
-    return agents.find((a) => a.id === id)?.name ?? null;
-  };
-
   const filtered = (data ?? []).filter(
     (a) => statusFilter === "all" || a.status === "pending",
   );
@@ -264,7 +260,7 @@ export function Approvals() {
             <ApprovalCard
               key={approval.id}
               approval={approval}
-              requesterName={agentName(approval.requestedByAgentId)}
+              requesterAgent={approval.requestedByAgentId ? (agents ?? []).find((a) => a.id === approval.requestedByAgentId) ?? null : null}
               onApprove={() => approveMutation.mutate(approval.id)}
               onReject={() => rejectMutation.mutate(approval.id)}
               isPending={approveMutation.isPending || rejectMutation.isPending}

ui/src/pages/Dashboard.tsx

@@ -1,10 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { dashboardApi } from "../api/dashboard";
 import { activityApi } from "../api/activity";
 import { issuesApi } from "../api/issues";
 import { agentsApi } from "../api/agents";
+import { projectsApi } from "../api/projects";
 import { useCompany } from "../context/CompanyContext";
 import { useDialog } from "../context/DialogContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
@@ -13,34 +14,51 @@ import { MetricCard } from "../components/MetricCard";
 import { EmptyState } from "../components/EmptyState";
 import { StatusIcon } from "../components/StatusIcon";
 import { PriorityIcon } from "../components/PriorityIcon";
+import { Identity } from "../components/Identity";
 import { timeAgo } from "../lib/timeAgo";
 import { formatCents } from "../lib/utils";
 import { Bot, CircleDot, DollarSign, ShieldCheck, LayoutDashboard, Clock } from "lucide-react";
-import type { Issue } from "@paperclip/shared";
+import type { Agent, Issue } from "@paperclip/shared";
 
 const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000;
 
-function formatAction(action: string): string {
+const ACTION_VERBS: Record<string, string> = {
-  const actionMap: Record<string, string> = {
+  "issue.created": "created",
-    "company.created": "Company created",
+  "issue.updated": "updated",
-    "agent.created": "Agent created",
+  "issue.checked_out": "checked out",
-    "agent.updated": "Agent updated",
+  "issue.released": "released",
-    "agent.key_created": "API key created",
+  "issue.comment_added": "commented on",
-    "issue.created": "Issue created",
+  "issue.commented": "commented on",
-    "issue.updated": "Issue updated",
+  "issue.deleted": "deleted",
-    "issue.checked_out": "Issue checked out",
+  "agent.created": "created",
-    "issue.released": "Issue released",
+  "agent.updated": "updated",
-    "issue.commented": "Comment added",
+  "agent.paused": "paused",
-    "heartbeat.invoked": "Heartbeat invoked",
+  "agent.resumed": "resumed",
-    "heartbeat.completed": "Heartbeat completed",
+  "agent.terminated": "terminated",
-    "approval.created": "Approval requested",
+  "agent.key_created": "created API key for",
-    "approval.approved": "Approval granted",
+  "heartbeat.invoked": "invoked heartbeat for",
-    "approval.rejected": "Approval rejected",
+  "heartbeat.cancelled": "cancelled heartbeat for",
-    "project.created": "Project created",
+  "approval.created": "requested approval",
-    "goal.created": "Goal created",
+  "approval.approved": "approved",
-    "cost.recorded": "Cost recorded",
+  "approval.rejected": "rejected",
+  "project.created": "created",
+  "project.updated": "updated",
+  "goal.created": "created",
+  "goal.updated": "updated",
+  "cost.reported": "reported cost for",
+  "cost.recorded": "recorded cost for",
+  "company.created": "created company",
+  "company.updated": "updated company",
 };
-  return actionMap[action] ?? action.replace(/[._]/g, " ");
+
+function entityLink(entityType: string, entityId: string): string | null {
+  switch (entityType) {
+    case "issue": return `/issues/${entityId}`;
+    case "agent": return `/agents/${entityId}`;
+    case "project": return `/projects/${entityId}`;
+    case "goal": return `/goals/${entityId}`;
+    default: return null;
+  }
 }
 
 function getStaleIssues(issues: Issue[]): Issue[] {
@@ -88,8 +106,28 @@ export function Dashboard() {
     enabled: !!selectedCompanyId,
   });
 
+  const { data: projects } = useQuery({
+    queryKey: queryKeys.projects.list(selectedCompanyId!),
+    queryFn: () => projectsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
   const staleIssues = issues ? getStaleIssues(issues) : [];
 
+  const agentMap = useMemo(() => {
+    const map = new Map<string, Agent>();
+    for (const a of agents ?? []) map.set(a.id, a);
+    return map;
+  }, [agents]);
+
+  const entityNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const i of issues ?? []) map.set(`issue:${i.id}`, i.title);
+    for (const a of agents ?? []) map.set(`agent:${a.id}`, a.name);
+    for (const p of projects ?? []) map.set(`project:${p.id}`, p.name);
+    return map;
+  }, [issues, agents, projects]);
+
   const agentName = (id: string | null) => {
     if (!id || !agents) return null;
     return agents.find((a) => a.id === id)?.name ?? null;
@@ -157,21 +195,33 @@ export function Dashboard() {
                   Recent Activity
                 </h3>
                 <div className="border border-border divide-y divide-border">
-                  {activity.slice(0, 10).map((event) => (
+                  {activity.slice(0, 10).map((event) => {
-                    <div key={event.id} className="px-4 py-2 flex items-center justify-between text-sm">
+                    const verb = ACTION_VERBS[event.action] ?? event.action.replace(/[._]/g, " ");
-                      <div className="flex items-center gap-2 min-w-0">
+                    const name = entityNameMap.get(`${event.entityType}:${event.entityId}`);
-                        <span className="font-medium truncate">
+                    const link = entityLink(event.entityType, event.entityId);
-                          {formatAction(event.action)}
+                    const actor = event.actorType === "agent" ? agentMap.get(event.actorId) : null;
-                        </span>
+                    return (
-                        <span className="text-xs text-muted-foreground font-mono shrink-0">
+                      <div
-                          {event.entityId.slice(0, 8)}
+                        key={event.id}
-                        </span>
+                        className={`px-4 py-2 flex items-center justify-between gap-2 text-sm ${
+                          link ? "cursor-pointer hover:bg-accent/50 transition-colors" : ""
+                        }`}
+                        onClick={link ? () => navigate(link) : undefined}
+                      >
+                        <div className="flex items-center gap-1.5 min-w-0">
+                          <Identity
+                            name={actor?.name ?? (event.actorType === "system" ? "System" : event.actorId || "You")}
+                            size="sm"
+                          />
+                          <span className="text-muted-foreground shrink-0">{verb}</span>
+                          {name && <span className="truncate">{name}</span>}
                         </div>
-                      <span className="text-xs text-muted-foreground shrink-0 ml-2">
+                        <span className="text-xs text-muted-foreground shrink-0">
                           {timeAgo(event.createdAt)}
                         </span>
                       </div>
-                  ))}
+                    );
+                  })}
                 </div>
               </div>
             )}
@@ -197,11 +247,12 @@ export function Dashboard() {
                       <PriorityIcon priority={issue.priority} />
                       <StatusIcon status={issue.status} />
                       <span className="truncate flex-1">{issue.title}</span>
-                      {issue.assigneeAgentId && (
+                      {issue.assigneeAgentId && (() => {
-                        <span className="text-xs text-muted-foreground shrink-0">
+                        const name = agentName(issue.assigneeAgentId);
-                          {agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
+                        return name
-                        </span>
+                          ? <Identity name={name} size="sm" className="shrink-0" />
-                      )}
+                          : <span className="text-xs text-muted-foreground font-mono shrink-0">{issue.assigneeAgentId.slice(0, 8)}</span>;
+                      })()}
                       <span className="text-xs text-muted-foreground shrink-0">
                         {timeAgo(issue.updatedAt)}
                       </span>

ui/src/pages/DesignGuide.tsx

@@ -64,6 +64,7 @@ import { MetricCard } from "@/components/MetricCard";
 import { FilterBar, type FilterValue } from "@/components/FilterBar";
 import { InlineEditor } from "@/components/InlineEditor";
 import { PageSkeleton } from "@/components/PageSkeleton";
+import { Identity } from "@/components/Identity";
 
 /* ------------------------------------------------------------------ */
 /*  Section wrapper                                                    */
@@ -624,6 +625,31 @@ export function DesignGuide() {
         </SubSection>
       </Section>
 
+      {/* ============================================================ */}
+      {/*  IDENTITY                                                     */}
+      {/* ============================================================ */}
+      <Section title="Identity">
+        <SubSection title="Sizes">
+          <div className="flex items-center gap-6">
+            <Identity name="Agent Alpha" size="sm" />
+            <Identity name="Agent Alpha" />
+            <Identity name="Agent Alpha" size="lg" />
+          </div>
+        </SubSection>
+
+        <SubSection title="Initials derivation">
+          <div className="flex flex-col gap-2">
+            <Identity name="CEO Agent" size="sm" />
+            <Identity name="Alpha" size="sm" />
+            <Identity name="Quality Assurance Lead" size="sm" />
+          </div>
+        </SubSection>
+
+        <SubSection title="Custom initials">
+          <Identity name="Backend Service" initials="BS" size="sm" />
+        </SubSection>
+      </Section>
+
       {/* ============================================================ */}
       {/*  TOOLTIPS                                                     */}
       {/* ============================================================ */}

ui/src/pages/Inbox.tsx

@@ -21,6 +21,7 @@ import {
   Clock,
   ExternalLink,
 } from "lucide-react";
+import { Identity } from "../components/Identity";
 import type { Issue } from "@paperclip/shared";
 
 const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000; // 24 hours
@@ -241,14 +242,15 @@ export function Inbox() {
                   <PriorityIcon priority={issue.priority} />
                   <StatusIcon status={issue.status} />
                   <span className="text-xs font-mono text-muted-foreground">
-                    {issue.id.slice(0, 8)}
+                    {issue.identifier ?? issue.id.slice(0, 8)}
                   </span>
                   <span className="text-sm truncate flex-1">{issue.title}</span>
-                  {issue.assigneeAgentId && (
+                  {issue.assigneeAgentId && (() => {
-                    <span className="text-xs text-muted-foreground">
+                    const name = agentName(issue.assigneeAgentId);
-                      {agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
+                    return name
-                    </span>
+                      ? <Identity name={name} size="sm" />
-                  )}
+                      : <span className="text-xs text-muted-foreground font-mono">{issue.assigneeAgentId.slice(0, 8)}</span>;
+                  })()}
                   <span className="text-xs text-muted-foreground shrink-0">
                     updated {timeAgo(issue.updatedAt)}
                   </span>

ui/src/pages/IssueDetail.tsx

@@ -1,18 +1,59 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useParams, Link } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { issuesApi } from "../api/issues";
+import { activityApi } from "../api/activity";
+import { agentsApi } from "../api/agents";
 import { useCompany } from "../context/CompanyContext";
 import { usePanel } from "../context/PanelContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
+import { relativeTime } from "../lib/utils";
 import { InlineEditor } from "../components/InlineEditor";
 import { CommentThread } from "../components/CommentThread";
 import { IssueProperties } from "../components/IssueProperties";
+import { LiveRunWidget } from "../components/LiveRunWidget";
 import { StatusIcon } from "../components/StatusIcon";
 import { PriorityIcon } from "../components/PriorityIcon";
+import { StatusBadge } from "../components/StatusBadge";
+import { Identity } from "../components/Identity";
 import { Separator } from "@/components/ui/separator";
 import { ChevronRight } from "lucide-react";
+import type { ActivityEvent } from "@paperclip/shared";
+import type { Agent } from "@paperclip/shared";
+
+const ACTION_LABELS: Record<string, string> = {
+  "issue.created": "created the issue",
+  "issue.updated": "updated the issue",
+  "issue.checked_out": "checked out the issue",
+  "issue.released": "released the issue",
+  "issue.comment_added": "added a comment",
+  "issue.deleted": "deleted the issue",
+  "agent.created": "created an agent",
+  "agent.updated": "updated the agent",
+  "agent.paused": "paused the agent",
+  "agent.resumed": "resumed the agent",
+  "agent.terminated": "terminated the agent",
+  "heartbeat.invoked": "invoked a heartbeat",
+  "heartbeat.cancelled": "cancelled a heartbeat",
+  "approval.created": "requested approval",
+  "approval.approved": "approved",
+  "approval.rejected": "rejected",
+};
+
+function formatAction(action: string): string {
+  return ACTION_LABELS[action] ?? action.replace(/[._]/g, " ");
+}
+
+function ActorIdentity({ evt, agentMap }: { evt: ActivityEvent; agentMap: Map<string, Agent> }) {
+  const id = evt.actorId;
+  if (evt.actorType === "agent") {
+    const agent = agentMap.get(id);
+    return <Identity name={agent?.name ?? id.slice(0, 8)} size="sm" />;
+  }
+  if (evt.actorType === "system") return <Identity name="System" size="sm" />;
+  return <Identity name={id || "You"} size="sm" />;
+}
 
 export function IssueDetail() {
   const { issueId } = useParams<{ issueId: string }>();
@@ -33,19 +74,74 @@ export function IssueDetail() {
     enabled: !!issueId,
   });
 
-  const updateIssue = useMutation({
+  const { data: activity } = useQuery({
-    mutationFn: (data: Record<string, unknown>) => issuesApi.update(issueId!, data),
+    queryKey: queryKeys.issues.activity(issueId!),
-    onSuccess: () => {
+    queryFn: () => activityApi.forIssue(issueId!),
+    enabled: !!issueId,
+  });
+
+  const { data: linkedRuns } = useQuery({
+    queryKey: queryKeys.issues.runs(issueId!),
+    queryFn: () => activityApi.runsForIssue(issueId!),
+    enabled: !!issueId,
+    refetchInterval: 5000,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const agentMap = useMemo(() => {
+    const map = new Map<string, Agent>();
+    for (const a of agents ?? []) map.set(a.id, a);
+    return map;
+  }, [agents]);
+
+  const commentsWithRunMeta = useMemo(() => {
+    const runMetaByCommentId = new Map<string, { runId: string; runAgentId: string | null }>();
+    const agentIdByRunId = new Map<string, string>();
+    for (const run of linkedRuns ?? []) {
+      agentIdByRunId.set(run.runId, run.agentId);
+    }
+    for (const evt of activity ?? []) {
+      if (evt.action !== "issue.comment_added" || !evt.runId) continue;
+      const details = evt.details ?? {};
+      const commentId = typeof details["commentId"] === "string" ? details["commentId"] : null;
+      if (!commentId || runMetaByCommentId.has(commentId)) continue;
+      runMetaByCommentId.set(commentId, {
+        runId: evt.runId,
+        runAgentId: evt.agentId ?? agentIdByRunId.get(evt.runId) ?? null,
+      });
+    }
+    return (comments ?? []).map((comment) => {
+      const meta = runMetaByCommentId.get(comment.id);
+      return meta ? { ...comment, ...meta } : comment;
+    });
+  }, [activity, comments, linkedRuns]);
+
+  const invalidateIssue = () => {
     queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issueId!) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.issues.activity(issueId!) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.issues.runs(issueId!) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.issues.liveRuns(issueId!) });
+    queryClient.invalidateQueries({ queryKey: queryKeys.issues.activeRun(issueId!) });
     if (selectedCompanyId) {
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.list(selectedCompanyId) });
     }
-    },
+  };
+
+  const updateIssue = useMutation({
+    mutationFn: (data: Record<string, unknown>) => issuesApi.update(issueId!, data),
+    onSuccess: invalidateIssue,
   });
 
   const addComment = useMutation({
-    mutationFn: (body: string) => issuesApi.addComment(issueId!, body),
+    mutationFn: ({ body, reopen }: { body: string; reopen?: boolean }) =>
+      issuesApi.addComment(issueId!, body, reopen),
     onSuccess: () => {
+      invalidateIssue();
       queryClient.invalidateQueries({ queryKey: queryKeys.issues.comments(issueId!) });
     },
   });
@@ -105,7 +201,7 @@ export function IssueDetail() {
             priority={issue.priority}
             onChange={(priority) => updateIssue.mutate({ priority })}
           />
-          <span className="text-xs font-mono text-muted-foreground">{issue.id.slice(0, 8)}</span>
+          <span className="text-xs font-mono text-muted-foreground">{issue.identifier ?? issue.id.slice(0, 8)}</span>
         </div>
 
         <InlineEditor
@@ -125,14 +221,62 @@ export function IssueDetail() {
         />
       </div>
 
+      <LiveRunWidget issueId={issueId!} companyId={selectedCompanyId} />
+
       <Separator />
 
       <CommentThread
-        comments={comments ?? []}
+        comments={commentsWithRunMeta}
-        onAdd={async (body) => {
+        issueStatus={issue.status}
-          await addComment.mutateAsync(body);
+        agentMap={agentMap}
+        onAdd={async (body, reopen) => {
+          await addComment.mutateAsync({ body, reopen });
         }}
       />
+
+      {/* Linked Runs */}
+      {linkedRuns && linkedRuns.length > 0 && (
+        <>
+          <Separator />
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium text-muted-foreground">Linked Runs</h3>
+            <div className="border border-border rounded-lg divide-y divide-border">
+              {linkedRuns.map((run) => (
+                <Link
+                  key={run.runId}
+                  to={`/agents/${run.agentId}/runs/${run.runId}`}
+                  className="flex items-center justify-between px-3 py-2 text-xs hover:bg-accent/20 transition-colors"
+                >
+                  <div className="flex items-center gap-2">
+                    <StatusBadge status={run.status} />
+                    <span className="font-mono text-muted-foreground">{run.runId.slice(0, 8)}</span>
+                  </div>
+                  <span className="text-muted-foreground">{relativeTime(run.createdAt)}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Activity Log */}
+      {activity && activity.length > 0 && (
+        <>
+          <Separator />
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
+            <div className="space-y-1.5">
+              {activity.slice(0, 20).map((evt) => (
+                <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <ActorIdentity evt={evt} agentMap={agentMap} />
+                  <span>{formatAction(evt.action)}</span>
+                  <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 }

ui/src/pages/Issues.tsx

@@ -17,6 +17,7 @@ import { Button } from "@/components/ui/button";
 import { Tabs } from "@/components/ui/tabs";
 import { CircleDot, Plus } from "lucide-react";
 import { formatDate } from "../lib/utils";
+import { Identity } from "../components/Identity";
 import type { Issue } from "@paperclip/shared";
 
 const statusOrder = ["in_progress", "todo", "backlog", "in_review", "blocked", "done", "cancelled"];
@@ -152,7 +153,7 @@ export function Issues() {
             {items.map((issue) => (
               <EntityRow
                 key={issue.id}
-                identifier={issue.id.slice(0, 8)}
+                identifier={issue.identifier ?? issue.id.slice(0, 8)}
                 title={issue.title}
                 onClick={() => navigate(`/issues/${issue.id}`)}
                 leading={
@@ -166,11 +167,12 @@ export function Issues() {
                 }
                 trailing={
                   <div className="flex items-center gap-3">
-                    {issue.assigneeAgentId && (
+                    {issue.assigneeAgentId && (() => {
-                      <span className="text-xs text-muted-foreground">
+                      const name = agentName(issue.assigneeAgentId);
-                        {agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
+                      return name
-                      </span>
+                        ? <Identity name={name} size="sm" />
-                    )}
+                        : <span className="text-xs text-muted-foreground font-mono">{issue.assigneeAgentId.slice(0, 8)}</span>;
+                    })()}
                     <span className="text-xs text-muted-foreground">
                       {formatDate(issue.createdAt)}
                     </span>

ui/src/pages/MyIssues.tsx

@@ -50,7 +50,7 @@ export function MyIssues() {
           {myIssues.map((issue) => (
             <EntityRow
               key={issue.id}
-              identifier={issue.id.slice(0, 8)}
+              identifier={issue.identifier ?? issue.id.slice(0, 8)}
               title={issue.title}
               onClick={() => navigate(`/issues/${issue.id}`)}
               leading={

ui/src/pages/ProjectDetail.tsx

@@ -91,7 +91,7 @@ export function ProjectDetail() {
               {projectIssues.map((issue) => (
                 <EntityRow
                   key={issue.id}
-                  identifier={issue.id.slice(0, 8)}
+                  identifier={issue.identifier ?? issue.id.slice(0, 8)}
                   title={issue.title}
                   trailing={<StatusBadge status={issue.status} />}
                 />