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 --- .../src/components/directives/DirectiveDetail.tsx | 200 +++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 makima/frontend/src/components/directives/DirectiveDetail.tsx (limited to 'makima/frontend/src/components/directives/DirectiveDetail.tsx') 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) => ( + + ))} +
+ )} +
+
+
+ ); +} -- cgit v1.2.3