elsabro 2.3.0 → 3.7.0

package/references/flow-visualization.md

@@ -0,0 +1,1557 @@
+# ELSABRO Flow Visualization System
+
+> Sistema de visualización y edición visual de flows con graph rendering interactivo.
+
+## Arquitectura General
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                      Flow Visualization System                           │
+├─────────────────────────────────────────────────────────────────────────┤
+│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐         │
+│  │ FlowVisualizer  │  │  GraphRenderer  │  │   NodeEditor    │         │
+│  │  ─────────────  │  │  ─────────────  │  │  ─────────────  │         │
+│  │ • Parse flows   │  │ • Layout algo   │  │ • Node config   │         │
+│  │ • State sync    │  │ • ASCII render  │  │ • Validation    │         │
+│  │ • Export/Import │  │ • SVG export    │  │ • Templates     │         │
+│  └─────────────────┘  └─────────────────┘  └─────────────────┘         │
+│                              │                                          │
+│  ┌───────────────────────────┴───────────────────────────────┐         │
+│  │                   ConnectionManager                        │         │
+│  │  • Edge routing • Validation • Auto-connect • Cycles      │         │
+│  └────────────────────────────────────────────────────────────┘         │
+│                              │                                          │
+│  ┌───────────────────────────┴───────────────────────────────┐         │
+│  │                   InteractiveCanvas                        │         │
+│  │  • Pan/Zoom • Selection • Drag & Drop • Keyboard nav      │         │
+│  └────────────────────────────────────────────────────────────┘         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 1. FlowVisualizer
+
+### Propósito
+Componente principal que coordina la visualización y edición de flows.
+
+### Interfaz
+
+```typescript
+interface FlowVisualizerOptions {
+  flow: Flow;
+  mode: 'view' | 'edit';
+  renderer: 'ascii' | 'svg' | 'html';
+  theme: VisualizerTheme;
+  layout: LayoutAlgorithm;
+  showMinimap?: boolean;
+  showToolbar?: boolean;
+  readonly?: boolean;
+}
+
+interface VisualizerTheme {
+  background: string;
+  nodeColors: Record<NodeType, string>;
+  edgeColor: string;
+  selectedColor: string;
+  errorColor: string;
+  font: string;
+}
+
+type LayoutAlgorithm =
+  | 'dagre'        // Directed acyclic graph (default)
+  | 'elk'          // Eclipse Layout Kernel
+  | 'force'        // Force-directed
+  | 'tree'         // Hierarchical tree
+  | 'radial'       // Radial layout
+  | 'manual';      // User-positioned
+
+interface FlowVisualizer {
+  // Core
+  render(): string | HTMLElement;
+  update(flow: Flow): void;
+  refresh(): void;
+
+  // Navigation
+  fitToView(): void;
+  zoomIn(): void;
+  zoomOut(): void;
+  zoomTo(level: number): void;
+  panTo(nodeId: string): void;
+  center(): void;
+
+  // Selection
+  select(nodeId: string): void;
+  selectMultiple(nodeIds: string[]): void;
+  clearSelection(): void;
+  getSelected(): string[];
+
+  // Editing (when mode='edit')
+  addNode(type: NodeType, position?: Position): string;
+  removeNode(nodeId: string): void;
+  updateNode(nodeId: string, config: Partial<NodeConfig>): void;
+  connect(sourceId: string, targetId: string, label?: string): void;
+  disconnect(sourceId: string, targetId: string): void;
+
+  // Export/Import
+  exportFlow(): Flow;
+  exportImage(format: 'svg' | 'png'): Promise<Blob>;
+  exportASCII(): string;
+  importFlow(flow: Flow): void;
+
+  // Events
+  on(event: VisualizerEvent, callback: Function): () => void;
+  off(event: VisualizerEvent, callback: Function): void;
+}
+
+type VisualizerEvent =
+  | 'node:click'
+  | 'node:dblclick'
+  | 'node:select'
+  | 'node:move'
+  | 'edge:click'
+  | 'edge:select'
+  | 'canvas:click'
+  | 'flow:change'
+  | 'zoom:change'
+  | 'selection:change';
+```
+
+### Implementación
+
+```typescript
+class FlowVisualizerImpl implements FlowVisualizer {
+  private flow: Flow;
+  private options: FlowVisualizerOptions;
+  private renderer: GraphRenderer;
+  private layout: LayoutEngine;
+  private selection: Set<string> = new Set();
+  private eventEmitter: EventEmitter = new EventEmitter();
+  private zoom: number = 1;
+  private pan: Position = { x: 0, y: 0 };
+
+  constructor(options: FlowVisualizerOptions) {
+    this.options = {
+      showMinimap: true,
+      showToolbar: true,
+      readonly: false,
+      ...options
+    };
+    this.flow = options.flow;
+    this.renderer = this.createRenderer(options.renderer);
+    this.layout = this.createLayout(options.layout);
+  }
+
+  private createRenderer(type: string): GraphRenderer {
+    switch (type) {
+      case 'ascii':
+        return new ASCIIRenderer(this.options.theme);
+      case 'svg':
+        return new SVGRenderer(this.options.theme);
+      case 'html':
+        return new HTMLRenderer(this.options.theme);
+      default:
+        return new ASCIIRenderer(this.options.theme);
+    }
+  }
+
+  private createLayout(algorithm: LayoutAlgorithm): LayoutEngine {
+    switch (algorithm) {
+      case 'dagre':
+        return new DagreLayout();
+      case 'elk':
+        return new ELKLayout();
+      case 'force':
+        return new ForceDirectedLayout();
+      case 'tree':
+        return new TreeLayout();
+      case 'radial':
+        return new RadialLayout();
+      case 'manual':
+        return new ManualLayout();
+      default:
+        return new DagreLayout();
+    }
+  }
+
+  render(): string | HTMLElement {
+    // Calculate layout positions
+    const positions = this.layout.calculate(this.flow);
+
+    // Apply positions to flow
+    const layoutedFlow = this.applyPositions(this.flow, positions);
+
+    // Render with current state
+    return this.renderer.render(layoutedFlow, {
+      zoom: this.zoom,
+      pan: this.pan,
+      selection: this.selection,
+      showMinimap: this.options.showMinimap,
+      showToolbar: this.options.showToolbar,
+      mode: this.options.mode
+    });
+  }
+
+  update(flow: Flow): void {
+    this.flow = flow;
+    this.eventEmitter.emit('flow:change', flow);
+  }
+
+  // Selection
+  select(nodeId: string): void {
+    this.selection.clear();
+    this.selection.add(nodeId);
+    this.eventEmitter.emit('selection:change', Array.from(this.selection));
+    this.eventEmitter.emit('node:select', { nodeId });
+  }
+
+  selectMultiple(nodeIds: string[]): void {
+    this.selection = new Set(nodeIds);
+    this.eventEmitter.emit('selection:change', nodeIds);
+  }
+
+  clearSelection(): void {
+    this.selection.clear();
+    this.eventEmitter.emit('selection:change', []);
+  }
+
+  getSelected(): string[] {
+    return Array.from(this.selection);
+  }
+
+  // Editing
+  addNode(type: NodeType, position?: Position): string {
+    if (this.options.readonly) {
+      throw new Error('Cannot edit in readonly mode');
+    }
+
+    const nodeId = `node_${Date.now()}`;
+    const newNode: FlowNode = {
+      id: nodeId,
+      type,
+      config: this.getDefaultConfig(type),
+      position: position || this.getNextPosition()
+    };
+
+    this.flow.nodes.push(newNode);
+    this.eventEmitter.emit('flow:change', this.flow);
+    return nodeId;
+  }
+
+  removeNode(nodeId: string): void {
+    if (this.options.readonly) {
+      throw new Error('Cannot edit in readonly mode');
+    }
+
+    // Remove node
+    this.flow.nodes = this.flow.nodes.filter(n => n.id !== nodeId);
+
+    // Remove connected edges
+    this.flow.edges = this.flow.edges.filter(
+      e => e.source !== nodeId && e.target !== nodeId
+    );
+
+    this.selection.delete(nodeId);
+    this.eventEmitter.emit('flow:change', this.flow);
+  }
+
+  connect(sourceId: string, targetId: string, label?: string): void {
+    if (this.options.readonly) {
+      throw new Error('Cannot edit in readonly mode');
+    }
+
+    // Validate connection
+    const validation = this.validateConnection(sourceId, targetId);
+    if (!validation.valid) {
+      throw new Error(validation.error);
+    }
+
+    const edge: FlowEdge = {
+      id: `edge_${sourceId}_${targetId}`,
+      source: sourceId,
+      target: targetId,
+      label
+    };
+
+    this.flow.edges.push(edge);
+    this.eventEmitter.emit('flow:change', this.flow);
+  }
+
+  disconnect(sourceId: string, targetId: string): void {
+    if (this.options.readonly) {
+      throw new Error('Cannot edit in readonly mode');
+    }
+
+    this.flow.edges = this.flow.edges.filter(
+      e => !(e.source === sourceId && e.target === targetId)
+    );
+    this.eventEmitter.emit('flow:change', this.flow);
+  }
+
+  private validateConnection(sourceId: string, targetId: string): { valid: boolean; error?: string } {
+    // Check nodes exist
+    const sourceNode = this.flow.nodes.find(n => n.id === sourceId);
+    const targetNode = this.flow.nodes.find(n => n.id === targetId);
+
+    if (!sourceNode || !targetNode) {
+      return { valid: false, error: 'Node not found' };
+    }
+
+    // Check for self-connection
+    if (sourceId === targetId) {
+      return { valid: false, error: 'Cannot connect node to itself' };
+    }
+
+    // Check for duplicate connection
+    const exists = this.flow.edges.some(
+      e => e.source === sourceId && e.target === targetId
+    );
+    if (exists) {
+      return { valid: false, error: 'Connection already exists' };
+    }
+
+    // Check for cycles (if DAG required)
+    if (this.wouldCreateCycle(sourceId, targetId)) {
+      return { valid: false, error: 'Connection would create a cycle' };
+    }
+
+    return { valid: true };
+  }
+
+  private wouldCreateCycle(sourceId: string, targetId: string): boolean {
+    // DFS to check if adding edge would create cycle
+    const visited = new Set<string>();
+    const stack = [sourceId];
+
+    // First, check if target can reach source
+    const reverseStack = [targetId];
+    while (reverseStack.length > 0) {
+      const current = reverseStack.pop()!;
+      if (current === sourceId) {
+        return true; // Would create cycle
+      }
+      if (visited.has(current)) continue;
+      visited.add(current);
+
+      // Get outgoing edges from current
+      const outgoing = this.flow.edges
+        .filter(e => e.source === current)
+        .map(e => e.target);
+      reverseStack.push(...outgoing);
+    }
+
+    return false;
+  }
+
+  // Export
+  exportFlow(): Flow {
+    return JSON.parse(JSON.stringify(this.flow));
+  }
+
+  async exportImage(format: 'svg' | 'png'): Promise<Blob> {
+    if (this.renderer instanceof SVGRenderer) {
+      const svg = this.renderer.renderToString(this.flow);
+
+      if (format === 'svg') {
+        return new Blob([svg], { type: 'image/svg+xml' });
+      } else {
+        // Convert SVG to PNG
+        return this.svgToPng(svg);
+      }
+    }
+    throw new Error('Image export only supported with SVG renderer');
+  }
+
+  exportASCII(): string {
+    const asciiRenderer = new ASCIIRenderer(this.options.theme);
+    const positions = this.layout.calculate(this.flow);
+    const layoutedFlow = this.applyPositions(this.flow, positions);
+    return asciiRenderer.renderToString(layoutedFlow);
+  }
+
+  // Events
+  on(event: VisualizerEvent, callback: Function): () => void {
+    this.eventEmitter.on(event, callback);
+    return () => this.eventEmitter.off(event, callback);
+  }
+
+  off(event: VisualizerEvent, callback: Function): void {
+    this.eventEmitter.off(event, callback);
+  }
+
+  private getDefaultConfig(type: NodeType): NodeConfig {
+    const defaults: Record<NodeType, NodeConfig> = {
+      entry: { name: 'Start' },
+      exit: { name: 'End' },
+      agent: { name: 'Agent', agentType: 'general-purpose' },
+      parallel: { name: 'Parallel', branches: [] },
+      sequence: { name: 'Sequence', steps: [] },
+      condition: { name: 'Condition', expression: 'true' },
+      router: { name: 'Router', routes: [] },
+      loop: { name: 'Loop', maxIterations: 10 },
+      interrupt: { name: 'Interrupt', type: 'approval' },
+      subflow: { name: 'Subflow', flowId: '' }
+    };
+    return defaults[type] || { name: type };
+  }
+
+  private getNextPosition(): Position {
+    // Find rightmost node and place new node to its right
+    let maxX = 0;
+    for (const node of this.flow.nodes) {
+      if (node.position && node.position.x > maxX) {
+        maxX = node.position.x;
+      }
+    }
+    return { x: maxX + 200, y: 100 };
+  }
+
+  private applyPositions(flow: Flow, positions: Map<string, Position>): Flow {
+    return {
+      ...flow,
+      nodes: flow.nodes.map(node => ({
+        ...node,
+        position: positions.get(node.id) || node.position || { x: 0, y: 0 }
+      }))
+    };
+  }
+}
+```
+
+---
+
+## 2. GraphRenderer
+
+### Propósito
+Renderiza el grafo del flow en diferentes formatos (ASCII, SVG, HTML).
+
+### ASCII Renderer
+
+```typescript
+interface ASCIIRendererOptions {
+  width?: number;
+  height?: number;
+  nodeWidth?: number;
+  nodeHeight?: number;
+  spacing?: number;
+  charset?: 'unicode' | 'ascii';
+}
+
+class ASCIIRenderer implements GraphRenderer {
+  private options: Required<ASCIIRendererOptions>;
+  private theme: VisualizerTheme;
+
+  // Unicode box drawing characters
+  private chars = {
+    unicode: {
+      horizontal: '─',
+      vertical: '│',
+      topLeft: '┌',
+      topRight: '┐',
+      bottomLeft: '└',
+      bottomRight: '┘',
+      cross: '┼',
+      teeDown: '┬',
+      teeUp: '┴',
+      teeRight: '├',
+      teeLeft: '┤',
+      arrowRight: '→',
+      arrowDown: '↓',
+      arrowLeft: '←',
+      arrowUp: '↑',
+      bullet: '●',
+      diamond: '◆',
+      square: '■'
+    },
+    ascii: {
+      horizontal: '-',
+      vertical: '|',
+      topLeft: '+',
+      topRight: '+',
+      bottomLeft: '+',
+      bottomRight: '+',
+      cross: '+',
+      teeDown: '+',
+      teeUp: '+',
+      teeRight: '+',
+      teeLeft: '+',
+      arrowRight: '>',
+      arrowDown: 'v',
+      arrowLeft: '<',
+      arrowUp: '^',
+      bullet: '*',
+      diamond: '*',
+      square: '#'
+    }
+  };
+
+  constructor(theme: VisualizerTheme, options?: ASCIIRendererOptions) {
+    this.theme = theme;
+    this.options = {
+      width: 120,
+      height: 40,
+      nodeWidth: 20,
+      nodeHeight: 5,
+      spacing: 4,
+      charset: 'unicode',
+      ...options
+    };
+  }
+
+  render(flow: Flow, state: RenderState): string {
+    const canvas = this.createCanvas();
+    const c = this.chars[this.options.charset];
+
+    // Render edges first (behind nodes)
+    for (const edge of flow.edges) {
+      this.renderEdge(canvas, edge, flow, c);
+    }
+
+    // Render nodes
+    for (const node of flow.nodes) {
+      const isSelected = state.selection.has(node.id);
+      this.renderNode(canvas, node, isSelected, c);
+    }
+
+    // Add title
+    this.renderTitle(canvas, flow.id || 'Untitled Flow');
+
+    // Add legend if in edit mode
+    if (state.mode === 'edit') {
+      this.renderLegend(canvas, c);
+    }
+
+    return this.canvasToString(canvas);
+  }
+
+  private createCanvas(): string[][] {
+    return Array(this.options.height)
+      .fill(null)
+      .map(() => Array(this.options.width).fill(' '));
+  }
+
+  private renderNode(
+    canvas: string[][],
+    node: FlowNode,
+    isSelected: boolean,
+    c: typeof this.chars.unicode
+  ): void {
+    const { x, y } = node.position || { x: 0, y: 0 };
+    const w = this.options.nodeWidth;
+    const h = this.options.nodeHeight;
+
+    // Scale positions to canvas
+    const cx = Math.floor(x / 10);
+    const cy = Math.floor(y / 10);
+
+    // Draw box
+    const borderChar = isSelected ? '═' : c.horizontal;
+    const vertChar = isSelected ? '║' : c.vertical;
+
+    // Top border
+    this.drawText(canvas, cx, cy, c.topLeft + borderChar.repeat(w - 2) + c.topRight);
+
+    // Sides and content
+    for (let i = 1; i < h - 1; i++) {
+      this.drawText(canvas, cx, cy + i, vertChar);
+      this.drawText(canvas, cx + w - 1, cy + i, vertChar);
+    }
+
+    // Bottom border
+    this.drawText(canvas, cx, cy + h - 1, c.bottomLeft + borderChar.repeat(w - 2) + c.bottomRight);
+
+    // Node icon based on type
+    const icon = this.getNodeIcon(node.type, c);
+    this.drawText(canvas, cx + 2, cy + 1, icon);
+
+    // Node name (truncated)
+    const name = (node.config?.name || node.type).slice(0, w - 6);
+    this.drawText(canvas, cx + 4, cy + 1, name);
+
+    // Node type
+    const typeLabel = `[${node.type}]`.slice(0, w - 4);
+    this.drawText(canvas, cx + 2, cy + 2, typeLabel);
+
+    // Status indicator if running
+    if (node._status === 'running') {
+      this.drawText(canvas, cx + w - 3, cy + 1, '⟳');
+    } else if (node._status === 'completed') {
+      this.drawText(canvas, cx + w - 3, cy + 1, '✓');
+    } else if (node._status === 'error') {
+      this.drawText(canvas, cx + w - 3, cy + 1, '✗');
+    }
+  }
+
+  private renderEdge(
+    canvas: string[][],
+    edge: FlowEdge,
+    flow: Flow,
+    c: typeof this.chars.unicode
+  ): void {
+    const sourceNode = flow.nodes.find(n => n.id === edge.source);
+    const targetNode = flow.nodes.find(n => n.id === edge.target);
+
+    if (!sourceNode?.position || !targetNode?.position) return;
+
+    const w = this.options.nodeWidth;
+    const h = this.options.nodeHeight;
+
+    // Calculate connection points
+    const sx = Math.floor(sourceNode.position.x / 10) + w;
+    const sy = Math.floor(sourceNode.position.y / 10) + Math.floor(h / 2);
+    const tx = Math.floor(targetNode.position.x / 10);
+    const ty = Math.floor(targetNode.position.y / 10) + Math.floor(h / 2);
+
+    // Draw edge (simple right-angle routing)
+    const midX = Math.floor((sx + tx) / 2);
+
+    // Horizontal from source
+    for (let x = sx; x <= midX; x++) {
+      this.drawChar(canvas, x, sy, c.horizontal);
+    }
+
+    // Vertical segment
+    const [minY, maxY] = sy < ty ? [sy, ty] : [ty, sy];
+    for (let y = minY; y <= maxY; y++) {
+      this.drawChar(canvas, midX, y, c.vertical);
+    }
+
+    // Horizontal to target
+    for (let x = midX; x < tx; x++) {
+      this.drawChar(canvas, x, ty, c.horizontal);
+    }
+
+    // Arrow at target
+    this.drawChar(canvas, tx - 1, ty, c.arrowRight);
+
+    // Corner characters
+    if (sy !== ty) {
+      if (sy < ty) {
+        this.drawChar(canvas, midX, sy, c.topLeft);
+        this.drawChar(canvas, midX, ty, c.bottomRight);
+      } else {
+        this.drawChar(canvas, midX, sy, c.bottomLeft);
+        this.drawChar(canvas, midX, ty, c.topRight);
+      }
+    }
+
+    // Edge label
+    if (edge.label) {
+      const labelX = midX - Math.floor(edge.label.length / 2);
+      const labelY = Math.floor((sy + ty) / 2);
+      this.drawText(canvas, labelX, labelY, `[${edge.label}]`);
+    }
+  }
+
+  private getNodeIcon(type: NodeType, c: typeof this.chars.unicode): string {
+    const icons: Record<NodeType, string> = {
+      entry: '▶',
+      exit: '■',
+      agent: '◉',
+      parallel: '⫴',
+      sequence: '→',
+      condition: '◇',
+      router: '⋔',
+      loop: '↻',
+      interrupt: '⏸',
+      subflow: '⊞'
+    };
+    return icons[type] || c.bullet;
+  }
+
+  private renderTitle(canvas: string[][], title: string): void {
+    const centeredX = Math.floor((this.options.width - title.length - 4) / 2);
+    this.drawText(canvas, centeredX, 0, `╔${'═'.repeat(title.length + 2)}╗`);
+    this.drawText(canvas, centeredX, 1, `║ ${title} ║`);
+    this.drawText(canvas, centeredX, 2, `╚${'═'.repeat(title.length + 2)}╝`);
+  }
+
+  private renderLegend(canvas: string[][], c: typeof this.chars.unicode): void {
+    const y = this.options.height - 3;
+    const legend = [
+      `${this.getNodeIcon('entry', c)} Entry`,
+      `${this.getNodeIcon('agent', c)} Agent`,
+      `${this.getNodeIcon('parallel', c)} Parallel`,
+      `${this.getNodeIcon('condition', c)} Condition`,
+      `${this.getNodeIcon('exit', c)} Exit`
+    ].join('  │  ');
+
+    this.drawText(canvas, 2, y, `Legend: ${legend}`);
+  }
+
+  private drawText(canvas: string[][], x: number, y: number, text: string): void {
+    if (y < 0 || y >= canvas.length) return;
+    for (let i = 0; i < text.length; i++) {
+      if (x + i >= 0 && x + i < canvas[0].length) {
+        canvas[y][x + i] = text[i];
+      }
+    }
+  }
+
+  private drawChar(canvas: string[][], x: number, y: number, char: string): void {
+    if (y >= 0 && y < canvas.length && x >= 0 && x < canvas[0].length) {
+      // Don't overwrite nodes
+      if (canvas[y][x] === ' ' || canvas[y][x] === '─' || canvas[y][x] === '│') {
+        canvas[y][x] = char;
+      }
+    }
+  }
+
+  private canvasToString(canvas: string[][]): string {
+    return canvas.map(row => row.join('')).join('\n');
+  }
+
+  renderToString(flow: Flow): string {
+    return this.render(flow, {
+      zoom: 1,
+      pan: { x: 0, y: 0 },
+      selection: new Set(),
+      showMinimap: false,
+      showToolbar: false,
+      mode: 'view'
+    });
+  }
+}
+```
+
+### Visualización de Ejemplo
+
+```
+╔════════════════════════════════════════════════════════════════════════════════╗
+║                              development_flow                                    ║
+╚════════════════════════════════════════════════════════════════════════════════╝
+
+  ┌──────────────────┐                    ┌──────────────────┐
+  │ ▶ Start          │                    │ ⫴ Analyze        │
+  │ [entry]          │───────────────────→│ [parallel]       │
+  │                  │                    │ branches: 3      │
+  └──────────────────┘                    └──────────────────┘
+                                                   │
+                                                   │
+                                                   ↓
+  ┌──────────────────┐                    ┌──────────────────┐
+  │ ◇ Has Errors?    │                    │ ◉ Implement      │
+  │ [condition]      │←───────────────────│ [agent]          │
+  │                  │                    │ type: executor   │
+  └──────────────────┘                    └──────────────────┘
+         │
+    ┌────┴────┐
+    │ yes  no │
+    ↓         ↓
+  ┌──────────────────┐                    ┌──────────────────┐
+  │ ↻ Fix Loop       │                    │ ⫴ Review         │
+  │ [loop]           │                    │ [parallel]       │
+  │ max: 3           │                    │ branches: 3      │
+  └──────────────────┘                    └──────────────────┘
+                                                   │
+                                                   ↓
+                                          ┌──────────────────┐
+                                          │ ■ Complete       │
+                                          │ [exit]           │
+                                          │                  │
+                                          └──────────────────┘
+
+  Legend: ▶ Entry  │  ◉ Agent  │  ⫴ Parallel  │  ◇ Condition  │  ■ Exit
+```
+
+---
+
+## 3. NodeEditor
+
+### Propósito
+Editor visual para configurar nodos individuales.
+
+### Interfaz
+
+```typescript
+interface NodeEditorOptions {
+  node: FlowNode;
+  availableAgents: AgentDefinition[];
+  availableFlows: Flow[];
+  customValidators?: Record<string, NodeValidator>;
+}
+
+interface NodeEditor {
+  // Core
+  render(): string;
+  getValue(): NodeConfig;
+  setValue(config: NodeConfig): void;
+
+  // Validation
+  validate(): ValidationResult;
+  getErrors(): string[];
+
+  // Templates
+  applyTemplate(templateId: string): void;
+  getTemplates(nodeType: NodeType): NodeTemplate[];
+
+  // Events
+  onChange(callback: (config: NodeConfig) => void): () => void;
+}
+
+interface NodeTemplate {
+  id: string;
+  name: string;
+  description: string;
+  nodeType: NodeType;
+  config: Partial<NodeConfig>;
+}
+```
+
+### Implementación
+
+```typescript
+class NodeEditorImpl implements NodeEditor {
+  private node: FlowNode;
+  private config: NodeConfig;
+  private options: NodeEditorOptions;
+  private changeCallbacks: Set<Function> = new Set();
+
+  constructor(options: NodeEditorOptions) {
+    this.options = options;
+    this.node = options.node;
+    this.config = { ...options.node.config };
+  }
+
+  render(): string {
+    const lines: string[] = [];
+    const c = {
+      h: '─', v: '│', tl: '┌', tr: '┐', bl: '└', br: '┘'
+    };
+
+    // Header
+    lines.push(`${c.tl}${'─'.repeat(50)}${c.tr}`);
+    lines.push(`${c.v}  Node Editor: ${this.node.type.padEnd(33)}${c.v}`);
+    lines.push(`${c.v}${'─'.repeat(50)}${c.v}`);
+
+    // Fields based on node type
+    const fields = this.getFieldsForType(this.node.type);
+
+    for (const field of fields) {
+      const value = this.config[field.key] ?? field.default ?? '';
+      const displayValue = this.formatValue(value, field.type);
+      const label = field.label.padEnd(15);
+
+      if (field.type === 'select') {
+        lines.push(`${c.v}  ${label}: [${displayValue}] ▼`.padEnd(51) + c.v);
+      } else if (field.type === 'boolean') {
+        const checkbox = value ? '[✓]' : '[ ]';
+        lines.push(`${c.v}  ${label}: ${checkbox}`.padEnd(51) + c.v);
+      } else if (field.type === 'array') {
+        lines.push(`${c.v}  ${label}:`.padEnd(51) + c.v);
+        const items = Array.isArray(value) ? value : [];
+        for (const item of items.slice(0, 3)) {
+          lines.push(`${c.v}    • ${String(item).slice(0, 40)}`.padEnd(51) + c.v);
+        }
+        if (items.length > 3) {
+          lines.push(`${c.v}    ... and ${items.length - 3} more`.padEnd(51) + c.v);
+        }
+      } else {
+        lines.push(`${c.v}  ${label}: ${displayValue.slice(0, 30)}`.padEnd(51) + c.v);
+      }
+    }
+
+    // Validation status
+    const validation = this.validate();
+    lines.push(`${c.v}${'─'.repeat(50)}${c.v}`);
+    if (validation.valid) {
+      lines.push(`${c.v}  Status: ✓ Valid`.padEnd(51) + c.v);
+    } else {
+      lines.push(`${c.v}  Status: ✗ ${validation.errors.length} error(s)`.padEnd(51) + c.v);
+      for (const error of validation.errors.slice(0, 2)) {
+        lines.push(`${c.v}    • ${error.slice(0, 42)}`.padEnd(51) + c.v);
+      }
+    }
+
+    // Footer
+    lines.push(`${c.bl}${'─'.repeat(50)}${c.br}`);
+
+    return lines.join('\n');
+  }
+
+  private getFieldsForType(type: NodeType): FieldDefinition[] {
+    const commonFields: FieldDefinition[] = [
+      { key: 'name', label: 'Name', type: 'string', required: true }
+    ];
+
+    const typeSpecificFields: Record<NodeType, FieldDefinition[]> = {
+      entry: [],
+      exit: [
+        { key: 'outputMapping', label: 'Output Map', type: 'object' }
+      ],
+      agent: [
+        { key: 'agentType', label: 'Agent Type', type: 'select', options: this.getAgentOptions() },
+        { key: 'model', label: 'Model', type: 'select', options: ['haiku', 'sonnet', 'opus'] },
+        { key: 'prompt', label: 'Prompt', type: 'text' },
+        { key: 'timeout', label: 'Timeout (ms)', type: 'number', default: 30000 }
+      ],
+      parallel: [
+        { key: 'branches', label: 'Branches', type: 'array' },
+        { key: 'joinType', label: 'Join Type', type: 'select', options: ['all', 'any', 'quorum', 'first_success'] },
+        { key: 'quorumSize', label: 'Quorum Size', type: 'number', default: 2 }
+      ],
+      sequence: [
+        { key: 'steps', label: 'Steps', type: 'array' },
+        { key: 'stopOnError', label: 'Stop on Error', type: 'boolean', default: true }
+      ],
+      condition: [
+        { key: 'expression', label: 'Expression', type: 'string', required: true },
+        { key: 'trueBranch', label: 'True Branch', type: 'string' },
+        { key: 'falseBranch', label: 'False Branch', type: 'string' }
+      ],
+      router: [
+        { key: 'routes', label: 'Routes', type: 'array' },
+        { key: 'defaultRoute', label: 'Default Route', type: 'string' }
+      ],
+      loop: [
+        { key: 'maxIterations', label: 'Max Iterations', type: 'number', default: 10 },
+        { key: 'condition', label: 'Condition', type: 'string' },
+        { key: 'body', label: 'Loop Body', type: 'string' }
+      ],
+      interrupt: [
+        { key: 'type', label: 'Type', type: 'select', options: ['approval', 'decision', 'input', 'confirmation'] },
+        { key: 'message', label: 'Message', type: 'text' },
+        { key: 'timeout', label: 'Timeout (ms)', type: 'number' },
+        { key: 'defaultAction', label: 'Default Action', type: 'string' }
+      ],
+      subflow: [
+        { key: 'flowId', label: 'Flow ID', type: 'select', options: this.getFlowOptions() },
+        { key: 'inputMapping', label: 'Input Map', type: 'object' },
+        { key: 'outputMapping', label: 'Output Map', type: 'object' }
+      ]
+    };
+
+    return [...commonFields, ...(typeSpecificFields[type] || [])];
+  }
+
+  private getAgentOptions(): string[] {
+    return this.options.availableAgents.map(a => a.name);
+  }
+
+  private getFlowOptions(): string[] {
+    return this.options.availableFlows.map(f => f.id);
+  }
+
+  validate(): ValidationResult {
+    const errors: string[] = [];
+    const fields = this.getFieldsForType(this.node.type);
+
+    for (const field of fields) {
+      const value = this.config[field.key];
+
+      // Required check
+      if (field.required && (value === undefined || value === null || value === '')) {
+        errors.push(`${field.label} is required`);
+      }
+
+      // Type validation
+      if (value !== undefined && value !== null) {
+        switch (field.type) {
+          case 'number':
+            if (typeof value !== 'number' || isNaN(value)) {
+              errors.push(`${field.label} must be a number`);
+            }
+            break;
+          case 'boolean':
+            if (typeof value !== 'boolean') {
+              errors.push(`${field.label} must be a boolean`);
+            }
+            break;
+          case 'array':
+            if (!Array.isArray(value)) {
+              errors.push(`${field.label} must be an array`);
+            }
+            break;
+        }
+      }
+    }
+
+    // Custom validators
+    if (this.options.customValidators?.[this.node.type]) {
+      const customErrors = this.options.customValidators[this.node.type](this.config);
+      errors.push(...customErrors);
+    }
+
+    return { valid: errors.length === 0, errors };
+  }
+
+  getValue(): NodeConfig {
+    return { ...this.config };
+  }
+
+  setValue(config: NodeConfig): void {
+    this.config = { ...config };
+    this.notifyChange();
+  }
+
+  getTemplates(nodeType: NodeType): NodeTemplate[] {
+    const templates: Record<NodeType, NodeTemplate[]> = {
+      agent: [
+        {
+          id: 'explore-agent',
+          name: 'Exploration Agent',
+          description: 'Fast agent for codebase exploration',
+          nodeType: 'agent',
+          config: { agentType: 'Explore', model: 'haiku', timeout: 30000 }
+        },
+        {
+          id: 'implement-agent',
+          name: 'Implementation Agent',
+          description: 'High-quality agent for code implementation',
+          nodeType: 'agent',
+          config: { agentType: 'elsabro-executor', model: 'opus', timeout: 120000 }
+        },
+        {
+          id: 'review-agent',
+          name: 'Code Review Agent',
+          description: 'Agent for thorough code review',
+          nodeType: 'agent',
+          config: { agentType: 'pr-review-toolkit:code-reviewer', model: 'opus', timeout: 60000 }
+        }
+      ],
+      parallel: [
+        {
+          id: 'explore-parallel',
+          name: 'Exploration Wave',
+          description: '4 parallel exploration agents',
+          nodeType: 'parallel',
+          config: {
+            branches: [
+              { agent: 'Explore' },
+              { agent: 'Plan' },
+              { agent: 'feature-dev:code-explorer' },
+              { agent: 'general-purpose' }
+            ],
+            joinType: 'all'
+          }
+        },
+        {
+          id: 'review-parallel',
+          name: 'Review Wave',
+          description: '3 parallel review agents',
+          nodeType: 'parallel',
+          config: {
+            branches: [
+              { agent: 'pr-review-toolkit:code-reviewer' },
+              { agent: 'pr-review-toolkit:silent-failure-hunter' },
+              { agent: 'elsabro-verifier' }
+            ],
+            joinType: 'all'
+          }
+        }
+      ],
+      // ... other node types
+    } as Record<NodeType, NodeTemplate[]>;
+
+    return templates[nodeType] || [];
+  }
+
+  applyTemplate(templateId: string): void {
+    const templates = this.getTemplates(this.node.type);
+    const template = templates.find(t => t.id === templateId);
+
+    if (template) {
+      this.config = { ...this.config, ...template.config };
+      this.notifyChange();
+    }
+  }
+
+  onChange(callback: Function): () => void {
+    this.changeCallbacks.add(callback);
+    return () => this.changeCallbacks.delete(callback);
+  }
+
+  private notifyChange(): void {
+    this.changeCallbacks.forEach(cb => cb(this.config));
+  }
+
+  private formatValue(value: unknown, type: string): string {
+    if (value === undefined || value === null) return '';
+    if (type === 'array') return `${(value as unknown[]).length} items`;
+    if (type === 'object') return '{...}';
+    return String(value);
+  }
+}
+
+interface FieldDefinition {
+  key: string;
+  label: string;
+  type: 'string' | 'number' | 'boolean' | 'select' | 'text' | 'array' | 'object';
+  required?: boolean;
+  default?: unknown;
+  options?: string[];
+}
+```
+
+---
+
+## 4. ConnectionManager
+
+### Propósito
+Gestiona las conexiones entre nodos con validación y auto-routing.
+
+### Interfaz
+
+```typescript
+interface ConnectionManager {
+  // Validation
+  canConnect(sourceId: string, targetId: string): boolean;
+  validateConnection(edge: FlowEdge): ValidationResult;
+  validateAllConnections(flow: Flow): ValidationResult[];
+
+  // Operations
+  suggestConnections(nodeId: string, flow: Flow): SuggestedConnection[];
+  autoConnect(flow: Flow): FlowEdge[];
+  optimizeRouting(flow: Flow): Flow;
+
+  // Analysis
+  findCycles(flow: Flow): string[][];
+  getUnconnectedNodes(flow: Flow): string[];
+  getDeadEnds(flow: Flow): string[];
+  getOrphanedNodes(flow: Flow): string[];
+}
+
+interface SuggestedConnection {
+  sourceId: string;
+  targetId: string;
+  confidence: number;
+  reason: string;
+}
+```
+
+### Implementación
+
+```typescript
+class ConnectionManagerImpl implements ConnectionManager {
+  private nodeRules: Map<NodeType, ConnectionRules> = new Map();
+
+  constructor() {
+    this.initializeRules();
+  }
+
+  private initializeRules(): void {
+    // Define valid connections for each node type
+    this.nodeRules.set('entry', {
+      maxOutgoing: 1,
+      maxIncoming: 0,
+      allowedTargets: ['agent', 'parallel', 'sequence', 'condition', 'router', 'subflow']
+    });
+
+    this.nodeRules.set('exit', {
+      maxOutgoing: 0,
+      maxIncoming: Infinity,
+      allowedSources: ['agent', 'parallel', 'sequence', 'condition', 'router', 'loop', 'subflow']
+    });
+
+    this.nodeRules.set('agent', {
+      maxOutgoing: 1,
+      maxIncoming: Infinity,
+      allowedTargets: ['agent', 'parallel', 'sequence', 'condition', 'router', 'exit', 'loop', 'interrupt', 'subflow'],
+      allowedSources: ['entry', 'agent', 'parallel', 'sequence', 'condition', 'router', 'loop', 'subflow']
+    });
+
+    this.nodeRules.set('parallel', {
+      maxOutgoing: 1,
+      maxIncoming: Infinity,
+      allowedTargets: ['agent', 'condition', 'router', 'exit', 'parallel', 'sequence'],
+      allowedSources: ['entry', 'agent', 'condition', 'router', 'loop', 'sequence']
+    });
+
+    this.nodeRules.set('condition', {
+      maxOutgoing: 2, // true and false branches
+      maxIncoming: Infinity,
+      allowedTargets: ['agent', 'parallel', 'sequence', 'exit', 'loop', 'subflow'],
+      allowedSources: ['agent', 'parallel', 'sequence', 'loop', 'entry']
+    });
+
+    this.nodeRules.set('loop', {
+      maxOutgoing: 2, // continue and exit
+      maxIncoming: Infinity,
+      allowedTargets: ['agent', 'parallel', 'condition', 'exit'],
+      allowedSources: ['agent', 'parallel', 'condition']
+    });
+  }
+
+  canConnect(sourceId: string, targetId: string, flow: Flow): boolean {
+    const result = this.validateConnectionAttempt(sourceId, targetId, flow);
+    return result.valid;
+  }
+
+  private validateConnectionAttempt(
+    sourceId: string,
+    targetId: string,
+    flow: Flow
+  ): ValidationResult {
+    const errors: string[] = [];
+
+    const sourceNode = flow.nodes.find(n => n.id === sourceId);
+    const targetNode = flow.nodes.find(n => n.id === targetId);
+
+    if (!sourceNode) {
+      errors.push(`Source node not found: ${sourceId}`);
+      return { valid: false, errors };
+    }
+
+    if (!targetNode) {
+      errors.push(`Target node not found: ${targetId}`);
+      return { valid: false, errors };
+    }
+
+    // Self-connection
+    if (sourceId === targetId) {
+      errors.push('Cannot connect node to itself');
+      return { valid: false, errors };
+    }
+
+    // Get rules
+    const sourceRules = this.nodeRules.get(sourceNode.type);
+    const targetRules = this.nodeRules.get(targetNode.type);
+
+    // Check outgoing limit
+    if (sourceRules) {
+      const outgoingCount = flow.edges.filter(e => e.source === sourceId).length;
+      if (outgoingCount >= sourceRules.maxOutgoing) {
+        errors.push(`${sourceNode.type} node has reached maximum outgoing connections`);
+      }
+
+      // Check allowed targets
+      if (sourceRules.allowedTargets && !sourceRules.allowedTargets.includes(targetNode.type)) {
+        errors.push(`${sourceNode.type} cannot connect to ${targetNode.type}`);
+      }
+    }
+
+    // Check incoming limit
+    if (targetRules) {
+      const incomingCount = flow.edges.filter(e => e.target === targetId).length;
+      if (incomingCount >= targetRules.maxIncoming) {
+        errors.push(`${targetNode.type} node has reached maximum incoming connections`);
+      }
+
+      // Check allowed sources
+      if (targetRules.allowedSources && !targetRules.allowedSources.includes(sourceNode.type)) {
+        errors.push(`${targetNode.type} cannot receive connection from ${sourceNode.type}`);
+      }
+    }
+
+    // Check for duplicate edge
+    const exists = flow.edges.some(
+      e => e.source === sourceId && e.target === targetId
+    );
+    if (exists) {
+      errors.push('Connection already exists');
+    }
+
+    // Check for cycles
+    if (this.wouldCreateCycle(sourceId, targetId, flow)) {
+      errors.push('Connection would create a cycle');
+    }
+
+    return { valid: errors.length === 0, errors };
+  }
+
+  private wouldCreateCycle(sourceId: string, targetId: string, flow: Flow): boolean {
+    // Check if there's already a path from target to source
+    const visited = new Set<string>();
+    const stack = [targetId];
+
+    while (stack.length > 0) {
+      const current = stack.pop()!;
+      if (current === sourceId) return true;
+      if (visited.has(current)) continue;
+      visited.add(current);
+
+      const outgoing = flow.edges
+        .filter(e => e.source === current)
+        .map(e => e.target);
+      stack.push(...outgoing);
+    }
+
+    return false;
+  }
+
+  suggestConnections(nodeId: string, flow: Flow): SuggestedConnection[] {
+    const node = flow.nodes.find(n => n.id === nodeId);
+    if (!node) return [];
+
+    const suggestions: SuggestedConnection[] = [];
+    const rules = this.nodeRules.get(node.type);
+
+    // Current connections
+    const outgoing = new Set(flow.edges.filter(e => e.source === nodeId).map(e => e.target));
+    const incoming = new Set(flow.edges.filter(e => e.target === nodeId).map(e => e.source));
+
+    // Suggest outgoing connections
+    if (rules && outgoing.size < rules.maxOutgoing) {
+      for (const targetNode of flow.nodes) {
+        if (targetNode.id === nodeId) continue;
+        if (outgoing.has(targetNode.id)) continue;
+
+        if (this.canConnect(nodeId, targetNode.id, flow)) {
+          suggestions.push({
+            sourceId: nodeId,
+            targetId: targetNode.id,
+            confidence: this.calculateConfidence(node, targetNode, flow),
+            reason: this.getConnectionReason(node, targetNode)
+          });
+        }
+      }
+    }
+
+    // Sort by confidence
+    return suggestions.sort((a, b) => b.confidence - a.confidence);
+  }
+
+  private calculateConfidence(source: FlowNode, target: FlowNode, flow: Flow): number {
+    let confidence = 0.5;
+
+    // Higher confidence for natural flow (entry -> agent -> exit)
+    const naturalOrder: NodeType[] = ['entry', 'agent', 'parallel', 'condition', 'agent', 'exit'];
+    const sourceIndex = naturalOrder.indexOf(source.type);
+    const targetIndex = naturalOrder.indexOf(target.type);
+    if (sourceIndex >= 0 && targetIndex > sourceIndex) {
+      confidence += 0.3;
+    }
+
+    // Lower confidence if target already has incoming connections
+    const targetIncoming = flow.edges.filter(e => e.target === target.id).length;
+    if (targetIncoming > 0) {
+      confidence -= 0.1 * targetIncoming;
+    }
+
+    return Math.max(0, Math.min(1, confidence));
+  }
+
+  private getConnectionReason(source: FlowNode, target: FlowNode): string {
+    if (source.type === 'entry') return 'Start flow execution';
+    if (target.type === 'exit') return 'Complete flow execution';
+    if (source.type === 'condition') return 'Branch based on condition';
+    if (target.type === 'parallel') return 'Execute in parallel';
+    return 'Continue flow execution';
+  }
+
+  findCycles(flow: Flow): string[][] {
+    const cycles: string[][] = [];
+    const visited = new Set<string>();
+    const recStack = new Set<string>();
+    const path: string[] = [];
+
+    const dfs = (nodeId: string): void => {
+      visited.add(nodeId);
+      recStack.add(nodeId);
+      path.push(nodeId);
+
+      const outgoing = flow.edges
+        .filter(e => e.source === nodeId)
+        .map(e => e.target);
+
+      for (const neighbor of outgoing) {
+        if (!visited.has(neighbor)) {
+          dfs(neighbor);
+        } else if (recStack.has(neighbor)) {
+          // Found cycle
+          const cycleStart = path.indexOf(neighbor);
+          cycles.push(path.slice(cycleStart));
+        }
+      }
+
+      path.pop();
+      recStack.delete(nodeId);
+    };
+
+    for (const node of flow.nodes) {
+      if (!visited.has(node.id)) {
+        dfs(node.id);
+      }
+    }
+
+    return cycles;
+  }
+
+  getUnconnectedNodes(flow: Flow): string[] {
+    const connectedNodes = new Set<string>();
+
+    for (const edge of flow.edges) {
+      connectedNodes.add(edge.source);
+      connectedNodes.add(edge.target);
+    }
+
+    return flow.nodes
+      .filter(n => !connectedNodes.has(n.id))
+      .map(n => n.id);
+  }
+
+  getDeadEnds(flow: Flow): string[] {
+    // Nodes with incoming but no outgoing (except exit nodes)
+    return flow.nodes
+      .filter(node => {
+        if (node.type === 'exit') return false;
+        const hasIncoming = flow.edges.some(e => e.target === node.id);
+        const hasOutgoing = flow.edges.some(e => e.source === node.id);
+        return hasIncoming && !hasOutgoing;
+      })
+      .map(n => n.id);
+  }
+
+  getOrphanedNodes(flow: Flow): string[] {
+    // Nodes with no incoming connections (except entry nodes)
+    return flow.nodes
+      .filter(node => {
+        if (node.type === 'entry') return false;
+        return !flow.edges.some(e => e.target === node.id);
+      })
+      .map(n => n.id);
+  }
+}
+
+interface ConnectionRules {
+  maxOutgoing: number;
+  maxIncoming: number;
+  allowedTargets?: NodeType[];
+  allowedSources?: NodeType[];
+}
+```
+
+---
+
+## 5. Comandos CLI
+
+### /elsabro:flow visualize
+
+```bash
+# Ver flow actual
+/elsabro:flow visualize
+
+# Ver flow específico
+/elsabro:flow visualize development_flow
+
+# Exportar a SVG
+/elsabro:flow visualize --export svg --output flow.svg
+
+# Modo editor interactivo
+/elsabro:flow edit development_flow
+```
+
+### Output de Visualización
+
+```
+╔══════════════════════════════════════════════════════════════════════════════╗
+║                         Flow: development_flow                                ║
+╠══════════════════════════════════════════════════════════════════════════════╣
+║  Status: Active  │  Nodes: 8  │  Edges: 9  │  Cycles: 0                      ║
+╠══════════════════════════════════════════════════════════════════════════════╣
+
+    ┌─────────────┐          ┌─────────────┐          ┌─────────────┐
+    │ ▶ start     │─────────→│ ⫴ explore   │─────────→│ ◉ implement │
+    │ [entry]     │          │ [parallel]  │          │ [agent]     │
+    └─────────────┘          │ 4 branches  │          │ opus        │
+                             └─────────────┘          └──────┬──────┘
+                                                             │
+                                    ┌────────────────────────┘
+                                    ↓
+                             ┌─────────────┐          ┌─────────────┐
+                             │ ◇ hasErrors │─── no ──→│ ⫴ review    │
+                             │ [condition] │          │ [parallel]  │
+                             └──────┬──────┘          │ 3 branches  │
+                                    │ yes             └──────┬──────┘
+                                    ↓                        │
+                             ┌─────────────┐                 │
+                             │ ↻ fixLoop   │                 │
+                             │ [loop]      │←────────────────┘
+                             │ max: 3      │     (if errors)
+                             └─────────────┘
+                                    │
+                                    ↓ (success)
+                             ┌─────────────┐
+                             │ ■ complete  │
+                             │ [exit]      │
+                             └─────────────┘
+
+╠══════════════════════════════════════════════════════════════════════════════╣
+║  Legend: ▶Entry  ■Exit  ◉Agent  ⫴Parallel  ◇Condition  ↻Loop  ⊞Subflow      ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+```
+
+---
+
+## 6. Integración con ELSABRO
+
+### Inicialización
+
+```typescript
+// visualization/index.ts
+import { FlowVisualizer } from './FlowVisualizer';
+import { ASCIIRenderer, SVGRenderer } from './renderers';
+import { NodeEditor } from './NodeEditor';
+import { ConnectionManager } from './ConnectionManager';
+
+export function createFlowVisualization(flow: Flow, options?: Partial<FlowVisualizerOptions>): FlowVisualizer {
+  return new FlowVisualizer({
+    flow,
+    mode: 'view',
+    renderer: 'ascii',
+    layout: 'dagre',
+    theme: defaultTheme,
+    ...options
+  });
+}
+
+export function visualizeFlowASCII(flow: Flow): string {
+  const visualizer = createFlowVisualization(flow, { renderer: 'ascii' });
+  return visualizer.exportASCII();
+}
+
+export function editFlow(flow: Flow): FlowVisualizer {
+  return createFlowVisualization(flow, {
+    mode: 'edit',
+    showToolbar: true,
+    showMinimap: true
+  });
+}
+```
+
+### Uso en Comandos
+
+```typescript
+// commands/flow-visualize.ts
+export async function handleFlowVisualize(args: string[]): Promise<void> {
+  const flowId = args[0] || getCurrentFlowId();
+  const flow = await loadFlow(flowId);
+
+  if (!flow) {
+    console.error(`Flow not found: ${flowId}`);
+    return;
+  }
+
+  const visualizer = createFlowVisualization(flow);
+  const ascii = visualizer.exportASCII();
+
+  console.log(ascii);
+
+  // Show validation
+  const connectionManager = new ConnectionManager();
+  const unconnected = connectionManager.getUnconnectedNodes(flow);
+  const deadEnds = connectionManager.getDeadEnds(flow);
+  const cycles = connectionManager.findCycles(flow);
+
+  if (unconnected.length > 0 || deadEnds.length > 0 || cycles.length > 0) {
+    console.log('\n⚠️  Flow Issues:');
+    if (unconnected.length > 0) {
+      console.log(`  • Unconnected nodes: ${unconnected.join(', ')}`);
+    }
+    if (deadEnds.length > 0) {
+      console.log(`  • Dead ends: ${deadEnds.join(', ')}`);
+    }
+    if (cycles.length > 0) {
+      console.log(`  • Cycles detected: ${cycles.length}`);
+    }
+  }
+}
+```
+
+---
+
+## Referencias
+
+- **REF-010**: Flow Orchestration
+- **REF-016**: Time-Travel Debugging
+- **REF-028**: Esta referencia (Flow Visualization)