Add non-blocking persistent contract completion questions (#14)

* [WIP] Heartbeat checkpoint - 2026-01-20 22:40:37 UTC

* Task completion checkpoint

4 files changed, 217 insertions, 24 deletions

diff --git a/makima/frontend/src/components/SupervisorQuestionNotification.tsx b/makima/frontend/src/components/SupervisorQuestionNotification.tsx
index 1457d86..b1cbacc 100644
--- a/makima/frontend/src/components/SupervisorQuestionNotification.tsx
+++ b/makima/frontend/src/components/SupervisorQuestionNotification.tsx
@@ -5,7 +5,12 @@ export function SupervisorQuestionNotification() {
   const navigate = useNavigate();
   const { notificationQuestions, dismissNotification } = useSupervisorQuestions();
 
-  if (notificationQuestions.length === 0) {
+  // Filter out contract_complete questions - they are displayed on the task page instead
+  const filteredQuestions = notificationQuestions.filter(
+    (q) => q.questionType !== "contract_complete"
+  );
+
+  if (filteredQuestions.length === 0) {
     return null;
   }
 
@@ -16,7 +21,7 @@ export function SupervisorQuestionNotification() {
 
   return (
     <div className="fixed bottom-4 right-4 z-50 max-w-md space-y-2">
-      {notificationQuestions.map((question) => (
+      {filteredQuestions.map((question) => (
         <div
           key={question.questionId}
           className="bg-[#0d1b2d] border border-amber-500/50 rounded-lg shadow-lg overflow-hidden"
diff --git a/makima/frontend/src/components/mesh/ContractCompleteQuestion.tsx b/makima/frontend/src/components/mesh/ContractCompleteQuestion.tsx
new file mode 100644
index 0000000..d4ef618
--- /dev/null
+++ b/makima/frontend/src/components/mesh/ContractCompleteQuestion.tsx
@@ -0,0 +1,165 @@
+import { useState } from "react";
+import type { PendingQuestion } from "../../lib/api";
+
+interface ContractCompleteQuestionProps {
+  question: PendingQuestion;
+  onAnswer: (questionId: string, response: string) => Promise<void>;
+}
+
+/**
+ * Component for displaying contract_complete type questions prominently on the task page.
+ * These questions persist until answered and are not shown as floating notifications.
+ */
+export function ContractCompleteQuestion({
+  question,
+  onAnswer,
+}: ContractCompleteQuestionProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const [minimized, setMinimized] = useState(false);
+  const [customInput, setCustomInput] = useState("");
+  const [showCustom, setShowCustom] = useState(false);
+
+  const handleAnswer = async (response: string) => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      await onAnswer(question.questionId, response);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCustomSubmit = async () => {
+    if (!customInput.trim() || submitting) return;
+    await handleAnswer(customInput.trim());
+    setCustomInput("");
+    setShowCustom(false);
+  };
+
+  // Default choices for contract completion questions
+  const defaultChoices =
+    question.choices.length > 0
+      ? question.choices
+      : ["Yes, contract is complete", "No, more work needed"];
+
+  if (minimized) {
+    return (
+      <div className="fixed bottom-4 left-4 z-40">
+        <button
+          onClick={() => setMinimized(false)}
+          className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-500 text-white font-mono text-sm rounded-lg shadow-lg transition-colors"
+        >
+          <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
+          Contract Review Pending
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gradient-to-r from-green-900/40 to-emerald-900/40 border-2 border-green-500/60 rounded-lg shadow-xl my-4 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-green-900/50 border-b border-green-500/30">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 flex items-center justify-center bg-green-500/20 rounded-full">
+            <span className="text-green-400 text-xl">?</span>
+          </div>
+          <div>
+            <h3 className="font-mono text-sm text-green-300 uppercase tracking-wide">
+              Contract Completion Review
+            </h3>
+            <p className="text-xs text-green-400/60">
+              Please review and respond
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={() => setMinimized(true)}
+          className="px-2 py-1 text-xs font-mono text-green-400/70 hover:text-green-300 border border-green-500/30 hover:border-green-400/50 rounded transition-colors"
+          title="Minimize (question will remain pending)"
+        >
+          Minimize
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="p-4 space-y-4">
+        {/* Context */}
+        {question.context && (
+          <div className="text-xs text-green-300/70 font-mono uppercase tracking-wide">
+            {question.context}
+          </div>
+        )}
+
+        {/* Question */}
+        <div className="text-green-100 font-mono text-base leading-relaxed">
+          {question.question}
+        </div>
+
+        {/* Choices */}
+        <div className="flex flex-wrap gap-3 pt-2">
+          {defaultChoices.map((choice, idx) => (
+            <button
+              key={idx}
+              onClick={() => handleAnswer(choice)}
+              disabled={submitting}
+              className={`px-4 py-2.5 font-mono text-sm border rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
+                idx === 0
+                  ? "bg-green-500/20 border-green-400/60 hover:bg-green-500/30 text-green-100 hover:border-green-400"
+                  : "bg-amber-500/20 border-amber-400/60 hover:bg-amber-500/30 text-amber-100 hover:border-amber-400"
+              }`}
+            >
+              {submitting ? "..." : choice}
+            </button>
+          ))}
+        </div>
+
+        {/* Custom input option */}
+        {!showCustom ? (
+          <button
+            onClick={() => setShowCustom(true)}
+            className="text-xs text-green-400/70 hover:text-green-300 font-mono transition-colors"
+          >
+            + Provide custom response
+          </button>
+        ) : (
+          <div className="flex gap-2 pt-2">
+            <input
+              type="text"
+              value={customInput}
+              onChange={(e) => setCustomInput(e.target.value)}
+              placeholder="Type your response..."
+              disabled={submitting}
+              className="flex-1 px-3 py-2 bg-[#0a1525] border border-green-500/30 text-green-100 text-sm font-mono rounded focus:outline-none focus:border-green-400"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && customInput.trim()) {
+                  handleCustomSubmit();
+                }
+                if (e.key === "Escape") {
+                  setShowCustom(false);
+                  setCustomInput("");
+                }
+              }}
+            />
+            <button
+              onClick={handleCustomSubmit}
+              disabled={submitting || !customInput.trim()}
+              className="px-4 py-2 bg-green-500 text-black text-sm font-medium rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors hover:bg-green-400"
+            >
+              {submitting ? "..." : "Submit"}
+            </button>
+            <button
+              onClick={() => {
+                setShowCustom(false);
+                setCustomInput("");
+              }}
+              className="px-2 py-2 text-green-400/70 hover:text-green-300 text-sm font-mono"
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts
index 78e52cd..14ec9f2 100644
--- a/makima/frontend/src/lib/api.ts
+++ b/makima/frontend/src/lib/api.ts
@@ -1948,8 +1948,8 @@ export interface PendingQuestion {
   createdAt: string;
   /** Whether multiple choices can be selected */
   multiSelect?: boolean;
-  /** Question type - "general" for regular questions, "phase_confirmation" for phase transitions */
-  questionType?: "general" | "phase_confirmation";
+  /** Question type - "general" for regular questions, "phase_confirmation" for phase transitions, "contract_complete" for contract completion */
+  questionType?: "general" | "phase_confirmation" | "contract_complete";
   /** Phase confirmation specific data (when questionType is "phase_confirmation") */
   phaseConfirmation?: {
     currentPhase: ContractPhase;
diff --git a/makima/frontend/src/routes/mesh.tsx b/makima/frontend/src/routes/mesh.tsx
index a8d3574..142cc54 100644
--- a/makima/frontend/src/routes/mesh.tsx
+++ b/makima/frontend/src/routes/mesh.tsx
@@ -5,6 +5,7 @@ import { TaskList } from "../components/mesh/TaskList";
 import { TaskDetail } from "../components/mesh/TaskDetail";
 import { TaskOutput } from "../components/mesh/TaskOutput";
 import { UnifiedMeshChatInput } from "../components/mesh/UnifiedMeshChatInput";
+import { ContractCompleteQuestion } from "../components/mesh/ContractCompleteQuestion";
 import { useTasks } from "../hooks/useTasks";
 import { useTaskSubscription, type TaskUpdateEvent, type TaskOutputEvent } from "../hooks/useTaskSubscription";
 import type { TaskWithSubtasks, MeshChatContext, ContractSummary, ContractWithRelations, DaemonDirectory, TaskSummary } from "../lib/api";
@@ -89,6 +90,14 @@ export default function MeshPage() {
     [pendingQuestions]
   );
 
+  // Filter contract_complete questions for the current task
+  const contractCompleteQuestionsForTask = useMemo(
+    () => pendingQuestions.filter(
+      (q) => q.questionType === "contract_complete" && q.taskId === id
+    ),
+    [pendingQuestions, id]
+  );
+
   // Handler for answering supervisor questions
   const handleAnswerQuestion = useCallback(async (questionId: string, response: string) => {
     await submitAnswer(questionId, response);
@@ -751,27 +760,41 @@ export default function MeshPage() {
                 {/* Output panel */}
                 {(viewMode === "split" || viewMode === "output") && (
                   <div
-                    className="panel min-h-0 overflow-hidden flex-1"
+                    className="panel min-h-0 overflow-hidden flex-1 flex flex-col"
                   >
-                    <TaskOutput
-                      entries={taskOutputEntries}
-                      isStreaming={isStreaming || taskDetail.status === "running"}
-                      viewingSubtaskName={viewingSubtaskName}
-                      onClearSubtaskView={viewingSubtaskId ? () => {
-                        setViewingSubtaskId(null);
-                        setViewingSubtaskName(null);
-                      } : undefined}
-                      onClear={() => {
-                        setTaskOutputEntries([]);
-                        if (activeOutputTaskId) {
-                          clearPersistedOutput(activeOutputTaskId);
-                        }
-                      }}
-                      taskId={activeOutputTaskId}
-                      onUserInput={handleUserInput}
-                      pendingQuestionIds={pendingQuestionIds}
-                      onAnswerQuestion={handleAnswerQuestion}
-                    />
+                    {/* Contract complete questions - shown prominently at top */}
+                    {contractCompleteQuestionsForTask.length > 0 && (
+                      <div className="shrink-0 px-3 pt-3">
+                        {contractCompleteQuestionsForTask.map((question) => (
+                          <ContractCompleteQuestion
+                            key={question.questionId}
+                            question={question}
+                            onAnswer={handleAnswerQuestion}
+                          />
+                        ))}
+                      </div>
+                    )}
+                    <div className="flex-1 min-h-0 overflow-hidden">
+                      <TaskOutput
+                        entries={taskOutputEntries}
+                        isStreaming={isStreaming || taskDetail.status === "running"}
+                        viewingSubtaskName={viewingSubtaskName}
+                        onClearSubtaskView={viewingSubtaskId ? () => {
+                          setViewingSubtaskId(null);
+                          setViewingSubtaskName(null);
+                        } : undefined}
+                        onClear={() => {
+                          setTaskOutputEntries([]);
+                          if (activeOutputTaskId) {
+                            clearPersistedOutput(activeOutputTaskId);
+                          }
+                        }}
+                        taskId={activeOutputTaskId}
+                        onUserInput={handleUserInput}
+                        pendingQuestionIds={pendingQuestionIds}
+                        onAnswerQuestion={handleAnswerQuestion}
+                      />
+                    </div>
                   </div>
                 )}
               </div>