TASK-003: Schema Viewer Component

Task ID: TASK-003
Phase: 5 - Multi-Target Deployment (BYOB)
Priority: 🟡 Medium
Difficulty: 🟢 Easy
Estimated Time: 2-3 days
Prerequisites: TASK-001 (Backend Services Panel)
Branch: feature/byob-schema-viewer

Objective

Create a dedicated Schema Viewer component that displays the cached schema from connected backends in an interactive, collapsible tree view.

Background

TASK-001 implemented basic schema introspection, but the current UI only shows collection names in a simple list. Users need to:

See all fields in each collection
Understand field types and constraints
Easily copy field names for use in nodes
Refresh schema when backend changes

User Story

As a Noodl user, I want to browse my backend's data schema visually, so I can understand what data is available and use correct field names.

Current State

Schema is fetched and cached (TASK-001 ✅)
Only collection names shown in Backend Services Panel
No field details visible
No way to copy field paths

Desired State

Expandable tree view of collections → fields
Field type icons and badges
Copy field path on click
Relation indicators
Search/filter collections
Refresh button

UI Design

┌─────────────────────────────────────────────────────────────────────┐
│ SCHEMA BROWSER                              [🔍 Search] [↻ Refresh] │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│ ▼ users (12 fields)                                                 │
│   ├─ 🔑 id (uuid) PRIMARY                                           │
│   ├─ 📧 email (email) REQUIRED UNIQUE                               │
│   ├─ 📝 name (string)                                               │
│   ├─ 🖼️ avatar (image)                                              │
│   ├─ 🔗 role → roles (relation-one)                                 │
│   ├─ 📅 created_at (datetime) READ-ONLY                             │
│   └─ 📅 updated_at (datetime) READ-ONLY                             │
│                                                                     │
│ ▶ posts (8 fields)                                                  │
│ ▶ comments (6 fields)                                               │
│ ▶ categories (4 fields)                                             │
│ ▶ media (7 fields)                                                  │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Features

1. Collapsible Tree Structure

Collections at root level
Fields as children
Expand/collapse with animation
"Expand All" / "Collapse All" buttons

2. Field Information Display

Each field shows:

Name
Type (with icon)
Constraints (REQUIRED, UNIQUE, PRIMARY)
Default value (if set)
Relation target (for relation fields)

3. Field Type Icons

Type	Icon	Color
string	📝	default
text	📄	default
number/integer	🔢	blue
boolean	✅	green
datetime	📅	purple
email	📧	blue
url	🔗	blue
image/file	🖼️	orange
relation	🔗	cyan
json	{}	gray
uuid	🔑	yellow

4. Copy Field Path

Click on field name → copies to clipboard
For nested paths: collection.field
Toast notification: "Copied: author.name"

5. Search/Filter

Filter collections by name
Filter fields within collections
Highlight matching text

6. Refresh Schema

Manual refresh button
Shows last synced timestamp
Loading indicator during refresh

Implementation

File Structure

packages/noodl-editor/src/editor/src/views/panels/BackendServicesPanel/
├── SchemaViewer/
│   ├── SchemaViewer.tsx           # Main component
│   ├── SchemaViewer.module.scss
│   ├── CollectionTree.tsx         # Collection list
│   ├── FieldRow.tsx               # Single field display
│   ├── FieldTypeIcon.tsx          # Type icon component
│   └── types.ts

Component API

interface SchemaViewerProps {
  backend: BackendConfig;
  onRefresh: () => Promise<void>;
}

Integration Point

The SchemaViewer should be embedded in the BackendServicesPanel, shown when a backend is selected or expanded.

Success Criteria

Tree view displays all collections from schema
Fields expand/collapse per collection
Field types shown with appropriate icons
Constraints (REQUIRED, UNIQUE) visible
Click to copy field path works
Search filters collections and fields
Refresh button fetches fresh schema
Last synced timestamp displayed