@lov3kaizen/agentsea-debugger 0.5.1

package/dist/visualization/index.js

@@ -0,0 +1,789 @@
+import { nanoid } from 'nanoid';
+
+// src/utils/helpers.ts
+function generateId(prefix = "") {
+  const id = nanoid(12);
+  return prefix ? `${prefix}_${id}` : id;
+}
+
+// src/visualization/DecisionTree.ts
+var DEFAULT_BUILD_OPTIONS = {
+  includeToolCalls: true,
+  allSteps: false,
+  maxDepth: 50,
+  collapseSimilar: false
+};
+var DEFAULT_LAYOUT_OPTIONS = {
+  direction: "vertical",
+  nodeSpacing: 50,
+  levelSpacing: 100,
+  nodeWidth: 200,
+  nodeHeight: 80
+};
+var DecisionTreeBuilder = class {
+  nodes = /* @__PURE__ */ new Map();
+  rootId;
+  buildOptions;
+  layoutOptions;
+  constructor(buildOptions, layoutOptions) {
+    this.buildOptions = {
+      ...DEFAULT_BUILD_OPTIONS,
+      ...buildOptions
+    };
+    this.layoutOptions = {
+      ...DEFAULT_LAYOUT_OPTIONS,
+      ...layoutOptions
+    };
+  }
+  /**
+   * Build tree from a recording
+   */
+  build(recording) {
+    this.clear();
+    const rootNode = this.addNode({
+      label: "Start",
+      type: "action",
+      stepIndex: -1,
+      metadata: {
+        agentId: recording.agentId,
+        agentName: recording.agentName
+      }
+    });
+    this.rootId = rootNode.id;
+    let currentParentId = rootNode.id;
+    let depth = 0;
+    for (const step of recording.steps) {
+      if (depth >= this.buildOptions.maxDepth) {
+        break;
+      }
+      const node = this.processStep(step, currentParentId, depth);
+      if (node) {
+        if (step.type === "decision") {
+          currentParentId = node.id;
+          depth++;
+        } else if (this.buildOptions.allSteps) {
+          currentParentId = node.id;
+        }
+      }
+    }
+    this.addNode({
+      label: recording.status === "completed" ? "Complete" : "Failed",
+      type: "outcome",
+      parentId: currentParentId,
+      metadata: {
+        status: recording.status,
+        durationMs: recording.durationMs
+      }
+    });
+    return this.export();
+  }
+  /**
+   * Process a step into a node
+   */
+  processStep(step, parentId, depth) {
+    if (step.type === "decision" && step.decision) {
+      return this.addDecisionNode(step, parentId, depth);
+    }
+    if (this.buildOptions.includeToolCalls && step.type === "tool-call") {
+      return this.addNode({
+        label: `Tool: ${step.toolCall?.name ?? "unknown"}`,
+        type: "action",
+        stepIndex: step.index,
+        parentId,
+        metadata: {
+          toolName: step.toolCall?.name,
+          arguments: step.toolCall?.arguments
+        }
+      });
+    }
+    if (this.buildOptions.allSteps) {
+      return this.addNode({
+        label: this.getStepLabel(step),
+        type: "action",
+        stepIndex: step.index,
+        parentId
+      });
+    }
+    return null;
+  }
+  /**
+   * Add a decision node with branches
+   */
+  addDecisionNode(step, parentId, _depth) {
+    const decision = step.decision;
+    const decisionNode = this.addNode({
+      label: decision.reason ?? "Decision",
+      type: "decision",
+      decision,
+      stepIndex: step.index,
+      parentId,
+      metadata: {
+        confidence: decision.confidence,
+        optionsCount: decision.options.length
+      }
+    });
+    for (const option of decision.options) {
+      const isChosen = option.id === decision.chosen.id;
+      this.addNode({
+        label: option.description,
+        type: "branch",
+        parentId: decisionNode.id,
+        metadata: {
+          optionId: option.id,
+          chosen: isChosen,
+          score: option.score
+        }
+      });
+    }
+    return decisionNode;
+  }
+  /**
+   * Get label for a step
+   */
+  getStepLabel(step) {
+    switch (step.type) {
+      case "input":
+        return "User Input";
+      case "prompt":
+        return "Send Prompt";
+      case "response":
+        return "LLM Response";
+      case "tool-call":
+        return `Call: ${step.toolCall?.name}`;
+      case "tool-result":
+        return `Result: ${step.toolCall?.success ? "OK" : "Failed"}`;
+      case "decision":
+        return "Decision";
+      case "error":
+        return `Error: ${step.error?.name}`;
+      default:
+        return step.type;
+    }
+  }
+  /**
+   * Add a node
+   */
+  addNode(options) {
+    const id = generateId("node");
+    const node = {
+      id,
+      label: options.label,
+      type: options.type,
+      decision: options.decision,
+      stepIndex: options.stepIndex,
+      children: [],
+      metadata: options.metadata
+    };
+    this.nodes.set(id, node);
+    if (options.parentId) {
+      const parent = this.nodes.get(options.parentId);
+      if (parent) {
+        parent.children.push(id);
+      }
+    }
+    if (!options.parentId && !this.rootId) {
+      this.rootId = id;
+    }
+    return node;
+  }
+  /**
+   * Get a node by ID
+   */
+  getNode(id) {
+    return this.nodes.get(id);
+  }
+  /**
+   * Get root node
+   */
+  getRoot() {
+    return this.rootId ? this.nodes.get(this.rootId) : void 0;
+  }
+  /**
+   * Get all nodes
+   */
+  getNodes() {
+    return Array.from(this.nodes.values());
+  }
+  /**
+   * Get nodes at depth
+   */
+  getNodesAtDepth(depth) {
+    const result = [];
+    const traverse = (nodeId, currentDepth) => {
+      const node = this.nodes.get(nodeId);
+      if (!node) return;
+      if (currentDepth === depth) {
+        result.push(node);
+      } else {
+        for (const childId of node.children) {
+          traverse(childId, currentDepth + 1);
+        }
+      }
+    };
+    if (this.rootId) {
+      traverse(this.rootId, 0);
+    }
+    return result;
+  }
+  /**
+   * Get tree depth
+   */
+  getDepth() {
+    let maxDepth = 0;
+    const traverse = (nodeId, depth) => {
+      maxDepth = Math.max(maxDepth, depth);
+      const node = this.nodes.get(nodeId);
+      if (node) {
+        for (const childId of node.children) {
+          traverse(childId, depth + 1);
+        }
+      }
+    };
+    if (this.rootId) {
+      traverse(this.rootId, 0);
+    }
+    return maxDepth;
+  }
+  /**
+   * Find path to node
+   */
+  findPath(nodeId) {
+    const path = [];
+    const findParent = (targetId) => {
+      for (const [id, node] of this.nodes) {
+        if (node.children.includes(targetId)) {
+          return id;
+        }
+      }
+      return null;
+    };
+    let currentId = nodeId;
+    while (currentId) {
+      const node = this.nodes.get(currentId);
+      if (node) {
+        path.unshift(node);
+      }
+      currentId = findParent(currentId);
+    }
+    return path;
+  }
+  /**
+   * Find nodes by step index
+   */
+  findByStepIndex(stepIndex) {
+    return this.getNodes().filter((n) => n.stepIndex === stepIndex);
+  }
+  /**
+   * Find decision nodes
+   */
+  findDecisionNodes() {
+    return this.getNodes().filter((n) => n.type === "decision");
+  }
+  /**
+   * Clear the tree
+   */
+  clear() {
+    this.nodes.clear();
+    this.rootId = void 0;
+  }
+  /**
+   * Export tree structure
+   */
+  export() {
+    const root = this.getRoot();
+    return {
+      id: generateId("tree"),
+      root: root ?? {
+        id: "empty",
+        label: "Empty Tree",
+        type: "action",
+        children: []
+      },
+      nodes: this.getNodes(),
+      metadata: {
+        nodeCount: this.nodes.size,
+        depth: this.getDepth(),
+        decisionCount: this.findDecisionNodes().length
+      }
+    };
+  }
+  /**
+   * Export to Mermaid format
+   */
+  toMermaid() {
+    const lines = ["graph TD"];
+    const traverse = (nodeId) => {
+      const node = this.nodes.get(nodeId);
+      if (!node) return;
+      const shape = this.getMermaidShape(node);
+      lines.push(`    ${nodeId}${shape}`);
+      for (const childId of node.children) {
+        const child = this.nodes.get(childId);
+        const edgeLabel = child?.metadata?.chosen ? " --> |chosen|" : " --> ";
+        lines.push(`    ${nodeId}${edgeLabel}${childId}`);
+        traverse(childId);
+      }
+    };
+    if (this.rootId) {
+      traverse(this.rootId);
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Get Mermaid shape for node
+   */
+  getMermaidShape(node) {
+    const label = node.label.replace(/"/g, "'");
+    switch (node.type) {
+      case "decision":
+        return `{${label}}`;
+      case "outcome":
+        return `((${label}))`;
+      case "branch":
+        return `[/${label}/]`;
+      default:
+        return `[${label}]`;
+    }
+  }
+  /**
+   * Calculate layout positions
+   */
+  calculateLayout() {
+    const positions = /* @__PURE__ */ new Map();
+    const levelWidths = [];
+    const levelPositions = [];
+    const calculateLevelWidths = (nodeId, level) => {
+      if (!levelWidths[level]) {
+        levelWidths[level] = 0;
+      }
+      levelWidths[level]++;
+      const node = this.nodes.get(nodeId);
+      if (node) {
+        for (const childId of node.children) {
+          calculateLevelWidths(childId, level + 1);
+        }
+      }
+    };
+    if (this.rootId) {
+      calculateLevelWidths(this.rootId, 0);
+    }
+    for (let i = 0; i < levelWidths.length; i++) {
+      levelPositions[i] = 0;
+    }
+    const assignPositions = (nodeId, level) => {
+      const node = this.nodes.get(nodeId);
+      if (!node) return;
+      const levelWidth = levelWidths[level] * this.layoutOptions.nodeSpacing;
+      const startX = -levelWidth / 2;
+      const x = startX + levelPositions[level] * this.layoutOptions.nodeSpacing;
+      const y = level * this.layoutOptions.levelSpacing;
+      positions.set(nodeId, { x, y });
+      levelPositions[level]++;
+      for (const childId of node.children) {
+        assignPositions(childId, level + 1);
+      }
+    };
+    if (this.rootId) {
+      assignPositions(this.rootId, 0);
+    }
+    return positions;
+  }
+};
+function createDecisionTreeBuilder(buildOptions, layoutOptions) {
+  return new DecisionTreeBuilder(buildOptions, layoutOptions);
+}
+
+// src/visualization/FlowGraph.ts
+var DEFAULT_NODE_STYLES = {
+  input: { fill: "#e3f2fd", shape: "rectangle" },
+  prompt: { fill: "#f3e5f5", shape: "rectangle" },
+  response: { fill: "#e8f5e9", shape: "rectangle" },
+  output: { fill: "#c8e6c9", shape: "rectangle" },
+  "tool-call": { fill: "#fff3e0", shape: "hexagon" },
+  "tool-result": { fill: "#fff8e1", shape: "rectangle" },
+  decision: { fill: "#fce4ec", shape: "diamond" },
+  error: { fill: "#ffebee", shape: "rectangle" },
+  "memory-read": { fill: "#e0f7fa", shape: "ellipse" },
+  "memory-write": { fill: "#e0f2f1", shape: "ellipse" },
+  handoff: { fill: "#ede7f6", shape: "hexagon" },
+  delegation: { fill: "#e8eaf6", shape: "hexagon" },
+  custom: { fill: "#fafafa", shape: "rectangle" }
+};
+var DEFAULT_BUILD_OPTIONS2 = {
+  groupSimilar: false,
+  includeDurations: true,
+  includeToolDetails: true,
+  maxNodes: 200,
+  nodeStyles: {}
+};
+var FlowGraphBuilder = class {
+  nodes = /* @__PURE__ */ new Map();
+  edges = /* @__PURE__ */ new Map();
+  options;
+  nodeStyles;
+  constructor(options) {
+    this.options = {
+      ...DEFAULT_BUILD_OPTIONS2,
+      ...options
+    };
+    this.nodeStyles = {
+      ...DEFAULT_NODE_STYLES,
+      ...options?.nodeStyles
+    };
+  }
+  /**
+   * Build graph from a recording
+   */
+  build(recording) {
+    this.clear();
+    const startNode = this.addNode({
+      label: "Start",
+      type: "input",
+      metadata: {
+        agentId: recording.agentId,
+        agentName: recording.agentName
+      }
+    });
+    let previousNodeId = startNode.id;
+    let nodeCount = 1;
+    for (const step of recording.steps) {
+      if (nodeCount >= this.options.maxNodes) {
+        break;
+      }
+      if (this.options.groupSimilar && previousNodeId) {
+        const prevNode = this.nodes.get(previousNodeId);
+        if (prevNode && prevNode.type === step.type) {
+          this.updateNodeForGroup(prevNode, step);
+          continue;
+        }
+      }
+      const node = this.createNodeFromStep(step);
+      this.nodes.set(node.id, node);
+      if (previousNodeId) {
+        this.addEdge(previousNodeId, node.id, {
+          durationMs: step.durationMs
+        });
+      }
+      previousNodeId = node.id;
+      nodeCount++;
+    }
+    const endNode = this.addNode({
+      label: recording.status === "completed" ? "Complete" : "Failed",
+      type: recording.status === "completed" ? "response" : "error",
+      metadata: {
+        status: recording.status,
+        durationMs: recording.durationMs
+      }
+    });
+    if (previousNodeId) {
+      this.addEdge(previousNodeId, endNode.id);
+    }
+    return this.export();
+  }
+  /**
+   * Create a node from a step
+   */
+  createNodeFromStep(step) {
+    const style = this.nodeStyles[step.type] ?? DEFAULT_NODE_STYLES.custom;
+    const node = {
+      id: generateId("node"),
+      label: this.getStepLabel(step),
+      type: step.type,
+      stepIndex: step.index,
+      style,
+      metadata: this.getStepMetadata(step)
+    };
+    return node;
+  }
+  /**
+   * Get label for a step
+   */
+  getStepLabel(step) {
+    switch (step.type) {
+      case "input":
+        return "User Input";
+      case "prompt":
+        return "Prompt";
+      case "response":
+        return "Response";
+      case "tool-call":
+        if (this.options.includeToolDetails && step.toolCall) {
+          return `${step.toolCall.name}()`;
+        }
+        return "Tool Call";
+      case "tool-result":
+        return step.toolCall?.success ? "Success" : "Failed";
+      case "decision":
+        return step.decision?.reason ?? "Decision";
+      case "error":
+        return step.error?.name ?? "Error";
+      case "memory-read":
+        return "Read Memory";
+      case "memory-write":
+        return "Write Memory";
+      case "handoff":
+      case "delegation":
+        return "Hand Off";
+      default:
+        return step.type;
+    }
+  }
+  /**
+   * Get metadata for a step
+   */
+  getStepMetadata(step) {
+    const metadata = {
+      stepIndex: step.index,
+      timestamp: step.timestamp
+    };
+    if (this.options.includeDurations && step.durationMs) {
+      metadata.durationMs = step.durationMs;
+    }
+    if (step.toolCall) {
+      metadata.toolName = step.toolCall.name;
+      if (this.options.includeToolDetails) {
+        metadata.toolArguments = step.toolCall.arguments;
+      }
+    }
+    if (step.decision) {
+      metadata.confidence = step.decision.confidence;
+      metadata.chosenOption = step.decision.chosen.description;
+    }
+    if (step.error) {
+      metadata.errorMessage = step.error.message;
+    }
+    return metadata;
+  }
+  /**
+   * Update node when grouping similar steps
+   */
+  updateNodeForGroup(node, step) {
+    const count = node.metadata?.groupCount ?? 1;
+    node.metadata = {
+      ...node.metadata,
+      groupCount: count + 1,
+      lastStepIndex: step.index
+    };
+    node.label = `${node.label} (${count + 1})`;
+  }
+  /**
+   * Add a node
+   */
+  addNode(options) {
+    const id = generateId("node");
+    const style = options.style ?? this.nodeStyles[options.type] ?? DEFAULT_NODE_STYLES.custom;
+    const node = {
+      id,
+      label: options.label,
+      type: options.type,
+      stepIndex: options.stepIndex,
+      style,
+      metadata: options.metadata
+    };
+    this.nodes.set(id, node);
+    return node;
+  }
+  /**
+   * Add an edge
+   */
+  addEdge(sourceId, targetId, options) {
+    const id = generateId("edge");
+    const edge = {
+      id,
+      source: sourceId,
+      target: targetId,
+      label: options?.label,
+      style: options?.style,
+      metadata: options?.durationMs ? { durationMs: options.durationMs } : void 0
+    };
+    this.edges.set(id, edge);
+    return edge;
+  }
+  /**
+   * Get a node by ID
+   */
+  getNode(id) {
+    return this.nodes.get(id);
+  }
+  /**
+   * Get all nodes
+   */
+  getNodes() {
+    return Array.from(this.nodes.values());
+  }
+  /**
+   * Get nodes by type
+   */
+  getNodesByType(type) {
+    return this.getNodes().filter((n) => n.type === type);
+  }
+  /**
+   * Get an edge by ID
+   */
+  getEdge(id) {
+    return this.edges.get(id);
+  }
+  /**
+   * Get all edges
+   */
+  getEdges() {
+    return Array.from(this.edges.values());
+  }
+  /**
+   * Get edges from a node
+   */
+  getEdgesFrom(nodeId) {
+    return this.getEdges().filter((e) => e.source === nodeId);
+  }
+  /**
+   * Get edges to a node
+   */
+  getEdgesTo(nodeId) {
+    return this.getEdges().filter((e) => e.target === nodeId);
+  }
+  /**
+   * Find path between nodes
+   */
+  findPath(startId, endId) {
+    const visited = /* @__PURE__ */ new Set();
+    const path = [];
+    const dfs = (currentId) => {
+      if (visited.has(currentId)) {
+        return false;
+      }
+      visited.add(currentId);
+      const node = this.nodes.get(currentId);
+      if (!node) {
+        return false;
+      }
+      path.push(node);
+      if (currentId === endId) {
+        return true;
+      }
+      for (const edge of this.getEdgesFrom(currentId)) {
+        if (dfs(edge.target)) {
+          return true;
+        }
+      }
+      path.pop();
+      return false;
+    };
+    return dfs(startId) ? path : null;
+  }
+  /**
+   * Get graph statistics
+   */
+  getStats() {
+    const nodesByType = {};
+    let totalDuration = 0;
+    let durationCount = 0;
+    for (const node of this.nodes.values()) {
+      nodesByType[node.type] = (nodesByType[node.type] ?? 0) + 1;
+      const duration = node.metadata?.durationMs;
+      if (duration) {
+        totalDuration += duration;
+        durationCount++;
+      }
+    }
+    return {
+      nodeCount: this.nodes.size,
+      edgeCount: this.edges.size,
+      nodesByType,
+      avgDuration: durationCount > 0 ? totalDuration / durationCount : 0
+    };
+  }
+  /**
+   * Clear the graph
+   */
+  clear() {
+    this.nodes.clear();
+    this.edges.clear();
+  }
+  /**
+   * Export graph structure
+   */
+  export() {
+    return {
+      id: generateId("graph"),
+      nodes: this.getNodes(),
+      edges: this.getEdges(),
+      metadata: this.getStats()
+    };
+  }
+  /**
+   * Export to Mermaid format
+   */
+  toMermaid() {
+    const lines = ["flowchart TD"];
+    for (const node of this.nodes.values()) {
+      const shape = this.getMermaidShape(node);
+      lines.push(`    ${node.id}${shape}`);
+    }
+    for (const edge of this.edges.values()) {
+      const label = edge.label ? ` |${edge.label}|` : "";
+      const arrow = edge.style?.lineType === "dashed" ? "-.->" : "-->";
+      lines.push(`    ${edge.source}${arrow}${label}${edge.target}`);
+    }
+    return lines.join("\n");
+  }
+  /**
+   * Get Mermaid shape for node
+   */
+  getMermaidShape(node) {
+    const label = node.label.replace(/"/g, "'");
+    switch (node.style?.shape) {
+      case "ellipse":
+        return `([${label}])`;
+      case "diamond":
+        return `{${label}}`;
+      case "hexagon":
+        return `{{${label}}}`;
+      default:
+        return `[${label}]`;
+    }
+  }
+  /**
+   * Export to DOT format (Graphviz)
+   */
+  toDOT() {
+    const lines = ["digraph G {", "    rankdir=TB;"];
+    for (const node of this.nodes.values()) {
+      const shape = this.getDOTShape(node);
+      const fill = node.style?.fill ?? "#ffffff";
+      lines.push(
+        `    "${node.id}" [label="${node.label}", shape=${shape}, style=filled, fillcolor="${fill}"];`
+      );
+    }
+    for (const edge of this.edges.values()) {
+      const label = edge.label ? `, label="${edge.label}"` : "";
+      const style = edge.style?.lineType === "dashed" ? ", style=dashed" : "";
+      lines.push(
+        `    "${edge.source}" -> "${edge.target}" [${label}${style}];`
+      );
+    }
+    lines.push("}");
+    return lines.join("\n");
+  }
+  /**
+   * Get DOT shape for node
+   */
+  getDOTShape(node) {
+    switch (node.style?.shape) {
+      case "ellipse":
+        return "ellipse";
+      case "diamond":
+        return "diamond";
+      case "hexagon":
+        return "hexagon";
+      default:
+        return "box";
+    }
+  }
+};
+function createFlowGraphBuilder(options) {
+  return new FlowGraphBuilder(options);
+}
+
+export { DecisionTreeBuilder, FlowGraphBuilder, createDecisionTreeBuilder, createFlowGraphBuilder };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map