From 00b02e12a4ffe40c60f180fe742f090873a2f698 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 7 Mar 2026 20:16:54 +0000
Subject: feat: soryu-co/soryu - makima: Add right-click context menu to
 directives page

---
 .../components/directives/DirectiveContextMenu.tsx | 160 +++++++++++++++++++++
 .../src/components/directives/DirectiveList.tsx    |  39 ++++-
 2 files changed, 197 insertions(+), 2 deletions(-)
 create mode 100644 makima/frontend/src/components/directives/DirectiveContextMenu.tsx

(limited to 'makima/frontend/src/components')

diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
new file mode 100644
index 0000000..07322e2
--- /dev/null
+++ b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useRef } from "react";
+import type { DirectiveSummary } from "../../lib/api";
+
+interface DirectiveContextMenuProps {
+  x: number;
+  y: number;
+  directive: DirectiveSummary;
+  onClose: () => void;
+  onStart: () => void;
+  onPause: () => void;
+  onArchive: () => void;
+  onDelete: () => void;
+  onGoToPR: () => void;
+}
+
+export function DirectiveContextMenu({
+  x,
+  y,
+  directive,
+  onClose,
+  onStart,
+  onPause,
+  onArchive,
+  onDelete,
+  onGoToPR,
+}: DirectiveContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  // Adjust position if menu would overflow viewport
+  useEffect(() => {
+    if (menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (rect.right > viewportWidth) {
+        menuRef.current.style.left = `${x - rect.width}px`;
+      }
+      if (rect.bottom > viewportHeight) {
+        menuRef.current.style.top = `${y - rect.height}px`;
+      }
+    }
+  }, [x, y]);
+
+  const menuItemClass =
+    "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";
+  const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";
+
+  const showStart = directive.status === "draft" || directive.status === "paused" || directive.status === "idle";
+  const showPause = directive.status === "active";
+  const showArchive = directive.status !== "archived";
+  const showGoToPR = !!directive.prUrl;
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
+      style={{ left: x, top: y }}
+    >
+      {/* Header showing directive title */}
+      <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]">
+        {directive.title}
+      </div>
+
+      {/* Status actions */}
+      {showStart && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onStart();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">▶</span>
+          Start
+        </button>
+      )}
+
+      {showPause && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onPause();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">❚❚</span>
+          Pause
+        </button>
+      )}
+
+      {showArchive && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onArchive();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">▣</span>
+          Archive
+        </button>
+      )}
+
+      {/* Go to PR link */}
+      {showGoToPR && (
+        <>
+          <div className={dividerClass} />
+          <button
+            className={menuItemClass}
+            onClick={() => {
+              onGoToPR();
+              onClose();
+            }}
+          >
+            <span className="text-[#75aafc]">↗</span>
+            Go to PR
+          </button>
+        </>
+      )}
+
+      <div className={dividerClass} />
+
+      {/* Delete action */}
+      <button
+        className={`${menuItemClass} text-red-400 hover:bg-red-400/10`}
+        onClick={() => {
+          onDelete();
+          onClose();
+        }}
+      >
+        <span className="text-red-400">✕</span>
+        Delete
+      </button>
+    </div>
+  );
+}
diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx
index 6a9c486..38a7caa 100644
--- a/makima/frontend/src/components/directives/DirectiveList.tsx
+++ b/makima/frontend/src/components/directives/DirectiveList.tsx
@@ -1,6 +1,7 @@
-import { useMemo } from "react";
+import { useState, useMemo } from "react";
 import type { DirectiveSummary, DirectiveStatus } from "../../lib/api";
 import { useSupervisorQuestions } from "../../contexts/SupervisorQuestionsContext";
+import { DirectiveContextMenu } from "./DirectiveContextMenu";
 
 const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> = {
   draft: { color: "text-[#7788aa] border-[#2a3a5a]", label: "DRAFT" },
@@ -15,10 +16,28 @@ interface DirectiveListProps {
   selectedId: string | null;
   onSelect: (id: string) => void;
   onCreate: () => void;
+  onStart?: (directive: DirectiveSummary) => void;
+  onPause?: (directive: DirectiveSummary) => void;
+  onArchive?: (directive: DirectiveSummary) => void;
+  onDelete?: (directive: DirectiveSummary) => void;
+  onGoToPR?: (directive: DirectiveSummary) => void;
 }
 
-export function DirectiveList({ directives, selectedId, onSelect, onCreate }: DirectiveListProps) {
+export function DirectiveList({ directives, selectedId, onSelect, onCreate, onStart, onPause, onArchive, onDelete, onGoToPR }: DirectiveListProps) {
   const { pendingQuestions } = useSupervisorQuestions();
+  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
+  const [contextMenuDirective, setContextMenuDirective] = useState<DirectiveSummary | null>(null);
+
+  const handleContextMenu = (e: React.MouseEvent, directive: DirectiveSummary) => {
+    e.preventDefault();
+    setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    setContextMenuDirective(directive);
+  };
+
+  const closeContextMenu = () => {
+    setContextMenuPosition(null);
+    setContextMenuDirective(null);
+  };
 
   const questionsPerDirective = useMemo(() => {
     const counts = new Map<string, number>();
@@ -61,6 +80,7 @@ export function DirectiveList({ directives, selectedId, onSelect, onCreate }: Di
                 key={d.id}
                 type="button"
                 onClick={() => onSelect(d.id)}
+                onContextMenu={(e) => handleContextMenu(e, d)}
                 className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${
                   selectedId === d.id ? "bg-[rgba(117,170,252,0.1)]" : ""
                 }`}
@@ -99,6 +119,21 @@ export function DirectiveList({ directives, selectedId, onSelect, onCreate }: Di
           })
         )}
       </div>
+
+      {/* Context Menu */}
+      {contextMenuPosition && contextMenuDirective && (
+        <DirectiveContextMenu
+          x={contextMenuPosition.x}
+          y={contextMenuPosition.y}
+          directive={contextMenuDirective}
+          onClose={closeContextMenu}
+          onStart={() => onStart?.(contextMenuDirective)}
+          onPause={() => onPause?.(contextMenuDirective)}
+          onArchive={() => onArchive?.(contextMenuDirective)}
+          onDelete={() => onDelete?.(contextMenuDirective)}
+          onGoToPR={() => onGoToPR?.(contextMenuDirective)}
+        />
+      )}
     </div>
   );
 }
-- 
cgit v1.2.3