feat(SuperChat): multi-participant chat with pluggable markdown render pipeline

.storybook/main.ts

@@ -84,6 +84,43 @@ const datavisLegacySubpathDependencies = [
   'core-js/es/string/replace-all',
 ] as const;
 
+// CJS-only transitive dependencies (via react-i18next → html-parse-stringify →
+// void-elements) that live only in the pnpm virtual store. They must be aliased
+// to a resolvable path and force-included so Vite pre-bundles them with proper
+// CJS→ESM default-export interop; otherwise `void-elements` is served raw and
+// throws "does not provide an export named 'default'".
+//
+// The shared `pnpmVirtualNodeModulesDir` is computed from `monorepoRoot`, which
+// does not match this repo's layout; resolve against the workspace-local pnpm
+// store instead.
+const workspacePnpmVirtualNodeModulesDir = path.join(
+  rootNodeModulesDir,
+  '.pnpm/node_modules',
+);
+
+const pnpmVirtualCjsInteropDependencies = [
+  'react-i18next',
+  'html-parse-stringify',
+  'void-elements',
+] as const;
+
+const pnpmVirtualCjsInteropAliases = pnpmVirtualCjsInteropDependencies
+  .filter(
+    (dependencyName) =>
+      !existsSync(path.join(rootNodeModulesDir, dependencyName)) &&
+      existsSync(path.join(workspacePnpmVirtualNodeModulesDir, dependencyName)),
+  )
+  .map((dependencyName) => ({
+    find: new RegExp(`^${escapeRegExp(dependencyName)}(\/.*)?$`),
+    replacement: `${path.join(workspacePnpmVirtualNodeModulesDir, dependencyName)}$1`,
+  }));
+
+const pnpmVirtualCjsInteropIncludes = pnpmVirtualCjsInteropDependencies.filter(
+  (dependencyName) =>
+    existsSync(path.join(rootNodeModulesDir, dependencyName)) ||
+    existsSync(path.join(workspacePnpmVirtualNodeModulesDir, dependencyName)),
+);
+
 function getPackageRootName(dependencyName: string): string {
   if (dependencyName.startsWith('@')) {
     return dependencyName.split('/').slice(0, 2).join('/');
@@ -188,6 +225,7 @@ const config: StorybookConfig = {
           : []),
       ...localUiAliases,
       ...buildVirtualStoreAliases(optimizeDepNames),
+      ...pnpmVirtualCjsInteropAliases,
       ...esheetSourceAliases,
     ];
 
@@ -222,6 +260,12 @@ const config: StorybookConfig = {
         ...optimizeDepNames,
       ].filter(isLocalNodeModuleDependency)),
     );
+    config.optimizeDeps.include = Array.from(
+      new Set([
+        ...(config.optimizeDeps.include ?? []),
+        ...pnpmVirtualCjsInteropIncludes,
+      ]),
+    );
     config.optimizeDeps.esbuildOptions = {
       ...config.optimizeDeps.esbuildOptions,
       jsx: 'automatic',

.storybook/manager.ts

@@ -268,6 +268,14 @@ function injectBrandCSS(brandKey: BrandKey, isDark = false) {
     [role="toolbar"] button[data-active="true"] {
       color: ${brand.primary} !important;
     }
+
+    /* Brand-theme switcher reflects the active brand (higher specificity than
+       the generic muted toolbar-button rule, so it wins in both light/dark). */
+    [role="toolbar"] button[aria-label*="brand themes"],
+    [class*="toolbar"] button[aria-label*="brand themes"],
+    [class*="bar"] button[aria-label*="brand themes"] {
+      color: ${brand.primary} !important;
+    }
 
     /* Links */
     a[href]:hover {

.storybook/preview.css

@@ -144,10 +144,33 @@ html, body {
 [data-theme="dark"] .docblock-argstable code,
 [data-theme="dark"] .sbdocs code {
   background-color: var(--mieweb-card, #27272a) !important;
-  color: var(--mieweb-primary, #3b82f6) !important;
+  color: var(--mieweb-primary-400, #3b82f6) !important;
   border-color: var(--mieweb-border, #3f3f46) !important;
 }
 
+/* ============================================
+   PROSE TABLES (Markdown / README) - DARK MODE
+   ============================================ */
+
+/* Markdown-authored tables in docs (e.g. the README rendered on the Overview
+   page) are plain <table>/<th>/<td>, NOT .docblock-argstable. Storybook's docs
+   theme hardcodes a dark cell color (rgb(46,51,56)) that is unreadable on the
+   dark background, so force the themed foreground + borders here. */
+[data-theme="dark"] .sbdocs-content table th,
+[data-theme="dark"] .sbdocs-content table td {
+  color: var(--mieweb-foreground) !important;
+  border-color: var(--mieweb-border, #3f3f46) !important;
+}
+
+/* Header row + zebra striping for legibility. */
+[data-theme="dark"] .sbdocs-content table th {
+  background-color: var(--mieweb-card, #27272a) !important;
+}
+
+[data-theme="dark"] .sbdocs-content table tr:nth-child(even) td {
+  background-color: var(--mieweb-card, #27272a) !important;
+}
+
 /* ============================================
    CONTROLS / INPUTS - DARK MODE
    ============================================ */
@@ -201,7 +224,7 @@ html, body {
 }
 
 [data-theme="dark"] .docblock-argstable button:hover {
-  background-color: var(--mieweb-accent, #3f3f46) !important;
+  background-color: var(--mieweb-muted, #3f3f46) !important;
 }
 
 /* ============================================
@@ -233,7 +256,7 @@ html, body {
 /* Story name labels */
 [data-theme="dark"] .sbdocs-a,
 [data-theme="dark"] .sbdocs a:not(.docs-story a):not(.sb-story a):not(.sb-unstyled a) {
-  color: var(--mieweb-primary, #3b82f6) !important;
+  color: var(--mieweb-primary-400, #3b82f6) !important;
 }
 
 /* ============================================
@@ -246,7 +269,7 @@ html, body {
 }
 
 [data-theme="dark"] [class*="IconButton"]:hover {
-  background-color: var(--mieweb-accent, #3f3f46) !important;
+  background-color: var(--mieweb-muted, #3f3f46) !important;
 }
 
 /* Show code button */

eslint.config.js

@@ -93,6 +93,13 @@ export default [
         IntersectionObserver: 'readonly',
         IntersectionObserverEntry: 'readonly',
         MutationObserver: 'readonly',
+        // IndexedDB
+        indexedDB: 'readonly',
+        IDBDatabase: 'readonly',
+        IDBObjectStore: 'readonly',
+        IDBTransactionMode: 'readonly',
+        IDBOpenDBRequest: 'readonly',
+        IDBRequest: 'readonly',
         // DOM types
         Element: 'readonly',
         Document: 'readonly',

package.json

@@ -198,10 +198,17 @@
     "ag-grid-react": ">=32.0.0",
     "datavis-ace": "=4.0.0-PRE.2",
     "js-yaml": ">=4.0.0",
-    "mermaid": ">=10.0.0",
+    "katex": ">=0.16.0",
+    "mermaid": ">=11.0.0",
     "papaparse": ">=5.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
+    "react-markdown": ">=9.0.0",
+    "rehype-highlight": ">=7.0.0",
+    "rehype-katex": ">=7.0.0",
+    "rehype-sanitize": ">=6.0.0",
+    "remark-gfm": ">=4.0.0",
+    "remark-math": ">=6.0.0",
     "wavesurfer.js": ">=7.0.0"
   },
   "peerDependenciesMeta": {
@@ -235,6 +242,27 @@
     "papaparse": {
       "optional": true
     },
+    "react-markdown": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "remark-math": {
+      "optional": true
+    },
+    "rehype-katex": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    },
+    "rehype-sanitize": {
+      "optional": true
+    },
+    "rehype-highlight": {
+      "optional": true
+    },
     "react": {
       "optional": false
     },
@@ -247,6 +275,7 @@
   },
   "dependencies": {
     "@swc/helpers": "^0.5.19",
+    "@tanstack/react-virtual": "^3.14.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.4.0",
@@ -272,6 +301,7 @@
     "@kerebron/editor": "0.7.9",
     "@kerebron/editor-kits": "0.7.9",
     "@kerebron/wasm": "0.7.9",
+    "@mieweb/datavis": "=0.0.0-PRE.2",
     "@monaco-editor/react": "^4.7.0",
     "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.2.11",
@@ -309,21 +339,28 @@
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
     "d3-zoom": "^3.0.0",
-    "@mieweb/datavis": "=0.0.0-PRE.2",
     "eslint": "^9.39.3",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^10.2.11",
+    "fake-indexeddb": "^6.2.5",
     "js-yaml": "^4.1.1",
     "jsdom": "^26.1.0",
-    "mermaid": "^11.12.3",
+    "katex": "^0.17.0",
+    "mermaid": "^11.15.0",
     "papaparse": "^5.5.3",
     "postcss": "^8.5.10",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "sass": "1.100.0",
     "sortablejs": "^1.15.7",
     "storybook": "^10.2.11",