missions: live activity stream per running run on phase cards

Adds a "show activity" toggle to any running topology_run row on
the phase card. Expanded rows mount a compact SSE tail from
/api/topology-runs/{id}/events, rendering step/reasoning/tool
events as they arrive — same stream the LIVE tab consumes, just
scoped to one run.

Extracted the phase-runs list into PhaseRunsList to keep
MissionCanvas under the 1250-line budget.

frontend/src/components/dashboard/MissionCanvas.tsx

@@ -36,6 +36,7 @@ import { MissionLiveEvents } from "./MissionLiveEvents";
 import { MissionLivePane } from "./MissionLivePane";
 import { MissionTeamTab } from "./MissionTeamTab";
 import { MissionWizard } from "./MissionWizard";
+import { PhaseRunsList } from "./PhaseRunsList";
 import { RefineDiffModal } from "./RefineDiffModal";
 
 const mono =
@@ -662,102 +663,7 @@ export function MissionCanvas({
                         : ""}
                     </span>
                   )}
-                  {(() => {
-                    const phaseRuns = runsByPhase.get(p.id) ?? [];
-                    if (phaseRuns.length === 0) return null;
-                    return (
-                      <div
-                        style={{
-                          marginTop: 6,
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: 4,
-                        }}
-                      >
-                        {phaseRuns.map((r) => {
-                          const isFailed = r.status === "failed";
-                          const isTerminal = ["completed", "failed", "cancelled"].includes(r.status);
-                          return (
-                            <div
-                              key={r.id}
-                              style={{
-                                padding: "6px 9px",
-                                borderRadius: 6,
-                                border: `1px solid ${
-                                  isFailed
-                                    ? "rgba(255,138,122,.35)"
-                                    : "rgba(255,255,255,.06)"
-                                }`,
-                                background: isFailed
-                                  ? "rgba(255,138,122,.06)"
-                                  : "rgba(255,255,255,.02)",
-                                fontFamily: mono,
-                                fontSize: 11,
-                                color: "#cfcfd5",
-                              }}
-                            >
-                              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                                <span
-                                  style={{
-                                    color:
-                                      r.status === "failed"
-                                        ? "#ff8a7a"
-                                        : r.status === "completed"
-                                          ? "#5fd08a"
-                                          : r.status === "running"
-                                            ? "#5ec8d8"
-                                            : "#8a8a92",
-                                    textTransform: "uppercase",
-                                    letterSpacing: ".08em",
-                                    fontSize: 10,
-                                  }}
-                                >
-                                  run · {r.status}
-                                </span>
-                                <span style={{ color: "#6a6a72", fontSize: 10 }}>
-                                  {r.id.slice(0, 8)}
-                                </span>
-                                {isTerminal && r.finished_at && (
-                                  <span style={{ color: "#6a6a72", fontSize: 10 }}>
-                                    {new Date(r.finished_at).toLocaleTimeString()}
-                                  </span>
-                                )}
-                              </div>
-                              {isFailed && r.error && (
-                                <details style={{ marginTop: 4 }}>
-                                  <summary
-                                    style={{
-                                      cursor: "pointer",
-                                      color: "#ff8a7a",
-                                      fontSize: 11,
-                                    }}
-                                  >
-                                    {r.error.split("\n")[0].slice(0, 180) || "error"}
-                                  </summary>
-                                  <pre
-                                    style={{
-                                      margin: "6px 0 0",
-                                      padding: 8,
-                                      borderRadius: 5,
-                                      background: "rgba(0,0,0,.35)",
-                                      color: "#e0d0cf",
-                                      fontSize: 10.5,
-                                      whiteSpace: "pre-wrap",
-                                      wordBreak: "break-word",
-                                      maxHeight: 260,
-                                      overflow: "auto",
-                                    }}
-                                  >
-                                    {r.error}
-                                  </pre>
-                                </details>
-                              )}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    );
-                  })()}
+                  <PhaseRunsList runs={runsByPhase.get(p.id) ?? []} />
                   {mission.status === "running" || mission.status === "completed" ? (
                     <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                       {p.status === "failed" && mission.status === "running" && (