diff options
Diffstat (limited to 'makima/frontend/src/components')
4 files changed, 278 insertions, 13 deletions
diff --git a/makima/frontend/src/components/SupervisorQuestionNotification.tsx b/makima/frontend/src/components/SupervisorQuestionNotification.tsx new file mode 100644 index 0000000..6a71de2 --- /dev/null +++ b/makima/frontend/src/components/SupervisorQuestionNotification.tsx @@ -0,0 +1,135 @@ +import { useState } from "react"; +import { useNavigate } from "react-router"; +import { useSupervisorQuestions } from "../contexts/SupervisorQuestionsContext"; +import type { PendingQuestion } from "../lib/api"; + +export function SupervisorQuestionNotification() { + const navigate = useNavigate(); + const { pendingQuestions, submitAnswer } = useSupervisorQuestions(); + const [expandedQuestion, setExpandedQuestion] = useState<string | null>(null); + const [response, setResponse] = useState(""); + const [submitting, setSubmitting] = useState(false); + + if (pendingQuestions.length === 0) { + return null; + } + + const handleGoToTask = (taskId: string) => { + navigate(`/mesh/${taskId}`); + }; + + const handleExpand = (questionId: string) => { + setExpandedQuestion(expandedQuestion === questionId ? null : questionId); + setResponse(""); + }; + + const handleSubmit = async (question: PendingQuestion) => { + if (!response.trim()) return; + + setSubmitting(true); + const success = await submitAnswer(question.questionId, response.trim()); + setSubmitting(false); + + if (success) { + setExpandedQuestion(null); + setResponse(""); + } + }; + + const handleChoiceSelect = async (question: PendingQuestion, choice: string) => { + setSubmitting(true); + await submitAnswer(question.questionId, choice); + setSubmitting(false); + }; + + return ( + <div className="fixed bottom-4 right-4 z-50 max-w-md space-y-2"> + {pendingQuestions.map((question) => ( + <div + key={question.questionId} + className="bg-[#0d1b2d] border border-amber-500/50 rounded-lg shadow-lg overflow-hidden" + > + {/* Header */} + <div className="flex items-center justify-between px-4 py-3 bg-amber-900/30"> + <div className="flex items-center gap-2"> + <span className="text-amber-400 text-lg">?</span> + <span className="font-mono text-sm text-amber-300 uppercase"> + Supervisor Question + </span> + </div> + <div className="flex items-center gap-2"> + <button + onClick={() => handleGoToTask(question.taskId)} + className="px-2 py-1 font-mono text-xs text-amber-400 hover:text-amber-300 transition-colors" + title="Go to task" + > + View Task + </button> + <button + onClick={() => handleExpand(question.questionId)} + className="px-2 py-1 font-mono text-xs text-amber-400 border border-amber-500/30 hover:border-amber-400/50 transition-colors uppercase" + > + {expandedQuestion === question.questionId ? "Collapse" : "Answer"} + </button> + </div> + </div> + + {/* Question preview */} + <div className="px-4 py-3"> + {question.context && ( + <div className="text-xs text-[#8b949e] font-mono mb-1 uppercase"> + {question.context} + </div> + )} + <p className="text-sm text-[#dbe7ff] font-mono"> + {question.question} + </p> + </div> + + {/* Expanded answer section */} + {expandedQuestion === question.questionId && ( + <div className="px-4 pb-4 border-t border-amber-500/20 pt-3"> + {question.choices.length > 0 ? ( + // Choice buttons + <div className="space-y-2"> + <p className="text-xs text-[#8b949e] font-mono uppercase mb-2"> + Select an option: + </p> + {question.choices.map((choice, idx) => ( + <button + key={idx} + onClick={() => handleChoiceSelect(question, choice)} + disabled={submitting} + className="w-full px-3 py-2 text-left font-mono text-sm text-[#dbe7ff] bg-[#0a1628] border border-[#3f6fb3] hover:border-amber-400/50 hover:bg-amber-900/20 disabled:opacity-50 transition-colors" + > + {choice} + </button> + ))} + </div> + ) : ( + // Free-form text input + <div className="space-y-2"> + <textarea + value={response} + onChange={(e) => setResponse(e.target.value)} + placeholder="Type your response..." + rows={3} + className="w-full px-3 py-2 bg-[#0a1628] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-amber-400 resize-none" + disabled={submitting} + /> + <button + onClick={() => handleSubmit(question)} + disabled={submitting || !response.trim()} + className="w-full px-4 py-2 font-mono text-xs text-[#0a1628] bg-amber-500 hover:bg-amber-400 disabled:bg-amber-700 disabled:cursor-not-allowed transition-colors uppercase" + > + {submitting ? "Submitting..." : "Submit Response"} + </button> + </div> + )} + </div> + )} + </div> + ))} + </div> + ); +} diff --git a/makima/frontend/src/components/listen/ContractPickerModal.tsx b/makima/frontend/src/components/listen/ContractPickerModal.tsx new file mode 100644 index 0000000..961ccba --- /dev/null +++ b/makima/frontend/src/components/listen/ContractPickerModal.tsx @@ -0,0 +1,118 @@ +import { useEffect, useRef } from "react"; +import type { ContractOption } from "./ControlPanel"; + +interface ContractPickerModalProps { + isOpen: boolean; + onClose: () => void; + contracts: ContractOption[]; + selectedContractId: string | null; + onSelect: (contractId: string | null) => void; + loading?: boolean; +} + +export function ContractPickerModal({ + isOpen, + onClose, + contracts, + selectedContractId, + onSelect, + loading, +}: ContractPickerModalProps) { + const modalRef = useRef<HTMLDivElement>(null); + + useEffect(() => { + if (!isOpen) return; + + function handleKeyDown(e: KeyboardEvent) { + if (e.key === "Escape") { + onClose(); + } + } + + function handleClickOutside(e: MouseEvent) { + if (modalRef.current && !modalRef.current.contains(e.target as Node)) { + onClose(); + } + } + + document.addEventListener("keydown", handleKeyDown); + document.addEventListener("mousedown", handleClickOutside); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [isOpen, onClose]); + + if (!isOpen) return null; + + const handleSelect = (contractId: string | null) => { + onSelect(contractId); + onClose(); + }; + + return ( + <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"> + <div + ref={modalRef} + className="panel p-4 w-[300px] max-h-[400px] flex flex-col gap-3" + > + <div className="flex items-center justify-between"> + <h2 className="font-mono text-sm text-[#dbe7ff] uppercase tracking-wide"> + Select Contract + </h2> + <button + onClick={onClose} + className="font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors" + > + [X] + </button> + </div> + + <div className="flex-1 overflow-y-auto flex flex-col gap-1 min-h-0"> + {loading ? ( + <div className="font-mono text-xs text-[#9bc3ff] text-center py-4"> + Loading... + </div> + ) : ( + <> + <button + onClick={() => handleSelect(null)} + className={`w-full text-left px-3 py-2 font-mono text-xs border transition-colors ${ + selectedContractId === null + ? "bg-[#0f3c78]/50 border-[#3f6fb3] text-[#dbe7ff]" + : "bg-[#0d1b2d] border-[#0f3c78] text-[#9bc3ff] hover:border-[#3f6fb3] hover:text-[#dbe7ff]" + }`} + > + <span className="uppercase tracking-wide">Ephemeral</span> + <span className="block text-[10px] text-[#75aafc] mt-0.5"> + Transcript not saved + </span> + </button> + + {contracts.map((contract) => ( + <button + key={contract.id} + onClick={() => handleSelect(contract.id)} + className={`w-full text-left px-3 py-2 font-mono text-xs border transition-colors ${ + selectedContractId === contract.id + ? "bg-[#0f3c78]/50 border-[#3f6fb3] text-[#dbe7ff]" + : "bg-[#0d1b2d] border-[#0f3c78] text-[#9bc3ff] hover:border-[#3f6fb3] hover:text-[#dbe7ff]" + }`} + > + <span className="block truncate">{contract.name}</span> + </button> + ))} + + {contracts.length === 0 && ( + <div className="font-mono text-xs text-[#9bc3ff] text-center py-4"> + No contracts available + </div> + )} + </> + )} + </div> + </div> + </div> + ); +} diff --git a/makima/frontend/src/components/listen/ControlPanel.tsx b/makima/frontend/src/components/listen/ControlPanel.tsx index 35834d4..f0e5702 100644 --- a/makima/frontend/src/components/listen/ControlPanel.tsx +++ b/makima/frontend/src/components/listen/ControlPanel.tsx @@ -1,5 +1,7 @@ +import { useState } from "react"; import { Logo } from "../Logo"; import type { MicrophoneStatus } from "../../hooks/useMicrophone"; +import { ContractPickerModal } from "./ContractPickerModal"; export interface ContractOption { id: string; @@ -53,9 +55,12 @@ export function ControlPanel({ onContractChange, contractsLoading, }: ControlPanelProps) { + const [isModalOpen, setIsModalOpen] = useState(false); const statusText = getStatusText(isListening, micStatus); const isRequesting = micStatus === "requesting"; + const selectedContract = contracts.find((c) => c.id === selectedContractId); + return ( <div className="panel p-4 flex flex-col items-center justify-center gap-3"> {/* Logo button */} @@ -147,21 +152,24 @@ export function ControlPanel({ > New </button> - <select - value={selectedContractId || ""} - onChange={(e) => onContractChange(e.target.value || null)} + <button + onClick={() => setIsModalOpen(true)} disabled={isListening || contractsLoading} - className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#0f3c78] focus:border-[#3f6fb3] transition-colors disabled:opacity-50 disabled:cursor-not-allowed uppercase tracking-wide" - title={selectedContractId ? "Saving to selected contract" : "Transcript not saved"} + className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#0f3c78] hover:border-[#3f6fb3] transition-colors disabled:opacity-50 disabled:cursor-not-allowed uppercase tracking-wide" + title={selectedContract ? `Saving to: ${selectedContract.name}` : "Transcript not saved"} > - <option value="">Ephemeral Transcript</option> - {contracts.map((contract) => ( - <option key={contract.id} value={contract.id}> - {contract.name} - </option> - ))} - </select> + {selectedContract ? "Contract" : "Ephemeral"} + </button> </div> + + <ContractPickerModal + isOpen={isModalOpen} + onClose={() => setIsModalOpen(false)} + contracts={contracts} + selectedContractId={selectedContractId} + onSelect={onContractChange} + loading={contractsLoading} + /> </div> ); } diff --git a/makima/frontend/src/components/mesh/TaskDetail.tsx b/makima/frontend/src/components/mesh/TaskDetail.tsx index 967b1d1..8e853e7 100644 --- a/makima/frontend/src/components/mesh/TaskDetail.tsx +++ b/makima/frontend/src/components/mesh/TaskDetail.tsx @@ -144,6 +144,10 @@ export function TaskDetail({ const isTaskRunning = task.status === "running" || task.status === "initializing" || task.status === "starting"; // Check if task is in a terminal state (can be continued/reopened) const isTaskTerminal = task.status === "done" || task.status === "failed" || task.status === "merged"; + // Check if this is a supervisor task + const isSupervisor = task.isSupervisor === true; + // Show continue for supervisors (always) or terminal states for other tasks + const canContinue = isSupervisor || isTaskTerminal; // Calculate subtask statistics const subtaskStats = useMemo( @@ -356,7 +360,7 @@ export function TaskDetail({ )} </div> )} - {isTaskTerminal && ( + {canContinue && ( <button onClick={() => onContinue(task.id)} className="px-3 py-1 font-mono text-xs text-cyan-400 border border-cyan-400/30 hover:border-cyan-400/50 hover:bg-cyan-400/10 transition-colors uppercase flex items-center gap-1" |