feat: soryu-co/soryu - makima: Filter phase orbs by contract type in PhaseProgressBar

3 files changed, 15 insertions, 7 deletions

diff --git a/makima/frontend/src/components/contracts/ContractDetail.tsx b/makima/frontend/src/components/contracts/ContractDetail.tsx
index 46b2212..02c129e 100644
--- a/makima/frontend/src/components/contracts/ContractDetail.tsx
+++ b/makima/frontend/src/components/contracts/ContractDetail.tsx
@@ -195,6 +195,7 @@ export function ContractDetail({
         <div className="mt-4 pt-4 border-t border-dashed border-[rgba(117,170,252,0.2)]">
           <PhaseProgressBar
             currentPhase={contract.phase}
+            contractType={contract.contractType}
             onPhaseClick={onPhaseChange}
           />
         </div>
diff --git a/makima/frontend/src/components/contracts/ContractList.tsx b/makima/frontend/src/components/contracts/ContractList.tsx
index 4388283..1eee6a3 100644
--- a/makima/frontend/src/components/contracts/ContractList.tsx
+++ b/makima/frontend/src/components/contracts/ContractList.tsx
@@ -153,7 +153,7 @@ export function ContractList({
                 )}
 
                 <div className="flex items-center justify-between">
-                  <PhaseProgressBarCompact currentPhase={contract.phase} />
+                  <PhaseProgressBarCompact currentPhase={contract.phase} contractType={contract.contractType} />
                   <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]">
                     {contract.fileCount > 0 && (
                       <span>{contract.fileCount} files</span>
diff --git a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
index 5ee7999..9589db9 100644
--- a/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
+++ b/makima/frontend/src/components/contracts/PhaseProgressBar.tsx
@@ -1,7 +1,9 @@
-import type { ContractPhase } from "../../lib/api";
+import type { ContractPhase, ContractType } from "../../lib/api";
+import { getValidPhases } from "../../lib/api";
 
 interface PhaseProgressBarProps {
   currentPhase: ContractPhase;
+  contractType?: ContractType;
   onPhaseClick?: (phase: ContractPhase) => void;
   readonly?: boolean;
 }
@@ -46,14 +48,16 @@ const phaseColors: Record<ContractPhase, { active: string; inactive: string; com
 
 export function PhaseProgressBar({
   currentPhase,
+  contractType,
   onPhaseClick,
   readonly = false,
 }: PhaseProgressBarProps) {
-  const currentIndex = phases.indexOf(currentPhase);
+  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
+  const currentIndex = visiblePhases.indexOf(currentPhase);
 
   return (
     <div className="flex items-center gap-1">
-      {phases.map((phase, index) => {
+      {visiblePhases.map((phase, index) => {
         const isActive = phase === currentPhase;
         const isCompleted = index < currentIndex;
         const colors = phaseColors[phase];
@@ -97,7 +101,7 @@ export function PhaseProgressBar({
             </button>
 
             {/* Connector line */}
-            {index < phases.length - 1 && (
+            {index < visiblePhases.length - 1 && (
               <div
                 className={`
                   w-8 h-0.5 mx-1
@@ -114,14 +118,17 @@ export function PhaseProgressBar({
 
 export function PhaseProgressBarCompact({
   currentPhase,
+  contractType,
 }: {
   currentPhase: ContractPhase;
+  contractType?: ContractType;
 }) {
-  const currentIndex = phases.indexOf(currentPhase);
+  const visiblePhases = contractType ? getValidPhases(contractType) : phases;
+  const currentIndex = visiblePhases.indexOf(currentPhase);
 
   return (
     <div className="flex items-center gap-0.5">
-      {phases.map((phase, index) => {
+      {visiblePhases.map((phase, index) => {
         const isActive = phase === currentPhase;
         const isCompleted = index < currentIndex;
         const colors = phaseColors[phase];