@abhinav2203/codeflow-canvas 0.1.0

package/src/lib/heatmap.ts

@@ -0,0 +1,103 @@
+import type { BlueprintGraph, TraceState } from "@abhinav2203/codeflow-core/schema";
+import { idleTraceState } from "@abhinav2203/codeflow-core/schema";
+
+export type HeatmapNodeMetric = {
+  nodeId: string;
+  name: string;
+  callCount: number;
+  errorCount: number;
+  errorRate: number;
+  totalDurationMs: number;
+  avgDurationMs: number;
+  /** 0–1: normalized across all nodes by avg latency */
+  latencyIntensity: number;
+  /** 0–1: normalized across all nodes by error rate */
+  errorIntensity: number;
+  /** 0–1: combined heat score (errors weighted most heavily, then latency, then activity) */
+  heatIntensity: number;
+};
+
+export type HeatmapData = {
+  nodes: HeatmapNodeMetric[];
+  maxCallCount: number;
+  maxAvgDurationMs: number;
+  maxErrorRate: number;
+};
+
+const getTraceState = (raw: BlueprintGraph["nodes"][number]): TraceState =>
+  raw.traceState ?? idleTraceState();
+
+export const computeHeatmap = (graph: BlueprintGraph): HeatmapData => {
+  const raw = graph.nodes.map((node) => {
+    const state = getTraceState(node);
+    const avgDurationMs = state.count > 0 ? state.totalDurationMs / state.count : 0;
+    const errorRate = state.count > 0 ? state.errors / state.count : 0;
+
+    return {
+      nodeId: node.id,
+      name: node.name,
+      callCount: state.count,
+      errorCount: state.errors,
+      errorRate,
+      totalDurationMs: state.totalDurationMs,
+      avgDurationMs
+    };
+  });
+
+  const maxCallCount = Math.max(...raw.map((m) => m.callCount), 1);
+  const maxAvgDurationMs = Math.max(...raw.map((m) => m.avgDurationMs), 1);
+  const maxErrorRate = Math.max(...raw.map((m) => m.errorRate), Number.EPSILON);
+
+  const nodes: HeatmapNodeMetric[] = raw.map((m) => {
+    const latencyIntensity = m.avgDurationMs / maxAvgDurationMs;
+    const errorIntensity = m.errorRate / maxErrorRate;
+    const activityIntensity = m.callCount / maxCallCount;
+    const heatIntensity = Math.min(
+      1,
+      errorIntensity * 0.5 + latencyIntensity * 0.35 + activityIntensity * 0.15
+    );
+
+    return { ...m, latencyIntensity, errorIntensity, heatIntensity };
+  });
+
+  return { nodes, maxCallCount, maxAvgDurationMs, maxErrorRate };
+};
+
+/** Map a 0–1 heat intensity to a CSS rgba colour for heatmap backgrounds */
+export const heatColor = (intensity: number): string => {
+  if (intensity <= 0) {
+    return "rgba(240,253,244,0.0)";
+  }
+
+  if (intensity < 0.33) {
+    const alpha = intensity / 0.33;
+    return `rgba(34,197,94,${(alpha * 0.18).toFixed(3)})`;
+  }
+
+  if (intensity < 0.66) {
+    const alpha = (intensity - 0.33) / 0.33;
+    return `rgba(245,158,11,${(0.18 + alpha * 0.2).toFixed(3)})`;
+  }
+
+  const alpha = (intensity - 0.66) / 0.34;
+  return `rgba(239,68,68,${(0.22 + alpha * 0.26).toFixed(3)})`;
+};
+
+/** Map a 0–1 heat intensity to a CSS box-shadow glow string */
+export const heatGlow = (intensity: number): string => {
+  if (intensity <= 0) {
+    return "none";
+  }
+
+  if (intensity < 0.33) {
+    return `0 0 ${Math.round(8 + intensity * 24)}px rgba(34,197,94,${(intensity * 0.8).toFixed(3)})`;
+  }
+
+  if (intensity < 0.66) {
+    const scaled = (intensity - 0.33) / 0.33;
+    return `0 0 ${Math.round(16 + scaled * 28)}px rgba(245,158,11,${(0.5 + scaled * 0.4).toFixed(3)})`;
+  }
+
+  const scaled = (intensity - 0.66) / 0.34;
+  return `0 0 ${Math.round(28 + scaled * 32)}px rgba(239,68,68,${(0.6 + scaled * 0.38).toFixed(3)})`;
+};

package/src/lib/index.ts

@@ -0,0 +1,41 @@
+export { computeHeatmap, heatColor, heatGlow } from "./heatmap.js";
+export type { HeatmapData, HeatmapNodeMetric } from "./heatmap.js";
+
+export {
+  applyTraceOverlay
+} from "./traces.js";
+
+export {
+  getNavigationTarget,
+  getNodesWithNavigation,
+  formatNavigationTarget,
+  hasNavigationMetadata,
+  isValidNavigationTarget
+} from "./node-navigation.js";
+export type { NavigationTarget } from "./node-navigation.js";
+
+export {
+  addNodeToGraph,
+  addEdgeToGraph,
+  deleteNodeFromGraph
+} from "./edit.js";
+
+export {
+  buildFlowNodes,
+  buildFlowEdges,
+  buildGhostFlowNodes,
+  buildDetailFlow,
+  indexRuntimeExecutionResult,
+  buildExecutionProjection
+} from "./flow-view.js";
+export type {
+  NodeHealthState,
+  FlowExecutionStatus,
+  FlowExecutionState,
+  FlowExecutionIndex,
+  FlowExecutionProjection,
+  FlowNodeData,
+  InspectorSection,
+  DetailFlowItem,
+  DetailFlowGraph
+} from "./flow-view.js";

package/src/lib/node-navigation.ts

@@ -0,0 +1,76 @@
+import type { BlueprintNode } from "@abhinav2203/codeflow-core/schema";
+import type { SourceLocation } from "./types.js";
+
+/**
+ * Extended BlueprintNode type with source location support.
+ * This property exists in codeflow-evolution but not yet in codeflow-core.
+ */
+type BlueprintNodeWithLocation = BlueprintNode & { sourceLocation?: SourceLocation };
+
+/**
+ * Navigate from a graph node to its source location in the editor.
+ * This is the critical link between the graph view and Monaco editor.
+ */
+export interface NavigationTarget {
+  filePath: string;
+  lineNumber: number;
+  endLineNumber?: number;
+  columnStart?: number;
+  columnEnd?: number;
+  symbolName?: string;
+}
+
+/**
+ * Extract navigation target from a blueprint node.
+ * Returns null if no source location is available.
+ */
+export function getNavigationTarget(node: BlueprintNode): NavigationTarget | null {
+  const location = (node as BlueprintNodeWithLocation).sourceLocation;
+
+  if (!location) {
+    return null;
+  }
+
+  return {
+    filePath: location.filePath,
+    lineNumber: location.startLine,
+    endLineNumber: location.endLine,
+    columnStart: location.startColumn,
+    columnEnd: location.endColumn,
+    symbolName: location.symbolName
+  };
+}
+
+/**
+ * Check if a node has navigation metadata available.
+ */
+export function hasNavigationMetadata(node: BlueprintNode): boolean {
+  return (node as BlueprintNodeWithLocation).sourceLocation !== undefined;
+}
+
+/**
+ * Get all nodes that have navigation metadata from a node list.
+ */
+export function getNodesWithNavigation(nodes: BlueprintNode[]): BlueprintNode[] {
+  return nodes.filter(hasNavigationMetadata);
+}
+
+/**
+ * Format a navigation target for display/logging.
+ */
+export function formatNavigationTarget(target: NavigationTarget): string {
+  const { filePath, lineNumber, symbolName } = target;
+  const symbol = symbolName ? ` (${symbolName})` : "";
+  return `${filePath}:${lineNumber}${symbol}`;
+}
+
+/**
+ * Validate that a navigation target points to a valid location.
+ * Returns false if the target has invalid or missing data.
+ */
+export function isValidNavigationTarget(target: NavigationTarget | null): target is NavigationTarget {
+  if (!target) return false;
+  if (!target.filePath) return false;
+  if (!target.lineNumber || target.lineNumber < 1) return false;
+  return true;
+}

package/src/lib/traces.ts

@@ -0,0 +1,79 @@
+import type { BlueprintGraph, BlueprintNode, TraceSpan, TraceStatus } from "@abhinav2203/codeflow-core/schema";
+import { idleTraceState } from "@abhinav2203/codeflow-core/schema";
+
+const statusPriority: Record<TraceStatus, number> = {
+  idle: 0,
+  success: 1,
+  warning: 2,
+  error: 3
+};
+
+const resolveNodeId = (graph: BlueprintGraph, span: TraceSpan): string | null => {
+  if (span.blueprintNodeId && graph.nodes.some((node) => node.id === span.blueprintNodeId)) {
+    return span.blueprintNodeId;
+  }
+
+  const byName = graph.nodes.find((node) => node.name === span.name);
+  if (byName) {
+    return byName.id;
+  }
+
+  if (span.path) {
+    const byPath = graph.nodes.find((node) => node.path === span.path);
+    if (byPath) {
+      return byPath.id;
+    }
+  }
+
+  return null;
+};
+
+const mergeNodeTrace = (node: BlueprintNode, span: TraceSpan): BlueprintNode => {
+  const traceState = node.traceState ?? idleTraceState();
+  const nextStatus =
+    statusPriority[span.status] > statusPriority[traceState.status] ? span.status : traceState.status;
+
+  return {
+    ...node,
+    traceRefs: [...new Set([...(node.traceRefs ?? []), span.spanId])],
+    traceState: {
+      status: nextStatus,
+      count: traceState.count + 1,
+      errors: traceState.errors + (span.status === "error" ? 1 : 0),
+      totalDurationMs: traceState.totalDurationMs + span.durationMs,
+      lastSpanIds: [...new Set([span.spanId, ...traceState.lastSpanIds])].slice(0, 5)
+    }
+  };
+};
+
+export const applyTraceOverlay = (graph: BlueprintGraph, spans: TraceSpan[]): BlueprintGraph => {
+  const nodeMap = new Map<string, BlueprintNode>(
+    graph.nodes.map((node) => [
+      node.id,
+      {
+        ...node,
+        traceRefs: [] as string[],
+        traceState: idleTraceState()
+      }
+    ])
+  );
+
+  for (const span of spans) {
+    const nodeId = resolveNodeId(graph, span);
+    if (!nodeId) {
+      continue;
+    }
+
+    const current = nodeMap.get(nodeId);
+    if (!current) {
+      continue;
+    }
+
+    nodeMap.set(nodeId, mergeNodeTrace(current, span));
+  }
+
+  return {
+    ...graph,
+    nodes: [...nodeMap.values()]
+  };
+};

package/src/lib/types.ts

@@ -0,0 +1,79 @@
+/**
+ * Local type stubs for types referenced from @abhinav2203/codeflow-core
+ * that are not yet available in the published package.
+ * These should be replaced with proper imports when codeflow-core is updated.
+ */
+
+// Types from codeflow-analysis (not yet in codeflow-core)
+export type CycleReport = {
+  cycles: Array<{
+    nodeIds: string[];
+    path: string[];
+  }>;
+  totalCycles: number;
+};
+
+export type SmellReport = {
+  smells: Array<{
+    nodeId: string;
+    kind: string;
+    message: string;
+    severity: "error" | "warning" | "info";
+  }>;
+  totalSmells: number;
+};
+
+export type GraphMetrics = {
+  totalNodes: number;
+  totalEdges: number;
+  avgDegree: number;
+  maxDegree: number;
+  density: number;
+};
+
+// Types from codeflow-refactor (not yet in codeflow-core)
+export type RefactorReport = {
+  suggestions: Array<{
+    nodeId: string;
+    kind: string;
+    description: string;
+    effort: "low" | "medium" | "high";
+  }>;
+};
+
+export type HealResult = {
+  healed: boolean;
+  nodeId?: string;
+  fix?: string;
+  error?: string;
+};
+
+// Types from codeflow-core/opencode (not yet in codeflow-core)
+export type OpencodeProvider =
+  | "anthropic"
+  | "openai"
+  | "google"
+  | "azure"
+  | "groq"
+  | "mistral"
+  | "cohere"
+  | "perplexity"
+  | "openrouter"
+  | "bedrock"
+  | "local";
+
+export type OpencodeServerInfo = {
+  status: "stopped" | "starting" | "running" | "error";
+  url?: string;
+  error?: string;
+};
+
+// SourceLocation type for node navigation
+export interface SourceLocation {
+  filePath: string;
+  startLine: number;
+  endLine: number;
+  startColumn?: number;
+  endColumn?: number;
+  symbolName?: string;
+}

package/src/store/blueprint-store.ts

@@ -0,0 +1,136 @@
+"use client";
+
+import { create } from "zustand";
+
+import type { BlueprintGraph, BlueprintNode } from "@abhinav2203/codeflow-core/schema";
+
+type GraphStateUpdater = BlueprintGraph | null | ((current: BlueprintGraph | null) => BlueprintGraph | null);
+type NodeUpdater = Partial<BlueprintNode> | ((node: BlueprintNode) => BlueprintNode);
+
+export type WorkbenchMode = "graph" | "ide";
+
+export interface FloatingGraphPanel {
+  visible: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface BlueprintStore {
+  graph: BlueprintGraph | null;
+  setGraph: (next: GraphStateUpdater) => void;
+  updateNode: (id: string, patch: NodeUpdater) => void;
+  openFiles: string[];
+  activeFile: string | null;
+  setOpenFiles: (paths: string[]) => void;
+  setActiveFile: (path: string | null) => void;
+  closeFile: (path: string) => void;
+  repoPath: string | null;
+  setRepoPath: (path: string | null) => void;
+  mode: WorkbenchMode;
+  setMode: (mode: WorkbenchMode) => void;
+  floatingGraph: FloatingGraphPanel;
+  setFloatingGraph: (panel: Partial<FloatingGraphPanel>) => void;
+  selectedNodeId: string | null;
+  setSelectedNodeId: (id: string | null) => void;
+  dirtyFiles: Record<string, boolean>;
+  setFileDirty: (path: string, dirty: boolean) => void;
+  clearFileDirty: (path: string) => void;
+}
+
+const resolveGraphUpdate = (
+  current: BlueprintGraph | null,
+  next: GraphStateUpdater
+): BlueprintGraph | null => (typeof next === "function" ? next(current) : next);
+
+const resolveNodeUpdate = (node: BlueprintNode, patch: NodeUpdater): BlueprintNode =>
+  typeof patch === "function" ? patch(node) : { ...node, ...patch };
+
+export const useBlueprintStore = create<BlueprintStore>((set) => ({
+  graph: null,
+  setGraph: (next) =>
+    set((state) => ({
+      graph: resolveGraphUpdate(state.graph, next)
+    })),
+  updateNode: (id, patch) =>
+    set((state) => {
+      if (!state.graph) {
+        return state;
+      }
+      return {
+        graph: {
+          ...state.graph,
+          nodes: state.graph.nodes.map((node) =>
+            node.id === id ? resolveNodeUpdate(node, patch) : node
+          )
+        }
+      };
+    }),
+  openFiles: [],
+  activeFile: null,
+  setOpenFiles: (paths) =>
+    set(() => ({
+      openFiles: paths
+    })),
+  setActiveFile: (path) =>
+    set((state) => ({
+      activeFile: path,
+      floatingGraph: {
+        ...state.floatingGraph,
+        visible: path !== null
+      }
+    })),
+  closeFile: (path) =>
+    set((state) => {
+      const nextOpenFiles = state.openFiles.filter((f) => f !== path);
+      const nextActiveFile =
+        state.activeFile === path
+          ? nextOpenFiles[nextOpenFiles.length - 1] ?? null
+          : state.activeFile;
+
+      return {
+        openFiles: nextOpenFiles,
+        activeFile: nextActiveFile,
+        floatingGraph: {
+          ...state.floatingGraph,
+          visible: nextActiveFile !== null
+        },
+        dirtyFiles: { ...state.dirtyFiles, [path]: false }
+      };
+    }),
+  repoPath: null,
+  setRepoPath: (path) => set(() => ({ repoPath: path })),
+  mode: "ide",
+  setMode: (mode) =>
+    set((state) => ({
+      mode,
+      floatingGraph: {
+        ...state.floatingGraph,
+        visible: state.activeFile !== null
+      }
+    })),
+  floatingGraph: {
+    visible: false,
+    x: 0,
+    y: 0,
+    width: 400,
+    height: 350
+  },
+  setFloatingGraph: (panel) =>
+    set((state) => ({
+      floatingGraph: { ...state.floatingGraph, ...panel }
+    })),
+  selectedNodeId: null,
+  setSelectedNodeId: (id) => set(() => ({ selectedNodeId: id })),
+  dirtyFiles: {},
+  setFileDirty: (path, dirty) =>
+    set((state) => ({
+      dirtyFiles: { ...state.dirtyFiles, [path]: dirty }
+    })),
+  clearFileDirty: (path) =>
+    set((state) => {
+      const { [path]: _, ...rest } = state.dirtyFiles;
+      return { dirtyFiles: rest };
+    })
+}));

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export { useBlueprintStore } from "./blueprint-store.js";
+export type { BlueprintStore, FloatingGraphPanel, WorkbenchMode } from "./blueprint-store.js";

package/test-fixtures/minimal-blueprint.json

@@ -0,0 +1,34 @@
+import type { BlueprintGraph } from "@abhinav2203/codeflow-core/schema";
+
+export const minimalBlueprint: BlueprintGraph = {
+  projectName: "Minimal Blueprint",
+  phase: "spec",
+  nodes: [
+    {
+      id: "node-function-1",
+      kind: "function",
+      name: "hello",
+      summary: "Say hello",
+      path: "src/hello.ts",
+      signature: "hello(name: string): string",
+      contract: {
+        inputs: [{ name: "name", type: "string", description: "Name to greet" }],
+        outputs: [{ name: "greeting", type: "string", description: "Greeting message" }],
+        responsibilities: ["Return a greeting"],
+        dependencies: [],
+        methods: [],
+        attributes: [],
+        calls: [],
+        sideEffects: [],
+        errors: [],
+        notes: [],
+        summary: "Say hello"
+      },
+      sourceRefs: [{ kind: "file", path: "src/hello.ts", section: "hello" }],
+      generatedRefs: [],
+      traceRefs: []
+    }
+  ],
+  edges: [],
+  workflows: []
+};