From 5739f1064059c9e33730a1238944f7f140b5b7b1 Mon Sep 17 00:00:00 2001 From: soryu Date: Sat, 7 Mar 2026 20:15:35 +0000 Subject: feat: soryu-co/soryu - makima: Compact the order page header display --- .../frontend/src/components/orders/OrderDetail.tsx | 77 +++++++++++----------- 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx index 9c3ac97..338cc60 100644 --- a/makima/frontend/src/components/orders/OrderDetail.tsx +++ b/makima/frontend/src/components/orders/OrderDetail.tsx @@ -111,8 +111,8 @@ export function OrderDetail({ return (
{/* Header */} -
-
+
+
{editingTitle ? (
)} -
- - {badge.label} - - -
+
- {/* Type + Priority inline */} -
- + {/* Metadata badges row */} +
+ + {badge.label} + + {currentType.label} - / - + {currentPriority.label} -
- - {/* Linked entities */} - {order.directiveId && ( - - )} - {order.directiveStepId && ( -
- Step: {order.directiveStepId.slice(0, 8)}... -
- )} - - {/* Controls */} -
+ )} + {order.directiveStepId && ( + + step:{order.directiveStepId.slice(0, 8)} + + )} -- cgit v1.2.3 From 90007a8359cf50923d55734bb8d4325307c75461 Mon Sep 17 00:00:00 2001 From: soryu Date: Sat, 7 Mar 2026 20:16:29 +0000 Subject: feat: soryu-co/soryu - makima: Add right-click context menu to orders page --- .../src/components/orders/OrderContextMenu.tsx | 184 +++++++++++++++++++++ .../frontend/src/components/orders/OrderList.tsx | 34 ++++ makima/frontend/src/routes/orders.tsx | 30 +++- 3 files changed, 247 insertions(+), 1 deletion(-) create mode 100644 makima/frontend/src/components/orders/OrderContextMenu.tsx 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(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 ( +
+ {/* Header showing order title */} +
+ {order.title} +
+ + {/* Status actions */} + {showOpen && ( + + )} + + {showInProgress && ( + + )} + + {showUnderReview && ( + + )} + + {showDone && ( + + )} + + {showArchive && ( + + )} + + {/* Directive link */} + {showGoToDirective && ( + <> +
+ + + )} + +
+ + {/* Delete action */} + +
+ ); +} 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 = { 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(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({ }) )}
+ + {/* Context Menu */} + {contextMenuPosition && contextMenuOrder && ( + onChangeStatus?.(contextMenuOrder, status)} + onDelete={() => onDelete?.(contextMenuOrder)} + onGoToDirective={() => onGoToDirective?.(contextMenuOrder)} + /> + )}
); } diff --git a/makima/frontend/src/routes/orders.tsx b/makima/frontend/src/routes/orders.tsx index aa14e68..5744bdd 100644 --- a/makima/frontend/src/routes/orders.tsx +++ b/makima/frontend/src/routes/orders.tsx @@ -6,7 +6,8 @@ import { OrderDetail } from "../components/orders/OrderDetail"; import { useOrders, useOrder } from "../hooks/useOrders"; import { useDirectives } from "../hooks/useDirectives"; 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(); @@ -92,6 +93,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" }, @@ -123,6 +148,9 @@ export default function OrdersPage() { onStatusFilter={setStatusFilter} typeFilter={typeFilter} onTypeFilter={setTypeFilter} + onChangeStatus={handleContextChangeStatus} + onDelete={handleContextDelete} + onGoToDirective={handleContextGoToDirective} />
-- cgit v1.2.3 From 00b02e12a4ffe40c60f180fe742f090873a2f698 Mon Sep 17 00:00:00 2001 From: soryu 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 ++++- makima/frontend/src/routes/directives.tsx | 50 ++++++- 3 files changed, 245 insertions(+), 4 deletions(-) create mode 100644 makima/frontend/src/components/directives/DirectiveContextMenu.tsx 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(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 ( +
+ {/* Header showing directive title */} +
+ {directive.title} +
+ + {/* Status actions */} + {showStart && ( + + )} + + {showPause && ( + + )} + + {showArchive && ( + + )} + + {/* Go to PR link */} + {showGoToPR && ( + <> +
+ + + )} + +
+ + {/* Delete action */} + +
+ ); +} 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 = { 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(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(); @@ -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 }) )}
+ + {/* Context Menu */} + {contextMenuPosition && contextMenuDirective && ( + onStart?.(contextMenuDirective)} + onPause={() => onPause?.(contextMenuDirective)} + onArchive={() => onArchive?.(contextMenuDirective)} + onDelete={() => onDelete?.(contextMenuDirective)} + onGoToPR={() => onGoToPR?.(contextMenuDirective)} + /> + )}
); } diff --git a/makima/frontend/src/routes/directives.tsx b/makima/frontend/src/routes/directives.tsx index cee4920..f1b430d 100644 --- a/makima/frontend/src/routes/directives.tsx +++ b/makima/frontend/src/routes/directives.tsx @@ -5,13 +5,13 @@ import { DirectiveList } from "../components/directives/DirectiveList"; import { DirectiveDetail } from "../components/directives/DirectiveDetail"; import { useDirectives, useDirective } from "../hooks/useDirectives"; 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 [showCreate, setShowCreate] = useState(false); @@ -66,6 +66,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 { @@ -106,6 +147,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} />
-- cgit v1.2.3