mission canvas: add / edit / delete toolbar controls
Top-right toolbar grows three CRUD controls per your request:
- Plus (always visible) — opens MissionWizard, selects the new
mission on create
- Pencil (draft-only) — opens EditMissionModal for title +
description; PATCHes /api/missions/{id}
- Trash (always visible) — window.confirm then DELETEs; sidebar
selection clears via new onDeleted callback
Backend:
- cm-db::repo::missions::update_meta(id, ws, title?, description?)
— COALESCE-based partial patch
- cm-db::repo::missions::delete(id, ws) — hard delete, cascades
via FKs on phases/tasks/artifacts/benchmark_snapshots
- PATCH /api/missions/{id} (draft-only) + DELETE /api/missions/{id}
Frontend:
- lib/api/missions — updateMission + deleteMission clients
- MissionCanvas — three toolbar buttons, EditMissionModal
(title + textarea for description), local wizard state
- Dashboard — passes onSelect + onDeleted so sidebar reacts to
create + delete without stale selection
Edit is draft-only (backend enforces + button hidden past draft) so
in-flight missions can't have their brief mutated out from under
running agents. Delete is unconditional — operator responsibility to
Cancel first if a run is live.
This commit is contained in:
Omar Sobh
@@ -9,15 +9,17 @@
|
||||
// This replaces ResearchCanvas + LoopsCanvas after Slice 9's cutover.
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { FileText, Play, RefreshCw, Sparkles } from "lucide-react";
|
||||
import { FileText, Pencil, Play, Plus, RefreshCw, Sparkles, Trash2 } from "lucide-react";
|
||||
|
||||
import {
|
||||
deleteMission,
|
||||
getMission,
|
||||
refineMission,
|
||||
setMissionDescription,
|
||||
setMissionStatus,
|
||||
triggerBenchmark,
|
||||
triggerSecurityScan,
|
||||
updateMission,
|
||||
type MissionDetail,
|
||||
type MissionStatus,
|
||||
type PhaseKind,
|
||||
@@ -27,6 +29,7 @@ import {
|
||||
type TemplateKind,
|
||||
} from "@/lib/api/missions";
|
||||
import { MarkdownBlock } from "./MarkdownBlock";
|
||||
import { MissionWizard } from "./MissionWizard";
|
||||
|
||||
const mono =
|
||||
"ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";
|
||||
@@ -73,10 +76,14 @@ export function MissionCanvas({
|
||||
selectedId,
|
||||
refreshKey,
|
||||
onChanged,
|
||||
onSelect,
|
||||
onDeleted,
|
||||
}: {
|
||||
selectedId: string | null;
|
||||
refreshKey: number;
|
||||
onChanged: () => void;
|
||||
onSelect?: (id: string) => void;
|
||||
onDeleted?: () => void;
|
||||
}) {
|
||||
const [mission, setMission] = useState<MissionDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -88,6 +95,9 @@ export function MissionCanvas({
|
||||
const [accepting, setAccepting] = useState(false);
|
||||
const [phaseBusy, setPhaseBusy] = useState<string | null>(null);
|
||||
const [pdfPreviewId, setPdfPreviewId] = useState<string | null>(null);
|
||||
const [wizardOpen, setWizardOpen] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!selectedId) {
|
||||
@@ -294,6 +304,57 @@ export function MissionCanvas({
|
||||
{TEMPLATE_LABEL[mission.template_kind] ?? mission.template_kind}
|
||||
</span>
|
||||
<div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setWizardOpen(true)}
|
||||
title="Create a new mission"
|
||||
aria-label="Add mission"
|
||||
style={iconBtn}
|
||||
>
|
||||
<Plus size={13} />
|
||||
</button>
|
||||
{mission.status === "draft" && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditOpen(true)}
|
||||
title="Edit title + description"
|
||||
aria-label="Edit mission"
|
||||
style={iconBtn}
|
||||
>
|
||||
<Pencil size={13} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (deleteBusy) return;
|
||||
const ok = window.confirm(
|
||||
`Delete mission "${mission.title}"? This cascades to its phases, tasks, artifacts, and benchmark snapshots.`,
|
||||
);
|
||||
if (!ok) return;
|
||||
setDeleteBusy(true);
|
||||
try {
|
||||
await deleteMission(mission.id);
|
||||
onDeleted?.();
|
||||
onChanged();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "delete failed");
|
||||
} finally {
|
||||
setDeleteBusy(false);
|
||||
}
|
||||
}}
|
||||
disabled={deleteBusy}
|
||||
title="Delete this mission"
|
||||
aria-label="Delete mission"
|
||||
style={{
|
||||
...iconBtn,
|
||||
color: "#ff8a7a",
|
||||
borderColor: "rgba(255,138,122,.35)",
|
||||
opacity: deleteBusy ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Trash2 size={13} />
|
||||
</button>
|
||||
{mission.status === "draft" && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -355,6 +416,27 @@ export function MissionCanvas({
|
||||
onUndoAfterAccept={undoRefine}
|
||||
/>
|
||||
)}
|
||||
{wizardOpen && (
|
||||
<MissionWizard
|
||||
onClose={() => setWizardOpen(false)}
|
||||
onCreated={(id) => {
|
||||
setWizardOpen(false);
|
||||
onSelect?.(id);
|
||||
onChanged();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{editOpen && (
|
||||
<EditMissionModal
|
||||
mission={mission}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onSaved={async () => {
|
||||
setEditOpen(false);
|
||||
onChanged();
|
||||
await load();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div style={{ display: "flex", gap: 4, marginTop: 4 }}>
|
||||
{(["overview", "phases", "tasks", "artifacts", "benchmarks"] as Tab[]).map((t) => {
|
||||
const active = tab === t;
|
||||
@@ -888,6 +970,205 @@ function Empty({ label }: { label: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function EditMissionModal({
|
||||
mission,
|
||||
onClose,
|
||||
onSaved,
|
||||
}: {
|
||||
mission: MissionDetail;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const [title, setTitle] = useState(mission.title);
|
||||
const [description, setDescription] = useState(mission.description ?? "");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const dirty =
|
||||
title.trim() !== mission.title || description !== (mission.description ?? "");
|
||||
const save = async () => {
|
||||
if (!dirty) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
if (!title.trim()) {
|
||||
setError("title is required");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await updateMission(mission.id, {
|
||||
title: title.trim() !== mission.title ? title.trim() : undefined,
|
||||
description:
|
||||
description !== (mission.description ?? "") ? description : undefined,
|
||||
});
|
||||
onSaved();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "save failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,.55)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 900,
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "min(620px, 100%)",
|
||||
background: "#141419",
|
||||
borderRadius: 12,
|
||||
border: "1px solid rgba(255,255,255,.08)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: "12px 18px",
|
||||
borderBottom: "1px solid rgba(255,255,255,.06)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: mono,
|
||||
fontSize: 10.5,
|
||||
letterSpacing: ".14em",
|
||||
color: "#7cd6e0",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Edit mission
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: mono,
|
||||
fontSize: 10,
|
||||
letterSpacing: ".12em",
|
||||
color: "#a0a0a8",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Title
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
disabled={busy}
|
||||
autoFocus
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
borderRadius: 8,
|
||||
border: "1px solid rgba(255,255,255,.1)",
|
||||
background: "#0a0a0d",
|
||||
color: "#f3f3f5",
|
||||
fontSize: 14,
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: mono,
|
||||
fontSize: 10,
|
||||
letterSpacing: ".12em",
|
||||
color: "#a0a0a8",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
Description (Markdown; use Refine to structure)
|
||||
</span>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
disabled={busy}
|
||||
rows={12}
|
||||
style={{
|
||||
padding: "8px 12px",
|
||||
borderRadius: 8,
|
||||
border: "1px solid rgba(255,255,255,.1)",
|
||||
background: "#0a0a0d",
|
||||
color: "#f3f3f5",
|
||||
fontFamily: mono,
|
||||
fontSize: 12,
|
||||
resize: "vertical",
|
||||
minHeight: 160,
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
{error && (
|
||||
<div style={{ color: "#ff8a7a", fontSize: 12 }}>{error}</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: "12px 18px",
|
||||
borderTop: "1px solid rgba(255,255,255,.06)",
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={busy}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
borderRadius: 8,
|
||||
border: "1px solid rgba(255,255,255,.1)",
|
||||
background: "transparent",
|
||||
color: "#a0a0a8",
|
||||
fontSize: 12,
|
||||
cursor: "pointer",
|
||||
opacity: busy ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={save}
|
||||
disabled={busy || !dirty}
|
||||
style={{
|
||||
padding: "6px 14px",
|
||||
borderRadius: 8,
|
||||
border: "1px solid rgba(127,208,160,.5)",
|
||||
background: "rgba(127,208,160,.12)",
|
||||
color: "#7fd0a0",
|
||||
fontSize: 12,
|
||||
cursor: dirty ? "pointer" : "not-allowed",
|
||||
opacity: busy || !dirty ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
{busy ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RefineDiffModal({
|
||||
original,
|
||||
refined,
|
||||
|
||||
Reference in New Issue
Block a user