hexdag 0.5.0.dev1__py3-none-any.whl

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

@@ -0,0 +1,105 @@
+import { CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-react'
+import { useStudioStore } from '../lib/store'
+
+export default function ValidationPanel() {
+  const { validation } = useStudioStore()
+
+  if (!validation) {
+    return (
+      <div className="h-full flex items-center justify-center text-hex-text-muted">
+        <div className="text-center">
+          <Info size={32} className="mx-auto mb-2 opacity-50" />
+          <p className="text-xs">Edit a file to see validation</p>
+        </div>
+      </div>
+    )
+  }
+
+  const errorCount = validation.errors.filter((e) => e.severity === 'error').length
+  const warningCount = validation.errors.filter((e) => e.severity === 'warning').length
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Summary */}
+      <div className="p-3 border-b border-hex-border flex items-center gap-3">
+        {validation.valid ? (
+          <div className="flex items-center gap-2 text-hex-success">
+            <CheckCircle size={16} />
+            <span className="text-xs font-medium">Valid</span>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 text-hex-error">
+            <XCircle size={16} />
+            <span className="text-xs font-medium">Invalid</span>
+          </div>
+        )}
+
+        {validation.node_count !== undefined && (
+          <div className="text-xs text-hex-text-muted">
+            {validation.node_count} node{validation.node_count !== 1 ? 's' : ''}
+          </div>
+        )}
+
+        <div className="ml-auto flex items-center gap-2 text-xs">
+          {errorCount > 0 && (
+            <span className="text-hex-error">{errorCount} error{errorCount !== 1 ? 's' : ''}</span>
+          )}
+          {warningCount > 0 && (
+            <span className="text-hex-warning">{warningCount} warning{warningCount !== 1 ? 's' : ''}</span>
+          )}
+        </div>
+      </div>
+
+      {/* Errors list */}
+      <div className="flex-1 overflow-y-auto p-2 space-y-1">
+        {validation.errors.length === 0 && validation.valid && (
+          <div className="p-3 rounded-md bg-hex-success/10 border border-hex-success/20">
+            <div className="flex items-start gap-2">
+              <CheckCircle size={14} className="text-hex-success mt-0.5" />
+              <div>
+                <p className="text-xs text-hex-success font-medium">Pipeline is valid</p>
+                {validation.nodes && validation.nodes.length > 0 && (
+                  <p className="text-[10px] text-hex-text-muted mt-1">
+                    Execution order: {validation.nodes.join(' → ')}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {validation.errors.map((error, index) => (
+          <div
+            key={index}
+            className={`
+              p-2 rounded-md border-l-2
+              ${error.severity === 'error'
+                ? 'bg-hex-error/10 border-hex-error'
+                : error.severity === 'warning'
+                  ? 'bg-hex-warning/10 border-hex-warning'
+                  : 'bg-hex-accent/10 border-hex-accent'}
+            `}
+          >
+            <div className="flex items-start gap-2">
+              {error.severity === 'error' ? (
+                <XCircle size={14} className="text-hex-error mt-0.5 flex-shrink-0" />
+              ) : error.severity === 'warning' ? (
+                <AlertTriangle size={14} className="text-hex-warning mt-0.5 flex-shrink-0" />
+              ) : (
+                <Info size={14} className="text-hex-accent mt-0.5 flex-shrink-0" />
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-xs text-hex-text break-words">{error.message}</p>
+                {error.line && (
+                  <p className="text-[10px] text-hex-text-muted mt-0.5">
+                    Line {error.line}{error.column ? `:${error.column}` : ''}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,196 @@
+import { useEffect, useRef, useCallback } from 'react'
+import Editor, { type OnMount, type OnChange } from '@monaco-editor/react'
+import type * as Monaco from 'monaco-editor'
+import { useStudioStore } from '../lib/store'
+import { validateYaml } from '../lib/api'
+
+export default function YamlEditor() {
+  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null)
+  const monacoRef = useRef<typeof Monaco | null>(null)
+  const validationTimeoutRef = useRef<number | null>(null)
+
+  const {
+    yamlContent,
+    setYamlContent,
+    setValidation,
+    syncYamlToCanvas,
+    currentFile,
+  } = useStudioStore()
+
+  const handleEditorMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor
+    monacoRef.current = monaco
+
+    // Configure YAML language
+    monaco.languages.registerCompletionItemProvider('yaml', {
+      provideCompletionItems: (model: Monaco.editor.ITextModel, position: Monaco.Position) => {
+        const word = model.getWordUntilPosition(position)
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn,
+        }
+
+        const suggestions: Monaco.languages.CompletionItem[] = [
+          {
+            label: 'apiVersion',
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: 'apiVersion: hexdag/v1',
+            range,
+          },
+          {
+            label: 'kind',
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: 'kind: Pipeline',
+            range,
+          },
+          {
+            label: 'metadata',
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: 'metadata:\n  name: ${1:pipeline-name}',
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range,
+          },
+          {
+            label: 'spec',
+            kind: monaco.languages.CompletionItemKind.Property,
+            insertText: 'spec:\n  nodes:\n    - kind: ${1:function_node}\n      metadata:\n        name: ${2:node-name}\n      spec:\n        ${3:}\n      dependencies: []',
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range,
+          },
+          {
+            label: 'llm_node',
+            kind: monaco.languages.CompletionItemKind.Value,
+            insertText: 'kind: llm_node\n      metadata:\n        name: ${1:llm}\n      spec:\n        prompt_template: "${2:Process: {{input}}}"\n      dependencies: [${3}]',
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range,
+          },
+          {
+            label: 'function_node',
+            kind: monaco.languages.CompletionItemKind.Value,
+            insertText: 'kind: function_node\n      metadata:\n        name: ${1:function}\n      spec:\n        fn: "${2:json.loads}"\n      dependencies: [${3}]',
+            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+            range,
+          },
+        ]
+
+        return { suggestions }
+      },
+    })
+
+    // Define custom theme
+    monaco.editor.defineTheme('hexdag-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [
+        { token: 'key', foreground: '6366f1' },
+        { token: 'string.yaml', foreground: '22c55e' },
+        { token: 'number.yaml', foreground: 'f59e0b' },
+        { token: 'keyword.yaml', foreground: 'ec4899' },
+      ],
+      colors: {
+        'editor.background': '#0f0f1a',
+        'editor.foreground': '#e4e4e7',
+        'editor.lineHighlightBackground': '#1a1a2e',
+        'editorCursor.foreground': '#6366f1',
+        'editor.selectionBackground': '#6366f140',
+        'editorLineNumber.foreground': '#4a4a5e',
+        'editorLineNumber.activeForeground': '#6366f1',
+      },
+    })
+
+    monaco.editor.setTheme('hexdag-dark')
+
+    // Keyboard shortcut for save
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      // Trigger save via parent component
+      const event = new CustomEvent('hexdag-save')
+      window.dispatchEvent(event)
+    })
+  }
+
+  const runValidation = useCallback(async (content: string) => {
+    if (!content.trim()) {
+      setValidation(null)
+      return
+    }
+
+    try {
+      const result = await validateYaml(content, currentFile || undefined)
+      setValidation(result)
+
+      // Update editor markers
+      if (monacoRef.current && editorRef.current) {
+        const model = editorRef.current.getModel()
+        if (model) {
+          const markers: Monaco.editor.IMarkerData[] = result.errors.map((err) => ({
+            severity: err.severity === 'error'
+              ? monacoRef.current!.MarkerSeverity.Error
+              : err.severity === 'warning'
+                ? monacoRef.current!.MarkerSeverity.Warning
+                : monacoRef.current!.MarkerSeverity.Info,
+            message: err.message,
+            startLineNumber: err.line || 1,
+            startColumn: err.column || 1,
+            endLineNumber: err.line || 1,
+            endColumn: (err.column || 1) + 10,
+          }))
+          monacoRef.current.editor.setModelMarkers(model, 'hexdag', markers)
+        }
+      }
+    } catch (error) {
+      console.error('Validation error:', error)
+    }
+  }, [currentFile, setValidation])
+
+  const handleChange: OnChange = useCallback((value) => {
+    const content = value || ''
+    setYamlContent(content)
+
+    // Debounced validation
+    if (validationTimeoutRef.current) {
+      clearTimeout(validationTimeoutRef.current)
+    }
+    validationTimeoutRef.current = window.setTimeout(() => {
+      runValidation(content)
+      syncYamlToCanvas()
+    }, 500)
+  }, [setYamlContent, runValidation, syncYamlToCanvas])
+
+  // Initial validation
+  useEffect(() => {
+    if (yamlContent) {
+      runValidation(yamlContent)
+    }
+  }, []) // Only run once on mount
+
+  return (
+    <div className="h-full w-full">
+      <Editor
+        height="100%"
+        language="yaml"
+        value={yamlContent}
+        onChange={handleChange}
+        onMount={handleEditorMount}
+        options={{
+          minimap: { enabled: false },
+          fontSize: 13,
+          fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
+          lineNumbers: 'on',
+          renderWhitespace: 'selection',
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 2,
+          wordWrap: 'on',
+          folding: true,
+          bracketPairColorization: { enabled: true },
+          suggest: {
+            showWords: false,
+          },
+        }}
+        theme="hexdag-dark"
+      />
+    </div>
+  )
+}

hexdag/studio/ui/src/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Header } from './Header'
+export { default as FileBrowser } from './FileBrowser'
+export { default as NodePalette } from './NodePalette'
+export { default as Canvas } from './Canvas'
+export { default as YamlEditor } from './YamlEditor'
+export { default as ValidationPanel } from './ValidationPanel'
+export { default as HexdagNode } from './HexdagNode'
+export { default as NodeInspector } from './NodeInspector'

hexdag/studio/ui/src/index.css

@@ -0,0 +1,92 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  background: #0f0f1a;
+  color: #e4e4e7;
+  overflow: hidden;
+}
+
+/* React Flow customization */
+.react-flow__node {
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.react-flow__edge-path {
+  stroke: #6366f1;
+  stroke-width: 2;
+}
+
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: #818cf8;
+}
+
+.react-flow__handle {
+  width: 8px;
+  height: 8px;
+  background: #6366f1;
+  border: 2px solid #1a1a2e;
+}
+
+.react-flow__handle:hover {
+  background: #818cf8;
+}
+
+.react-flow__background {
+  background: #0f0f1a;
+}
+
+.react-flow__minimap {
+  background: #1a1a2e;
+  border: 1px solid #2a2a3e;
+  border-radius: 4px;
+}
+
+.react-flow__controls {
+  background: #1a1a2e;
+  border: 1px solid #2a2a3e;
+  border-radius: 4px;
+}
+
+.react-flow__controls-button {
+  background: #1a1a2e;
+  border-bottom: 1px solid #2a2a3e;
+  fill: #a1a1aa;
+}
+
+.react-flow__controls-button:hover {
+  background: #2a2a3e;
+}
+
+/* Monaco editor */
+.monaco-editor {
+  padding-top: 8px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a2e;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #3a3a4e;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4a4a5e;
+}

hexdag/studio/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

hexdag/studio/ui/src/types/index.ts

@@ -0,0 +1,123 @@
+import type { Node, Edge } from '@xyflow/react'
+
+// File types
+export interface FileInfo {
+  name: string
+  path: string
+  is_directory: boolean
+  size?: number
+  modified?: number
+}
+
+export interface FileContent {
+  path: string
+  content: string
+  modified: number
+}
+
+// Validation types
+export interface ValidationError {
+  line?: number
+  column?: number
+  message: string
+  severity: 'error' | 'warning' | 'info'
+}
+
+export interface ValidationResult {
+  valid: boolean
+  errors: ValidationError[]
+  node_count?: number
+  nodes?: string[]
+}
+
+// Pipeline types
+export interface PipelineMetadata {
+  name: string
+  description?: string
+}
+
+export interface NodeSpec {
+  kind: string
+  metadata: {
+    name: string
+    description?: string
+  }
+  spec: Record<string, unknown>
+  dependencies: string[]
+}
+
+export interface PipelineSpec {
+  ports?: Record<string, unknown>
+  nodes: NodeSpec[]
+}
+
+export interface Pipeline {
+  apiVersion: string
+  kind: string
+  metadata: PipelineMetadata
+  spec: PipelineSpec
+}
+
+// Canvas node types - must have index signature for React Flow compatibility
+export interface HexdagNodeData extends Record<string, unknown> {
+  kind: string
+  label: string
+  spec: Record<string, unknown>
+  isValid: boolean
+  errors: string[]
+}
+
+export type HexdagNode = Node<HexdagNodeData>
+export type HexdagEdge = Edge
+
+// Node palette types
+export interface NodeTemplate {
+  kind: string
+  label: string
+  description: string
+  icon: string
+  color: string
+  defaultSpec: Record<string, unknown>
+  requiredPorts?: string[]  // Ports this node type requires (e.g., ['llm', 'tool_router'])
+}
+
+// Port configuration for a node
+export interface NodePortConfig {
+  adapter: string  // e.g., 'core:openai' or 'plugin:azure_openai'
+  config?: Record<string, unknown>
+}
+
+// Store types
+export interface StudioState {
+  // Files
+  files: FileInfo[]
+  currentFile: string | null
+  yamlContent: string
+
+  // Canvas
+  nodes: HexdagNode[]
+  edges: HexdagEdge[]
+
+  // Validation
+  validation: ValidationResult | null
+
+  // UI state
+  isLoading: boolean
+  isSaving: boolean
+  isDirty: boolean
+
+  // Actions
+  setFiles: (files: FileInfo[]) => void
+  setCurrentFile: (path: string | null) => void
+  setYamlContent: (content: string) => void
+  setNodes: (nodes: HexdagNode[]) => void
+  setEdges: (edges: HexdagEdge[]) => void
+  setValidation: (result: ValidationResult | null) => void
+  setIsLoading: (loading: boolean) => void
+  setIsSaving: (saving: boolean) => void
+  setIsDirty: (dirty: boolean) => void
+
+  // Complex actions
+  syncYamlToCanvas: () => void
+  syncCanvasToYaml: () => void
+}

hexdag/studio/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

hexdag/studio/ui/tailwind.config.js

@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'hex': {
+          'bg': '#0f0f1a',
+          'surface': '#1a1a2e',
+          'border': '#2a2a3e',
+          'accent': '#6366f1',
+          'accent-hover': '#818cf8',
+          'text': '#e4e4e7',
+          'text-muted': '#a1a1aa',
+          'success': '#22c55e',
+          'error': '#ef4444',
+          'warning': '#f59e0b',
+        }
+      },
+      fontFamily: {
+        'mono': ['SF Mono', 'Fira Code', 'Consolas', 'monospace'],
+      }
+    },
+  },
+  plugins: [],
+}

hexdag/studio/ui/tsconfig.json

@@ -0,0 +1,37 @@
+{
+    "compilerOptions": {
+        "allowImportingTsExtensions": true,
+        "baseUrl": ".",
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "noEmit": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        },
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "target": "ES2020",
+        "useDefineForClassFields": true
+    },
+    "include": [
+        "src"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

hexdag/studio/ui/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "skipLibCheck": true,
+        "strict": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

hexdag/studio/ui/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom'],
+          'flow-vendor': ['@xyflow/react'],
+          'monaco-vendor': ['@monaco-editor/react'],
+        },
+      },
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3141',
+        changeOrigin: true,
+      },
+    },
+  },
+})