diff --git a/ui/src/components/ActiveAgentsPanel.test.tsx b/ui/src/components/ActiveAgentsPanel.test.tsx
index 8918ae1579..8871a05e24 100644
--- a/ui/src/components/ActiveAgentsPanel.test.tsx
+++ b/ui/src/components/ActiveAgentsPanel.test.tsx
@@ -4,7 +4,7 @@ import { act, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { ActiveAgentsPanel } from "./ActiveAgentsPanel";
+import { ActiveAgentsPanel, AgentRunCard } from "./ActiveAgentsPanel";
 
 const mockHeartbeatsApi = vi.hoisted(() => ({
   liveRunsForCompany: vi.fn(),
@@ -30,10 +30,6 @@ vi.mock("../api/issues", () => ({
   issuesApi: mockIssuesApi,
 }));
 
-vi.mock("./Identity", () => ({
-  Identity: ({ name }: { name: string }) => <span>{name}</span>,
-}));
-
 vi.mock("./RunChatSurface", () => ({
   RunChatSurface: () => <div>Run output</div>,
 }));
@@ -156,6 +152,7 @@ describe("ActiveAgentsPanel", () => {
       anchor.textContent?.includes("more active/recent"),
     );
     expect(moreLink?.getAttribute("href")).toBe("/dashboard/live");
+    expect(container.textContent).not.toContain("Run output");
 
     await act(async () => {
       root.unmount();
@@ -189,6 +186,7 @@ describe("ActiveAgentsPanel", () => {
       limit: 50,
     });
     expect(container.textContent).not.toContain("more active/recent");
+    expect(container.textContent).not.toContain("Run output");
 
     await act(async () => {
       root.unmount();
@@ -224,7 +222,8 @@ describe("ActiveAgentsPanel", () => {
       const issueLink = [...container.querySelectorAll("a")].find((anchor) =>
         anchor.textContent?.includes("Phase 4B"),
       );
-      expect(issueLink?.textContent).toBe("PAP-3562 - Phase 4B: Implement LLM Wiki distillation UI");
+      expect(issueLink?.textContent).toContain("Phase 4B: Implement LLM Wiki distillation UI");
+      expect(issueLink?.textContent).toContain("PAP-3562");
       expect(issueLink?.getAttribute("href")).toBe("/issues/PAP-3562");
     });
 
@@ -232,4 +231,65 @@ describe("ActiveAgentsPanel", () => {
       root.unmount();
     });
   });
+
+  it("keeps run outcomes distinct from the linked task status", async () => {
+    const root = createRoot(container);
+    const statuses = ["running", "queued", "succeeded", "failed", "timed_out", "cancelled", "interrupted"];
+    await act(async () => {
+      root.render(<>{statuses.map((status, index) => (
+        <AgentRunCard
+          key={status}
+          companyId="company-1"
+          run={{ ...createIssueRun(index, "issue-1"), status }}
+          issue={{ title: "Review release notes", identifier: "PAP-559", status: "in_review" }}
+        />
+      ))}</>);
+    });
+    const headers = [...container.querySelectorAll('a[aria-label$=". View run"]')];
+    expect(headers.map((header) => header.getAttribute("aria-label"))).toEqual([
+      "Agent 0 — Running. View run", "Agent 1 — Queued. View run",
+      "Agent 2 — Succeeded. View run", "Agent 3 — Failed. View run",
+      "Agent 4 — Timed out. View run", "Agent 5 — Cancelled. View run",
+      "Agent 6 — Interrupted. View run",
+    ]);
+    expect(headers.every((header) => header.querySelector("svg") === null)).toBe(true);
+    expect(container.querySelector(".status-chip")).toBeNull();
+    expect(container.querySelectorAll('[aria-label="Task in review"]')).toHaveLength(7);
+    expect(container.querySelectorAll(".motion-safe\\:animate-spin")).toHaveLength(0);
+    expect(container.querySelector('a[aria-label="Agent 0 — Running. View run"]')?.getAttribute("href"))
+      .toBe("/agents/agent-0/runs/run-0");
+    await act(async () => root.unmount());
+  });
+
+  it("keeps a failed task lookup navigable and shows a clear error", async () => {
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(<AgentRunCard companyId="company-1" run={createIssueRun(1, "issue-missing")} issueLoadFailed />);
+    });
+    expect(container.textContent).toContain("Task unavailable");
+    expect(container.querySelector('a[href="/issues/issue-missing"]')).not.toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("does not animate running records while execution is reconnecting", async () => {
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(<AgentRunCard
+        companyId="company-1"
+        run={{
+          ...createRun(0),
+          execution: {
+            phase: "reconnecting", label: "Reconnecting", cause: null,
+            lastConfirmedActivityAt: null, retryAt: null, attempt: 1, maxAttempts: 3,
+            recoveryOwner: "agent", nextAction: null, permittedActions: ["inspect_run"],
+            predecessorRunId: null, successorRunId: null,
+          },
+        }}
+      />);
+    });
+    expect(container.querySelector('a[aria-label="Agent 0 — Running. View run"]')).not.toBeNull();
+    expect(container.querySelector(".status-chip")).toBeNull();
+    expect(container.querySelectorAll(".motion-safe\\:animate-spin")).toHaveLength(0);
+    await act(async () => root.unmount());
+  });
 });
diff --git a/ui/src/components/ActiveAgentsPanel.tsx b/ui/src/components/ActiveAgentsPanel.tsx
index b68d80f49a..25bbb97b18 100644
--- a/ui/src/components/ActiveAgentsPanel.tsx
+++ b/ui/src/components/ActiveAgentsPanel.tsx
@@ -1,45 +1,18 @@
 import { memo, useMemo } from "react";
 import { Link } from "@/lib/router";
 import { useQueries, useQuery } from "@tanstack/react-query";
-import { requiresExecutionReconciliation, type Issue, type IssueRecoveryAction } from "@paperclipai/shared";
+import type { Issue } from "@paperclipai/shared";
 import { heartbeatsApi, type LiveRunForIssue } from "../api/heartbeats";
 import type { TranscriptEntry } from "../adapters";
 import { issuesApi } from "../api/issues";
 import { queryKeys } from "../lib/queryKeys";
 import { cn, relativeTime } from "../lib/utils";
-import {
-  deriveActiveRecoveryDisplayState,
-  RECOVERY_CHIP_DEFAULT_TONE,
-} from "../lib/recovery-display";
-import { ExternalLink } from "lucide-react";
+import { Clock3 } from "lucide-react";
 import { Identity } from "./Identity";
+import { StatusGlyph } from "./StatusGlyph";
 import { RunChatSurface } from "./RunChatSurface";
 import { useLiveRunTranscripts } from "./transcript/useLiveRunTranscripts";
 import { usePublishSharedQueryData, useSharedPollingQuery } from "../hooks/useSharedPolling";
-import { Badge } from "@/components/ui/badge";
-
-function RunCardRecoveryChip({ action }: { action: IssueRecoveryAction }) {
-  const state = deriveActiveRecoveryDisplayState(action);
-  if (!state || requiresExecutionReconciliation(action.cause)) return null;
-  const tone = RECOVERY_CHIP_DEFAULT_TONE[state];
-  const Icon = tone.icon;
-  return (
-    <Badge variant="outline"
-      data-testid="active-agent-run-recovery-indicator"
-      data-recovery-state={state}
-      role="status"
-      aria-label={tone.label}
-      title={`${tone.label} — open the source task to act.`}
-      className={cn(
-        "gap-0.5 px-1.5 text-(length:--text-nano)",
-        tone.className,
-      )}
-    >
-      <Icon className="h-2.5 w-2.5" aria-hidden />
-      {tone.label}
-    </Badge>
-  );
-}
 
 const MIN_DASHBOARD_RUNS = 4;
 const DASHBOARD_RUN_CARD_LIMIT = 4;
@@ -47,10 +20,17 @@ const DASHBOARD_LOG_POLL_INTERVAL_MS = 15_000;
 const DASHBOARD_LOG_READ_LIMIT_BYTES = 64_000;
 const DASHBOARD_MAX_CHUNKS_PER_RUN = 40;
 const EMPTY_TRANSCRIPT: TranscriptEntry[] = [];
+const EMPTY_RUNS: LiveRunForIssue[] = [];
 
-function isRunActive(run: LiveRunForIssue): boolean {
-  return run.status === "queued" || run.status === "running";
-}
+const runStatusLabels: Record<string, string> = {
+  running: "Running",
+  queued: "Queued",
+  succeeded: "Succeeded",
+  failed: "Failed",
+  timed_out: "Timed out",
+  cancelled: "Cancelled",
+  interrupted: "Interrupted",
+};
 
 interface ActiveAgentsPanelProps {
   companyId: string;
@@ -63,6 +43,7 @@ interface ActiveAgentsPanelProps {
   emptyMessage?: string;
   queryScope?: string;
   showMoreLink?: boolean;
+  showTranscripts?: boolean;
 }
 
 export function ActiveAgentsPanel({
@@ -76,6 +57,7 @@ export function ActiveAgentsPanel({
   emptyMessage = "No recent agent runs.",
   queryScope = "dashboard",
   showMoreLink = true,
+  showTranscripts = false,
 }: ActiveAgentsPanelProps) {
   const liveRunsQueryKey = [...queryKeys.liveRuns(companyId), queryScope, { minRunCount, fetchLimit }] as const;
   const sharedLiveRuns = useSharedPollingQuery({
@@ -119,7 +101,7 @@ export function ActiveAgentsPanel({
   }, [issueQueries]);
 
   const { transcriptByRun, hasOutputForRun } = useLiveRunTranscripts({
-    runs: visibleRuns,
+    runs: showTranscripts ? visibleRuns : EMPTY_RUNS,
     companyId,
     maxChunksPerRun: DASHBOARD_MAX_CHUNKS_PER_RUN,
     logPollIntervalMs: DASHBOARD_LOG_POLL_INTERVAL_MS,
@@ -137,7 +119,7 @@ export function ActiveAgentsPanel({
           <p className="text-sm text-muted-foreground">{emptyMessage}</p>
         </div>
       ) : (
-        <div className={cn("grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-4", gridClassName)}>
+        <div className={cn("grid grid-cols-1 items-start gap-2 sm:grid-cols-2 sm:gap-4 xl:grid-cols-4", gridClassName)}>
           {visibleRuns.map((run) => (
             <AgentRunCard
               key={run.id}
@@ -146,16 +128,19 @@ export function ActiveAgentsPanel({
               issue={run.issueId ? issueById.get(run.issueId) : undefined}
               transcript={transcriptByRun.get(run.id) ?? EMPTY_TRANSCRIPT}
               hasOutput={hasOutputForRun(run.id)}
-              isActive={isRunActive(run)}
+              showTranscript={showTranscripts}
+              issueLoadFailed={issueQueries.some((query, index) => visibleIssueIds[index] === run.issueId && query.isError)}
               className={cardClassName}
             />
           ))}
         </div>
       )}
-      {showMoreLink && hiddenRunCount > 0 && (
+      {showMoreLink && runs.length > 0 && (
         <div className="mt-3 flex justify-end text-xs text-muted-foreground">
           <Link to="/dashboard/live" className="hover:text-foreground hover:underline">
-            {hiddenRunCount} more active/recent run{hiddenRunCount === 1 ? "" : "s"}
+            {hiddenRunCount > 0
+              ? `${hiddenRunCount} more active/recent run${hiddenRunCount === 1 ? "" : "s"}`
+              : "View all runs"}
           </Link>
         </div>
       )}
@@ -163,88 +148,94 @@ export function ActiveAgentsPanel({
   );
 }
 
-const AgentRunCard = memo(function AgentRunCard({
+export const AgentRunCard = memo(function AgentRunCard({
   companyId,
   run,
   issue,
-  transcript,
-  hasOutput,
-  isActive,
+  transcript = EMPTY_TRANSCRIPT,
+  hasOutput = false,
+  showTranscript = false,
+  issueLoadFailed = false,
   className,
 }: {
   companyId: string;
   run: LiveRunForIssue;
-  issue?: Issue;
-  transcript: TranscriptEntry[];
-  hasOutput: boolean;
-  isActive: boolean;
+  issue?: Pick<Issue, "identifier" | "title" | "status">;
+  transcript?: TranscriptEntry[];
+  hasOutput?: boolean;
+  showTranscript?: boolean;
+  issueLoadFailed?: boolean;
   className?: string;
 }) {
+  const statusLabel = runStatusLabels[run.status] ?? run.status.replace(/[_-]/g, " ");
+  const runUrl = `/agents/${run.agentId}/runs/${run.id}`;
+  const timestamp = run.finishedAt
+    ? `Finished ${relativeTime(run.finishedAt)}`
+    : run.startedAt ? `Started ${relativeTime(run.startedAt)}` : `Queued ${relativeTime(run.createdAt)}`;
+  const taskTitle = issue?.title ?? (issueLoadFailed ? "Task unavailable" : "Loading task…");
+
   return (
     <div className={cn(
-      "flex h-(--sz-320px) flex-col overflow-hidden rounded-xl border shadow-sm",
-      isActive
-        ? "border-blue-500/25 bg-blue-500/[0.04] shadow-(--shadow-extract-1)"
+      "dashboard-agent-card flex min-w-0 flex-col overflow-hidden rounded-xl border",
+      showTranscript && "h-(--sz-320px)",
+      run.status === "running"
+        ? "border-(--dashboard-run-border) bg-(--dashboard-run-background) shadow-(--shadow-extract-1)"
         : "border-border bg-background/70",
       className,
-    )}>
-      <div className="border-b border-border/60 px-3 py-3">
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              {isActive && (!run.execution || run.execution.phase === "working") ? (
-                <span className="relative flex h-2.5 w-2.5 shrink-0">
-                  <span className="absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full bg-blue-400 opacity-70" />
-                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-500" />
-                </span>
-              ) : (
-                <span className="inline-flex h-2.5 w-2.5 rounded-full bg-muted-foreground/35" />
-              )}
-              <Identity name={run.agentName} size="sm" className="[&>span:last-child]:!text-(length:--text-micro)" />
-            </div>
-            <div className="mt-2 flex items-center gap-2 text-(length:--text-micro) text-muted-foreground">
-              <span>{isActive ? "Working" : run.finishedAt ? `Finished ${relativeTime(run.finishedAt)}` : `Started ${relativeTime(run.createdAt)}`}</span>
-            </div>
-          </div>
+    )} data-run-status={run.status}>
+      <div className={cn("flex shrink-0 flex-col gap-3 p-3", showTranscript && "border-b border-border/60")}>
+        <Link
+          to={runUrl}
+          title={`${run.agentName} — ${statusLabel} · ${timestamp}`}
+          aria-label={`${run.agentName} — ${statusLabel}. View run`}
+          className="flex min-w-0 items-center gap-2 rounded-md text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Identity name={run.agentName} className="gap-2 font-medium" />
+        </Link>
 
+        {run.issueId ? (
           <Link
-            to={`/agents/${run.agentId}/runs/${run.id}`}
-            className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-(length:--text-nano) text-muted-foreground transition-colors hover:text-foreground"
+            to={`/issues/${issue?.identifier ?? run.issueId}`}
+            className="min-w-0 rounded-lg border border-border/60 bg-background/60 px-2.5 py-2 text-sm text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            title={issue ? `${issue.title} · ${issue.identifier}` : taskTitle}
           >
-            <ExternalLink className="h-2.5 w-2.5" />
+            <span className="flex min-w-0 items-baseline gap-2">
+              <span className="flex min-w-0 flex-1 items-baseline gap-1.5">
+                <StatusGlyph
+                  status={issue?.status ?? "backlog"}
+                  size="md"
+                  className="self-center"
+                  title={issue ? `Task ${issue.status.replace(/_/g, " ")}` : undefined}
+                />
+                <span className="truncate">{taskTitle}</span>
+              </span>
+              <span className="shrink-0 font-mono text-(length:--text-micro) text-muted-foreground">{issue?.identifier ?? run.issueId.slice(0, 8)}</span>
+            </span>
+          </Link>
+        ) : (
+          <Link to={runUrl} className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background/60 px-2.5 py-2 text-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <Clock3 className="size-4 shrink-0" aria-hidden />
+            <span className="truncate">{run.invocationSource === "timer" ? "Scheduled heartbeat" : "No linked task"}</span>
           </Link>
-        </div>
-
-        {run.issueId && (
-          <div className="mt-3 rounded-lg border border-border/60 bg-background/60 px-2.5 py-2 text-xs">
-            <Link
-              to={`/issues/${issue?.identifier ?? run.issueId}`}
-              className={cn(
-                "line-clamp-2 hover:underline",
-                isActive ? "text-blue-700 dark:text-blue-300" : "text-muted-foreground hover:text-foreground",
-              )}
-              title={issue?.title ? `${issue?.identifier ?? run.issueId.slice(0, 8)} - ${issue.title}` : issue?.identifier ?? run.issueId.slice(0, 8)}
-            >
-              {issue?.identifier ?? run.issueId.slice(0, 8)}
-              {issue?.title ? ` - ${issue.title}` : ""}
-            </Link>
-            {issue?.activeRecoveryAction ? (
-              <div className="mt-1.5">
-                <RunCardRecoveryChip action={issue.activeRecoveryAction} />
-              </div>
-            ) : null}
-          </div>
         )}
+        <time
+          dateTime={run.finishedAt ?? run.startedAt ?? run.createdAt}
+          className="text-right font-sans text-xs text-muted-foreground/70"
+        >
+          {timestamp}
+        </time>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto p-3">
-        <RunChatSurface
-          run={run}
-          transcript={transcript}
-          hasOutput={hasOutput}
-          companyId={companyId}
-        />
-      </div>
+      {showTranscript && (
+        <div className="min-h-0 flex-1 overflow-y-auto p-3">
+          <RunChatSurface
+            run={run}
+            transcript={transcript}
+            hasOutput={hasOutput}
+            companyId={companyId}
+          />
+        </div>
+      )}
     </div>
   );
 });
diff --git a/ui/src/components/ActivityCharts.tsx b/ui/src/components/ActivityCharts.tsx
index cc72236270..104e94cbea 100644
--- a/ui/src/components/ActivityCharts.tsx
+++ b/ui/src/components/ActivityCharts.tsx
@@ -20,9 +20,9 @@ function emptyRunDay(date: string): DashboardRunActivityDay {
 }
 
 const runSegmentColors = {
-  succeeded: "var(--hex-10b981)",
+  succeeded: "var(--status-task-icon-done)",
   recovered: "var(--status-task-todo)",
-  failed: "var(--hex-ef4444)",
+  failed: "var(--status-task-icon-blocked)",
   other: "var(--hex-737373)",
 } as const;
 
@@ -166,7 +166,7 @@ export function RunActivityChart(props: RunChartProps) {
 }
 
 const priorityColors: Record<string, string> = {
-  critical: "var(--hex-ef4444)",
+  critical: "var(--status-task-icon-blocked)",
   high: "var(--hex-f97316)",
   medium: "var(--hex-eab308)",
   low: "var(--hex-6b7280)",
@@ -223,14 +223,15 @@ export function PriorityChart({ issues }: { issues: { priority: string; createdA
 // status vocabulary; badge, row, chart, and log agree). Previously an
 // independent palette (todo blue, in_progress violet, etc.). `backlog`
 // deliberately keeps --project-none (pre-B5, per user ruling); the
-// priority series and success-rate tints below are not status hues and
-// are left alone.
+// non-red priority series and warning success-rate tints retain their own hues.
+// Progress, done, and blocked use the icon hues so bars and legends match
+// the task icons in each theme.
 const statusColors: Record<string, string> = {
   todo: "var(--status-task-todo)",
-  in_progress: "var(--status-task-in_progress)",
+  in_progress: "var(--status-task-icon-in_progress)",
   in_review: "var(--status-task-in_review)",
-  done: "var(--status-task-done)",
-  blocked: "var(--status-task-blocked)",
+  done: "var(--status-task-icon-done)",
+  blocked: "var(--status-task-icon-blocked)",
   cancelled: "var(--status-task-cancelled)",
   backlog: "var(--project-none)",
 };
@@ -309,7 +310,7 @@ export function SuccessRateChart(props: RunChartProps) {
           // rather than dragging it down as failures.
           const effectiveSucceeded = entry.succeeded + entry.recovered;
           const rate = entry.total > 0 ? effectiveSucceeded / entry.total : 0;
-          const color = entry.total === 0 ? undefined : rate >= 0.8 ? "var(--hex-10b981)" : rate >= 0.5 ? "var(--hex-eab308)" : "var(--hex-ef4444)";
+          const color = entry.total === 0 ? undefined : rate >= 0.8 ? "var(--status-task-icon-done)" : rate >= 0.5 ? "var(--hex-eab308)" : "var(--status-task-icon-blocked)";
           return (
             <div key={day} className="flex-1 h-full flex flex-col justify-end" title={`${day}: ${entry.total > 0 ? Math.round(rate * 100) : 0}% (${effectiveSucceeded}/${entry.total})`}>
               {entry.total > 0 ? (
diff --git a/ui/src/components/ActivityRow.tsx b/ui/src/components/ActivityRow.tsx
index 13d335e854..f2ca58a21c 100644
--- a/ui/src/components/ActivityRow.tsx
+++ b/ui/src/components/ActivityRow.tsx
@@ -53,27 +53,44 @@ export function ActivityRow({ event, agentMap, userProfileMap, entityNameMap, en
 
   const inner = (
     <div className="space-y-2">
-      <div className="flex items-center gap-3">
-        <div className="flex min-w-0 flex-1 items-center gap-2">
-          <Avatar size="xs">
-            {actorAvatarUrl && <AvatarImage src={actorAvatarUrl} alt={actorName} />}
-            <AvatarFallback>{deriveInitials(actorName)}</AvatarFallback>
-          </Avatar>
-          <p className="min-w-0 flex-1 truncate">
-            <span>{actorName}</span>
-            <span className="text-muted-foreground"> {verb} </span>
-            {name && <span className="font-medium">{name}</span>}
-            {entityTitle && <span className="text-muted-foreground"> — {entityTitle}</span>}
-          </p>
+      <div className="flex items-start gap-2 @xl:grid @xl:grid-cols-(--dashboard-activity-list-columns) @xl:items-baseline">
+        <Avatar size="sm" aria-hidden="true" className="@xl:self-center">
+          {actorAvatarUrl && <AvatarImage src={actorAvatarUrl} alt="" />}
+          <AvatarFallback>{deriveInitials(actorName)}</AvatarFallback>
+        </Avatar>
+        <div className="flex min-w-0 flex-1 flex-col gap-1 @xl:contents">
+          <div className="flex min-w-0 items-baseline gap-2 @xl:contents">
+            <p className="flex h-6 min-w-0 flex-1 items-center gap-1.5">
+              <span className="max-w-1/2 shrink-0 truncate" title={`${actorName} ${verb}`}>
+                <span>{actorName}</span>{" "}
+                <span className="text-muted-foreground">{verb}</span>
+              </span>
+              {event.entityType === "issue" ? (
+                <span className="min-w-0 flex-1 truncate" title={entityTitle}>{entityTitle}</span>
+              ) : (
+                <span className="min-w-0 flex-1 truncate">
+                  {name && <span className="font-medium">{name}</span>}
+                  {entityTitle && <span className="text-muted-foreground"> — {entityTitle}</span>}
+                </span>
+              )}
+            </p>
+            <span className="ml-auto shrink-0 truncate text-right font-mono text-(length:--text-micro) text-muted-foreground @xl:w-(--dashboard-list-id-width)">
+              {event.entityType === "issue" ? name : null}
+            </span>
+          </div>
+          <div className="flex min-h-6 min-w-0 items-center @xl:contents">
+            <span className="ml-auto w-(--dashboard-list-time-width) shrink-0 whitespace-nowrap text-right text-xs text-muted-foreground">
+              {timeAgo(event.createdAt)}
+            </span>
+          </div>
         </div>
-        <span className="text-xs text-muted-foreground shrink-0">{timeAgo(event.createdAt)}</span>
       </div>
       <IssueReferenceActivitySummary event={event} />
     </div>
   );
 
   const classes = cn(
-    "px-4 py-2 text-sm",
+    "dashboard-list-row text-sm",
     link && "cursor-pointer hover:bg-accent/50 transition-colors",
     className,
   );
diff --git a/ui/src/components/BreadcrumbBar.tsx b/ui/src/components/BreadcrumbBar.tsx
index e51f942b65..b123da3ea7 100644
--- a/ui/src/components/BreadcrumbBar.tsx
+++ b/ui/src/components/BreadcrumbBar.tsx
@@ -24,7 +24,7 @@ type GlobalToolbarContext = { companyId: string | null; companyPrefix: string |
 function CrumbIdentifier({ identifier }: { identifier?: string }) {
   if (!identifier) return null;
   return (
-    <span data-slot="task-title-identifier" className="shrink-0 font-mono text-muted-foreground">
+    <span data-slot="task-title-identifier" className="shrink-0 font-mono text-(length:--text-micro) text-muted-foreground">
       {identifier}
     </span>
   );
@@ -113,9 +113,9 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?:
     return (
       <div className="h-(--sz-60px) shrink-0 flex items-center border-b border-border px-4">
         {menuButton}
-        <h1 className="flex min-w-0 flex-1 items-center gap-1.5 text-sm">
+        <h1 className="flex min-w-0 flex-1 items-baseline gap-1.5 text-sm">
           {currentCrumb.leading ? (
-            <span className="flex shrink-0 items-center">{currentCrumb.leading}</span>
+            <span className="flex shrink-0 items-center self-center">{currentCrumb.leading}</span>
           ) : null}
           <span className="min-w-0 truncate" title={currentCrumb.label}>{currentCrumb.label}</span>
           <CrumbIdentifier identifier={currentCrumb.identifier} />
@@ -137,9 +137,9 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?:
                 <BreadcrumbItem className={isLast ? "min-w-0" : "shrink-0"}>
                   {isLast || !crumb.href ? (
                     crumb.leading || crumb.identifier ? (
-                      <BreadcrumbPage className="flex min-w-0 items-center gap-1.5">
+                      <BreadcrumbPage className="flex min-w-0 items-baseline gap-1.5">
                         {crumb.leading && (
-                          <span className="flex shrink-0 items-center">{crumb.leading}</span>
+                          <span className="flex shrink-0 items-center self-center">{crumb.leading}</span>
                         )}
                         {!taskDetailLayout ? <CrumbIdentifier identifier={crumb.identifier} /> : null}
                         <span className="min-w-0 truncate">{crumb.label}</span>
@@ -154,12 +154,12 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?:
                         <Link
                           to={crumb.href}
                           className={cn(
-                            "flex min-w-0 items-center gap-1.5",
+                            "flex min-w-0 items-baseline gap-1.5",
                             i === 0 && "font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground",
                           )}
                         >
                           {crumb.leading && (
-                            <span className="flex shrink-0 items-center">{crumb.leading}</span>
+                            <span className="flex shrink-0 items-center self-center">{crumb.leading}</span>
                           )}
                           {!taskDetailLayout ? <CrumbIdentifier identifier={crumb.identifier} /> : null}
                           <span className="min-w-0 truncate">{crumb.label}</span>
@@ -194,9 +194,9 @@ export function BreadcrumbBar({ taskDetailLayout = false }: { taskDetailLayout?:
         {menuButton}
         <div className="min-w-0 overflow-hidden flex-1">
           {breadcrumbs[0].leading || breadcrumbs[0].identifier ? (
-            <h1 className="flex items-center gap-1.5 text-sm font-semibold uppercase tracking-wider">
+            <h1 className="flex items-baseline gap-1.5 text-sm font-semibold uppercase tracking-wider">
               {breadcrumbs[0].leading && (
-                <span className="flex shrink-0 items-center">{breadcrumbs[0].leading}</span>
+                <span className="flex shrink-0 items-center self-center">{breadcrumbs[0].leading}</span>
               )}
               <CrumbIdentifier identifier={breadcrumbs[0].identifier} />
               <span className="truncate">{breadcrumbs[0].label}</span>
diff --git a/ui/src/components/CompanySettingsSidebar.test.tsx b/ui/src/components/CompanySettingsSidebar.test.tsx
index 111f60690d..7a3418dcc8 100644
--- a/ui/src/components/CompanySettingsSidebar.test.tsx
+++ b/ui/src/components/CompanySettingsSidebar.test.tsx
@@ -144,8 +144,7 @@ describe("CompanySettingsSidebar", () => {
     expect(container.textContent).not.toContain("Settings");
     expect(container.querySelector('[aria-label="Back from Settings"]')).toBeNull();
     const settingsSurface = container.querySelector('[data-contextual-sidebar="settings"]');
-    expect(settingsSurface?.classList).toContain("bg-border/50");
-    expect(settingsSurface?.classList).toContain("dark:bg-muted");
+    expect(settingsSurface?.classList).toContain("primary-sidebar-surface");
     expect(container.querySelector('[data-slot="contextual-sidebar-nav"]')?.className).toBe(
       primarySidebarStyles.nav,
     );
diff --git a/ui/src/components/Sidebar.test.tsx b/ui/src/components/Sidebar.test.tsx
index 970709436f..bd71c36ff9 100644
--- a/ui/src/components/Sidebar.test.tsx
+++ b/ui/src/components/Sidebar.test.tsx
@@ -173,8 +173,7 @@ describe("Sidebar", () => {
     const sidebar = container.querySelector("aside");
     expect(sidebar?.classList).not.toContain("border-r");
     expect(sidebar?.classList).not.toContain("border-border");
-    expect(sidebar?.classList).toContain("bg-border/50");
-    expect(sidebar?.classList).toContain("dark:bg-muted");
+    expect(sidebar?.classList).toContain("primary-sidebar-surface");
 
     flushSync(() => {
       root.unmount();
diff --git a/ui/src/components/SidebarNavItem.tsx b/ui/src/components/SidebarNavItem.tsx
index e918ed3540..efbcfa4e56 100644
--- a/ui/src/components/SidebarNavItem.tsx
+++ b/ui/src/components/SidebarNavItem.tsx
@@ -182,7 +182,7 @@ export function SidebarNavItem({
         </Badge>
       )}
       {!rail && (hasLive || liveAccessory) && (
-        <span className="ml-auto flex items-center gap-1.5">
+        <span className="ml-auto flex shrink-0 items-center gap-1.5 whitespace-nowrap">
           {liveAccessory}
           {hasLive && (
             <>
diff --git a/ui/src/components/SidebarRecentTasks.tsx b/ui/src/components/SidebarRecentTasks.tsx
index be9797bbf4..3bcaf90380 100644
--- a/ui/src/components/SidebarRecentTasks.tsx
+++ b/ui/src/components/SidebarRecentTasks.tsx
@@ -250,11 +250,11 @@ function RecentTasksList({
     <>
       <SidebarSection label="Recent Tasks">
         {entries.map((entry) => (
-          <div key={entry.id} className="group/recent-task relative">
+          <div key={entry.id} className="sidebar-action-row group/recent-task relative">
             <SidebarNavItem
               to={`/issues/${entry.id}`}
               label={entry.title}
-              className={rail ? undefined : "pr-10"}
+              className={rail ? undefined : "sidebar-action-link pointer-coarse:pr-8"}
               liveCount={liveIssueIds.has(entry.id) ? 1 : undefined}
             />
             {!rail ? (
@@ -265,7 +265,7 @@ function RecentTasksList({
                     variant="ghost"
                     size="icon-xs"
                     aria-label={`More actions for ${entry.title}`}
-                    className="absolute right-2 top-(--pct-50) z-10 -translate-y-(--pct-50) text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 pointer-coarse:opacity-100 group-hover/recent-task:opacity-100 group-focus-within/recent-task:opacity-100 data-[state=open]:bg-accent data-[state=open]:text-foreground data-[state=open]:opacity-100"
+                    className="sidebar-action-menu absolute right-2 top-(--pct-50) z-10 -translate-y-(--pct-50) text-muted-foreground pointer-events-none opacity-0 transition-opacity hover:bg-sidebar-accent dark:hover:bg-sidebar-accent hover:text-foreground focus-visible:pointer-events-auto focus-visible:opacity-100 pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:before:hidden group-hover/recent-task:pointer-events-auto group-hover/recent-task:opacity-100 group-focus-within/recent-task:pointer-events-auto group-focus-within/recent-task:opacity-100 data-[state=open]:pointer-events-auto data-[state=open]:bg-sidebar-accent data-[state=open]:text-foreground data-[state=open]:opacity-100"
                   >
                     <MoreHorizontal aria-hidden="true" />
                   </Button>
diff --git a/ui/src/components/StatusGlyph.test.tsx b/ui/src/components/StatusGlyph.test.tsx
index a7ff3fbbcd..f5a92e4957 100644
--- a/ui/src/components/StatusGlyph.test.tsx
+++ b/ui/src/components/StatusGlyph.test.tsx
@@ -16,7 +16,7 @@ import { taskStatusIconVar } from "../lib/status-colors";
 const STATUS_ICON_CLASS: Record<string, string> = {
   backlog: "lucide-circle-dashed",
   todo: "lucide-circle",
-  in_progress: "lucide-rotate-cw",
+  in_progress: "lucide-task-progress-spinner",
   in_review: "lucide-circle-dot",
   done: "lucide-circle-check",
   blocked: "lucide-circle-minus",
@@ -29,14 +29,17 @@ describe("StatusGlyph", () => {
     for (const status of Object.keys(taskStatusIconVar)) {
       const html = renderToStaticMarkup(<StatusGlyph status={status} />);
       expect(html).toContain('viewBox="0 0 24 24"');
+      expect(html).toContain('stroke-width="2"');
       expect(html).toContain("<svg");
     }
   });
 
   it("maps sm/md/lg to 14/16/20 px", () => {
-    expect(renderToStaticMarkup(<StatusGlyph status="todo" size="sm" />)).toContain('width="14"');
-    expect(renderToStaticMarkup(<StatusGlyph status="todo" size="md" />)).toContain('width="16"');
-    expect(renderToStaticMarkup(<StatusGlyph status="todo" size="lg" />)).toContain('width="20"');
+    for (const status of Object.keys(taskStatusIconVar)) {
+      expect(renderToStaticMarkup(<StatusGlyph status={status} size="sm" />)).toContain('width="14"');
+      expect(renderToStaticMarkup(<StatusGlyph status={status} size="md" />)).toContain('width="16"');
+      expect(renderToStaticMarkup(<StatusGlyph status={status} size="lg" />)).toContain('width="20"');
+    }
     // Default size is md.
     expect(renderToStaticMarkup(<StatusGlyph status="todo" />)).toContain('width="16"');
   });
@@ -61,6 +64,24 @@ describe("StatusGlyph", () => {
     }
   });
 
+  it("animates only in-progress task icons and respects reduced motion", () => {
+    for (const status of Object.keys(taskStatusIconVar)) {
+      const html = renderToStaticMarkup(<StatusGlyph status={status} />);
+      expect(html.includes("motion-safe:animate-spin")).toBe(status === "in_progress");
+    }
+  });
+
+  it("uses the same circle radius and stroke for the spinner as other task icons", () => {
+    for (const status of ["in_progress", "todo", "done", "blocked", "cancelled"]) {
+      const html = renderToStaticMarkup(<StatusGlyph status={status} />);
+      expect(html).toContain('<circle cx="12" cy="12" r="10"');
+      expect(html).toContain('stroke-width="2"');
+    }
+    const spinner = renderToStaticMarkup(<StatusGlyph status="in_progress" />);
+    expect(spinner).toContain('pathLength="100"');
+    expect(spinner).toContain('stroke-dasharray="80 20"');
+  });
+
   it("gives todo the plain circle (not a compound circle icon)", () => {
     const html = renderToStaticMarkup(<StatusGlyph status="todo" />);
     expect(html).toContain("lucide-circle");
diff --git a/ui/src/components/StatusGlyph.tsx b/ui/src/components/StatusGlyph.tsx
index 3914d79ae9..56a8664591 100644
--- a/ui/src/components/StatusGlyph.tsx
+++ b/ui/src/components/StatusGlyph.tsx
@@ -6,7 +6,7 @@ import {
   CircleDashed,
   CircleDot,
   CircleMinus,
-  RotateCw,
+  createLucideIcon,
   type LucideIcon,
 } from "lucide-react";
 import { cn } from "../lib/utils";
@@ -18,10 +18,14 @@ import { taskStatusIconVar, taskStatusIconVarDefault } from "../lib/status-color
  * `viewBox="0 0 24 24"` so they scale proportionally at any size), so the whole
  * set reads as one consistent icon family:
  *
- *   backlog → circle-dashed · todo → circle · in_progress → rotate-cw ·
+ *   backlog → circle-dashed · todo → circle · in_progress → animated open circle ·
  *   in_review → circle-dot · done → circle-check · blocked → circle-minus ·
  *   cancelled → ban · in_queue → circle-minus (blocked recoloured blue).
  *
+ * The in-progress animation represents task workflow status, independently of
+ * run execution. It remains between runs until the task status changes; live
+ * indicators and run details report whether an agent is currently executing.
+ *
  * Colour comes from the `--status-task-icon-*` CSS vars (AA-tuned, mode-aware;
  * see `index.css`). The glyph paints in `currentColor`, and the component
  * defaults `color` to the status' icon var — so it renders correctly
@@ -44,11 +48,17 @@ export type StatusGlyphStatus =
   | "cancelled"
   | "in_queue";
 
+// LoaderCircle uses a 9-unit radius. Keep its open arc, but use the same
+// 10-unit circle and unscaled stroke as the other task glyphs.
+const TaskProgressSpinner = createLucideIcon("TaskProgressSpinner", [
+  ["circle", { cx: "12", cy: "12", r: "10", pathLength: "100", strokeDasharray: "80 20", key: "progress" }],
+]);
+
 /** Status → Lucide icon. `in_queue` borrows the blocked icon; its colour var resolves to blue. */
 const STATUS_ICON: Record<string, LucideIcon> = {
   backlog: CircleDashed,
   todo: Circle,
-  in_progress: RotateCw,
+  in_progress: TaskProgressSpinner,
   in_review: CircleDot,
   done: CircleCheck,
   blocked: CircleMinus,
@@ -78,7 +88,7 @@ export function StatusGlyph({ status, size = "md", className, title }: StatusGly
   return (
     <Icon
       size={px}
-      className={cn("inline-block shrink-0 align-middle", className)}
+      className={cn("inline-block shrink-0 align-middle", status === "in_progress" && "motion-safe:animate-spin", className)}
       style={{ color: `var(${cssVar})` } as CSSProperties}
       {...a11y}
     >
diff --git a/ui/src/components/issue-properties/IssueProperties.tsx b/ui/src/components/issue-properties/IssueProperties.tsx
index e048db6fdf..5904558605 100644
--- a/ui/src/components/issue-properties/IssueProperties.tsx
+++ b/ui/src/components/issue-properties/IssueProperties.tsx
@@ -2332,7 +2332,7 @@ export function IssueProperties({
         <PropertyRow label="Status">
           <StatusIcon
             status={issue.status}
-            size="lg"
+            className="size-3"
             blockerAttention={issue.blockerAttention}
             onChange={(status) => onUpdate({ status })}
             showLabel
diff --git a/ui/src/components/primary-sidebar-styles.ts b/ui/src/components/primary-sidebar-styles.ts
index 198452e91b..deba61e994 100644
--- a/ui/src/components/primary-sidebar-styles.ts
+++ b/ui/src/components/primary-sidebar-styles.ts
@@ -3,7 +3,7 @@
  * Settings reuses this contract when it takes over the global sidebar.
  */
 export const primarySidebarStyles = {
-  surface: "bg-border/50 dark:bg-muted",
+  surface: "primary-sidebar-surface",
   nav: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto scrollbar-auto-hide px-3 py-2 pointer-coarse:gap-3",
   group: "flex flex-col gap-0.5",
 } as const;
diff --git a/ui/src/index.css b/ui/src/index.css
index 80db413948..bd6796564b 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -3,7 +3,7 @@
 
 @font-face {
   font-family: "InterVariable";
-  src: url("../fonts/InterVariable.woff2") format("woff2");
+  src: url("/fonts/InterVariable.woff2") format("woff2");
   font-display: swap;
   font-style: normal;
   font-weight: 100 900;
@@ -11,7 +11,7 @@
 
 @font-face {
   font-family: "InterVariable";
-  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
+  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
   font-display: swap;
   font-style: italic;
   font-weight: 100 900;
@@ -174,6 +174,15 @@
   --status-agent-running: #2563eb;
   --status-agent-paused: #f59e0b;
   --status-agent-error: #dc2626;
+  /* Dashboard agent card: translucent running treatment from the Paper design. */
+  --dashboard-run-accent: oklch(62.3% 0.214 259.815);
+  --dashboard-run-background: color-mix(in oklab, var(--dashboard-run-accent) 4%, transparent);
+  --dashboard-run-border: color-mix(in oklab, var(--dashboard-run-accent) 25%, transparent);
+  --dashboard-list-leading-width: calc(var(--spacing) * 6);
+  --dashboard-list-id-width: calc(var(--spacing) * 20);
+  --dashboard-list-time-width: calc(var(--spacing) * 16);
+  --dashboard-task-list-columns: var(--dashboard-list-leading-width) minmax(0, 1fr) calc(var(--spacing) * 36) var(--dashboard-list-id-width) var(--dashboard-list-time-width);
+  --dashboard-activity-list-columns: var(--dashboard-list-leading-width) minmax(0, 1fr) var(--dashboard-list-id-width) var(--dashboard-list-time-width);
   --status-task-backlog: #a8aeb2;
   --status-task-todo: #f59e0b;
   --status-task-in_progress: #2563eb;
@@ -191,15 +200,15 @@
      gray / amber / green statuses are pinned to the board-approved AA hexes.
      `in_queue` is the BLOCKED shape recoloured to the in_progress blue
      (replaces the bespoke teal "covered" state). Light values here; the
-     `.dark` block below overrides the four that need a mode-specific hue. */
+     `.dark` block below overrides the hues that need a mode-specific value. */
   --status-task-icon-backlog: #52585d;   /* gray darkened — 7.21:1 on paper */
   --status-task-icon-todo: #cc7a00;       /* amber darkened — clears 3:1 */
-  --status-task-icon-in_progress: var(--status-task-in_progress); /* #2563eb both modes */
+  --status-task-icon-in_progress: var(--color-blue-600); /* matches nav dots and live labels */
   --status-task-icon-in_review: var(--status-task-in_review);     /* #7c3aed (light) */
   --status-task-icon-done: #16a34a;       /* green darkened — clears 3:1 */
   --status-task-icon-blocked: var(--status-task-blocked);         /* #dc2626 both modes */
   --status-task-icon-cancelled: #52585d;
-  --status-task-icon-in_queue: var(--status-task-in_progress);    /* blocked shape, blue */
+  --status-task-icon-in_queue: var(--status-task-icon-in_progress); /* blocked shape, same mode-aware blue */
 
   --folder-color-indigo: #6366f1;
   --folder-color-violet: #8b5cf6;
@@ -286,6 +295,7 @@
   --side-panel-tab-label-max-width: var(--sz-100px);
   --side-panel-tab-label-expanded-max-width: calc(var(--side-panel-tab-label-max-width) + var(--sz-18px));
   --side-panel-tab-label-fade-width: var(--sz-32px);
+  --sidebar-nav-action-fade-width: calc(var(--spacing) * 4);
   --side-panel-tab-radius: var(--radius-xl);
   --side-panel-control-radius: var(--radius-xl);
   --side-panel-launcher-width: var(--sz-320px);
@@ -405,11 +415,12 @@
   --chip-match-identifier-bg: var(--muted);
   --chip-match-identifier-fg: var(--muted-foreground);
   --chip-match-identifier-border: var(--border);
-  /* Dark-mode AA overrides for the status-icon hues that need a mode-specific
-     value (PAP-238). in_progress / blocked stay identical (same blue / red both
-     modes) and in_queue tracks in_progress, so they need no override. */
+  /* Dark-mode status-icon hues. The lighter progress blue gives bare glyphs
+     contrast comparable to the neighboring gray, purple, and green icons.
+     Blocked retains its base red; in_queue follows the progress icon blue. */
   --status-task-icon-backlog: #9a958a;
   --status-task-icon-todo: #fbbf24;
+  --status-task-icon-in_progress: var(--color-blue-400); /* matches nav dots and live labels */
   --status-task-icon-in_review: #9474f0;  /* deeper than violet-400, reads purple */
   --status-task-icon-done: #34d06f;
   --status-task-icon-cancelled: #9a958a;
@@ -985,6 +996,48 @@
   transition-duration: var(--motion-side-panel-tab);
   transition-timing-function: var(--motion-ease-standard);
 }
+/* Sidebar actions cover the trailing live label without moving row content,
+   fading into the row surface like the task-detail tab close control. */
+.primary-sidebar-surface {
+  --sidebar-action-rest-surface: color-mix(in srgb, var(--border) 50%, var(--background));
+  background-color: var(--sidebar-action-rest-surface);
+}
+.dark .primary-sidebar-surface {
+  --sidebar-action-rest-surface: var(--muted);
+}
+.sidebar-action-row {
+  --sidebar-action-surface: var(--sidebar-action-rest-surface, var(--background));
+}
+.sidebar-action-row:is(:hover, :focus-within),
+.sidebar-action-row:has(.sidebar-action-link[aria-current="page"]),
+.sidebar-action-row:has(.sidebar-action-menu[data-state="open"]) {
+  --sidebar-action-surface: var(--sidebar-accent);
+}
+.sidebar-action-link {
+  background-color: var(--sidebar-action-surface);
+}
+.sidebar-action-row:is(:hover, :focus-within) .sidebar-action-link,
+.sidebar-action-row:has(.sidebar-action-menu[data-state="open"]) .sidebar-action-link {
+  color: var(--sidebar-accent-foreground);
+}
+.sidebar-action-menu {
+  isolation: isolate;
+}
+.sidebar-action-menu::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  left: calc(-1 * var(--sidebar-nav-action-fade-width));
+  z-index: -1;
+  border-radius: inherit;
+  /* Animate a solid surface in sync with the link; gradient color stops switch
+     immediately and flash the resting sidebar color during the opacity fade. */
+  background-color: var(--sidebar-action-surface);
+  mask-image: linear-gradient(to right, transparent, black var(--sidebar-nav-action-fade-width));
+  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function);
+  pointer-events: none;
+}
+
 .side-panel-tab-label-fade,
 .side-panel-tab-label-close-fade[data-truncated="true"],
 [data-appearance="streamlined-task"]:is(:hover, :focus-within) .side-panel-tab-label-close-fade {
@@ -1145,6 +1198,12 @@
   }
 }
 
+/* Shared rhythm for dashboard activity and recent-task rows. */
+.dashboard-list-row {
+  min-height: calc(var(--spacing) * 12);
+  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+}
+
 /* Dashboard activity row entry motion */
 @keyframes dashboard-activity-enter {
   0% {
diff --git a/ui/src/lib/activity-format.test.ts b/ui/src/lib/activity-format.test.ts
index de96201047..67c4e4c03f 100644
--- a/ui/src/lib/activity-format.test.ts
+++ b/ui/src/lib/activity-format.test.ts
@@ -8,6 +8,11 @@ describe("activity formatting", () => {
     ["agent-approver", { id: "agent-approver", name: "Approver Bot" } as Agent],
   ]);
 
+  it("uses readable verbs for task read-state changes", () => {
+    expect(formatActivityVerb("issue.read_marked")).toBe("read");
+    expect(formatActivityVerb("issue.read_unmarked")).toBe("marked unread");
+  });
+
   it("formats blocker activity using linked issue identifiers", () => {
     const details = {
       addedBlockedByIssues: [
diff --git a/ui/src/lib/activity-format.ts b/ui/src/lib/activity-format.ts
index 1e98eca665..a0ab4644ae 100644
--- a/ui/src/lib/activity-format.ts
+++ b/ui/src/lib/activity-format.ts
@@ -25,6 +25,8 @@ interface ActivityFormatOptions {
 const ACTIVITY_ROW_VERBS: Record<string, string> = {
   "issue.created": "created",
   "issue.updated": "updated",
+  "issue.read_marked": "read",
+  "issue.read_unmarked": "marked unread",
   "issue.checked_out": "checked out",
   "issue.released": "released",
   "issue.comment_added": "commented on",
diff --git a/ui/src/lib/ui-font-assets.test.ts b/ui/src/lib/ui-font-assets.test.ts
index f2ea367a87..3526cae0a7 100644
--- a/ui/src/lib/ui-font-assets.test.ts
+++ b/ui/src/lib/ui-font-assets.test.ts
@@ -18,7 +18,7 @@ describe("bundled UI font assets", () => {
       expect(existsSync(fontPath), `${fileName} should exist in ui/public/fonts`).toBe(true);
       expect(statSync(fontPath).isFile(), `${fileName} should be a file`).toBe(true);
       expect(readFileSync(fontPath).subarray(0, 4).toString("ascii")).toBe("wOF2");
-      expect(css).toContain(`url("../fonts/${fileName}")`);
+      expect(css).toContain(`url("/fonts/${fileName}")`);
     }
 
     expect(css).toContain('--font-sans: "InterVariable"');
diff --git a/ui/src/pages/Dashboard.tsx b/ui/src/pages/Dashboard.tsx
index 62edd4bcad..1033c34b98 100644
--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@@ -453,7 +453,7 @@ export function Dashboard() {
 
           <SmokeLabDashboardCard companyId={selectedCompanyId!} />
 
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className={cn("grid grid-cols-2 gap-4", SHOW_TASK_PRIORITY_UI ? "lg:grid-cols-4" : "lg:grid-cols-3")}>
             <ChartCard title="Run Activity" subtitle="Last 14 days">
               <RunActivityChart activity={data.runActivity} />
             </ChartCard>
@@ -486,7 +486,7 @@ export function Dashboard() {
                 <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
                   Recent Activity
                 </h3>
-                <Card className="block py-0 divide-y divide-border overflow-hidden">
+                <Card className="@container block py-0 divide-y divide-border overflow-hidden">
                   {recentActivity.map((event) => (
                     <ActivityRow
                       key={event.id}
@@ -512,37 +512,36 @@ export function Dashboard() {
                   <p className="text-sm text-muted-foreground">No tasks yet.</p>
                 </Card>
               ) : (
-                <Card className="block py-0 divide-y divide-border overflow-hidden">
+                <Card className="@container block py-0 divide-y divide-border overflow-hidden">
                   {recentIssues.slice(0, 10).map((issue) => (
                     <Link
                       key={issue.id}
                       to={`/issues/${issue.identifier ?? issue.id}`}
-                      className="px-4 py-3 text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
+                      className="dashboard-list-row text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
                     >
-                      <div className="flex items-start gap-2 sm:items-center sm:gap-3">
-                        {/* Status icon - left column on mobile */}
-                        <span className="shrink-0 sm:hidden">
+                      <div className="flex items-start gap-2 @xl:grid @xl:grid-cols-(--dashboard-task-list-columns) @xl:items-baseline">
+                        <span className="flex size-6 shrink-0 items-center justify-end @xl:self-center">
                           <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} />
                         </span>
-
-                        {/* Right column on mobile: title + metadata stacked */}
-                        <span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
-                          <span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
-                            {issue.title}
-                          </span>
-                          <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
-                            <span className="hidden sm:inline-flex"><StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} /></span>
-                            <span className="text-xs font-mono text-muted-foreground">
+                        <span className="flex min-w-0 flex-1 flex-col gap-1 @xl:contents">
+                          <span className="flex min-w-0 items-baseline gap-2 @xl:contents">
+                            <span className="min-w-0 flex-1 truncate text-sm leading-6" title={issue.title}>
+                              {issue.title}
+                            </span>
+                            <span className="ml-auto shrink-0 truncate text-right font-mono text-(length:--text-micro) text-muted-foreground @xl:col-start-4 @xl:row-start-1 @xl:w-(--dashboard-list-id-width)">
                               {issue.identifier ?? issue.id.slice(0, 8)}
                             </span>
-                            {issue.assigneeAgentId && (() => {
-                              const name = agentName(issue.assigneeAgentId);
-                              return name
-                                ? <span className="hidden sm:inline-flex"><Identity name={name} size="sm" /></span>
-                                : null;
-                            })()}
-                            <span className="text-xs text-muted-foreground sm:hidden">&middot;</span>
-                            <span className="text-xs text-muted-foreground shrink-0 sm:order-last">
+                          </span>
+                          <span className="flex min-h-6 min-w-0 items-center gap-2 @xl:contents">
+                            <span className="flex min-w-0 flex-1 items-center @xl:col-start-3 @xl:row-start-1 @xl:self-center">
+                              {issue.assigneeAgentId && (() => {
+                                const name = agentName(issue.assigneeAgentId);
+                                return name
+                                  ? <Identity name={name} size="sm" className="max-w-32" />
+                                  : null;
+                              })()}
+                            </span>
+                            <span className="ml-auto w-(--dashboard-list-time-width) shrink-0 whitespace-nowrap text-right text-xs text-muted-foreground">
                               {timeAgo(issue.updatedAt)}
                             </span>
                           </span>
diff --git a/ui/src/pages/DashboardLive.tsx b/ui/src/pages/DashboardLive.tsx
index a7a4323068..1a6309fb0a 100644
--- a/ui/src/pages/DashboardLive.tsx
+++ b/ui/src/pages/DashboardLive.tsx
@@ -53,8 +53,6 @@ export function DashboardLive() {
         minRunCount={DASHBOARD_LIVE_RUN_LIMIT}
         fetchLimit={DASHBOARD_LIVE_RUN_LIMIT}
         cardLimit={DASHBOARD_LIVE_RUN_LIMIT}
-        gridClassName="gap-3 md:grid-cols-2 2xl:grid-cols-3"
-        cardClassName="h-(--sz-420px)"
         emptyMessage="No active or recent agent runs."
         queryScope="dashboard-live"
         showMoreLink={false}
diff --git a/ui/src/pages/DesignGuide.tsx b/ui/src/pages/DesignGuide.tsx
index a3007e5bc0..ee1a20a33c 100644
--- a/ui/src/pages/DesignGuide.tsx
+++ b/ui/src/pages/DesignGuide.tsx
@@ -131,6 +131,7 @@ import {
   AvatarGroupCount,
 } from "@/components/ui/avatar";
 import { AgentCapsule, AGENT_GRADIENT_COUNT } from "@/components/AgentCapsule";
+import { AgentRunCard } from "@/components/ActiveAgentsPanel";
 import { StatusBadge, IssueStatusBadge } from "@/components/StatusBadge";
 import { StatusIcon } from "@/components/StatusIcon";
 import { EnforcementBanner } from "@/components/EnforcementBanner";
@@ -1203,6 +1204,23 @@ export function DesignGuide() {
       {/*  CARDS                                                        */}
       {/* ============================================================ */}
       <Section title="Cards">
+        <SubSection title="Dashboard agent runs">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {["running", "queued", "succeeded", "failed", "timed_out", "cancelled", "interrupted"].map((status) => (
+              <AgentRunCard
+                key={status}
+                companyId="design-guide"
+                run={{
+                  id: `design-guide-${status}`, agentId: "design-guide-agent", agentName: "CodexCoder",
+                  status, adapterType: "codex_local", invocationSource: "on_demand", triggerDetail: "manual",
+                  startedAt: null, finishedAt: null, createdAt: "2026-09-11T12:00:00Z", issueId: "design-guide-task",
+                }}
+                issue={{ identifier: "PAP-559", title: "Recreate this wireframe on pages Paperclip", status: status === "succeeded" ? "done" : "in_progress" }}
+              />
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">The dashboard and Live runs page use the same compact cards. In-progress task icons animate across the app, including between runs, to represent task workflow status. Live indicators report active execution. Open a run to view its status and transcript.</p>
+        </SubSection>
         <SubSection title="Standard Card">
           <Card>
             <CardHeader>
diff --git a/ui/src/pages/IssueDetail.tsx b/ui/src/pages/IssueDetail.tsx
index 76d6d9933d..b749f1504f 100644
--- a/ui/src/pages/IssueDetail.tsx
+++ b/ui/src/pages/IssueDetail.tsx
@@ -3645,7 +3645,7 @@ export function IssueDetail({ tasksTab }: { tasksTab?: TaskSidePanelProps["tasks
       breadcrumbStatus ? (
         <StatusIcon
           status={breadcrumbStatus}
-          size="lg"
+          className="size-3"
           blockerAttention={breadcrumbBlockerAttention}
         />
       ) : undefined,
diff --git a/ui/storybook/stories/agent-management.stories.tsx b/ui/storybook/stories/agent-management.stories.tsx
index d40382e9cb..7f1bee25fc 100644
--- a/ui/storybook/stories/agent-management.stories.tsx
+++ b/ui/storybook/stories/agent-management.stories.tsx
@@ -456,7 +456,10 @@ function StorybookQueryFixtures({ children }: { children: ReactNode }) {
   queryClient.setQueryData(queryKeys.adapters.all, adapterFixtures);
   queryClient.setQueryData(queryKeys.issues.list(COMPANY_ID), storybookIssues);
   queryClient.setQueryData([...queryKeys.issues.list(COMPANY_ID), "with-routine-executions"], storybookIssues);
-  queryClient.setQueryData([...queryKeys.liveRuns(COMPANY_ID), "dashboard"], liveRuns);
+  queryClient.setQueryData([...queryKeys.liveRuns(COMPANY_ID), "dashboard", { minRunCount: 4, fetchLimit: undefined }], liveRuns);
+  for (const issue of storybookIssues) {
+    queryClient.setQueryData(queryKeys.issues.detail(issue.id), issue);
+  }
   queryClient.setQueryData(queryKeys.instance.generalSettings, { censorUsernameInLogs: false });
   queryClient.setQueryData(queryKeys.agents.adapterModels(COMPANY_ID, "codex_local"), [
     { id: "gpt-5.4", label: "GPT-5.4" },