PRD-38.0: Widget Architecture Master Plan

Version: 1.0 Status: 🟡 Design Phase Priority: HIGH - Platform Evolution Author: Automatos AI Platform Team Last Updated: 2026-01-27 Dependencies: PRD-31 (Chatbot UX), PRD-32 (Widget Integration System)

---

Executive Summary

This master document defines a unified widget architecture for Automatos AI that serves dual purposes:

1. Internal: Power the Chatbot Workspace with a canvas-based artifact system

2. External: Enable embeddable widgets for customer websites and applications

The architecture follows a "Build Once, Deploy Everywhere" philosophy where the same widget components work inside the Automatos workspace AND can be packaged for external embedding via script tags or npm packages.

The Vision: "Widgets as Universal Interface"

Today: Chatbot shows results in modal overlays, one at a time Tomorrow: Canvas workspace with persistent, arrangeable widgets Future: Same widgets embedded on customer sites, connected to their Automatos workspaces

Current State → Target State

Aspect	Current	Phase 1	Phase 4+
Artifact Display	Modal overlay	Canvas workspace	Canvas + External embed
Artifact Types	4 (code, text, sheet, image)	10 types	12+ types
Layout	Single artifact	Multi-artifact grid	Drag-drop + embeddable
Persistence	Session only	Workspace saved	Cross-platform sync
External Use	None	None	Script tag + SDK

---

Phase Overview

┌─────────────────────────────────────────────────────────────────────────────┐
│                        WIDGET ARCHITECTURE PHASES                           │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  PHASE 1: Widget-Ready Workspace (PRD-38.1)                                │
│  ─────────────────────────────────────────                                  │
│  • Widget base architecture & registry                                      │
│  • Canvas component with grid layout                                        │
│  • Migrate 4 existing artifacts to widgets                                  │
│  • Widget tray & state management                                           │
│  Timeline: Weeks 1-3                                                        │
│                                                                             │
│  PHASE 2: Extended Widgets (PRD-38.2)                                      │
│  ─────────────────────────────────────                                      │
│  • EmailWidget (Composio Gmail/Outlook)                                     │
│  • TerminalWidget (Shell tools)                                             │
│  • WorkflowWidget (Orchestrator)                                            │
│  • MemoryWidget (Memory system)                                             │
│  • FileWidget (File operations)                                             │
│  Timeline: Weeks 4-5                                                        │
│                                                                             │
│  PHASE 3: Dashboard Builder (PRD-38.3)                                     │
│  ────────────────────────────────────                                       │
│  • Save/load workspace layouts                                              │
│  • Widget templates & presets                                               │
│  • Workspace sharing                                                        │
│  • Custom widget sizing                                                     │
│  Timeline: Weeks 6-7                                                        │
│                                                                             │
│  PHASE 4: SDK Foundation (PRD-38.4)                                        │
│  ─────────────────────────────────                                          │
│  • Separate widgets repo                                                    │
│  • @automatos-ai/widgets npm package                                        │
│  • Script tag embed loader                                                  │
│  • API client for external use                                              │
│  Timeline: Weeks 8-10                                                       │
│                                                                             │
│  PHASE 5: Widget Marketplace (PRD-38.5)                                    │
│  ─────────────────────────────────────                                      │
│  • Custom widget builder                                                    │
│  • Widget marketplace                                                       │
│  • Revenue sharing                                                          │
│  • White-label options                                                      │
│  Timeline: Weeks 11-14                                                      │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

---

Core Architecture

Widget Component Model

All widgets share a common interface and lifecycle, enabling consistent behavior across internal and external use.

// packages/widget-core/types.ts

/**
 * Base props that ALL widgets receive
 */
interface WidgetBaseProps<TData = unknown> {
  // Identity
  id: string
  type: WidgetType

  // Content
  title: string
  data: TData

  // Metadata
  metadata: WidgetMetadata

  // State
  isActive?: boolean
  isLoading?: boolean
  error?: WidgetError | null

  // Layout (for canvas mode)
  position?: WidgetPosition
  size?: WidgetSize

  // Actions
  onClose?: () => void
  onMaximize?: () => void
  onMinimize?: () => void
  onRefresh?: () => void
  onAction?: (action: WidgetAction) => void
}

/**
 * Widget metadata tracks origin and context
 */
interface WidgetMetadata {
  source: WidgetSource
  createdAt: Date
  updatedAt?: Date
  conversationId?: string
  toolCallId?: string
  workspaceId?: string

  // For external widgets
  tenantId?: string
  apiKey?: string
}

/**
 * Source information for the widget
 */
interface WidgetSource {
  type: 'tool' | 'user' | 'system' | 'workflow'
  name: string           // Tool name or action that created it
  provider?: string      // e.g., 'rag', 'nl2sql', 'composio'
}

/**
 * All supported widget types
 */
type WidgetType =
  // Phase 1 (migrate existing)
  | 'code'        // Code viewer/editor
  | 'data'        // Tables, charts (NL2SQL)
  | 'document'    // RAG results, markdown
  | 'image'       // Generated/uploaded images

  // Phase 2 (new widgets)
  | 'email'       // Email viewer/composer
  | 'terminal'    // Command output
  | 'workflow'    // Workflow status/control
  | 'memory'      // Memory inspector
  | 'file'        // File preview/download

  // Phase 3+ (specialized)
  | 'chart'       // Standalone charts
  | 'form'        // Input forms
  | 'chat'        // Embedded chat (for SDK)

Widget Registry

// packages/widget-core/registry.ts

interface WidgetDefinition<TData = unknown> {
  type: WidgetType

  // Display
  displayName: string
  description: string
  icon: string | React.ComponentType

  // Component
  component: React.ComponentType<WidgetBaseProps<TData>>

  // Capabilities
  capabilities: WidgetCapability[]

  // Data validation
  validateData?: (data: unknown) => data is TData

  // Default sizing
  defaultSize: WidgetSize
  minSize?: WidgetSize
  maxSize?: WidgetSize

  // Actions available
  actions: WidgetActionDefinition[]
}

type WidgetCapability =
  | 'editable'      // Content can be edited
  | 'exportable'    // Can export (CSV, PDF, etc.)
  | 'refreshable'   // Can refresh data
  | 'resizable'     // Can be resized
  | 'fullscreen'    // Can go fullscreen
  | 'copyable'      // Content can be copied
  | 'downloadable'  // Content can be downloaded
  | 'shareable'     // Can be shared

interface WidgetActionDefinition {
  id: string
  label: string
  icon?: string
  shortcut?: string
  handler: string  // Action type to dispatch
  requiresConfirm?: boolean
}

Tool-to-Widget Mapping

The system automatically routes tool results to appropriate widgets:

// packages/widget-core/router.ts

const TOOL_WIDGET_MAP: Record<string, WidgetType> = {
  // RAG Tools → Document Widget
  'search_knowledge': 'document',
  'semantic_search': 'document',
  'search_documents': 'document',

  // NL2SQL Tools → Data Widget
  'smart_query_database': 'data',
  'query_database': 'data',
  'execute_sql': 'data',

  // CodeGraph Tools → Code Widget
  'search_codebase': 'code',
  'get_code_context': 'code',
  'analyze_code': 'code',

  // Image Tools → Image Widget
  'generate_image': 'image',
  'edit_image': 'image',
  'analyze_image': 'image',

  // Email Tools → Email Widget
  'GMAIL_SEND_EMAIL': 'email',
  'GMAIL_LIST_EMAILS': 'email',
  'OUTLOOK_SEND_EMAIL': 'email',

  // Shell Tools → Terminal Widget
  'execute_command': 'terminal',
  'run_script': 'terminal',

  // Workflow Tools → Workflow Widget
  'run_workflow': 'workflow',
  'get_workflow_status': 'workflow',

  // File Tools → File Widget
  'read_file': 'file',
  'write_file': 'file',
  'list_files': 'file',
}

function routeToolResultToWidget(
  toolName: string,
  result: ToolResult
): WidgetType | null {
  // Explicit mapping
  if (TOOL_WIDGET_MAP[toolName]) {
    return TOOL_WIDGET_MAP[toolName]
  }

  // Infer from result structure
  if (result.database_results) return 'data'
  if (result.documents) return 'document'
  if (result.code_snippets) return 'code'
  if (result.images) return 'image'

  // No silent default - warn and return null for explicit handling
  console.warn(
    `[Widget Router] Unknown tool result format. Tool: "${toolName}", ` +
    `Result keys: ${Object.keys(result).join(', ')}. ` +
    `Add mapping to TOOL_WIDGET_MAP or update inference logic.`
  )
  return null
}

// Caller must handle null return
function handleToolResult(toolName: string, result: ToolResult) {
  const widgetType = routeToolResultToWidget(toolName, result)

  if (widgetType === null) {
    // Option 1: Show user-facing message
    showToast({
      type: 'info',
      message: `Tool "${toolName}" completed but no widget available to display results.`
    })

    // Option 2: Log for debugging and continue
    logger.info('Tool result not rendered as widget', { toolName, resultKeys: Object.keys(result) })
    return
  }

  // Create widget with valid type
  workspaceStore.addWidget(transformToolResultToWidget(widgetType, toolName, result))
}

---

State Management

Workspace Store (Zustand)

// frontend/stores/workspace-store.ts

interface WorkspaceState {
  // Widgets
  widgets: Map<string, Widget>
  activeWidgetId: string | null
  widgetOrder: string[]  // Z-index order

  // Layout
  layout: WorkspaceLayout
  layoutMode: 'grid' | 'freeform' | 'split' | 'focus'

  // Chat Integration
  chatPanelWidth: number
  isChatCollapsed: boolean
  widgetsInContext: string[]  // Widget IDs mentioned in chat

  // Persistence
  workspaceId: string | null
  isDirty: boolean
  lastSaved: Date | null
}

interface WorkspaceActions {
  // Widget CRUD
  addWidget: (widget: Omit<Widget, 'id'>) => string
  updateWidget: (id: string, updates: Partial<Widget>) => void
  removeWidget: (id: string) => void

  // Selection
  setActiveWidget: (id: string | null) => void
  bringToFront: (id: string) => void

  // Layout
  setLayout: (layout: WorkspaceLayout) => void
  setLayoutMode: (mode: LayoutMode) => void
  updateWidgetPosition: (id: string, position: WidgetPosition) => void
  updateWidgetSize: (id: string, size: WidgetSize) => void

  // Chat Integration
  toggleChatPanel: () => void
  setChatPanelWidth: (width: number) => void
  addToContext: (widgetId: string) => void
  removeFromContext: (widgetId: string) => void

  // Persistence
  saveWorkspace: () => Promise<void>
  loadWorkspace: (id: string) => Promise<void>

  // Tool Integration
  handleToolResult: (toolName: string, result: ToolResult) => void
}

type WorkspaceStore = WorkspaceState & WorkspaceActions

---

File Structure

Phase 1-3: Internal Widgets (in main repo)

automatos-ai/
├── frontend/
│   ├── components/
│   │   ├── chatbot/           # Existing chat components
│   │   │   ├── chat.tsx       # MODIFY: Integrate canvas
│   │   │   ├── message.tsx    # MODIFY: Emit to canvas
│   │   │   └── ...
│   │   │
│   │   ├── workspace/         # NEW: Workspace system
│   │   │   ├── Canvas.tsx              # Main canvas component
│   │   │   ├── CanvasGrid.tsx          # Grid layout
│   │   │   ├── CanvasFreeform.tsx      # Freeform layout
│   │   │   ├── WidgetTray.tsx          # Bottom artifact tray
│   │   │   ├── WidgetWrapper.tsx       # Common widget chrome
│   │   │   └── ContextPanel.tsx        # Right sidebar inspector
│   │   │
│   │   └── widgets/           # NEW: Widget components
│   │       ├── index.ts               # Widget registry
│   │       ├── types.ts               # Shared types
│   │       ├── WidgetBase.tsx         # Base component
│   │       │
│   │       ├── CodeWidget/
│   │       │   ├── index.tsx          # Main component
│   │       │   ├── CodeEditor.tsx     # Monaco integration
│   │       │   └── CodeActions.tsx    # Copy, run, etc.
│   │       │
│   │       ├── DataWidget/
│   │       │   ├── index.tsx
│   │       │   ├── DataTable.tsx      # AG Grid / custom table
│   │       │   ├── DataChart.tsx      # Recharts / Tremor
│   │       │   └── DataExport.tsx     # CSV, Excel export
│   │       │
│   │       ├── DocumentWidget/
│   │       │   ├── index.tsx
│   │       │   ├── DocumentViewer.tsx # Markdown renderer
│   │       │   ├── ChunkInspector.tsx # RAG chunk viewer
│   │       │   └── CitationLinks.tsx  # Source citations
│   │       │
│   │       ├── ImageWidget/
│   │       │   ├── index.tsx
│   │       │   ├── ImageViewer.tsx    # Pan/zoom
│   │       │   └── ImageGallery.tsx   # Multiple images
│   │       │
│   │       ├── EmailWidget/           # Phase 2
│   │       │   ├── index.tsx
│   │       │   ├── EmailList.tsx
│   │       │   ├── EmailViewer.tsx
│   │       │   └── EmailComposer.tsx
│   │       │
│   │       ├── TerminalWidget/        # Phase 2
│   │       │   ├── index.tsx
│   │       │   └── TerminalOutput.tsx
│   │       │
│   │       ├── WorkflowWidget/        # Phase 2
│   │       │   ├── index.tsx
│   │       │   ├── WorkflowStatus.tsx
│   │       │   └── WorkflowSteps.tsx
│   │       │
│   │       ├── MemoryWidget/          # Phase 2
│   │       │   ├── index.tsx
│   │       │   └── MemoryViewer.tsx
│   │       │
│   │       └── FileWidget/            # Phase 2
│   │           ├── index.tsx
│   │           ├── FilePreview.tsx
│   │           └── FileList.tsx
│   │
│   ├── stores/
│   │   └── workspace-store.ts  # NEW: Zustand store
│   │
│   └── lib/
│       └── widgets/
│           ├── registry.ts     # Widget registration
│           ├── router.ts       # Tool → Widget routing
│           └── transforms.ts   # Data transformations

Phase 4+: External SDK (separate repo)

automatos-widgets/              # NEW REPOSITORY
├── packages/
│   ├── core/                   # Shared logic
│   │   ├── src/
│   │   │   ├── types.ts
│   │   │   ├── api-client.ts
│   │   │   ├── auth.ts
│   │   │   └── events.ts
│   │   └── package.json
│   │
│   ├── react/                  # @automatos-ai/react
│   │   ├── src/
│   │   │   ├── index.ts
│   │   │   ├── AutomatosProvider.tsx
│   │   │   ├── ChatWidget.tsx
│   │   │   ├── DataWidget.tsx
│   │   │   └── ...
│   │   └── package.json
│   │
│   ├── vanilla/                # Script tag version
│   │   ├── src/
│   │   │   ├── loader.ts      # CDN loader
│   │   │   ├── embed.ts       # Embedding logic
│   │   │   └── widgets/
│   │   └── package.json
│   │
│   └── web-components/         # Framework-agnostic
│       ├── src/
│       └── package.json
│
├── apps/
│   ├── docs/                   # Documentation site
│   └── playground/             # Widget playground
│
├── examples/
│   ├── nextjs/
│   ├── create-react-app/
│   ├── wordpress/
│   └── shopify/
│
└── turbo.json

---

Dependencies & Libraries

Recommended Libraries by Phase

Phase	Library	Purpose	License
1	react-grid-layout	Draggable grid	MIT
1	@dnd-kit/core	Modern drag-drop	MIT
1	zustand	State management	MIT
1	@monaco-editor/react	Code editing	MIT
1	recharts	Charts	MIT
2	@tanstack/react-table	Advanced tables	MIT
2	react-resizable-panels	Panel resizing	MIT
3	html2canvas	Screenshot export	MIT
4	vite	Widget bundling	MIT
4	rollup	Library bundling	MIT

Already in Stack (Reuse)

Library	Current Use	Widget Use
shadcn/ui	UI components	Widget chrome
framer-motion	Animations	Widget transitions
react-markdown	Markdown render	Document widget
prismjs	Code highlight	Code widget
lucide-react	Icons	Widget icons
tailwindcss	Styling	All widgets

---

API Contracts

Widget Data Endpoint (Backend)

# orchestrator/api/widgets.py

@router.post("/api/widgets/{widget_id}/data")
async def get_widget_data(
    widget_id: str,
    request: WidgetDataRequest,
    workspace_id: str = Header(..., alias="X-Workspace-ID"),
    api_key: str = Header(None, alias="X-API-Key"),
):
    """
    Fetch data for a specific widget.

    For internal use: Uses session auth
    For external use: Uses API key + tenant isolation
    """
    pass

@router.post("/api/widgets/{widget_id}/action")
async def execute_widget_action(
    widget_id: str,
    action: WidgetActionRequest,
):
    """
    Execute an action on a widget (refresh, export, etc.)
    """
    pass

Streaming Events (Tool → Widget)

// Extended tool-data event for widget system
interface WidgetToolData {
  type: 'widget-data'
  version: 2
  data: {
    widgetType: WidgetType
    widgetId: string
    payload: WidgetPayload
    actions: WidgetAction[]
  }
}

// Widget-specific payloads
type WidgetPayload =
  | CodeWidgetPayload
  | DataWidgetPayload
  | DocumentWidgetPayload
  | ImageWidgetPayload
  | EmailWidgetPayload
  | TerminalWidgetPayload
  | WorkflowWidgetPayload
  | MemoryWidgetPayload
  | FileWidgetPayload

---

Success Metrics

Phase 1 Metrics

• Widget load time < 200ms

• Canvas renders 10+ widgets smoothly (60fps)

• Tool results appear in canvas < 500ms after completion

• Zero regressions in existing chat functionality

Phase 2 Metrics

• All 10 widget types functional

• Email widget handles 100+ emails without lag

• Terminal widget supports ANSI colors

Phase 3 Metrics

• Workspace save/load < 1s

• Layout exports to shareable JSON

• 5 preset templates available

Phase 4 Metrics

• npm package size < 100KB (gzipped per widget)

• Script tag loads in < 500ms

• Works in all modern browsers (Chrome, Firefox, Safari, Edge)

Phase 5 Metrics

• Custom widget builder functional

• Marketplace has 10+ community widgets

• Widget analytics dashboard live

---

Risk Mitigation

Risk	Impact	Mitigation
Performance degradation with many widgets	High	Virtualization, lazy loading, web workers
Breaking existing chat UX	High	Feature flags, A/B testing, gradual rollout
SDK bundle size too large	Medium	Tree-shaking, code splitting, lazy loading
External widget security	High	CSP headers, sandboxing, API key scoping
State sync complexity	High	Documented sync strategy, conflict resolution

Risk Mitigation Details

R1: Performance Degradation with Many Widgets

Trigger Threshold: >20 widgets in canvas, or >100 widgets in workspace store

Implementation Approach:

// Virtualization strategy
const VIRTUALIZATION_THRESHOLD = 20

// Use react-window for list virtualization when widget count exceeds threshold
import { FixedSizeList } from 'react-window'

function WidgetTray({ widgets }) {
  if (widgets.length > VIRTUALIZATION_THRESHOLD) {
    return (
      <FixedSizeList
        height={80}
        width="100%"
        itemCount={widgets.length}
        itemSize={160}
      >
        {({ index, style }) => (
          <WidgetThumbnail widget={widgets[index]} style={style} />
        )}
      </FixedSizeList>
    )
  }
  return <StandardWidgetList widgets={widgets} />
}

// Lazy-load widget bundles beyond initial visible widgets
const INITIAL_LOAD_COUNT = 6
const lazyWidgets = widgets.slice(INITIAL_LOAD_COUNT).map(w => ({
  ...w,
  component: lazy(() => import(`./widgets/${w.type}`))
}))

// Offload heavy processing to web workers
const chartWorker = new Worker('/workers/chart-processor.js')

function processChartData(data: ChartData): Promise<ProcessedChart> {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(() => {
      // Fallback to main-thread with throttling
      chartWorker.terminate()
      resolve(processChartDataSync(data, { throttle: true }))
    }, 5000)

    chartWorker.onmessage = (e) => {
      clearTimeout(timeout)
      resolve(e.data)
    }
    chartWorker.postMessage(data)
  })
}

Implemented In: PRD-38.1 Section 3.1 (Canvas Component), PRD-38.3 (Dashboard Builder)

R2: Breaking Existing Chat UX

Trigger Threshold: Any Phase 1 deployment

Implementation Approach:

• Feature flag ENABLE_CANVAS_WORKSPACE defaults to false

• A/B test with 10% of users before full rollout

• Gradual rollout: 10% → 25% → 50% → 100% over 2 weeks

• Rollback mechanism via feature flag toggle (< 5 minute recovery)

Implemented In: PRD-38.1 Section 9 (Rollout Plan)

R3: SDK Bundle Size Too Large

Trigger Threshold: Any widget bundle >50KB gzipped

Implementation Approach:

• Tree-shaking via ES modules and sideEffects: false

• Code splitting: each widget in separate chunk

• Lazy loading: Automatos.widgets.chat() loads chat chunk on demand

• Monitor with bundlesize CI check

Implemented In: PRD-38.4 Section 6 (CDN & Distribution)

R4: External Widget Security

Trigger Threshold: Any external widget (marketplace or embedded)

Implementation Approach:

// Content-Security-Policy for external widgets
const WIDGET_CSP = {
  'default-src': "'self'",
  'script-src': "'self' 'unsafe-inline'",  // Required for widget scripts
  'style-src': "'self' 'unsafe-inline'",
  'img-src': "'self' data: https:",
  'connect-src': "'self' https://api.automatos.app",
  'frame-ancestors': "'none'",  // Prevent clickjacking
}

// Sandbox attributes for widget iframes
const SANDBOX_ATTRS = [
  'allow-scripts',
  'allow-forms',
  // NEVER: allow-same-origin (prevents parent DOM access)
  // NEVER: allow-top-navigation
  // NEVER: allow-popups-to-escape-sandbox
]

// API key scoping rules
interface ApiKeyScope {
  permissions: ('chat' | 'documents:read' | 'data:query')[]
  allowedDomains: string[]       // CORS origin whitelist
  rateLimit: { rpm: number }     // Requests per minute
  maxTokensPerDay: number
  expiresAt?: Date
}

Implemented In: PRD-38.4 Section 5 (Security), PRD-38.5 Section 3.1 (Widget Sandbox)

R5: State Sync Complexity (Elevated to High)

Rationale for High Impact: State synchronization affects every widget interaction, workspace persistence, and real-time collaboration. Bugs here cause data loss and poor UX.

Trigger Threshold: Any multi-widget or persistence scenario

Implementation Approach:

// Sync Strategy: Optimistic Updates with Conflict Resolution

interface SyncState {
  localVersion: number
  serverVersion: number
  pendingChanges: Change[]
  conflictResolution: 'client-wins' | 'server-wins' | 'merge'
}

// 1. Optimistic Updates
function updateWidget(id: string, updates: Partial<Widget>) {
  const change: Change = {
    id: generateChangeId(),
    widgetId: id,
    updates,
    timestamp: Date.now(),
    status: 'pending'
  }

  // Apply immediately to local state
  set((state) => ({
    widgets: { ...state.widgets, [id]: { ...state.widgets[id], ...updates } },
    pendingChanges: [...state.pendingChanges, change]
  }))

  // Sync to server (non-blocking)
  syncToServer(change).catch((error) => {
    // Rollback on failure
    rollbackChange(change.id)
    notifyUser('Failed to save changes. Retrying...')
  })
}

// 2. Conflict Resolution Rules
const CONFLICT_RULES = {
  // Widget position/size: Last-write-wins (most recent timestamp)
  'position': 'last-write-wins',
  'size': 'last-write-wins',

  // Widget content: Merge if possible, else prompt user
  'data': 'merge-or-prompt',

  // Widget deletion: Delete wins (prevent zombie widgets)
  'deleted': 'delete-wins',
}

// 3. Offline Support and Fallback
const offlineStore = {
  // Queue changes when offline
  queueChange: (change: Change) => {
    const queue = JSON.parse(localStorage.getItem('offline-queue') || '[]')
    queue.push(change)
    localStorage.setItem('offline-queue', JSON.stringify(queue))
  },

  // Sync when back online
  syncOnReconnect: async () => {
    const queue = JSON.parse(localStorage.getItem('offline-queue') || '[]')
    for (const change of queue) {
      await syncToServer(change)
    }
    localStorage.removeItem('offline-queue')
  }
}

// Listen for online/offline events
window.addEventListener('online', offlineStore.syncOnReconnect)

Implemented In: PRD-38.1 Section 3.3 (Zustand Store), PRD-38.3 Section 2.1 (Workspace Persistence)

---

Related Documents

• PRD-31: Chatbot UX Upgrade (foundation for this work)

• PRD-32: Widget Integration System (external embedding spec)

• PRD-38.1: Phase 1 - Widget-Ready Chatbot Workspace

• PRD-38.2: Phase 2 - Extended Widgets

• PRD-38.3: Phase 3 - Dashboard Builder

• PRD-38.4: Phase 4 - SDK Foundation

• PRD-38.5: Phase 5 - Widget Marketplace

---

Appendix: Open Source Inspirations

Dashboard/Workspace

• React Grid Layout - Grid system

• Gridstack.js - Alternative grid

• Tremor - Dashboard components

• Refine - Admin panel framework

Embeddable Widgets

• Intercom Messenger - Chat widget pattern

• Zendesk Widget - Embedded mode

• Crisp Chat - Lightweight chat widget

• Tawk.to - Free chat widget

Component Libraries

• TailAdmin - Dashboard templates

• Shadcn/UI - Already in use

• Radix UI - Primitives

---

Document Version: 1.0 Created: 2026-01-27 Next Review: After Phase 1 completion