From 900472091e4d9b4000508b0d266d786ef41107bd Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 17 Jan 2026 19:47:35 +0000
Subject: Add phase guard toggle for contract phase confirmation (#2)

* Add phase_guard field to Contract model and database

This adds a new boolean field to control whether the supervisor should
wait for user confirmation before progressing to the next phase. When
enabled, users can review and potentially amend phase outputs (like
plans, requirements docs) before the contract continues.

Changes:
- Add migration for phase_guard column (defaults to false)
- Add phase_guard to Contract, CreateContractRequest, and
  UpdateContractRequest structs
- Update create_contract_for_owner and update_contract_for_owner
  repository functions to handle phase_guard
- Update all CreateContractRequest instantiations with phase_guard field

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: Add phase_guard for contract phase transitions

Implement phase_guard logic in the advance_phase tool. When a contract
has phase_guard enabled, the phase transition now:

1. Asks for user confirmation before advancing
2. Allows users to request changes to phase deliverables
3. Passes feedback to the task without advancing if changes requested

Changes:
- Add phase_guard field to Contract model and CreateContractRequest
- Add PhaseTransitionRequest, PhaseFileInfo, PhaseTaskInfo structs
- Update ChangePhaseRequest with confirmed and feedback fields
- Update ContractToolRequest::AdvancePhase with confirmed/feedback
- Modify advance_phase handling in contract_chat.rs with phase_guard logic
- Update change_phase endpoint in contracts.rs with phase_guard support
- Add database migration for phase_guard column

When phase_guard=false: Phase advances immediately (current behavior)
When phase_guard=true: Returns pending_confirmation status with deliverables
If user provides feedback: Returns feedback to task, doesn't advance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(frontend): Add UI for phase transition confirmation requests

When phase_guard is enabled and a supervisor tries to advance the contract
phase, users now see a confirmation modal with:
- Current and proposed next phase visualization
- Phase deliverables checklist (if available)
- Summary of the phase work
- Options to "Approve & Advance" or "Request Changes" with feedback

Components added:
- PhaseConfirmationModal: Full modal dialog for phase confirmations
- PhaseConfirmationInline: Inline variant for task output view
- PhaseConfirmationNotification: Global notification wrapper
- PhaseConfirmationToast: Alternative toast-style notification

Integration:
- Added phase_confirmation message type to TaskOutput renderer
- Extended PendingQuestion API type with phase confirmation data
- Integrated notification into main app layout

The UI uses the existing supervisor question infrastructure (polling via
/api/v1/mesh/questions) and responds with APPROVE or CHANGES_REQUESTED
prefixed feedback.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(frontend): Add Phase Guard toggle to AutopilotPanel

Added the phase_guard toggle to the AutopilotPanel component, which allows
users to enable/disable requiring confirmation before phase transitions.

Changes:
- Added phaseGuard and autonomousLoop fields to Contract interface in api.ts
- Added phaseGuard field to UpdateContractRequest in api.ts
- Added Phase Guard toggle UI in AutopilotPanel with similar styling to master
- Toggle shows an 'active' badge when enabled
- Connected toggle to contract update API

The toggle appears below the autopilot control buttons and allows users to
require confirmation before the supervisor advances to the next phase.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/PhaseConfirmationNotification.tsx   | 141 +++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 makima/frontend/src/components/PhaseConfirmationNotification.tsx

(limited to 'makima/frontend/src/components/PhaseConfirmationNotification.tsx')

diff --git a/makima/frontend/src/components/PhaseConfirmationNotification.tsx b/makima/frontend/src/components/PhaseConfirmationNotification.tsx
new file mode 100644
index 0000000..516211f
--- /dev/null
+++ b/makima/frontend/src/components/PhaseConfirmationNotification.tsx
@@ -0,0 +1,141 @@
+import { useNavigate } from "react-router";
+import { useSupervisorQuestions } from "../contexts/SupervisorQuestionsContext";
+import { PhaseConfirmationModal, type PhaseConfirmationData } from "./contracts/PhaseConfirmationModal";
+import type { PendingQuestion } from "../lib/api";
+
+/**
+ * Notification component for phase confirmation requests.
+ * Shows a modal when there are pending phase_confirmation type questions.
+ * Uses the same question infrastructure as supervisor questions.
+ */
+export function PhaseConfirmationNotification() {
+  const { notificationQuestions, submitAnswer, dismissNotification } =
+    useSupervisorQuestions();
+
+  // Filter for phase_confirmation type questions
+  const phaseConfirmationQuestions = notificationQuestions.filter(
+    (q) => q.questionType === "phase_confirmation"
+  );
+
+  if (phaseConfirmationQuestions.length === 0) {
+    return null;
+  }
+
+  // Show the first phase confirmation question as a modal
+  const question = phaseConfirmationQuestions[0];
+
+  // Build phase confirmation data from the question
+  const data: PhaseConfirmationData = {
+    questionId: question.questionId,
+    contractId: question.contractId,
+    contractName: question.phaseConfirmation?.contractName,
+    currentPhase: question.phaseConfirmation?.currentPhase || "research",
+    nextPhase: question.phaseConfirmation?.nextPhase || "specify",
+    summary: question.phaseConfirmation?.summary,
+    deliverables: question.phaseConfirmation?.deliverables,
+  };
+
+  const handleApprove = async (questionId: string) => {
+    const success = await submitAnswer(questionId, "APPROVE");
+    if (success) {
+      dismissNotification(questionId);
+    }
+  };
+
+  const handleRequestChanges = async (questionId: string, feedback: string) => {
+    const success = await submitAnswer(
+      questionId,
+      `CHANGES_REQUESTED: ${feedback}`
+    );
+    if (success) {
+      dismissNotification(questionId);
+    }
+  };
+
+  const handleDismiss = () => {
+    // Dismiss to notification (user can still respond via task output)
+    dismissNotification(question.questionId);
+  };
+
+  return (
+    <PhaseConfirmationModal
+      data={data}
+      onApprove={handleApprove}
+      onRequestChanges={handleRequestChanges}
+      onDismiss={handleDismiss}
+    />
+  );
+}
+
+/**
+ * Alternative: Notification toast-style for phase confirmations
+ * Shows as a small notification in the corner (like regular supervisor questions)
+ */
+export function PhaseConfirmationToast() {
+  const navigate = useNavigate();
+  const { notificationQuestions, dismissNotification } = useSupervisorQuestions();
+
+  // Filter for phase_confirmation type questions
+  const phaseConfirmationQuestions = notificationQuestions.filter(
+    (q) => q.questionType === "phase_confirmation"
+  );
+
+  if (phaseConfirmationQuestions.length === 0) {
+    return null;
+  }
+
+  const handleGoToTask = (question: PendingQuestion) => {
+    dismissNotification(question.questionId);
+    navigate(`/mesh/${question.taskId}`);
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 max-w-md space-y-2">
+      {phaseConfirmationQuestions.map((question) => (
+        <div
+          key={question.questionId}
+          className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.5)] rounded-lg shadow-lg overflow-hidden"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 bg-[rgba(117,170,252,0.1)]">
+            <div className="flex items-center gap-2">
+              <span className="text-[#75aafc] text-lg">?</span>
+              <span className="font-mono text-sm text-[#9bc3ff] uppercase">
+                Phase Transition
+              </span>
+            </div>
+            <button
+              onClick={() => handleGoToTask(question)}
+              className="px-3 py-1 font-mono text-xs text-[#75aafc] border border-[rgba(117,170,252,0.3)] hover:border-[rgba(117,170,252,0.5)] hover:bg-[rgba(117,170,252,0.1)] transition-colors uppercase"
+            >
+              Review
+            </button>
+          </div>
+
+          {/* Content preview */}
+          <div className="px-4 py-3">
+            {question.phaseConfirmation && (
+              <div className="flex items-center gap-2 mb-2">
+                <span className="font-mono text-xs text-purple-400">
+                  {question.phaseConfirmation.currentPhase}
+                </span>
+                <span className="text-[#555] font-mono text-xs">&rarr;</span>
+                <span className="font-mono text-xs text-green-400">
+                  {question.phaseConfirmation.nextPhase}
+                </span>
+              </div>
+            )}
+            <p className="text-sm text-[#dbe7ff] font-mono line-clamp-2">
+              {question.question}
+            </p>
+            {question.phaseConfirmation?.contractName && (
+              <p className="text-xs text-[#555] font-mono mt-1">
+                Contract: {question.phaseConfirmation.contractName}
+              </p>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
-- 
cgit v1.2.3

