Support multimodal tabs in Jupiter environment

.github/workflows/pre-commit.yml

@@ -32,12 +32,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24.5.0"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 10.14.0
 
       - name: Install the project
         run: uv sync --locked --all-extras --dev

.github/workflows/publish.yml

@@ -34,12 +34,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24.5.0"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 10.14.0
 
       - name: Build
         run: uv build

.github/workflows/pytest.yml

@@ -32,17 +32,17 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24.5.0"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 10.14.0
 
       - name: Install the project
         run: uv sync --locked --all-extras --dev
 
       - name: Run pytest
         env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}  # Real API key for integration tests
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }} # Real API key for integration tests
         run: uv run pytest tests -v

client/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+.eslintcache
+.turbo
+*.tsbuildinfo
+dist-ssr
+*.local
+.nx
+graph.json
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+**/node_modules
+**/build
+**/dist
+**/.gradle
+**/.kotlin
+**/kotlin-js-store

client/Makefile

@@ -0,0 +1,13 @@
+clean: clean-common
+
+clean-common:
+	@echo "Cleaning up node_modules..."
+	@find . -name "node_modules" -type d -prune -exec rm -rf "{}" +
+	@echo "Cleaning up dist..."
+	@find . -name "dist" -type d -prune -exec rm -rf "{}" +
+	@echo "Cleaning up build..."
+	@find . -name 'build' -type d -prune -exec rm -rf '{}' +
+	@echo "Cleaning up out..."
+	@rm -rf out
+	@echo "Cleaning up nx..."
+	@rm -rf .nx

client/multimodal/eslint.config.js → client/eslint.config.mjs

@@ -3,18 +3,18 @@ import { fileURLToPath } from "url";
 
 import js from "@eslint/js";
 import globals from "globals";
-import importPlugin from "eslint-plugin-import";
-import perfectionist from "eslint-plugin-perfectionist";
-import reactPlugin from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import perfectionist from "eslint-plugin-perfectionist";
+import reactPlugin from "eslint-plugin-react";
+import importPlugin from "eslint-plugin-import";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default tseslint.config(
   {
-    ignores: ["**/dist/**", "**/node_modules/**", "**/build/**", "**/*.d.ts"],
+    ignores: ["**/dist/**", "**/node_modules/**", "**/build/**"],
   },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],

client/multimodal-html/eslint.config.mjs

@@ -0,0 +1,12 @@
+import tseslint from "typescript-eslint";
+import baseConfig from "../eslint.config.mjs";
+
+export default tseslint.config(...baseConfig, {
+  files: ["src/**/*.{ts,tsx}"],
+  languageOptions: {
+    parserOptions: {
+      project: ["./tsconfig.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});

client/multimodal-html/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@databao/multimodal-html",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "nx build:pckg @databao/multimodal-html",
+    "build:pckg": "tsc && NODE_ENV=production vite build"
+  },
+  "dependencies": {
+    "@databao/multimodal-tabs": "workspace:*",
+    "@radix-ui/themes": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-html": "3.2.2",
+    "vite-plugin-singlefile": "2.0.2"
+  }
+}

client/multimodal-html/project.json

@@ -0,0 +1,4 @@
+{
+  "name": "@databao/multimodal-html",
+  "root": "multimodal-html"
+}

client/multimodal/src/App.tsx → client/multimodal-html/src/App.tsx

@@ -1,11 +1,14 @@
+import {
+  DataframeTable,
+  TabModel,
+  VegaChart,
+  Tabs,
+} from "@databao/multimodal-tabs";
 import { Spinner, Text, Theme } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
 
 import styles from "./App.module.css";
 import { subscribeOnSpecGeneration } from "./communication/communication";
-import { DataframeTable } from "./components/DataframeTable";
-import { Tabs, TabModel } from "./components/Tabs";
-import { VegaChart } from "./components/VegaChart";
 
 type ConnectionStatus = "initial" | "loading" | "failed" | "loaded";
 

client/multimodal-html/src/styles/main.css

@@ -0,0 +1,13 @@
+@import "@radix-ui/themes/styles.css";
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

client/multimodal-html/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+    "noEmit": true,
+    "declaration": false,
+    "composite": false,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+  },
+  "include": ["src", "vite.config.ts"],
+  "exclude": ["node_modules"],
+}

client/multimodal/vite.config.ts → client/multimodal-html/vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: "../out",
+    outDir: "../out/multimodal-html",
     emptyOutDir: false,
   },
 });

client/multimodal-jupiter/eslint.config.mjs

@@ -0,0 +1,12 @@
+import tseslint from "typescript-eslint";
+import baseConfig from "../eslint.config.mjs";
+
+export default tseslint.config(...baseConfig, {
+  files: ["src/**/*.{ts,tsx}"],
+  languageOptions: {
+    parserOptions: {
+      project: ["./tsconfig.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});

client/multimodal-jupiter/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Databao Chart</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/multimodal-jupiter/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@databao/multimodal-jupiter",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "nx build:pckg @databao/multimodal-jupiter",
+    "build:pckg": "tsc && NODE_ENV=production vite build"
+  },
+  "dependencies": {
+    "@anywidget/react": "0.2.0",
+    "@databao/multimodal-tabs": "workspace:*",
+    "@radix-ui/themes": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@anywidget/types": "0.2.0",
+    "@anywidget/vite": "0.2.2",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-checker": "catalog:",
+    "vite-plugin-lib-inject-css": "catalog:"
+  }
+}

client/multimodal-jupiter/project.json

@@ -0,0 +1,4 @@
+{
+  "name": "@databao/multimodal-jupiter",
+  "root": "multimodal-jupiter"
+}