1 files changed, 73 insertions, 0 deletions
diff --git a/makima/frontend/src/components/directives/OverviewTab.tsx b/makima/frontend/src/components/directives/OverviewTab.tsx
new file mode 100644
index 0000000..41cd7dc
--- /dev/null
+++ b/makima/frontend/src/components/directives/OverviewTab.tsx
@@ -0,0 +1,73 @@
+import type { DirectiveWithProgress } from "../../lib/api";
+
+export function OverviewTab({ directive }: { directive: DirectiveWithProgress }) {
+  return (
+    <div className="space-y-6">
+      {/* Goal */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Goal</h3>
+        <p className="font-mono text-sm text-[#dbe7ff] whitespace-pre-wrap">
+          {directive.goal}
+        </p>
+      </div>
+
+      {/* Progress */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Progress</h3>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.completedSteps || 0}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Completed Steps</div>
+          </div>
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.totalSteps || 0}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Total Steps</div>
+          </div>
+          <div className="p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
+            <div className="font-mono text-2xl text-[#dbe7ff]">
+              {directive.chain?.currentConfidence != null
+                ? `${Math.round((directive.chain?.currentConfidence ?? 0) * 100)}%`
+                : "-"}
+            </div>
+            <div className="font-mono text-[10px] text-[#556677] uppercase">Confidence</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Configuration */}
+      <div>
+        <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Configuration</h3>
+        <div className="grid grid-cols-2 gap-2 text-sm">
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Autonomy Level</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.autonomyLevel}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Max Rework Cycles</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.maxReworkCycles}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Green Threshold</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.confidenceThresholdGreen}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="font-mono text-[#556677]">Yellow Threshold</span>
+            <span className="font-mono text-[#dbe7ff]">{directive.confidenceThresholdYellow}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Repository */}
+      {directive.repositoryUrl && (
+        <div>
+          <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">Repository</h3>
+          <p className="font-mono text-sm text-[#9bc3ff]">{directive.repositoryUrl}</p>
+        </div>
+      )}
+    </div>
+  );
+}