@abhinav2203/codeflow-canvas 0.1.0

package/src/components/file-tree.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import path from "node:path";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { useBlueprintStore } from "../store/blueprint-store.js";
+
+type FileNode = {
+  path: string;
+  name: string;
+  isDirectory: boolean;
+};
+
+type FileTreeNode = FileNode & {
+  children?: FileTreeNode[];
+  isExpanded: boolean;
+  isLoading: boolean;
+  error?: string;
+};
+
+type FileTreeProps = {
+  onFileSelect: (path: string) => void;
+  selectedPath?: string;
+};
+
+const FILE_LIST_API_ENDPOINT = "/api/files/list";
+
+async function fetchFileList(directoryPath: string, repoPath: string | null): Promise<FileNode[]> {
+  const headers: Record<string, string> = { "content-type": "application/json" };
+  if (repoPath) {
+    headers["x-codeflow-repo-path"] = repoPath;
+  }
+
+  const response = await fetch(FILE_LIST_API_ENDPOINT, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ path: directoryPath })
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch file list: ${response.statusText}`);
+  }
+
+  return (await response.json()) as FileNode[];
+}
+
+function sortEntries(entries: FileNode[]): FileNode[] {
+  return [...entries].sort((a, b) => {
+    if (a.isDirectory !== b.isDirectory) {
+      return a.isDirectory ? -1 : 1;
+    }
+
+    return a.name.localeCompare(b.name);
+  });
+}
+
+function createInitialRoot(repoPath: string | null): FileTreeNode {
+  return {
+    path: ".",
+    name: repoPath ? path.basename(repoPath) : "workspace",
+    isDirectory: true,
+    isExpanded: true,
+    isLoading: true,
+    children: undefined
+  };
+}
+
+function getFileBadge(name: string): string {
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+      return "TS";
+    case "tsx":
+      return "TSX";
+    case "js":
+      return "JS";
+    case "jsx":
+      return "JSX";
+    case "json":
+      return "{}";
+    case "md":
+      return "MD";
+    default:
+      return "·";
+  }
+}
+
+function FileTreeItem({
+  node,
+  depth,
+  onToggle,
+  onSelect,
+  selectedPath
+}: {
+  node: FileTreeNode;
+  depth: number;
+  onToggle: (path: string) => void;
+  onSelect: (path: string) => void;
+  selectedPath?: string;
+}) {
+  const indentationStyle = { paddingLeft: `${depth * 16 + 8}px` };
+
+  return (
+    <div className="file-tree-item">
+      <div
+        aria-expanded={node.isDirectory ? node.isExpanded : undefined}
+        aria-selected={!node.isDirectory ? node.path === selectedPath : undefined}
+        className={`file-tree-row ${node.isDirectory ? "directory" : "file"} ${!node.isDirectory ? "selectable" : ""}`}
+        onClick={() => (node.isDirectory ? onToggle(node.path) : onSelect(node.path))}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (node.isDirectory) {
+              onToggle(node.path);
+            } else {
+              onSelect(node.path);
+            }
+          }
+        }}
+        role="treeitem"
+        style={indentationStyle}
+        tabIndex={0}
+      >
+        {node.isDirectory ? (
+          <span className={`file-tree-chevron ${node.isExpanded ? "expanded" : ""}`}>
+            {node.isLoading ? "◌" : node.isExpanded ? "▼" : "▶"}
+          </span>
+        ) : null}
+        <span className={`file-tree-icon ${node.isDirectory ? "is-directory" : "is-file"}`}>
+          {node.isDirectory ? (node.isExpanded ? "dir" : "dir") : getFileBadge(node.name)}
+        </span>
+        <span className={`file-tree-name ${!node.isDirectory ? "file-name" : ""}`}>{node.name}</span>
+      </div>
+
+      {node.isDirectory && node.isExpanded ? (
+        <div className="file-tree-children" role="group">
+          {node.isLoading ? (
+            <div className="file-tree-loading" style={indentationStyle}>
+              Loading...
+            </div>
+          ) : node.error ? (
+            <div className="file-tree-error" style={indentationStyle}>
+              {node.error}
+            </div>
+          ) : node.children?.length ? (
+            node.children.map((child) => (
+              <FileTreeItem
+                key={child.path}
+                depth={depth + 1}
+                node={child}
+                onSelect={onSelect}
+                onToggle={onToggle}
+                selectedPath={selectedPath}
+              />
+            ))
+          ) : (
+            <div className="file-tree-empty" style={indentationStyle}>
+              Empty folder
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function FileTree({ onFileSelect, selectedPath }: FileTreeProps) {
+  const { repoPath } = useBlueprintStore();
+  const [rootNode, setRootNode] = useState<FileTreeNode>(() => createInitialRoot(repoPath));
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void fetchFileList(".", repoPath)
+      .then((entries) => {
+        if (cancelled) {
+          return;
+        }
+
+        setRootNode({
+          ...createInitialRoot(repoPath),
+          isLoading: false,
+          children: sortEntries(entries).map((entry) => ({
+            ...entry,
+            isExpanded: false,
+            isLoading: false
+          }))
+        });
+      })
+      .catch((error) => {
+        if (cancelled) {
+          return;
+        }
+
+        setRootNode({
+          ...createInitialRoot(repoPath),
+          isLoading: false,
+          error: error instanceof Error ? error.message : "Failed to load"
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [repoPath]);
+
+  const expandNode = useCallback(
+    (pathToExpand: string) => {
+      setRootNode((prevRoot) => {
+        const updateNode = (node: FileTreeNode): FileTreeNode => {
+          if (node.path !== pathToExpand) {
+            if (node.children) {
+              return { ...node, children: node.children.map(updateNode) };
+            }
+
+            return node;
+          }
+
+          if (!node.isDirectory || node.isLoading) {
+            return node;
+          }
+
+          if (node.children !== undefined) {
+            return { ...node, isExpanded: !node.isExpanded };
+          }
+
+          void (async () => {
+            try {
+              const files = sortEntries(await fetchFileList(pathToExpand, repoPath));
+              setRootNode((currentRoot) => {
+                const withChildren = (currentNode: FileTreeNode): FileTreeNode => {
+                  if (currentNode.path !== pathToExpand) {
+                    if (currentNode.children) {
+                      return { ...currentNode, children: currentNode.children.map(withChildren) };
+                    }
+
+                    return currentNode;
+                  }
+
+                  return {
+                    ...currentNode,
+                    error: undefined,
+                    isExpanded: true,
+                    isLoading: false,
+                    children: files.map((file) => ({
+                      ...file,
+                      isExpanded: false,
+                      isLoading: false
+                    }))
+                  };
+                };
+
+                return withChildren(currentRoot);
+              });
+            } catch (error) {
+              const errorMessage = error instanceof Error ? error.message : "Failed to load";
+              setRootNode((currentRoot) => {
+                const withError = (currentNode: FileTreeNode): FileTreeNode => {
+                  if (currentNode.path !== pathToExpand) {
+                    if (currentNode.children) {
+                      return { ...currentNode, children: currentNode.children.map(withError) };
+                    }
+
+                    return currentNode;
+                  }
+
+                  return {
+                    ...currentNode,
+                    error: errorMessage,
+                    isExpanded: true,
+                    isLoading: false
+                  };
+                };
+
+                return withError(currentRoot);
+              });
+            }
+          })();
+
+          return { ...node, error: undefined, isExpanded: true, isLoading: true };
+        };
+
+        return updateNode(prevRoot);
+      });
+    },
+    [repoPath]
+  );
+
+  return (
+    <div className="file-tree" role="tree">
+      <FileTreeItem
+        depth={0}
+        node={rootNode}
+        onSelect={onFileSelect}
+        onToggle={expandNode}
+        selectedPath={selectedPath}
+      />
+    </div>
+  );
+}

package/src/components/graph-canvas.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { memo, useEffect } from "react";
+
+import type { Edge, Node, NodeProps } from "@xyflow/react";
+import {
+  Background,
+  Controls,
+  Handle,
+  MarkerType,
+  MiniMap,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "@xyflow/react";
+
+import type { HeatmapData } from "../lib/heatmap.js";
+import type { BlueprintGraph, GhostNode } from "@abhinav2203/codeflow-core/schema";
+import { buildExecutionProjection, buildFlowEdges, buildFlowNodes, buildGhostFlowNodes } from "../lib/flow-view.js";
+import type {
+  FlowExecutionProjection,
+  FlowExecutionState,
+  FlowExecutionStatus,
+  FlowNodeData
+} from "../lib/flow-view.js";
+import type { RuntimeExecutionResult } from "@abhinav2203/codeflow-core/schema";
+
+type GraphCanvasProps = {
+  graph: BlueprintGraph | null;
+  selectedNodeId: string | null;
+  onSelect: (nodeId: string) => void;
+  nodes?: Array<Node<FlowNodeData>>;
+  edges?: Edge[];
+  onNodeDoubleClick?: (nodeId: string) => void;
+  emptyMessage?: string;
+  ghostNodes?: GhostNode[];
+  onGhostNodeClick?: (ghost: GhostNode) => void;
+  heatmapData?: HeatmapData;
+  activeNodeIds?: string[];
+  driftedNodeIds?: string[];
+  executionResult?: RuntimeExecutionResult | null;
+  detailMode?: boolean;
+  theme?: "light" | "dark";
+};
+
+const TRACE_STATUS_LABEL: Record<FlowNodeData["traceStatus"], string> = {
+  idle: "Ready",
+  success: "Synced",
+  warning: "Deploying",
+  error: "Invalid"
+};
+
+const EXECUTION_STATUS_LABEL: Record<FlowExecutionStatus, string> = {
+  idle: "Idle",
+  running: "Running",
+  pending: "Pending",
+  passed: "Passed",
+  failed: "Failed",
+  blocked: "Blocked",
+  skipped: "Skipped",
+  warning: "Warning"
+};
+
+const EXECUTION_STATUS_TONE: Record<Exclude<FlowExecutionStatus, "idle">, string> = {
+  running: "#2563eb",
+  pending: "#64748b",
+  passed: "#15803d",
+  failed: "#dc2626",
+  blocked: "#d97706",
+  skipped: "#64748b",
+  warning: "#c2410c"
+};
+
+const HEALTH_STATUS_LABEL: Record<FlowNodeData["healthState"], string> = {
+  neutral: "Stable",
+  aligned: "Aligned",
+  drift: "Drift",
+  heal: "Heal",
+  ghost: "Ghost"
+};
+
+const mergeClassNames = (...classNames: Array<string | undefined>) =>
+  classNames.filter(Boolean).join(" ").trim();
+
+const getExecutionTone = (status?: FlowExecutionStatus): string | undefined => {
+  if (!status || status === "idle") {
+    return undefined;
+  }
+
+  return EXECUTION_STATUS_TONE[status];
+};
+
+const resolveExecutionFromNode = (
+  node: Node<FlowNodeData>,
+  projection: FlowExecutionProjection | null,
+  graph?: BlueprintGraph | null
+): FlowExecutionState | undefined => {
+  if (node.data.execution && node.data.execution.status !== "idle") {
+    return node.data.execution;
+  }
+
+  if (!projection) {
+    return undefined;
+  }
+
+  if (node.data.drilldownNodeId && projection.nodeStates[node.data.drilldownNodeId]?.status) {
+    return projection.nodeStates[node.data.drilldownNodeId];
+  }
+
+  if (projection.nodeStates[node.id]?.status) {
+    return projection.nodeStates[node.id];
+  }
+
+  if (node.id.startsWith("detail:root:")) {
+    const rootNodeId = node.id.slice("detail:root:".length);
+    return projection.nodeStates[rootNodeId];
+  }
+
+  if (node.id.startsWith("detail:blueprint:")) {
+    const blueprintNodeId = node.id.slice("detail:blueprint:".length);
+    return projection.nodeStates[blueprintNodeId];
+  }
+
+  if (node.id.startsWith("detail:method:") && graph) {
+    const suffix = node.id.slice("detail:method:".length);
+    const lastSeparator = suffix.lastIndexOf(":");
+    const rootNodeId = lastSeparator >= 0 ? suffix.slice(0, lastSeparator) : suffix;
+    return projection.nodeStates[rootNodeId];
+  }
+
+  return undefined;
+};
+
+const PolicyNode = memo(function PolicyNode({ data, selected }: NodeProps<Node<FlowNodeData>>) {
+  const executionStatus = data.execution?.status ?? "idle";
+  const executionTone = getExecutionTone(executionStatus);
+
+  return (
+    <>
+      <Handle className="policy-node-handle" position={Position.Left} type="target" />
+      <div
+        className={[
+          "policy-node-card",
+          `policy-node-${data.traceStatus}`,
+          `policy-node-health-${data.healthState}`,
+          executionStatus !== "idle" ? `policy-node-execution-${executionStatus}` : "",
+          data.isActiveBatch ? "is-batch-focus" : "",
+          data.isGhost ? "is-ghost" : "",
+          selected ? "is-selected" : ""
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <div className="policy-node-topline">
+          <span className="policy-node-kind">{data.kind}</span>
+          <div className="policy-node-pills">
+            {data.isActiveBatch ? <span className="policy-node-badge policy-node-badge-batch">Batch focus</span> : null}
+            <span className="policy-node-badge policy-node-badge-health">{HEALTH_STATUS_LABEL[data.healthState]}</span>
+            {executionStatus !== "idle" ? (
+              <span
+                className={`policy-node-badge policy-node-badge-execution policy-node-badge-execution-${executionStatus}`}
+                style={executionTone ? { borderColor: executionTone, color: executionTone } : undefined}
+              >
+                {EXECUTION_STATUS_LABEL[executionStatus]}
+              </span>
+            ) : null}
+            <span className="policy-node-status">{TRACE_STATUS_LABEL[data.traceStatus]}</span>
+          </div>
+        </div>
+        <h3>{data.label}</h3>
+        <p>{data.summary || "Select this node to inspect its policy contract, runtime, and generated implementation."}</p>
+        {data.execution?.message ? <p className="policy-node-execution-message">{data.execution.message}</p> : null}
+        <div className="policy-node-footer">
+          <span>{data.drilldownNodeId ? "Double-click for internals" : "Click to inspect"}</span>
+          {data.selected ? <span>Focused</span> : null}
+        </div>
+      </div>
+      <Handle className="policy-node-handle" position={Position.Right} type="source" />
+    </>
+  );
+});
+
+const nodeTypes = {
+  policyNode: PolicyNode
+};
+
+function GraphViewportSync({
+  edgeCount,
+  nodeCount
+}: {
+  edgeCount: number;
+  nodeCount: number;
+}) {
+  const { fitView } = useReactFlow();
+
+  useEffect(() => {
+    if (!nodeCount) {
+      return;
+    }
+
+    const frameId = window.requestAnimationFrame(() => {
+      void fitView({ duration: 220, padding: 0.18 });
+    });
+
+    return () => window.cancelAnimationFrame(frameId);
+  }, [edgeCount, fitView, nodeCount]);
+
+  return null;
+}
+
+export function GraphCanvas({
+  graph,
+  selectedNodeId,
+  onSelect,
+  nodes,
+  edges,
+  onNodeDoubleClick,
+  emptyMessage,
+  ghostNodes,
+  onGhostNodeClick,
+  heatmapData,
+  activeNodeIds,
+  driftedNodeIds,
+  executionResult,
+  detailMode = false,
+  theme = "light"
+}: GraphCanvasProps) {
+  const executionProjection = graph ? buildExecutionProjection(graph, executionResult) : null;
+  const baseFlowNodes =
+    nodes ??
+    (graph
+      ? buildFlowNodes(graph, selectedNodeId ?? undefined, heatmapData, activeNodeIds, driftedNodeIds, executionResult)
+      : []);
+  const typedBaseFlowNodes = baseFlowNodes.map((node) => {
+    const execution = executionProjection ? resolveExecutionFromNode(node, executionProjection, graph) : undefined;
+
+    return {
+      ...node,
+      type: node.type ?? "policyNode",
+      data: execution
+        ? {
+            ...node.data,
+            execution: node.data.execution ?? execution
+          }
+        : node.data
+    };
+  });
+  const ghostFlowNodes =
+    ghostNodes && ghostNodes.length > 0 ? buildGhostFlowNodes(ghostNodes, typedBaseFlowNodes) : [];
+  const flowNodes = [...typedBaseFlowNodes, ...ghostFlowNodes];
+  const flowEdges = edges ?? (graph ? buildFlowEdges(graph, activeNodeIds, executionResult) : []);
+
+  const nodeMap = new Map(flowNodes.map((node) => [node.id, node]));
+
+  const decoratedFlowEdges = flowEdges.map((edge) => {
+    const execution = executionProjection?.edgeStates[edge.id];
+    const sourceNode = nodeMap.get(edge.source);
+    const targetNode = nodeMap.get(edge.target);
+    const inferredStatus =
+      execution?.status && execution.status !== "idle"
+        ? execution.status
+        : sourceNode?.data.execution?.status === "failed" || targetNode?.data.execution?.status === "failed"
+          ? "failed"
+          : sourceNode?.data.execution?.status === "blocked" || targetNode?.data.execution?.status === "blocked"
+            ? "blocked"
+            : sourceNode?.data.execution?.status === "running" || targetNode?.data.execution?.status === "running"
+              ? "running"
+              : sourceNode?.data.execution?.status === "warning" || targetNode?.data.execution?.status === "warning"
+                ? "warning"
+                : sourceNode?.data.execution?.status === "passed" && targetNode?.data.execution?.status === "passed"
+                  ? "passed"
+                  : sourceNode?.data.execution?.status === "skipped" || targetNode?.data.execution?.status === "skipped"
+                    ? "skipped"
+                    : undefined;
+
+    if (!inferredStatus) {
+      return edge;
+    }
+
+    const executionTone = getExecutionTone(inferredStatus);
+
+    return {
+      ...edge,
+      className: mergeClassNames(edge.className, `edge-flow-${inferredStatus}`),
+      animated: edge.animated || inferredStatus === "running",
+      style: {
+        ...edge.style,
+        stroke: executionTone ?? edge.style?.stroke,
+        strokeDasharray:
+          inferredStatus === "blocked"
+            ? "6 5"
+            : inferredStatus === "running"
+              ? "4 4"
+              : inferredStatus === "warning"
+                ? "8 4"
+                : inferredStatus === "skipped"
+                  ? "10 6"
+                  : edge.style?.strokeDasharray
+      }
+    };
+  });
+
+  if (!graph && flowNodes.length === 0) {
+    return (
+      <div className="canvas-empty">
+        <p>{emptyMessage ?? "Build a blueprint from an AI prompt, PRD text, or a JavaScript/TypeScript repo."}</p>
+      </div>
+    );
+  }
+
+  const handleNodeClick = (_: React.MouseEvent, node: Node<FlowNodeData>) => {
+    if (node.data.ghost && onGhostNodeClick) {
+      const ghost = ghostNodes?.find((g) => g.id === node.id);
+      if (ghost) {
+        onGhostNodeClick(ghost);
+        return;
+      }
+    }
+
+    onSelect(node.id);
+  };
+
+  return (
+    <ReactFlowProvider>
+      <div className={`canvas-shell ${detailMode ? "canvas-shell-detail" : ""}`}>
+        <ReactFlow
+          fitView
+          fitViewOptions={{ padding: 0.18 }}
+          minZoom={0.35}
+          maxZoom={1.8}
+          nodes={flowNodes}
+          edges={decoratedFlowEdges}
+          nodeTypes={nodeTypes}
+          className="graph-flow"
+          defaultEdgeOptions={{
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: theme === "dark" ? "#6fe0d8" : "#15786f"
+            }
+          }}
+          onNodeClick={handleNodeClick}
+          onNodeDoubleClick={(_, node) => onNodeDoubleClick?.(node.id)}
+        >
+          <GraphViewportSync edgeCount={decoratedFlowEdges.length} nodeCount={flowNodes.length} />
+          <MiniMap
+            pannable
+            zoomable
+            nodeBorderRadius={10}
+            maskColor={theme === "dark" ? "rgba(5, 10, 20, 0.76)" : "rgba(255, 255, 255, 0.75)"}
+            nodeColor={(node) => {
+              const data = (node as Node<FlowNodeData>).data;
+              const executionColor = getExecutionTone(data?.execution?.status);
+
+              if (executionColor) {
+                return executionColor;
+              }
+
+              if (data?.isActiveBatch) {
+                return theme === "dark" ? "#67e2db" : "#15786f";
+              }
+
+              switch (data?.healthState) {
+                case "aligned":
+                  return theme === "dark" ? "#4ade80" : "#15803d";
+                case "drift":
+                  return theme === "dark" ? "#fbbf24" : "#c67a00";
+                case "heal":
+                  return theme === "dark" ? "#fb7185" : "#cf3b57";
+                case "ghost":
+                  return theme === "dark" ? "#64748b" : "#94a3b8";
+                default:
+                  return theme === "dark" ? "#27456c" : "#d7e7fc";
+              }
+            }}
+            nodeStrokeColor={(node) => {
+              const data = (node as Node<FlowNodeData>).data;
+              const executionColor = getExecutionTone(data?.execution?.status);
+
+              if (executionColor) {
+                return executionColor;
+              }
+
+              return data?.isActiveBatch
+                ? theme === "dark"
+                  ? "#a7fff8"
+                  : "#0f766e"
+                : theme === "dark"
+                  ? "rgba(167, 194, 236, 0.45)"
+                  : "rgba(44, 66, 101, 0.22)";
+            }}
+            nodeStrokeWidth={2}
+          />
+          <Controls />
+          <Background
+            color={theme === "dark" ? "rgba(138, 173, 222, 0.12)" : "rgba(26, 42, 67, 0.08)"}
+            gap={24}
+            size={1.2}
+          />
+        </ReactFlow>
+      </div>
+    </ReactFlowProvider>
+  );
+}