1 files changed, 54 insertions, 0 deletions
diff --git a/makima/frontend/src/components/workflow/WorkflowBoard.tsx b/makima/frontend/src/components/workflow/WorkflowBoard.tsx
new file mode 100644
index 0000000..af4aec7
--- /dev/null
+++ b/makima/frontend/src/components/workflow/WorkflowBoard.tsx
@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import type { ContractSummary, ContractPhase } from "../../lib/api";
+import { PhaseColumn } from "./PhaseColumn";
+
+interface WorkflowBoardProps {
+  contracts: ContractSummary[];
+  onContractClick: (contractId: string) => void;
+  onPhaseChange: (contractId: string, newPhase: ContractPhase) => void;
+}
+
+const phases: ContractPhase[] = ["research", "specify", "plan", "execute", "review"];
+
+export function WorkflowBoard({
+  contracts,
+  onContractClick,
+  onPhaseChange,
+}: WorkflowBoardProps) {
+  // Group contracts by phase
+  const contractsByPhase = useMemo(() => {
+    const grouped: Record<ContractPhase, ContractSummary[]> = {
+      research: [],
+      specify: [],
+      plan: [],
+      execute: [],
+      review: [],
+    };
+
+    for (const contract of contracts) {
+      const phase = contract.phase as ContractPhase;
+      if (grouped[phase]) {
+        grouped[phase].push(contract);
+      } else {
+        // Default to research if unknown phase
+        grouped.research.push(contract);
+      }
+    }
+
+    return grouped;
+  }, [contracts]);
+
+  return (
+    <div className="flex gap-2 h-full overflow-x-auto">
+      {phases.map((phase) => (
+        <PhaseColumn
+          key={phase}
+          phase={phase}
+          contracts={contractsByPhase[phase]}
+          onContractClick={onContractClick}
+          onDrop={onPhaseChange}
+        />
+      ))}
+    </div>
+  );
+}