@abhinav2203/codeflow-canvas 0.1.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@abhinav2203/codeflow-canvas",
+  "version": "0.1.0",
+  "private": false,
+  "description": "React Flow graph canvas with Monaco code editors and IDE layout components",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./flow-view": { "types": "./dist/flow-view/index.d.ts", "default": "./dist/flow-view/index.js" },
+    "./edit": { "types": "./dist/edit/index.d.ts", "default": "./dist/edit/index.js" },
+    "./traces": { "types": "./dist/traces/index.d.ts", "default": "./dist/traces/index.js" },
+    "./heatmap": { "types": "./dist/heatmap/index.d.ts", "default": "./dist/heatmap/index.js" },
+    "./store": { "types": "./dist/store/index.d.ts", "default": "./dist/store/index.js" }
+  },
+  "bin": {
+    "codeflow-canvas": "./dist/bin/cli.js"
+  },
+  "scripts": {
+    "check": "tsc --noEmit",
+    "test": "vitest run",
+    "build": "tsc --build && node scripts/wrap-cli.mjs",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@abhinav2203/codeflow-core": "^1.1.6",
+    "@xyflow/react": "^12.0.0",
+    "@monaco-editor/react": "^4.0.0",
+    "monaco-editor": "^0.52.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-rnd": "^10.5.3",
+    "zustand": "^5.0.0",
+    "dotenv": "^16.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.0.0",
+    "next": "^16.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "peerDependencies": {
+    "next": "^16.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/scripts/wrap-cli.mjs

@@ -0,0 +1,15 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const cliSrc = resolve(__dirname, "../bin/cli.js");
+const cliDest = resolve(__dirname, "../dist/bin/cli.js");
+
+try {
+  const content = readFileSync(cliSrc, "utf-8");
+  writeFileSync(cliDest, content, "utf-8");
+  console.log("CLI wrapper created at dist/bin/cli.js");
+} catch {
+  // If the compiled CLI doesn't exist yet, that's fine for the build step
+}

package/src/bin/cli.ts

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+interface RawLog {
+  level: string;
+  msg: string;
+  time?: string;
+  [key: string]: unknown;
+}
+
+interface RawSpan {
+  spanId: string;
+  name: string;
+  status: string;
+  runtime: string;
+  timestamp: string;
+}
+
+interface RenderOptions {
+  format?: "json" | "text";
+  nodeId?: string;
+}
+
+function renderJson(graph: BlueprintGraph, options: RenderOptions): string {
+  if (options.nodeId) {
+    const node = graph.nodes.find((n) => n.id === options.nodeId);
+    if (!node) {
+      return JSON.stringify({ error: `Node ${options.nodeId} not found` }, null, 2);
+    }
+    return JSON.stringify(node, null, 2);
+  }
+  return JSON.stringify(graph, null, 2);
+}
+
+function renderText(graph: BlueprintGraph): string {
+  const lines: string[] = [];
+  lines.push(`# ${graph.projectName}`);
+  lines.push(`Phase: ${graph.phase}`);
+  lines.push("");
+  lines.push("## Nodes");
+  for (const node of graph.nodes) {
+    lines.push(`- [${node.kind}] ${node.name}: ${node.summary}`);
+  }
+  lines.push("");
+  lines.push("## Edges");
+  for (const edge of graph.edges) {
+    lines.push(`- ${edge.from} --[${edge.kind}]--> ${edge.to}`);
+  }
+  return lines.join("\n");
+}
+
+interface BlueprintGraph {
+  projectName: string;
+  phase: string;
+  nodes: Array<{
+    id: string;
+    kind: string;
+    name: string;
+    summary: string;
+    [key: string]: unknown;
+  }>;
+  edges: Array<{
+    from: string;
+    to: string;
+    kind: string;
+    label?: string;
+    [key: string]: unknown;
+  }>;
+  workflows: Array<{ id: string; name: string; [key: string]: unknown }>;
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  let filePath: string | undefined;
+  let command = "render";
+  const options: RenderOptions = { format: "json" };
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "render" && i + 1 < args.length) {
+      command = "render";
+      filePath = args[++i];
+    } else if (args[i] === "--format" && i + 1 < args.length) {
+      options.format = args[++i] as "json" | "text";
+    } else if (args[i] === "--node" && i + 1 < args.length) {
+      options.nodeId = args[++i];
+    } else if (!args[i].startsWith("--")) {
+      filePath = args[i];
+    }
+  }
+
+  if (!filePath) {
+    console.error("Usage: codeflow-canvas render <file> [--format json|text] [--node <id>]");
+    process.exit(1);
+  }
+
+  const resolvedPath = resolve(filePath);
+  let graph: BlueprintGraph;
+
+  try {
+    const content = readFileSync(resolvedPath, "utf-8");
+    graph = JSON.parse(content);
+  } catch {
+    console.error(`Failed to read or parse blueprint file: ${resolvedPath}`);
+    process.exit(1);
+  }
+
+  switch (command) {
+    case "render":
+      if (options.format === "text") {
+        console.log(renderText(graph));
+      } else {
+        console.log(renderJson(graph, options));
+      }
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  console.error("CLI error:", err);
+  process.exit(1);
+});

package/src/components/blueprint-workbench.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import type { QueryResult } from "@abhinav2203/coderag";
+import { z } from "zod";
+
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+
+import { useBlueprintStore } from "../store/blueprint-store.js";
+
+import { CodeEditor } from "./code-editor.js";
+import { FileTabs } from "./file-tabs.js";
+import { FileTree } from "./file-tree.js";
+import { GraphCanvas } from "./graph-canvas.js";
+import { IdeLayout } from "./ide-layout.js";
+import { buildDetailFlow, indexRuntimeExecutionResult } from "../lib/flow-view.js";
+import { computeHeatmap } from "../lib/heatmap.js";
+import type { HeatmapData } from "../lib/heatmap.js";
+import { formatNavigationTarget, getNavigationTarget, isValidNavigationTarget } from "../lib/node-navigation.js";
+import { applyTraceOverlay } from "../lib/traces.js";
+import type { CycleReport, SmellReport, GraphMetrics, RefactorReport, HealResult, OpencodeServerInfo } from "../lib/types.js";
+import {
+  AUTO_IMPLEMENT_STORAGE_KEY,
+  LIVE_COMPLETIONS_STORAGE_KEY,
+  loadSessionApiKey,
+  readLocalBooleanPreference,
+  readRepoPath,
+  storeSessionApiKey,
+  writeLocalBooleanPreference,
+  writeRepoPath
+} from "../lib/browser/storage.js";
+import type {
+  ApprovalRecord,
+  BlueprintGraph,
+  BlueprintNode,
+  BranchDiff,
+  ConflictReport,
+  DigitalTwinSnapshot,
+  ExecutionMode,
+  ExportResult,
+  ExecutionArtifact,
+  ExecutionStep,
+  GhostNode,
+  GraphBranch,
+  McpServerConfig,
+  McpTool,
+  ObservabilityLog,
+  PersistedSession,
+  RiskReport,
+  RunPlan,
+  RuntimeExecutionResult,
+  TournamentResult,
+  VcrRecording
+} from "@abhinav2203/codeflow-core/schema";
+import { emptyContract, traceSpanSchema } from "@abhinav2203/codeflow-core/schema";
+
+type BuildResponse = {
+  graph?: BlueprintGraph;
+  runPlan?: RunPlan;
+  session?: PersistedSession;
+  error?: string;
+};
+
+type ExportResponse = {
+  result?: ExportResult;
+  runPlan?: RunPlan;
+  riskReport?: RiskReport;
+  session?: PersistedSession;
+  approval?: ApprovalRecord;
+  requiresApproval?: boolean;
+  error?: string;
+};
+
+type ExecutionResponse = {
+  result?: RuntimeExecutionResult;
+  executedNodeId?: string;
+  graph?: BlueprintGraph;
+  runPlan?: RunPlan;
+  session?: PersistedSession;
+  error?: string;
+};
+
+type ObservabilityLatestResponse = {
+  graph?: BlueprintGraph | null;
+  latestSpans?: Array<{ spanId: string; name: string; status: string; runtime: string; provenance?: string }>;
+  latestLogs?: ObservabilityLog[];
+  error?: string;
+};
+
+type ConflictResponse = {
+  report?: ConflictReport;
+  error?: string;
+};
+
+type CyclesResponse = {
+  report?: CycleReport;
+  error?: string;
+};
+
+type SmellsResponse = {
+  report?: SmellReport;
+  error?: string;
+};
+
+type MetricsResponse = {
+  metrics?: GraphMetrics;
+  error?: string;
+};
+
+const tracesSchema = z.array(traceSpanSchema);
+
+const maskApiKey = (value: string) => {
+  const trimmed = value.trim();
+  if (trimmed.length <= 8) {
+    return trimmed;
+  }
+
+  return `${trimmed.slice(0, 4)}...${trimmed.slice(-4)}`;
+};
+
+type StatusTone = "info" | "success" | "danger";
+type IdeDockTab = "terminal" | "repo" | "heatmap" | "vcr" | "traces" | "problems";
+type ActivityEntryTone = "info" | "success" | "error" | "command";
+type ActivityEntry = {
+  id: string;
+  source: string;
+  message: string;
+  tone: ActivityEntryTone;
+  timestamp: string;
+  detail?: string;
+};
+
+export function BlueprintWorkbench() {
+  const {
+    activeFile,
+    floatingGraph,
+    graph,
+    openFiles,
+    repoPath,
+    selectedNodeId,
+    setActiveFile,
+    setFloatingGraph,
+    setGraph,
+    setOpenFiles,
+    setRepoPath,
+    setSelectedNodeId
+  } = useBlueprintStore();
+
+  const MIN_OBSERVABILITY_INTERVAL_SECS = 2;
+  const [projectName, setProjectName] = useState("CodeFlow Workspace");
+  const [prdText, setPrdText] = useState("");
+  const [aiPrompt, setAiPrompt] = useState("");
+  const [nvidiaApiKey, setNvidiaApiKey] = useState("");
+  const [executionMode, setExecutionMode] = useState<ExecutionMode>("essential");
+  const [outputDir, setOutputDir] = useState("");
+  const [traceInput, setTraceInput] = useState("");
+  const [runInput, setRunInput] = useState("{}");
+  const [error, setError] = useState<string | null>(null);
+  const [busyLabel, setBusyLabel] = useState<string | null>(null);
+  const [exportResult, setExportResult] = useState<ExportResult | null>(null);
+  const [runPlan, setRunPlan] = useState<RunPlan | null>(null);
+  const [riskReport, setRiskReport] = useState<RiskReport | null>(null);
+  const [session, setSession] = useState<PersistedSession | null>(null);
+  const [pendingApproval, setPendingApproval] = useState<ApprovalRecord | null>(null);
+  const [executionResult, setExecutionResult] = useState<RuntimeExecutionResult | null>(null);
+  const [latestLogs, setLatestLogs] = useState<ObservabilityLog[]>([]);
+  const [latestSpans, setLatestSpans] = useState<ObservabilityLatestResponse["latestSpans"]>([]);
+  const [conflictReport, setConflictReport] = useState<ConflictReport | null>(null);
+  const [newNodeName, setNewNodeName] = useState("");
+  const [newNodeKind, setNewNodeKind] = useState<BlueprintNode["kind"]>("function");
+  const [edgeFrom, setEdgeFrom] = useState("");
+  const [edgeTo, setEdgeTo] = useState("");
+  const [edgeKind, setEdgeKind] = useState<"calls" | "imports" | "inherits">("calls");
+  const [useAI, setUseAI] = useState(true);
+  const [drilldownStack, setDrilldownStack] = useState<string[]>([]);
+  const [selectedDetailNodeId, setSelectedDetailNodeId] = useState<string | null>(null);
+  const [codeDrafts, setCodeDrafts] = useState<Record<string, string>>({});
+  const [suggestionInstruction, setSuggestionInstruction] = useState("");
+  const [codeSuggestion, setCodeSuggestion] = useState<{ summary: string; code: string; notes: string[] } | null>(null);
+  const [liveCompletionsEnabled, setLiveCompletionsEnabled] = useState(true);
+  const [serverApiKeyConfigured, setServerApiKeyConfigured] = useState(false);
+  const [apiKeyStatusLoaded, setApiKeyStatusLoaded] = useState(false);
+  const [statusTitle, setStatusTitle] = useState("Ready to build");
+  const [statusDetail, setStatusDetail] = useState(
+    "Enter a project description or repo input, then build a blueprint."
+  );
+  const [statusTone, setStatusTone] = useState<StatusTone>("info");
+  const [activeDockTab, setActiveDockTab] = useState<IdeDockTab>("terminal");
+  const [activityFeed, setActivityFeed] = useState<ActivityEntry[]>([]);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showPromptPanel, setShowPromptPanel] = useState(true);
+  const [showEditPanel, setShowEditPanel] = useState(false);
+  const [showInspector, setShowInspector] = useState(false);
+  const [showObservabilityPanel, setShowObservabilityPanel] = useState(false);
+  const [autoObservability, setAutoObservability] = useState(false);
+  const [observabilityIntervalSecs, setObservabilityIntervalSecs] = useState(5);
+  const autoObsRef = useRef(autoObservability);
+  autoObsRef.current = autoObservability;
+  const [autoImplementNodes, setAutoImplementNodes] = useState(false);
+  const [cycleReport, setCycleReport] = useState<CycleReport | null>(null);
+  const [smellReport, setSmellReport] = useState<SmellReport | null>(null);
+  const [graphMetrics, setGraphMetrics] = useState<GraphMetrics | null>(null);
+  const [mermaidDiagram, setMermaidDiagram] = useState<string | null>(null);
+  const [ghostSuggestions, setGhostSuggestions] = useState<GhostNode[]>([]);
+  const [showMcpPanel, setShowMcpPanel] = useState(false);
+  const [mcpServerUrl, setMcpServerUrl] = useState("");
+  const [mcpHeadersJson, setMcpHeadersJson] = useState("{}");
+  const [mcpToolName, setMcpToolName] = useState("");
+  const [mcpToolArgsJson, setMcpToolArgsJson] = useState("{}");
+  const [availableMcpTools, setAvailableMcpTools] = useState<McpTool[]>([]);
+  const [mcpInvokeResult, setMcpInvokeResult] = useState<string | null>(null);
+  const [mcpError, setMcpError] = useState<string | null>(null);
+
+  const [branches, setBranches] = useState<GraphBranch[]>([]);
+  const [showBranchPanel, setShowBranchPanel] = useState(false);
+  const [newBranchName, setNewBranchName] = useState("");
+  const [newBranchDescription, setNewBranchDescription] = useState("");
+  const [activeBranchId, setActiveBranchId] = useState<string | null>(null);
+  const [branchDiff, setBranchDiff] = useState<BranchDiff | null>(null);
+  const [diffTargetBranchId, setDiffTargetBranchId] = useState<string | null>(null);
+
+  const [showVcrPanel, setShowVcrPanel] = useState(false);
+  const [vcrRecording, setVcrRecording] = useState<VcrRecording | null>(null);
+  const [vcrFrameIndex, setVcrFrameIndex] = useState(0);
+  const [vcrPlaying, setVcrPlaying] = useState(false);
+  const [vcrGraph, setVcrGraph] = useState<BlueprintGraph | null>(null);
+  const [vcrError, setVcrError] = useState<string | null>(null);
+
+  const [showDigitalTwinPanel, setShowDigitalTwinPanel] = useState(false);
+  const [digitalTwinSnapshot, setDigitalTwinSnapshot] = useState<DigitalTwinSnapshot | null>(null);
+  const [digitalTwinGraph, setDigitalTwinGraph] = useState<BlueprintGraph | null>(null);
+  const [digitalTwinWindowSecs, setDigitalTwinWindowSecs] = useState(60);
+  const [autoDigitalTwin, setAutoDigitalTwin] = useState(false);
+  const autoDigitalTwinRef = useRef(autoDigitalTwin);
+  autoDigitalTwinRef.current = autoDigitalTwin;
+  const [simulateNodeIds, setSimulateNodeIds] = useState("");
+  const [simulateLabel, setSimulateLabel] = useState("");
+  const [digitalTwinError, setDigitalTwinError] = useState<string | null>(null);
+  const [digitalTwinPollError, setDigitalTwinPollError] = useState<string | null>(null);
+  const [digitalTwinLastUpdatedAt, setDigitalTwinLastUpdatedAt] = useState<string | null>(null);
+
+  const [showRefactorPanel, setShowRefactorPanel] = useState(false);
+  const [refactorReport, setRefactorReport] = useState<RefactorReport | null>(null);
+  const [healResult, setHealResult] = useState<HealResult | null>(null);
+  const [refactorError, setRefactorError] = useState<string | null>(null);
+  const graphReplacedByHealRef = useRef(false);
+  const refactorAbortRef = useRef<AbortController | null>(null);
+
+  const [showGeneticPanel, setShowGeneticPanel] = useState(false);
+  const [showMascotPanel, setShowMascotPanel] = useState(false);
+  const [showPhasePanel, setShowPhasePanel] = useState(false);
+  const [geneticGenerations, setGeneticGenerations] = useState(3);
+  const [geneticPopulationSize, setGeneticPopulationSize] = useState(6);
+  const [tournamentResult, setTournamentResult] = useState<TournamentResult | null>(null);
+  const [geneticError, setGeneticError] = useState<string | null>(null);
+  const [editorRevealTarget, setEditorRevealTarget] = useState<ReturnType<typeof getNavigationTarget>>(null);
+  const [navigationError, setNavigationError] = useState<string | null>(null);
+
+  const [showOpencodePanel, setShowOpencodePanel] = useState(false);
+  const [opencodeStatus, setOpencodeStatus] = useState<OpencodeServerInfo>({ status: "stopped" });
+  const [useOpencodeForAgent, setUseOpencodeForAgent] = useState(false);
+
+  const selectedNode = graph?.nodes.find((node) => node.id === selectedNodeId) ?? null;
+  const drilldownNodeId = drilldownStack.at(-1) ?? null;
+  const drilldownRootNode = graph?.nodes.find((node) => node.id === drilldownNodeId) ?? null;
+  const executionIndex = useMemo(
+    () => indexRuntimeExecutionResult(executionResult),
+    [executionResult]
+  );
+  const detailFlow =
+    graph && drilldownNodeId
+      ? buildDetailFlow(graph, drilldownNodeId, selectedDetailNodeId ?? undefined, executionResult)
+      : null;
+  const heatmapData: HeatmapData | undefined = useMemo(
+    () =>
+      graph &&
+      graph.nodes.some(
+        (node) => node.traceState && node.traceState.count > 0
+      )
+        ? computeHeatmap(graph)
+        : undefined,
+    [graph]
+  );
+
+  const canStartImplementation = false;
+  const canStartIntegration = false;
+  const canImplementActiveNode = false;
+  const canRunActiveNode = false;
+  const isBusy = Boolean(busyLabel);
+  const isBuilding = busyLabel === "Building blueprint";
+
+  return (
+    <div className="workbench-shell">
+      <div className="workbench-main">
+        <div className="graph-panel">
+          <GraphCanvas
+            graph={graph}
+            selectedNodeId={selectedNodeId}
+            onSelect={setSelectedNodeId}
+            heatmapData={heatmapData}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/code-diff-editor.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useRef } from "react";
+
+import dynamic from "next/dynamic";
+import type * as Monaco from "monaco-editor";
+
+import { prepareMonaco, toMonacoPath } from "./monaco-setup.js";
+
+const MonacoDiffEditor = dynamic(() => import("@monaco-editor/react").then(mod => mod.DiffEditor), {
+  ssr: false,
+  loading: () => <div className="code-diff-editor-loading">Loading diff editor...</div>
+});
+
+type CodeDiffEditorProps = {
+  originalValue: string;
+  modifiedValue: string;
+  language?: "typescript" | "javascript" | "json" | "markdown";
+  height?: string;
+  readOnly?: boolean;
+  theme?: "light" | "dark";
+  onModifiedChange?: (value: string) => void;
+};
+
+export function CodeDiffEditor({
+  originalValue,
+  modifiedValue,
+  language = "typescript",
+  height = "28rem",
+  readOnly = false,
+  theme = "dark",
+  onModifiedChange
+}: CodeDiffEditorProps): React.JSX.Element {
+  const monacoRef = useRef<typeof Monaco | null>(null);
+  const modifiedListenerRef = useRef<Monaco.IDisposable | null>(null);
+
+  return (
+    <div
+      className="code-diff-editor-shell"
+      style={{
+        height,
+        minHeight: height === "100%" ? 0 : height
+      }}
+    >
+      <MonacoDiffEditor
+        beforeMount={prepareMonaco}
+        height={height}
+        language={language}
+        modified={modifiedValue}
+        modifiedModelPath={toMonacoPath("diff/modified.ts")}
+        options={{
+          automaticLayout: true,
+          diffCodeLens: true,
+          enableSplitViewResizing: true,
+          fontFamily: "IBM Plex Mono, SFMono-Regular, SF Mono, monospace",
+          fontLigatures: true,
+          fontSize: 14,
+          lineNumbersMinChars: 3,
+          minimap: { enabled: false },
+          padding: { top: 16, bottom: 16 },
+          readOnly,
+          renderSideBySide: true,
+          scrollBeyondLastLine: false,
+          smoothScrolling: true,
+          wordWrap: "on"
+        }}
+        original={originalValue}
+        originalModelPath={toMonacoPath("diff/original.ts")}
+        onMount={(editor, monaco) => {
+          monacoRef.current = monaco;
+          modifiedListenerRef.current?.dispose();
+          modifiedListenerRef.current = editor.getModifiedEditor().onDidChangeModelContent(() => {
+            onModifiedChange?.(editor.getModifiedEditor().getValue());
+          });
+        }}
+        theme={theme === "dark" ? "vs-dark" : "vs-light"}
+      />
+    </div>
+  );
+}