Add components section

[Mbeaulne]

Description

This PR implements a comprehensive components dashboard that allows users to browse, search, and view details for components from multiple sources. The dashboard includes a searchable component list with collapsible sections for user components, library components, and published components. When a component is selected, detailed information is displayed including metadata, inputs/outputs, and source code. Additionally, recently used components are now tracked and displayed on the dashboard home page.

Note: This is a foundational PR to build the component dashboard upon. Its not the final state, but its a shippable state.

Type of Change

• New feature

Key Features

• Component Browser: Three-panel layout with search functionality and hierarchical component organization
• Component Details: Side-by-side view showing metadata, I/O specifications, and syntax-highlighted source code
• Recently Used Tracking: Components are automatically added to recently viewed when dropped onto the canvas
• Multi-source Support: Displays components from user library, static component library, and published components from the backend
• Responsive Design: Sticky positioning for source code panel and proper overflow handling

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Navigate to the dashboard and verify the new "Recently Used Components" section appears
2. Go to the Components tab in the dashboard
3. Test searching for components across different sources
4. Select a component and verify the detail panel shows metadata, I/O specs, and source code
5. In the flow editor, drag and drop a component onto the canvas
6. Return to the dashboard and verify the component appears in the recently used section
7. Test the collapsible sections and folder navigation in the component list

Additional Comments

The component tracking functionality integrates with the existing useRecentlyViewed hook and filters component entries separately from other dashboard items to maintain clean separation between different content types.

[github-actions]

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=03-27-add_components_section/84b41ed`

---

[Mbeaulne]

• remove old home page #2056
• Default dashboard flag #2055
• Add components section #2025 👈 (View in Graphite)
• Add dashboard home view with favorites, recently viewed, and my runs sections #2011
• moves app footer #2010
• add new section to the side bar #2004
• Updates runs and pipelines designs #2003
• Adds runs and filters #2002
• update favourite and recent cards #2001
• Updates revently viewed #2000
• Adds recently viewed #1999
• Update design for favourites #1998
• add favourites to new dashboard #1997
• feat dashboard layout #1996
• Feat recently viewed #1986
• feat_favorites_filter #1985
• feat_favorites_homepage_section #1983
• feat_favorites_toggle_ui #1982
• feat favorites infrastructure #1980
• Dashboard and beta #1932
• Add Claude AI skills for project conventions and development standards #1931
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Mbeaulne]

Reviewer note: This is the top of the stack and the largest PR — it completes the components sub-route and fills in the last slot on the dashboard home.

Key things to review:

• DashboardComponentsView.tsx — new file, the full component browser (searchable list with folder tree + detail panel with source YAML viewer)
• FlowCanvas.tsx — addRecentlyViewed hooked into the component drop/import actions to track "recently used components"
• DashboardHomeView.tsx — third grid column now shows "Recently Used Components"; RecentlyViewedPreview filters out component-type items (components have their own dedicated section)
• DashboardRecentlyViewedView.tsx — same component filter applied to the full recently viewed page

No churn after this PR — this is the final state of the stack.

[maxy-shpfy]

NIT: Use ui primitive Icon

[morgan-wowk]

More of a backend concern:

I notice we load 200+ published components from a single API call. This is not going to scale well and we'll need to introduce pagination, search, and filtering most likely.

This will be its own epic.

[camielvs]

^ yes, we will need to find a way to manage the components list but I think this can fall under the upcoming Component Browser work

[Mbeaulne]

Merge activity

• Apr 10, 8:38 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 10, 9:42 PM UTC: Graphite couldn't merge this PR because it had merge conflicts.
• Apr 10, 10:50 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 10, 10:50 PM UTC: @Mbeaulne merged this pull request with Graphite.