3 files changed, 30 insertions, 0 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
index 07322e2..3f24ce1 100644
--- a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
+++ b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
@@ -11,6 +11,12 @@ interface DirectiveContextMenuProps {
   onArchive: () => void;
   onDelete: () => void;
   onGoToPR: () => void;
+  /**
+   * Reset the contract to a fresh empty draft (clears goal + pr_url, status
+   * back to 'draft'). Past revisions stay as history. Optional so the legacy
+   * tabular UI doesn't have to wire it up.
+   */
+  onNewDraft?: () => void;
 }
 
 export function DirectiveContextMenu({
@@ -23,6 +29,7 @@ export function DirectiveContextMenu({
   onArchive,
   onDelete,
   onGoToPR,
+  onNewDraft,
 }: DirectiveContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -73,6 +80,10 @@ export function DirectiveContextMenu({
   const showPause = directive.status === "active";
   const showArchive = directive.status !== "archived";
   const showGoToPR = !!directive.prUrl;
+  // "New draft" appears once the contract is inactive (its iteration has
+  // shipped) — that's the explicit affordance for starting the next cycle
+  // on a clean slate while keeping prior revisions as history.
+  const showNewDraft = !!onNewDraft && directive.status === "inactive";
 
   return (
     <div
@@ -85,6 +96,23 @@ export function DirectiveContextMenu({
         {directive.title}
       </div>
 
+      {/* New draft — the canonical action on an inactive (shipped) contract. */}
+      {showNewDraft && (
+        <>
+          <button
+            className={menuItemClass}
+            onClick={() => {
+              onNewDraft?.();
+              onClose();
+            }}
+          >
+            <span className="text-emerald-300">＋</span>
+            New draft
+          </button>
+          <div className={dividerClass} />
+        </>
+      )}
+
       {/* Status actions */}
       {showStart && (
         <button
diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index e3302e4..4931afa 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -13,6 +13,7 @@ const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> =
   active: { color: "text-green-400 border-green-800", label: "ACTIVE" },
   idle: { color: "text-yellow-400 border-yellow-800", label: "IDLE" },
   paused: { color: "text-orange-400 border-orange-800", label: "PAUSED" },
+  inactive: { color: "text-[#9bc3ff] border-[#3f6fb3]", label: "INACTIVE" },
   archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
 };
 
diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx
index 38a7caa..a35c8b1 100644
--- a/makima/frontend/src/components/directives/DirectiveList.tsx
+++ b/makima/frontend/src/components/directives/DirectiveList.tsx
@@ -8,6 +8,7 @@ const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> =
   active: { color: "text-green-400 border-green-800", label: "ACTIVE" },
   idle: { color: "text-yellow-400 border-yellow-800", label: "IDLE" },
   paused: { color: "text-orange-400 border-orange-800", label: "PAUSED" },
+  inactive: { color: "text-[#9bc3ff] border-[#3f6fb3]", label: "INACTIVE" },
   archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
 };