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

2 files changed, 77 insertions, 3 deletions

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>