From 88a4f15ce1310f8ee8693835be14aa5280233f17 Mon Sep 17 00:00:00 2001 From: soryu Date: Thu, 5 Feb 2026 23:42:48 +0000 Subject: Add directive-first chain system redesign Redesigns the chain system with a directive-first architecture where Directive is the top-level entity (the "why/what") and Chains are generated execution plans (the "how") that can be dynamically modified. Backend: - Add database migration for directive system tables - Add Directive, DirectiveChain, ChainStep, DirectiveEvent models - Add DirectiveVerifier and DirectiveApproval models - Add orchestration module with engine, planner, and verifier - Add comprehensive API handlers for directives - Add daemon CLI commands for directive management - Add directive skill documentation - Integrate contract completion with directive engine - Add SSE endpoint for real-time directive events Frontend: - Add directives route with split-view layout - Add 6-tab detail view (Overview, Chain, Events, Evaluations, Approvals, Verifiers) - Add React Flow DAG visualization for chain steps - Add SSE subscription hook for real-time event updates - Add useDirectives and useDirectiveEventSubscription hooks - Add directive types and API functions Fixes: - Fix test failures in ws/protocol, task_output, completion_gate, patch - Fix word boundary matching in looks_like_task() - Fix parse_last() to find actual last completion gate - Fix create_export_patch when merge-base equals HEAD - Clean up clippy warnings in new code Co-Authored-By: Claude Opus 4.5 --- makima/frontend/src/components/NavStrip.tsx | 1 + makima/frontend/src/hooks/useDirectives.ts | 298 +++++++ makima/frontend/src/lib/api.ts | 758 ++++++++++++++++ makima/frontend/src/main.tsx | 17 + makima/frontend/src/routes/directives.tsx | 1254 +++++++++++++++++++++++++++ 5 files changed, 2328 insertions(+) create mode 100644 makima/frontend/src/hooks/useDirectives.ts create mode 100644 makima/frontend/src/routes/directives.tsx (limited to 'makima/frontend/src') diff --git a/makima/frontend/src/components/NavStrip.tsx b/makima/frontend/src/components/NavStrip.tsx index 4f6cf32..ece07e4 100644 --- a/makima/frontend/src/components/NavStrip.tsx +++ b/makima/frontend/src/components/NavStrip.tsx @@ -10,6 +10,7 @@ interface NavLink { const NAV_LINKS: NavLink[] = [ { label: "Listen", href: "/listen" }, + { label: "Directives", href: "/directives", requiresAuth: true }, { label: "Chains", href: "/chains", requiresAuth: true }, { label: "Contracts", href: "/contracts", requiresAuth: true }, { label: "Board", href: "/workflow", requiresAuth: true }, diff --git a/makima/frontend/src/hooks/useDirectives.ts b/makima/frontend/src/hooks/useDirectives.ts new file mode 100644 index 0000000..6e1654f --- /dev/null +++ b/makima/frontend/src/hooks/useDirectives.ts @@ -0,0 +1,298 @@ +import { useState, useCallback, useEffect, useRef } from "react"; +import { + listDirectives, + getDirective, + createDirective, + updateDirective, + archiveDirective, + startDirective, + pauseDirective, + resumeDirective, + stopDirective, + getDirectiveGraph, + subscribeToDirectiveEvents, + type DirectiveSummary, + type DirectiveWithProgress, + type DirectiveGraphResponse, + type DirectiveStatus, + type DirectiveEvent, + type CreateDirectiveRequest, + type UpdateDirectiveRequest, + type StartDirectiveResponse, +} from "../lib/api"; + +interface UseDirectivesResult { + directives: DirectiveSummary[]; + loading: boolean; + error: string | null; + refresh: () => Promise; + createNewDirective: (req: CreateDirectiveRequest) => Promise; + updateExistingDirective: ( + directiveId: string, + req: UpdateDirectiveRequest + ) => Promise; + archiveExistingDirective: (directiveId: string) => Promise; + getDirectiveById: (directiveId: string) => Promise; + getGraph: (directiveId: string) => Promise; + start: (directiveId: string) => Promise; + pause: (directiveId: string) => Promise; + resume: (directiveId: string) => Promise; + stop: (directiveId: string) => Promise; +} + +export function useDirectives(statusFilter?: DirectiveStatus): UseDirectivesResult { + const [directives, setDirectives] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const fetchDirectives = useCallback(async () => { + setLoading(true); + setError(null); + try { + const response = await listDirectives(statusFilter); + setDirectives(response.directives); + } catch (err) { + console.error("Failed to fetch directives:", err); + setError(err instanceof Error ? err.message : "Failed to fetch directives"); + } finally { + setLoading(false); + } + }, [statusFilter]); + + useEffect(() => { + fetchDirectives(); + }, [fetchDirectives]); + + const createNewDirective = useCallback( + async (req: CreateDirectiveRequest): Promise => { + try { + const directive = await createDirective(req); + // Refresh the list + await fetchDirectives(); + // Return the full directive with progress + return await getDirective(directive.id); + } catch (err) { + console.error("Failed to create directive:", err); + setError(err instanceof Error ? err.message : "Failed to create directive"); + return null; + } + }, + [fetchDirectives] + ); + + const updateExistingDirective = useCallback( + async ( + directiveId: string, + req: UpdateDirectiveRequest + ): Promise => { + try { + await updateDirective(directiveId, req); + // Refresh the list + await fetchDirectives(); + // Return the updated directive + return await getDirective(directiveId); + } catch (err) { + console.error("Failed to update directive:", err); + setError(err instanceof Error ? err.message : "Failed to update directive"); + return null; + } + }, + [fetchDirectives] + ); + + const archiveExistingDirective = useCallback( + async (directiveId: string): Promise => { + try { + await archiveDirective(directiveId); + // Refresh the list + await fetchDirectives(); + return true; + } catch (err) { + console.error("Failed to archive directive:", err); + setError(err instanceof Error ? err.message : "Failed to archive directive"); + return false; + } + }, + [fetchDirectives] + ); + + const getDirectiveById = useCallback( + async (directiveId: string): Promise => { + try { + return await getDirective(directiveId); + } catch (err) { + console.error("Failed to get directive:", err); + setError(err instanceof Error ? err.message : "Failed to get directive"); + return null; + } + }, + [] + ); + + const getGraph = useCallback( + async (directiveId: string): Promise => { + try { + return await getDirectiveGraph(directiveId); + } catch (err) { + console.error("Failed to get directive graph:", err); + setError(err instanceof Error ? err.message : "Failed to get directive graph"); + return null; + } + }, + [] + ); + + const start = useCallback( + async (directiveId: string): Promise => { + try { + const response = await startDirective(directiveId); + await fetchDirectives(); + return response; + } catch (err) { + console.error("Failed to start directive:", err); + setError(err instanceof Error ? err.message : "Failed to start directive"); + return null; + } + }, + [fetchDirectives] + ); + + const pause = useCallback( + async (directiveId: string): Promise => { + try { + await pauseDirective(directiveId); + await fetchDirectives(); + return true; + } catch (err) { + console.error("Failed to pause directive:", err); + setError(err instanceof Error ? err.message : "Failed to pause directive"); + return false; + } + }, + [fetchDirectives] + ); + + const resume = useCallback( + async (directiveId: string): Promise => { + try { + await resumeDirective(directiveId); + await fetchDirectives(); + return true; + } catch (err) { + console.error("Failed to resume directive:", err); + setError(err instanceof Error ? err.message : "Failed to resume directive"); + return false; + } + }, + [fetchDirectives] + ); + + const stop = useCallback( + async (directiveId: string): Promise => { + try { + await stopDirective(directiveId); + await fetchDirectives(); + return true; + } catch (err) { + console.error("Failed to stop directive:", err); + setError(err instanceof Error ? err.message : "Failed to stop directive"); + return false; + } + }, + [fetchDirectives] + ); + + return { + directives, + loading, + error, + refresh: fetchDirectives, + createNewDirective, + updateExistingDirective, + archiveExistingDirective, + getDirectiveById, + getGraph, + start, + pause, + resume, + stop, + }; +} + +/** Hook for subscribing to real-time directive events via SSE */ +export function useDirectiveEventSubscription( + directiveId: string | null, + onEvent?: (event: DirectiveEvent) => void +): { + events: DirectiveEvent[]; + isConnected: boolean; + error: string | null; +} { + const [events, setEvents] = useState([]); + const [isConnected, setIsConnected] = useState(false); + const [error, setError] = useState(null); + const cleanupRef = useRef<(() => void) | null>(null); + + useEffect(() => { + // Clean up any existing subscription + if (cleanupRef.current) { + cleanupRef.current(); + cleanupRef.current = null; + } + + if (!directiveId) { + setIsConnected(false); + setEvents([]); + return; + } + + // Subscribe to events + let mounted = true; + + const setupSubscription = async () => { + try { + const cleanup = await subscribeToDirectiveEvents( + directiveId, + (event) => { + if (mounted) { + setEvents((prev) => [...prev, event]); + onEvent?.(event); + } + }, + (err) => { + if (mounted) { + setError(err.message); + setIsConnected(false); + } + } + ); + + if (mounted) { + cleanupRef.current = cleanup; + setIsConnected(true); + setError(null); + } else { + // Component unmounted during setup, clean up immediately + cleanup(); + } + } catch (err) { + if (mounted) { + setError(err instanceof Error ? err.message : "Failed to subscribe to events"); + setIsConnected(false); + } + } + }; + + setupSubscription(); + + return () => { + mounted = false; + if (cleanupRef.current) { + cleanupRef.current(); + cleanupRef.current = null; + } + }; + }, [directiveId, onEvent]); + + return { events, isConnected, error }; +} diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts index 2f4ee62..80a43eb 100644 --- a/makima/frontend/src/lib/api.ts +++ b/makima/frontend/src/lib/api.ts @@ -3527,3 +3527,761 @@ export async function setChainRepositoryPrimary( } return res.json(); } + +// ============================================================================= +// Directive Types and API +// ============================================================================= + +/** Directive status */ +export type DirectiveStatus = + | "draft" + | "planning" + | "active" + | "paused" + | "completed" + | "archived" + | "failed"; + +/** Autonomy level */ +export type AutonomyLevel = "full_auto" | "guardrails" | "manual"; + +/** Confidence level (traffic light) */ +export type ConfidenceLevel = "green" | "yellow" | "red"; + +/** Step status */ +export type StepStatus = + | "pending" + | "ready" + | "running" + | "evaluating" + | "passed" + | "failed" + | "rework" + | "skipped" + | "blocked"; + +/** Evaluation type */ +export type EvaluationType = "programmatic" | "llm" | "composite" | "manual"; + +/** Directive summary for list view */ +export interface DirectiveSummary { + id: string; + title: string; + goal: string; + status: DirectiveStatus; + autonomyLevel: AutonomyLevel; + repositoryUrl: string | null; + currentChainId: string | null; + currentChainGeneration: number | null; + totalSteps: number; + completedSteps: number; + failedSteps: number; + currentConfidence: number | null; + totalCostUsd: number; + createdAt: string; + updatedAt: string; +} + +/** Full directive */ +export interface Directive { + id: string; + ownerId: string; + title: string; + goal: string; + status: DirectiveStatus; + autonomyLevel: AutonomyLevel; + repositoryUrl: string | null; + localPath: string | null; + requirements: unknown | null; + acceptanceCriteria: unknown | null; + constraints: unknown | null; + confidenceThresholdGreen: number; + confidenceThresholdYellow: number; + maxReworkCycles: number; + maxTotalCostUsd: number | null; + maxWallTimeMinutes: number | null; + maxChainRegenerations: number; + totalCostUsd: number; + currentChainId: string | null; + version: number; + createdAt: string; + updatedAt: string; + startedAt: string | null; + completedAt: string | null; +} + +/** Directive chain */ +export interface DirectiveChain { + id: string; + directiveId: string; + generation: number; + name: string; + description: string | null; + rationale: string | null; + planningModel: string | null; + status: string; + totalSteps: number; + completedSteps: number; + failedSteps: number; + currentConfidence: number | null; + startedAt: string | null; + completedAt: string | null; + version: number; + createdAt: string; + updatedAt: string; +} + +/** Chain step */ +export interface ChainStep { + id: string; + chainId: string; + name: string; + description: string | null; + stepType: string; + contractType: string; + initialPhase: string | null; + taskPlan: string | null; + phases: string[]; + dependsOn: string[]; + parallelGroup: string | null; + requirementIds: string[]; + acceptanceCriteriaIds: string[]; + verifierConfig: unknown; + status: StepStatus; + contractId: string | null; + supervisorTaskId: string | null; + confidenceScore: number | null; + confidenceLevel: ConfidenceLevel | null; + evaluationCount: number; + reworkCount: number; + lastEvaluationId: string | null; + editorX: number | null; + editorY: number | null; + startedAt: string | null; + completedAt: string | null; + createdAt: string; + updatedAt: string; +} + +/** Directive with progress info */ +export interface DirectiveWithProgress extends Directive { + chain: DirectiveChain | null; + steps: ChainStep[]; + recentEvents: DirectiveEvent[]; + pendingApprovals: DirectiveApproval[]; +} + +/** Directive evaluation */ +export interface DirectiveEvaluation { + id: string; + directiveId: string; + chainId: string | null; + stepId: string | null; + evaluationType: EvaluationType; + passed: boolean; + overallScore: number; + confidenceLevel: ConfidenceLevel; + programmaticResults: unknown | null; + llmResults: unknown | null; + compositeBreakdown: unknown | null; + feedback: string | null; + reworkInstructions: string | null; + verifierIds: string[]; + evaluatedBy: string | null; + createdAt: string; +} + +/** Directive event */ +export interface DirectiveEvent { + id: string; + directiveId: string; + chainId: string | null; + stepId: string | null; + eventType: string; + severity: string; + eventData: unknown | null; + actorType: string; + actorId: string | null; + createdAt: string; +} + +/** Directive approval */ +export interface DirectiveApproval { + id: string; + directiveId: string; + chainId: string | null; + stepId: string | null; + approvalType: string; + description: string; + context: unknown | null; + urgency: string; + status: string; + requestedAt: string; + resolvedAt: string | null; + resolvedBy: string | null; + response: string | null; +} + +/** Directive verifier */ +export interface DirectiveVerifier { + id: string; + directiveId: string; + name: string; + verifierType: string; + command: string | null; + workingDirectory: string | null; + timeoutSeconds: number; + environment: unknown; + autoDetect: boolean; + detectFiles: string[]; + weight: number; + required: boolean; + enabled: boolean; + lastRunAt: string | null; + lastResult: unknown | null; + createdAt: string; + updatedAt: string; +} + +/** Directive graph node */ +export interface DirectiveGraphNode { + id: string; + name: string; + stepType: string; + status: StepStatus; + confidenceScore: number | null; + confidenceLevel: ConfidenceLevel | null; + contractId: string | null; + editorX: number | null; + editorY: number | null; +} + +/** Directive graph edge */ +export interface DirectiveGraphEdge { + source: string; + target: string; +} + +/** Directive graph response */ +export interface DirectiveGraphResponse { + chainId: string; + directiveId: string; + nodes: DirectiveGraphNode[]; + edges: DirectiveGraphEdge[]; +} + +/** Create directive request */ +export interface CreateDirectiveRequest { + goal: string; + repositoryUrl?: string; + localPath?: string; + autonomyLevel?: AutonomyLevel; + confidenceThresholdGreen?: number; + confidenceThresholdYellow?: number; + maxReworkCycles?: number; + maxTotalCostUsd?: number; + maxWallTimeMinutes?: number; +} + +/** Update directive request */ +export interface UpdateDirectiveRequest { + title?: string; + goal?: string; + requirements?: unknown; + acceptanceCriteria?: unknown; + constraints?: unknown; + autonomyLevel?: AutonomyLevel; + confidenceThresholdGreen?: number; + confidenceThresholdYellow?: number; + maxReworkCycles?: number; + maxTotalCostUsd?: number; + maxWallTimeMinutes?: number; + version?: number; +} + +/** Add step request */ +export interface AddStepRequest { + name: string; + description?: string; + stepType?: string; + contractType?: string; + initialPhase?: string; + taskPlan?: string; + phases?: string[]; + dependsOn?: string[]; + parallelGroup?: string; + requirementIds?: string[]; + acceptanceCriteriaIds?: string[]; + verifierConfig?: unknown; + editorX?: number; + editorY?: number; +} + +/** Update step request */ +export interface UpdateStepRequest { + name?: string; + description?: string; + initialPhase?: string; + taskPlan?: string; + phases?: string[]; + dependsOn?: string[]; + parallelGroup?: string; + requirementIds?: string[]; + acceptanceCriteriaIds?: string[]; + verifierConfig?: unknown; + editorX?: number; + editorY?: number; +} + +/** Create verifier request */ +export interface CreateVerifierRequest { + name: string; + verifierType: string; + command?: string; + workingDirectory?: string; + timeoutSeconds?: number; + weight?: number; + required?: boolean; + enabled?: boolean; +} + +/** Update verifier request */ +export interface UpdateVerifierRequest { + command?: string; + weight?: number; + required?: boolean; + enabled?: boolean; +} + +/** Approval action request */ +export interface ApprovalActionRequest { + response?: string; +} + +/** Start directive response */ +export interface StartDirectiveResponse { + directiveId: string; + chainId: string; + chainGeneration: number; + steps: ChainStep[]; + status: string; +} + +/** Directive list response */ +export interface DirectiveListResponse { + directives: DirectiveSummary[]; + total: number; +} + +// ============================================================================= +// Directive API Functions +// ============================================================================= + +/** List directives */ +export async function listDirectives( + status?: DirectiveStatus, + limit = 50, + offset = 0 +): Promise { + const params = new URLSearchParams(); + if (status) params.set("status", status); + params.set("limit", String(limit)); + params.set("offset", String(offset)); + + const res = await authFetch(`${API_BASE}/api/v1/directives?${params}`); + if (!res.ok) { + throw new Error(`Failed to list directives: ${res.statusText}`); + } + return res.json(); +} + +/** Get directive by ID */ +export async function getDirective(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}`); + if (!res.ok) { + throw new Error(`Failed to get directive: ${res.statusText}`); + } + return res.json(); +} + +/** Create a new directive */ +export async function createDirective(req: CreateDirectiveRequest): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives`, { + method: "POST", + body: JSON.stringify(req), + }); + if (!res.ok) { + const errorText = await res.text(); + throw new Error(`Failed to create directive: ${errorText || res.statusText}`); + } + return res.json(); +} + +/** Update directive */ +export async function updateDirective( + directiveId: string, + req: UpdateDirectiveRequest +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}`, { + method: "PUT", + body: JSON.stringify(req), + }); + if (!res.ok) { + throw new Error(`Failed to update directive: ${res.statusText}`); + } + return res.json(); +} + +/** Archive directive */ +export async function archiveDirective(directiveId: string): Promise<{ archived: boolean }> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}`, { + method: "DELETE", + }); + if (!res.ok) { + throw new Error(`Failed to archive directive: ${res.statusText}`); + } + return res.json(); +} + +/** Start directive */ +export async function startDirective(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/start`, { + method: "POST", + }); + if (!res.ok) { + throw new Error(`Failed to start directive: ${res.statusText}`); + } + return res.json(); +} + +/** Pause directive */ +export async function pauseDirective(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/pause`, { + method: "POST", + }); + if (!res.ok) { + throw new Error(`Failed to pause directive: ${res.statusText}`); + } + return res.json(); +} + +/** Resume directive */ +export async function resumeDirective(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/resume`, { + method: "POST", + }); + if (!res.ok) { + throw new Error(`Failed to resume directive: ${res.statusText}`); + } + return res.json(); +} + +/** Stop directive */ +export async function stopDirective(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/stop`, { + method: "POST", + }); + if (!res.ok) { + throw new Error(`Failed to stop directive: ${res.statusText}`); + } + return res.json(); +} + +/** Get directive chain */ +export async function getDirectiveChain( + directiveId: string +): Promise<{ chain: DirectiveChain | null; steps: ChainStep[] }> { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/chain`); + if (!res.ok) { + throw new Error(`Failed to get directive chain: ${res.statusText}`); + } + return res.json(); +} + +/** Get directive chain graph */ +export async function getDirectiveGraph(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/chain/graph`); + if (!res.ok) { + throw new Error(`Failed to get directive graph: ${res.statusText}`); + } + return res.json(); +} + +/** Replan directive chain */ +export async function replanDirectiveChain(directiveId: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/chain/replan`, { + method: "POST", + }); + if (!res.ok) { + throw new Error(`Failed to replan directive chain: ${res.statusText}`); + } + return res.json(); +} + +/** Add step to directive chain */ +export async function addDirectiveStep( + directiveId: string, + req: AddStepRequest +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/chain/steps`, { + method: "POST", + body: JSON.stringify(req), + }); + if (!res.ok) { + throw new Error(`Failed to add step: ${res.statusText}`); + } + return res.json(); +} + +/** Get step details */ +export async function getDirectiveStep( + directiveId: string, + stepId: string +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/steps/${stepId}`); + if (!res.ok) { + throw new Error(`Failed to get step: ${res.statusText}`); + } + return res.json(); +} + +/** Update step */ +export async function updateDirectiveStep( + directiveId: string, + stepId: string, + req: UpdateStepRequest +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/chain/steps/${stepId}`, + { + method: "PUT", + body: JSON.stringify(req), + } + ); + if (!res.ok) { + throw new Error(`Failed to update step: ${res.statusText}`); + } + return res.json(); +} + +/** Delete step */ +export async function deleteDirectiveStep( + directiveId: string, + stepId: string +): Promise<{ deleted: boolean }> { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/chain/steps/${stepId}`, + { + method: "DELETE", + } + ); + if (!res.ok) { + throw new Error(`Failed to delete step: ${res.statusText}`); + } + return res.json(); +} + +/** Skip step */ +export async function skipDirectiveStep( + directiveId: string, + stepId: string +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/steps/${stepId}/skip`, + { + method: "POST", + } + ); + if (!res.ok) { + throw new Error(`Failed to skip step: ${res.statusText}`); + } + return res.json(); +} + +/** List directive evaluations */ +export async function listDirectiveEvaluations( + directiveId: string, + limit = 50 +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/evaluations?limit=${limit}` + ); + if (!res.ok) { + throw new Error(`Failed to list evaluations: ${res.statusText}`); + } + return res.json(); +} + +/** List directive events */ +export async function listDirectiveEvents( + directiveId: string, + limit = 50 +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/events?limit=${limit}` + ); + if (!res.ok) { + throw new Error(`Failed to list events: ${res.statusText}`); + } + return res.json(); +} + +/** List directive verifiers */ +export async function listDirectiveVerifiers( + directiveId: string +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/verifiers`); + if (!res.ok) { + throw new Error(`Failed to list verifiers: ${res.statusText}`); + } + return res.json(); +} + +/** Add verifier */ +export async function addDirectiveVerifier( + directiveId: string, + req: CreateVerifierRequest +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/verifiers`, { + method: "POST", + body: JSON.stringify(req), + }); + if (!res.ok) { + throw new Error(`Failed to add verifier: ${res.statusText}`); + } + return res.json(); +} + +/** Update verifier */ +export async function updateDirectiveVerifier( + directiveId: string, + verifierId: string, + req: UpdateVerifierRequest +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/verifiers/${verifierId}`, + { + method: "PUT", + body: JSON.stringify(req), + } + ); + if (!res.ok) { + throw new Error(`Failed to update verifier: ${res.statusText}`); + } + return res.json(); +} + +/** Auto-detect verifiers */ +export async function autoDetectVerifiers( + directiveId: string +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/verifiers/auto-detect`, + { + method: "POST", + } + ); + if (!res.ok) { + throw new Error(`Failed to auto-detect verifiers: ${res.statusText}`); + } + return res.json(); +} + +/** List pending approvals */ +export async function listDirectiveApprovals( + directiveId: string +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${directiveId}/approvals`); + if (!res.ok) { + throw new Error(`Failed to list approvals: ${res.statusText}`); + } + return res.json(); +} + +/** Approve request */ +export async function approveDirectiveRequest( + directiveId: string, + approvalId: string, + req?: ApprovalActionRequest +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/approvals/${approvalId}/approve`, + { + method: "POST", + body: JSON.stringify(req || {}), + } + ); + if (!res.ok) { + throw new Error(`Failed to approve request: ${res.statusText}`); + } + return res.json(); +} + +/** Deny request */ +export async function denyDirectiveRequest( + directiveId: string, + approvalId: string, + req?: ApprovalActionRequest +): Promise { + const res = await authFetch( + `${API_BASE}/api/v1/directives/${directiveId}/approvals/${approvalId}/deny`, + { + method: "POST", + body: JSON.stringify(req || {}), + } + ); + if (!res.ok) { + throw new Error(`Failed to deny request: ${res.statusText}`); + } + return res.json(); +} + +/** Subscribe to directive events via SSE */ +export async function subscribeToDirectiveEvents( + directiveId: string, + onEvent: (event: DirectiveEvent) => void, + onError?: (error: Error) => void +): Promise<() => void> { + // Get auth token for the request + let authToken: string | null = null; + if (supabase) { + const { data: { session } } = await supabase.auth.getSession(); + if (session?.access_token) { + authToken = session.access_token; + } + } + + // Build URL with auth token as query param (since EventSource doesn't support headers) + const url = new URL(`${API_BASE}/api/v1/directives/${directiveId}/events/stream`); + if (authToken) { + url.searchParams.set("token", authToken); + } else { + const apiKey = getStoredApiKey(); + if (apiKey) { + url.searchParams.set("api_key", apiKey); + } + } + + // Create EventSource connection + const eventSource = new EventSource(url.toString()); + + eventSource.onmessage = (e) => { + try { + const event = JSON.parse(e.data) as DirectiveEvent; + onEvent(event); + } catch (err) { + console.error("Failed to parse SSE event:", err); + } + }; + + eventSource.onerror = (_e) => { + if (onError) { + onError(new Error("SSE connection error")); + } + }; + + // Return cleanup function + return () => { + eventSource.close(); + }; +} diff --git a/makima/frontend/src/main.tsx b/makima/frontend/src/main.tsx index a7ba1a3..5a1b98e 100644 --- a/makima/frontend/src/main.tsx +++ b/makima/frontend/src/main.tsx @@ -13,6 +13,7 @@ import ListenPage from "./routes/listen"; import FilesPage from "./routes/files"; import ContractsPage from "./routes/contracts"; import ChainsPage from "./routes/chains"; +import DirectivesPage from "./routes/directives"; import WorkflowPage from "./routes/workflow"; import MeshPage from "./routes/mesh"; import HistoryPage from "./routes/history"; @@ -88,6 +89,22 @@ createRoot(document.getElementById("root")!).render( } /> + + + + } + /> + + + + } + /> { + if (!authLoading && isAuthConfigured && !isAuthenticated) { + navigate("/login"); + } + }, [authLoading, isAuthConfigured, isAuthenticated, navigate]); + + // Show loading while checking auth + if (authLoading) { + return ( +
+ +
+

Loading...

+
+
+ ); + } + + // Don't render if not authenticated (will redirect) + if (isAuthConfigured && !isAuthenticated) { + return null; + } + + return ; +} + +function DirectivesPageContent() { + const { id } = useParams<{ id: string }>(); + const navigate = useNavigate(); + const { + directives, + loading, + error, + createNewDirective, + archiveExistingDirective, + getDirectiveById, + getGraph, + start, + pause, + resume, + stop, + } = useDirectives(); + + const [directiveDetail, setDirectiveDetail] = useState(null); + const [directiveGraph, setDirectiveGraph] = useState(null); + const [detailLoading, setDetailLoading] = useState(false); + const [isCreating, setIsCreating] = useState(false); + + // Load directive detail when ID changes + useEffect(() => { + if (id) { + setDetailLoading(true); + Promise.all([getDirectiveById(id), getGraph(id).catch(() => null)]).then(([directive, graph]) => { + setDirectiveDetail(directive); + setDirectiveGraph(graph); + setDetailLoading(false); + }); + } else { + setDirectiveDetail(null); + setDirectiveGraph(null); + } + }, [id, getDirectiveById, getGraph]); + + const handleSelect = useCallback( + (directiveId: string) => { + navigate(`/directives/${directiveId}`); + }, + [navigate] + ); + + const handleBack = useCallback(() => { + navigate("/directives"); + }, [navigate]); + + const handleCreate = useCallback(() => { + setIsCreating(true); + }, []); + + const handleCreateSubmit = useCallback( + async (goal: string, repositoryUrl: string | undefined, autonomyLevel: AutonomyLevel) => { + const data: CreateDirectiveRequest = { + goal: goal.trim(), + repositoryUrl: repositoryUrl?.trim() || undefined, + autonomyLevel, + }; + + try { + const result = await createNewDirective(data); + if (result) { + setIsCreating(false); + navigate(`/directives/${result.id}`); + } + } catch (err) { + console.error("Failed to create directive:", err); + } + }, + [createNewDirective, navigate] + ); + + const handleCreateCancel = useCallback(() => { + setIsCreating(false); + }, []); + + const handleArchive = useCallback( + async (directive: DirectiveSummary) => { + if (confirm(`Are you sure you want to archive this directive?`)) { + const success = await archiveExistingDirective(directive.id); + if (success && directive.id === id) { + navigate("/directives"); + } + } + }, + [archiveExistingDirective, id, navigate] + ); + + const handleRefresh = useCallback(async () => { + if (id) { + const [directive, graph] = await Promise.all([ + getDirectiveById(id), + getGraph(id).catch(() => null), + ]); + setDirectiveDetail(directive); + setDirectiveGraph(graph); + } + }, [id, getDirectiveById, getGraph]); + + const handleStart = useCallback(async () => { + if (id) { + await start(id); + handleRefresh(); + } + }, [id, start, handleRefresh]); + + const handlePause = useCallback(async () => { + if (id) { + await pause(id); + handleRefresh(); + } + }, [id, pause, handleRefresh]); + + const handleResume = useCallback(async () => { + if (id) { + await resume(id); + handleRefresh(); + } + }, [id, resume, handleRefresh]); + + const handleStop = useCallback(async () => { + if (id) { + await stop(id); + handleRefresh(); + } + }, [id, stop, handleRefresh]); + + return ( +
+ +
+ {error && ( +
+ {error} +
+ )} + + {/* Create directive modal */} + {isCreating && ( + + )} + +
+ {/* Directive list */} + + + {/* Directive detail or empty state */} + {directiveDetail ? ( + + ) : ( +
+
+

+ Select a directive or create a new one +

+ +
+
+ )} +
+
+
+ ); +} + +// ============================================================================= +// Directive List Component +// ============================================================================= + +interface DirectiveListProps { + directives: DirectiveSummary[]; + loading: boolean; + onSelect: (id: string) => void; + onCreate: () => void; + selectedId?: string; + onArchive: (directive: DirectiveSummary) => void; +} + +function DirectiveList({ + directives, + loading, + onSelect, + onCreate, + selectedId, + onArchive, +}: DirectiveListProps) { + const [filter, setFilter] = useState<"all" | "active" | "completed" | "failed">("all"); + + const filteredDirectives = directives.filter((d) => { + if (filter === "all") return true; + if (filter === "active") return ["draft", "planning", "active", "paused"].includes(d.status); + if (filter === "completed") return d.status === "completed"; + if (filter === "failed") return d.status === "failed"; + return true; + }); + + return ( +
+
+

Directives

+ +
+ + {/* Filters */} +
+ {(["all", "active", "completed", "failed"] as const).map((f) => ( + + ))} +
+ + {/* List */} +
+ {loading ? ( +
+

Loading...

+
+ ) : filteredDirectives.length === 0 ? ( +
+

No directives found

+
+ ) : ( + filteredDirectives.map((d) => ( + onSelect(d.id)} + onArchive={() => onArchive(d)} + /> + )) + )} +
+
+ ); +} + +interface DirectiveListItemProps { + directive: DirectiveSummary; + selected: boolean; + onClick: () => void; + onArchive: () => void; +} + +function DirectiveListItem({ directive, selected, onClick, onArchive }: DirectiveListItemProps) { + const progress = directive.totalSteps > 0 + ? Math.round((directive.completedSteps / directive.totalSteps) * 100) + : 0; + + const statusColor = { + draft: "text-[#556677]", + planning: "text-yellow-400", + active: "text-green-400", + paused: "text-yellow-400", + completed: "text-[#75aafc]", + archived: "text-[#556677]", + failed: "text-red-400", + }[directive.status] || "text-[#556677]"; + + const confidenceColor = { + green: "bg-green-500", + yellow: "bg-yellow-500", + red: "bg-red-500", + }[directive.currentConfidence !== null && directive.currentConfidence >= 0.8 + ? "green" + : directive.currentConfidence !== null && directive.currentConfidence >= 0.5 + ? "yellow" + : "red"] || "bg-[#556677]"; + + return ( +
+
+
+
+ {directive.title || directive.goal.slice(0, 50)} +
+
+ + {directive.status} + + + {directive.completedSteps}/{directive.totalSteps} steps + +
+
+
+ {directive.currentConfidence !== null && ( +
+ )} + +
+
+ + {/* Progress bar */} + {directive.totalSteps > 0 && ( +
+
+
+ )} +
+ ); +} + +// ============================================================================= +// Directive Detail Component +// ============================================================================= + +interface DirectiveDetailProps { + directive: DirectiveWithProgress; + graph: DirectiveGraphResponse | null; + loading: boolean; + onBack: () => void; + onRefresh: () => void; + onStart: () => void; + onPause: () => void; + onResume: () => void; + onStop: () => void; +} + +function DirectiveDetail({ + directive, + graph, + loading, + onBack, + onRefresh, + onStart, + onPause, + onResume, + onStop, +}: DirectiveDetailProps) { + const [activeTab, setActiveTab] = useState<"overview" | "chain" | "events" | "evaluations" | "approvals" | "verifiers">("overview"); + + if (loading) { + return ( +
+

Loading...

+
+ ); + } + + const statusColor = { + draft: "text-[#556677] bg-[#556677]/10 border-[#556677]/30", + planning: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30", + active: "text-green-400 bg-green-400/10 border-green-400/30", + paused: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30", + completed: "text-[#75aafc] bg-[#75aafc]/10 border-[#75aafc]/30", + archived: "text-[#556677] bg-[#556677]/10 border-[#556677]/30", + failed: "text-red-400 bg-red-400/10 border-red-400/30", + }[directive.status] || "text-[#556677] bg-[#556677]/10 border-[#556677]/30"; + + return ( +
+ {/* Header */} +
+
+
+ +

+ {directive.title || directive.goal.slice(0, 50)} +

+ + {directive.status} + +
+
+ {directive.status === "draft" && ( + + )} + {directive.status === "active" && ( + + )} + {directive.status === "paused" && ( + + )} + {["active", "paused"].includes(directive.status) && ( + + )} + +
+
+
+ + {/* Tabs */} +
+ {(["overview", "chain", "events", "evaluations", "approvals", "verifiers"] as const).map((tab) => ( + + ))} +
+ + {/* Tab Content */} +
+ {activeTab === "overview" && ( + + )} + {activeTab === "chain" && ( + + )} + {activeTab === "events" && ( + + )} + {activeTab === "evaluations" && ( + + )} + {activeTab === "approvals" && ( + + )} + {activeTab === "verifiers" && ( + + )} +
+
+ ); +} + +// ============================================================================= +// Tab Components +// ============================================================================= + +function OverviewTab({ directive }: { directive: DirectiveWithProgress }) { + return ( +
+ {/* Goal */} +
+

Goal

+

+ {directive.goal} +

+
+ + {/* Progress */} +
+

Progress

+
+
+
+ {directive.chain?.completedSteps || 0} +
+
Completed Steps
+
+
+
+ {directive.chain?.totalSteps || 0} +
+
Total Steps
+
+
+
+ {directive.chain?.currentConfidence != null + ? `${Math.round((directive.chain?.currentConfidence ?? 0) * 100)}%` + : "-"} +
+
Confidence
+
+
+
+ + {/* Configuration */} +
+

Configuration

+
+
+ Autonomy Level + {directive.autonomyLevel} +
+
+ Max Rework Cycles + {directive.maxReworkCycles} +
+
+ Green Threshold + {directive.confidenceThresholdGreen} +
+
+ Yellow Threshold + {directive.confidenceThresholdYellow} +
+
+
+ + {/* Repository */} + {directive.repositoryUrl && ( +
+

Repository

+

{directive.repositoryUrl}

+
+ )} +
+ ); +} + +// Step status colors for both list and DAG views +const stepStatusStyles: Record = { + pending: { border: "#556677", bg: "#556677", text: "#556677" }, + ready: { border: "#3b82f6", bg: "#3b82f6", text: "#3b82f6" }, + running: { border: "#22c55e", bg: "#22c55e", text: "#22c55e" }, + evaluating: { border: "#eab308", bg: "#eab308", text: "#eab308" }, + passed: { border: "#75aafc", bg: "#75aafc", text: "#75aafc" }, + failed: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" }, + rework: { border: "#f97316", bg: "#f97316", text: "#f97316" }, + skipped: { border: "#556677", bg: "#556677", text: "#556677" }, + blocked: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" }, +}; + +// Confidence level colors +const confidenceColors: Record = { + green: "#22c55e", + yellow: "#eab308", + red: "#ef4444", +}; + +// Node dimensions +const NODE_WIDTH = 180; +const NODE_HEIGHT = 70; + +// Custom node component for steps +function StepNodeComponent({ data }: { data: DirectiveGraphNode & { selected?: boolean } }) { + const styles = stepStatusStyles[data.status] || stepStatusStyles.pending; + const isRunning = data.status === "running" || data.status === "evaluating"; + + return ( +
+ + + {/* Status indicator bar */} +
+ + {/* Content */} +
+
+ {data.name} + {data.confidenceScore !== null && data.confidenceLevel && ( +
+ )} +
+
+ + {data.status} + + {data.stepType} +
+
+ + +
+ ); +} + +// Node types for React Flow +const nodeTypes = { + step: StepNodeComponent, +}; + +function ChainTab({ directive, graph }: { directive: DirectiveWithProgress; graph: DirectiveGraphResponse | null }) { + const [viewMode, setViewMode] = useState<"dag" | "list">("dag"); + + // Convert graph to React Flow nodes and edges + const { nodes, edges } = useMemo(() => { + if (!graph || !graph.nodes.length) { + // Fallback: generate positions from directive.steps + const stepNodes = directive.steps.map((step, index) => ({ + id: step.id, + type: "step" as const, + position: { + x: (index % 3) * 220 + 50, + y: Math.floor(index / 3) * 120 + 50, + }, + data: { + id: step.id, + name: step.name, + stepType: step.stepType, + status: step.status, + confidenceScore: step.confidenceScore, + confidenceLevel: step.confidenceLevel, + contractId: step.contractId, + editorX: null, + editorY: null, + }, + })); + + // Build edges from dependencies + const stepEdges: Edge[] = []; + directive.steps.forEach((step) => { + step.dependsOn.forEach((depName) => { + const depStep = directive.steps.find((s) => s.name === depName); + if (depStep) { + stepEdges.push({ + id: `${depStep.id}-${step.id}`, + source: depStep.id, + target: step.id, + type: "smoothstep", + markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" }, + style: { stroke: "#556677", strokeWidth: 2 }, + }); + } + }); + }); + + return { nodes: stepNodes, edges: stepEdges }; + } + + // Use graph data + const graphNodes = graph.nodes.map((node) => ({ + id: node.id, + type: "step" as const, + position: { + x: node.editorX ?? 50, + y: node.editorY ?? 50, + }, + data: { ...node }, + })); + + const graphEdges: Edge[] = graph.edges.map((edge) => ({ + id: `${edge.source}-${edge.target}`, + source: edge.source, + target: edge.target, + type: "smoothstep", + markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" }, + style: { stroke: "#556677", strokeWidth: 2 }, + })); + + return { nodes: graphNodes, edges: graphEdges }; + }, [graph, directive.steps]); + + if (!directive.chain) { + return ( +
+

+ No chain generated yet. Start the directive to generate a chain. +

+
+ ); + } + + return ( +
+ {/* Chain info header */} +
+
+
{directive.chain.name}
+
Generation {directive.chain.generation}
+
+
+
+ {directive.chain.completedSteps}/{directive.chain.totalSteps} steps +
+ {/* View toggle */} +
+ + +
+
+
+ + {viewMode === "dag" ? ( + /* DAG visualization */ +
+ {directive.steps.length === 0 ? ( +
+

No steps in chain

+
+ ) : ( + + + + + )} +
+ ) : ( + /* List view */ +
+

Steps

+ {directive.steps.length === 0 ? ( +

No steps in chain

+ ) : ( + directive.steps.map((step) => { + const styles = stepStatusStyles[step.status] || stepStatusStyles.pending; + + return ( +
+
+
+ {step.name} + + {step.status} + + {step.confidenceScore !== null && ( + + ({Math.round(step.confidenceScore * 100)}%) + + )} +
+
{step.stepType}
+
+ {step.description && ( +

{step.description}

+ )} + {step.dependsOn.length > 0 && ( +
+ Depends on: {step.dependsOn.join(", ")} +
+ )} +
+ ); + }) + )} +
+ )} +
+ ); +} + +function EventsTab({ directive }: { directive: DirectiveWithProgress }) { + // Subscribe to real-time events via SSE + const { events: streamEvents, isConnected, error: sseError } = useDirectiveEventSubscription(directive.id); + + // Combine initial events with streamed events (avoiding duplicates) + const allEvents = useMemo(() => { + const eventMap = new Map(); + // Add initial events first + directive.recentEvents.forEach((e) => eventMap.set(e.id, e)); + // Add streamed events (will override any duplicates) + streamEvents.forEach((e) => eventMap.set(e.id, e)); + // Sort by created_at descending (most recent first) + return Array.from(eventMap.values()).sort( + (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + }, [directive.recentEvents, streamEvents]); + + return ( +
+ {/* Connection status */} +
+
+ + {isConnected ? "● Live" : "○ Connecting..."} + + {sseError && {sseError}} +
+ {allEvents.length} events +
+ + {/* Event list */} + {allEvents.length === 0 ? ( +
+

No events yet

+
+ ) : ( +
+ {allEvents.map((event) => { + const severityColors: Record = { + info: "text-[#75aafc]", + warning: "text-yellow-400", + error: "text-red-400", + critical: "text-red-600", + }; + const severityColor = severityColors[event.severity] || "text-[#556677]"; + + return ( +
+
+
+ {event.eventType} + {event.actorType} +
+ + {new Date(event.createdAt).toLocaleString()} + +
+ {event.eventData != null && ( + 
+                    {JSON.stringify(event.eventData, null, 2)}
+
+ )} +
+ ); + })} +
+ )} +
+ ); +} + +function EvaluationsTab({ directive: _directive }: { directive: DirectiveWithProgress }) { + // TODO: Fetch evaluations separately + return ( +
+

+ Evaluations will be shown here after steps are evaluated +

+
+ ); +} + +function ApprovalsTab({ directive, onRefresh }: { directive: DirectiveWithProgress; onRefresh: () => void }) { + if (directive.pendingApprovals.length === 0) { + return ( +
+

No pending approvals

+
+ ); + } + + const handleApprove = async (approvalId: string) => { + try { + const { approveDirectiveRequest } = await import("../lib/api"); + await approveDirectiveRequest(directive.id, approvalId); + onRefresh(); + } catch (err) { + console.error("Failed to approve:", err); + } + }; + + const handleDeny = async (approvalId: string) => { + try { + const { denyDirectiveRequest } = await import("../lib/api"); + await denyDirectiveRequest(directive.id, approvalId); + onRefresh(); + } catch (err) { + console.error("Failed to deny:", err); + } + }; + + return ( +
+ {directive.pendingApprovals.map((approval) => { + const urgencyColor = { + low: "text-[#556677]", + normal: "text-[#75aafc]", + high: "text-yellow-400", + critical: "text-red-400", + }[approval.urgency] || "text-[#556677]"; + + return ( +
+
+
+
+ {approval.approvalType} + + {approval.urgency} + +
+

{approval.description}

+
+
+ + +
+
+
+ ); + })} +
+ ); +} + +function VerifiersTab({ directive: _directive }: { directive: DirectiveWithProgress }) { + // TODO: Fetch verifiers separately + return ( +
+

+ Verifiers will be shown here. Use auto-detect to find available verifiers. +

+
+ ); +} + +// ============================================================================= +// Create Directive Modal +// ============================================================================= + +interface CreateDirectiveModalProps { + onSubmit: (goal: string, repositoryUrl: string | undefined, autonomyLevel: AutonomyLevel) => void; + onCancel: () => void; +} + +function CreateDirectiveModal({ onSubmit, onCancel }: CreateDirectiveModalProps) { + const [goal, setGoal] = useState(""); + const [repositoryUrl, setRepositoryUrl] = useState(""); + const [autonomyLevel, setAutonomyLevel] = useState("guardrails"); + const [suggestions, setSuggestions] = useState([]); + const [showSuggestions, setShowSuggestions] = useState(false); + + // Load suggestions + useEffect(() => { + getRepositorySuggestions("remote", undefined, 5) + .then((res) => { + setSuggestions(res.entries); + }) + .catch(() => { + setSuggestions([]); + }); + }, []); + + const handleSubmit = () => { + if (goal.trim()) { + onSubmit(goal.trim(), repositoryUrl.trim() || undefined, autonomyLevel); + } + }; + + return ( +
+
+

+ Create Directive +

+ +
+ {/* Goal */} +
+ +