1 files changed, 0 insertions, 212 deletions
diff --git a/makima/frontend/src/components/directives/ChainTab.tsx b/makima/frontend/src/components/directives/ChainTab.tsx
deleted file mode 100644
index ccefe81..0000000
--- a/makima/frontend/src/components/directives/ChainTab.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import { useState, useMemo } from "react";
-import {
-  ReactFlow,
-  Edge,
-  Controls,
-  Background,
-  BackgroundVariant,
-  MarkerType,
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import type { DirectiveWithProgress, DirectiveGraphResponse } from "../../lib/api";
-import { StepNodeComponent, stepStatusStyles } from "./StepNode";
-
-// Node types for React Flow
-const nodeTypes = {
-  step: StepNodeComponent,
-};
-
-export function ChainTab({ directive, graph }: { directive: DirectiveWithProgress; graph: DirectiveGraphResponse | null }) {
-  const [viewMode, setViewMode] = useState<"dag" | "list">("dag");
-
-  // Convert graph to React Flow nodes and edges
-  const { nodes, edges } = useMemo(() => {
-    if (!graph || !graph.nodes.length) {
-      // Fallback: generate positions from directive.steps
-      const stepNodes = directive.steps.map((step, index) => ({
-        id: step.id,
-        type: "step" as const,
-        position: {
-          x: (index % 3) * 220 + 50,
-          y: Math.floor(index / 3) * 120 + 50,
-        },
-        data: {
-          id: step.id,
-          name: step.name,
-          stepType: step.stepType,
-          status: step.status,
-          confidenceScore: step.confidenceScore,
-          confidenceLevel: step.confidenceLevel,
-          contractId: step.contractId,
-          editorX: null,
-          editorY: null,
-        },
-      }));
-
-      // Build edges from dependencies
-      const stepEdges: Edge[] = [];
-      directive.steps.forEach((step) => {
-        (step.dependsOn ?? []).forEach((depName) => {
-          const depStep = directive.steps.find((s) => s.name === depName);
-          if (depStep) {
-            stepEdges.push({
-              id: `${depStep.id}-${step.id}`,
-              source: depStep.id,
-              target: step.id,
-              type: "smoothstep",
-              markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" },
-              style: { stroke: "#556677", strokeWidth: 2 },
-            });
-          }
-        });
-      });
-
-      return { nodes: stepNodes, edges: stepEdges };
-    }
-
-    // Use graph data
-    const graphNodes = graph.nodes.map((node) => ({
-      id: node.id,
-      type: "step" as const,
-      position: {
-        x: node.editorX ?? 50,
-        y: node.editorY ?? 50,
-      },
-      data: { ...node },
-    }));
-
-    const graphEdges: Edge[] = graph.edges.map((edge) => ({
-      id: `${edge.source}-${edge.target}`,
-      source: edge.source,
-      target: edge.target,
-      type: "smoothstep",
-      markerEnd: { type: MarkerType.ArrowClosed, color: "#556677" },
-      style: { stroke: "#556677", strokeWidth: 2 },
-    }));
-
-    return { nodes: graphNodes, edges: graphEdges };
-  }, [graph, directive.steps]);
-
-  if (!directive.chain) {
-    return (
-      <div className="text-center py-8">
-        <p className="font-mono text-sm text-[#556677]">
-          No chain generated yet. Start the directive to generate a chain.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Chain info header */}
-      <div className="flex items-center justify-between p-3 bg-[rgba(117,170,252,0.05)] border border-[rgba(117,170,252,0.15)]">
-        <div>
-          <div className="font-mono text-sm text-[#dbe7ff]">{directive.chain.name}</div>
-          <div className="font-mono text-[10px] text-[#556677]">Generation {directive.chain.generation}</div>
-        </div>
-        <div className="flex items-center gap-4">
-          <div className="font-mono text-xs text-[#556677]">
-            {directive.chain.completedSteps}/{directive.chain.totalSteps} steps
-          </div>
-          {/* View toggle */}
-          <div className="flex border border-[rgba(117,170,252,0.2)]">
-            <button
-              onClick={() => setViewMode("dag")}
-              className={`px-2 py-1 font-mono text-[10px] uppercase ${
-                viewMode === "dag"
-                  ? "bg-[rgba(117,170,252,0.2)] text-[#75aafc]"
-                  : "text-[#556677] hover:text-[#75aafc]"
-              }`}
-            >
-              DAG
-            </button>
-            <button
-              onClick={() => setViewMode("list")}
-              className={`px-2 py-1 font-mono text-[10px] uppercase ${
-                viewMode === "list"
-                  ? "bg-[rgba(117,170,252,0.2)] text-[#75aafc]"
-                  : "text-[#556677] hover:text-[#75aafc]"
-              }`}
-            >
-              List
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {viewMode === "dag" ? (
-        /* DAG visualization */
-        <div className="h-[400px] border border-[rgba(117,170,252,0.1)] rounded bg-[#050d18]">
-          {directive.steps.length === 0 ? (
-            <div className="flex items-center justify-center h-full">
-              <p className="font-mono text-sm text-[#556677]">No steps in chain</p>
-            </div>
-          ) : (
-            <ReactFlow
-              nodes={nodes}
-              edges={edges}
-              nodeTypes={nodeTypes}
-              fitView
-              fitViewOptions={{ padding: 0.2 }}
-              minZoom={0.5}
-              maxZoom={1.5}
-              defaultEdgeOptions={{
-                type: "smoothstep",
-                style: { stroke: "#556677", strokeWidth: 2 },
-              }}
-            >
-              <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#1a2a3a" />
-              <Controls className="!bg-[#0a1628] !border-[rgba(117,170,252,0.2)]" />
-            </ReactFlow>
-          )}
-        </div>
-      ) : (
-        /* List view */
-        <div className="space-y-2">
-          <h3 className="font-mono text-xs text-[#75aafc] uppercase">Steps</h3>
-          {directive.steps.length === 0 ? (
-            <p className="font-mono text-sm text-[#556677]">No steps in chain</p>
-          ) : (
-            directive.steps.map((step) => {
-              const styles = stepStatusStyles[step.status] || stepStatusStyles.pending;
-
-              return (
-                <div
-                  key={step.id}
-                  className="p-3 bg-[rgba(117,170,252,0.02)] border border-[rgba(117,170,252,0.1)]"
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <span className="font-mono text-sm text-[#dbe7ff]">{step.name}</span>
-                      <span
-                        className="px-1.5 py-0.5 font-mono text-[10px] uppercase border"
-                        style={{ color: styles.text, borderColor: `${styles.border}50` }}
-                      >
-                        {step.status}
-                      </span>
-                      {step.confidenceScore !== null && (
-                        <span className="font-mono text-[10px] text-[#556677]">
-                          ({Math.round(step.confidenceScore * 100)}%)
-                        </span>
-                      )}
-                    </div>
-                    <div className="font-mono text-[10px] text-[#556677]">{step.stepType}</div>
-                  </div>
-                  {step.description && (
-                    <p className="font-mono text-xs text-[#556677] mt-1">{step.description}</p>
-                  )}
-                  {step.dependsOn?.length > 0 && (
-                    <div className="font-mono text-[10px] text-[#556677] mt-1">
-                      Depends on: {step.dependsOn.join(", ")}
-                    </div>
-                  )}
-                </div>
-              );
-            })
-          )}
-        </div>
-      )}
-    </div>
-  );
-}