Shared Library Deep Dive
The @matih/shared library at frontend/shared/src/ provides the complete foundation for all MATIH workbench applications. This section provides detailed documentation of each subsystem: API clients, hooks, stores, authentication, real-time infrastructure, error handling, code editors, loading states, and collaboration components.
Subsystem Map
| Subsystem | Files | Purpose |
|---|---|---|
| API Clients | 16 modules in api/ | Backend service integration |
| Custom Hooks | 28+ hooks in hooks/ | React hook abstractions for services, resilience, accessibility |
| Zustand Stores | 3 stores in stores/ | Cross-workbench state, preferences |
| Auth Components | 8 components in components/Auth/ | Login, guards, sessions, permissions |
| Real-Time | 7 modules in realtime/ | WebSocket, SSE, presence, notifications |
| Error Handling | 4 components in components/ErrorBoundary/ | Error boundaries, recovery, reporting |
| Code Editors | components/MonacoEditor/, components/CodeEditor/ | SQL editor, generic code editor |
| Loading & Skeleton | 4 components in components/Loading/ | Spinner, skeleton, overlay, dots |
| Collaboration | 3 components in components/Collaboration/ | Presence, comments, sharing |
Component Directory Overview
The shared/src/components/ directory contains 33 subdirectories organizing 102 components:
components/
Accessibility/ # VisuallyHidden
Analytics/ # PlatformAnalytics
Assistant/ # AssistantChat, InlineSuggestions
Audit/ # AuditLogViewer
Auth/ # AuthGuard, LoginForm, ProtectedRoute, ...
Billing/ # BillingDashboard
CodeEditor/ # Generic code editor wrapper
Collaboration/ # PresenceIndicator, CommentsPanel, ShareDialog
Cost/ # CostDisplay
EmptyState/ # EmptyState placeholder
ErrorBoundary/ # ErrorBoundary, WidgetErrorBoundary, withErrorBoundary
Export/ # ExportDialog
FileExplorer/ # File tree component
FormElements/ # FormFields, FormLayout, useForm
IDELayout/ # IDE-style panel layout
Lineage/ # LineageGraph, LineageNode, LineageEdge
Loading/ # LoadingSpinner, Skeleton, LoadingOverlay, LoadingDots
Media/ # OptimizedImage
MonacoEditor/ # SqlEditor
Navigation/ # Sidebar, TopNavigation, GlobalSearch, UserMenu, ...
Offline/ # OfflineIndicator, UpdatePrompt
Portal/ # WelcomeHeader, QuickActions, DashboardsGallery, ...
Query/ # QueryProgressIndicator
Settings/ # AccessibilitySettings, AppearanceSettings, KeyboardShortcuts
SLA/ # SLABadge
StatusPanel/ # StatusBar, SLAPanel, AgentStatus, ClusterStatus, ...
SupportChat/ # SupportChatWidget, ChatMessage
Telemetry/ # SystemHealthPanel, UsageMetrics
Terminal/ # Terminal emulator component
Toast/ # Toast, ToastProvider
VirtualList/ # VirtualList for large datasets
WorkbenchSwitcher/ # Workbench navigation switcher