Collection UI Mapping

Each db.sb collection category maps to specific UI components, panels, and widgets.

Legal

Contracts

Views:

• ListView: TablePanel with status filters
• ShowView: DocumentPanel + SignaturePanel + DetailPanel
• EditView: FormPanel + DocumentUpload

Widgets:

• DocumentSigner - Full e-sign flow
• SignatureCapture - Signature pad
• SigningStatus - Request status tracker
• ContractTimeline - Key dates visualization

Financial

Invoices

Views:

• ListView: TablePanel with status/date filters
• ShowView: InvoicePanel + PaymentsPanel
• EditView: TabbedForm (Invoice, Amounts, Timeline)

Widgets:

• InvoicePreview - PDF preview
• PaymentCapture - Payment collection
• LineItemsTable - Editable line items
• PaymentHistory - Payment timeline

Payments / Cards / Transfers

Widgets:

• PaymentForm - Checkout flow
• CardManager - Saved cards
• TransferWidget - Money movement
• BalanceCard - Account balance

Sales

Deals

Views:

• ListView: KanbanPanel (by stage)
• ShowView: DealPanel + ActivityTimeline + ContactsList
• EditView: FormPanel + StageSelector

Proposals / Quotes

Views:

• ListView: TablePanel with status filters
• ShowView: ProposalViewer + QuoteDetails
• EditView: ProposalBuilder (rich text + quote items)

Widgets:

• ProposalBuilder - Rich proposal editor
• QuoteCalculator - Pricing calculator
• AcceptanceWidget - Accept/reject flow

Work

Tasks

Views:

• ListView: KanbanPanel (by status) or TablePanel
• ShowView: TaskPanel + ActivityPanel
• EditView: FormPanel

Workflows

Views:

• ListView: CardsPanel
• ShowView: WorkflowPanel (visual diagram) + TasksList
• EditView: WorkflowBuilder (drag-drop canvas)

Widgets:

• WorkflowDiagram - Visual workflow
• TaskKanban - Task board
• GanttChart - Timeline view
• AssigneeSelector - User/agent picker

Projects / Issues

Views:

• ListView: TablePanel or KanbanPanel
• ShowView: ProjectPanel + TasksList + IssuesList
• EditView: FormPanel

Communications

Sequences

Views:

• ListView: CardsPanel with status filters
• ShowView: SequencePanel + StepsTimeline + EnrollmentsList
• EditView: SequenceBuilder (step-by-step editor)

Widgets:

• SequenceBuilder - Step editor
• EnrollmentChart - Funnel visualization
• TriggerConfig - Trigger setup

Templates / Messages

Views:

• ListView: CardsPanel with previews
• ShowView: TemplatePreview
• EditView: TemplateEditor (rich text + variables)

Widgets:

• TemplateEditor - Rich text with merge fields
• MessageComposer - Email/SMS composer
• VariablePicker - Merge field selector

Marketing

Campaigns

Views:

• ListView: CardsPanel or TablePanel
• ShowView: CampaignDashboard + MetricsPanel + LeadsList
• EditView: CampaignBuilder

Widgets:

• CampaignBuilder - Multi-channel setup
• AudienceSelector - Segment picker
• CampaignMetrics - Performance dashboard

Leads

Views:

• ListView: TablePanel with scoring/status
• ShowView: LeadPanel + ActivityTimeline + ScoreCard
• EditView: FormPanel + SegmentTags

AI

Models / Experiments / Evals

Views:

• ListView: TablePanel or CardsPanel
• ShowView: ModelPanel + MetricsPanel + EvalResults
• EditView: FormPanel + ConfigEditor
• BattleView: ArenaPanel (blind comparison)

Widgets:

• ModelSelector - Model picker
• EvalResults - Comparison charts
• PromptEditor - Prompt testing
• TokenUsage - Usage metrics
• ArenaPanel - Side-by-side blind comparison (pick winner, equal, or both bad)
• BattleCard - Single comparison vote UI
• LeaderboardTable - Elo/ranking from battles
• WinRateChart - Head-to-head stats

Integrations

Webhooks / Triggers

Views:

• ListView: TablePanel with status
• ShowView: WebhookPanel + LogsPanel
• EditView: WebhookConfig

Widgets:

• WebhookConfig - Endpoint + events
• TriggerBuilder - Condition builder
• WebhookLogs - Request/response logs

Tools / Providers

Views:

• ListView: CardsPanel (integration directory)
• ShowView: ToolPanel + ConfigPanel
• EditView: ToolConfig

Success

Customers / Contacts

Views:

• ListView: TablePanel with filters
• ShowView: CustomerPanel + SubscriptionsList + ActivityTimeline
• EditView: FormPanel

Widgets:

• CustomerHealth - Health score
• SubscriptionCard - Plan details
• UsageChart - Usage metrics

Content

Documents / Files

Views:

• ListView: GalleryPanel or ListPanel
• ShowView: DocumentViewer
• EditView: DocumentEditor

Widgets:

• DocumentViewer - PDF/doc preview
• FileUploader - Drag-drop upload
• VersionHistory - Version timeline

Tech

APIs / Apps / SDKs

Views:

• ListView: CardsPanel
• ShowView: APIPanel + EndpointsList + UsageMetrics
• EditView: FormPanel + ConfigEditor

Widgets:

• APIExplorer - Endpoint testing
• SDKDocs - Code examples
• UsageMetrics - API usage charts

VibeCode

Sessions / Templates

Views:

• EditorView: VibeLayout (Chat + Preview + Code)
• ListView: CardsPanel with previews
• ShowView: SessionReplay

Widgets:

• ChatPanel - AI conversation
• PreviewPanel - Live preview
• CodePanel - Monaco editor
• TemplateGallery - Starter templates

GitHub-Inspired Patterns

GitHub's concepts map to universal business patterns:

Discussion → Thread/Conversation

Widgets:

• ThreadPanel - Conversation thread
• CommentInput - Reply composer
• ReactionPicker - Emoji reactions
• MentionInput - @mention autocomplete

Issue → Trackable Work Item

Widgets:

• IssueCard - Issue summary card
• LabelPicker - Tag selector
• AssigneePicker - User assignment
• MilestoneTracker - Progress toward milestone

Project → Planning Board

Widgets:

• ProjectBoard - Kanban/table view
• BoardColumn - Status column
• ProjectTable - Spreadsheet view
• RoadmapView - Timeline/Gantt

Pull Request → Review/Approval Flow

This is the key insight: a PR is a deliverable submitted for review.

The Review Pattern appears everywhere:

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Draft     │────▶│  In Review  │────▶│  Approved   │
└─────────────┘     └──────┬──────┘     └─────────────┘
                          │
                          ▼
                   ┌─────────────┐
                   │  Rejected   │
                   └─────────────┘

Widgets:

• ReviewPanel - Review interface with approve/reject
• DiffPanel - Side-by-side changes
• ApprovalButtons - Approve/Request Changes/Reject
• ReviewThread - Line-by-line comments
• ChecksPanel - Validation status (CI/compliance)
• MergeButton - Final action button

Deliverables in Discussions

The Discussions.deliverables field captures this pattern:

deliverables: [{
  name: string
  status: 'Pending' | 'InProgress' | 'InReview' | 'Approved' | 'Rejected'
  dueAt: Date
  completedAt: Date
  files: File[]
}]

Views:

• DeliverablesList - All deliverables for a discussion
• DeliverableReview - Single deliverable review view
• DeliverableTimeline - Progress over time

Common Patterns

Status Flows

Most collections follow status workflows that need:

1. StatusBadge - Visual status indicator
2. StatusTransition - Action buttons for state changes
3. StatusTimeline - History of status changes

Relationship Fields

Collections reference each other via:

1. ReferenceField - Single related record (belongs-to)
2. ReferenceManyField - Multiple related records (has-many)
3. RelationshipPanel - Manage relationships

Activity Tracking

Many collections need activity/audit:

1. ActivityTimeline - Event history
2. ActivityFeed - Recent activity
3. AuditLog - Change history

Widget Categories Summary