ComfyUI_frontend/CLAUDE.md

ComfyUI Second Sidebar Implementation Plan

Executive Summary

This plan outlines the implementation of a second sidebar on the right side of the ComfyUI interface, dedicated to in-depth node manipulation. The new sidebar will feature two primary tabs: one for modifying node parameters and another for node settings. This enhancement will complement the existing left sidebar while maintaining a clean separation of concerns.

Current Architecture Analysis

Existing Sidebar System

• Location: src/components/sidebar/
• Core Component: SideToolbar.vue - manages sidebar tabs and teleports content to .comfyui-body-left or .comfyui-body-right
• Tab System: Extensible architecture using SidebarTabExtension type
• State Management: sidebarTabStore.ts handles tab registration and active state
• Layout: Grid-based layout in GraphView.vue with dedicated slots for left/right sidebars

Node System Architecture

• Node Configuration: Currently done inline via widgets directly on nodes
• No Property Inspector: Unlike traditional node editors, ComfyUI lacks a dedicated property panel
• Widget System: Dynamic widgets created from backend node definitions
• Node Properties: Stored in node.properties (behavioral settings) and node.widgets_values (parameter values)

Phase 0: Remove Teleport Pattern and Sidebar Location Setting

Current Teleport Issues

The current sidebar implementation uses Vue's teleport feature, which creates architectural problems:

• Split component structure: Navigation is teleported but content isn't
• Complexity: Makes component relationships harder to understand
• Testing challenges: Teleported content is harder to test
• Unnecessary abstraction: Fixed-position sidebars don't need teleportation

Sidebar Location Setting Removal Strategy

Files Requiring Updates:

1. src/constants/coreSettings.ts

   • Mark Comfy.Sidebar.Location as deprecated (don't delete)

2. src/components/sidebar/SideToolbar.vue

   • Remove teleport wrapper
   • Remove teleportTarget computed property
   • Render directly without position logic

3. src/components/toast/GlobalToast.vue

   • Remove watcher for sidebar location setting
   • Toast positioning only needs to consider graph canvas

4. src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

   • Remove sidebarLocation computed property
   • Always position preview to the right: nodePreviewStyle.value.left = targetRect.right + 'px'

5. src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

   • Same changes as NodeTreeLeaf.vue

6. src/components/sidebar/SidebarHelpCenterIcon.vue

   • Remove position checking logic
   • Always position help popup to the right

7. src/components/LiteGraphCanvasSplitterOverlay.vue

   • Remove right-side splitter logic
   • Only show left-side resize handle

8. src/views/GraphView.vue

   • Render SideToolbar directly in .comfyui-body-left
   • No conditional rendering based on settings

Refactoring Principles

• No hardcoded 'left' values: Remove position checks entirely instead of replacing with constants
• Direct rendering: Components render in their natural DOM position
• Fixed positioning: UI elements always appear in predictable locations
• Simplified logic: Remove conditional code paths based on sidebar position

Implementation Strategy

Phase 1: Foundation Setup (Week 1)

1.1 Remove Teleport and Deprecate Setting

• Complete Phase 0 refactoring
• Update GraphView to render sidebars directly
• Test all affected components

1.2 Create Right Sidebar Infrastructure

New components:

• src/components/rightSidebar/RightSideToolbar.vue - Main container for right sidebar
• src/components/rightSidebar/RightSidebarIcon.vue - Icon component for tabs
• src/stores/workspace/rightSidebarTabStore.ts - State management for right sidebar

Key differences from left sidebar:

• No teleport - renders directly in .comfyui-body-right
• Different visual styling to distinguish from left sidebar
• Context-aware tabs that appear/disappear based on node selection

Phase 2: Node Inspector Tab (Week 2)

2.1 Node Parameter Editor

Component: src/components/rightSidebar/tabs/NodeParametersTab.vue

Features:

• Display all node widgets in a form layout
• Real-time synchronization with node widget values
• Support for all existing widget types (INT, FLOAT, STRING, COMBO, etc.)
• Collapsible sections for better organization
• Search/filter functionality for nodes with many parameters

Technical considerations:

• Use Vue's watch to sync with app.canvas.selected_nodes
• Leverage existing widget constructors from widgetStore
• Implement two-way binding with node.widgets_values
• Handle multi-node selection gracefully

2.2 Widget Enhancement

Improvements over inline widgets:

• Better layout for complex widgets (e.g., image upload)
• Tooltips and help text from node definitions
• Validation feedback with clearer error messages
• Undo/redo support for parameter changes

Phase 3: Node Settings Tab (Week 3)

3.1 Node Settings Editor

Component: src/components/rightSidebar/tabs/NodeSettingsTab.vue

Features:

• Node appearance settings (color, shape, size)
• Execution settings (bypass, mute, always execute)
• Display options (show/hide outputs, compact mode)
• Node-specific properties (e.g., reroute node settings)
• Custom node metadata editing

Implementation:

• Create settings schema for common node properties
• Support for node-type-specific settings
• Batch editing for multiple selected nodes
• Preview changes before applying

Phase 4: Integration & Polish (Week 4)

4.1 State Synchronization

Key areas:

• Ensure parameter changes update graph immediately
• Sync with undo/redo system
• Handle node deletion/creation gracefully
• Coordinate with existing context menus

4.2 Responsive Design

Considerations:

• Sidebar resizing functionality
• Collapse/expand animations
• Mobile/tablet responsiveness
• Keyboard shortcuts for sidebar operations

4.3 Performance Optimization

Focus areas:

• Virtual scrolling for long parameter lists
• Debounced updates for real-time changes
• Lazy loading of complex widgets
• Memory management for multi-node selection

Technical Architecture

Component Hierarchy (No Teleport)

GraphView.vue
 .comfyui-body-left
    SideToolbar.vue
        SidebarIcon.vue (per tab)
        ExtensionSlot.vue
 .comfyui-body-right
     RightSideToolbar.vue
         RightSidebarIcon.vue (Parameters)
         RightSidebarIcon.vue (Settings)
         ExtensionSlot.vue
             NodeParametersTab.vue
             NodeSettingsTab.vue

State Management

// rightSidebarTabStore.ts
interface RightSidebarState {
  activeTab: string | null
  selectedNodes: LGraphNode[]
  parameterValues: Record<string, any>
  settingsValues: Record<string, any>
}

Event Flow

1. Node selection ’ Update rightSidebarTabStore.selectedNodes
2. Parameter change ’ Update node.widgets_values ’ Trigger graph dirty
3. Settings change ’ Update node.properties ’ Refresh node appearance
4. Tab switch ’ Save current state ’ Load new tab state

Migration Path

Backward Compatibility

• Existing workflows continue to function unchanged
• All node operations remain available via context menus
• Extensions can opt-in to right sidebar integration

Extension API

interface RightSidebarTabExtension {
  id: string
  title: string
  icon: string
  nodeTypes?: string[] // Show tab only for specific node types
  condition?: (nodes: LGraphNode[]) => boolean
  render: () => VNode | (() => HTMLElement)
}

Testing Strategy

Unit Tests

• Widget value synchronization
• Multi-node selection handling
• Settings persistence
• Undo/redo integration

Component Tests

• Tab switching behavior
• Form validation
• Responsive layout
• Keyboard navigation

E2E Tests

• Complete parameter editing workflow
• Settings changes affecting node behavior
• Performance with 100+ nodes selected
• Extension integration

Accessibility Considerations

• ARIA labels for all interactive elements
• Keyboard navigation support
• Screen reader compatibility
• High contrast mode support
• Focus management for tab switches

Performance Targets

• Tab switch: < 100ms
• Parameter update: < 16ms (60fps)
• Initial load with 50 nodes: < 200ms
• Memory overhead: < 50MB for typical workflows

Risk Mitigation

Technical Risks

1. Performance degradation with many nodes
   • Mitigation: Virtual scrolling, pagination
2. State synchronization bugs
   • Mitigation: Comprehensive testing, clear data flow
3. Extension compatibility
   • Mitigation: Gradual rollout, extension API versioning

UX Risks

1. Information overload
   • Mitigation: Progressive disclosure, search/filter
2. Workflow disruption
   • Mitigation: Optional feature, preserve existing workflows
3. Learning curve
   • Mitigation: Intuitive design, inline help

Success Metrics

• User engagement: 80% of users use right sidebar within first week
• Performance: No regression in graph manipulation speed
• Stability: < 0.1% crash rate related to new features
• Adoption: 50% of extensions integrate within 3 months

Timeline

Week 0: Remove teleport pattern, deprecate location setting Week 1: Foundation setup Week 2: Node parameters tab implementation Week 3: Node settings tab implementation Week 4: Integration, testing, and polish Week 5: Beta release and feedback collection Week 6: Final adjustments and production release

Next Steps

1. Execute Phase 0 (remove teleport and deprecate setting)
2. Review and approve implementation plan
3. Create detailed Figma design specifications
4. Set up feature branch feature/right-sidebar
5. Begin Phase 1 implementation
6. Schedule weekly progress reviews