diff options
Diffstat (limited to 'makima/frontend')
3 files changed, 245 insertions, 4 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/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} /> </div> |