From 6364363d1418728351f252b799d397b756e1f985 Mon Sep 17 00:00:00 2001 From: soryu Date: Sat, 24 Jan 2026 20:06:28 +0000 Subject: feat: Simplify contract deliverables and add Templates UI ## Backend Changes ### Phase Deliverables Simplified - **Simple contract type**: - Plan phase: Only 'Plan' deliverable (required) - Execute phase: Only 'PR' deliverable (required) - **Specification contract type**: - Research phase: Only 'Research Notes' deliverable (required) - Specify phase: Only 'Requirements Document' deliverable (required) - Plan phase: Only 'Plan' deliverable (required) - Execute phase: Only 'PR' deliverable (required) - Review phase: Only 'Release Notes' deliverable (required) ### New 'execute' Contract Type - Only has 'execute' phase (no plan or review phases) - NO deliverables at all - executes tasks directly - Added to ContractType enum with proper Display/FromStr implementations - Added helper methods: `initial_phase()`, `terminal_phase()` ### API Updates - Added `get_phase_deliverables_for_type()` for contract-type-aware deliverables - Added `get_phase_checklist_for_type()` for contract-type-aware checklists - Added `check_phase_completion_for_type()` for contract-type-aware completion checks - Added `check_deliverables_met()` function for deliverable validation - Added `should_auto_progress()` for autonomous contract progression - Added new ContractToolRequest::CheckDeliverablesMet tool ## Frontend Changes (makima/frontend) ### Templates Page - Add TemplateEditor component for editing phase deliverables - Create Templates page with template card grid layout - Add navigation link in NavStrip - Implement three built-in templates: Simple, Specification, Execute - Support for creating custom templates with configurable phases/deliverables - Templates are persisted to localStorage Co-Authored-By: Claude Opus 4.5 --- makima/frontend/src/components/NavStrip.tsx | 1 + .../src/components/templates/TemplateEditor.tsx | 248 +++++++++++++++++++ makima/frontend/src/main.tsx | 9 + makima/frontend/src/routes/templates.tsx | 268 +++++++++++++++++++++ makima/frontend/src/types/templates.ts | 89 +++++++ 5 files changed, 615 insertions(+) create mode 100644 makima/frontend/src/components/templates/TemplateEditor.tsx create mode 100644 makima/frontend/src/routes/templates.tsx create mode 100644 makima/frontend/src/types/templates.ts (limited to 'makima/frontend/src') diff --git a/makima/frontend/src/components/NavStrip.tsx b/makima/frontend/src/components/NavStrip.tsx index 7e12c75..2838469 100644 --- a/makima/frontend/src/components/NavStrip.tsx +++ b/makima/frontend/src/components/NavStrip.tsx @@ -15,6 +15,7 @@ const NAV_LINKS: NavLink[] = [ { label: "Board", href: "/workflow", requiresAuth: true }, { label: "Mesh", href: "/mesh", requiresAuth: true }, { label: "History", href: "/history", requiresAuth: true }, + { label: "Templates", href: "/templates", requiresAuth: true }, ]; export function NavStrip() { diff --git a/makima/frontend/src/components/templates/TemplateEditor.tsx b/makima/frontend/src/components/templates/TemplateEditor.tsx new file mode 100644 index 0000000..03382f3 --- /dev/null +++ b/makima/frontend/src/components/templates/TemplateEditor.tsx @@ -0,0 +1,248 @@ +import { useState } from "react"; +import type { ContractTemplate, Phase, Deliverable } from "../../types/templates"; + +interface Props { + template: ContractTemplate; + onSave: (template: ContractTemplate) => void; + onCancel: () => void; +} + +export function TemplateEditor({ template, onSave, onCancel }: Props) { + const [editedTemplate, setEditedTemplate] = useState({ + ...template, + phases: template.phases.map((p) => ({ + ...p, + deliverables: [...p.deliverables], + })), + }); + const [newDeliverableName, setNewDeliverableName] = useState<{ + [phaseId: string]: string; + }>({}); + + const handlePhaseNameChange = (phaseId: string, newName: string) => { + setEditedTemplate((prev) => ({ + ...prev, + phases: prev.phases.map((p) => + p.id === phaseId ? { ...p, name: newName } : p + ), + })); + }; + + const handleDeliverableNameChange = ( + phaseId: string, + deliverableId: string, + newName: string + ) => { + setEditedTemplate((prev) => ({ + ...prev, + phases: prev.phases.map((p) => + p.id === phaseId + ? { + ...p, + deliverables: p.deliverables.map((d) => + d.id === deliverableId ? { ...d, name: newName } : d + ), + } + : p + ), + })); + }; + + const handleAddDeliverable = (phaseId: string) => { + const name = newDeliverableName[phaseId]?.trim(); + if (!name) return; + + const newDeliverable: Deliverable = { + id: `deliverable-${Date.now()}`, + name, + }; + + setEditedTemplate((prev) => ({ + ...prev, + phases: prev.phases.map((p) => + p.id === phaseId + ? { ...p, deliverables: [...p.deliverables, newDeliverable] } + : p + ), + })); + setNewDeliverableName((prev) => ({ ...prev, [phaseId]: "" })); + }; + + const handleRemoveDeliverable = (phaseId: string, deliverableId: string) => { + setEditedTemplate((prev) => ({ + ...prev, + phases: prev.phases.map((p) => + p.id === phaseId + ? { + ...p, + deliverables: p.deliverables.filter((d) => d.id !== deliverableId), + } + : p + ), + })); + }; + + const handleAddPhase = () => { + const newPhase: Phase = { + id: `phase-${Date.now()}`, + name: "New Phase", + deliverables: [], + }; + setEditedTemplate((prev) => ({ + ...prev, + phases: [...prev.phases, newPhase], + })); + }; + + const handleRemovePhase = (phaseId: string) => { + setEditedTemplate((prev) => ({ + ...prev, + phases: prev.phases.filter((p) => p.id !== phaseId), + })); + }; + + return ( +
+ {/* Header */} +
+

+ Edit Template: {template.name} +

+

+ {template.description} +

+
+ + {/* Phases */} +
+ {editedTemplate.phases.map((phase, phaseIndex) => ( +
+ {/* Phase Header */} +
+ + {phaseIndex + 1} + + handlePhaseNameChange(phase.id, e.target.value)} + placeholder="Phase name" + /> + {!template.isBuiltIn && ( + + )} +
+ + {/* Deliverables */} +
+ {phase.deliverables.length === 0 ? ( +
+ No deliverables +
+ ) : ( + phase.deliverables.map((deliverable) => ( +
+ - + + handleDeliverableNameChange( + phase.id, + deliverable.id, + e.target.value + ) + } + /> + +
+ )) + )} + + {/* Add Deliverable */} +
+ + setNewDeliverableName((prev) => ({ + ...prev, + [phase.id]: e.target.value, + })) + } + onKeyPress={(e) => { + if (e.key === "Enter") { + handleAddDeliverable(phase.id); + } + }} + /> + +
+
+
+ ))} +
+ + {/* Add Phase (only for custom templates) */} + {!template.isBuiltIn && ( + + )} + + {/* Footer Actions */} +
+ + +
+
+ ); +} diff --git a/makima/frontend/src/main.tsx b/makima/frontend/src/main.tsx index 19f02d1..0464495 100644 --- a/makima/frontend/src/main.tsx +++ b/makima/frontend/src/main.tsx @@ -17,6 +17,7 @@ import MeshPage from "./routes/mesh"; import HistoryPage from "./routes/history"; import LoginPage from "./routes/login"; import SettingsPage from "./routes/settings"; +import TemplatesPage from "./routes/templates"; createRoot(document.getElementById("root")!).render( @@ -117,6 +118,14 @@ createRoot(document.getElementById("root")!).render( } /> + + + + } + /> diff --git a/makima/frontend/src/routes/templates.tsx b/makima/frontend/src/routes/templates.tsx new file mode 100644 index 0000000..ce944a8 --- /dev/null +++ b/makima/frontend/src/routes/templates.tsx @@ -0,0 +1,268 @@ +import { useState, useEffect } from "react"; +import { useNavigate } from "react-router"; +import { Masthead } from "../components/Masthead"; +import { TemplateEditor } from "../components/templates/TemplateEditor"; +import { useAuth } from "../contexts/AuthContext"; +import type { ContractTemplate } from "../types/templates"; +import { DEFAULT_TEMPLATES } from "../types/templates"; + +const STORAGE_KEY = "makima_contract_templates"; + +export default function TemplatesPage() { + const navigate = useNavigate(); + const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth(); + + const [templates, setTemplates] = useState(() => { + const saved = localStorage.getItem(STORAGE_KEY); + if (saved) { + try { + return JSON.parse(saved); + } catch { + return DEFAULT_TEMPLATES; + } + } + return DEFAULT_TEMPLATES; + }); + + const [editingTemplate, setEditingTemplate] = useState( + null + ); + const [showNewTemplateForm, setShowNewTemplateForm] = useState(false); + const [newTemplateName, setNewTemplateName] = useState(""); + const [newTemplateDescription, setNewTemplateDescription] = useState(""); + + // Redirect to login if not authenticated + useEffect(() => { + if (!authLoading && isAuthConfigured && !isAuthenticated) { + navigate("/login"); + } + }, [authLoading, isAuthConfigured, isAuthenticated, navigate]); + + const saveTemplates = (newTemplates: ContractTemplate[]) => { + setTemplates(newTemplates); + localStorage.setItem(STORAGE_KEY, JSON.stringify(newTemplates)); + }; + + const handleSaveTemplate = (updatedTemplate: ContractTemplate) => { + const newTemplates = templates.map((t) => + t.id === updatedTemplate.id ? updatedTemplate : t + ); + saveTemplates(newTemplates); + setEditingTemplate(null); + }; + + const handleCreateTemplate = () => { + if (!newTemplateName.trim()) return; + + const newTemplate: ContractTemplate = { + id: `custom-${Date.now()}`, + name: newTemplateName.trim(), + description: newTemplateDescription.trim() || "Custom contract template", + isBuiltIn: false, + phases: [ + { + id: `phase-${Date.now()}`, + name: "Execute", + deliverables: [], + }, + ], + }; + + saveTemplates([...templates, newTemplate]); + setNewTemplateName(""); + setNewTemplateDescription(""); + setShowNewTemplateForm(false); + }; + + const handleDeleteTemplate = (templateId: string) => { + const template = templates.find((t) => t.id === templateId); + if (template?.isBuiltIn) return; + + if (window.confirm(`Are you sure you want to delete "${template?.name}"?`)) { + saveTemplates(templates.filter((t) => t.id !== templateId)); + } + }; + + const handleResetToDefaults = () => { + if ( + window.confirm( + "Reset all templates to defaults? This will remove any custom templates." + ) + ) { + saveTemplates(DEFAULT_TEMPLATES); + } + }; + + // Show loading state + if (authLoading) { + return ( +
+
+ Loading... +
+
+ ); + } + + // Editor view + if (editingTemplate) { + return ( +
+ +
+ setEditingTemplate(null)} + /> +
+
+ ); + } + + return ( +
+ +
+ {/* Header */} +
+
+

+ Contract Templates +

+

+ Manage contract types and their phase deliverables +

+
+
+ + +
+
+ + {/* New Template Form */} + {showNewTemplateForm && ( +
+
+ setNewTemplateName(e.target.value)} + /> + setNewTemplateDescription(e.target.value)} + /> + + +
+
+ )} + + {/* Templates Grid */} +
+ {templates.map((template) => ( +
+ {/* Card Header */} +
+

{template.name}

+ {template.isBuiltIn ? ( + + Built-in + + ) : ( + + Custom + + )} +
+ + {/* Card Body */} +
+

+ {template.description} +

+ + {/* Phases */} +
+ {template.phases.map((phase, index) => ( +
+
+ + {index < template.phases.length - 1 && ( + + )} +
+
+ + {phase.name} + + + {phase.deliverables.length === 0 + ? "(no deliverables)" + : phase.deliverables.map((d) => d.name).join(", ")} + +
+
+ ))} +
+
+ + {/* Card Footer */} +
+ + {!template.isBuiltIn && ( + + )} +
+
+ ))} +
+
+
+ ); +} diff --git a/makima/frontend/src/types/templates.ts b/makima/frontend/src/types/templates.ts new file mode 100644 index 0000000..77ba89e --- /dev/null +++ b/makima/frontend/src/types/templates.ts @@ -0,0 +1,89 @@ +// Contract Template types +export interface Deliverable { + id: string; + name: string; +} + +export interface Phase { + id: string; + name: string; + deliverables: Deliverable[]; +} + +export interface ContractTemplate { + id: string; + name: string; + description: string; + phases: Phase[]; + isBuiltIn: boolean; +} + +// Default built-in templates +export const DEFAULT_TEMPLATES: ContractTemplate[] = [ + { + id: "simple", + name: "Simple", + description: "A simple contract with plan and execute phases.", + isBuiltIn: true, + phases: [ + { + id: "plan", + name: "Plan", + deliverables: [{ id: "plan-deliverable", name: "Plan" }], + }, + { + id: "execute", + name: "Execute", + deliverables: [{ id: "pr-deliverable", name: "PR" }], + }, + ], + }, + { + id: "specification", + name: "Specification", + description: + "A comprehensive contract with research, specification, planning, execution, and review phases.", + isBuiltIn: true, + phases: [ + { + id: "research", + name: "Research", + deliverables: [{ id: "research-notes", name: "Research Notes" }], + }, + { + id: "specify", + name: "Specify", + deliverables: [{ id: "requirements", name: "Requirements Document" }], + }, + { + id: "plan", + name: "Plan", + deliverables: [{ id: "plan-deliverable", name: "Plan" }], + }, + { + id: "execute", + name: "Execute", + deliverables: [{ id: "pr-deliverable", name: "PR" }], + }, + { + id: "review", + name: "Review", + deliverables: [{ id: "release-notes", name: "Release Notes" }], + }, + ], + }, + { + id: "execute", + name: "Execute", + description: + "A minimal contract with only an execute phase and no deliverables.", + isBuiltIn: true, + phases: [ + { + id: "execute", + name: "Execute", + deliverables: [], + }, + ], + }, +]; -- cgit v1.2.3