Add new directive initial implementation

2 files changed, 335 insertions, 0 deletions

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<DirectiveStatus, string> = {
+  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 (
+    <div className="p-3 border border-dashed border-[rgba(117,170,252,0.25)] bg-[rgba(117,170,252,0.03)]">
+      <div className="flex items-center justify-between mb-1">
+        <span className="font-mono text-xs text-[#dbe7ff]">{chain.name}</span>
+        <span className="font-mono text-[10px] text-[#7788aa] uppercase">
+          gen {chain.generation} &middot; {chain.status}
+        </span>
+      </div>
+      {chain.description && (
+        <p className="font-mono text-[11px] text-[#7788aa] mb-1">
+          {chain.description}
+        </p>
+      )}
+      <div className="flex gap-3 font-mono text-[10px] text-[#7788aa]">
+        <span>
+          {chain.completedSteps}/{chain.totalSteps} steps
+        </span>
+        {chain.failedSteps > 0 && (
+          <span className="text-red-400">{chain.failedSteps} failed</span>
+        )}
+        {chain.currentConfidence != null && (
+          <span>confidence: {(chain.currentConfidence * 100).toFixed(0)}%</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function JsonSection({
+  label,
+  data,
+}: {
+  label: string;
+  data: unknown[] | unknown;
+}) {
+  const items = Array.isArray(data) ? data : [];
+  if (items.length === 0) return null;
+
+  return (
+    <div>
+      <h4 className="font-mono text-[10px] text-[#75aafc] uppercase tracking-wider mb-1">
+        {label}
+      </h4>
+      <div className="font-mono text-xs text-[#9bb8d8] bg-[rgba(0,0,0,0.2)] p-2 max-h-32 overflow-y-auto">
+        {items.map((item, i) => (
+          <div key={i} className="mb-0.5">
+            {typeof item === "string" ? item : JSON.stringify(item)}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function DirectiveDetail({
+  directive,
+  onBack,
+  onDelete,
+}: DirectiveDetailProps) {
+  return (
+    <div className="panel h-full flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
+        <div className="flex items-center gap-2 mb-2">
+          <button
+            onClick={onBack}
+            className="font-mono text-xs text-[#75aafc] hover:text-white transition-colors"
+          >
+            &larr; Back
+          </button>
+          <span
+            className={`font-mono text-[10px] uppercase ${
+              statusColors[directive.status as DirectiveStatus] || "text-[#888]"
+            }`}
+          >
+            {directive.status}
+          </span>
+          <span className="font-mono text-[10px] text-[#7788aa]">
+            v{directive.version}
+          </span>
+          {onDelete && (
+            <button
+              onClick={() => onDelete(directive.id)}
+              className="ml-auto font-mono text-[10px] text-red-400 hover:text-red-300 transition-colors uppercase"
+            >
+              Delete
+            </button>
+          )}
+        </div>
+        <h2 className="font-mono text-sm text-[#dbe7ff]">
+          {directive.title}
+        </h2>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Goal */}
+        <div>
+          <h4 className="font-mono text-[10px] text-[#75aafc] uppercase tracking-wider mb-1">
+            Goal
+          </h4>
+          <p className="font-mono text-xs text-[#9bb8d8] whitespace-pre-wrap">
+            {directive.goal}
+          </p>
+        </div>
+
+        {/* Config */}
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <span className="font-mono text-[10px] text-[#7788aa] uppercase">
+              Autonomy
+            </span>
+            <div className="font-mono text-xs text-[#dbe7ff]">
+              {directive.autonomyLevel}
+            </div>
+          </div>
+          <div>
+            <span className="font-mono text-[10px] text-[#7788aa] uppercase">
+              Chains
+            </span>
+            <div className="font-mono text-xs text-[#dbe7ff]">
+              {directive.chainGenerationCount} generated
+            </div>
+          </div>
+          <div>
+            <span className="font-mono text-[10px] text-[#7788aa] uppercase">
+              Cost
+            </span>
+            <div className="font-mono text-xs text-[#dbe7ff]">
+              ${directive.totalCostUsd.toFixed(2)}
+            </div>
+          </div>
+          {directive.repositoryUrl && (
+            <div>
+              <span className="font-mono text-[10px] text-[#7788aa] uppercase">
+                Repository
+              </span>
+              <div className="font-mono text-xs text-[#dbe7ff] truncate">
+                {directive.repositoryUrl}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Structured sections */}
+        <JsonSection label="Requirements" data={directive.requirements} />
+        <JsonSection
+          label="Acceptance Criteria"
+          data={directive.acceptanceCriteria}
+        />
+        <JsonSection label="Constraints" data={directive.constraints} />
+        <JsonSection
+          label="External Dependencies"
+          data={directive.externalDependencies}
+        />
+
+        {/* Chains */}
+        <div>
+          <h4 className="font-mono text-[10px] text-[#75aafc] uppercase tracking-wider mb-2">
+            Chains ({directive.chains.length})
+          </h4>
+          {directive.chains.length === 0 ? (
+            <p className="font-mono text-xs text-[#7788aa]">
+              No chains yet. Chains are created during planning.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {directive.chains.map((chain) => (
+                <ChainCard key={chain.id} chain={chain} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx
new file mode 100644
index 0000000..a900b7b
--- /dev/null
+++ b/makima/frontend/src/components/directives/DirectiveList.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import type { DirectiveSummary, DirectiveStatus } from "../../lib/api";
+
+interface DirectiveListProps {
+  directives: DirectiveSummary[];
+  loading: boolean;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+  onDelete?: (directive: DirectiveSummary) => void;
+  selectedId?: string;
+}
+
+const statusColors: Record<DirectiveStatus, string> = {
+  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",
+};
+
+export function DirectiveList({
+  directives,
+  loading,
+  onSelect,
+  onCreate,
+  onDelete,
+  selectedId,
+}: DirectiveListProps) {
+  const [filter, setFilter] = useState<DirectiveStatus | "all">("all");
+
+  const filteredDirectives =
+    filter === "all"
+      ? directives
+      : directives.filter((d) => d.status === filter);
+
+  if (loading) {
+    return (
+      <div className="panel h-full flex items-center justify-center">
+        <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="panel h-full flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="font-mono text-sm text-[#75aafc] uppercase tracking-wider">
+            Directives
+          </h2>
+          <button
+            onClick={onCreate}
+            className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
+          >
+            + New
+          </button>
+        </div>
+        {/* Filter tabs */}
+        <div className="flex gap-1 flex-wrap">
+          {(["all", "draft", "planning", "active", "paused", "completed", "failed"] as const).map(
+            (status) => (
+              <button
+                key={status}
+                onClick={() => setFilter(status)}
+                className={`px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider border transition-colors ${
+                  filter === status
+                    ? "bg-[#0f3c78] border-[#3f6fb3] text-[#dbe7ff]"
+                    : "bg-transparent border-[rgba(117,170,252,0.2)] text-[#7788aa] hover:border-[rgba(117,170,252,0.4)]"
+                }`}
+              >
+                {status}
+              </button>
+            )
+          )}
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto">
+        {filteredDirectives.length === 0 ? (
+          <div className="p-4 text-center">
+            <p className="font-mono text-sm text-[#7788aa]">
+              {directives.length === 0
+                ? "No directives yet"
+                : "No matching directives"}
+            </p>
+          </div>
+        ) : (
+          filteredDirectives.map((directive) => (
+            <div
+              key={directive.id}
+              onClick={() => onSelect(directive.id)}
+              onContextMenu={(e) => {
+                if (onDelete) {
+                  e.preventDefault();
+                }
+              }}
+              className={`p-3 border-b border-dashed border-[rgba(117,170,252,0.15)] cursor-pointer transition-colors hover:bg-[rgba(117,170,252,0.05)] ${
+                selectedId === directive.id
+                  ? "bg-[rgba(117,170,252,0.1)]"
+                  : ""
+              }`}
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="font-mono text-sm text-[#dbe7ff] truncate">
+                    {directive.title}
+                  </div>
+                  <div className="font-mono text-xs text-[#7788aa] mt-0.5 line-clamp-2">
+                    {directive.goal}
+                  </div>
+                </div>
+                <div className="flex flex-col items-end gap-1 shrink-0">
+                  <span
+                    className={`font-mono text-[10px] uppercase ${
+                      statusColors[directive.status] || "text-[#888]"
+                    }`}
+                  >
+                    {directive.status}
+                  </span>
+                  <span className="font-mono text-[10px] text-[#7788aa]">
+                    {directive.chainCount}ch / {directive.stepCount}st
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}