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/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>
   );