Made Open

Web App Reference

Complete reference for the Made Open Next.js 15 web client (apps/web/).

Table of Contents

  1. Layouts
  2. Auth Pages
  3. Public Pages — (public)/
  4. App Pages — (app)/
  5. Components
  6. Hooks

Layouts

Root Layout (app/layout.tsx)

Wraps the entire app. Reads locale from cookies, sets <html lang>, loads Inter font, registers PWA manifest, and renders <Providers>.

App Layout (app/(app)/layout.tsx)

Server component. Checks Supabase auth; redirects unauthenticated users to /auth/login. Renders the authenticated shell: <Sidebar>, <Header>, <PwaInstallBanner>, <OfflineIndicator>, <CommandPalette>, and main content area.

Public Layout (app/(public)/layout.tsx)

Static layout for public/marketing pages: <PublicNavbar> + <main> + <PublicFooter>.

Inbox Layout (app/(app)/inbox/layout.tsx)

Removes default padding so the 3-column inbox can extend to full viewport height.

Auth Pages

/auth/login (Login)

  • Renders: Centered card with email/password form, "MO" logo, link to sign-up.
  • API: supabase.auth.signInWithPassword().
  • Actions: Submit credentials; on success redirect to /contacts.

/auth/signup (Sign Up)

  • Renders: Card with email, password, confirm-password. On success shows "check your email" message.
  • API: supabase.auth.signUp() with email redirect to /auth/callback.
  • Actions: Create account; validates password length and match.

/auth/callback (OAuth Callback Route)

  • Type: Route handler (route.ts), not a page.
  • Purpose: Exchanges the auth code from Supabase for a session, then redirects.

Public Pages

/ (Home / Landing)

  • Route: (public)/page.tsx
  • Renders: Marketing landing page with <Hero>, <FeatureGrid> (6 communication features), <HowItWorks>, cross-platform section (Hub/Web/Android/Windows), open-source section, and <CTASection>.
  • Components: Hero, FeatureGrid, HowItWorks, CTASection, FeatureCard.
  • No API calls -- static content.

/about

  • Renders: Static about page describing the Made Open mission and team.

/features

  • Renders: Feature overview landing page.

/features/communications

  • Renders: Deep-dive page for communications capabilities (voice, SMS, email, video).

/features/ai

  • Renders: Deep-dive page for AI features (LLM routing, rules, RAG).

/features/privacy

  • Renders: Deep-dive page for privacy and data sovereignty features.

/getting-started

  • Renders: Getting-started guide for new users.

/roadmap

  • Renders: Public roadmap, server-rendered from docs/04-roadmap/phases.md.

/architecture

  • Renders: Architecture overview (event bus, plugin system, data model).

/community

  • Renders: Community page with contribution guidelines.

/apps

  • Renders: Overview of all platform apps (hub, web, Android, Windows).

/api-docs

  • Renders: Public API documentation overview.

/docs and /docs/[...slug]

  • Renders: Documentation browser. Layout has <DocSidebar>, individual pages render markdown from the docs/ directory.
  • Components: DocSidebar, DocBreadcrumb, DocPagination, DocSearch, DocTableOfContents.

/help (Help Center)

  • Route: (public)/help/page.tsx
  • Renders: Help center index with category cards and search.
  • Components: HelpSearch, HelpCategoryCard, HelpLayout.

/help/[slug] (Help Article)

  • Renders: Individual help article with navigation.
  • Components: HelpArticle.

Additional Public Pages

The following public routes exist and render static/marketing content; full per-page documentation is out of scope for this reference:

  • /manifesto — Made Open manifesto
  • /setup — First-run setup walkthrough
  • /download — App download links (web / Android / Windows)
  • /time-banking — Time-banking explainer
  • /explore-federation, /explore-governance, /explore-marketplace, /explore-reputation — feature deep-dives

App Pages

All routes under (app)/ require authentication (enforced by the app layout).

/dashboard

  • Route: (app)/dashboard/page.tsx
  • Renders: Main dashboard with stat cards (contacts, messages, active rules), active capabilities badges, live activity feed (SSE), getting-started checklist, system health card, cache performance card, resilience card (circuit breakers + rate limiter), and integrations summary.
  • API: hubFetch('/api/stats'), fetch('${HUB_URL}/health/detailed') (every 30s).
  • Components: CapabilityBadge, ActivityFeed, internal GettingStarted, SystemHealthCard, CachePerformanceCard, ResilienceCard.
  • Actions: Navigate to contacts/conversations/rules/settings.

/inbox

  • Route: (app)/inbox/page.tsx
  • Renders: 3-column unified inbox: filter chips (All/Calls/SMS/Email/Video/Voicemail), inbox list (left), preview pane (center), quick actions (right).
  • API: Via useInbox hook -- hubFetch('/api/inbox'), /api/inbox/unread-count, /api/inbox/read, /api/inbox/starred, /api/inbox/archive.
  • Components: InboxFilters, InboxList, InboxPreview, QuickActions.
  • Actions: Filter by type, search (Meilisearch), select item (auto-mark read), toggle star, archive, open full detail.
  • Real-time: Subscribes to inbox_items table via useRealtimeTable.

/email

  • Route: (app)/email/page.tsx
  • Renders: 3-panel email client: folder tree (left), thread list (center), reading pane with reply bar (right). Compose/reply/forward modal.
  • API: hubFetch('/api/email/folders'), /api/email/threads?folderId=...&search=..., /api/email/threads/:id/messages, /api/connectors/ms-graph/sync.
  • Components: FolderTree, ThreadList, ReadingPane, ReplyBar, ComposeEmail.
  • Actions: Select folder, search threads, select thread, reply/reply-all/forward, compose new, sync from MS Graph.

/calls

  • Route: (app)/calls/page.tsx
  • Renders: Call management page with Twilio WebRTC integration. Token/connection status, active call UI, call history list.
  • API: fetch('${HUB_URL}/api/calling/history'), /api/calling/token (POST), /api/calling/place (POST).
  • Components: Dialer, ActiveCall.
  • Actions: Connect Twilio device, place outbound call (WebRTC or REST fallback), hang up, mute toggle, refresh history.

/contacts

  • Route: (app)/contacts/page.tsx (server component with Suspense)
  • Renders: Contact list with search.
  • API: hubFetch('/contacts?q=...&page=...').
  • Components: ContactSearch, ContactList, ContactCard.
  • Actions: Search contacts, click to navigate to detail.

/contacts/[id]

  • Route: (app)/contacts/[id]/page.tsx (server component)
  • Renders: Contact detail with avatar, quick info (phone, email, address, tags), data sources, metadata. Tabbed main area for conversations.
  • API: hubFetch('/contacts/:id'), hubFetch('/conversations?participantId=:id').
  • Components: ContactDetailTabs.

/conversations

  • Route: (app)/conversations/page.tsx
  • Renders: Conversation list with last-message preview, relative time, unread count badge. New SMS dialog.
  • API: hubFetch('/conversations').
  • Components: SmsCompose.
  • Real-time: Subscribes to messages table for live preview updates via useRealtimeTable.

/conversations/[id]

  • Route: (app)/conversations/[id]/page.tsx
  • Renders: Chat bubble layout (inbound left, outbound right). Compose bar at bottom. Typing indicator.
  • API: hubFetch('/conversations/:id'), hubFetch('/conversations/:id/messages') (GET + POST).
  • Hooks: useMessages(id) for real-time message subscription.
  • Actions: Send message, auto-scroll on new messages.

/rules

  • Route: (app)/rules/page.tsx (server component with Suspense)
  • Renders: Tabbed view: "My Rules" list + "Templates" grid. Analytics summary (top active rules).
  • API: hubFetch('/rules'), hubFetch('/api/rule-templates'), hubFetch('/api/rules/analytics/top?limit=3').
  • Actions: Navigate to rule detail, create new rule, use template, open visual builder.

/rules/[id]

  • Route: (app)/rules/[id]/page.tsx (server component)
  • Renders: Rule editor with collaboration bar. Parses condition AST and actions into form fields.
  • API: hubFetch('/rules/:id').
  • Components: RuleBuilder, RuleCollaborationBar.

/rules/new

  • Renders: New rule form using RuleBuilder component with empty defaults.

/rules/builder

  • Route: (app)/rules/builder/page.tsx
  • Renders: Visual drag-and-drop rule builder. Left palette (triggers, conditions, actions, flow nodes), center canvas with SVG connections, right config panel.
  • API: POST /api/proxy/rules on save.
  • Actions: Add nodes from palette, select/configure nodes, connect nodes, delete nodes, save rule.

/ai

  • Route: (app)/ai/page.tsx
  • Renders: AI chat interface with conversation sidebar, message thread with chat bubbles, thinking indicator, citations display.
  • API: hubFetch('/api/ai/conversations'), hubFetch('/api/ai/query', POST).
  • Actions: Select conversation, start new conversation, send query, view citations.

/agent

  • Route: (app)/agent/page.tsx
  • Renders: Agent worker page for dispatching Claude tasks to Windows machine. Prompt input with CLI/SDK mode toggle, working directory input, system prompt (advanced). Session list with threaded conversation view, live progress via SSE.
  • API: fetch('${HUB_URL}/api/device/commands') (GET + POST), SSE via /api/stream?topics=device.
  • Actions: Submit task, select CLI/SDK mode, expand sessions, send follow-up messages.

/calendar

  • Route: (app)/calendar/page.tsx
  • Renders: Month/week view calendar grid. Day cells show events with color coding by source. Event detail dialog.
  • API: hubFetch('/api/events'), hubFetch('/api/connectors/ms-graph/sync', POST).
  • Actions: Navigate months/weeks, toggle month/week view, click event for detail, sync from MS Graph.
  • Route: (app)/search/page.tsx
  • Renders: Full-featured search page with Meilisearch integration. Type filters (contacts, messages, documents, events, marketplace, rules), result cards, search suggestions, saved searches, search alerts.
  • API: Hub search endpoint with faceted filtering.
  • Actions: Search with filters, save search, create search alert, bookmark results.

/documents

  • Route: (app)/documents/page.tsx
  • Renders: Document list with client-side filtering, per-document "Analyze" button, "Analyze All" batch action.
  • API: hubFetch('/api/search?q=&types=documents'), hubFetch('/api/documents/:id/analyze', POST).

/documents/[id]

  • Route: (app)/documents/[id]/page.tsx
  • Renders: Document detail with AI summary, key points, extracted entities (person/date/money), classification badge, processing jobs status, collapsible chunk viewer.
  • API: hubFetch('/api/documents/:id/summary'), /api/documents/:id/jobs, /api/documents/:id/chunks, /api/documents/:id/analyze (POST).

/wiki

  • Route: (app)/wiki/page.tsx
  • Renders: 2-panel wiki: page list sidebar with search/type filters, main content area with page viewer and cross-link navigation ([[slug]] syntax). Ask bar for querying the wiki. Ingest modal. Lint report.
  • API: ${HUB_URL}/api/wiki/pages, /api/wiki/pages/:slug, /api/wiki/ingest (POST), /api/wiki/query (POST), /api/wiki/lint (POST).
  • Actions: Browse pages, filter by type, search, view page, navigate cross-links, ask question, ingest content, lint wiki.

/graph

  • Route: (app)/graph/page.tsx
  • Renders: Knowledge graph visualization using ReactFlow. Entity nodes with type-based coloring, relationship edges, mini-map, controls, search.
  • API: Hub graph data endpoint.
  • Components: GraphNode (custom ReactFlow node).

/video

  • Route: (app)/video/page.tsx
  • Renders: Meeting management page. Meeting list with status badges (scheduled/active/ended), create meeting dialog, join button.
  • API: hubFetch('/api/meetings') (GET + POST).
  • Components: VideoRoom.

/video/meeting/[id]

  • Renders: Active video meeting room.

/plugins

  • Route: (app)/plugins/page.tsx
  • Renders: Plugin marketplace with 3 tabs: Browse (grid with search/type filter), Installed (list with enable toggle), Capabilities (grouped capability badges).
  • API: hubGet('/api/plugins/me'), /api/plugins, /api/capabilities, plus install/uninstall/enable/disable/rate endpoints.
  • Components: PluginCard.
  • Actions: Search, filter by type, install/uninstall, enable/disable, rate.

/settings

  • Route: (app)/settings/page.tsx
  • Renders: 4-tab settings page: Credentials (wallet with connect/disconnect cards), Notifications (toggle preferences), Privacy (location/analytics/crash/export toggles), Account (plan info, sign out, danger zone).
  • API: hubFetch('/api/credentials') (GET + POST + DELETE).
  • Components: CredentialCard.
  • Actions: Connect/disconnect integrations, toggle notification preferences, toggle privacy settings, sign out.

/settings/twilio

  • Route: (app)/settings/twilio/page.tsx
  • Renders: Twilio-specific settings: account info (name, status, balance), phone number list with webhook configuration.
  • API: ${HUB_URL}/api/twilio/phone-numbers, /api/twilio/account, /api/twilio/account/balance, /api/twilio/phone-numbers/:sid/webhooks (PUT).
  • Actions: View account, configure webhooks per number.

/settings/appearance

  • Route: (app)/settings/appearance/page.tsx
  • Renders: Appearance settings: color scheme (light/dark/system), contrast mode, text size, reduced motion toggle. Language and region (locale, timezone, date/time format, currency) with live preview. Notification channels (email/push/in-app) and digest frequency.
  • API: PUT /api/preferences, POST /api/preferences/reset.
  • Actions: Change theme, save/reset preferences.

/settings/data

  • Route: (app)/settings/data/page.tsx
  • Renders: Data portability page with Export (format selection, entity type toggles, past exports with download) and Import (file upload with format detection, preview, past imports with status) tabs.
  • API: hubFetch('/api/export') (GET + POST), /api/export/:id, /api/import (GET + POST), /api/import/:id.

/settings/data-quality

  • Route: (app)/settings/data-quality/page.tsx
  • Renders: 3-tab data quality page: Merge Candidates (duplicate detection with merge/reject), Conflict Rules (field-level resolution strategy table), Lineage Viewer (entity provenance lookup with field-source-confidence table).
  • API: /api/merge/candidates, /api/merge/detect (POST), /api/merge/candidates/:id/merge (POST), /api/merge/candidates/:id/reject (POST), /api/conflict-rules (GET + POST), /api/lineage/:type/:id.

/settings/org

  • Route: (app)/settings/org/page.tsx
  • Renders: Organization management: org overview card, members table (role change, remove), invite form with pending invites, usage bars (API calls, storage, AI requests, team members, connectors), plan upgrade CTA.
  • Data: Demo/mock data (not yet connected to hub API).

/audit

  • Route: (app)/audit/page.tsx
  • Renders: Audit dashboard: summary cards (total events, types, top action, alerts), suspicious patterns alert box, daily activity bar chart, events-by-type breakdown, audit log table, compliance reports section (generate GDPR/access/erasure/export/consent/retention reports), alert rules section (create/delete threshold-based rules).
  • API: /api/audit/summary?days=7, /api/audit?limit=50, /api/audit/reports (GET + POST), /api/audit/alert-rules (GET + POST + DELETE).

/privacy

  • Route: (app)/privacy/page.tsx
  • Renders: Privacy center: consent management (6 consent purposes with toggle switches), retention policies (create/run/delete), recent PII scans list, data controls (export all data as JSON, erase all data with confirmation dialog).
  • API: /api/privacy/consents (GET + POST + DELETE), /api/privacy/retention (GET + POST + DELETE), /api/privacy/retention/:id/run (POST), /api/privacy/dashboard, /api/privacy/export, /api/privacy/data (DELETE).

/billing

  • Renders: Billing management page.

/status

  • Renders: System status page.

/notifications

  • Renders: Notification center.

/onboarding

  • Renders: User onboarding flow.

/developer

  • Renders: Developer tools/API keys page.

/tools

  • Renders: AI tools page.

/federation

  • Renders: Federation page (ActivityPub, DID, verifiable credentials).
  • Components: ActivityFeedItem, ActorCard, FollowInput, NoteComposer.

/governance

  • Renders: Governance overview (DAOs, proposals).

/governance/daos/new

  • Renders: Create new DAO form.

/governance/daos/[id]

  • Renders: DAO detail page.

/governance/daos/[id]/proposals/new

  • Renders: Create new proposal form.

/governance/proposals/[id]

  • Renders: Proposal detail with voting.

/marketplace

  • Renders: Data marketplace listing page.
  • Components: ListingCard, ListingTypeIcon.

/marketplace/[id]

  • Renders: Marketplace listing detail.

/marketplace/new

  • Renders: Create new marketplace listing.

/reputation

  • Renders: Reputation dashboard.
  • Components: ScoreCard, TrustEntry.

/coordination

  • Renders: Resource coordination page.
  • Components: DeclarationCard, ExchangeTimeline.

/coordination/new

  • Renders: New coordination declaration form.

/timebank

  • Renders: Time banking page.

/disputes

  • Renders: Dispute resolution page.

/workflows

  • Renders: Workflow list page.
  • Components: WorkflowStepEditor.

/workflows/new

  • Renders: Create new workflow.

/inventory

  • Renders: Inventory dashboard.
  • Components: InventoryCard, StatusBadge, ValueSummary.

/inventory/items

  • Renders: Inventory item list.

/inventory/items/[id]

  • Renders: Item detail page.

/inventory/items/new

  • Renders: Create new item form.

/inventory/import

  • Renders: Inventory import wizard.

/inventory/maintenance

  • Renders: Maintenance schedule page.
  • Components: MaintenanceTimeline, DispositionWizard.

/inventory/spaces

  • Renders: Spaces/locations management.
  • Components: ItemHierarchy.

/admin

  • Renders: Admin overview dashboard.

/admin/analytics

  • Renders: Platform analytics dashboard.

/admin/email

  • Renders: Admin email management.

/admin/errors

  • Renders: Error tracking dashboard.

/admin/flags

  • Renders: Feature flags management.

/admin/infrastructure

  • Renders: Infrastructure monitoring.

Life Architecture Pages

The authenticated shell also contains the full "Life" tier of pages under (app)/. These are documented at a high level here; see the ground-truth manifest for the exact route list (162 page.tsx files total):

  • Overview: /life, /life/timeline
  • Health: /health, /health/metrics, /health/sleep, /health/symptoms
  • Fitness: /fitness, /fitness/new, /fitness/[id], /fitness/stats
  • Nutrition: /nutrition, /nutrition/new, /nutrition/[id], /nutrition/daily/[date], /nutrition/preferences
  • Finance: /finance, /finance/accounts, /finance/budgets, /finance/budgets/[id], /finance/new-transaction, /finance/subscriptions, /finance/transactions
  • Habits / Intentions / Projects: /habits, /habits/new, /habits/[id], /intentions, /intentions/new, /intentions/[id], /projects, /projects/new, /projects/[id]
  • Journal / Knowledge / Media / Learning: /journal, /journal/new, /journal/[id], /knowledge, /knowledge/new, /knowledge/[id], /media, /media/new, /media/[id], /learning, /learning/new-session, /learning/[id], /learning/[id]/sessions, /learning/certifications
  • Home / Environment / Capture: /home, /home/bills, /home/energy, /home/readings, /environment, /environment/history, /capture, /capture/activity, /capture/screens, /capture/rules, /capture/rules/new
  • Collections / Relationships / Dependents / Tasks: /collections, /collections/new, /collections/types, /collections/[id], /collections/[id]/items/new, /relationships, /relationships/new, /relationships/[id], /dependents, /dependents/new, /dependents/[id], /tasks

Each life-domain page is backed by a matching hook in apps/web/src/hooks/ (e.g. useHealth, useFitness, useNutrition, useFinance, useHabits, useIntentions, useJournal, useKnowledge, useMedia, useLearning, useHome, useEnvironment, useCapture, useCollections, useDependents).

Other App Routes

  • /video/join/[roomName] — Public-ish direct video-room join link (lives at app/video/join/[roomName]/page.tsx, outside the (app) group).

Components

Layout

ComponentFilePurpose
Sidebarlayout/Sidebar.tsxMain navigation sidebar with route links, inbox unread badge, user menu.
Headerlayout/Header.tsxTop bar with user email, global actions.
Providerslayout/Providers.tsxWraps children with theme, i18n, toast, and Supabase providers.

Inbox (components/inbox/)

ComponentPurpose
InboxFiltersFilter chip row (All/Calls/SMS/Email/Video/Voicemail) + search input.
InboxListScrollable list of inbox items. Renders InboxItemRow for each item.
InboxItemRowSingle inbox item row: avatar, sender, preview, time, type badge, unread dot.
InboxPreviewPreview pane for selected item: full message body, mark read/star/archive/open-full actions.
QuickActionsRight panel with quick action buttons: dial pad, SMS compose, email compose.
ContactAvatarAvatar component with fallback initials.
UnreadBadgeSmall numeric badge for unread counts.

Email (components/email/)

ComponentPurpose
FolderTreeFolder sidebar: inbox/sent/drafts/trash tree, sync button, compose button.
ThreadListThread list panel with search input, thread rows showing subject/sender/date/snippet.
ReadingPaneMessage viewer showing full thread with individual messages. ReplyBar sub-component provides reply/reply-all/forward buttons.
ComposeEmailModal dialog for composing/replying/forwarding. Fields: to, cc, subject, body. Supports compose, reply, replyAll, forward modes.

Calls (components/calls/)

ComponentPurpose
DialerNumeric dial pad with call button.
ActiveCallIn-call UI showing number, duration timer, mute/hang-up controls.
CallerContextPopupPopup showing contact info for incoming caller.
LineSelectorPhone line selection dropdown.
TranscriptPanelLive call transcription display.
VoicemailPlayerAudio player for voicemail playback with transcription.

Contacts (components/contacts/)

ComponentPurpose
ContactListGrid of ContactCard components.
ContactCardCard showing contact name, primary phone/email, avatar. Click navigates to detail.
ContactSearchSearch input that updates URL query params.
ContactDetailTabsTabbed detail view: timeline, conversations, notes.
ContactMergeUI for merging duplicate contacts.

AI (components/ai/)

ComponentPurpose
ChatMessageSingle chat bubble (user or assistant). Shows role, content, model badge, citation links, timestamp.
ChatInputMulti-line text input with Ctrl+Enter send. Placeholder text and disabled state.
ConversationListSidebar list of past AI conversations with "New" button.

Rules (components/rules/)

ComponentPurpose
RuleBuilderForm-based rule builder: name, trigger event type, conditions (add/remove), actions (add/remove), save/update.
ConditionPickerRow for a single condition: field, operator, value dropdowns.
ActionPickerRow for a single action: type dropdown, params (to, body, URL).

Marketing (components/marketing/)

ComponentPurpose
HeroLanding page hero section: headline, subheadline, primary + secondary CTAs.
FeatureGridResponsive grid of FeatureCard components with title and subtitle.
FeatureCardIndividual feature card: icon, title, description, link.
HowItWorks3-step explanation section (add credentials, capabilities appear, rules automate).
CTASectionCall-to-action section with title, subtitle, buttons, footnote.

Help (components/help/)

ComponentPurpose
HelpLayoutHelp center page layout with breadcrumbs.
HelpSearchSearch bar for help articles.
HelpCategoryCardCategory card with icon, title, article count.
HelpArticleArticle renderer with navigation.

Public (components/public/)

ComponentPurpose
PublicNavbarTop navigation for public pages: logo, nav links, login/signup buttons.
PublicFooterFooter with link columns and copyright.

Docs (components/docs/)

ComponentPurpose
DocSidebarHierarchical doc navigation sidebar.
DocBreadcrumbBreadcrumb trail for current doc page.
DocPaginationPrevious/next navigation between doc pages.
DocSearchSearch within documentation.
DocTableOfContentsRight-side table of contents for current page.

Dashboard (components/dashboard/)

ComponentPurpose
CommsWidgetsCommunication-specific dashboard widgets.

Other Key Components

ComponentFilePurpose
ActivityFeedActivityFeed.tsxSSE-powered real-time event feed for the dashboard.
CommandPaletteCommandPalette.tsxGlobal Cmd/Ctrl+K command palette for quick navigation.
PluginCardPluginCard.tsxPlugin card with install/uninstall/enable/rate actions.
PresenceIndicatorPresenceIndicator.tsxOnline/away/offline status dot.
CollaboratorAvatarsCollaboratorAvatars.tsxStacked avatar row for collaboration participants.
OfflineIndicatorOfflineIndicator.tsxBanner shown when browser is offline.
PwaInstallBannerPwaInstallBanner.tsxPWA install prompt banner.
ErrorBoundaryErrorBoundary.tsxReact error boundary with fallback UI.
EmptyStateEmptyState.tsxReusable empty-state placeholder.
SmsComposemessaging/SmsCompose.tsxSMS compose form (to number + message body).
CapabilityBadgecapabilities/CapabilityBadge.tsxBadge showing a capability name with active/inactive styling.
CredentialCardcredentials/CredentialCard.tsxCredential card with connect/disconnect form.
RuleCollaborationBarcollaboration/RuleCollaborationBar.tsxCollaboration indicator bar for rule editing.
VideoRoomvideo/VideoRoom.tsxVideo meeting room component.
WorkflowStepEditorworkflows/WorkflowStepEditor.tsxStep editor for workflow builder.
ListingCardmarketplace/ListingCard.tsxMarketplace listing card.
ScoreCardreputation/ScoreCard.tsxReputation score display card.
InventoryCardinventory/InventoryCard.tsxInventory item card.
DeclarationCardcoordination/DeclarationCard.tsxResource coordination declaration card.

UI Primitives (components/ui/)

shadcn/ui components: badge, button, card, dialog, dropdown-menu, input, label, scroll-area, select, separator, skeleton, switch, tabs, textarea, toast, toaster.

Hooks

useInbox(filters?: InboxFilters)

File: hooks/useInbox.ts

Fetches inbox items from hubFetch('/api/inbox') with query parameters built from filters. Subscribes to inbox_items table via useRealtimeTable for live inserts.

Returns: { items, total, hasMore, loading, error, unreadCounts, markRead, toggleStarred, archive, refresh }

  • markRead(itemIds: string[]) -- PUT /api/inbox/read
  • toggleStarred(itemIds: string[], starred: boolean) -- PUT /api/inbox/starred
  • archive(itemIds: string[]) -- PUT /api/inbox/archive

useInboxUnreadCount(): number

File: hooks/useInboxUnreadCount.ts

Lightweight hook that only fetches total unread count from /api/inbox/unread-count. Subscribes to inbox_items table to re-fetch on new items. Used by the Sidebar for the badge.

useMessages(conversationId: string)

File: hooks/useMessages.ts

Loads messages for a conversation from hubFetch('/conversations/:id/messages') and subscribes to real-time inserts on the messages table filtered by conversation_id.

Returns: { messages: Message[], loading, error }

useRealtimeTable<T>(options)

File: hooks/useRealtimeTable.ts

Core Supabase Realtime subscription hook. Subscribes to INSERT/UPDATE/DELETE postgres changes for a given table. Auto-removes channel on unmount.

Params: { table, filter?, onInsert?, onUpdate?, onDelete? }

useRules()

File: hooks/useRules.ts

Loads rules from hubFetch('/rules') and subscribes to real-time INSERT/UPDATE/DELETE on the rules table.

Returns: { rules: Rule[], loading, error }

useCapabilities()

File: hooks/useCapabilities.ts

Fetches and caches the Twilio capability manifest from ${HUB_URL}/api/capabilities. Caches in localStorage for 5 minutes. Re-fetches when X-Manifest-Version header changes.

Returns: { manifest, loading, error, refresh }

useManifestVersionCheck()

File: hooks/useCapabilities.ts (same file)

Checks X-Manifest-Version header on API responses and clears cache if version changed.

Returns: { checkVersion(headers: Headers): boolean }

usePresence(userId, token?)

File: hooks/usePresence.ts

Manages user presence status. Posts to /api/presence on mount (online), sends heartbeat every 30s to /api/presence/heartbeat, tracks page visibility (away on blur, online on focus), posts offline on unmount.

Returns: { status, setStatus, setActivity }

useCollaborationSession(sessionId, token?)

File: hooks/useCollaborationSession.ts

Joins a collaboration session on mount, subscribes to cursor changes via Supabase Realtime (collaboration_cursors table), and leaves on unmount.

Returns: { session, cursors, participants, updateCursor }

  • updateCursor(position, selection?, label?) -- PUT /api/collaboration/sessions/:id/cursor

useAnalytics()

File: hooks/useAnalytics.ts

Client-side analytics hook. Batches events in a 1-second debounce window and sends fire-and-forget POST to /api/analytics/track. Never throws.

Returns: { track(eventType, properties?) }

useOfflineAI()

File: hooks/useOfflineAI.ts

Wraps AI queries with offline support. When offline, queues operations in IndexedDB via OfflineQueue. Auto-flushes when back online. Listens for service worker messages about completed queries.

Returns: { query(text): Promise<{content, offline}>, queuedCount, isOnline, flushQueue }

usePwa()

File: hooks/usePwa.ts

PWA lifecycle hook. Registers service worker, tracks install availability and online status, captures the beforeinstallprompt event, exposes install trigger.

Returns: { isInstalled, canInstall, install, isOffline }

useManifestForm(params: OperationParam[])

File: hooks/useManifestForm.ts

Dynamic form state management for plugin operation parameters. Initializes from defaults, loads dynamic options from hub API source endpoints, validates required fields and patterns, supports visibleWhen conditional fields.

Returns: { values, setValue, errors, validate, isValid, dynamicOptions, visibleParams, reset }

Previous
Projects Overview
Next
Web — Web Client