missions: surface per-phase run errors on the phase card
Adds inline failure debugging to the Phases tab. When you see a
phase card marked FAILED, click the collapsed error summary and the
full topology_run.error text expands under it — the exact stack
trace / provider error / whatever the worker recorded.
Backend:
- TopologyRunSummary gains mission_phase_id + team_id + error
fields. list_by_mission SELECT extended; other constructor
(list_recent) explicitly passes None for the new fields.
- GET /api/missions/{id}/runs response now carries all of the
above so the frontend can attribute failures per phase.
Frontend:
- MissionRunSummary type mirrors backend additions.
- MissionCanvas fetches runs alongside mission on load +
auto-refresh; indexes by mission_phase_id in a memoized Map.
- Each phase card renders a per-run row: colored status pill
(running / completed / failed), short run id, finished_at
timestamp. For failed runs, a <details> collapses the error
text — first line as summary, full 4kB in a monospace <pre> on
expand.
Directly unblocks the "phase says Failed but there's no info to
debug" report. Both research and coding phases get this — the code
path is phase-kind-agnostic.
This commit is contained in:
Omar Sobh
@@ -14,12 +14,14 @@ import { FileText, Pencil, Play, Plus, RefreshCw, Sparkles, Trash2 } from "lucid
|
||||
import {
|
||||
deleteMission,
|
||||
getMission,
|
||||
listMissionRuns,
|
||||
refineMission,
|
||||
setMissionDescription,
|
||||
setMissionStatus,
|
||||
triggerBenchmark,
|
||||
triggerSecurityScan,
|
||||
type MissionDetail,
|
||||
type MissionRunSummary,
|
||||
type MissionStatus,
|
||||
type PhaseKind,
|
||||
type PhaseStatus,
|
||||
@@ -113,6 +115,7 @@ export function MissionCanvas({
|
||||
const [wizardOpen, setWizardOpen] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
const [runs, setRuns] = useState<MissionRunSummary[]>([]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!selectedId) {
|
||||
@@ -122,8 +125,12 @@ export function MissionCanvas({
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const m = await getMission(selectedId);
|
||||
const [m, r] = await Promise.all([
|
||||
getMission(selectedId),
|
||||
listMissionRuns(selectedId).catch(() => ({ runs: [] })),
|
||||
]);
|
||||
setMission(m);
|
||||
setRuns(r.runs);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "load failed");
|
||||
} finally {
|
||||
@@ -246,6 +253,20 @@ export function MissionCanvas({
|
||||
}
|
||||
}, [mission, onChanged, load]);
|
||||
|
||||
// Index runs by phase_id so the phase card can surface the run's
|
||||
// status + error text inline. Newest-first ordering from the API
|
||||
// means the first entry per phase is the most recent attempt.
|
||||
const runsByPhase = useMemo(() => {
|
||||
const idx = new Map<string, MissionRunSummary[]>();
|
||||
for (const r of runs) {
|
||||
if (!r.mission_phase_id) continue;
|
||||
const list = idx.get(r.mission_phase_id) ?? [];
|
||||
list.push(r);
|
||||
idx.set(r.mission_phase_id, list);
|
||||
}
|
||||
return idx;
|
||||
}, [runs]);
|
||||
|
||||
const orderedPhases = useMemo(
|
||||
() =>
|
||||
mission
|
||||
@@ -640,6 +661,102 @@ 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>
|
||||
);
|
||||
})()}
|
||||
{mission.status === "running" || mission.status === "completed" ? (
|
||||
<div style={{ display: "flex", gap: 6, marginTop: 6 }}>
|
||||
{p.kind === "security_scan" && (
|
||||
|
||||
Reference in New Issue
Block a user