hexdag 0.5.0.dev1__py3-none-any.whl

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

@@ -0,0 +1,187 @@
+import { useEffect, useRef } from 'react'
+import { Copy, Trash2, Edit3, Unlink, ExternalLink, ChevronRight } from 'lucide-react'
+
+export interface ContextMenuItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  shortcut?: string
+  disabled?: boolean
+  danger?: boolean
+  divider?: boolean
+  submenu?: ContextMenuItem[]
+  onClick?: () => void
+}
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  items: ContextMenuItem[]
+  onClose: () => void
+}
+
+export default function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // Close on outside click or escape
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick)
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onClose])
+
+  // Adjust position to stay within viewport
+  useEffect(() => {
+    if (menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      if (rect.right > viewportWidth) {
+        menuRef.current.style.left = `${x - rect.width}px`
+      }
+      if (rect.bottom > viewportHeight) {
+        menuRef.current.style.top = `${y - rect.height}px`
+      }
+    }
+  }, [x, y])
+
+  const handleItemClick = (item: ContextMenuItem) => {
+    if (item.disabled || item.submenu) return
+    item.onClick?.()
+    onClose()
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 min-w-[180px] bg-hex-surface border border-hex-border rounded-lg shadow-xl py-1"
+      style={{ left: x, top: y }}
+    >
+      {items.map((item) =>
+        item.divider ? (
+          <div key={item.id} className="h-px bg-hex-border my-1" />
+        ) : (
+          <button
+            key={item.id}
+            onClick={() => handleItemClick(item)}
+            disabled={item.disabled}
+            className={`
+              w-full flex items-center gap-2 px-3 py-1.5 text-xs text-left
+              transition-colors
+              ${item.disabled
+                ? 'text-hex-text-muted cursor-not-allowed'
+                : item.danger
+                  ? 'text-hex-error hover:bg-hex-error/10'
+                  : 'text-hex-text hover:bg-hex-border/50'
+              }
+            `}
+          >
+            {item.icon && (
+              <span className="w-4 h-4 flex items-center justify-center">
+                {item.icon}
+              </span>
+            )}
+            <span className="flex-1">{item.label}</span>
+            {item.shortcut && (
+              <span className="text-hex-text-muted text-[10px]">{item.shortcut}</span>
+            )}
+            {item.submenu && (
+              <ChevronRight size={12} className="text-hex-text-muted" />
+            )}
+          </button>
+        )
+      )}
+    </div>
+  )
+}
+
+// Helper to create standard node context menu items
+export function createNodeContextMenuItems(
+  _nodeId: string,
+  options: {
+    onEdit?: () => void
+    onDuplicate?: () => void
+    onDelete?: () => void
+    onDisconnect?: () => void
+    onViewCode?: () => void
+  }
+): ContextMenuItem[] {
+  const items: ContextMenuItem[] = []
+
+  if (options.onEdit) {
+    items.push({
+      id: 'edit',
+      label: 'Edit Node',
+      icon: <Edit3 size={14} />,
+      onClick: options.onEdit,
+    })
+  }
+
+  if (options.onViewCode) {
+    items.push({
+      id: 'view-code',
+      label: 'View Code',
+      icon: <ExternalLink size={14} />,
+      onClick: options.onViewCode,
+    })
+  }
+
+  if (options.onDuplicate) {
+    items.push({
+      id: 'duplicate',
+      label: 'Duplicate',
+      icon: <Copy size={14} />,
+      shortcut: 'Cmd+D',
+      onClick: options.onDuplicate,
+    })
+  }
+
+  if (options.onDisconnect) {
+    items.push({
+      id: 'divider-1',
+      label: '',
+      divider: true,
+    })
+    items.push({
+      id: 'disconnect',
+      label: 'Disconnect All',
+      icon: <Unlink size={14} />,
+      onClick: options.onDisconnect,
+    })
+  }
+
+  if (options.onDelete) {
+    items.push({
+      id: 'divider-2',
+      label: '',
+      divider: true,
+    })
+    items.push({
+      id: 'delete',
+      label: 'Delete',
+      icon: <Trash2 size={14} />,
+      shortcut: 'Del',
+      danger: true,
+      onClick: options.onDelete,
+    })
+  }
+
+  return items
+}

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

@@ -0,0 +1,123 @@
+import { useState, useEffect } from 'react'
+import { File, Folder, RefreshCw, ChevronRight, ChevronDown } from 'lucide-react'
+import { listFiles, readFile } from '../lib/api'
+import { useStudioStore } from '../lib/store'
+import type { FileInfo } from '../types'
+
+export default function FileBrowser() {
+  const [files, setFiles] = useState<FileInfo[]>([])
+  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set())
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const { currentFile, setCurrentFile, setYamlContent, syncYamlToCanvas, setIsDirty } = useStudioStore()
+
+  useEffect(() => {
+    loadFiles()
+  }, [])
+
+  const loadFiles = async () => {
+    setIsLoading(true)
+    setError(null)
+    try {
+      const fileList = await listFiles('')
+      setFiles(fileList)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load files')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleFileClick = async (file: FileInfo) => {
+    if (file.is_directory) {
+      setExpandedDirs((prev) => {
+        const next = new Set(prev)
+        if (next.has(file.path)) {
+          next.delete(file.path)
+        } else {
+          next.add(file.path)
+        }
+        return next
+      })
+      return
+    }
+
+    try {
+      const content = await readFile(file.path)
+      setCurrentFile(file.path)
+      setYamlContent(content.content)
+      setIsDirty(false)
+      setTimeout(() => {
+        syncYamlToCanvas()
+      }, 0)
+    } catch (err) {
+      console.error('Failed to load file:', err)
+    }
+  }
+
+  const renderFile = (file: FileInfo) => {
+    const isSelected = currentFile === file.path
+    const isExpanded = expandedDirs.has(file.path)
+
+    return (
+      <button
+        key={file.path}
+        onClick={() => handleFileClick(file)}
+        className={
+          'w-full flex items-center gap-2 py-1.5 px-2 text-left transition-colors rounded-sm ' +
+          (isSelected
+            ? 'bg-hex-accent/20 text-hex-accent'
+            : 'text-hex-text hover:bg-hex-border/30')
+        }
+      >
+        {file.is_directory ? (
+          <>
+            {isExpanded ? (
+              <ChevronDown size={12} className="text-hex-text-muted flex-shrink-0" />
+            ) : (
+              <ChevronRight size={12} className="text-hex-text-muted flex-shrink-0" />
+            )}
+            <Folder size={14} className="text-hex-warning flex-shrink-0" />
+          </>
+        ) : (
+          <>
+            <span className="w-3" />
+            <File size={14} className="text-hex-text-muted flex-shrink-0" />
+          </>
+        )}
+        <span className="text-xs truncate">{file.name}</span>
+      </button>
+    )
+  }
+
+  return (
+    <div className="flex flex-col border-b border-hex-border">
+      <div className="flex items-center justify-between p-2 border-b border-hex-border">
+        <h2 className="text-xs font-semibold uppercase text-hex-text-muted tracking-wider">
+          Files
+        </h2>
+        <button
+          onClick={loadFiles}
+          disabled={isLoading}
+          className="p-1 rounded hover:bg-hex-border/50 transition-colors text-hex-text-muted hover:text-hex-text"
+          title="Refresh files"
+        >
+          <RefreshCw size={12} className={isLoading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      <div className="max-h-48 overflow-y-auto p-1">
+        {error ? (
+          <div className="p-2 text-xs text-hex-error">{error}</div>
+        ) : isLoading ? (
+          <div className="p-2 text-xs text-hex-text-muted">Loading...</div>
+        ) : files.length === 0 ? (
+          <div className="p-2 text-xs text-hex-text-muted">No YAML files found</div>
+        ) : (
+          files.map((file) => renderFile(file))
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,181 @@
+import { Save, Play, RefreshCw, Settings, Package, Plug } from 'lucide-react'
+import { useStudioStore } from '../lib/store'
+import { saveFile, executePipeline, downloadProject } from '../lib/api'
+import { useState } from 'react'
+import PluginManager from './PluginManager'
+
+export default function Header() {
+  const [isRunning, setIsRunning] = useState(false)
+  const [isExporting, setIsExporting] = useState(false)
+  const [isPluginManagerOpen, setIsPluginManagerOpen] = useState(false)
+
+  const {
+    currentFile,
+    yamlContent,
+    isDirty,
+    isSaving,
+    setIsSaving,
+    setIsDirty,
+  } = useStudioStore()
+
+  const handleSave = async () => {
+    if (!currentFile || !yamlContent) return
+
+    setIsSaving(true)
+    try {
+      await saveFile(currentFile, yamlContent)
+      setIsDirty(false)
+    } catch (error) {
+      console.error('Failed to save:', error)
+      alert(`Failed to save: ${error}`)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleRun = async () => {
+    if (!yamlContent) {
+      alert('No content to run')
+      return
+    }
+
+    setIsRunning(true)
+    try {
+      const result = await executePipeline(yamlContent, {}, true)
+      if (result.success) {
+        alert(`Pipeline executed successfully in ${result.duration_ms.toFixed(0)}ms`)
+      } else {
+        alert(`Pipeline failed: ${result.error}`)
+      }
+    } catch (error) {
+      alert(`Execution error: ${error}`)
+    } finally {
+      setIsRunning(false)
+    }
+  }
+
+  const handleExport = async () => {
+    if (!yamlContent) {
+      alert('No pipeline to export')
+      return
+    }
+
+    setIsExporting(true)
+    try {
+      await downloadProject(yamlContent, undefined, true)
+    } catch (error) {
+      alert(`Export failed: ${error}`)
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  return (
+    <header className="h-12 bg-hex-bg border-b border-hex-border flex items-center px-4 gap-4">
+      {/* Logo */}
+      <div className="flex items-center gap-2">
+        <div className="w-6 h-6 bg-hex-accent rounded flex items-center justify-center">
+          <span className="text-white text-xs font-bold">H</span>
+        </div>
+        <span className="text-sm font-semibold">
+          <span className="text-hex-accent">hexdag</span>
+          <span className="text-hex-text">studio</span>
+        </span>
+      </div>
+
+      {/* Current file */}
+      <div className="flex-1 flex items-center gap-2 min-w-0">
+        {currentFile && (
+          <>
+            <span className="text-xs text-hex-text-muted truncate">
+              {currentFile}
+            </span>
+            {isDirty && (
+              <span className="w-2 h-2 bg-hex-warning rounded-full" title="Unsaved changes" />
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => useStudioStore.getState().syncYamlToCanvas()}
+          className="p-2 rounded hover:bg-hex-border/50 transition-colors text-hex-text-muted hover:text-hex-text"
+          title="Refresh canvas from YAML"
+        >
+          <RefreshCw size={16} />
+        </button>
+
+        <button
+          onClick={handleRun}
+          disabled={isRunning || !yamlContent}
+          className={`
+            flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium
+            transition-colors
+            ${isRunning || !yamlContent
+              ? 'bg-hex-border/50 text-hex-text-muted cursor-not-allowed'
+              : 'bg-hex-success/20 text-hex-success hover:bg-hex-success/30'}
+          `}
+        >
+          <Play size={14} className={isRunning ? 'animate-pulse' : ''} />
+          {isRunning ? 'Running...' : 'Test Run'}
+        </button>
+
+        <button
+          onClick={handleSave}
+          disabled={isSaving || !currentFile || !isDirty}
+          className={`
+            flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium
+            transition-colors
+            ${isSaving || !currentFile || !isDirty
+              ? 'bg-hex-border/50 text-hex-text-muted cursor-not-allowed'
+              : 'bg-hex-accent text-white hover:bg-hex-accent-hover'}
+          `}
+        >
+          <Save size={14} className={isSaving ? 'animate-pulse' : ''} />
+          {isSaving ? 'Saving...' : 'Save'}
+        </button>
+
+        <div className="w-px h-6 bg-hex-border" />
+
+        <button
+          onClick={handleExport}
+          disabled={isExporting || !yamlContent}
+          className={`
+            flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium
+            transition-colors
+            ${isExporting || !yamlContent
+              ? 'bg-hex-border/50 text-hex-text-muted cursor-not-allowed'
+              : 'bg-purple-500/20 text-purple-400 hover:bg-purple-500/30'}
+          `}
+          title="Export as standalone Python project"
+        >
+          <Package size={14} className={isExporting ? 'animate-pulse' : ''} />
+          {isExporting ? 'Exporting...' : 'Export Project'}
+        </button>
+
+        <button
+          onClick={() => setIsPluginManagerOpen(true)}
+          className="p-2 rounded hover:bg-hex-border/50 transition-colors text-hex-text-muted hover:text-hex-text"
+          title="Plugin Manager"
+        >
+          <Plug size={16} />
+        </button>
+
+        <button
+          className="p-2 rounded hover:bg-hex-border/50 transition-colors text-hex-text-muted hover:text-hex-text"
+          title="Settings"
+        >
+          <Settings size={16} />
+        </button>
+      </div>
+
+      {/* Plugin Manager Modal */}
+      <PluginManager
+        isOpen={isPluginManagerOpen}
+        onClose={() => setIsPluginManagerOpen(false)}
+      />
+    </header>
+  )
+}

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

@@ -0,0 +1,193 @@
+import { memo } from 'react'
+import { Handle, Position } from '@xyflow/react'
+import {
+  Code,
+  Brain,
+  Cpu,
+  FileText,
+  Scissors,
+  Bot,
+  GitBranch,
+  Repeat,
+  Box,
+  AlertCircle,
+  Play,
+  FileInput,
+  FileOutput,
+  Table,
+  Package,
+} from 'lucide-react'
+import type { HexdagNodeData } from '../types'
+import { getNodeColor, getNodeTemplate } from '../lib/nodeTemplates'
+
+const iconMap: Record<string, typeof Code> = {
+  // Core/builtin nodes
+  function_node: Code,
+  llm_node: Brain,
+  raw_llm_node: Cpu,
+  prompt_node: FileText,
+  parser_node: Scissors,
+  agent_node: Bot,
+  conditional_node: GitBranch,
+  loop_node: Repeat,
+}
+
+// Dynamic icon selection for plugin nodes (used when not in iconMap)
+function getPluginNodeIcon(kind: string): typeof Code {
+  const kindLower = kind.toLowerCase()
+  if (kindLower.includes('file_reader') || kindLower.includes('input')) return FileInput
+  if (kindLower.includes('file_writer') || kindLower.includes('output')) return FileOutput
+  if (kindLower.includes('transform') || kindLower.includes('pandas')) return Table
+  if (kindLower.includes('llm') || kindLower.includes('openai')) return Brain
+  if (kindLower.includes('database') || kindLower.includes('sql')) return Cpu
+  return Package
+}
+
+interface HexdagNodeProps {
+  data: HexdagNodeData
+  selected?: boolean
+}
+
+function HexdagNode({ data, selected }: HexdagNodeProps) {
+  // Use iconMap for core nodes, dynamic icon for plugin nodes
+  const Icon = iconMap[data.kind] || getPluginNodeIcon(data.kind) || Box
+  const color = getNodeColor(data.kind)
+  const template = getNodeTemplate(data.kind)
+
+  // Get key spec info to display
+  const specPreview = getSpecPreview(data.kind, data.spec)
+
+  return (
+    <div
+      className={`
+        relative rounded-lg min-w-[200px] max-w-[280px]
+        bg-hex-surface border-2 transition-all
+        ${selected ? 'border-hex-accent shadow-lg shadow-hex-accent/30 scale-[1.02]' : 'border-hex-border hover:border-hex-border/80'}
+        ${!data.isValid ? 'border-hex-error' : ''}
+      `}
+      style={{
+        borderTopColor: color,
+        borderTopWidth: 3,
+      }}
+    >
+      {/* Input handle */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!w-3 !h-3 !bg-hex-accent !border-2 !border-hex-surface !-left-1.5"
+      />
+
+      {/* Header */}
+      <div className="px-3 py-2 flex items-center gap-2 border-b border-hex-border/50">
+        <div
+          className="w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0"
+          style={{ backgroundColor: `${color}15` }}
+        >
+          <Icon size={14} style={{ color }} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-xs font-semibold text-hex-text truncate">
+            {data.label}
+          </div>
+          <div className="text-[10px] text-hex-text-muted truncate">
+            {template?.label || data.kind.replace('_node', '')}
+          </div>
+        </div>
+        {!data.isValid && (
+          <AlertCircle size={14} className="text-hex-error flex-shrink-0" />
+        )}
+      </div>
+
+      {/* Spec Preview */}
+      {specPreview && (
+        <div className="px-3 py-2 space-y-1">
+          {specPreview.map((item, i) => (
+            <div key={i} className="flex items-start gap-2 text-[10px]">
+              <span className="text-hex-text-muted flex-shrink-0 w-16 truncate">
+                {item.key}:
+              </span>
+              <span className="text-hex-text truncate font-mono">
+                {item.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Footer with status */}
+      <div className="px-3 py-1.5 bg-hex-bg/50 rounded-b-md flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <Play size={10} className="text-hex-text-muted" />
+          <span className="text-[9px] text-hex-text-muted uppercase tracking-wider">
+            Ready
+          </span>
+        </div>
+        {data.errors.length > 0 && (
+          <span className="text-[9px] text-hex-error">
+            {data.errors.length} error{data.errors.length !== 1 ? 's' : ''}
+          </span>
+        )}
+      </div>
+
+      {/* Output handle */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!w-3 !h-3 !bg-hex-accent !border-2 !border-hex-surface !-right-1.5"
+      />
+
+      {/* Selection indicator */}
+      {selected && (
+        <div className="absolute -inset-1 border-2 border-hex-accent/30 rounded-xl pointer-events-none" />
+      )}
+    </div>
+  )
+}
+
+// Extract key info to show in node preview
+function getSpecPreview(kind: string, spec: Record<string, unknown>): Array<{ key: string; value: string }> | null {
+  const preview: Array<{ key: string; value: string }> = []
+
+  switch (kind) {
+    case 'function_node':
+      if (spec.fn) preview.push({ key: 'fn', value: truncate(String(spec.fn), 30) })
+      break
+    case 'llm_node':
+      if (spec.prompt_template) preview.push({ key: 'prompt', value: truncate(String(spec.prompt_template), 25) })
+      break
+    case 'raw_llm_node':
+      if (spec.messages_key) preview.push({ key: 'messages', value: String(spec.messages_key) })
+      break
+    case 'prompt_node':
+      if (spec.template) preview.push({ key: 'template', value: truncate(String(spec.template), 25) })
+      break
+    case 'parser_node':
+      if (spec.parser_type) preview.push({ key: 'parser', value: String(spec.parser_type) })
+      break
+    case 'agent_node':
+      if (spec.max_steps) preview.push({ key: 'max_steps', value: String(spec.max_steps) })
+      break
+    case 'conditional_node':
+      if (spec.condition) preview.push({ key: 'if', value: truncate(String(spec.condition), 25) })
+      break
+    case 'loop_node':
+      if (spec.items_key) preview.push({ key: 'items', value: String(spec.items_key) })
+      if (spec.max_iterations) preview.push({ key: 'max', value: String(spec.max_iterations) })
+      break
+    default:
+      // Show first 2 spec items
+      const entries = Object.entries(spec).slice(0, 2)
+      entries.forEach(([key, value]) => {
+        preview.push({ key, value: truncate(String(value), 20) })
+      })
+  }
+
+  return preview.length > 0 ? preview : null
+}
+
+function truncate(str: string, max: number): string {
+  if (str.length <= max) return str
+  return str.slice(0, max - 1) + '…'
+}
+
+export default memo(HexdagNode)