hexdag 0.5.0.dev1__py3-none-any.whl

hexdag/studio/ui/package.json

@@ -0,0 +1,31 @@
+{
+    "dependencies": {
+        "@monaco-editor/react": "^4.6.0",
+        "@xyflow/react": "^12.0.0",
+        "lucide-react": "^0.400.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "yaml": "^2.4.0",
+        "zustand": "^4.5.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.0",
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.4",
+        "typescript": "^5.4.0",
+        "vite": "^5.3.0"
+    },
+    "name": "hexdag-studio",
+    "private": true,
+    "scripts": {
+        "build": "tsc && vite build",
+        "dev": "vite",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
+    },
+    "type": "module",
+    "version": "0.1.0"
+}

hexdag/studio/ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

hexdag/studio/ui/public/hexdag.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#6366f1"/>
+  <path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="white" stroke-width="2" fill="none"/>
+  <circle cx="16" cy="16" r="3" fill="white"/>
+</svg>

hexdag/studio/ui/src/App.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useState, useCallback } from 'react'
+import { ReactFlowProvider } from '@xyflow/react'
+import Header from './components/Header'
+import FileBrowser from './components/FileBrowser'
+import NodePalette from './components/NodePalette'
+import Canvas from './components/Canvas'
+import YamlEditor from './components/YamlEditor'
+import ValidationPanel from './components/ValidationPanel'
+import NodeInspector from './components/NodeInspector'
+import { useStudioStore } from './lib/store'
+import { saveFile } from './lib/api'
+
+type ViewMode = 'split' | 'canvas' | 'yaml'
+type RightPanel = 'validation' | 'inspector'
+
+export default function App() {
+  const [viewMode, setViewMode] = useState<ViewMode>('split')
+  const [rightPanel, setRightPanel] = useState<RightPanel>('validation')
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
+
+  const { currentFile, yamlContent, setIsSaving, setIsDirty, nodes } = useStudioStore()
+
+  // Handle node selection from canvas
+  const handleNodeSelect = useCallback((nodeId: string | null) => {
+    setSelectedNodeId(nodeId)
+    if (nodeId) {
+      setRightPanel('inspector')
+    }
+  }, [])
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + S to save
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        handleSave()
+      }
+      // Cmd/Ctrl + 1/2/3 to switch views
+      if ((e.metaKey || e.ctrlKey) && e.key === '1') {
+        e.preventDefault()
+        setViewMode('split')
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === '2') {
+        e.preventDefault()
+        setViewMode('canvas')
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === '3') {
+        e.preventDefault()
+        setViewMode('yaml')
+      }
+      // Escape to deselect
+      if (e.key === 'Escape') {
+        setSelectedNodeId(null)
+        setRightPanel('validation')
+      }
+      // Delete selected node
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodeId) {
+        // Only if not in an input
+        const target = e.target as HTMLElement
+        if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA') {
+          e.preventDefault()
+          // Delete will be handled by Canvas component
+        }
+      }
+    }
+
+    const handleSaveEvent = () => {
+      handleSave()
+    }
+
+    // Listen for node selection events from Canvas
+    const handleNodeSelectEvent = (e: CustomEvent<{ nodeId: string | null }>) => {
+      handleNodeSelect(e.detail.nodeId)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('hexdag-save', handleSaveEvent)
+    window.addEventListener('hexdag-node-select', handleNodeSelectEvent as EventListener)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('hexdag-save', handleSaveEvent)
+      window.removeEventListener('hexdag-node-select', handleNodeSelectEvent as EventListener)
+    }
+  }, [currentFile, yamlContent, selectedNodeId, handleNodeSelect])
+
+  const handleSave = async () => {
+    if (!currentFile || !yamlContent) return
+
+    setIsSaving(true)
+    try {
+      await saveFile(currentFile, yamlContent)
+      setIsDirty(false)
+    } catch (error) {
+      console.error('Failed to save:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <ReactFlowProvider>
+      <div className="h-screen flex flex-col bg-hex-bg">
+        {/* Header */}
+        <Header />
+
+        {/* Main content */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* Left sidebar: Files + Node palette */}
+          <div className="w-48 flex-shrink-0 flex flex-col bg-hex-surface border-r border-hex-border">
+            <FileBrowser />
+            <div className="flex-1 overflow-hidden">
+              <NodePalette />
+            </div>
+          </div>
+
+          {/* Main editor area */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* View mode tabs */}
+            <div className="h-8 bg-hex-surface border-b border-hex-border flex items-center px-2 gap-1">
+              <button
+                onClick={() => setViewMode('split')}
+                className={`px-3 py-1 text-xs rounded transition-colors ${
+                  viewMode === 'split'
+                    ? 'bg-hex-accent text-white'
+                    : 'text-hex-text-muted hover:text-hex-text hover:bg-hex-border/50'
+                }`}
+              >
+                Split
+              </button>
+              <button
+                onClick={() => setViewMode('canvas')}
+                className={`px-3 py-1 text-xs rounded transition-colors ${
+                  viewMode === 'canvas'
+                    ? 'bg-hex-accent text-white'
+                    : 'text-hex-text-muted hover:text-hex-text hover:bg-hex-border/50'
+                }`}
+              >
+                Canvas
+              </button>
+              <button
+                onClick={() => setViewMode('yaml')}
+                className={`px-3 py-1 text-xs rounded transition-colors ${
+                  viewMode === 'yaml'
+                    ? 'bg-hex-accent text-white'
+                    : 'text-hex-text-muted hover:text-hex-text hover:bg-hex-border/50'
+                }`}
+              >
+                YAML
+              </button>
+
+              <div className="ml-auto flex items-center gap-2">
+                {selectedNodeId && (
+                  <span className="text-[10px] text-hex-accent">
+                    Selected: {selectedNodeId}
+                  </span>
+                )}
+                <span className="text-[10px] text-hex-text-muted">
+                  {nodes.length} node{nodes.length !== 1 ? 's' : ''}
+                </span>
+              </div>
+            </div>
+
+            {/* Editor panels */}
+            <div className="flex-1 flex overflow-hidden">
+              {/* Canvas panel */}
+              {(viewMode === 'split' || viewMode === 'canvas') && (
+                <div className={`${viewMode === 'split' ? 'w-1/2' : 'flex-1'} border-r border-hex-border`}>
+                  <Canvas onNodeSelect={handleNodeSelect} selectedNodeId={selectedNodeId} />
+                </div>
+              )}
+
+              {/* YAML editor panel */}
+              {(viewMode === 'split' || viewMode === 'yaml') && (
+                <div className={`${viewMode === 'split' ? 'w-1/2' : 'flex-1'} flex flex-col`}>
+                  <div className="flex-1">
+                    <YamlEditor />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right sidebar: Validation / Inspector */}
+          <div className="w-72 flex-shrink-0 bg-hex-surface border-l border-hex-border flex flex-col">
+            {/* Tab switcher */}
+            <div className="h-8 border-b border-hex-border flex items-center px-1 gap-1">
+              <button
+                onClick={() => setRightPanel('validation')}
+                className={`flex-1 py-1 text-[10px] font-semibold uppercase tracking-wider rounded transition-colors ${
+                  rightPanel === 'validation'
+                    ? 'bg-hex-accent/20 text-hex-accent'
+                    : 'text-hex-text-muted hover:text-hex-text'
+                }`}
+              >
+                Validation
+              </button>
+              <button
+                onClick={() => setRightPanel('inspector')}
+                className={`flex-1 py-1 text-[10px] font-semibold uppercase tracking-wider rounded transition-colors ${
+                  rightPanel === 'inspector'
+                    ? 'bg-hex-accent/20 text-hex-accent'
+                    : 'text-hex-text-muted hover:text-hex-text'
+                }`}
+              >
+                Inspector
+                {selectedNodeId && (
+                  <span className="ml-1 w-2 h-2 bg-hex-accent rounded-full inline-block" />
+                )}
+              </button>
+            </div>
+
+            {/* Panel content */}
+            <div className="flex-1 overflow-hidden">
+              {rightPanel === 'validation' ? (
+                <ValidationPanel />
+              ) : (
+                <NodeInspector
+                  nodeId={selectedNodeId}
+                  onClose={() => {
+                    setSelectedNodeId(null)
+                    setRightPanel('validation')
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Status bar */}
+        <div className="h-6 bg-hex-bg border-t border-hex-border flex items-center px-3 text-[10px] text-hex-text-muted">
+          <div className="flex items-center gap-1">
+            <div className="w-2 h-2 bg-hex-success rounded-full" />
+            <span>Connected</span>
+          </div>
+          <div className="mx-3">|</div>
+          <span>hexdag studio v0.1.0</span>
+          <div className="ml-auto flex items-center gap-3">
+            <span>
+              <kbd className="px-1 py-0.5 bg-hex-surface rounded border border-hex-border">Cmd+S</kbd> Save
+            </span>
+            <span>
+              <kbd className="px-1 py-0.5 bg-hex-surface rounded border border-hex-border">Esc</kbd> Deselect
+            </span>
+          </div>
+        </div>
+      </div>
+    </ReactFlowProvider>
+  )
+}

hexdag/studio/ui/src/components/Canvas.tsx

@@ -0,0 +1,408 @@
+import { useCallback, useRef, useEffect, useState } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  type Connection,
+  type OnNodesChange,
+  type OnEdgesChange,
+  type OnConnect,
+  type Node,
+  BackgroundVariant,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+
+import HexdagNode from './HexdagNode'
+import ContextMenu, { createNodeContextMenuItems } from './ContextMenu'
+import { useStudioStore } from '../lib/store'
+import { getNodeTemplate, getNodeColor } from '../lib/nodeTemplates'
+import type { HexdagNode as HexdagNodeType } from '../types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nodeTypes: Record<string, any> = {
+  hexdagNode: HexdagNode,
+}
+
+interface CanvasProps {
+  onNodeSelect?: (nodeId: string | null) => void
+  selectedNodeId?: string | null
+}
+
+export default function Canvas({ onNodeSelect, selectedNodeId }: CanvasProps) {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const reactFlowInstance = useRef<any>(null)
+
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{
+    x: number
+    y: number
+    nodeId: string
+  } | null>(null)
+
+  const {
+    nodes: storeNodes,
+    edges: storeEdges,
+    setNodes: setStoreNodes,
+    setEdges: setStoreEdges,
+    syncCanvasToYaml,
+  } = useStudioStore()
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [nodes, setNodes, onNodesChange] = useNodesState(storeNodes as any)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(storeEdges)
+
+  // Sync from store when store changes externally (e.g., YAML edit)
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setNodes(storeNodes as any)
+    setEdges(storeEdges)
+  }, [storeNodes, storeEdges, setNodes, setEdges])
+
+  // Update selected state when selectedNodeId changes
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((node) => ({
+        ...node,
+        selected: node.id === selectedNodeId,
+      }))
+    )
+  }, [selectedNodeId, setNodes])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleNodesChange: OnNodesChange<any> = useCallback(
+    (changes) => {
+      onNodesChange(changes)
+
+      // Handle selection changes
+      const selectionChange = changes.find((c) => c.type === 'select')
+      if (selectionChange && 'selected' in selectionChange) {
+        if (selectionChange.selected) {
+          onNodeSelect?.(selectionChange.id)
+        }
+      }
+
+      // Handle deletions
+      const deletions = changes.filter((c) => c.type === 'remove')
+      if (deletions.length > 0) {
+        setTimeout(() => {
+          const currentNodes = useStudioStore.getState().nodes
+          const deletedIds = deletions.map((d) => d.id)
+          const newNodes = currentNodes.filter((n) => !deletedIds.includes(n.id))
+          setStoreNodes(newNodes)
+          syncCanvasToYaml()
+
+          // Deselect if deleted node was selected
+          if (selectedNodeId && deletedIds.includes(selectedNodeId)) {
+            onNodeSelect?.(null)
+          }
+        }, 100)
+        return
+      }
+
+      // Debounce sync for position changes
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const hasPositionChange = changes.some(
+        (c: any) => c.type === 'position' && c.dragging === false
+      )
+      if (hasPositionChange) {
+        setTimeout(() => {
+          // Get current nodes from React state via callback
+          setNodes((currentNodes) => {
+            setStoreNodes(currentNodes as HexdagNodeType[])
+            setTimeout(() => useStudioStore.getState().syncCanvasToYaml(), 10)
+            return currentNodes
+          })
+        }, 100)
+      }
+    },
+    [onNodesChange, nodes, setStoreNodes, syncCanvasToYaml, onNodeSelect, selectedNodeId]
+  )
+
+  const handleEdgesChange: OnEdgesChange = useCallback(
+    (changes) => {
+      onEdgesChange(changes)
+      const hasNonSelectChange = changes.some((c) => c.type !== 'select')
+      if (hasNonSelectChange) {
+        setTimeout(() => {
+          setStoreEdges(edges)
+          syncCanvasToYaml()
+        }, 100)
+      }
+    },
+    [onEdgesChange, edges, setStoreEdges, syncCanvasToYaml]
+  )
+
+  const onConnect: OnConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => {
+        const newEdges = addEdge(
+          { ...connection, type: 'smoothstep', animated: false },
+          eds
+        )
+        setTimeout(() => {
+          setStoreEdges(newEdges)
+          syncCanvasToYaml()
+        }, 100)
+        return newEdges
+      })
+    },
+    [setEdges, setStoreEdges, syncCanvasToYaml]
+  )
+
+  const onPaneClick = useCallback(() => {
+    onNodeSelect?.(null)
+  }, [onNodeSelect])
+
+  const onNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      onNodeSelect?.(node.id)
+    },
+    [onNodeSelect]
+  )
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+  }, [])
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault()
+
+      const kind = event.dataTransfer.getData('application/hexdag-node')
+      if (!kind || !reactFlowInstance.current || !reactFlowWrapper.current) {
+        return
+      }
+
+      const bounds = reactFlowWrapper.current.getBoundingClientRect()
+      const position = reactFlowInstance.current.screenToFlowPosition({
+        x: event.clientX - bounds.left,
+        y: event.clientY - bounds.top,
+      })
+
+      // Get template for builtin nodes, or create default spec for plugin nodes
+      const template = getNodeTemplate(kind)
+      const defaultSpec = template?.defaultSpec || {}
+
+      // Generate unique name - handle namespaced kinds (e.g., etl:file_reader_node)
+      const existingNames = nodes.map((n) => n.id)
+      // Extract base name: "etl:file_reader_node" -> "file_reader", "function_node" -> "function"
+      const kindParts = kind.split(':')
+      const nodeKind = kindParts[kindParts.length - 1] // Get last part after ':'
+      let baseName = nodeKind.replace('_node', '')
+      let name = baseName
+      let counter = 1
+      while (existingNames.includes(name)) {
+        name = `${baseName}_${counter}`
+        counter++
+      }
+
+      const newNode: HexdagNodeType = {
+        id: name,
+        type: 'hexdagNode',
+        position,
+        data: {
+          kind,
+          label: name,
+          spec: { ...defaultSpec },
+          isValid: true,
+          errors: [],
+        },
+      }
+
+      // Update both local React state and store, then sync to YAML
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const newNodes = [...nodes, newNode] as any
+      setNodes(newNodes)
+      setStoreNodes(newNodes)
+
+      // Use setTimeout to ensure store is updated, then call sync from store
+      setTimeout(() => {
+        useStudioStore.getState().syncCanvasToYaml()
+      }, 50)
+
+      // Select the new node
+      onNodeSelect?.(name)
+    },
+    [nodes, setNodes, setStoreNodes, syncCanvasToYaml, onNodeSelect]
+  )
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onInit = useCallback((instance: any) => {
+    reactFlowInstance.current = instance
+  }, [])
+
+  // Node context menu handlers
+  const onNodeContextMenu = useCallback(
+    (event: React.MouseEvent, node: Node) => {
+      event.preventDefault()
+      setContextMenu({
+        x: event.clientX,
+        y: event.clientY,
+        nodeId: node.id,
+      })
+    },
+    []
+  )
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu(null)
+  }, [])
+
+  const duplicateNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find((n) => n.id === nodeId)
+      if (!node) return
+
+      let newName = `${nodeId}_copy`
+      let counter = 1
+      while (nodes.some((n) => n.id === newName)) {
+        newName = `${nodeId}_copy_${counter}`
+        counter++
+      }
+
+      const newNode: HexdagNodeType = {
+        ...node,
+        id: newName,
+        position: {
+          x: node.position.x + 50,
+          y: node.position.y + 50,
+        },
+        data: {
+          ...node.data,
+          label: newName,
+        },
+      } as HexdagNodeType
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const newNodes = [...nodes, newNode] as any
+      setNodes(newNodes)
+      setStoreNodes(newNodes)
+      setTimeout(() => {
+        useStudioStore.getState().syncCanvasToYaml()
+      }, 50)
+    },
+    [nodes, setNodes, setStoreNodes]
+  )
+
+  const deleteNode = useCallback(
+    (nodeId: string) => {
+      const newNodes = nodes.filter((n) => n.id !== nodeId)
+      const newEdges = edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setNodes(newNodes as any)
+      setEdges(newEdges)
+      setStoreNodes(newNodes as HexdagNodeType[])
+      setStoreEdges(newEdges)
+
+      setTimeout(() => {
+        useStudioStore.getState().syncCanvasToYaml()
+      }, 50)
+
+      if (selectedNodeId === nodeId) {
+        onNodeSelect?.(null)
+      }
+    },
+    [nodes, edges, setNodes, setEdges, setStoreNodes, setStoreEdges, selectedNodeId, onNodeSelect]
+  )
+
+  const disconnectNode = useCallback(
+    (nodeId: string) => {
+      const newEdges = edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
+      setEdges(newEdges)
+      setStoreEdges(newEdges)
+      setTimeout(() => {
+        useStudioStore.getState().syncCanvasToYaml()
+      }, 50)
+    },
+    [edges, setEdges, setStoreEdges]
+  )
+
+  // Get context menu items for the selected node
+  const getContextMenuItems = useCallback(
+    (nodeId: string) => {
+      return createNodeContextMenuItems(nodeId, {
+        onEdit: () => {
+          onNodeSelect?.(nodeId)
+        },
+        onDuplicate: () => {
+          duplicateNode(nodeId)
+        },
+        onDelete: () => {
+          deleteNode(nodeId)
+        },
+        onDisconnect: () => {
+          disconnectNode(nodeId)
+        },
+      })
+    },
+    [onNodeSelect, duplicateNode, deleteNode, disconnectNode]
+  )
+
+  return (
+    <div ref={reactFlowWrapper} className="w-full h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={handleNodesChange}
+        onEdgesChange={handleEdgesChange}
+        onConnect={onConnect}
+        onInit={onInit}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        onPaneClick={onPaneClick}
+        onNodeClick={onNodeClick}
+        onNodeContextMenu={onNodeContextMenu}
+        nodeTypes={nodeTypes}
+        fitView
+        snapToGrid
+        snapGrid={[20, 20]}
+        deleteKeyCode={['Backspace', 'Delete']}
+        multiSelectionKeyCode={['Shift']}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          animated: false,
+          style: { stroke: '#6366f1', strokeWidth: 2 },
+        }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background
+          color="#2a2a3e"
+          gap={20}
+          variant={BackgroundVariant.Dots}
+        />
+        <Controls
+          showZoom={true}
+          showFitView={true}
+          showInteractive={false}
+        />
+        <MiniMap
+          nodeColor={(node: Node) => {
+            const data = node.data as { kind?: string }
+            return getNodeColor(data?.kind || '')
+          }}
+          maskColor="rgba(15, 15, 26, 0.8)"
+          style={{
+            backgroundColor: '#1a1a2e',
+          }}
+        />
+      </ReactFlow>
+
+      {/* Context Menu */}
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          items={getContextMenuItems(contextMenu.nodeId)}
+          onClose={closeContextMenu}
+        />
+      )}
+    </div>
+  )
+}