Merge pull request #87 from soryu-co/makima/directive-soryu-co-soryu---makima-19fd3e1d-v1772943648

feat: compact order header & add context menus to orders/directives

8 files changed, 535 insertions, 58 deletions

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>
   );
 }
diff --git a/makima/frontend/src/components/orders/OrderContextMenu.tsx b/makima/frontend/src/components/orders/OrderContextMenu.tsx
new file mode 100644
index 0000000..f73ca4f
--- /dev/null
+++ b/makima/frontend/src/components/orders/OrderContextMenu.tsx
@@ -0,0 +1,184 @@
+import { useEffect, useRef } from "react";
+import type { Order, OrderStatus } from "../../lib/api";
+
+interface OrderContextMenuProps {
+  x: number;
+  y: number;
+  order: Order;
+  onClose: () => void;
+  onChangeStatus: (status: OrderStatus) => void;
+  onDelete: () => void;
+  onGoToDirective: () => void;
+}
+
+export function OrderContextMenu({
+  x,
+  y,
+  order,
+  onClose,
+  onChangeStatus,
+  onDelete,
+  onGoToDirective,
+}: OrderContextMenuProps) {
+  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 showOpen = order.status !== "open";
+  const showInProgress = order.status !== "in_progress";
+  const showUnderReview = order.status !== "under_review";
+  const showDone = order.status !== "done";
+  const showArchive = order.status !== "archived";
+  const showGoToDirective = !!order.directiveId;
+
+  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 order 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]">
+        {order.title}
+      </div>
+
+      {/* Status actions */}
+      {showOpen && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onChangeStatus("open");
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">○</span>
+          Mark as Open
+        </button>
+      )}
+
+      {showInProgress && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onChangeStatus("in_progress");
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">●</span>
+          Mark as In Progress
+        </button>
+      )}
+
+      {showUnderReview && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onChangeStatus("under_review");
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">◉</span>
+          Mark as Under Review
+        </button>
+      )}
+
+      {showDone && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onChangeStatus("done");
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">✓</span>
+          Mark as Done
+        </button>
+      )}
+
+      {showArchive && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onChangeStatus("archived");
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">▣</span>
+          Archive
+        </button>
+      )}
+
+      {/* Directive link */}
+      {showGoToDirective && (
+        <>
+          <div className={dividerClass} />
+          <button
+            className={menuItemClass}
+            onClick={() => {
+              onGoToDirective();
+              onClose();
+            }}
+          >
+            <span className="text-[#75aafc]">▶</span>
+            Go to Directive
+          </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/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx
index 4267725..ebc8124 100644
--- a/makima/frontend/src/components/orders/OrderDetail.tsx
+++ b/makima/frontend/src/components/orders/OrderDetail.tsx
@@ -115,8 +115,8 @@ export function OrderDetail({
   return (
     <div className="flex flex-col h-full overflow-y-auto">
       {/* Header */}
-      <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]">
-        <div className="flex items-center justify-between mb-2">
+      <div className="px-4 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]">
+        <div className="flex items-center justify-between mb-1">
           {editingTitle ? (
             <div className="flex-1 flex items-center gap-2 pr-2">
               <input
@@ -155,66 +155,56 @@ export function OrderDetail({
               {order.title}
             </h2>
           )}
-          <div className="flex items-center gap-2 shrink-0">
-            <span
-              className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`}
-            >
-              {badge.label}
-            </span>
-            <button
-              type="button"
-              onClick={onRefresh}
-              className="text-[10px] font-mono text-[#7788aa] hover:text-white"
-              title="Refresh"
-            >
-              [refresh]
-            </button>
-          </div>
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="text-[10px] font-mono text-[#7788aa] hover:text-white shrink-0"
+            title="Refresh"
+          >
+            [refresh]
+          </button>
         </div>
 
-        {/* Type + Priority inline */}
-        <div className="flex items-center gap-3 mb-2">
-          <span className={`text-[10px] font-mono ${currentType.color}`}>
+        {/* Metadata badges row */}
+        <div className="flex flex-wrap items-center gap-1.5">
+          <span
+            className={`text-[10px] font-mono ${badge.color} border rounded px-1.5 py-0.5`}
+          >
+            {badge.label}
+          </span>
+          <span
+            className={`text-[10px] font-mono ${currentType.color} border border-current rounded px-1.5 py-0.5`}
+          >
             {currentType.label}
           </span>
-          <span className="text-[10px] font-mono text-[#2a3a5a]">/</span>
-          <span className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}>
+          <span
+            className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}
+          >
             {currentPriority.label}
           </span>
-        </div>
-
-        {/* Linked entities */}
-        {order.directiveId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1 truncate">
-            Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline">
-              {order.directiveName || order.directiveId.slice(0, 8) + "..."}
+          {order.directiveId && (
+            <a
+              href={`/directives/${order.directiveId}`}
+              className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 hover:text-white hover:border-[rgba(117,170,252,0.5)] truncate max-w-[160px]"
+              title={order.directiveName || order.directiveId}
+            >
+              ↗ {order.directiveName || order.directiveId.slice(0, 8) + "..."}
             </a>
-          </div>
-        )}
-        {order.directiveStepId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1 truncate">
-            Step: <span className="text-[#7788aa]">{order.directiveStepId.slice(0, 8)}...</span>
-          </div>
-        )}
-        {order.directiveId && (
-          <div className="text-[10px] font-mono text-[#556677] mb-1">
-            DOG:{" "}
-            {order.dogId ? (
-              <span className="text-[#75aafc]">
-                {dogs.find((d) => d.id === order.dogId)?.name || order.dogId.slice(0, 8) + "..."}
-              </span>
-            ) : (
-              <span className="text-[#445566] italic">None</span>
-            )}
-          </div>
-        )}
-
-        {/* Controls */}
-        <div className="flex flex-wrap gap-2 mt-2">
+          )}
+          {order.directiveStepId && (
+            <span className="text-[10px] font-mono text-[#7788aa] border border-[#2a3a5a] rounded px-1.5 py-0.5">
+              step:{order.directiveStepId.slice(0, 8)}
+            </span>
+          )}
+          {order.directiveId && (
+            <span className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 truncate max-w-[120px]">
+              DOG: {order.dogId ? (dogs.find((d) => d.id === order.dogId)?.name || order.dogId.slice(0, 8) + "...") : "None"}
+            </span>
+          )}
           <button
             type="button"
             onClick={onDelete}
-            className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ml-auto"
+            className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-1.5 py-0.5 ml-auto"
           >
             Delete
           </button>
diff --git a/makima/frontend/src/components/orders/OrderList.tsx b/makima/frontend/src/components/orders/OrderList.tsx
index 0ebd18d..ec3dcf6 100644
--- a/makima/frontend/src/components/orders/OrderList.tsx
+++ b/makima/frontend/src/components/orders/OrderList.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from "react";
 import type { Order, OrderStatus, OrderPriority, OrderType } from "../../lib/api";
+import { OrderContextMenu } from "./OrderContextMenu";
 
 const STATUS_BADGE: Record<OrderStatus, { color: string; label: string }> = {
   open: { color: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", label: "OPEN" },
@@ -34,6 +35,9 @@ interface OrderListProps {
   onStatusFilter: (s: OrderStatus | undefined) => void;
   typeFilter: OrderType | undefined;
   onTypeFilter: (t: OrderType | undefined) => void;
+  onChangeStatus?: (order: Order, status: OrderStatus) => void;
+  onDelete?: (order: Order) => void;
+  onGoToDirective?: (order: Order) => void;
 }
 
 const STATUS_OPTIONS: (OrderStatus | "all")[] = ["all", "open", "in_progress", "under_review", "done", "archived"];
@@ -48,8 +52,24 @@ export function OrderList({
   onStatusFilter,
   typeFilter,
   onTypeFilter,
+  onChangeStatus,
+  onDelete,
+  onGoToDirective,
 }: OrderListProps) {
   const [search, setSearch] = useState("");
+  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
+  const [contextMenuOrder, setContextMenuOrder] = useState<Order | null>(null);
+
+  const handleContextMenu = (e: React.MouseEvent, order: Order) => {
+    e.preventDefault();
+    setContextMenuPosition({ x: e.clientX, y: e.clientY });
+    setContextMenuOrder(order);
+  };
+
+  const closeContextMenu = () => {
+    setContextMenuPosition(null);
+    setContextMenuOrder(null);
+  };
 
   const filtered = useMemo(() => {
     if (!search.trim()) return orders;
@@ -148,6 +168,7 @@ export function OrderList({
                 key={o.id}
                 type="button"
                 onClick={() => onSelect(o.id)}
+                onContextMenu={(e) => handleContextMenu(e, o)}
                 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 === o.id ? "bg-[rgba(117,170,252,0.1)]" : ""
                 }`}
@@ -190,6 +211,19 @@ export function OrderList({
           })
         )}
       </div>
+
+      {/* Context Menu */}
+      {contextMenuPosition && contextMenuOrder && (
+        <OrderContextMenu
+          x={contextMenuPosition.x}
+          y={contextMenuPosition.y}
+          order={contextMenuOrder}
+          onClose={closeContextMenu}
+          onChangeStatus={(status) => onChangeStatus?.(contextMenuOrder, status)}
+          onDelete={() => onDelete?.(contextMenuOrder)}
+          onGoToDirective={() => onGoToDirective?.(contextMenuOrder)}
+        />
+      )}
     </div>
   );
 }
diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx
index 846f52f..8de0335 100644
--- a/makima/frontend/src/routes/directives.tsx
+++ b/makima/frontend/src/routes/directives.tsx
@@ -6,13 +6,13 @@ import { DirectiveDetail } from "../components/directives/DirectiveDetail";
 import { useDirectives, useDirective } from "../hooks/useDirectives";
 import { useDogs } from "../hooks/useDogs";
 import { useAuth } from "../contexts/AuthContext";
-import { getRepositorySuggestions, type RepositoryHistoryEntry } from "../lib/api";
+import { getRepositorySuggestions, startDirective, pauseDirective, updateDirective, type RepositoryHistoryEntry, type DirectiveSummary } from "../lib/api";
 
 export default function DirectivesPage() {
   const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
   const navigate = useNavigate();
   const { id: selectedId } = useParams<{ id: string }>();
-  const { directives, loading: listLoading, create, remove } = useDirectives();
+  const { directives, loading: listLoading, create, remove, refresh: refreshList } = useDirectives();
   const { directive, refresh: refreshDetail, update, start, pause, advance, completeStep, failStep, skipStep, updateGoal, cleanup, pickUpOrders, createPR } = useDirective(selectedId);
   const { dogs, loading: dogsLoading, create: createDog, update: updateDog, remove: removeDog, pickUpOrders: pickUpDogOrders } = useDogs(selectedId);
 
@@ -68,6 +68,47 @@ export default function DirectivesPage() {
     );
   }
 
+  const handleContextStart = async (directive: DirectiveSummary) => {
+    try {
+      await startDirective(directive.id);
+      await refreshList();
+    } catch (e) {
+      console.error("Failed to start directive:", e);
+    }
+  };
+
+  const handleContextPause = async (directive: DirectiveSummary) => {
+    try {
+      await pauseDirective(directive.id);
+      await refreshList();
+    } catch (e) {
+      console.error("Failed to pause directive:", e);
+    }
+  };
+
+  const handleContextArchive = async (directive: DirectiveSummary) => {
+    try {
+      await updateDirective(directive.id, { status: "archived" });
+      await refreshList();
+    } catch (e) {
+      console.error("Failed to archive directive:", e);
+    }
+  };
+
+  const handleContextDelete = async (directive: DirectiveSummary) => {
+    if (!window.confirm("Delete this directive?")) return;
+    try {
+      await remove(directive.id);
+      if (directive.id === selectedId) navigate("/directives");
+    } catch (e) {
+      console.error("Failed to delete:", e);
+    }
+  };
+
+  const handleContextGoToPR = (directive: DirectiveSummary) => {
+    if (directive.prUrl) window.open(directive.prUrl, "_blank");
+  };
+
   const handleCreate = async () => {
     if (!newTitle.trim() || !newGoal.trim()) return;
     try {
@@ -108,6 +149,11 @@ export default function DirectivesPage() {
             selectedId={selectedId ?? null}
             onSelect={(id) => navigate(`/directives/${id}`)}
             onCreate={() => setShowCreate(true)}
+            onStart={handleContextStart}
+            onPause={handleContextPause}
+            onArchive={handleContextArchive}
+            onDelete={handleContextDelete}
+            onGoToPR={handleContextGoToPR}
           />
         </div>
 
diff --git a/makima/frontend/src/routes/orders.tsx b/makima/frontend/src/routes/orders.tsx
index 06e091a..cc1e1ad 100644
--- a/makima/frontend/src/routes/orders.tsx
+++ b/makima/frontend/src/routes/orders.tsx
@@ -7,7 +7,8 @@ import { useOrders, useOrder } from "../hooks/useOrders";
 import { useDirectives } from "../hooks/useDirectives";
 import { useDogs } from "../hooks/useDogs";
 import { useAuth } from "../contexts/AuthContext";
-import type { OrderStatus, OrderType, OrderPriority } from "../lib/api";
+import { updateOrder, deleteOrder } from "../lib/api";
+import type { Order, OrderStatus, OrderType, OrderPriority } from "../lib/api";
 
 export default function OrdersPage() {
   const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
@@ -94,6 +95,30 @@ export default function OrdersPage() {
     await refreshList();
   };
 
+  const handleContextChangeStatus = async (order: Order, status: OrderStatus) => {
+    try {
+      await updateOrder(order.id, { status });
+      await refreshList();
+    } catch (e) {
+      console.error("Failed to change status:", e);
+    }
+  };
+
+  const handleContextDelete = async (order: Order) => {
+    if (!window.confirm("Delete this order?")) return;
+    try {
+      await deleteOrder(order.id);
+      if (order.id === selectedId) navigate("/orders");
+      await refreshList();
+    } catch (e) {
+      console.error("Failed to delete:", e);
+    }
+  };
+
+  const handleContextGoToDirective = (order: Order) => {
+    if (order.directiveId) navigate("/directives/" + order.directiveId);
+  };
+
   const priorityOptions: { value: OrderPriority; label: string }[] = [
     { value: "critical", label: "Critical" },
     { value: "high", label: "High" },
@@ -125,6 +150,9 @@ export default function OrdersPage() {
             onStatusFilter={setStatusFilter}
             typeFilter={typeFilter}
             onTypeFilter={setTypeFilter}
+            onChangeStatus={handleContextChangeStatus}
+            onDelete={handleContextDelete}
+            onGoToDirective={handleContextGoToDirective}
           />
         </div>
 
diff --git a/makima/frontend/tsconfig.tsbuildinfo b/makima/frontend/tsconfig.tsbuildinfo
index a063be7..59abd45 100644
--- a/makima/frontend/tsconfig.tsbuildinfo
+++ b/makima/frontend/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/japanesehovertext.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/phaseconfirmationnotification.tsx","./src/components/protectedroute.tsx","./src/components/rewritelink.tsx","./src/components/simplemarkdown.tsx","./src/components/supervisorquestionnotification.tsx","./src/components/charts/chartrenderer.tsx","./src/components/contracts/commandmodepanel.tsx","./src/components/contracts/contractcliinput.tsx","./src/components/contracts/contractcontextmenu.tsx","./src/components/contracts/contractdetail.tsx","./src/components/contracts/contractlist.tsx","./src/components/contracts/phasebadge.tsx","./src/components/contracts/phaseconfirmationmodal.tsx","./src/components/contracts/phasedeliverablespanel.tsx","./src/components/contracts/phasehint.tsx","./src/components/contracts/phaseprogressbar.tsx","./src/components/contracts/quickactionbuttons.tsx","./src/components/contracts/repositorypanel.tsx","./src/components/contracts/taskderivationpreview.tsx","./src/components/directives/directivedag.tsx","./src/components/directives/directivedetail.tsx","./src/components/directives/directivelist.tsx","./src/components/directives/directivelogstream.tsx","./src/components/directives/orchestratorstepnode.tsx","./src/components/directives/stepnode.tsx","./src/components/directives/taskslideoutpanel.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/elementcontextmenu.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/reposyncindicator.tsx","./src/components/files/updatenotification.tsx","./src/components/files/versionhistorydropdown.tsx","./src/components/history/checkpointcard.tsx","./src/components/history/checkpointlist.tsx","./src/components/history/conversationmessage.tsx","./src/components/history/conversationview.tsx","./src/components/history/historyfilters.tsx","./src/components/history/resumecontrols.tsx","./src/components/history/timelineeventcard.tsx","./src/components/history/timelinelist.tsx","./src/components/history/index.ts","./src/components/listen/contractpickermodal.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/discusscontractmodal.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptanalysispanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/components/mesh/branchtaskmodal.tsx","./src/components/mesh/contractcompletequestion.tsx","./src/components/mesh/directoryinput.tsx","./src/components/mesh/gitactionspanel.tsx","./src/components/mesh/inlinesubtaskeditor.tsx","./src/components/mesh/mergeconflictresolver.tsx","./src/components/mesh/overlaydiffviewer.tsx","./src/components/mesh/prpreview.tsx","./src/components/mesh/patcheslistpanel.tsx","./src/components/mesh/subtasktree.tsx","./src/components/mesh/taskdetail.tsx","./src/components/mesh/tasklist.tsx","./src/components/mesh/taskoutput.tsx","./src/components/mesh/tasktree.tsx","./src/components/mesh/unifiedmeshchatinput.tsx","./src/components/mesh/worktreefilespanel.tsx","./src/components/orders/orderdetail.tsx","./src/components/orders/orderlist.tsx","./src/contexts/authcontext.tsx","./src/contexts/supervisorquestionscontext.tsx","./src/hooks/usecontracts.ts","./src/hooks/usedirectives.ts","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemeshchathistory.ts","./src/hooks/usemicrophone.ts","./src/hooks/usemultitasksubscription.ts","./src/hooks/useorders.ts","./src/hooks/usespeakwebsocket.ts","./src/hooks/usetasksubscription.ts","./src/hooks/usetasks.ts","./src/hooks/usetextscramble.ts","./src/hooks/useversionhistory.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/lib/listenapi.ts","./src/lib/markdown.ts","./src/lib/supabase.ts","./src/routes/_index.tsx","./src/routes/contract-file.tsx","./src/routes/contracts.tsx","./src/routes/daemons.tsx","./src/routes/directives.tsx","./src/routes/files.tsx","./src/routes/history.tsx","./src/routes/listen.tsx","./src/routes/login.tsx","./src/routes/mesh.tsx","./src/routes/orders.tsx","./src/routes/settings.tsx","./src/routes/speak.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/gridoverlay.tsx","./src/components/japanesehovertext.tsx","./src/components/logo.tsx","./src/components/masthead.tsx","./src/components/navstrip.tsx","./src/components/phaseconfirmationnotification.tsx","./src/components/protectedroute.tsx","./src/components/rewritelink.tsx","./src/components/simplemarkdown.tsx","./src/components/supervisorquestionnotification.tsx","./src/components/charts/chartrenderer.tsx","./src/components/contracts/commandmodepanel.tsx","./src/components/contracts/contractcliinput.tsx","./src/components/contracts/contractcontextmenu.tsx","./src/components/contracts/contractdetail.tsx","./src/components/contracts/contractlist.tsx","./src/components/contracts/phasebadge.tsx","./src/components/contracts/phaseconfirmationmodal.tsx","./src/components/contracts/phasedeliverablespanel.tsx","./src/components/contracts/phasehint.tsx","./src/components/contracts/phaseprogressbar.tsx","./src/components/contracts/quickactionbuttons.tsx","./src/components/contracts/repositorypanel.tsx","./src/components/contracts/taskderivationpreview.tsx","./src/components/directives/doglist.tsx","./src/components/directives/directivecontextmenu.tsx","./src/components/directives/directivedag.tsx","./src/components/directives/directivedetail.tsx","./src/components/directives/directivelist.tsx","./src/components/directives/directivelogstream.tsx","./src/components/directives/orchestratorstepnode.tsx","./src/components/directives/stepnode.tsx","./src/components/directives/taskslideoutpanel.tsx","./src/components/files/bodyrenderer.tsx","./src/components/files/cliinput.tsx","./src/components/files/conflictnotification.tsx","./src/components/files/elementcontextmenu.tsx","./src/components/files/filedetail.tsx","./src/components/files/filelist.tsx","./src/components/files/reposyncindicator.tsx","./src/components/files/updatenotification.tsx","./src/components/files/versionhistorydropdown.tsx","./src/components/history/checkpointcard.tsx","./src/components/history/checkpointlist.tsx","./src/components/history/conversationmessage.tsx","./src/components/history/conversationview.tsx","./src/components/history/historyfilters.tsx","./src/components/history/resumecontrols.tsx","./src/components/history/timelineeventcard.tsx","./src/components/history/timelinelist.tsx","./src/components/history/index.ts","./src/components/listen/contractpickermodal.tsx","./src/components/listen/controlpanel.tsx","./src/components/listen/discusscontractmodal.tsx","./src/components/listen/speakerpanel.tsx","./src/components/listen/transcriptanalysispanel.tsx","./src/components/listen/transcriptpanel.tsx","./src/components/mesh/branchtaskmodal.tsx","./src/components/mesh/contractcompletequestion.tsx","./src/components/mesh/directoryinput.tsx","./src/components/mesh/gitactionspanel.tsx","./src/components/mesh/inlinesubtaskeditor.tsx","./src/components/mesh/mergeconflictresolver.tsx","./src/components/mesh/overlaydiffviewer.tsx","./src/components/mesh/prpreview.tsx","./src/components/mesh/patcheslistpanel.tsx","./src/components/mesh/subtasktree.tsx","./src/components/mesh/taskdetail.tsx","./src/components/mesh/tasklist.tsx","./src/components/mesh/taskoutput.tsx","./src/components/mesh/tasktree.tsx","./src/components/mesh/unifiedmeshchatinput.tsx","./src/components/mesh/worktreefilespanel.tsx","./src/components/orders/ordercontextmenu.tsx","./src/components/orders/orderdetail.tsx","./src/components/orders/orderlist.tsx","./src/contexts/authcontext.tsx","./src/contexts/supervisorquestionscontext.tsx","./src/hooks/usecontracts.ts","./src/hooks/usedirectives.ts","./src/hooks/usedogs.ts","./src/hooks/usefilesubscription.ts","./src/hooks/usefiles.ts","./src/hooks/usemeshchathistory.ts","./src/hooks/usemicrophone.ts","./src/hooks/usemultitasksubscription.ts","./src/hooks/useorders.ts","./src/hooks/usespeakwebsocket.ts","./src/hooks/usetasksubscription.ts","./src/hooks/usetasks.ts","./src/hooks/usetextscramble.ts","./src/hooks/useversionhistory.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/lib/listenapi.ts","./src/lib/markdown.ts","./src/lib/supabase.ts","./src/routes/_index.tsx","./src/routes/contract-file.tsx","./src/routes/contracts.tsx","./src/routes/daemons.tsx","./src/routes/directives.tsx","./src/routes/files.tsx","./src/routes/history.tsx","./src/routes/listen.tsx","./src/routes/login.tsx","./src/routes/mesh.tsx","./src/routes/orders.tsx","./src/routes/settings.tsx","./src/routes/speak.tsx","./src/types/messages.ts"],"version":"5.9.3"}
\ No newline at end of file