From 9e9f18884c78c21f5785908fb7ccd00e2fa5436b Mon Sep 17 00:00:00 2001 From: soryu Date: Sat, 7 Feb 2026 01:11:26 +0000 Subject: Add new directive initial implementation --- makima/frontend/src/components/NavStrip.tsx | 1 + .../src/components/directives/DirectiveDetail.tsx | 200 ++++++++++++++++++++ .../src/components/directives/DirectiveList.tsx | 135 +++++++++++++ makima/frontend/src/hooks/useDirectives.ts | 108 +++++++++++ makima/frontend/src/lib/api.ts | 158 ++++++++++++++++ makima/frontend/src/main.tsx | 17 ++ makima/frontend/src/routes/directives.tsx | 209 +++++++++++++++++++++ 7 files changed, 828 insertions(+) create mode 100644 makima/frontend/src/components/directives/DirectiveDetail.tsx create mode 100644 makima/frontend/src/components/directives/DirectiveList.tsx 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 fb95c7f..f7e67db 100644 --- a/makima/frontend/src/components/NavStrip.tsx +++ b/makima/frontend/src/components/NavStrip.tsx @@ -11,6 +11,7 @@ interface NavLink { const NAV_LINKS: NavLink[] = [ { label: "Listen", href: "/listen" }, { label: "Contracts", href: "/contracts", requiresAuth: true }, + { label: "Directives", href: "/directives", requiresAuth: true }, { label: "Board", href: "/workflow", requiresAuth: true }, { label: "Mesh", href: "/mesh", requiresAuth: true }, { label: "History", href: "/history", requiresAuth: true }, diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx new file mode 100644 index 0000000..3634a79 --- /dev/null +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -0,0 +1,200 @@ +import type { + DirectiveWithChains, + DirectiveStatus, + DirectiveChain, +} from "../../lib/api"; + +interface DirectiveDetailProps { + directive: DirectiveWithChains; + onBack: () => void; + onDelete?: (id: string) => void; +} + +const statusColors: Record = { + draft: "text-[#888]", + planning: "text-yellow-400", + active: "text-green-400", + paused: "text-orange-400", + completed: "text-blue-400", + archived: "text-[#555]", + failed: "text-red-400", +}; + +function ChainCard({ chain }: { chain: DirectiveChain }) { + return ( +
+
+ {chain.name} + + gen {chain.generation} · {chain.status} + +
+ {chain.description && ( +

+ {chain.description} +

+ )} +
+ + {chain.completedSteps}/{chain.totalSteps} steps + + {chain.failedSteps > 0 && ( + {chain.failedSteps} failed + )} + {chain.currentConfidence != null && ( + confidence: {(chain.currentConfidence * 100).toFixed(0)}% + )} +
+
+ ); +} + +function JsonSection({ + label, + data, +}: { + label: string; + data: unknown[] | unknown; +}) { + const items = Array.isArray(data) ? data : []; + if (items.length === 0) return null; + + return ( +
+

+ {label} +

+
+ {items.map((item, i) => ( +
+ {typeof item === "string" ? item : JSON.stringify(item)} +
+ ))} +
+
+ ); +} + +export function DirectiveDetail({ + directive, + onBack, + onDelete, +}: DirectiveDetailProps) { + return ( +
+ {/* Header */} +
+
+ + + {directive.status} + + + v{directive.version} + + {onDelete && ( + + )} +
+

+ {directive.title} +

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

+ Goal +

+

+ {directive.goal} +

+
+ + {/* Config */} +
+
+ + Autonomy + +
+ {directive.autonomyLevel} +
+
+
+ + Chains + +
+ {directive.chainGenerationCount} generated +
+
+
+ + Cost + +
+ ${directive.totalCostUsd.toFixed(2)} +
+
+ {directive.repositoryUrl && ( +
+ + Repository + +
+ {directive.repositoryUrl} +
+
+ )} +
+ + {/* Structured sections */} + + + + + + {/* Chains */} +
+

+ Chains ({directive.chains.length}) +

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

+ No chains yet. Chains are created during planning. +

+ ) : ( +
+ {directive.chains.map((chain) => ( + + ))} +
+ )} +
+
+
+ ); +} diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx new file mode 100644 index 0000000..a900b7b --- /dev/null +++ b/makima/frontend/src/components/directives/DirectiveList.tsx @@ -0,0 +1,135 @@ +import { useState } from "react"; +import type { DirectiveSummary, DirectiveStatus } from "../../lib/api"; + +interface DirectiveListProps { + directives: DirectiveSummary[]; + loading: boolean; + onSelect: (id: string) => void; + onCreate: () => void; + onDelete?: (directive: DirectiveSummary) => void; + selectedId?: string; +} + +const statusColors: Record = { + draft: "text-[#888]", + planning: "text-yellow-400", + active: "text-green-400", + paused: "text-orange-400", + completed: "text-blue-400", + archived: "text-[#555]", + failed: "text-red-400", +}; + +export function DirectiveList({ + directives, + loading, + onSelect, + onCreate, + onDelete, + selectedId, +}: DirectiveListProps) { + const [filter, setFilter] = useState("all"); + + const filteredDirectives = + filter === "all" + ? directives + : directives.filter((d) => d.status === filter); + + if (loading) { + return ( +
+
Loading...
+
+ ); + } + + return ( +
+ {/* Header */} +
+
+

+ Directives +

+ +
+ {/* Filter tabs */} +
+ {(["all", "draft", "planning", "active", "paused", "completed", "failed"] as const).map( + (status) => ( + + ) + )} +
+
+ + {/* List */} +
+ {filteredDirectives.length === 0 ? ( +
+

+ {directives.length === 0 + ? "No directives yet" + : "No matching directives"} +

+
+ ) : ( + filteredDirectives.map((directive) => ( +
onSelect(directive.id)} + onContextMenu={(e) => { + if (onDelete) { + e.preventDefault(); + } + }} + className={`p-3 border-b border-dashed border-[rgba(117,170,252,0.15)] cursor-pointer transition-colors hover:bg-[rgba(117,170,252,0.05)] ${ + selectedId === directive.id + ? "bg-[rgba(117,170,252,0.1)]" + : "" + }`} + > +
+
+
+ {directive.title} +
+
+ {directive.goal} +
+
+
+ + {directive.status} + + + {directive.chainCount}ch / {directive.stepCount}st + +
+
+
+ )) + )} +
+
+ ); +} diff --git a/makima/frontend/src/hooks/useDirectives.ts b/makima/frontend/src/hooks/useDirectives.ts new file mode 100644 index 0000000..001cf89 --- /dev/null +++ b/makima/frontend/src/hooks/useDirectives.ts @@ -0,0 +1,108 @@ +import { useState, useCallback, useEffect } from "react"; +import { + listDirectives, + getDirective, + createDirective, + updateDirective, + deleteDirective, + type DirectiveSummary, + type DirectiveWithChains, + type CreateDirectiveRequest, + type UpdateDirectiveRequest, +} from "../lib/api"; + +export function useDirectives() { + const [directives, setDirectives] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const fetchDirectives = useCallback(async () => { + setLoading(true); + setError(null); + try { + const response = await listDirectives(); + setDirectives(response.directives); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to fetch directives"); + } finally { + setLoading(false); + } + }, []); + + const fetchDirective = useCallback( + async (id: string): Promise => { + setError(null); + try { + return await getDirective(id); + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to fetch directive"); + return null; + } + }, + [] + ); + + const saveDirective = useCallback( + async (data: CreateDirectiveRequest): Promise => { + setError(null); + try { + const directive = await createDirective(data); + await fetchDirectives(); + return directive as unknown as DirectiveSummary; + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to create directive"); + return null; + } + }, + [fetchDirectives] + ); + + const editDirective = useCallback( + async ( + id: string, + data: UpdateDirectiveRequest + ): Promise => { + setError(null); + try { + const directive = await updateDirective(id, data); + await fetchDirectives(); + return directive as unknown as DirectiveSummary; + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to update directive"); + return null; + } + }, + [fetchDirectives] + ); + + const removeDirective = useCallback( + async (id: string): Promise => { + setError(null); + try { + await deleteDirective(id); + await fetchDirectives(); + return true; + } catch (e) { + setError(e instanceof Error ? e.message : "Failed to delete directive"); + return false; + } + }, + [fetchDirectives] + ); + + // Initial fetch + useEffect(() => { + fetchDirectives(); + }, [fetchDirectives]); + + return { + directives, + loading, + error, + fetchDirectives, + fetchDirective, + saveDirective, + editDirective, + removeDirective, + }; +} diff --git a/makima/frontend/src/lib/api.ts b/makima/frontend/src/lib/api.ts index 9f5ff88..6c450eb 100644 --- a/makima/frontend/src/lib/api.ts +++ b/makima/frontend/src/lib/api.ts @@ -3003,3 +3003,161 @@ export async function listTaskPatches(taskId: string, contractId: string): Promi return res.json(); } +// ============================================================================= +// Directive Types & API +// ============================================================================= + +export type DirectiveStatus = "draft" | "planning" | "active" | "paused" | "completed" | "archived" | "failed"; +export type AutonomyLevel = "full_auto" | "guardrails" | "manual"; + +export interface DirectiveSummary { + id: string; + title: string; + goal: string; + status: DirectiveStatus; + autonomyLevel: AutonomyLevel; + chainCount: number; + stepCount: number; + totalCostUsd: number; + version: number; + createdAt: string; + updatedAt: string; +} + +export interface Directive { + id: string; + ownerId: string; + title: string; + goal: string; + requirements: unknown[]; + acceptanceCriteria: unknown[]; + constraints: unknown[]; + externalDependencies: unknown[]; + status: DirectiveStatus; + autonomyLevel: AutonomyLevel; + confidenceThresholdGreen: number; + confidenceThresholdYellow: number; + maxTotalCostUsd: number | null; + maxWallTimeMinutes: number | null; + maxReworkCycles: number | null; + maxChainRegenerations: number | null; + repositoryUrl: string | null; + localPath: string | null; + baseBranch: string | null; + orchestratorContractId: string | null; + currentChainId: string | null; + chainGenerationCount: number; + totalCostUsd: number; + startedAt: string | null; + completedAt: string | null; + version: number; + createdAt: string; + updatedAt: string; +} + +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; +} + +export interface DirectiveWithChains extends Directive { + chains: DirectiveChain[]; +} + +export interface DirectiveListResponse { + directives: DirectiveSummary[]; + total: number; +} + +export interface CreateDirectiveRequest { + title: string; + goal: string; + requirements?: unknown[]; + acceptanceCriteria?: unknown[]; + constraints?: unknown[]; + externalDependencies?: unknown[]; + autonomyLevel?: AutonomyLevel; + repositoryUrl?: string; + localPath?: string; + baseBranch?: string; +} + +export interface UpdateDirectiveRequest { + title?: string; + goal?: string; + status?: DirectiveStatus; + autonomyLevel?: AutonomyLevel; + version?: number; +} + +export async function listDirectives(): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives`); + if (!res.ok) { + throw new Error(`Failed to list directives: ${res.statusText}`); + } + return res.json(); +} + +export async function getDirective(id: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${id}`); + if (!res.ok) { + throw new Error(`Failed to get directive: ${res.statusText}`); + } + return res.json(); +} + +export async function createDirective( + data: CreateDirectiveRequest +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives`, { + method: "POST", + body: JSON.stringify(data), + }); + if (!res.ok) { + throw new Error(`Failed to create directive: ${res.statusText}`); + } + return res.json(); +} + +export async function updateDirective( + id: string, + data: UpdateDirectiveRequest +): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${id}`, { + method: "PUT", + body: JSON.stringify(data), + }); + if (res.status === 409) { + const conflict = (await res.json()) as ConflictErrorResponse; + throw new VersionConflictError(conflict); + } + if (!res.ok) { + throw new Error(`Failed to update directive: ${res.statusText}`); + } + return res.json(); +} + +export async function deleteDirective(id: string): Promise { + const res = await authFetch(`${API_BASE}/api/v1/directives/${id}`, { + method: "DELETE", + }); + if (!res.ok) { + throw new Error(`Failed to delete directive: ${res.statusText}`); + } +} + diff --git a/makima/frontend/src/main.tsx b/makima/frontend/src/main.tsx index 50fffe4..f07a143 100644 --- a/makima/frontend/src/main.tsx +++ b/makima/frontend/src/main.tsx @@ -18,6 +18,7 @@ import HistoryPage from "./routes/history"; import LoginPage from "./routes/login"; import SettingsPage from "./routes/settings"; import ContractFilePage from "./routes/contract-file"; +import DirectivesPage from "./routes/directives"; import SpeakPage from "./routes/speak"; createRoot(document.getElementById("root")!).render( @@ -79,6 +80,22 @@ createRoot(document.getElementById("root")!).render( } /> + + + + } + /> + + + + } + /> { + if (!authLoading && isAuthConfigured && !isAuthenticated) { + navigate("/login"); + } + }, [authLoading, isAuthConfigured, isAuthenticated, navigate]); + + if (authLoading) { + return ( +
+ +
+

Loading...

+
+
+ ); + } + + return ( +
+ + +
+ ); +} + +function DirectivesContent() { + const { id } = useParams<{ id?: string }>(); + const navigate = useNavigate(); + const { + directives, + loading, + error, + fetchDirective, + saveDirective, + removeDirective, + } = useDirectives(); + + const [selectedDirective, setSelectedDirective] = + useState(null); + const [detailLoading, setDetailLoading] = useState(false); + const [showCreateForm, setShowCreateForm] = useState(false); + const [createTitle, setCreateTitle] = useState(""); + const [createGoal, setCreateGoal] = useState(""); + const [createRepoUrl, setCreateRepoUrl] = useState(""); + + // Load directive when ID changes + useEffect(() => { + if (id) { + setDetailLoading(true); + fetchDirective(id).then((d) => { + setSelectedDirective(d); + setDetailLoading(false); + }); + } else { + setSelectedDirective(null); + } + }, [id, fetchDirective]); + + const handleSelect = useCallback( + (directiveId: string) => { + navigate(`/directives/${directiveId}`); + }, + [navigate] + ); + + const handleBack = useCallback(() => { + navigate("/directives"); + }, [navigate]); + + const handleCreate = useCallback(async () => { + if (!createTitle.trim() || !createGoal.trim()) return; + + const data: CreateDirectiveRequest = { + title: createTitle.trim(), + goal: createGoal.trim(), + }; + if (createRepoUrl.trim()) { + data.repositoryUrl = createRepoUrl.trim(); + } + + const result = await saveDirective(data); + if (result) { + setShowCreateForm(false); + setCreateTitle(""); + setCreateGoal(""); + setCreateRepoUrl(""); + } + }, [createTitle, createGoal, createRepoUrl, saveDirective]); + + const handleDelete = useCallback( + async (directiveId: string) => { + const ok = await removeDirective(directiveId); + if (ok && id === directiveId) { + navigate("/directives"); + } + }, + [removeDirective, id, navigate] + ); + + // Detail view + if (id) { + if (detailLoading) { + return ( +
+

Loading directive...

+
+ ); + } + if (!selectedDirective) { + return ( +
+

Directive not found

+
+ ); + } + return ( +
+ +
+ ); + } + + // List view + return ( +
+ {error && ( +
+ {error} +
+ )} + + {showCreateForm && ( +
+

+ New Directive +

+
+ setCreateTitle(e.target.value)} + className="w-full px-2 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0a1628] border border-[rgba(117,170,252,0.3)] focus:border-[#75aafc] outline-none" + /> +