[Enhancement] SyGra Studio - UI Workflow Builder and Dashboard

[zephyrzilla]

Summary

This PR introduces SyGra Studio, a comprehensive web-based visual interface for building, managing, and monitoring SyGra workflows. Studio provides a modern, intuitive UI that enables users to:

• Visually design and edit workflow graphs with a drag-and-drop node-based editor
• Execute workflows and monitor progress in real-time
• Manage data sources with multi-source support and transform pipelines
• Browse and organize workflows, runs, recipes, and tools in a library
• View detailed execution analytics and logs

The UI is built with SvelteKit 5, Tailwind CSS, and XYFlow for the graph visualization, with a FastAPI backend for workflow execution and management.

Explain the features implemented:

Core Workflow Builder

• Visual Graph Editor: Node-based workflow design with XYFlow integration
• Node Types: Support for LLM, Multi LLM, Agent, Lambda, Data, Output, Subgraph, Weighted Sampler, and Start/End nodes
• Edge Management: Visual edge connections with condition labels and routing
• Auto-layout: Dagre-based automatic graph layout with manual positioning support
• Minimap & Controls: Collapsible minimap, zoom controls, and fit-to-view

Data Management

• Multi-Source Support: Configure multiple data sources (CSV, JSON, JSONL, HuggingFace, ServiceNow)
• Transform Pipeline: Visual transform editor with preview (rename, skip, combine etc.)
• Inline Preview: Real-time data preview with sample records
• Sink Configuration: Output destination management

Execution & Monitoring

• Real-time Execution: WebSocket-based live progress updates
• Execution History: Browse and filter past runs with status indicators
• Log Viewer: Streaming logs with auto-scroll and level filtering
• Analytics Dashboard: Success rates, token usage, cost tracking, duration metrics
• Run Comparison: Side-by-side comparison of execution results

Library & Organization

• Recipe Library: Save and reuse workflow subgraphs as recipes
• Tool Library: Manage custom Python tools for LLM/Agent nodes
• Workflow Management: List, search, filter, and organize workflows
• Models View: Monitor configured LLM models and their status

UI/UX

• Light/Dark Mode Support: Full light/dark mode with persistence
• Responsive Design: Collapsible sidebar, resizable panels
• Monaco Editor: Integrated code editor for prompts and Python code
• Global Theme System: Consistent editor theming across all code panels

Backend Integration

• FastAPI Server: RESTful API for workflow CRUD operations
• Execution Manager: Async workflow execution with callbacks
• Execution Storage: Scalable storage for run history and results
• YAML Converter: Bidirectional conversion between YAML configs and graph format

How to Test the feature

1. Start the Studio server:

   # Install frontend dependencies (one-time)
   cd studio/frontend && npm install && npm run build
   cd ../..
   
   # Start Studio server
   make studio
   
   # OR
   
   python -m studio.server --svelte --tasks-dir ./tasks/examples --port 8000

2. Access the UI: Navigate to http://localhost:8000

3. Create a workflow:

   • Click "Create Workflow" in the sidebar
   • Add nodes from the toolbar (LLM, Lambda, etc.)
   • Connect nodes by dragging from output to input handles
   • Configure node properties in the details panel

4. Run a workflow:

   • Click the "Run" button in the top toolbar
   • Monitor progress in the execution panel
   • View results in the Results modal

5. Browse existing workflows:

   • Navigate to "Workflows" in the sidebar
   • Click on a workflow to open it in the builder

Screenshots (if applicable)

The Studio UI includes:

• Home View: Quick stats, recent workflows, and activity feed
  

• Workflow Builder: Node-based graph editor with details panel

Screen.Recording.2026-01-08.at.2.16.35.PM.mov

• Workflows View: Visualize and execute Workflows from UI

• User can also debug the code from the UI itself.

Screen.Recording.2026-01-08.at.2.48.48.PM.mov

• Runs View: Execution history with filtering and analytics

Screen.Recording.2026-01-08.at.2.13.21.PM.mov

• Library: Recipe and tool management
  

• Models: LLM model status monitoring
  

• Settings with Theme support

Checklist

• Lint fixes and unit testing done
• End to end task testing
• Documentation updated