[Feature Request]: "Recently Used" and "Recently Added" Sections in Model and Workflow Sidebars

Background/Context

The ComfyUI frontend currently provides extensive model and workflow management through sidebar tabs, but lacks user-centric navigation aids that leverage usage patterns. Users working with large collections of models and workflows often need to repeatedly access the same items, but must navigate through folder structures or use search to locate them.

Current State

• Workflow Sidebar: Organized into "Open", "Bookmarked", and "Browse" sections
• Model Library Sidebar: Organized by folder structure with search capability
• Existing Usage Tracking: The codebase has node frequency tracking but no user behavior tracking for models/workflows

Architecture Foundation

The application already has infrastructure that can support this feature:

• User data persistence: api.storeUserData() and api.getUserData() methods
• Settings management: User preference persistence via settingStore.ts
• Timestamp tracking: User files already track lastModified timestamps via UserDataFullInfo API
• Bookmark system: Existing implementation shows how to persist user preferences

Problem Statement

Current Behavior

• Users must remember file/folder locations or use search to find frequently used items
• No indication of which models or workflows were accessed recently
• No way to quickly access newly added content
• Repeated navigation through deep folder structures

Expected Behavior

• Quick access to recently used models and workflows at the top of respective sidebars
• Automatic tracking of new additions with easy discovery
• Persistent storage of usage data across sessions
• Configurable list length and behavior

Impact

• Improved UX: Faster access to frequently used resources
• Enhanced Workflow: Reduced time spent navigating folder structures
• Better Discovery: Easy identification of newly added content
• Scalability: Better support for users with large model/workflow collections

Proposed Solution

Optimal Implementation: Backend Integration Required

The most robust implementation requires extending the backend server.py to return file system metadata for models and other content, similar to the existing UserDataFullInfo pattern used for workflows.

Current Metadata Support:

• ✅ Workflows: Already have full metadata via /userdata?full_info=true endpoint (modified timestamps)
• ❌ Models: Missing file timestamps from /api/experiment/models/{folder} endpoint
• ❌ Templates: Missing timestamps from workflow templates

Required Backend Changes:

# In server.py - extend model endpoint response
@app.route('/api/experiment/models/<folder>')  
def get_models_with_metadata(folder):
    return [{
        'name': model.name,
        'pathIndex': model.pathIndex,
        'modified': os.path.getmtime(model.path),  # Add modification time
        'created': os.path.getctime(model.path),   # Add creation time  
        'size': os.path.getsize(model.path)        # Add file size
    }]

Frontend Integration:

// Update ComfyModelDef class to include timestamps
export class ComfyModelDef {
  readonly lastModified: number    // From backend os.mtime
  readonly dateCreated: number     // From backend os.ctime  
  readonly fileSize: number        // From backend os.path.getsize
  
  // Usage tracking (calculated)
  lastUsed?: number               // Client-side tracking
  usageCount?: number             // Client-side tracking
}

Why Backend Integration is Superior:

1. Accuracy: File system timestamps are authoritative vs. client-side approximations
2. Reliability: Handles external file additions/modifications automatically
3. Performance: No need for complex client-side file monitoring
4. Consistency: Matches existing UserDataFullInfo pattern for workflows
5. Cross-client sync: File metadata is consistent across different client sessions

Frontend Implementation

1. Data Layer Enhancement Create src/stores/recentItemsStore.ts:

export const useRecentItemsStore = defineStore('recentItems', () => {
  const recentWorkflows = ref<string[]>([])
  const recentModels = ref<string[]>([])
  
  const trackWorkflowUsage = async (path: string) => { /* implementation */ }
  const trackModelUsage = async (modelKey: string) => { /* implementation */ }
  
  // Computed properties for "Recently Added" based on file timestamps
  const recentlyAddedWorkflows = computed(() => { /* sort by dateCreated */ })
  const recentlyAddedModels = computed(() => { /* sort by dateCreated */ })
})

2. UI Integration

• Add new collapsible sections at the top of both sidebars
• Use existing TextDivider component pattern
• Implement similar to bookmark sections

3. Settings Integration Add user preferences:

'Comfy.Sidebar.RecentItems.MaxCount': { type: 'number', defaultValue: 5 }
'Comfy.Sidebar.RecentItems.ShowRecentlyUsed': { type: 'boolean', defaultValue: true }
'Comfy.Sidebar.RecentItems.ShowRecentlyAdded': { type: 'boolean', defaultValue: true }

Alternative: Client-Only Approach

If backend changes aren't feasible immediately, implement client-side tracking with the understanding that it only tracks usage within the specific client session and won't capture external file system changes.

Implementation Checklist

Phase 1: Backend Enhancement (Recommended)

• Extend /api/experiment/models/{folder} to include file timestamps
• Add file metadata to workflow template endpoints
• Update API schemas to include new timestamp fields
• Test cross-platform timestamp handling (Windows/macOS/Linux)

Phase 2: Frontend Data Layer

• Update ComfyModelDef class with timestamp fields
• Create useRecentItemsStore with persistence logic
• Add settings for recent items configuration
• Implement usage tracking integration points

Phase 3: UI Implementation

• Create RecentWorkflowsSection component
• Create RecentModelsSection component
• Integrate sections into existing sidebar templates
• Implement collapsible behavior

Phase 4: Testing & Documentation

• Write unit tests for recent items store
• Write component tests for new sections
• Write browser tests for usage tracking
• Performance testing with large datasets

Testing Considerations

Functional Testing

1. Timestamp Accuracy: Verify file system timestamps match backend response
2. Usage Tracking: Test tracking on workflow open and model selection events
3. Persistence: Validate data persistence across sessions
4. Cross-platform: Test timestamp handling on different operating systems

Edge Cases

• Handle deleted workflows/models in recent lists
• Behavior when items exceed max count setting
• Migration of existing user data
• External file modifications (models added outside ComfyUI)

Supporting References

• Related Issue: #486 - "Internal node usage metrics to improve node search experience"
• Architecture Reference: src/stores/README.md - Store development guidelines
• Similar Implementation: workflowBookmarkStore in workflowStore.ts
• API Pattern: UserDataFullInfo structure in src/schemas/apiSchema.ts
• File Paths:
  • src/components/sidebar/tabs/WorkflowsSidebarTab.vue (workflow sidebar)
  • src/components/sidebar/tabs/ModelLibrarySidebarTab.vue (model sidebar)
  • src/stores/workflowStore.ts (workflow data management)
  • src/stores/modelStore.ts (model data management)

Estimated Complexity: Medium

• Backend changes required for optimal implementation
• Leverages existing patterns and infrastructure
• Well-defined scope with clear boundaries

Priority: Enhancement - Improves user experience without affecting core functionality