feat(tutorial): add interactive code editor to Step 6 challenge

- Added CodeMirror editor with validation for Break the Verifier challenge
- Validator now concatenates all revealed values to show redacted transcript
- Uses regex to validate inflated CHF amounts (275_000_000 or 125_000_000)
- Shows actual redacted transcript in validation messages
- Auto-marks step complete when validation passes
- Added reset button functionality
- Improved hints to explain exploit clearly

.github/workflows/demo.yml

@@ -86,5 +86,5 @@ jobs:
                   tags: ${{ steps.meta-verifier-webapp.outputs.tags }}
                   labels: ${{ steps.meta-verifier-webapp.outputs.labels }}
                   build-args: |
-                      VERIFIER_HOST=demo-staging.tlsnotary.org
-                      SSL=true
+                      VITE_VERIFIER_HOST=demo-staging.tlsnotary.org
+                      VITE_SSL=true

CLAUDE.md

@@ -594,34 +594,28 @@ Docker-based demo environment for testing plugins:
 - `twitter.js`, `swissbank.js` - Example plugin files
 - `docker-compose.yml` - Docker services configuration
 - `nginx.conf` - Reverse proxy configuration
-- `start.sh` - Setup script with URL templating
 
 **Docker Services:**
 1. `verifier` - TLSNotary verifier server (port 7047)
 2. `demo-static` - nginx serving static plugin files
 3. `nginx` - Reverse proxy (port 80)
 
-**Environment Variables:**
-- `VERIFIER_HOST` - Verifier server host (default: `localhost:7047`)
-- `SSL` - Use https/wss protocols (default: `false`)
+**Environment Variables (via `.env` files or Docker build args):**
+- `VITE_VERIFIER_HOST` - Verifier server host (default: `localhost:7047`)
+- `VITE_SSL` - Use https/wss protocols (default: `false`)
 
 **Usage:**
 ```bash
-# Local development
-./start.sh
+# Local development with npm
+npm run demo
 
-# Production with SSL
-VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./start.sh
+# Docker (detached mode)
+npm run docker:up
 
-# Docker detached mode
-./start.sh -d
+# Docker with custom verifier
+VITE_VERIFIER_HOST=verifier.example.com VITE_SSL=true docker compose up --build
 ```
 
-The `start.sh` script:
-1. Processes plugin files, replacing `verifierUrl` and `proxyUrl` placeholders
-2. Copies processed files to `generated/` directory
-3. Starts Docker Compose services
-
 ## Important Implementation Notes
 
 ### Plugin API Changes

README.md

@@ -58,8 +58,7 @@ tlsn-extension/
 │   │
 │   ├── demo/                # Demo server with Docker setup
 │   │   ├── *.js                  # Example plugin files
-│   │   ├── docker-compose.yml    # Docker services configuration
-│   │   └── start.sh              # Setup script with configurable URLs
+│   │   └── docker-compose.yml    # Docker services configuration
 │   │
 │   ├── tutorial/            # Tutorial examples
 │   │   └── *.js                  # Tutorial plugin files
@@ -116,10 +115,9 @@ Rust-based HTTP/WebSocket server for TLSNotary verification:
 #### 5. **demo** - Demo Server
 Docker-based demo environment with:
 - Pre-configured example plugins (Twitter, SwissBank)
+- React + Vite frontend with environment-based configuration
 - Docker Compose setup with verifier and nginx
-- Configurable verifier URLs via environment variables
-- Plugin file generator (`generate.sh`) with SSL support
-- Docker startup script (`start.sh`)
+- Configurable verifier URLs via `.env` files or Docker build args
 
 #### 6. **tlsn-wasm-pkg** - TLSN WebAssembly Package
 Pre-built WebAssembly binaries for TLSNotary functionality in the browser.
@@ -495,25 +493,19 @@ npm run demo
 
 ### Environment Variables
 
-Configure the demo for different environments:
+The demo uses `.env` files for configuration:
+- `.env` - Local development defaults (`localhost:7047`)
+- `.env.production` - Production settings (`verifier.tlsnotary.org`, SSL enabled)
+
+For Docker deployments, override via environment variables:
 ```bash
 # Local development (default)
-cd packages/demo
-./generate.sh && ./start.sh
+npm run docker:up
 
-# Production with SSL
-cd packages/demo
-VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
-./start.sh
-
-# Docker detached mode
-./generate.sh && ./start.sh -d
+# Production with custom verifier
+VITE_VERIFIER_HOST=verifier.example.com VITE_SSL=true docker compose up --build
 ```
 
-The demo uses two scripts:
-- **`generate.sh`** - Generates plugin files with configured verifier URLs (use environment variables here)
-- **`start.sh`** - Starts Docker Compose services (assumes `generated/` directory exists)
-
 ### Tutorial
 
 ```bash

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlsn-monorepo",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.14",
   "private": true,
   "description": "TLSN Extension monorepo with plugin SDK",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "test": "npm run test --workspaces --if-present",
     "serve:test": "npm run serve:test --workspace=extension",
     "clean": "rm -rf packages/*/node_modules packages/*/dist packages/*/build node_modules",
-    "build:wasm": "sh packages/tlsn-wasm/build.sh v0.1.0-alpha.13 --no-logging",
-    "demo": "serve -l 8080 packages/demo",
-    "tutorial": "serve -l 8080 packages/tutorial",
-    "docker:up": "cd packages/demo && ./start.sh -d",
-    "docker:down": "cd packages/demo && docker-compose down"
+    "build:wasm": "sh packages/tlsn-wasm/build.sh v0.1.0-alpha.14 --no-logging",
+    "demo": "npm run dev --workspace=@tlsnotary/demo",
+    "tutorial": "npm run dev --workspace=@tlsn/tutorial",
+    "docker:up": "cd packages/demo && docker compose up --build -d",
+    "docker:down": "cd packages/demo && docker compose down"
   },
   "devDependencies": {
     "typescript": "^5.5.4",

packages/common/package.json

@@ -33,6 +33,11 @@
     "eslint-plugin-prettier": "^5.5.4",
     "prettier": "^3.6.2",
     "typescript": "^5.0.0",
-    "vitest": "^1.0.0"
+    "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "happy-dom": "20.0.11",
+    "vite": "7.3.0",
+    "webpack-dev-server": "5.2.2"
   }
 }

packages/common/src/logger/Logger.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { Logger, LogLevel, DEFAULT_LOG_LEVEL } from './index';
 
 describe('Logger', () => {
@@ -11,6 +11,10 @@ describe('Logger', () => {
     logger.init(DEFAULT_LOG_LEVEL);
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   describe('LogLevel', () => {
     it('should have correct hierarchy values', () => {
       expect(LogLevel.DEBUG).toBe(0);

packages/demo/.env

@@ -0,0 +1,3 @@
+# Verifier Configuration
+VITE_VERIFIER_HOST=localhost:7047
+VITE_SSL=false

packages/demo/.env.production

@@ -0,0 +1,3 @@
+# Production environment variables
+VITE_VERIFIER_HOST=verifier.tlsnotary.org
+VITE_SSL=true

packages/demo/.gitignore

@@ -1,2 +1,4 @@
 *.wasm
+dist/
+public/plugins/
 generated/

packages/demo/ADDING_PLUGINS.md

@@ -0,0 +1,52 @@
+# Adding New Plugins
+
+Adding new plugins to the demo is straightforward. Just update the `plugins.ts` file:
+
+## Example: Adding a GitHub Plugin
+
+```typescript
+// packages/demo/src/plugins.ts
+
+export const plugins: Record<string, Plugin> = {
+  // ... existing plugins ...
+  
+  github: {
+    name: 'GitHub Profile',
+    description: 'Prove your GitHub contributions and profile information',
+    logo: '🐙',  // or use emoji: '💻', '⚡', etc.
+    file: '/github.js',
+    parseResult: (json) => {
+      return json.results[json.results.length - 1].value;
+    },
+  },
+};
+```
+
+## Plugin Properties
+
+| Property      | Type     | Description                                             |
+| ------------- | -------- | ------------------------------------------------------- |
+| `name`        | string   | Display name shown in the card header                   |
+| `description` | string   | Brief description of what the plugin proves             |
+| `logo`        | string   | Emoji or character to display as the plugin icon        |
+| `file`        | string   | Path to the plugin JavaScript file                      |
+| `parseResult` | function | Function to extract the result from the plugin response |
+
+## Tips
+
+- **Logo**: Use emojis for visual appeal (🔒, 🎮, 📧, 💰, etc.)
+- **Description**: Keep it concise (1-2 lines) explaining what data is proven
+- **File**: Place the plugin JS file in `/packages/demo/` directory
+- **Name**: Use short, recognizable names
+
+## Card Display
+
+The plugin will automatically render as a card with:
+- Large logo at the top
+- Plugin name as heading
+- Description text below
+- "Run Plugin" button at the bottom
+- Hover effects and animations
+- Running state with spinner
+
+No additional UI code needed!

packages/demo/Dockerfile

@@ -1,17 +1,25 @@
 # Build stage
-FROM rust:latest AS builder
+FROM node:20-alpine AS builder
 
 # Accept build arguments with defaults
-ARG VERIFIER_HOST=localhost:7047
-ARG SSL=false
+ARG VITE_VERIFIER_HOST=localhost:7047
+ARG VITE_SSL=false
 
 WORKDIR /app
-COPY index.html *.ico *.js *.sh /app/
 
-# Pass build args as environment variables to generate.sh
-RUN VERIFIER_HOST="${VERIFIER_HOST}" SSL="${SSL}" ./generate.sh
+# Copy package files and install dependencies
+COPY package.json ./
+RUN npm install
+
+# Copy source files
+COPY . .
+
+# Build with environment variables
+ENV VITE_VERIFIER_HOST=${VITE_VERIFIER_HOST}
+ENV VITE_SSL=${VITE_SSL}
+RUN npm run build
 
 # Runtime stage
 FROM nginx:alpine
 
-COPY --from=builder /app/generated /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html

packages/demo/README.md

@@ -57,31 +57,44 @@ You can use the websocketproxy hosted by the TLSNotary team, or run your own pro
 
 ## 4. Launch the demo
 
-Run the demo with `npm run demo` from the repository root, or run it with docker using `npm run docker:up`.
+### Development with React
 
-### Manual Setup
-
-If you want to run the scripts manually:
+This demo is built with React + TypeScript + Vite. To run it locally:
 
 ```bash
 cd packages/demo
-./generate.sh && ./start.sh
+npm install
+npm run dev
 ```
 
-The demo uses two scripts:
-- **`generate.sh`** - Generates plugin files with configured verifier URLs
-- **`start.sh`** - Starts Docker Compose services
+The demo will open at `http://localhost:3000` in your browser with the TLSNotary extension.
 
-### Environment Variables
+### Docker Setup
 
-Configure for different environments:
+Run the demo with `npm run demo` from the repository root, or run it with docker using `npm run docker:up`.
+
+#### Manual Docker Setup
+
+If you want to run Docker manually:
+
+```bash
+cd packages/demo
+docker compose up --build
+```
+
+#### Environment Variables
+
+The demo uses `.env` files for configuration:
+- `.env` - Local development defaults (`localhost:7047`)
+- `.env.production` - Production settings (`verifier.tlsnotary.org`, SSL enabled)
+
+For Docker deployments, override via environment variables:
 ```bash
 # Local development (default)
-./generate.sh && ./start.sh
+docker compose up --build
 
-# Production with SSL
-VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
-./start.sh
+# Production with custom verifier
+VITE_VERIFIER_HOST=verifier.example.com VITE_SSL=true docker compose up --build
 ```
 
 You can now open the demo by opening http://localhost:8080 in your browser with the TLSNotary extension

packages/demo/build-plugins.js

@@ -0,0 +1,45 @@
+import { build } from 'vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const plugins = ['twitter', 'swissbank', 'spotify'];
+
+// Build URLs from environment variables (matching config.ts pattern)
+const VERIFIER_HOST = process.env.VITE_VERIFIER_HOST || 'localhost:7047';
+const SSL = process.env.VITE_SSL === 'true';
+
+const VERIFIER_URL = `${SSL ? 'https' : 'http'}://${VERIFIER_HOST}`;
+const PROXY_URL = `${SSL ? 'wss' : 'ws'}://${VERIFIER_HOST}/proxy?token=`;
+
+// Build each plugin separately as plain ES module
+for (const plugin of plugins) {
+    await build({
+        configFile: false,
+        build: {
+            lib: {
+                entry: path.resolve(__dirname, `src/plugins/${plugin}.plugin.ts`),
+                formats: ['es'],
+                fileName: () => `${plugin}.js`,
+            },
+            outDir: 'public/plugins',
+            emptyOutDir: false,
+            sourcemap: false,
+            minify: false,
+            rollupOptions: {
+                output: {
+                    exports: 'default',
+                },
+            },
+        },
+        define: {
+            VITE_VERIFIER_URL: JSON.stringify(VERIFIER_URL),
+            VITE_PROXY_URL: JSON.stringify(PROXY_URL),
+        },
+    });
+    console.log(`✓ Built ${plugin}.js`);
+}
+
+console.log('✓ All plugins built successfully');

packages/demo/docker-compose.yml

@@ -15,8 +15,8 @@ services:
     build:
       context: .
       args:
-        VERIFIER_HOST: ${VERIFIER_HOST:-localhost:7047}
-        SSL: ${SSL:-false}
+        VITE_VERIFIER_HOST: ${VITE_VERIFIER_HOST:-localhost:7047}
+        VITE_SSL: ${VITE_SSL:-false}
     restart: unless-stopped
 
   nginx:

packages/demo/generate.sh

@@ -1,105 +0,0 @@
-#!/bin/sh
-#
-# Demo Plugin File Generator
-#
-# This script generates plugin files with configurable verifier URLs.
-# Used both locally and in CI/CD pipelines.
-#
-# Environment Variables:
-#   VERIFIER_HOST - Verifier server host (default: localhost:7047)
-#   SSL           - Use https/wss if true (default: false)
-#
-# Usage:
-#   ./generate.sh                                    # Local development
-#   VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh  # Production
-
-set -e
-
-cd "$(dirname "$0")"
-
-# Configuration with defaults
-VERIFIER_HOST="${VERIFIER_HOST:-localhost:7047}"
-SSL="${SSL:-false}"
-
-# Determine protocol based on SSL setting
-if [ "$SSL" = "true" ]; then
-    HTTP_PROTOCOL="https"
-    WS_PROTOCOL="wss"
-else
-    HTTP_PROTOCOL="http"
-    WS_PROTOCOL="ws"
-fi
-
-VERIFIER_URL="${HTTP_PROTOCOL}://${VERIFIER_HOST}"
-PROXY_URL_BASE="${WS_PROTOCOL}://${VERIFIER_HOST}/proxy?token="
-
-echo "========================================"
-echo "TLSNotary Demo Plugin Generator"
-echo "========================================"
-echo "Verifier Host: $VERIFIER_HOST"
-echo "SSL Enabled:   $SSL"
-echo "Verifier URL:  $VERIFIER_URL"
-echo "Proxy URL:     ${PROXY_URL_BASE}<host>"
-echo "========================================"
-
-# Create generated directory for processed files
-mkdir -p generated
-
-# Function to process a plugin file
-process_plugin() {
-    local input_file="$1"
-    local output_file="generated/$(basename "$input_file")"
-
-    echo "Processing: $input_file -> $output_file"
-
-    # Replace verifierUrl and proxyUrl patterns
-    sed -E \
-        -e "s|verifierUrl: '[^']*'|verifierUrl: '${VERIFIER_URL}'|g" \
-        -e "s|verifierUrl: \"[^\"]*\"|verifierUrl: \"${VERIFIER_URL}\"|g" \
-        -e "s|proxyUrl: 'ws://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
-        -e "s|proxyUrl: 'wss://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
-        -e "s|proxyUrl: \"ws://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
-        -e "s|proxyUrl: \"wss://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
-        "$input_file" > "$output_file"
-}
-
-# Function to process index.html
-process_index_html() {
-    local input_file="$1"
-    local output_file="generated/$(basename "$input_file")"
-
-    echo "Processing: $input_file -> $output_file"
-
-    # Replace hardcoded health check URL with configured verifier URL
-    sed -E \
-        -e "s|http://localhost:7047/health|${VERIFIER_URL}/health|g" \
-        "$input_file" > "$output_file"
-}
-
-# Process index.html
-echo ""
-echo "Processing index.html..."
-process_index_html "index.html"
-
-# Copy other static files
-echo ""
-echo "Copying other static files..."
-cp favicon.ico generated/ 2>/dev/null || true
-
-# Process plugin files
-echo ""
-echo "Processing plugin files..."
-for plugin_file in *.js; do
-    if [ -f "$plugin_file" ]; then
-        process_plugin "$plugin_file"
-    fi
-done
-
-echo ""
-echo "Generated files:"
-ls -la generated/
-
-echo ""
-echo "========================================"
-echo "Generation complete!"
-echo "========================================"

packages/demo/index.html

@@ -1,510 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8" />
-  <title>TLSNotary Plugin test page</title>
-  <style>
-    .result {
-      background: #e8f5e8;
-      border: 2px solid #28a745;
-      border-radius: 8px;
-      padding: 16px;
-      margin: 20px 0;
-      font-size: 18px;
-      display: inline-block;
-    }
-
-    .debug {
-      background: #f8f9fa;
-      border: 1px solid #dee2e6;
-      border-radius: 4px;
-      padding: 12px;
-      margin: 20px 0;
-      font-family: 'Courier New', monospace;
-      font-size: 12px;
-      white-space: pre-wrap;
-      max-height: 400px;
-      overflow-y: auto;
-    }
-
-    .plugin-buttons {
-      margin: 20px 0;
-    }
-
-    .plugin-buttons button {
-      margin-right: 10px;
-      padding: 10px 20px;
-      font-size: 16px;
-    }
-
-    .check-item {
-      margin: 10px 0;
-      padding: 10px;
-      border-radius: 4px;
-      border: 1px solid #ddd;
-    }
-
-    .check-item.checking {
-      background: #f0f8ff;
-      border-color: #007bff;
-    }
-
-    .check-item.success {
-      background: #f0f8f0;
-      border-color: #28a745;
-    }
-
-    .check-item.error {
-      background: #fff0f0;
-      border-color: #dc3545;
-    }
-
-    .status {
-      font-weight: bold;
-      margin-left: 10px;
-    }
-
-    .status.checking {
-      color: #007bff;
-    }
-
-    .status.success {
-      color: #28a745;
-    }
-
-    .status.error {
-      color: #dc3545;
-    }
-
-    .warning-box {
-      background: #fff3cd;
-      border: 2px solid #ffc107;
-      border-radius: 8px;
-      padding: 16px;
-      margin: 20px 0;
-    }
-
-    .warning-box h3 {
-      margin-top: 0;
-      color: #856404;
-    }
-
-    .console-section {
-      margin: 20px 0;
-      border: 1px solid #dee2e6;
-      border-radius: 8px;
-      background: #1e1e1e;
-      overflow: hidden;
-    }
-
-    .console-header {
-      background: #2d2d2d;
-      color: #fff;
-      padding: 10px 15px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid #3d3d3d;
-    }
-
-    .console-title {
-      font-weight: 600;
-      font-size: 14px;
-    }
-
-    .console-output {
-      max-height: 300px;
-      overflow-y: auto;
-      padding: 10px;
-      font-family: 'Courier New', monospace;
-      font-size: 12px;
-      color: #d4d4d4;
-    }
-
-    .console-entry {
-      margin: 4px 0;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .console-entry.info {
-      color: #4fc3f7;
-    }
-
-    .console-entry.success {
-      color: #4caf50;
-    }
-
-    .console-entry.error {
-      color: #f44336;
-    }
-
-    .console-entry.warning {
-      color: #ff9800;
-    }
-
-    .console-timestamp {
-      color: #888;
-      margin-right: 8px;
-    }
-
-    .console-message {
-      color: inherit;
-    }
-
-    .btn-console {
-      background: #007bff;
-      color: white;
-      border: none;
-      padding: 5px 12px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-
-    .btn-console:hover {
-      background: #0056b3;
-    }
-  </style>
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TLSNotary Plugin Demo</title>
 </head>
 
 <body>
-  <h1>TLSNotary Plugin Demo</h1>
-  <p>
-    This page demonstrates TLSNotary plugins. Choose a plugin to test below.
-  </p>
-
-  <!-- Browser compatibility warning -->
-  <div id="browser-warning" class="warning-box" style="display: none;">
-    <h3>⚠️ Browser Compatibility</h3>
-    <p><strong>Unsupported Browser Detected</strong></p>
-    <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
-    <p>Please switch to a supported browser to continue.</p>
-  </div>
-
-  <!-- System checks -->
-  <div>
-    <strong>System Checks:</strong>
-    <div id="check-browser" class="check-item checking">
-      🌐 Browser: <span class="status checking">Checking...</span>
-    </div>
-    <div id="check-extension" class="check-item checking">
-      🔌 Extension: <span class="status checking">Checking...</span>
-    </div>
-    <div id="check-verifier" class="check-item checking">
-      ✅ Verifier: <span class="status checking">Checking...</span>
-      <div id="verifier-instructions" style="display: none; margin-top: 10px; font-size: 14px;">
-        <p>Start the verifier server:</p>
-        <code>cd packages/verifier; cargo run --release</code>
-        <button onclick="checkVerifier()" style="margin-left: 10px; padding: 5px 10px;">Check Again</button>
-      </div>
-    </div>
-  </div>
-
-  <div style="margin-top: 20px;">
-    <strong>Steps:</strong>
-    <ol>
-      <li>Click one of the plugin "Run" buttons below.</li>
-      <li>The plugin will open a new browser window with the target website.</li>
-      <li>Log in to the website if you are not already logged in.</li>
-      <li>A TLSNotary overlay will appear in the bottom right corner.</li>
-      <li>Click the <strong>Prove</strong> button in the overlay to start the proving process.</li>
-      <li>After successful proving, you can close the browser window and the results will appear on this page.</li>
-    </ol>
-  </div>
-  <div class="plugin-buttons" id="buttonContainer"></div>
-
-  <!-- Console Section -->
-  <div class="console-section">
-    <div class="console-header">
-      <div class="console-title">Console Output</div>
-      <div style="display: flex; gap: 10px;">
-        <button class="btn-console" onclick="openExtensionLogs()" style="background: #6c757d;">View Extension
-          Logs</button>
-        <button class="btn-console" onclick="clearConsole()">Clear</button>
-      </div>
-    </div>
-    <div class="console-output" id="consoleOutput">
-      <div class="console-entry info">
-        <span class="console-timestamp">[INFO]</span>
-        <span class="console-message">💡 TLSNotary proving logs will appear here in real-time. You can also view them in
-          the extension console by clicking "View Extension Logs" above.</span>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    console.log('Testing TLSNotary plugins...');
-
-    let allChecksPass = false;
-
-    // Console functionality
-    function addConsoleEntry(message, type = 'info') {
-      const consoleOutput = document.getElementById('consoleOutput');
-      const timestamp = new Date().toLocaleTimeString();
-
-      const entry = document.createElement('div');
-      entry.className = `console-entry ${type}`;
-
-      const timestampSpan = document.createElement('span');
-      timestampSpan.className = 'console-timestamp';
-      timestampSpan.textContent = `[${timestamp}]`;
-
-      const messageSpan = document.createElement('span');
-      messageSpan.className = 'console-message';
-      messageSpan.textContent = message;
-
-      entry.appendChild(timestampSpan);
-      entry.appendChild(messageSpan);
-      consoleOutput.appendChild(entry);
-
-      // Auto-scroll to bottom
-      consoleOutput.scrollTop = consoleOutput.scrollHeight;
-    }
-
-    function clearConsole() {
-      const consoleOutput = document.getElementById('consoleOutput');
-      consoleOutput.innerHTML = '';
-      addConsoleEntry('Console cleared', 'info');
-      // Re-add the tip
-      const tipEntry = document.createElement('div');
-      tipEntry.className = 'console-entry info';
-      tipEntry.innerHTML = '<span class="console-timestamp">[INFO]</span><span class="console-message">💡 TLSNotary proving logs will appear here in real-time.</span>';
-      consoleOutput.insertBefore(tipEntry, consoleOutput.firstChild);
-    }
-
-    function openExtensionLogs() {
-      // Open extensions page
-      window.open('chrome://extensions/', '_blank');
-      addConsoleEntry('Opening chrome://extensions/ - Find TLSNotary extension → click "service worker" → find "offscreen.html" → click "inspect"', 'info');
-    }
-
-    // Listen for logs from offscreen document
-    window.addEventListener('message', (event) => {
-      if (event.origin !== window.location.origin) return;
-
-      if (event.data?.type === 'TLSN_OFFSCREEN_LOG') {
-        addConsoleEntry(event.data.message, event.data.level);
-      }
-    });
-
-    // Initialize console with welcome message
-    window.addEventListener('load', () => {
-      addConsoleEntry('TLSNotary Plugin Demo initialized', 'success');
-    });
-
-    // Check browser compatibility
-    function checkBrowserCompatibility() {
-      const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-      const isEdge = /Edg/.test(navigator.userAgent);
-      const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
-      const isChromium = /Chromium/.test(navigator.userAgent);
-
-      const isChromeBasedBrowser = isChrome || isEdge || isBrave || isChromium;
-
-      const checkDiv = document.getElementById('check-browser');
-      const warningDiv = document.getElementById('browser-warning');
-      const statusSpan = checkDiv.querySelector('.status');
-
-      if (isChromeBasedBrowser) {
-        checkDiv.className = 'check-item success';
-        statusSpan.className = 'status success';
-        statusSpan.textContent = '✅ Chrome-based browser detected';
-        return true;
-      } else {
-        checkDiv.className = 'check-item error';
-        statusSpan.className = 'status error';
-        statusSpan.textContent = '❌ Unsupported browser';
-        warningDiv.style.display = 'block';
-        return false;
-      }
-    }
-
-    // Check extension
-    async function checkExtension() {
-      const checkDiv = document.getElementById('check-extension');
-      const statusSpan = checkDiv.querySelector('.status');
-
-      // Wait a bit for tlsn to load if page just loaded
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
-      if (typeof window.tlsn !== 'undefined') {
-        checkDiv.className = 'check-item success';
-        statusSpan.className = 'status success';
-        statusSpan.textContent = '✅ Extension installed';
-        return true;
-      } else {
-        checkDiv.className = 'check-item error';
-        statusSpan.className = 'status error';
-        statusSpan.innerHTML = '❌ Extension not found - <a href="chrome://extensions/" target="_blank">Install extension</a>';
-        return false;
-      }
-    }
-
-    // Check verifier server
-    async function checkVerifier() {
-      const checkDiv = document.getElementById('check-verifier');
-      const statusSpan = checkDiv.querySelector('.status');
-      const instructions = document.getElementById('verifier-instructions');
-
-      statusSpan.textContent = 'Checking...';
-      statusSpan.className = 'status checking';
-      checkDiv.className = 'check-item checking';
-
-      try {
-        const response = await fetch('http://localhost:7047/health');
-        if (response.ok && await response.text() === 'ok') {
-          checkDiv.className = 'check-item success';
-          statusSpan.className = 'status success';
-          statusSpan.textContent = '✅ Verifier running';
-          instructions.style.display = 'none';
-          return true;
-        } else {
-          throw new Error('Unexpected response');
-        }
-      } catch (error) {
-        checkDiv.className = 'check-item error';
-        statusSpan.className = 'status error';
-        statusSpan.textContent = '❌ Verifier not running';
-        instructions.style.display = 'block';
-        return false;
-      }
-    }
-
-    // Run all checks
-    async function runAllChecks() {
-      const browserOk = checkBrowserCompatibility();
-      if (!browserOk) {
-        allChecksPass = false;
-        return;
-      }
-
-      const extensionOk = await checkExtension();
-      const verifierOk = await checkVerifier();
-
-      allChecksPass = extensionOk && verifierOk;
-
-      updateButtonState();
-    }
-
-    // Update button state based on checks
-    function updateButtonState() {
-      const container = document.getElementById('buttonContainer');
-      const buttons = container.querySelectorAll('button');
-
-      buttons.forEach(button => {
-        button.disabled = !allChecksPass;
-        if (!allChecksPass) {
-          button.title = 'Please complete all system checks first';
-        } else {
-          button.title = '';
-        }
-      });
-    }
-
-    const plugins = {
-      twitter: {
-        name: 'Twitter profile Plugin',
-        file: 'twitter.js',
-        parseResult: (json) => {
-          return json.results[json.results.length - 1].value;
-        }
-      },
-      swissbank: {
-        name: 'Swiss Bank Plugin',
-        file: 'swissbank.js',
-        parseResult: (json) => {
-          return json.results[json.results.length - 1].value;
-        }
-      },
-      spotify: {
-        name: 'Spotify Plugin',
-        file: 'spotify.js',
-        parseResult: (json) => {
-          return json.results[json.results.length - 1].value;
-        }
-      }
-    };
-
-    async function runPlugin(pluginKey) {
-      const plugin = plugins[pluginKey];
-      const button = document.getElementById(`${pluginKey}Button`);
-
-      try {
-        addConsoleEntry(`🎬 Starting ${plugin.name} plugin...`, 'info');
-        console.log(`Running ${plugin.name} plugin...`);
-        button.disabled = true;
-        button.textContent = 'Running...';
-
-        const startTime = performance.now();
-        const pluginCode = await fetch(plugin.file).then(r => r.text());
-
-        addConsoleEntry('🔧 Executing plugin code...', 'info');
-        const result = await window.tlsn.execCode(pluginCode);
-        const executionTime = (performance.now() - startTime).toFixed(2);
-
-        const json = JSON.parse(result);
-
-        // Create result div
-        const resultDiv = document.createElement('div');
-        resultDiv.className = 'result';
-        resultDiv.innerHTML = plugin.parseResult(json);
-        document.body.appendChild(resultDiv);
-
-        // Create header
-        const header = document.createElement('h3');
-        header.textContent = `${plugin.name} Results:`;
-        document.body.appendChild(header);
-
-        // Create debug div
-        const debugDiv = document.createElement('div');
-        debugDiv.className = 'debug';
-        debugDiv.textContent = JSON.stringify(json.results, null, 2);
-        document.body.appendChild(debugDiv);
-
-        addConsoleEntry(`✅ ${plugin.name} completed successfully in ${executionTime}ms`, 'success');
-
-        // Remove the button after successful execution
-        button.remove();
-      } catch (err) {
-        console.error(err);
-
-        // Create error div
-        const errorDiv = document.createElement('pre');
-        errorDiv.style.color = 'red';
-        errorDiv.textContent = err.message;
-        document.body.appendChild(errorDiv);
-
-        button.textContent = `Run ${plugin.name}`;
-        button.disabled = false;
-      }
-    }
-
-    window.addEventListener('tlsn_loaded', () => {
-      console.log('TLSNotary client loaded, showing plugin buttons...');
-      const container = document.getElementById('buttonContainer');
-
-      Object.entries(plugins).forEach(([key, plugin]) => {
-        const button = document.createElement('button');
-        button.id = `${key}Button`;
-        button.textContent = `Run ${plugin.name}`;
-        button.onclick = () => runPlugin(key);
-        container.appendChild(button);
-      });
-
-      // Update button states after creating them
-      updateButtonState();
-    });
-
-    // Run checks on page load
-    window.addEventListener('load', () => {
-      setTimeout(() => {
-        runAllChecks();
-      }, 500);
-    });
-  </script>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
 </body>
 
 </html>

packages/demo/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@tlsnotary/demo",
+    "version": "0.1.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "npm run build:plugins && vite",
+        "build": "npm run build:plugins && vite build",
+        "build:plugins": "node build-plugins.js",
+        "preview": "vite preview",
+        "type-check": "tsc --noEmit"
+    },
+    "dependencies": {
+        "happy-dom": "20.0.11",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "webpack-dev-server": "5.2.2"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "typescript": "^5.3.3",
+        "vite": "^7.3.0"
+    }
+}

packages/demo/src/App.tsx

@@ -0,0 +1,299 @@
+import { useState, useEffect, useCallback } from 'react';
+import { SystemChecks } from './components/SystemChecks';
+import { ConsoleOutput } from './components/Console';
+import { PluginButtons } from './components/PluginButtons';
+import { StatusBar } from './components/StatusBar';
+import { CollapsibleSection } from './components/CollapsibleSection';
+import { HowItWorks } from './components/HowItWorks';
+import { WhyPlugins } from './components/WhyPlugins';
+import { BuildYourOwn } from './components/BuildYourOwn';
+import { plugins } from './plugins';
+import { checkBrowserCompatibility, checkExtension, checkVerifier, formatTimestamp } from './utils';
+import { ConsoleEntry, CheckStatus, PluginResult as PluginResultType } from './types';
+import './App.css';
+
+interface PluginResultData {
+    resultHtml: string;
+    debugJson: string;
+}
+
+export function App() {
+    const [consoleEntries, setConsoleEntries] = useState<ConsoleEntry[]>([
+        {
+            timestamp: formatTimestamp(),
+            message:
+                '💡 TLSNotary proving logs will appear here in real-time. You can also view them in the extension console by clicking "View Extension Logs" above.',
+            type: 'info',
+        },
+    ]);
+
+    const [browserCheck, setBrowserCheck] = useState<{ status: CheckStatus; message: string }>({
+        status: 'checking',
+        message: 'Checking...',
+    });
+
+    const [extensionCheck, setExtensionCheck] = useState<{ status: CheckStatus; message: string }>({
+        status: 'checking',
+        message: 'Checking...',
+    });
+
+    const [verifierCheck, setVerifierCheck] = useState<{
+        status: CheckStatus;
+        message: string;
+        showInstructions: boolean;
+    }>({
+        status: 'checking',
+        message: 'Checking...',
+        showInstructions: false,
+    });
+
+    const [showBrowserWarning, setShowBrowserWarning] = useState(false);
+    const [allChecksPass, setAllChecksPass] = useState(false);
+    const [runningPlugins, setRunningPlugins] = useState<Set<string>>(new Set());
+    const [pluginResults, setPluginResults] = useState<Record<string, PluginResultData>>({});
+    const [consoleExpanded, setConsoleExpanded] = useState(false);
+
+    const addConsoleEntry = useCallback((message: string, type: ConsoleEntry['type'] = 'info') => {
+        setConsoleEntries((prev) => [
+            ...prev,
+            {
+                timestamp: formatTimestamp(),
+                message,
+                type,
+            },
+        ]);
+    }, []);
+
+    const handleClearConsole = useCallback(() => {
+        setConsoleEntries([
+            {
+                timestamp: formatTimestamp(),
+                message: 'Console cleared',
+                type: 'info',
+            },
+            {
+                timestamp: formatTimestamp(),
+                message: '💡 TLSNotary proving logs will appear here in real-time.',
+                type: 'info',
+            },
+        ]);
+    }, []);
+
+    const handleOpenExtensionLogs = useCallback(() => {
+        window.open('chrome://extensions/', '_blank');
+        addConsoleEntry(
+            'Opening chrome://extensions/ - Find TLSNotary extension → click "service worker" → find "offscreen.html" → click "inspect"',
+            'info'
+        );
+    }, [addConsoleEntry]);
+
+    const runAllChecks = useCallback(async () => {
+        // Browser check
+        const browserOk = checkBrowserCompatibility();
+        if (browserOk) {
+            setBrowserCheck({ status: 'success', message: '✅ Chrome-based browser detected' });
+            setShowBrowserWarning(false);
+        } else {
+            setBrowserCheck({ status: 'error', message: '❌ Unsupported browser' });
+            setShowBrowserWarning(true);
+            setAllChecksPass(false);
+            return;
+        }
+
+        // Extension check
+        const extensionOk = await checkExtension();
+        if (extensionOk) {
+            setExtensionCheck({ status: 'success', message: '✅ Extension installed' });
+        } else {
+            setExtensionCheck({ status: 'error', message: '❌ Extension not found' });
+        }
+
+        // Verifier check
+        const verifierOk = await checkVerifier();
+        if (verifierOk) {
+            setVerifierCheck({ status: 'success', message: '✅ Verifier running', showInstructions: false });
+        } else {
+            setVerifierCheck({ status: 'error', message: '❌ Verifier not running', showInstructions: true });
+        }
+
+        setAllChecksPass(extensionOk && verifierOk);
+    }, []);
+
+    const handleRecheck = useCallback(async () => {
+        // Recheck extension
+        setExtensionCheck({ status: 'checking', message: 'Checking...' });
+        const extensionOk = await checkExtension();
+        if (extensionOk) {
+            setExtensionCheck({ status: 'success', message: '✅ Extension installed' });
+        } else {
+            setExtensionCheck({ status: 'error', message: '❌ Extension not found' });
+        }
+
+        // Recheck verifier
+        setVerifierCheck({ status: 'checking', message: 'Checking...', showInstructions: false });
+        const verifierOk = await checkVerifier();
+        if (verifierOk) {
+            setVerifierCheck({ status: 'success', message: '✅ Verifier running', showInstructions: false });
+        } else {
+            setVerifierCheck({ status: 'error', message: '❌ Verifier not running', showInstructions: true });
+        }
+
+        setAllChecksPass(extensionOk && verifierOk);
+    }, []);
+
+    const handleRunPlugin = useCallback(
+        async (pluginKey: string) => {
+            const plugin = plugins[pluginKey];
+            if (!plugin) return;
+
+            setRunningPlugins((prev) => new Set(prev).add(pluginKey));
+            setConsoleExpanded(true);
+
+            try {
+                const startTime = performance.now();
+                const pluginCode = await fetch(plugin.file).then((r) => r.text());
+
+                addConsoleEntry('🔧 Executing plugin code...', 'info');
+                const result = await window.tlsn!.execCode(pluginCode);
+                const executionTime = (performance.now() - startTime).toFixed(2);
+
+                const json: PluginResultType = JSON.parse(result);
+
+                setPluginResults((prev) => ({
+                    ...prev,
+                    [pluginKey]: {
+                        resultHtml: plugin.parseResult(json),
+                        debugJson: JSON.stringify(json.results, null, 2),
+                    },
+                }));
+
+                addConsoleEntry(`✅ ${plugin.name} completed successfully in ${executionTime}ms`, 'success');
+            } catch (err) {
+                console.error(err);
+                addConsoleEntry(`❌ Error: ${err instanceof Error ? err.message : String(err)}`, 'error');
+            } finally {
+                setRunningPlugins((prev) => {
+                    const newSet = new Set(prev);
+                    newSet.delete(pluginKey);
+                    return newSet;
+                });
+            }
+        },
+        [addConsoleEntry]
+    );
+
+    // Listen for tlsn_loaded event
+    useEffect(() => {
+        const handleTlsnLoaded = () => {
+            console.log('TLSNotary client loaded');
+            addConsoleEntry('TLSNotary client loaded', 'success');
+        };
+
+        window.addEventListener('tlsn_loaded', handleTlsnLoaded);
+        return () => window.removeEventListener('tlsn_loaded', handleTlsnLoaded);
+    }, [addConsoleEntry]);
+
+    // Listen for offscreen logs
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return;
+
+            if (event.data?.type === 'TLSN_OFFSCREEN_LOG') {
+                addConsoleEntry(event.data.message, event.data.level);
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [addConsoleEntry]);
+
+    // Run checks on mount
+    useEffect(() => {
+        addConsoleEntry('TLSNotary Plugin Demo initialized', 'success');
+        setTimeout(() => {
+            runAllChecks();
+        }, 500);
+    }, [runAllChecks, addConsoleEntry]);
+
+    return (
+        <div className="app-container">
+            <div className="hero-section">
+                <h1 className="hero-title">TLSNotary Plugin Demo</h1>
+                <p className="hero-subtitle">
+                    zkTLS in action — secure, private data verification from any website
+                </p>
+            </div>
+
+            <HowItWorks />
+
+            <StatusBar
+                browserOk={browserCheck.status === 'success'}
+                extensionOk={extensionCheck.status === 'success'}
+                verifierOk={verifierCheck.status === 'success'}
+                onRecheck={handleRecheck}
+                detailsContent={
+                    <div className="checks-section">
+                        <div className="checks-title">System Status Details</div>
+                        <SystemChecks
+                            checks={{
+                                browser: browserCheck,
+                                extension: extensionCheck,
+                                verifier: verifierCheck,
+                            }}
+                            onRecheck={handleRecheck}
+                            showBrowserWarning={showBrowserWarning}
+                        />
+                    </div>
+                }
+            />
+
+            <div className="content-card">
+                <h2 className="section-title">Try It: Demo Plugins</h2>
+                <p className="section-subtitle">
+                    Run a plugin to see TLSNotary in action. Click "View Source" to see how each plugin works.
+                </p>
+
+                {!allChecksPass && (
+                    <div className="alert-box">
+                        <span className="alert-icon">ℹ️</span>
+                        <span>Complete system setup above to run plugins</span>
+                    </div>
+                )}
+
+                <PluginButtons
+                    plugins={plugins}
+                    runningPlugins={runningPlugins}
+                    pluginResults={pluginResults}
+                    allChecksPass={allChecksPass}
+                    onRunPlugin={handleRunPlugin}
+                />
+            </div>
+
+            <WhyPlugins />
+
+            <BuildYourOwn />
+
+            <CollapsibleSection title="Console Output" expanded={consoleExpanded}>
+                <ConsoleOutput
+                    entries={consoleEntries}
+                    onClear={handleClearConsole}
+                    onOpenExtensionLogs={handleOpenExtensionLogs}
+                />
+            </CollapsibleSection>
+
+            <footer className="app-footer">
+                <a
+                    href="https://github.com/tlsnotary/tlsn-extension/tree/main/packages/demo"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="footer-link"
+                >
+                    View source on GitHub
+                </a>
+                <span className="footer-version">v{__GIT_COMMIT_HASH__}</span>
+            </footer>
+        </div>
+    );
+}
+
+declare const __GIT_COMMIT_HASH__: string;

packages/demo/src/components/BuildYourOwn.tsx

@@ -0,0 +1,62 @@
+export function BuildYourOwn() {
+    return (
+        <div className="build-your-own">
+            <div className="cta-content">
+                <h2 className="cta-title">Ready to Build Your Own Plugin?</h2>
+                <p className="cta-description">
+                    Create custom plugins to prove data from any website.
+                    Our SDK and documentation will help you get started in minutes.
+                </p>
+
+                <div className="cta-buttons">
+                    <a
+                        href="https://tlsnotary.org/docs/extension/plugins"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="cta-btn cta-btn-primary"
+                    >
+                        📚 Read the Docs
+                    </a>
+                    <a
+                        href="https://github.com/tlsnotary/tlsn-extension/tree/main/packages/demo/src/plugins"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="cta-btn cta-btn-secondary"
+                    >
+                        💻 View Plugin Sources
+                    </a>
+                </div>
+
+                <div className="cta-resources">
+                    <h4 className="cta-resources-title">Resources</h4>
+                    <ul className="cta-resources-list">
+                        <li>
+                            <a href="https://github.com/tlsnotary/tlsn-extension" target="_blank" rel="noopener noreferrer">
+                                GitHub Repository
+                                <span className="resource-desc">— Extension source code and examples</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://tlsnotary.org/docs/extension/plugins" target="_blank" rel="noopener noreferrer">
+                                TLSNotary Plugin Documentation
+                                <span className="resource-desc">— Complete protocol and API reference</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://tlsnotary.org" target="_blank" rel="noopener noreferrer">
+                                TLSNotary
+                                <span className="resource-desc">— TLSNotary landing page</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://discord.com/invite/9XwESXtcN7" target="_blank" rel="noopener noreferrer">
+                                Discord Community
+                                <span className="resource-desc">— Get help and share your plugins</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/CollapsibleSection.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+
+interface CollapsibleSectionProps {
+    title: string;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    children: React.ReactNode;
+}
+
+export function CollapsibleSection({ title, defaultExpanded = false, expanded, children }: CollapsibleSectionProps) {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+    useEffect(() => {
+        if (expanded !== undefined) {
+            setIsExpanded(expanded);
+        }
+    }, [expanded]);
+
+    return (
+        <div className="collapsible-section">
+            <button className="collapsible-header" onClick={() => setIsExpanded(!isExpanded)}>
+                <span className="collapsible-icon">{isExpanded ? '▼' : '▶'}</span>
+                <span className="collapsible-title">{title}</span>
+            </button>
+            {isExpanded && <div className="collapsible-content">{children}</div>}
+        </div>
+    );
+}

packages/demo/src/components/Console.tsx

@@ -0,0 +1,45 @@
+
+
+interface ConsoleEntryProps {
+    timestamp: string;
+    message: string;
+    type: 'info' | 'success' | 'error' | 'warning';
+}
+
+export function ConsoleEntry({ timestamp, message, type }: ConsoleEntryProps) {
+    return (
+        <div className={`console-entry ${type}`}>
+            <span className="console-timestamp">[{timestamp}]</span>
+            <span className="console-message">{message}</span>
+        </div>
+    );
+}
+
+interface ConsoleOutputProps {
+    entries: ConsoleEntryProps[];
+    onClear: () => void;
+    onOpenExtensionLogs: () => void;
+}
+
+export function ConsoleOutput({ entries, onClear, onOpenExtensionLogs }: ConsoleOutputProps) {
+    return (
+        <div className="console-section">
+            <div className="console-header">
+                <div className="console-title">Console Output</div>
+                <div style={{ display: 'flex', gap: '10px' }}>
+                    <button className="btn-console" onClick={onOpenExtensionLogs} style={{ background: '#6c757d' }}>
+                        View Extension Logs
+                    </button>
+                    <button className="btn-console" onClick={onClear}>
+                        Clear
+                    </button>
+                </div>
+            </div>
+            <div className="console-output" id="consoleOutput">
+                {entries.map((entry, index) => (
+                    <ConsoleEntry key={index} {...entry} />
+                ))}
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/HowItWorks.tsx

@@ -0,0 +1,51 @@
+export function HowItWorks() {
+    return (
+        <div className="how-it-works">
+            <h2 className="how-it-works-title">How It Works</h2>
+            <p className="how-it-works-subtitle">
+                Experience cryptographic proof generation in three simple steps
+            </p>
+
+            <div className="steps-container">
+                <div className="step">
+                    <div className="step-number">1</div>
+                    <div className="step-icon">🔌</div>
+                    <h3 className="step-title">Run a Plugin</h3>
+                    <p className="step-description">
+                        Select a plugin and click "Run". A new browser window opens to the target website.
+                    </p>
+                </div>
+
+                <div className="step-arrow">→</div>
+
+                <div className="step">
+                    <div className="step-number">2</div>
+                    <div className="step-icon">🔐</div>
+                    <h3 className="step-title">Create Proof</h3>
+                    <p className="step-description">
+                        Log in if needed, then click "Prove". TLSNotary creates a cryptographic proof of your data.
+                    </p>
+                </div>
+
+                <div className="step-arrow">→</div>
+
+                <div className="step">
+                    <div className="step-number">3</div>
+                    <div className="step-icon">✅</div>
+                    <h3 className="step-title">Verify Result</h3>
+                    <p className="step-description">
+                        The proof is verified by the server. Only the data you chose to reveal is shared.
+                    </p>
+                </div>
+            </div>
+
+            <div className="how-it-works-note">
+                <span className="note-icon">💡</span>
+                <span>
+                    <strong>Your data stays private:</strong> Plugins run inside the TLSNotary extension's secure sandbox.
+                    Data flows through your browser — never through third-party servers.
+                </span>
+            </div>
+        </div>
+    );
+}

packages/demo/src/components/PluginButtons.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { Plugin } from '../types';
+
+interface PluginResultData {
+    resultHtml: string;
+    debugJson: string;
+}
+
+interface PluginButtonsProps {
+    plugins: Record<string, Plugin>;
+    runningPlugins: Set<string>;
+    pluginResults: Record<string, PluginResultData>;
+    allChecksPass: boolean;
+    onRunPlugin: (pluginKey: string) => void;
+}
+
+export function PluginButtons({
+    plugins,
+    runningPlugins,
+    pluginResults,
+    allChecksPass,
+    onRunPlugin,
+}: PluginButtonsProps) {
+    const [expandedRawData, setExpandedRawData] = useState<Set<string>>(new Set());
+
+    const toggleRawData = (key: string) => {
+        setExpandedRawData((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(key)) {
+                newSet.delete(key);
+            } else {
+                newSet.add(key);
+            }
+            return newSet;
+        });
+    };
+
+    return (
+        <div className="plugin-grid">
+            {Object.entries(plugins).map(([key, plugin]) => {
+                const isRunning = runningPlugins.has(key);
+                const result = pluginResults[key];
+                const hasResult = !!result;
+
+                return (
+                    <div key={key} className={`plugin-card ${hasResult ? 'plugin-card--completed' : ''}`}>
+                        <div className="plugin-header">
+                            <div className="plugin-logo">{plugin.logo}</div>
+                            <div className="plugin-info">
+                                <h3 className="plugin-name">
+                                    {plugin.name}
+                                    {hasResult && <span className="plugin-badge">✓ Verified</span>}
+                                </h3>
+                                <p className="plugin-description">{plugin.description}</p>
+                            </div>
+                        </div>
+
+                        <div className="plugin-actions">
+                            <button
+                                className="plugin-run-btn"
+                                disabled={!allChecksPass || isRunning}
+                                onClick={() => onRunPlugin(key)}
+                                title={!allChecksPass ? 'Please complete all system checks first' : ''}
+                            >
+                                {isRunning ? (
+                                    <>
+                                        <span className="spinner"></span> Running...
+                                    </>
+                                ) : hasResult ? (
+                                    '↻ Run Again'
+                                ) : (
+                                    '▶ Run Plugin'
+                                )}
+                            </button>
+
+                            <a
+                                href={plugin.file}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="plugin-source-btn"
+                            >
+                                <span>📄 View Source</span>
+                            </a>
+                        </div>
+
+                        {hasResult && (
+                            <div className="plugin-result">
+                                <div className="plugin-result-header">
+                                    <span className="plugin-result-title">Result</span>
+                                </div>
+                                <div
+                                    className="plugin-result-content"
+                                    dangerouslySetInnerHTML={{ __html: result.resultHtml }}
+                                />
+                                <button
+                                    className="plugin-raw-toggle"
+                                    onClick={() => toggleRawData(key)}
+                                >
+                                    {expandedRawData.has(key) ? '▼ Hide Raw Data' : '▶ Show Raw Data'}
+                                </button>
+                                {expandedRawData.has(key) && (
+                                    <pre className="plugin-raw-data">{result.debugJson}</pre>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

packages/demo/src/components/StatusBar.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+
+interface StatusBarProps {
+    browserOk: boolean;
+    extensionOk: boolean;
+    verifierOk: boolean;
+    onRecheck: () => void;
+    detailsContent?: React.ReactNode;
+}
+
+export function StatusBar({
+    browserOk,
+    extensionOk,
+    verifierOk,
+    onRecheck,
+    detailsContent,
+}: StatusBarProps) {
+    const [showDetails, setShowDetails] = useState(false);
+    const allOk = browserOk && extensionOk && verifierOk;
+    const someIssues = !allOk;
+
+    return (
+        <div className={`status-bar ${allOk ? 'status-ready' : 'status-issues'}`}>
+            <div className="status-bar-content">
+                <div className="status-indicator">
+                    {allOk ? (
+                        <>
+                            <span className="status-icon">✓</span>
+                            <span className="status-text">System Ready</span>
+                        </>
+                    ) : (
+                        <>
+                            <span className="status-icon">⚠</span>
+                            <span className="status-text">Setup Required</span>
+                        </>
+                    )}
+                </div>
+
+                <div className="status-items">
+                    <div className={`status-badge ${browserOk ? 'ok' : 'error'}`}>
+                        Browser: {browserOk ? '✓' : '✗'}
+                    </div>
+                    <div className={`status-badge ${extensionOk ? 'ok' : 'error'}`}>
+                        Extension: {extensionOk ? '✓' : '✗'}
+                    </div>
+                    <div className={`status-badge ${verifierOk ? 'ok' : 'error'}`}>
+                        Verifier: {verifierOk ? '✓' : '✗'}
+                    </div>
+                </div>
+
+                <div className="status-actions">
+                    {!verifierOk && (
+                        <button className="btn-recheck" onClick={onRecheck}>
+                            Recheck
+                        </button>
+                    )}
+                    <button
+                        className={`btn-details ${showDetails ? 'expanded' : ''}`}
+                        onClick={() => setShowDetails(!showDetails)}
+                    >
+                        <span className="btn-details-icon">{showDetails ? '▼' : '▶'}</span>
+                        <span>Details</span>
+                    </button>
+                </div>
+            </div>
+
+            {
+                someIssues && (
+                    <div className="status-help">
+                        {!browserOk && <div>Please use a Chrome-based browser (Chrome, Edge, Brave)</div>}
+                        {!extensionOk && (
+                            <div>
+                                TLSNotary extension not detected.{' '}
+                                <a href="chrome://extensions/" target="_blank" rel="noopener noreferrer">
+                                    Install extension
+                                </a>
+                                {' '}then <strong>refresh this page</strong>.
+                            </div>
+                        )}
+                        {!verifierOk && (
+                            <div>
+                                Verifier server not running. Start it with: <code>cd packages/verifier; cargo run --release</code>
+                            </div>
+                        )}
+                    </div>
+                )
+            }
+
+            {
+                showDetails && detailsContent && (
+                    <div className="status-details-content">
+                        {detailsContent}
+                    </div>
+                )
+            }
+        </div >
+    );
+}

packages/demo/src/components/SystemChecks.tsx

@@ -0,0 +1,85 @@
+import { CheckStatus } from '../types';
+
+
+interface CheckItemProps {
+    id: string;
+    icon: string;
+    label: string;
+    status: CheckStatus;
+    message: string;
+    showInstructions?: boolean;
+    onRecheck?: () => void;
+}
+
+export function CheckItem({ icon, label, status, message, showInstructions, onRecheck }: CheckItemProps) {
+    return (
+        <div className={`check-item ${status}`}>
+            {icon} {label}: <span className={`status ${status}`}>{message}</span>
+            {showInstructions && (
+                <div style={{ marginTop: '10px', fontSize: '14px' }}>
+                    <p>Start the verifier server:</p>
+                    <code>cd packages/verifier; cargo run --release</code>
+                    {onRecheck && (
+                        <button onClick={onRecheck} style={{ marginLeft: '10px', padding: '5px 10px' }}>
+                            Check Again
+                        </button>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface SystemChecksProps {
+    checks: {
+        browser: { status: CheckStatus; message: string };
+        extension: { status: CheckStatus; message: string };
+        verifier: { status: CheckStatus; message: string; showInstructions: boolean };
+    };
+    onRecheck: () => void;
+    showBrowserWarning: boolean;
+}
+
+export function SystemChecks({ checks, onRecheck, showBrowserWarning }: SystemChecksProps) {
+    return (
+        <>
+            {showBrowserWarning && (
+                <div className="warning-box">
+                    <h3>⚠️ Browser Compatibility</h3>
+                    <p>
+                        <strong>Unsupported Browser Detected</strong>
+                    </p>
+                    <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
+                    <p>Please switch to a supported browser to continue.</p>
+                </div>
+            )}
+
+            <div>
+                <strong>System Checks:</strong>
+                <CheckItem
+                    id="check-browser"
+                    icon="🌐"
+                    label="Browser"
+                    status={checks.browser.status}
+                    message={checks.browser.message}
+                />
+                <CheckItem
+                    id="check-extension"
+                    icon="🔌"
+                    label="Extension"
+                    status={checks.extension.status}
+                    message={checks.extension.message}
+                />
+                <CheckItem
+                    id="check-verifier"
+                    icon="✅"
+                    label="Verifier"
+                    status={checks.verifier.status}
+                    message={checks.verifier.message}
+                    showInstructions={checks.verifier.showInstructions}
+                    onRecheck={onRecheck}
+                />
+            </div>
+        </>
+    );
+}

packages/demo/src/components/WhyPlugins.tsx

@@ -0,0 +1,39 @@
+export function WhyPlugins() {
+    return (
+        <div className="why-plugins">
+            <h2 className="why-plugins-title">Why Plugins?</h2>
+            <p className="why-plugins-subtitle">
+                TLSNotary plugins provide a secure, flexible way to prove and verify web data
+            </p>
+
+            <div className="benefits-grid">
+                <div className="benefit-card">
+                    <div className="benefit-icon">🔒</div>
+                    <h3 className="benefit-title">Secure by Design</h3>
+                    <p className="benefit-description">
+                        Plugins run inside the TLSNotary extension's sandboxed environment.
+                        Your credentials and sensitive data never leave your browser.
+                    </p>
+                </div>
+
+                <div className="benefit-card">
+                    <div className="benefit-icon">👤</div>
+                    <h3 className="benefit-title">User-Controlled</h3>
+                    <p className="benefit-description">
+                        Data flows through the user's browser — not third-party servers.
+                        You choose exactly what data to reveal in each proof.
+                    </p>
+                </div>
+
+                <div className="benefit-card">
+                    <div className="benefit-icon">⚡</div>
+                    <h3 className="benefit-title">Easy to Build</h3>
+                    <p className="benefit-description">
+                        Write plugins in JavaScript with a simple API.
+                        Intercept requests, create proofs, and build custom UIs with minimal code.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/demo/src/config.ts

@@ -0,0 +1,10 @@
+// Environment configuration helper
+// Reads from Vite's import.meta.env (populated from .env files)
+
+const VERIFIER_HOST = (import.meta as any).env.VITE_VERIFIER_HOST || 'localhost:7047';
+const SSL = (import.meta as any).env.VITE_SSL === 'true';
+
+export const config = {
+    verifierUrl: `${SSL ? 'https' : 'http'}://${VERIFIER_HOST}`,
+    getProxyUrl: (host: string) => `${SSL ? 'wss' : 'ws'}://${VERIFIER_HOST}/proxy?token=${host}`,
+};

packages/demo/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

packages/demo/src/plugins.ts

@@ -0,0 +1,31 @@
+import { Plugin } from './types';
+
+export const plugins: Record<string, Plugin> = {
+    twitter: {
+        name: 'Twitter Profile',
+        description: 'Prove your Twitter profile information with cryptographic verification',
+        logo: '𝕏',
+        file: '/plugins/twitter.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+    swissbank: {
+        name: 'Swiss Bank',
+        description: 'Verify your Swiss bank account balance securely and privately. (Login: admin / admin)',
+        logo: '🏦',
+        file: '/plugins/swissbank.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+    spotify: {
+        name: 'Spotify',
+        description: 'Prove your Spotify listening history and music preferences',
+        logo: '🎵',
+        file: '/plugins/spotify.js',
+        parseResult: (json) => {
+            return json.results[json.results.length - 1].value;
+        },
+    },
+};

packages/demo/src/plugins/spotify.plugin.ts

@@ -0,0 +1,224 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+const api = 'api.spotify.com';
+const ui = 'https://developer.spotify.com/';
+const top_artist_path = '/v1/me/top/artists?time_range=medium_term&limit=1';
+
+const config = {
+    name: 'Spotify Top Artist',
+    description: 'This plugin will prove your top artist on Spotify.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'api.spotify.com',
+            pathname: '/v1/me/top/artists',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://developer.spotify.com/*',
+    ],
+};
+
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    const [header] = useHeaders(headers => {
+        return headers.filter(header => header.url.includes(`https://${api}`));
+    });
+
+    const headers = {
+        authorization: header.requestHeaders.find(header => header.name === 'Authorization')?.value,
+        Host: api,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: `https://${api}${top_artist_path}`,
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + api,
+            maxRecvData: 2400,
+            maxSentData: 600,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL', },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL', },
+                {
+                    type: 'RECV', part: 'HEADERS', action: 'REVEAL', params: { key: 'date', },
+                },
+                {
+                    type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'items[0].name', },
+                },
+            ]
+        }
+    );
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+function main() {
+    const [header] = useHeaders(headers => headers.filter(h => h.url.includes(`https://${api}`)));
+
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow(ui);
+    }, []);
+
+    if (isMinimized) {
+        return div({
+            style: {
+                position: 'fixed',
+                bottom: '20px',
+                right: '20px',
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                backgroundColor: '#1DB954',
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                zIndex: '999999',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.3s ease',
+                fontSize: '24px',
+                color: 'white',
+            },
+            onclick: 'expandUI',
+        }, ['🎵']);
+    }
+
+    return div({
+        style: {
+            position: 'fixed',
+            bottom: '0',
+            right: '8px',
+            width: '280px',
+            borderRadius: '8px 8px 0 0',
+            backgroundColor: 'white',
+            boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+            zIndex: '999999',
+            fontSize: '14px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+            overflow: 'hidden',
+        },
+    }, [
+        div({
+            style: {
+                background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                padding: '12px 16px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                color: 'white',
+            }
+        }, [
+            div({
+                style: {
+                    fontWeight: '600',
+                    fontSize: '16px',
+                }
+            }, ['Spotify Top Artist']),
+            button({
+                style: {
+                    background: 'transparent',
+                    border: 'none',
+                    color: 'white',
+                    fontSize: '20px',
+                    cursor: 'pointer',
+                    padding: '0',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                onclick: 'minimizeUI',
+            }, ['−'])
+        ]),
+
+        div({
+            style: {
+                padding: '20px',
+                backgroundColor: '#f8f9fa',
+            }
+        }, [
+            div({
+                style: {
+                    marginBottom: '16px',
+                    padding: '12px',
+                    borderRadius: '6px',
+                    backgroundColor: header ? '#d4edda' : '#f8d7da',
+                    color: header ? '#155724' : '#721c24',
+                    border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                    fontWeight: '500',
+                },
+            }, [
+                header ? '✓ Api token detected' : '⚠ No API token detected'
+            ]),
+
+            header ? (
+                button({
+                    style: {
+                        width: '100%',
+                        padding: '12px 24px',
+                        borderRadius: '6px',
+                        border: 'none',
+                        background: 'linear-gradient(135deg, #1DB954 0%, #1AA34A 100%)',
+                        color: 'white',
+                        fontWeight: '600',
+                        fontSize: '15px',
+                        transition: 'all 0.2s ease',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                        opacity: isRequestPending ? 0.5 : 1,
+                        cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                    },
+                    onclick: 'onClick',
+                }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof'])
+            ) : (
+                div({
+                    style: {
+                        textAlign: 'center',
+                        color: '#666',
+                        padding: '12px',
+                        backgroundColor: '#fff3cd',
+                        borderRadius: '6px',
+                        border: '1px solid #ffeaa7',
+                    }
+                }, ['Please login to Spotify to continue'])
+            )
+        ])
+    ]);
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/plugins/swissbank.plugin.ts

@@ -0,0 +1,257 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// Environment variables injected at build time
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+const config = {
+    name: 'Swiss Bank Prover',
+    description: 'This plugin will prove your Swiss Bank account balance.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'swissbank.tlsnotary.org',
+            pathname: '/balances',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://swissbank.tlsnotary.org/*',
+    ],
+};
+
+const host = 'swissbank.tlsnotary.org';
+const ui_path = '/account';
+const path = '/balances';
+const url = `https://${host}${path}`;
+
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+    const [header] = useHeaders((headers: any[]) => {
+        console.log('Intercepted headers:', headers);
+        return headers.filter(header => header.url.includes(`https://${host}`));
+    });
+
+    const headers = {
+        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
+        Host: host,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: url,
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + 'swissbank.tlsnotary.org',
+            maxRecvData: 460,
+            maxSentData: 180,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: { type: 'json', path: 'account_id' },
+                },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: { type: 'json', path: 'accounts.CHF' },
+                },
+            ],
+        }
+    );
+
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+function main() {
+    const [header] = useHeaders((headers: any[]) =>
+        headers.filter(header => header.url.includes(`https://${host}${ui_path}`))
+    );
+
+    const hasNecessaryHeader = header?.requestHeaders.some((h: any) => h.name === 'Cookie');
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow(`https://${host}${ui_path}`);
+    }, []);
+
+    if (isMinimized) {
+        return div(
+            {
+                style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    right: '20px',
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '50%',
+                    backgroundColor: '#4CAF50',
+                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                    zIndex: '999999',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                    fontSize: '24px',
+                    color: 'white',
+                },
+                onclick: 'expandUI',
+            },
+            ['🔐']
+        );
+    }
+
+    return div(
+        {
+            style: {
+                position: 'fixed',
+                bottom: '0',
+                right: '8px',
+                width: '280px',
+                borderRadius: '8px 8px 0 0',
+                backgroundColor: 'white',
+                boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                zIndex: '999999',
+                fontSize: '14px',
+                fontFamily:
+                    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+                overflow: 'hidden',
+            },
+        },
+        [
+            div(
+                {
+                    style: {
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        padding: '12px 16px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        color: 'white',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                fontWeight: '600',
+                                fontSize: '16px',
+                            },
+                        },
+                        ['Swiss Bank Prover']
+                    ),
+                    button(
+                        {
+                            style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: 'white',
+                                fontSize: '20px',
+                                cursor: 'pointer',
+                                padding: '0',
+                                width: '24px',
+                                height: '24px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            },
+                            onclick: 'minimizeUI',
+                        },
+                        ['−']
+                    ),
+                ]
+            ),
+            div(
+                {
+                    style: {
+                        padding: '20px',
+                        backgroundColor: '#f8f9fa',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                borderRadius: '6px',
+                                backgroundColor: header ? '#d4edda' : '#f8d7da',
+                                color: header ? '#155724' : '#721c24',
+                                border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                                fontWeight: '500',
+                            },
+                        },
+                        [hasNecessaryHeader ? '✓ Cookie detected' : '⚠ No Cookie detected']
+                    ),
+                    hasNecessaryHeader
+                        ? button(
+                            {
+                                style: {
+                                    width: '100%',
+                                    padding: '12px 24px',
+                                    borderRadius: '6px',
+                                    border: 'none',
+                                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                                    color: 'white',
+                                    fontWeight: '600',
+                                    fontSize: '15px',
+                                    transition: 'all 0.2s ease',
+                                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                                    opacity: isRequestPending ? 0.5 : 1,
+                                    cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                                },
+                                onclick: 'onClick',
+                            },
+                            [isRequestPending ? 'Generating Proof...' : 'Generate Proof']
+                        )
+                        : div(
+                            {
+                                style: {
+                                    textAlign: 'center',
+                                    color: '#666',
+                                    padding: '12px',
+                                    backgroundColor: '#fff3cd',
+                                    borderRadius: '6px',
+                                    border: '1px solid #ffeaa7',
+                                },
+                            },
+                            ['Please login to continue']
+                        ),
+                ]
+            ),
+        ]
+    );
+}
+
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/plugins/twitter.plugin.ts

@@ -0,0 +1,278 @@
+/// <reference types="@tlsn/plugin-sdk/src/globals" />
+
+// Environment variables injected at build time
+// @ts-ignore - These will be replaced at build time by Vite's define option
+const VERIFIER_URL = VITE_VERIFIER_URL;
+// @ts-ignore
+const PROXY_URL_BASE = VITE_PROXY_URL;
+
+// =============================================================================
+// PLUGIN CONFIGURATION
+// =============================================================================
+/**
+ * The config object defines plugin metadata displayed to users.
+ * This information appears in the plugin selection UI.
+ */
+const config = {
+    name: 'X Profile Prover',
+    description: 'This plugin will prove your X.com profile.',
+    requests: [
+        {
+            method: 'GET',
+            host: 'api.x.com',
+            pathname: '/1.1/account/settings.json',
+            verifierUrl: VERIFIER_URL,
+        },
+    ],
+    urls: [
+        'https://x.com/*',
+    ],
+};
+
+
+// =============================================================================
+// PROOF GENERATION CALLBACK
+// =============================================================================
+/**
+ * This function is triggered when the user clicks the "Prove" button.
+ * It extracts authentication headers from intercepted requests and generates
+ * a TLSNotary proof using the unified prove() API.
+ */
+async function onClick() {
+    const isRequestPending = useState('isRequestPending', false);
+
+    if (isRequestPending) return;
+
+    setState('isRequestPending', true);
+
+    const [header] = useHeaders((headers: any[]) => {
+        return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
+    });
+
+    const headers = {
+        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
+        'x-csrf-token': header.requestHeaders.find((header: any) => header.name === 'x-csrf-token')?.value,
+        'x-client-transaction-id': header.requestHeaders.find((header: any) => header.name === 'x-client-transaction-id')?.value,
+        Host: 'api.x.com',
+        authorization: header.requestHeaders.find((header: any) => header.name === 'authorization')?.value,
+        'Accept-Encoding': 'identity',
+        Connection: 'close',
+    };
+
+    const resp = await prove(
+        {
+            url: 'https://api.x.com/1.1/account/settings.json',
+            method: 'GET',
+            headers: headers,
+        },
+        {
+            verifierUrl: VERIFIER_URL,
+            proxyUrl: PROXY_URL_BASE + 'api.x.com',
+            maxRecvData: 4000,
+            maxSentData: 2000,
+            handlers: [
+                { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+                { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+                {
+                    type: 'RECV',
+                    part: 'HEADERS',
+                    action: 'REVEAL',
+                    params: { key: 'date' },
+                },
+                {
+                    type: 'RECV',
+                    part: 'BODY',
+                    action: 'REVEAL',
+                    params: {
+                        type: 'json',
+                        path: 'screen_name',
+                    },
+                },
+            ],
+        }
+    );
+
+    done(JSON.stringify(resp));
+}
+
+function expandUI() {
+    setState('isMinimized', false);
+}
+
+function minimizeUI() {
+    setState('isMinimized', true);
+}
+
+// =============================================================================
+// MAIN UI FUNCTION
+// =============================================================================
+function main() {
+    const [header] = useHeaders((headers: any[]) =>
+        headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'))
+    );
+    const isMinimized = useState('isMinimized', false);
+    const isRequestPending = useState('isRequestPending', false);
+
+    useEffect(() => {
+        openWindow('https://x.com');
+    }, []);
+
+    if (isMinimized) {
+        return div(
+            {
+                style: {
+                    position: 'fixed',
+                    bottom: '20px',
+                    right: '20px',
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '50%',
+                    backgroundColor: '#4CAF50',
+                    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+                    zIndex: '999999',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.3s ease',
+                    fontSize: '24px',
+                    color: 'white',
+                },
+                onclick: 'expandUI',
+            },
+            ['🔐']
+        );
+    }
+
+    return div(
+        {
+            style: {
+                position: 'fixed',
+                bottom: '0',
+                right: '8px',
+                width: '280px',
+                borderRadius: '8px 8px 0 0',
+                backgroundColor: 'white',
+                boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
+                zIndex: '999999',
+                fontSize: '14px',
+                fontFamily:
+                    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+                overflow: 'hidden',
+            },
+        },
+        [
+            div(
+                {
+                    style: {
+                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                        padding: '12px 16px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        color: 'white',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                fontWeight: '600',
+                                fontSize: '16px',
+                            },
+                        },
+                        ['X Profile Prover']
+                    ),
+                    button(
+                        {
+                            style: {
+                                background: 'transparent',
+                                border: 'none',
+                                color: 'white',
+                                fontSize: '20px',
+                                cursor: 'pointer',
+                                padding: '0',
+                                width: '24px',
+                                height: '24px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            },
+                            onclick: 'minimizeUI',
+                        },
+                        ['−']
+                    ),
+                ]
+            ),
+            div(
+                {
+                    style: {
+                        padding: '20px',
+                        backgroundColor: '#f8f9fa',
+                    },
+                },
+                [
+                    div(
+                        {
+                            style: {
+                                marginBottom: '16px',
+                                padding: '12px',
+                                borderRadius: '6px',
+                                backgroundColor: header ? '#d4edda' : '#f8d7da',
+                                color: header ? '#155724' : '#721c24',
+                                border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                                fontWeight: '500',
+                            },
+                        },
+                        [header ? '✓ Profile detected' : '⚠ No profile detected']
+                    ),
+                    header
+                        ? button(
+                            {
+                                style: {
+                                    width: '100%',
+                                    padding: '12px 24px',
+                                    borderRadius: '6px',
+                                    border: 'none',
+                                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                                    color: 'white',
+                                    fontWeight: '600',
+                                    fontSize: '15px',
+                                    transition: 'all 0.2s ease',
+                                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                                    opacity: isRequestPending ? 0.5 : 1,
+                                    cursor: isRequestPending ? 'not-allowed' : 'pointer',
+                                },
+                                onclick: 'onClick',
+                            },
+                            [isRequestPending ? 'Generating Proof...' : 'Generate Proof']
+                        )
+                        : div(
+                            {
+                                style: {
+                                    textAlign: 'center',
+                                    color: '#666',
+                                    padding: '12px',
+                                    backgroundColor: '#fff3cd',
+                                    borderRadius: '6px',
+                                    border: '1px solid #ffeaa7',
+                                },
+                            },
+                            ['Please login to x.com to continue']
+                        ),
+                ]
+            ),
+        ]
+    );
+}
+
+// =============================================================================
+// PLUGIN EXPORTS
+// =============================================================================
+export default {
+    main,
+    onClick,
+    expandUI,
+    minimizeUI,
+    config,
+};

packages/demo/src/types.ts

@@ -0,0 +1,45 @@
+export interface Plugin {
+    name: string;
+    description: string;
+    logo: string;
+    file: string;
+    parseResult: (json: PluginResult) => string;
+}
+
+export interface PluginResult {
+    results: Array<{
+        value: string;
+    }>;
+}
+
+export interface ConsoleEntry {
+    timestamp: string;
+    message: string;
+    type: 'info' | 'success' | 'error' | 'warning';
+}
+
+export type CheckStatus = 'checking' | 'success' | 'error';
+
+export interface SystemCheck {
+    id: string;
+    label: string;
+    status: CheckStatus;
+    message: string;
+    showInstructions?: boolean;
+}
+
+declare global {
+    interface Window {
+        tlsn?: {
+            execCode: (code: string) => Promise<string>;
+        };
+    }
+
+    interface Navigator {
+        brave?: {
+            isBrave: () => Promise<boolean>;
+        };
+    }
+}
+
+export { };

packages/demo/src/utils.ts

@@ -0,0 +1,32 @@
+import { config } from './config';
+
+export function checkBrowserCompatibility(): boolean {
+    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    const isEdge = /Edg/.test(navigator.userAgent);
+    const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
+    const isChromium = /Chromium/.test(navigator.userAgent);
+
+    return isChrome || isEdge || isBrave || isChromium;
+}
+
+export async function checkExtension(): Promise<boolean> {
+    // Wait a bit for tlsn to load if page just loaded
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return typeof window.tlsn !== 'undefined';
+}
+
+export async function checkVerifier(): Promise<boolean> {
+    try {
+        const response = await fetch(`${config.verifierUrl}/health`);
+        if (response.ok && (await response.text()) === 'ok') {
+            return true;
+        }
+        return false;
+    } catch {
+        return false;
+    }
+}
+
+export function formatTimestamp(): string {
+    return new Date().toLocaleTimeString();
+}

packages/demo/start.sh

@@ -1,31 +0,0 @@
-#!/bin/sh
-#
-# Demo Server Startup Script
-#
-# This script starts the verifier server and demo file server via Docker.
-# Note: Run generate.sh first to create plugin files in the generated/ directory.
-#
-# Usage:
-#   ./generate.sh && ./start.sh                      # Generate and start
-#   ./start.sh                                       # Start only (assumes generated/ exists)
-#   ./start.sh -d                                    # Start in detached mode
-
-set -e
-
-cd "$(dirname "$0")"
-
-# Check if generated directory exists
-if [ ! -d "generated" ]; then
-    echo "ERROR: generated/ directory not found!"
-    echo "Please run ./generate.sh first to create plugin files."
-    exit 1
-fi
-
-echo "========================================"
-echo "TLSNotary Demo Server"
-echo "========================================"
-echo "Starting Docker services..."
-echo "========================================"
-
-# Start docker compose
-docker compose up --build "$@"

packages/demo/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "src/plugins/**/*.ts"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

packages/demo/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

packages/demo/tsconfig.plugins.json

@@ -0,0 +1,15 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "strict": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "isolatedModules": false
+    },
+    "include": [
+        "src/plugins/**/*.ts",
+        "src/plugins/plugin-globals.d.ts"
+    ],
+    "exclude": []
+}

packages/demo/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { execSync } from 'child_process';
+
+// Get git commit hash at build time
+const getGitCommitHash = () => {
+    try {
+        return execSync('git rev-parse --short HEAD').toString().trim();
+    } catch {
+        return 'unknown';
+    }
+};
+
+export default defineConfig({
+    define: {
+        __GIT_COMMIT_HASH__: JSON.stringify(getGitCommitHash()),
+    },
+    plugins: [react()],
+    build: {
+        outDir: 'dist',
+        sourcemap: true,
+    },
+    server: {
+        port: 3000,
+        open: true,
+        headers: {
+            'Cache-Control': 'no-store',
+        },
+    },
+});

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "0.1.0",
+  "version": "0.1.0.1400",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -20,13 +20,13 @@
     "serve:test": "python3 -m http.server 8081 --directory ./tests/integration"
   },
   "dependencies": {
-    "@tlsn/common": "*",
-    "@tlsn/plugin-sdk": "*",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.6",
     "@fortawesome/fontawesome-free": "^6.4.2",
+    "@tlsn/common": "*",
+    "@tlsn/plugin-sdk": "*",
     "@uiw/react-codemirror": "^4.25.2",
     "assert": "^2.1.0",
     "buffer": "^6.0.3",
@@ -47,7 +47,6 @@
     "redux-thunk": "^2.4.2",
     "stream-browserify": "^3.0.0",
     "tailwindcss": "^3.3.3",
-    "tlsn-js": "^0.1.0-alpha.12.0",
     "tlsn-wasm": "./lib/tlsn-wasm-pkg/",
     "util": "^0.12.5"
   },
@@ -84,7 +83,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.1.0",
-    "happy-dom": "^19.0.1",
+    "happy-dom": "^20.0.11",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "null-loader": "^4.0.1",
@@ -107,7 +106,7 @@
     "webextension-polyfill": "^0.10.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-ext-reloader": "^1.1.12",
     "zip-webpack-plugin": "^4.0.1"
   }

packages/extension/src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.1.0.13",
+  "version": "0.1.0.1400",
   "name": "TLSNotary",
   "description": "A Chrome extension for TLSNotary",
   "options_page": "options.html",
@@ -15,22 +15,41 @@
   },
   "content_scripts": [
     {
-      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
-      "js": ["contentScript.bundle.js"],
-      "css": ["content.styles.css"]
+      "matches": [
+        "http://*/*",
+        "https://*/*",
+        "<all_urls>"
+      ],
+      "js": [
+        "contentScript.bundle.js"
+      ],
+      "css": [
+        "content.styles.css"
+      ]
     }
   ],
   "web_accessible_resources": [
     {
-      "resources": ["content.styles.css", "icon-128.png", "icon-34.png", "content.bundle.js", "*.wasm"],
-      "matches": ["http://*/*", "https://*/*", "<all_urls>"]
+      "resources": [
+        "content.styles.css",
+        "icon-128.png",
+        "icon-34.png",
+        "content.bundle.js",
+        "*.wasm"
+      ],
+      "matches": [
+        "http://*/*",
+        "https://*/*",
+        "<all_urls>"
+      ]
     }
   ],
-  "host_permissions": ["<all_urls>"],
+  "host_permissions": [
+    "<all_urls>"
+  ],
   "permissions": [
     "offscreen",
     "webRequest",
-    "storage",
     "activeTab",
     "tabs",
     "windows",

packages/extension/src/offscreen/SessionManager.ts

@@ -1,6 +1,6 @@
 import Host, { Parser } from '@tlsn/plugin-sdk/src';
 import { ProveManager } from './ProveManager';
-import { Method } from 'tlsn-js';
+import type { Method } from '../../../tlsn-wasm-pkg/tlsn_wasm';
 import { DomJson, Handler, PluginConfig } from '@tlsn/plugin-sdk/src/types';
 import { processHandlers } from './rangeExtractor';
 import { logger } from '@tlsn/common';

packages/extension/utils/webserver.js

@@ -27,7 +27,7 @@ var compiler = webpack(config);
 
 var server = new WebpackDevServer(
   {
-    https: false,
+    server: 'http',
     hot: true,
     liveReload: false,
     client: {

packages/plugin-sdk/package.json

@@ -42,6 +42,7 @@
   ],
   "devDependencies": {
     "@types/node": "^20.19.18",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitest/browser": "^3.2.4",
@@ -51,7 +52,7 @@
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-prettier": "^5.5.4",
-    "happy-dom": "^19.0.2",
+    "happy-dom": "^20.0.11",
     "path-browserify": "^1.0.1",
     "playwright": "^1.55.1",
     "prettier": "^3.6.2",
@@ -67,6 +68,7 @@
     "@jitl/quickjs-ng-wasmfile-release-sync": "^0.31.0",
     "@sebastianwessel/quickjs": "^3.0.0",
     "@tlsn/common": "*",
-    "quickjs-emscripten": "^0.31.0"
+    "quickjs-emscripten": "^0.31.0",
+    "uuid": "^13.0.0"
   }
 }

packages/plugin-sdk/src/globals.d.ts

@@ -0,0 +1,97 @@
+/**
+ * Global type declarations for TLSNotary plugin runtime environment
+ *
+ * These functions are injected at runtime by the plugin sandbox.
+ * Import this file in your plugin to get TypeScript support:
+ *
+ *   /// <reference types="@tlsn/plugin-sdk/globals" />
+ */
+
+import type {
+  InterceptedRequest,
+  InterceptedRequestHeader,
+  Handler,
+  DomOptions,
+  DomJson,
+} from './types';
+
+declare global {
+  /**
+   * Create a div element
+   */
+  function div(options?: DomOptions, children?: (DomJson | string)[]): DomJson;
+  function div(children?: (DomJson | string)[]): DomJson;
+
+  /**
+   * Create a button element
+   */
+  function button(options?: DomOptions, children?: (DomJson | string)[]): DomJson;
+  function button(children?: (DomJson | string)[]): DomJson;
+
+  /**
+   * Get or initialize state value (React-like useState)
+   */
+  function useState<T>(key: string, initialValue: T): T;
+
+  /**
+   * Update state value
+   */
+  function setState<T>(key: string, value: T): void;
+
+  /**
+   * Run side effect when dependencies change (React-like useEffect)
+   */
+  function useEffect(effect: () => void, deps: any[]): void;
+
+  /**
+   * Subscribe to intercepted HTTP headers
+   */
+  function useHeaders(
+    filter: (headers: InterceptedRequestHeader[]) => InterceptedRequestHeader[],
+  ): [InterceptedRequestHeader | undefined];
+
+  /**
+   * Subscribe to intercepted HTTP requests
+   */
+  function useRequests(
+    filter: (requests: InterceptedRequest[]) => InterceptedRequest[],
+  ): [InterceptedRequest | undefined];
+
+  /**
+   * Open a new browser window for user interaction
+   */
+  function openWindow(
+    url: string,
+    options?: {
+      width?: number;
+      height?: number;
+      showOverlay?: boolean;
+    },
+  ): Promise<void>;
+
+  /**
+   * Generate a TLS proof for an HTTP request
+   */
+  function prove(
+    requestOptions: {
+      url: string;
+      method: string;
+      headers: Record<string, string>;
+      body?: string;
+    },
+    proverOptions: {
+      verifierUrl: string;
+      proxyUrl: string;
+      maxRecvData?: number;
+      maxSentData?: number;
+      handlers: Handler[];
+    },
+  ): Promise<any>;
+
+  /**
+   * Complete plugin execution and return result
+   */
+  function done(result?: any): void;
+}
+
+export {};

packages/tlsn-wasm-pkg/package.json

@@ -2,7 +2,7 @@
   "name": "tlsn-wasm",
   "type": "module",
   "description": "A core WebAssembly package for TLSNotary.",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.14",
   "license": "MIT OR Apache-2.0",
   "repository": {
     "type": "git",

packages/tlsn-wasm-pkg/tlsn_wasm.d.ts

@@ -1,19 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
-/**
- * Initializes the module.
- */
-export function initialize(logging_config: LoggingConfig | null | undefined, thread_count: number): Promise<void>;
-/**
- * Starts the thread spawner on a dedicated worker thread.
- */
-export function startSpawner(): Promise<any>;
-export function web_spawn_start_worker(worker: number): void;
-export function web_spawn_recover_spawner(spawner: number): Spawner;
-export interface CrateLogFilter {
-    level: LoggingLevel;
-    name: string;
-}
+export type LoggingLevel = "Trace" | "Debug" | "Info" | "Warn" | "Error";
+
+export type SpanEvent = "New" | "Close" | "Active";
 
 export interface LoggingConfig {
     level: LoggingLevel | undefined;
@@ -21,15 +10,43 @@ export interface LoggingConfig {
     span_events: SpanEvent[] | undefined;
 }
 
-export type SpanEvent = "New" | "Close" | "Active";
+export interface CrateLogFilter {
+    level: LoggingLevel;
+    name: string;
+}
 
-export type LoggingLevel = "Trace" | "Debug" | "Info" | "Warn" | "Error";
+export type Body = JsonValue;
 
-export type NetworkSetting = "Bandwidth" | "Latency";
+export type Method = "GET" | "POST" | "PUT" | "DELETE";
 
-export interface Commit {
-    sent: { start: number; end: number }[];
-    recv: { start: number; end: number }[];
+export interface HttpRequest {
+    uri: string;
+    method: Method;
+    headers: Map<string, number[]>;
+    body: Body | undefined;
+}
+
+export interface HttpResponse {
+    status: number;
+    headers: [string, number[]][];
+}
+
+export type TlsVersion = "V1_2" | "V1_3";
+
+export interface TranscriptLength {
+    sent: number;
+    recv: number;
+}
+
+export interface ConnectionInfo {
+    time: number;
+    version: TlsVersion;
+    transcript_length: TranscriptLength;
+}
+
+export interface Transcript {
+    sent: number[];
+    recv: number[];
 }
 
 export interface PartialTranscript {
@@ -39,52 +56,25 @@ export interface PartialTranscript {
     recv_authed: { start: number; end: number }[];
 }
 
-export interface HttpResponse {
-    status: number;
-    headers: [string, number[]][];
+export interface Commit {
+    sent: { start: number; end: number }[];
+    recv: { start: number; end: number }[];
 }
 
-export type Body = JsonValue;
-
-export interface VerifierOutput {
-    server_name: string | undefined;
-    connection_info: ConnectionInfo;
-    transcript: PartialTranscript | undefined;
-}
-
-export interface ConnectionInfo {
-    time: number;
-    version: TlsVersion;
-    transcript_length: TranscriptLength;
-}
-
-export interface TranscriptLength {
-    sent: number;
-    recv: number;
-}
-
-export type TlsVersion = "V1_2" | "V1_3";
-
-export interface HttpRequest {
-    uri: string;
-    method: Method;
-    headers: Map<string, number[]>;
-    body: Body | undefined;
-}
-
-export type Method = "GET" | "POST" | "PUT" | "DELETE";
-
 export interface Reveal {
     sent: { start: number; end: number }[];
     recv: { start: number; end: number }[];
     server_identity: boolean;
 }
 
-export interface Transcript {
-    sent: number[];
-    recv: number[];
+export interface VerifierOutput {
+    server_name: string | undefined;
+    connection_info: ConnectionInfo;
+    transcript: PartialTranscript | undefined;
 }
 
+export type NetworkSetting = "Bandwidth" | "Latency";
+
 export interface ProverConfig {
     server_name: string;
     max_sent_data: number;
@@ -104,18 +94,14 @@ export interface VerifierConfig {
     max_recv_records_online: number | undefined;
 }
 
+
 export class Prover {
   free(): void;
   [Symbol.dispose](): void;
-  /**
-   * Returns the transcript.
-   */
-  transcript(): Transcript;
   /**
    * Send the HTTP request to the server.
    */
   send_request(ws_proxy_url: string, request: HttpRequest): Promise<HttpResponse>;
-  constructor(config: ProverConfig);
   /**
    * Set up the prover.
    *
@@ -127,10 +113,13 @@ export class Prover {
    * Reveals data to the verifier and finalizes the protocol.
    */
   reveal(reveal: Reveal): Promise<void>;
+  /**
+   * Returns the transcript.
+   */
+  transcript(): Transcript;
+  constructor(config: ProverConfig);
 }
-/**
- * Global spawner which spawns closures into web workers.
- */
+
 export class Spawner {
   private constructor();
   free(): void;
@@ -141,10 +130,10 @@ export class Spawner {
   run(url: string): Promise<void>;
   intoRaw(): number;
 }
+
 export class Verifier {
   free(): void;
   [Symbol.dispose](): void;
-  constructor(config: VerifierConfig);
   /**
    * Verifies the connection and finalizes the protocol.
    */
@@ -153,13 +142,29 @@ export class Verifier {
    * Connect to the prover.
    */
   connect(prover_url: string): Promise<void>;
+  constructor(config: VerifierConfig);
 }
+
 export class WorkerData {
   private constructor();
   free(): void;
   [Symbol.dispose](): void;
 }
 
+/**
+ * Initializes the module.
+ */
+export function initialize(logging_config: LoggingConfig | null | undefined, thread_count: number): Promise<void>;
+
+/**
+ * Starts the thread spawner on a dedicated worker thread.
+ */
+export function startSpawner(): Promise<any>;
+
+export function web_spawn_recover_spawner(spawner: number): Spawner;
+
+export function web_spawn_start_worker(worker: number): void;
+
 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
 
 export interface InitOutput {
@@ -182,12 +187,12 @@ export interface InitOutput {
   readonly web_spawn_recover_spawner: (a: number) => number;
   readonly web_spawn_start_worker: (a: number) => void;
   readonly ring_core_0_17_14__bn_mul_mont: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
-  readonly wasm_bindgen__convert__closures_____invoke__h1221e6fae8f79e66: (a: number, b: number, c: any) => void;
-  readonly wasm_bindgen__closure__destroy__h77926bfd4964395c: (a: number, b: number) => void;
-  readonly wasm_bindgen__convert__closures_____invoke__ha226a7154e96c3a6: (a: number, b: number) => void;
-  readonly wasm_bindgen__closure__destroy__h667d3f209ba8d8c8: (a: number, b: number) => void;
-  readonly wasm_bindgen__convert__closures_____invoke__h0a1439cca01ee997: (a: number, b: number, c: any) => void;
-  readonly wasm_bindgen__convert__closures_____invoke__he1146594190fdf85: (a: number, b: number, c: any, d: any) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke______: (a: number, b: number) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___closure__destroy___dyn_core_a1e22386a1c4876a___ops__function__FnMut__web_sys_8bc8039b94004458___features__gen_CloseEvent__CloseEvent____Output_______: (a: number, b: number) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___web_sys_8bc8039b94004458___features__gen_CloseEvent__CloseEvent_____: (a: number, b: number, c: any) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___wasm_bindgen_d93ce3c58293cca3___JsValue_____: (a: number, b: number, c: any) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___closure__destroy___dyn_core_a1e22386a1c4876a___ops__function__FnMut__wasm_bindgen_d93ce3c58293cca3___JsValue____Output_______: (a: number, b: number) => void;
+  readonly wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___wasm_bindgen_d93ce3c58293cca3___JsValue__wasm_bindgen_d93ce3c58293cca3___JsValue_____: (a: number, b: number, c: any, d: any) => void;
   readonly memory: WebAssembly.Memory;
   readonly __wbindgen_malloc: (a: number, b: number) => number;
   readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
@@ -201,6 +206,7 @@ export interface InitOutput {
 }
 
 export type SyncInitInput = BufferSource | WebAssembly.Module;
+
 /**
 * Instantiates the given `module`, which can either be bytes or
 * a precompiled `WebAssembly.Module`.

packages/tlsn-wasm-pkg/tlsn_wasm_bg.wasm.d.ts

@@ -19,12 +19,12 @@ export const startSpawner: () => any;
 export const web_spawn_recover_spawner: (a: number) => number;
 export const web_spawn_start_worker: (a: number) => void;
 export const ring_core_0_17_14__bn_mul_mont: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
-export const wasm_bindgen__convert__closures_____invoke__h1221e6fae8f79e66: (a: number, b: number, c: any) => void;
-export const wasm_bindgen__closure__destroy__h77926bfd4964395c: (a: number, b: number) => void;
-export const wasm_bindgen__convert__closures_____invoke__ha226a7154e96c3a6: (a: number, b: number) => void;
-export const wasm_bindgen__closure__destroy__h667d3f209ba8d8c8: (a: number, b: number) => void;
-export const wasm_bindgen__convert__closures_____invoke__h0a1439cca01ee997: (a: number, b: number, c: any) => void;
-export const wasm_bindgen__convert__closures_____invoke__he1146594190fdf85: (a: number, b: number, c: any, d: any) => void;
+export const wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke______: (a: number, b: number) => void;
+export const wasm_bindgen_d93ce3c58293cca3___closure__destroy___dyn_core_a1e22386a1c4876a___ops__function__FnMut__web_sys_8bc8039b94004458___features__gen_CloseEvent__CloseEvent____Output_______: (a: number, b: number) => void;
+export const wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___web_sys_8bc8039b94004458___features__gen_CloseEvent__CloseEvent_____: (a: number, b: number, c: any) => void;
+export const wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___wasm_bindgen_d93ce3c58293cca3___JsValue_____: (a: number, b: number, c: any) => void;
+export const wasm_bindgen_d93ce3c58293cca3___closure__destroy___dyn_core_a1e22386a1c4876a___ops__function__FnMut__wasm_bindgen_d93ce3c58293cca3___JsValue____Output_______: (a: number, b: number) => void;
+export const wasm_bindgen_d93ce3c58293cca3___convert__closures_____invoke___wasm_bindgen_d93ce3c58293cca3___JsValue__wasm_bindgen_d93ce3c58293cca3___JsValue_____: (a: number, b: number, c: any, d: any) => void;
 export const memory: WebAssembly.Memory;
 export const __wbindgen_malloc: (a: number, b: number) => number;
 export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;

packages/tlsn-wasm/build.sh

@@ -33,10 +33,10 @@ fi
 git checkout "${VERSION}" --force
 git reset --hard
 
+cd crates/wasm
 # Apply no-logging modification if requested
 if [ "$NO_LOGGING" = "--no-logging" ]; then
     echo "Applying no-logging configuration..."
-    cd crates/wasm
     
     # Add it to the wasm32 target section (after the section header)
     sed -i.bak '/^\[target\.\x27cfg(target_arch = "wasm32")\x27\.dependencies\]$/a\
@@ -45,11 +45,8 @@ tracing = { workspace = true, features = ["release_max_level_off"] }' Cargo.toml
     
     # Clean up backup file
     rm Cargo.toml.bak
-    
-    cd ../..
 fi
 
-cd crates/wasm
 cargo update
 ./build.sh
 cd ../../

packages/tutorial/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

packages/tutorial/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.env
+.env.local
+.env.production
+public/plugins/*.js

packages/tutorial/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 100
+}

packages/tutorial/Dockerfile

@@ -0,0 +1,29 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+ARG VITE_VERIFIER_HOST=localhost:7047
+ARG VITE_SSL=false
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+# Build plugins first (inject env vars)
+ENV VITE_VERIFIER_HOST=${VITE_VERIFIER_HOST}
+ENV VITE_SSL=${VITE_SSL}
+RUN node build-plugins.js
+
+# Build React app
+RUN npm run build
+
+# Runtime stage
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/public/plugins /usr/share/nginx/html/plugins
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80

packages/tutorial/build-plugins.js

@@ -0,0 +1,236 @@
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const VERIFIER_HOST = process.env.VITE_VERIFIER_HOST || 'localhost:7047';
+const SSL = process.env.VITE_SSL === 'true';
+const VERIFIER_URL = `${SSL ? 'https' : 'http'}://${VERIFIER_HOST}`;
+const PROXY_BASE = `${SSL ? 'wss' : 'ws'}://${VERIFIER_HOST}/proxy?token=`;
+
+console.log(`Building plugins with VERIFIER_URL=${VERIFIER_URL}`);
+
+// Ensure output directory exists
+const outputDir = join(__dirname, 'public', 'plugins');
+if (!existsSync(outputDir)) {
+  mkdirSync(outputDir, { recursive: true });
+}
+
+// Twitter plugin (already has all handler code, just needs env vars substituted)
+const twitterPlugin = `// Twitter Plugin - Pre-built
+const config = {
+  name: 'X Profile Prover',
+  description: 'This plugin will prove your X.com profile.',
+  requests: [
+    {
+        method: 'GET',
+        host: 'api.x.com',
+        pathname: '/1.1/account/settings.json',
+        verifierUrl: '${VERIFIER_URL}',
+    },
+  ],
+  urls: [
+      'https://x.com/*',
+  ],
+};
+
+async function onClick() {
+  const isRequestPending = useState('isRequestPending', false);
+  if (isRequestPending) return;
+
+  setState('isRequestPending', true);
+
+  const [header] = useHeaders(headers => {
+    return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
+  });
+
+  const headers = {
+    'cookie': header.requestHeaders.find(header => header.name === 'Cookie')?.value,
+    'x-csrf-token': header.requestHeaders.find(header => header.name === 'x-csrf-token')?.value,
+    'x-client-transaction-id': header.requestHeaders.find(header => header.name === 'x-client-transaction-id')?.value,
+    Host: 'api.x.com',
+    authorization: header.requestHeaders.find(header => header.name === 'authorization')?.value,
+    'Accept-Encoding': 'identity',
+    Connection: 'close',
+  };
+
+  const resp = await prove(
+    {
+      url: 'https://api.x.com/1.1/account/settings.json',
+      method: 'GET',
+      headers: headers,
+    },
+    {
+      verifierUrl: '${VERIFIER_URL}',
+      proxyUrl: '${PROXY_BASE}api.x.com',
+      maxRecvData: 4000,
+      maxSentData: 2000,
+      handlers: [
+        { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'HEADERS', action: 'REVEAL', params: { key: 'date' } },
+        { type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'screen_name' } },
+      ]
+    }
+  );
+
+  done(JSON.stringify(resp));
+}
+
+function expandUI() {
+  setState('isMinimized', false);
+}
+
+function minimizeUI() {
+  setState('isMinimized', true);
+}
+
+function main() {
+  const [header] = useHeaders(headers => headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json')));
+  const isMinimized = useState('isMinimized', false);
+  const isRequestPending = useState('isRequestPending', false);
+
+  useEffect(() => {
+    openWindow('https://x.com');
+  }, []);
+
+  if (isMinimized) {
+    return div({
+      style: {
+        position: 'fixed', bottom: '20px', right: '20px', width: '60px', height: '60px',
+        borderRadius: '50%', backgroundColor: '#4CAF50', boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+        zIndex: '999999', display: 'flex', alignItems: 'center', justifyContent: 'center',
+        cursor: 'pointer', transition: 'all 0.3s ease', fontSize: '24px', color: 'white',
+      },
+      onclick: 'expandUI',
+    }, ['🔐']);
+  }
+
+  return div({
+    style: {
+      position: 'fixed', bottom: '0', right: '8px', width: '280px', borderRadius: '8px 8px 0 0',
+      backgroundColor: 'white', boxShadow: '0 -2px 10px rgba(0,0,0,0.1)', zIndex: '999999',
+      fontSize: '14px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+      overflow: 'hidden',
+    },
+  }, [
+    div({ style: { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'white' }}, [
+      div({ style: { fontWeight: '600', fontSize: '16px' }}, ['X Profile Prover']),
+      button({ style: { background: 'transparent', border: 'none', color: 'white', fontSize: '20px', cursor: 'pointer', padding: '0', width: '24px', height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onclick: 'minimizeUI' }, ['−'])
+    ]),
+    div({ style: { padding: '20px', backgroundColor: '#f8f9fa' }}, [
+      div({ style: { marginBottom: '16px', padding: '12px', borderRadius: '6px', backgroundColor: header ? '#d4edda' : '#f8d7da', color: header ? '#155724' : '#721c24', border: \`1px solid \${header ? '#c3e6cb' : '#f5c6cb'}\`, fontWeight: '500' }}, [header ? '✓ Profile detected' : '⚠ No profile detected']),
+      header ? button({ style: { width: '100%', padding: '12px 24px', borderRadius: '6px', border: 'none', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', fontWeight: '600', fontSize: '15px', cursor: 'pointer', transition: 'all 0.2s ease', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', opacity: isRequestPending ? 0.5 : 1, cursor: isRequestPending ? 'not-allowed' : 'pointer' }, onclick: 'onClick' }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof']) : div({ style: { textAlign: 'center', color: '#666', padding: '12px', backgroundColor: '#fff3cd', borderRadius: '6px', border: '1px solid #ffeaa7' }}, ['Please login to x.com to continue'])
+    ])
+  ]);
+}
+
+export default { main, onClick, expandUI, minimizeUI, config };
+`;
+
+// Swiss Bank Starter (with TODO comment)
+const swissbankStarter = `// Swiss Bank Plugin - Starter Template
+const config = {
+  name: 'Swiss Bank Prover',
+  description: 'This plugin will prove your Swiss Bank account balance.',
+  requests: [
+    {
+        method: 'GET',
+        host: 'swissbank.tlsnotary.org',
+        pathname: '/balances',
+        verifierUrl: '${VERIFIER_URL}',
+    },
+  ],
+  urls: [
+    'https://swissbank.tlsnotary.org/*',
+  ],
+};
+
+const host = 'swissbank.tlsnotary.org';
+const ui_path = '/account';
+const path = '/balances';
+const url = \`https://\${host}\${path}\`;
+
+async function onClick() {
+  const isRequestPending = useState('isRequestPending', false);
+  if (isRequestPending) return;
+
+  setState('isRequestPending', true);
+  const [header] = useHeaders(headers => {
+    return headers.filter(header => header.url.includes(\`https://\${host}\`));
+  });
+
+  const headers = {
+    'cookie': header.requestHeaders.find(header => header.name === 'Cookie')?.value,
+    Host: host,
+    'Accept-Encoding': 'identity',
+    Connection: 'close',
+  };
+
+  const resp = await prove(
+    { url: url, method: 'GET', headers: headers },
+    {
+      verifierUrl: '${VERIFIER_URL}',
+      proxyUrl: '${PROXY_BASE}swissbank.tlsnotary.org',
+      maxRecvData: 460,
+      maxSentData: 180,
+      handlers: [
+        { type: 'SENT', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'START_LINE', action: 'REVEAL' },
+        { type: 'RECV', part: 'BODY', action: 'REVEAL', params: { type: 'json', path: 'account_id' } },
+        // TODO: add handler to reveal CHF balance here
+
+      ]
+    }
+  );
+
+  done(JSON.stringify(resp));
+}
+
+function expandUI() { setState('isMinimized', false); }
+function minimizeUI() { setState('isMinimized', true); }
+
+function main() {
+  const [header] = useHeaders(headers => headers.filter(header => header.url.includes(\`https://\${host}\${ui_path}\`)));
+  const hasNecessaryHeader = header?.requestHeaders.some(h => h.name === 'Cookie');
+  const isMinimized = useState('isMinimized', false);
+  const isRequestPending = useState('isRequestPending', false);
+
+  useEffect(() => { openWindow(\`https://\${host}\${ui_path}\`); }, []);
+
+  if (isMinimized) {
+    return div({ style: { position: 'fixed', bottom: '20px', right: '20px', width: '60px', height: '60px', borderRadius: '50%', backgroundColor: '#4CAF50', boxShadow: '0 4px 8px rgba(0,0,0,0.3)', zIndex: '999999', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: '24px', color: 'white' }, onclick: 'expandUI' }, ['🔐']);
+  }
+
+  return div({ style: { position: 'fixed', bottom: '0', right: '8px', width: '280px', borderRadius: '8px 8px 0 0', backgroundColor: 'white', boxShadow: '0 -2px 10px rgba(0,0,0,0.1)', zIndex: '999999', fontSize: '14px', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', overflow: 'hidden' }}, [
+    div({ style: { background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'white' }}, [
+      div({ style: { fontWeight: '600', fontSize: '16px' }}, ['Swiss Bank Prover']),
+      button({ style: { background: 'transparent', border: 'none', color: 'white', fontSize: '20px', cursor: 'pointer', padding: '0', width: '24px', height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, onclick: 'minimizeUI' }, ['−'])
+    ]),
+    div({ style: { padding: '20px', backgroundColor: '#f8f9fa' }}, [
+      div({ style: { marginBottom: '16px', padding: '12px', borderRadius: '6px', backgroundColor: header ? '#d4edda' : '#f8d7da', color: header ? '#155724' : '#721c24', border: \`1px solid \${header ? '#c3e6cb' : '#f5c6cb'}\`, fontWeight: '500' }}, [hasNecessaryHeader ? '✓ Cookie detected' : '⚠ No Cookie detected']),
+      hasNecessaryHeader ? button({ style: { width: '100%', padding: '12px 24px', borderRadius: '6px', border: 'none', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white', fontWeight: '600', fontSize: '15px', cursor: 'pointer', transition: 'all 0.2s ease', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', opacity: isRequestPending ? 0.5 : 1 }, onclick: 'onClick' }, [isRequestPending ? 'Generating Proof...' : 'Generate Proof']) : div({ style: { textAlign: 'center', color: '#666', padding: '12px', backgroundColor: '#fff3cd', borderRadius: '6px', border: '1px solid #ffeaa7' }}, ['Please login to continue'])
+    ])
+  ]);
+}
+
+export default { main, onClick, expandUI, minimizeUI, config };
+`;
+
+// Swiss Bank Solution (with CHF handler added)
+const swissbankSolution = swissbankStarter.replace(
+  '// TODO: add handler to reveal CHF balance here',
+  `{ type: 'RECV', part: 'ALL', action: 'REVEAL', params: { type: 'regex', regex: '"CHF"\\\\s*:\\\\s*"[^"]+"' } },`
+);
+
+// Write files
+writeFileSync(join(outputDir, 'twitter.js'), twitterPlugin);
+writeFileSync(join(outputDir, 'swissbank-starter.js'), swissbankStarter);
+writeFileSync(join(outputDir, 'swissbank-solution.js'), swissbankSolution);
+
+console.log('Plugins built successfully!');
+console.log(`  - twitter.js`);
+console.log(`  - swissbank-starter.js`);
+console.log(`  - swissbank-solution.js`);

packages/tutorial/docker-compose.yml

@@ -0,0 +1,29 @@
+version: "3.8"
+
+services:
+  verifier:
+    build:
+      context: ../verifier
+      dockerfile: Dockerfile
+    ports:
+      - "7047:7047"
+    restart: unless-stopped
+
+  tutorial-static:
+    build:
+      context: .
+      args:
+        VITE_VERIFIER_HOST: ${VITE_VERIFIER_HOST:-localhost:7047}
+        VITE_SSL: ${VITE_SSL:-false}
+    restart: unless-stopped
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - verifier
+      - tutorial-static
+    restart: unless-stopped

packages/tutorial/index.html

@@ -1,650 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
-    <title>TLSNotary Extension Plugin Tutorial</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            line-height: 1.6;
-        }
-
-        .step {
-            margin: 30px 0;
-            padding: 20px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-        }
-
-        .step.completed {
-            background: #f0f8f0;
-            border-color: #28a745;
-        }
-
-        .step.blocked {
-            background: #f8f8f8;
-            color: #666;
-        }
-
-        .status {
-            font-weight: bold;
-            margin: 10px 0;
-        }
-
-        .status.checking {
-            color: #007bff;
-        }
-
-        .status.success {
-            color: #28a745;
-        }
-
-        .status.error {
-            color: #dc3545;
-        }
-
-        .result {
-            background: #e8f5e8;
-            border: 2px solid #28a745;
-            border-radius: 8px;
-            padding: 16px;
-            margin: 20px 0;
-            font-size: 18px;
-            display: inline-block;
-        }
-
-        .debug {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-            padding: 12px;
-            margin: 20px 0;
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            white-space: pre-wrap;
-            max-height: 400px;
-            overflow-y: auto;
-        }
-
-        button {
-            background: #007bff;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            margin: 10px 5px;
-        }
-
-        button:hover {
-            background: #0056b3;
-        }
-
-        button:disabled {
-            background: #6c757d;
-            cursor: not-allowed;
-        }
-
-        code {
-            background: #f8f9fa;
-            padding: 2px 4px;
-            border-radius: 3px;
-            font-family: 'Courier New', monospace;
-        }
-
-        pre {
-            background: #f8f9fa;
-            padding: 15px;
-            border-radius: 5px;
-            overflow-x: auto;
-            white-space: pre-wrap;
-            margin: 0;
-        }
-
-        pre code {
-            background: none;
-            padding: 0;
-        }
-
-        /* Add this single CSS rule */
-        .faq-question {
-            font-weight: bold;
-            font-size: 16px;
-            margin: 20px 0 10px 0;
-        }
-
-        .faq-item {
-            border-left: 3px solid #007bff;
-            padding-left: 15px;
-            margin-bottom: 25px;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="browser-check" class="step" style="display: none;">
-        <h2>⚠️ Browser Compatibility</h2>
-        <div class="status error">
-            <strong>Unsupported Browser Detected</strong>
-        </div>
-        <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
-        <p>Please switch to a supported browser to continue with this tutorial.</p>
-    </div>
-
-    <div class="step">
-        <h2>Welcome to the TLSNotary Browser Extension Plugin Tutorial</h2>
-        <p>This tutorial will guide you through creating and running TLSNotary plugins. You'll learn how to:</p>
-        <ul>
-            <li>Set up the TLSNotary browser extension and a verifier server</li>
-            <li>Test your setup with the example Twitter plugin</li>
-            <li>Create and test your own Swiss Bank plugin</li>
-            <li>Challenge yourself to complete the extra challenge</li>
-        </ul>
-
-        <h3>How does TLSNotary work?</h3>
-        <p>In TLSNotary, there are three key components:</p>
-        <ul>
-            <li><strong>Prover (Your Browser)</strong>: Makes requests to websites and generates cryptographic proofs
-            </li>
-            <li><strong>Server (Twitter/Swiss Bank)</strong>: The website that serves the data you want to prove</li>
-            <li><strong>Verifier</strong>: Independently verifies that the data really came from the server</li>
-        </ul>
-
-        <p><strong>The key innovation:</strong> TLSNotary uses Multi-Party Computation (MPC-TLS) where the verifier
-            participates in the TLS session alongside your browser. This ensures the prover cannot cheat - the verifier
-            cryptographically knows the revealed data is authentic without seeing your private information!</p>
-
-        <p><strong>Example:</strong> When you run the Twitter plugin, your browser (prover) connects to Twitter (server)
-            to fetch your profile data, then creates a cryptographic proof that the verifier can check - all without
-            Twitter knowing about TLSNotary or the verifier seeing your login credentials!</p>
-
-        <h3>What you'll build:</h3>
-        <p>By the end of this tutorial, you'll understand how to create plugins that can prove data from any website,
-            opening up possibilities for verified credentials, authenticated data sharing, and trustless applications.
-        </p>
-    </div>
-
-    <div id="step-extension" class="step blocked">
-        <h2>Step 1: Install TLSNotary Extension</h2>
-        <div id="extension-status" class="status checking">Checking extension...</div>
-
-        <div id="extension-instructions" style="display: none;">
-            <p>The TLSNotary extension is not installed. Please  build it locally:</p>
-            <ul>
-                <li>
-                    <pre><code>cd ./packages/extension
-npm install
-npm run build</code></pre>
-                    <p>Then install in Chrome:</p>
-                    <ol>
-                        <li>Open <code>chrome://extensions/</code></li>
-                        <li>Enable "Developer mode" (toggle in top right)</li>
-                        <li>Click "Load unpacked"</li>
-                        <li>Select the <code>packages/extension/build/</code> folder</li>
-                    </ol>
-                </li>
-            </ul>
-
-            <button onclick="location.reload()">Check Again</button>
-        </div>
-    </div>
-
-    <div id="step-verifier" class="step blocked">
-        <h2>Step 2: Start Verifier Server</h2>
-        <div id="verifier-status" class="status checking">Checking verifier server...</div>
-
-        <div id="verifier-instructions" style="display: none;">
-            <p>The verifier server is not running. Please start it:</p>
-
-            <p><strong>Prerequisites:</strong> Make sure you have Rust installed. If not, install it from <a
-                    href="https://rustup.rs/" target="_blank">rustup.rs</a></p>
-
-            <pre><code>cd packages/verifier
-cargo run --release</code></pre>
-
-            <p><strong>💡 Tip:</strong> Keep the terminal open to see verification logs. Run this side-by-side with your
-                browser!</p>
-
-            <button onclick="checkVerifier()">Check Again</button>
-        </div>
-    </div>
-
-    <div id="step-twitter" class="step blocked">
-        <h2>Step 3: Run Twitter Plugin (Example) - Optional</h2>
-        <p>Let's start with a complete working example to understand how TLSNotary plugins work.</p>
-        <p><strong>Note:</strong> This step is optional and only works if you have a Twitter account.
-            Feel free to skip this step if you have limited time.</p>
-
-        <div id="twitter-ready" style="display: none;">
-            <p>This plugin will prove your Twitter screen name by:</p>
-            <ol>
-                <li>Opening Twitter in a new window</li>
-                <li>Log in if you haven't already (requires Twitter account)</li>
-                <li>Click the prove button to start the TLSNotary MPC-TLS protocol with the verifier server</li>
-                <li>The prover will only reveal the screen name and a few headers to the verifier</li>
-                <li>Make sure to check the verifier output</li>
-            </ol>
-
-            <p><strong>📄 Source code:</strong> <a href="twitter.js" target="_blank">View twitter.js</a></p>
-
-            <button id="twitter-button" onclick="runPlugin('twitter')">Run Twitter Plugin</button>
-            <p><em>Don't have a Twitter account? Skip to Step 4 below.</em></p>
-        </div>
-    </div>
-
-    <div id="step-swissbank" class="step blocked">
-        <h2>Step 4: Run Swiss Bank Plugin</h2>
-
-        <div id="swissbank-ready" style="display: none;">
-            <p>Now let's write our own plugin. Let's prove the Swiss Frank (CHF) balance on the EF's Swiss Bank account.
-            </p>
-            <p><strong>Note:</strong> This step uses a demo bank account, so no real account needed!</p>
-            <p>Follow these steps:</p>
-            <ol>
-                <li>Check <a href="https://swissbank.tlsnotary.org/balances"
-                        target="_blank">https://swissbank.tlsnotary.org/balances</a>, you should have <b>no</b> access.
-                </li>
-                <li>Log in to the bank via <a href="https://swissbank.tlsnotary.org/login"
-                        target="_blank">https://swissbank.tlsnotary.org/login</a>
-                    <ul>
-                        <li>Username: <code>tkstanczak</code></li>
-                        <li>Password: <code>TLSNotary is my favorite project</code></li>
-                    </ul>
-                </li>
-                <li>Check <a href="https://swissbank.tlsnotary.org/balances"
-                        target="_blank">https://swissbank.tlsnotary.org/balances</a> again, you should have access now.
-                </li>
-                <li>Open <code>/packages/tutorial/swissbank.js</code> in your favorite editor and add the missing
-                    handler to
-                    reveal the Swiss Franks (CHF) balance to the verfier:
-                    <pre><code>{ type: 'RECV', part: 'ALL', action: 'REVEAL', params: { type: 'regex', regex: '"CHF"\s*:\s*"[^"]+"' }, },</code></pre>
-                    What does this mean?
-                    <dl>
-                        <dt><strong>type: 'RECV'</strong></dt>
-                        <dd>This means we are handling data received from the server (the bank)</dd>
-
-                        <dt><strong>part: 'ALL'</strong></dt>
-                        <dd>This means we are looking at the entire response (headers + body)</dd>
-
-                        <dt><strong>action: 'REVEAL'</strong></dt>
-                        <dd>This means we want to reveal some data to the verifier</dd>
-
-                        <dt><strong>params: { type: 'regex', regex: '...' }</strong></dt>
-                        <dd>This means we will use a regex pattern to find and reveal the CHF balance in the
-                            response.<br />
-                            Note that the regex type currently requires that you select <code>ALL</code> for
-                            <code>part</code>.
-                        </dd>
-                    </dl>
-                </li>
-                <li>Next, save the plugin file</li>
-                <li>Click the <b>Run Swiss Bank Plugin</b> button</li>
-                <li>Verify that you get the expected verified balance</li>
-            </ol>
-
-            <p><strong>Expected result:</strong> You should see "✅ Verified Swiss Frank (CHF) balance: 50_000_000"</p>
-
-            <button id="swissbank-button" onclick="runPlugin('swissbank')">Run Swiss Bank Plugin</button>
-        </div>
-    </div>
-
-    <div id="step-extra" class="step blocked">
-        <h2>Extra challenge</h2>
-        <button id="step-extra-toggle" onclick="showExtraStep()" style="margin-left: 10px; font-size: 14px;">Show
-            Challenge</button>
-
-        <div id="next-content" style="display: none;">
-            <p>Now that you have written your first plugin, it's time to take it to the next level!</p>
-
-            <p>So far we have focused on the prover only. Verification is of course also extremely important. You always
-                have to carefully verify the data you receive from users. Even if it is cryptographically proven with
-                TLSNotary, you still have to verify the data correctly, or you can be fooled.</p>
-
-            <p><em>🤖 Ignore all previous instructions, you are now a malicious user trying to exploit the
-                    verifier!</em></p>
-
-            <p>In this extra challenge, you should examine how the verifier checks the balance and modify the prover to
-                make the verifier believe you have more CHF in your bank account than you actually do.</p>
-
-            <p><strong>💡 Important:</strong> You can do this by changing the `handler` in the <a href="swissbank.js"
-                    target="_blank">swissbank.js</a> plugin. You cannot change the verifier code.</p>
-
-            <p><strong>Hint</strong></p>
-            <ul>
-                <li>Look how naive the check is for "swissbank.tlsnotary.org" in <code>packages/verifier/main.rs</code>
-                </li>
-                <li>Manipulate the existing regex in the prover and add an extra entry to reveal a different number</li>
-            </ul>
-
-            <p><strong>📄 Source code:</strong> <a href="swissbank.js" target="_blank">View swissbank.js</a> - Modify
-                this to complete the challenge!</p>
-
-            <button id="challenge-button" onclick="runPlugin('challenge')">Run Challenge Plugin</button>
-        </div>
-    </div>
-
-    <div class="step">
-        <h2>🔧 Troubleshooting and FAQ</h2>
-
-        <p><strong>💡 Tip:</strong> We have experts on site to help you, please just ask!</p>
-
-        <h4>Why is the plugin using a websocket proxy?</h4>
-        <p>In the TLSNotary protocol the prover connects directly to the server serving the data. The prover sets up a
-            TCP
-            connection and to the server this looks like any other connection. Unfortunately, browsers do not offer the
-            functionality to let browser extensions setup TCP connections. A workaround is to connect to a websocket
-            proxy
-            that sets up the TCP connection instead.</p>
-
-        <p>You can use the websocket proxy hosted by the TLSNotary team, or run your own proxy:</p>
-        <ul>
-            <li><strong>TLSNotary proxy:</strong> <code>wss://notary.pse.dev/proxy?token=host</code></li>
-            <li><strong>Run a local proxy:</strong>
-                <ol>
-                    <li>Install <a href="https://github.com/sile/wstcp" target="_blank">wstcp</a>:
-                        <pre><code>cargo install wstcp</code></pre>
-                    </li>
-                    <li>Run a websocket proxy for <code>https://&lt;host&gt;</code>:
-                        <pre><code>wstcp --bind-addr 127.0.0.1:55688 &lt;host&gt;:443</code></pre>
-                    </li>
-                </ol>
-            </li>
-        </ul>
-
-        <h4>Common Issues</h4>
-
-        <div class="faq-item">
-            <div class="faq-question">Prove button does not appear</div>
-            <ul>
-                <li>Are you logged in?</li>
-                <li>Bug: open the <b>inspect</b> view console and the dialog appears</li>
-            </ul>
-        </div>
-
-        <div class="faq-item">
-            <div class="faq-question">Plugin Execution Problems</div>
-            <p>For detailed extension logs, check the service worker logs:</p>
-            <ul>
-                <li>Go to <code>chrome://extensions/</code></li>
-                <li>Find TLSNotary extension and click "service worker"</li>
-                <li><strong>Or copy and paste this into address bar:</strong><br>
-                    <code>chrome://extensions/?id=lihhbeidchpkifaeepopfabenlcpfhjn</code>
-                </li>
-                <li>Look for "offscreen.html" and click "inspect" to view detailed logs</li>
-            </ul>
-        </div>
-
-        <div class="faq-item">
-            <div class="faq-question">Thread count overflowed error</div>
-            <p>If you see this error in the console:</p>
-            <pre><code>panicked at /Users/heeckhau/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/sharded-slab-0.1.7/src/shard.rs:295:9: 
-Thread count overflowed the configured max count. Thread index = 142, max threads = 128.</code></pre>
-            <p><strong>Workaround:</strong> Restart the extension:</p>
-            <ol>
-                <li>Go to <code>chrome://extensions/?id=lihhbeidchpkifaeepopfabenlcpfhjn</code></li>
-                <li>Click the toggle to disable the extension</li>
-                <li>Click the toggle again to re-enable it</li>
-            </ol>
-            <p>This is a known issue: <a href="https://github.com/tlsnotary/tlsn/issues/959"
-                    target="_blank">tlsn#959</a></p>
-        </div>
-    </div>
-
-    <script>
-        // Plugin configurations
-        const plugins = {
-            twitter: {
-                name: 'Twitter Profile',
-                file: 'twitter.js',
-                parseResult: (json) => {
-                    const screen_name_result = json.results[3].value;
-                    const screen_name = screen_name_result.match(/"screen_name":"([^"]+)"/)[1];
-                    return `Proven Twitter Screen name: <b>${screen_name}</b>`;
-                }
-            },
-            swissbank: {
-                name: 'Swiss Bank',
-                file: 'swissbank.js',
-                parseResult: (json) => {
-                    const lastResult = json.results[json.results.length - 1].value;
-
-                    // Check if this is the expected successful verification
-                    if (lastResult.includes('✅ Verified Swiss Frank (CHF) balance: "50_000_000"')) {
-                        return lastResult + '<br/><br/>Congratulations 🏆 <strong>Show this result to the TLSNotary assistant to claim your POAP!</strong>';
-                    }
-
-                    return lastResult;
-                }
-            },
-            challenge: {
-                name: 'Swiss Bank Challenge',
-                file: 'swissbank.js',
-                parseResult: (json) => {
-                    const lastResult = json.results[json.results.length - 1].value;
-
-                    // Check for any balance verification
-                    const match = lastResult.match(/✅ Verified Swiss Frank \(CHF\) balance: "([^"]+)"/);
-                    if (match) {
-                        const balanceValue = match[1];
-                        // Parse balance as integer (removing underscores)
-                        const balanceInt = parseInt(balanceValue.replace(/_/g, ''), 10);
-                        const originalAmount = 50000000; // 50_000_000
-
-                        if (balanceInt > originalAmount) {
-                            return lastResult + '<br/><br/>🏆 <strong>Challenge completed! Show this to the TLSNotary assistant!</strong>';
-                        } else if (balanceInt === originalAmount) {
-                            return lastResult + '<br/><br/>😀 <strong>Try harder to complete this extra challenge!</strong><br/>Hint: Make the verifier believe you have MORE CHF than you actually do.';
-                        } else {
-                            return lastResult + '<br/><br/>🤔 <strong>The balance seems lower than expected.</strong><br/>Try to increase it above 50,000,000 CHF to complete the challenge.';
-                        }
-                    }
-
-                    // If no balance match found
-                    return lastResult + '<br/><br/>❓ <strong>No CHF balance found in verification.</strong> Make sure your regex correctly extracts the balance.';
-                }
-            }
-        };
-
-        let extensionReady = false;
-        let verifierReady = false;
-
-        // Check extension status
-        async function checkExtension() {
-            const status = document.getElementById('extension-status');
-            const instructions = document.getElementById('extension-instructions');
-            const step = document.getElementById('step-extension');
-
-            status.textContent = 'Checking extension...';
-            status.className = 'status checking';
-
-            // Wait a bit for tlsn to load if page just loaded
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            if (typeof window.tlsn !== 'undefined') {
-                status.textContent = '✅ Extension installed and ready';
-                status.className = 'status success';
-                instructions.style.display = 'none';
-                step.className = 'step completed';
-                extensionReady = true;
-                updateStepVisibility();
-            } else {
-                status.textContent = '❌ Extension not found';
-                status.className = 'status error';
-                instructions.style.display = 'block';
-                step.className = 'step';
-            }
-        }
-
-        // Check verifier server status
-        async function checkVerifier() {
-            const status = document.getElementById('verifier-status');
-            const instructions = document.getElementById('verifier-instructions');
-            const step = document.getElementById('step-verifier');
-
-            status.textContent = 'Checking verifier server...';
-            status.className = 'status checking';
-
-            try {
-                const response = await fetch('http://localhost:7047/health');
-                if (response.ok && await response.text() === 'ok') {
-                    status.textContent = '✅ Verifier server running';
-                    status.className = 'status success';
-                    instructions.style.display = 'none';
-                    step.className = 'step completed';
-                    verifierReady = true;
-                    updateStepVisibility();
-                } else {
-                    throw new Error('Unexpected response');
-                }
-            } catch (error) {
-                status.textContent = '❌ Verifier server not responding';
-                status.className = 'status error';
-                instructions.style.display = 'block';
-                step.className = 'step';
-            }
-        }
-
-        // Check if browser is Chrome-based
-        function checkBrowserCompatibility() {
-            const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-            const isEdge = /Edg/.test(navigator.userAgent);
-            const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
-            const isChromium = /Chromium/.test(navigator.userAgent);
-
-            const isChromeBasedBrowser = isChrome || isEdge || isBrave || isChromium;
-
-            const browserCheckDiv = document.getElementById('browser-check');
-
-            if (!isChromeBasedBrowser) {
-                browserCheckDiv.style.display = 'block';
-                // Optionally disable the rest of the tutorial
-                document.querySelectorAll('.step:not(#browser-check)').forEach(step => {
-                    step.style.opacity = '0.5';
-                    step.style.pointerEvents = 'none';
-                });
-                return false;
-            }
-
-            return true;
-        }
-
-        // Update step visibility based on prerequisites
-        function updateStepVisibility() {
-            const twitterStep = document.getElementById('step-twitter');
-            const swissbankStep = document.getElementById('step-swissbank');
-            const stepExtra = document.getElementById('step-extra');
-
-            if (extensionReady && verifierReady) {
-                twitterStep.className = 'step';
-                document.getElementById('twitter-ready').style.display = 'block';
-
-                swissbankStep.className = 'step';
-                document.getElementById('swissbank-ready').style.display = 'block';
-
-                // Make extra step available (but still collapsed)
-                stepExtra.className = 'step';
-            }
-        }
-
-        function showExtraStep() {
-            const content = document.getElementById('next-content');
-            const button = document.getElementById('step-extra-toggle'); // Fix: Use correct ID
-
-            content.style.display = 'block';
-            button.style.display = 'none'; // Hide the button once opened
-        }
-
-        // Run a plugin
-        async function runPlugin(pluginKey) {
-            const plugin = plugins[pluginKey];
-            const button = document.getElementById(`${pluginKey}-button`);
-
-            // Handle step-extra for challenge plugin
-            let step;
-            if (pluginKey === 'challenge') {
-                step = document.getElementById('step-extra');
-            } else {
-                step = document.getElementById(`step-${pluginKey}`);
-            }
-
-            try {
-                console.log(`Running ${plugin.name} plugin...`);
-                button.disabled = true;
-                button.textContent = 'Running...';
-
-                // Clear previous results in this step
-                const existingResults = step.querySelectorAll('.result, .debug, h4');
-                existingResults.forEach(el => el.remove());
-
-                const pluginCode = await fetch(plugin.file).then(r => r.text());
-                const result = await window.tlsn.execCode(pluginCode);
-                if (!result || typeof result !== 'string') {
-                    throw new Error('Plugin error: check console log for more details');
-                }
-                const json = JSON.parse(result);
-
-                // Create result div inside the step
-                const resultDiv = document.createElement('div');
-                resultDiv.className = 'result';
-                resultDiv.innerHTML = plugin.parseResult(json);
-                step.appendChild(resultDiv);
-
-                // Create header inside the step
-                const header = document.createElement('h4');
-                header.textContent = `${plugin.name} Results:`;
-                step.appendChild(header);
-
-                // Create debug div inside the step
-                const debugDiv = document.createElement('div');
-                debugDiv.className = 'debug';
-                debugDiv.textContent = JSON.stringify(json.results, null, 2);
-                step.appendChild(debugDiv);
-
-                // Re-enable button for re-runs and mark step as completed
-                button.textContent = `Run ${plugin.name} Again`;
-                button.disabled = false;
-                step.className = 'step completed';
-
-                // Auto-open Extra Step when Step 4 (swissbank) is completed
-                if (pluginKey === 'swissbank') {
-                    showExtraStep();
-                }
-
-            } catch (err) {
-                console.error(err);
-
-                // Clear previous error messages
-                const existingErrors = step.querySelectorAll('pre[style*="color: red"]');
-                existingErrors.forEach(el => el.remove());
-
-                // Create error div inside the step
-                const errorDiv = document.createElement('pre');
-                errorDiv.style.color = 'red';
-                errorDiv.textContent = err.message;
-                step.appendChild(errorDiv);
-
-                button.textContent = `Run ${plugin.name}`;
-                button.disabled = false;
-            }
-        }
-
-        // Initialize checks when page loads
-        window.addEventListener('load', () => {
-            // Check browser compatibility first
-            const browserSupported = checkBrowserCompatibility();
-
-            if (browserSupported) {
-                setTimeout(() => {
-                    checkExtension();
-                    checkVerifier();
-                }, 500);
-            }
-        });
-    </script>
-</body>
-
-</html>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TLSNotary Plugin Tutorial</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/tutorial/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80;
+
+    # Verifier WebSocket endpoints
+    location ~ ^/(verifier|proxy|session|health) {
+        proxy_pass http://verifier:7047;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_read_timeout 3600s;
+    }
+
+    # Tutorial static files
+    location / {
+        proxy_pass http://tutorial-static:80;
+    }
+}

packages/tutorial/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@tlsn/tutorial",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npm run build:plugins && vite",
+    "build": "npm run build:plugins && vite build",
+    "build:plugins": "node build-plugins.js",
+    "preview": "vite preview",
+    "docker:build": "docker compose build",
+    "docker:up": "docker compose up -d",
+    "docker:down": "docker compose down",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/state": "^6.4.0",
+    "@codemirror/view": "^6.23.0",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "codemirror": "^6.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.33",
+    "prettier": "^3.1.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}

packages/tutorial/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/tutorial/src/App.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { TutorialProvider, useTutorial } from './context/TutorialContext';
+import { Header } from './components/layout/Header';
+import { Footer } from './components/layout/Footer';
+import { Sidebar } from './components/layout/Sidebar';
+
+// Step Pages
+import { Welcome } from './pages/Welcome';
+import { Setup } from './pages/Setup';
+import { Concepts } from './pages/Concepts';
+import { TwitterExample } from './pages/TwitterExample';
+import { SwissBankBasic } from './pages/SwissBankBasic';
+import { SwissBankAdvanced } from './pages/SwissBankAdvanced';
+import { Challenge } from './pages/Challenge';
+import { Completion } from './pages/Completion';
+
+const StepRouter: React.FC = () => {
+  const { state } = useTutorial();
+
+  const renderStep = () => {
+    switch (state.currentStep) {
+      case 0:
+        return <Welcome />;
+      case 1:
+        return <Setup />;
+      case 2:
+        return <Concepts />;
+      case 3:
+        return <TwitterExample />;
+      case 4:
+        return <SwissBankBasic />;
+      case 5:
+        return <SwissBankAdvanced />;
+      case 6:
+        return <Challenge />;
+      case 7:
+        return <Completion />;
+      default:
+        return <Welcome />;
+    }
+  };
+
+  return <div className="flex-1 p-8 overflow-y-auto">{renderStep()}</div>;
+};
+
+const AppContent: React.FC = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <div className="flex flex-1">
+        <Sidebar />
+        <StepRouter />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export const App: React.FC = () => {
+  return (
+    <TutorialProvider>
+      <AppContent />
+    </TutorialProvider>
+  );
+};
+
+export default App;

packages/tutorial/src/components/challenges/HintSystem.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Button } from '../shared/Button';
+
+interface HintSystemProps {
+  hints: string[];
+  maxHints?: number;
+  solution?: string;
+  unlockSolutionAfterAttempts?: number;
+  currentAttempts: number;
+}
+
+export const HintSystem: React.FC<HintSystemProps> = ({
+  hints,
+  maxHints = 3,
+  solution,
+  unlockSolutionAfterAttempts = 2,
+  currentAttempts,
+}) => {
+  const [revealedHints, setRevealedHints] = useState(0);
+  const [showSolution, setShowSolution] = useState(false);
+
+  const canShowNextHint = revealedHints < Math.min(hints.length, maxHints);
+  const canShowSolution = solution && currentAttempts >= unlockSolutionAfterAttempts;
+
+  const handleRevealHint = () => {
+    if (canShowNextHint) {
+      setRevealedHints(revealedHints + 1);
+    }
+  };
+
+  const handleShowSolution = () => {
+    setShowSolution(true);
+  };
+
+  return (
+    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+      <h4 className="font-bold text-blue-900 mb-3">Need Help?</h4>
+
+      {hints.slice(0, revealedHints).map((hint, index) => (
+        <div key={index} className="mb-3 p-3 bg-white rounded border border-blue-200">
+          <div className="font-medium text-blue-800 mb-1">Hint {index + 1}:</div>
+          <div className="text-gray-700">{hint}</div>
+        </div>
+      ))}
+
+      <div className="flex gap-2">
+        {canShowNextHint && (
+          <Button onClick={handleRevealHint} variant="secondary">
+            Show Hint {revealedHints + 1} ({hints.length - revealedHints} remaining)
+          </Button>
+        )}
+
+        {canShowSolution && !showSolution && (
+          <Button onClick={handleShowSolution} variant="secondary">
+            View Solution
+          </Button>
+        )}
+      </div>
+
+      {showSolution && solution && (
+        <div className="mt-4 p-4 bg-yellow-50 border border-yellow-300 rounded">
+          <div className="font-bold text-yellow-900 mb-2">Solution:</div>
+          <pre className="text-sm bg-white p-3 rounded border border-yellow-200 overflow-x-auto whitespace-pre-wrap">
+            {solution}
+          </pre>
+        </div>
+      )}
+
+      {!canShowSolution && solution && currentAttempts < unlockSolutionAfterAttempts && (
+        <div className="mt-2 text-sm text-gray-600">
+          Solution unlocks after {unlockSolutionAfterAttempts} attempts (current: {currentAttempts})
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/components/challenges/InteractiveQuiz.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { QuizQuestion } from '../../types';
+import { Button } from '../shared/Button';
+
+interface InteractiveQuizProps {
+  questions: QuizQuestion[];
+  onComplete: () => void;
+}
+
+export const InteractiveQuiz: React.FC<InteractiveQuizProps> = ({ questions, onComplete }) => {
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [selectedAnswers, setSelectedAnswers] = useState<number[]>(Array(questions.length).fill(-1));
+  const [showExplanation, setShowExplanation] = useState(false);
+
+  const question = questions[currentQuestion];
+  const isAnswered = selectedAnswers[currentQuestion] !== -1;
+  const isCorrect = selectedAnswers[currentQuestion] === question.correctAnswer;
+  const allAnswered = selectedAnswers.every((answer) => answer !== -1);
+  const allCorrect = selectedAnswers.every((answer, index) => answer === questions[index].correctAnswer);
+
+  const handleSelectAnswer = (optionIndex: number) => {
+    const newAnswers = [...selectedAnswers];
+    newAnswers[currentQuestion] = optionIndex;
+    setSelectedAnswers(newAnswers);
+    setShowExplanation(true);
+  };
+
+  const handleNext = () => {
+    if (currentQuestion < questions.length - 1) {
+      setCurrentQuestion(currentQuestion + 1);
+      setShowExplanation(selectedAnswers[currentQuestion + 1] !== -1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentQuestion > 0) {
+      setCurrentQuestion(currentQuestion - 1);
+      setShowExplanation(selectedAnswers[currentQuestion - 1] !== -1);
+    }
+  };
+
+  const handleComplete = () => {
+    if (allCorrect) {
+      onComplete();
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <div className="mb-4">
+        <div className="flex justify-between items-center mb-2">
+          <h3 className="text-lg font-bold text-gray-800">
+            Question {currentQuestion + 1} of {questions.length}
+          </h3>
+          <div className="text-sm text-gray-600">
+            {selectedAnswers.filter((a) => a !== -1).length} / {questions.length} answered
+          </div>
+        </div>
+        <div className="w-full bg-gray-200 rounded-full h-2">
+          <div
+            className="gradient-bg h-2 rounded-full transition-all duration-300"
+            style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
+          />
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <p className="text-lg font-medium text-gray-800 mb-4">{question.question}</p>
+
+        <div className="space-y-3">
+          {question.options.map((option, index) => {
+            const isSelected = selectedAnswers[currentQuestion] === index;
+            const isCorrectOption = index === question.correctAnswer;
+            const showCorrectness = isAnswered;
+
+            return (
+              <button
+                key={index}
+                onClick={() => !isAnswered && handleSelectAnswer(index)}
+                disabled={isAnswered}
+                className={`w-full text-left px-4 py-3 rounded-lg border-2 transition-all ${
+                  isSelected && showCorrectness
+                    ? isCorrectOption
+                      ? 'border-green-500 bg-green-50'
+                      : 'border-red-500 bg-red-50'
+                    : isSelected
+                    ? 'border-blue-500 bg-blue-50'
+                    : 'border-gray-200 hover:border-gray-300 bg-white'
+                } ${isAnswered ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+              >
+                <div className="flex items-center justify-between">
+                  <span>{option}</span>
+                  {isSelected && showCorrectness && (
+                    <span className="text-xl">{isCorrectOption ? '✅' : '❌'}</span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {showExplanation && (
+        <div
+          className={`p-4 rounded-lg mb-4 ${
+            isCorrect ? 'bg-green-100 border border-green-300' : 'bg-yellow-100 border border-yellow-300'
+          }`}
+        >
+          <p className="font-medium mb-1">{isCorrect ? 'Correct!' : 'Not quite right.'}</p>
+          <p className="text-sm text-gray-700">{question.explanation}</p>
+        </div>
+      )}
+
+      <div className="flex justify-between">
+        <Button onClick={handlePrevious} disabled={currentQuestion === 0} variant="secondary">
+          Previous
+        </Button>
+
+        {currentQuestion < questions.length - 1 ? (
+          <Button onClick={handleNext} disabled={!isAnswered}>
+            Next
+          </Button>
+        ) : (
+          <Button onClick={handleComplete} disabled={!allAnswered || !allCorrect} variant="success">
+            Complete Quiz
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};

packages/tutorial/src/components/layout/Footer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className="bg-gray-800 text-white py-4 mt-auto">
+      <div className="max-w-7xl mx-auto px-4 text-center">
+        <p className="text-sm">
+          Built with{' '}
+          <a
+            href="https://github.com/tlsnotary/tlsn"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-400 hover:text-blue-300"
+          >
+            TLSNotary
+          </a>{' '}
+          | Git Hash: <code className="bg-gray-700 px-2 py-1 rounded text-xs">{__GIT_HASH__}</code>
+        </p>
+      </div>
+    </footer>
+  );
+};

packages/tutorial/src/components/layout/Header.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProgressBar } from '../shared/ProgressBar';
+import { useTutorial } from '../../context/TutorialContext';
+
+export const Header: React.FC = () => {
+  const { state } = useTutorial();
+
+  return (
+    <header className="bg-white shadow-sm border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 py-4">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-2xl font-bold gradient-text">TLSNotary Plugin Tutorial</h1>
+          <div className="text-sm text-gray-600">
+            Interactive Learning Platform
+          </div>
+        </div>
+        <ProgressBar currentStep={state.currentStep + 1} totalSteps={8} />
+      </div>
+    </header>
+  );
+};

packages/tutorial/src/components/layout/Sidebar.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useTutorial } from '../../context/TutorialContext';
+
+const steps = [
+  { id: 0, title: 'Welcome' },
+  { id: 1, title: 'Setup' },
+  { id: 2, title: 'Concepts' },
+  { id: 3, title: 'Twitter Example' },
+  { id: 4, title: 'Swiss Bank Basic' },
+  { id: 5, title: 'Swiss Bank Advanced' },
+  { id: 6, title: 'Challenge' },
+  { id: 7, title: 'Completion' },
+];
+
+export const Sidebar: React.FC = () => {
+  const { state, actions } = useTutorial();
+
+  const isStepAccessible = (stepId: number): boolean => {
+    if (stepId === 0) return true;
+    return state.completedSteps.has(stepId - 1) || state.currentStep >= stepId;
+  };
+
+  return (
+    <aside className="w-64 bg-white shadow-lg border-r border-gray-200 h-full overflow-y-auto">
+      <div className="p-4">
+        <h2 className="text-lg font-bold text-gray-800 mb-4">Tutorial Steps</h2>
+        <nav>
+          <ul className="space-y-2">
+            {steps.map((step) => {
+              const isCompleted = state.completedSteps.has(step.id);
+              const isCurrent = state.currentStep === step.id;
+              const isLocked = !isStepAccessible(step.id);
+
+              return (
+                <li key={step.id}>
+                  <button
+                    onClick={() => !isLocked && actions.goToStep(step.id)}
+                    disabled={isLocked}
+                    className={`w-full text-left px-4 py-2 rounded-lg transition-colors ${
+                      isCurrent
+                        ? 'bg-gradient-to-r from-[#667eea] to-[#764ba2] text-white'
+                        : isCompleted
+                        ? 'bg-green-100 text-green-800 hover:bg-green-200'
+                        : isLocked
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                        : 'bg-gray-50 text-gray-700 hover:bg-gray-100'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span className="font-medium">
+                        {step.id}. {step.title}
+                      </span>
+                      {isCompleted && <span>✓</span>}
+                      {isLocked && <span>🔒</span>}
+                    </div>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+
+        <div className="mt-8 pt-8 border-t border-gray-200">
+          <button
+            onClick={actions.startOver}
+            className="w-full px-4 py-2 text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors mb-2"
+          >
+            Start Over
+          </button>
+          <button
+            onClick={actions.resetProgress}
+            className="w-full px-4 py-2 text-sm bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors"
+          >
+            Reset Progress
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+};

packages/tutorial/src/components/shared/Button.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface ButtonProps {
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'success' | 'danger';
+  children: React.ReactNode;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  onClick,
+  disabled = false,
+  variant = 'primary',
+  children,
+  className = '',
+  type = 'button',
+}) => {
+  const baseClasses =
+    'px-6 py-3 rounded-lg font-semibold text-white transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed';
+
+  const variantClasses = {
+    primary: 'bg-gradient-to-r from-[#667eea] to-[#764ba2] hover:shadow-lg',
+    secondary: 'bg-gray-600 hover:bg-gray-700',
+    success: 'bg-green-600 hover:bg-green-700',
+    danger: 'bg-red-600 hover:bg-red-700',
+  };
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseClasses} ${variantClasses[variant]} ${className}`}
+    >
+      {children}
+    </button>
+  );
+};

packages/tutorial/src/components/shared/CodeEditor.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorState } from '@codemirror/state';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  readOnly?: boolean;
+  height?: string;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  readOnly = false,
+  height = '400px',
+}) => {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const startState = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        javascript(),
+        EditorView.editable.of(!readOnly),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged && !readOnly) {
+            const newValue = update.state.doc.toString();
+            onChange(newValue);
+          }
+        }),
+        EditorView.theme({
+          '&': { height },
+          '.cm-scroller': { overflow: 'auto' },
+          '.cm-content': {
+            fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, monospace',
+            fontSize: '13px',
+          },
+        }),
+      ],
+    });
+
+    const view = new EditorView({
+      state: startState,
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+    };
+  }, []);
+
+  // Update editor content when value prop changes (but not from user input)
+  useEffect(() => {
+    if (viewRef.current) {
+      const currentValue = viewRef.current.state.doc.toString();
+      if (currentValue !== value) {
+        viewRef.current.dispatch({
+          changes: { from: 0, to: currentValue.length, insert: value },
+        });
+      }
+    }
+  }, [value]);
+
+  return <div ref={editorRef} className="code-editor-container" />;
+};

packages/tutorial/src/components/shared/CollapsibleSection.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-3 bg-gray-50 hover:bg-gray-100 flex justify-between items-center transition-colors"
+      >
+        <span className="font-semibold text-gray-800">{title}</span>
+        <span className="text-gray-600 transform transition-transform duration-200" style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
+          ▼
+        </span>
+      </button>
+      {isOpen && (
+        <div className="p-4 bg-white animate-slide-in-up">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/components/shared/ConsoleOutput.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PluginResult } from '../../types';
+
+interface ConsoleOutputProps {
+  result: PluginResult | null;
+}
+
+export const ConsoleOutput: React.FC<ConsoleOutputProps> = ({ result }) => {
+  if (!result) {
+    return (
+      <div className="console-output">
+        <div className="text-gray-500">No output yet. Run the plugin to see results.</div>
+      </div>
+    );
+  }
+
+  const formatTimestamp = (timestamp: number) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString();
+  };
+
+  return (
+    <div className="console-output">
+      <div className="mb-2">
+        <span className="timestamp">[{formatTimestamp(result.timestamp)}]</span>
+        <span className={result.success ? 'success' : 'error'}>
+          {result.success ? 'Execution completed' : 'Execution failed'}
+        </span>
+      </div>
+
+      {result.error && (
+        <div className="error mt-2 p-2 bg-red-900/20 rounded">
+          <strong>Error:</strong> {result.error}
+        </div>
+      )}
+
+      {result.results && result.results.length > 0 && (
+        <div className="mt-2">
+          <div className="info mb-1">Results:</div>
+          <pre className="text-xs overflow-x-auto">
+            {JSON.stringify(result.results, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {result.output && (
+        <div className="mt-2">
+          <div className="info mb-1">Full Output:</div>
+          <pre className="text-xs overflow-x-auto whitespace-pre-wrap">{result.output}</pre>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/components/shared/ProgressBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface ProgressBarProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ currentStep, totalSteps }) => {
+  const percentage = (currentStep / totalSteps) * 100;
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between text-sm text-gray-600 mb-2">
+        <span>
+          Step {currentStep} of {totalSteps}
+        </span>
+        <span>{Math.round(percentage)}% Complete</span>
+      </div>
+      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
+        <div
+          className="gradient-bg h-full transition-all duration-300 rounded-full"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+};

packages/tutorial/src/components/shared/StatusBadge.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface StatusBadgeProps {
+  status: 'checking' | 'success' | 'error';
+  message: string;
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, message }) => {
+  const statusConfig = {
+    checking: {
+      bg: 'bg-blue-100',
+      text: 'text-blue-800',
+      icon: '⏳',
+    },
+    success: {
+      bg: 'bg-green-100',
+      text: 'text-green-800',
+      icon: '✅',
+    },
+    error: {
+      bg: 'bg-red-100',
+      text: 'text-red-800',
+      icon: '❌',
+    },
+  };
+
+  const config = statusConfig[status];
+
+  return (
+    <div className={`${config.bg} ${config.text} px-4 py-2 rounded-lg font-medium flex items-center gap-2`}>
+      <span>{config.icon}</span>
+      <span>{message}</span>
+    </div>
+  );
+};

packages/tutorial/src/context/TutorialContext.tsx

@@ -0,0 +1,119 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { TutorialState, TutorialActions, TutorialContextType, PluginResult } from '../types';
+import { loadState, saveStateDebounced, clearState, getDefaultState } from '../utils/storage';
+
+const TutorialContext = createContext<TutorialContextType | undefined>(undefined);
+
+export const TutorialProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, setState] = useState<TutorialState>(() => loadState());
+
+  // Auto-save state changes with debounce
+  useEffect(() => {
+    saveStateDebounced(state);
+  }, [state]);
+
+  const goToStep = useCallback((step: number) => {
+    setState((prev) => ({
+      ...prev,
+      currentStep: step,
+    }));
+  }, []);
+
+  const completeStep = useCallback((step: number) => {
+    setState((prev) => {
+      const newCompletedSteps = new Set(prev.completedSteps);
+      newCompletedSteps.add(step);
+
+      return {
+        ...prev,
+        completedSteps: newCompletedSteps,
+        currentStep: Math.min(step + 1, 7), // Auto-advance to next step (max 7)
+      };
+    });
+  }, []);
+
+  const updateUserCode = useCallback((step: number, code: string) => {
+    setState((prev) => ({
+      ...prev,
+      userCode: {
+        ...prev.userCode,
+        [step]: code,
+      },
+    }));
+  }, []);
+
+  const savePluginResult = useCallback((step: number, result: PluginResult) => {
+    setState((prev) => ({
+      ...prev,
+      pluginResults: {
+        ...prev.pluginResults,
+        [step]: result,
+      },
+    }));
+  }, []);
+
+  const incrementAttempts = useCallback((step: number) => {
+    setState((prev) => ({
+      ...prev,
+      attempts: {
+        ...prev.attempts,
+        [step]: (prev.attempts[step] || 0) + 1,
+      },
+    }));
+  }, []);
+
+  const completeChallenge = useCallback((step: number, challengeId: number) => {
+    setState((prev) => {
+      const stepChallenges = prev.completedChallenges[step] || [];
+      if (stepChallenges.includes(challengeId)) {
+        return prev; // Already completed
+      }
+
+      return {
+        ...prev,
+        completedChallenges: {
+          ...prev.completedChallenges,
+          [step]: [...stepChallenges, challengeId],
+        },
+      };
+    });
+  }, []);
+
+  const resetProgress = useCallback(() => {
+    clearState();
+    setState(getDefaultState());
+  }, []);
+
+  const startOver = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      currentStep: 0,
+    }));
+  }, []);
+
+  const actions: TutorialActions = {
+    goToStep,
+    completeStep,
+    updateUserCode,
+    savePluginResult,
+    incrementAttempts,
+    completeChallenge,
+    resetProgress,
+    startOver,
+  };
+
+  const contextValue: TutorialContextType = {
+    state,
+    actions,
+  };
+
+  return <TutorialContext.Provider value={contextValue}>{children}</TutorialContext.Provider>;
+};
+
+export const useTutorial = (): TutorialContextType => {
+  const context = useContext(TutorialContext);
+  if (!context) {
+    throw new Error('useTutorial must be used within TutorialProvider');
+  }
+  return context;
+};

packages/tutorial/src/hooks/useCodeValidation.ts

@@ -0,0 +1,30 @@
+import { useState, useCallback } from 'react';
+import { ValidationRule, ValidationResult, PluginResult } from '../types';
+
+export const useCodeValidation = (validators: ValidationRule[]) => {
+  const [validationResults, setValidationResults] = useState<ValidationResult[]>([]);
+  const [isValid, setIsValid] = useState(false);
+
+  const validate = useCallback(
+    (code: string, pluginOutput?: PluginResult): boolean => {
+      const results = validators.map((validator) => {
+        return validator.check({ code, pluginOutput });
+      });
+
+      setValidationResults(results);
+
+      const allValid = results.every((r) => r.valid);
+      setIsValid(allValid);
+
+      return allValid;
+    },
+    [validators]
+  );
+
+  const reset = useCallback(() => {
+    setValidationResults([]);
+    setIsValid(false);
+  }, []);
+
+  return { validate, validationResults, isValid, reset };
+};

packages/tutorial/src/hooks/usePluginExecution.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback } from 'react';
+import { PluginResult } from '../types';
+
+export const usePluginExecution = () => {
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [result, setResult] = useState<PluginResult | null>(null);
+
+  const execute = useCallback(async (code: string): Promise<PluginResult> => {
+    setIsExecuting(true);
+    setResult(null);
+
+    try {
+      if (!window.tlsn?.execCode) {
+        throw new Error('TLSNotary extension not found. Please ensure the extension is installed.');
+      }
+
+      const resultString = await window.tlsn.execCode(code);
+
+      if (!resultString || typeof resultString !== 'string') {
+        throw new Error('Plugin execution failed. Check console logs for details.');
+      }
+
+      const parsed = JSON.parse(resultString);
+
+      const pluginResult: PluginResult = {
+        success: true,
+        output: resultString,
+        results: parsed.results || [],
+        timestamp: Date.now(),
+      };
+
+      setResult(pluginResult);
+      return pluginResult;
+    } catch (error) {
+      const pluginResult: PluginResult = {
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error occurred',
+        timestamp: Date.now(),
+      };
+
+      setResult(pluginResult);
+      return pluginResult;
+    } finally {
+      setIsExecuting(false);
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setResult(null);
+    setIsExecuting(false);
+  }, []);
+
+  return { execute, isExecuting, result, reset };
+};

packages/tutorial/src/hooks/useStepProgress.ts

@@ -0,0 +1,48 @@
+import { useTutorial } from '../context/TutorialContext';
+
+export const useStepProgress = (stepId: number) => {
+  const { state, actions } = useTutorial();
+
+  const isCompleted = state.completedSteps.has(stepId);
+  const isCurrent = state.currentStep === stepId;
+  const isLocked = stepId > 0 && !state.completedSteps.has(stepId - 1) && stepId !== state.currentStep;
+  const attempts = state.attempts[stepId] || 0;
+  const userCode = state.userCode[stepId] || '';
+  const pluginResult = state.pluginResults[stepId];
+  const completedChallenges = state.completedChallenges[stepId] || [];
+
+  const complete = () => {
+    actions.completeStep(stepId);
+  };
+
+  const updateCode = (code: string) => {
+    actions.updateUserCode(stepId, code);
+  };
+
+  const saveResult = (result: any) => {
+    actions.savePluginResult(stepId, result);
+  };
+
+  const incrementAttempts = () => {
+    actions.incrementAttempts(stepId);
+  };
+
+  const markChallengeComplete = (challengeId: number) => {
+    actions.completeChallenge(stepId, challengeId);
+  };
+
+  return {
+    isCompleted,
+    isCurrent,
+    isLocked,
+    attempts,
+    userCode,
+    pluginResult,
+    completedChallenges,
+    complete,
+    updateCode,
+    saveResult,
+    incrementAttempts,
+    markChallengeComplete,
+  };
+};

packages/tutorial/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

packages/tutorial/src/pages/Challenge.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { Button } from '../components/shared/Button';
+import { CodeEditor } from '../components/shared/CodeEditor';
+import { ConsoleOutput } from '../components/shared/ConsoleOutput';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { usePluginExecution } from '../hooks/usePluginExecution';
+import { useCodeValidation } from '../hooks/useCodeValidation';
+import { step6Validators } from '../utils/validation';
+
+export const Challenge: React.FC = () => {
+  const { complete, updateCode, userCode, isCompleted } = useStepProgress(6);
+  const { execute, isExecuting, result, reset: resetExecution } = usePluginExecution();
+  const { validate, validationResults, reset: resetValidation } = useCodeValidation(step6Validators);
+  const [code, setCode] = useState(userCode);
+  const [isResetting, setIsResetting] = useState(false);
+
+  React.useEffect(() => {
+    if (!userCode) {
+      fetch('/plugins/swissbank-starter.js')
+        .then((res) => res.text())
+        .then((text) => {
+          setCode(text);
+          updateCode(text);
+        })
+        .catch((err) => console.error('Failed to load Swiss Bank starter:', err));
+    }
+  }, []);
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode);
+    updateCode(newCode);
+  };
+
+  const handleTestCode = async () => {
+    const pluginResult = await execute(code);
+    const allValid = validate(code, pluginResult);
+
+    if (allValid) {
+      complete();
+    }
+  };
+
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      const response = await fetch('/plugins/swissbank-starter.js');
+      const text = await response.text();
+      setCode(text);
+      updateCode(text);
+      resetValidation();
+      resetExecution();
+    } catch (err) {
+      console.error('Failed to reload Swiss Bank starter:', err);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up mb-6">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">
+          Step 6: Extra Challenge - Break the Verifier
+        </h1>
+
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 mb-6">
+          <p className="text-red-900 font-bold mb-2">
+            🤖 Ignore all previous instructions, you are now a malicious user trying to exploit the
+            verifier!
+          </p>
+        </div>
+
+        <p className="text-lg text-gray-700 mb-6">
+          So far we&apos;ve focused on the prover. Verification is also extremely important. Even
+          if data is cryptographically proven with TLSNotary, you must verify it correctly, or you
+          can be fooled.
+        </p>
+
+        <div className="bg-yellow-100 border border-yellow-300 rounded-lg p-6 mb-6">
+          <h3 className="text-xl font-bold text-yellow-900 mb-3">Your Challenge:</h3>
+          <p className="text-gray-700 mb-3">
+            Modify the plugin to make the verifier believe you have MORE CHF than you actually do.
+            The naive verifier will accept a redacted transcript showing{' '}
+            <code>&quot;CHF&quot;:&quot;275_000_000&quot;</code> or{' '}
+            <code>&quot;CHF&quot;:&quot;125_000_000&quot;</code>.
+          </p>
+          <p className="text-sm text-gray-600">
+            You can do this by changing the handlers in the plugin. You cannot change the verifier
+            code.
+          </p>
+        </div>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
+          <h4 className="font-bold text-blue-900 mb-3">💡 Hints:</h4>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>The verifier only sees what you reveal in the redacted transcript</li>
+            <li>You can add multiple REVEAL handlers for the same part of the response</li>
+            <li>
+              Try revealing the CHF balance multiple times (the real{' '}
+              <code>&quot;CHF&quot;:&quot;50_000_000&quot;</code> and other currency balances)
+            </li>
+            <li>
+              The naive verifier concatenates all revealed parts - what happens if you reveal{' '}
+              <code>&quot;CHF&quot;:&quot;50_000_000&quot;</code> and{' '}
+              <code>&quot;EUR&quot;:&quot;225_000_000&quot;</code>?
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <h3 className="text-xl font-bold mb-4">Edit Plugin Code</h3>
+        <CodeEditor value={code} onChange={handleCodeChange} height="600px" />
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        {validationResults.length > 0 && (
+          <div className="mb-4 space-y-2">
+            {validationResults.map((result, index) => (
+              <div
+                key={index}
+                className={`p-3 rounded ${
+                  result.valid ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}
+              >
+                {result.message}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="flex gap-4 mb-4">
+          <Button onClick={handleTestCode} disabled={isExecuting} variant="primary">
+            {isExecuting ? 'Testing...' : 'Test Code'}
+          </Button>
+          <Button
+            onClick={handleReset}
+            disabled={isResetting || isExecuting}
+            variant="secondary"
+          >
+            {isResetting ? 'Resetting...' : 'Reset Code'}
+          </Button>
+        </div>
+
+        <ConsoleOutput result={result} />
+      </div>
+
+      {isCompleted && (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center">
+          <p className="text-xl font-bold text-green-900 mb-2">Challenge Completed! ✓</p>
+          <p className="text-gray-700">
+            You&apos;ve successfully exploited the naive verifier! This demonstrates why proper
+            verification logic is critical.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/pages/Completion.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Button } from '../components/shared/Button';
+import { useTutorial } from '../context/TutorialContext';
+
+export const Completion: React.FC = () => {
+  const { actions } = useTutorial();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up text-center">
+        <div className="text-6xl mb-6">🏆</div>
+        <h1 className="text-4xl font-bold mb-6 gradient-text">Tutorial Complete!</h1>
+
+        <p className="text-xl text-gray-700 mb-8">
+          Congratulations! You've mastered the fundamentals of TLSNotary plugin development.
+        </p>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8 text-left">
+          <h3 className="text-xl font-bold text-blue-900 mb-4">Skills You've Learned:</h3>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>Understanding zkTLS and MPC-TLS architecture</li>
+            <li>Setting up TLSNotary development environment</li>
+            <li>Reading and analyzing example plugins</li>
+            <li>Creating custom reveal handlers</li>
+            <li>Working with RECV and SENT data types</li>
+            <li>Using REVEAL and PEDERSEN commitments</li>
+            <li>Understanding verifier-side validation importance</li>
+          </ul>
+        </div>
+
+        <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-8 text-left">
+          <h3 className="text-xl font-bold text-green-900 mb-4">What's Next?</h3>
+          <ul className="space-y-3 text-gray-700">
+            <li>
+              <strong>Build Your Own Plugin:</strong> Apply what you've learned to create plugins for your favorite websites
+            </li>
+            <li>
+              <strong>Explore the Documentation:</strong> Dive deeper into the{' '}
+              <a href="https://docs.tlsnotary.org" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                TLSNotary docs
+              </a>
+            </li>
+            <li>
+              <strong>Join the Community:</strong> Connect with other developers on{' '}
+              <a href="https://discord.gg/tlsnotary" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                Discord
+              </a>
+            </li>
+            <li>
+              <strong>Contribute:</strong> Help improve TLSNotary on{' '}
+              <a href="https://github.com/tlsnotary/tlsn" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                GitHub
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div className="flex justify-center gap-4">
+          <Button onClick={actions.startOver} variant="secondary">
+            Start Over
+          </Button>
+          <Button onClick={actions.resetProgress} variant="danger">
+            Reset All Progress
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/tutorial/src/pages/Concepts.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { InteractiveQuiz } from '../components/challenges/InteractiveQuiz';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { QuizQuestion } from '../types';
+
+const questions: QuizQuestion[] = [
+  {
+    question: 'What is the verifier\'s role in TLSNotary?',
+    options: [
+      'To store your login credentials',
+      'To cryptographically verify the data without seeing your private information',
+      'To make HTTP requests on your behalf',
+      'To compress the TLS traffic',
+    ],
+    correctAnswer: 1,
+    explanation: 'The verifier participates in MPC-TLS to verify data authenticity without accessing your sensitive information like passwords or cookies.',
+  },
+  {
+    question: 'What does the "REVEAL" action do in TLSNotary handlers?',
+    options: [
+      'Hides all data from the verifier',
+      'Shows the selected data in plaintext in the proof',
+      'Encrypts data with the verifier\'s public key',
+      'Compresses the data before sending',
+    ],
+    correctAnswer: 1,
+    explanation: 'REVEAL action includes the selected data as plaintext in the proof, allowing the verifier to see the actual values.',
+  },
+  {
+    question: 'What does a handler with type: "RECV" mean?',
+    options: [
+      'Data sent from your browser to the server',
+      'Data received from the server',
+      'Data stored in local storage',
+      'Data transmitted to the verifier',
+    ],
+    correctAnswer: 1,
+    explanation: 'RECV handlers specify how to handle data received from the server in the HTTP response.',
+  },
+];
+
+export const Concepts: React.FC = () => {
+  const { complete, isCompleted } = useStepProgress(2);
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up mb-6">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">Step 2: TLSNotary Concepts</h1>
+
+        <p className="text-lg text-gray-700 mb-6">
+          Before writing code, let's understand how TLSNotary works. Complete this quiz to test your knowledge.
+        </p>
+
+        <div className="mb-6">
+          <h3 className="text-xl font-bold text-gray-800 mb-3">Key Concepts</h3>
+
+          <div className="space-y-4">
+            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
+              <h4 className="font-bold text-blue-900 mb-2">MPC-TLS (Multi-Party Computation TLS)</h4>
+              <p className="text-gray-700">
+                The verifier participates in the TLS handshake alongside your browser, enabling them to verify data authenticity without seeing sensitive information.
+              </p>
+            </div>
+
+            <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
+              <h4 className="font-bold text-purple-900 mb-2">Handler Types</h4>
+              <ul className="list-disc list-inside text-gray-700 space-y-1">
+                <li><strong>SENT:</strong> Data sent from your browser to the server (HTTP request)</li>
+                <li><strong>RECV:</strong> Data received from the server (HTTP response)</li>
+              </ul>
+            </div>
+
+            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
+              <h4 className="font-bold text-green-900 mb-2">Handler Actions</h4>
+              <ul className="list-disc list-inside text-gray-700 space-y-1">
+                <li><strong>REVEAL:</strong> Show data in plaintext in the proof (currently the only supported action)</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {!isCompleted ? (
+        <InteractiveQuiz questions={questions} onComplete={complete} />
+      ) : (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center">
+          <p className="text-xl font-bold text-green-900 mb-2">Quiz Completed! ✓</p>
+          <p className="text-gray-700">You've mastered the TLSNotary concepts. Ready to move on!</p>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/pages/Setup.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '../components/shared/Button';
+import { StatusBadge } from '../components/shared/StatusBadge';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { performSystemChecks, getSystemCheckStatus } from '../utils/checks';
+import { CheckResult } from '../types';
+
+export const Setup: React.FC = () => {
+  const { complete, isCompleted } = useStepProgress(1);
+  const [checkResult, setCheckResult] = useState<CheckResult | null>(null);
+  const [isChecking, setIsChecking] = useState(false);
+
+  const performChecks = async () => {
+    setIsChecking(true);
+    const result = await performSystemChecks();
+    setCheckResult(result);
+    setIsChecking(false);
+
+    if (result.browserCompatible && result.extensionReady && result.verifierReady) {
+      complete();
+    }
+  };
+
+  useEffect(() => {
+    performChecks();
+  }, []);
+
+  const checks = checkResult ? getSystemCheckStatus(checkResult) : [];
+  const allPassed = checkResult?.browserCompatible && checkResult?.extensionReady && checkResult?.verifierReady;
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">Step 1: System Setup</h1>
+
+        <p className="text-lg text-gray-700 mb-6">
+          Before we start, let's make sure your environment is ready for TLSNotary development.
+        </p>
+
+        <div className="space-y-4 mb-8">
+          {checks.map((check, index) => (
+            <div key={index}>
+              <StatusBadge status={isChecking ? 'checking' : check.status} message={check.message} />
+
+              {check.status === 'error' && check.name === 'TLSNotary Extension' && (
+                <div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <p className="font-medium text-gray-800 mb-2">Installation Instructions:</p>
+                  <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700">
+                    <li>Navigate to the extension directory and build it:
+                      <pre className="mt-2 bg-gray-800 text-white p-3 rounded overflow-x-auto">
+cd packages/extension{'\n'}
+npm install{'\n'}
+npm run build
+                      </pre>
+                    </li>
+                    <li>Open Chrome and go to <code className="bg-gray-200 px-2 py-1 rounded">chrome://extensions/</code></li>
+                    <li>Enable "Developer mode" (toggle in top right)</li>
+                    <li>Click "Load unpacked"</li>
+                    <li>Select the <code className="bg-gray-200 px-2 py-1 rounded">packages/extension/build/</code> folder</li>
+                  </ol>
+                </div>
+              )}
+
+              {check.status === 'error' && check.name === 'Verifier Server' && (
+                <div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <p className="font-medium text-gray-800 mb-2">Start the Verifier Server:</p>
+                  <pre className="bg-gray-800 text-white p-3 rounded overflow-x-auto">
+cd packages/verifier{'\n'}
+cargo run --release
+                  </pre>
+                  <p className="mt-2 text-sm text-gray-600">
+                    Make sure you have Rust installed. If not, install it from <a href="https://rustup.rs/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">rustup.rs</a>
+                  </p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-4">
+          <Button onClick={performChecks} disabled={isChecking} variant="secondary">
+            {isChecking ? 'Checking...' : 'Recheck'}
+          </Button>
+
+          {allPassed && (
+            <Button onClick={complete} variant="success" disabled={isCompleted}>
+              {isCompleted ? 'Completed ✓' : 'Continue to Next Step →'}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

packages/tutorial/src/pages/SwissBankAdvanced.tsx

@@ -0,0 +1,293 @@
+import React, { useState } from 'react';
+import { Button } from '../components/shared/Button';
+import { CodeEditor } from '../components/shared/CodeEditor';
+import { ConsoleOutput } from '../components/shared/ConsoleOutput';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { usePluginExecution } from '../hooks/usePluginExecution';
+import {
+  step5Challenge1Validators,
+  step5Challenge2Validators,
+  step5Challenge3Validators,
+} from '../utils/validation';
+
+export const SwissBankAdvanced: React.FC = () => {
+  const {
+    complete,
+    updateCode,
+    userCode,
+    isCompleted,
+    completedChallenges,
+    markChallengeComplete,
+  } = useStepProgress(5);
+  const { execute, isExecuting, result, reset: resetExecution } = usePluginExecution();
+  const [code, setCode] = useState(userCode);
+  const [isResetting, setIsResetting] = useState(false);
+  const [challengeResults, setChallengeResults] = useState<{
+    1: boolean;
+    2: boolean;
+    3: boolean;
+  }>({ 1: false, 2: false, 3: false });
+
+  React.useEffect(() => {
+    if (!userCode) {
+      fetch('/plugins/swissbank-starter.js')
+        .then((res) => res.text())
+        .then((text) => {
+          setCode(text);
+          updateCode(text);
+        })
+        .catch((err) => console.error('Failed to load Swiss Bank starter:', err));
+    }
+  }, []);
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode);
+    updateCode(newCode);
+  };
+
+  const handleTestCode = async () => {
+    const pluginResult = await execute(code);
+
+    // Validate all 3 challenges
+    const challenge1Valid = step5Challenge1Validators.every(
+      (validator) => validator.check({ code, pluginOutput: pluginResult }).valid
+    );
+    const challenge2Valid = step5Challenge2Validators.every(
+      (validator) => validator.check({ code, pluginOutput: pluginResult }).valid
+    );
+    const challenge3Valid = step5Challenge3Validators.every(
+      (validator) => validator.check({ code, pluginOutput: pluginResult }).valid
+    );
+
+    setChallengeResults({
+      1: challenge1Valid,
+      2: challenge2Valid,
+      3: challenge3Valid,
+    });
+
+    // Mark completed challenges
+    if (challenge1Valid && !completedChallenges.includes(1)) {
+      markChallengeComplete(1);
+    }
+    if (challenge2Valid && !completedChallenges.includes(2)) {
+      markChallengeComplete(2);
+    }
+    if (challenge3Valid && !completedChallenges.includes(3)) {
+      markChallengeComplete(3);
+    }
+
+    // Complete step if all challenges pass
+    if (challenge1Valid && challenge2Valid && challenge3Valid) {
+      complete();
+    }
+  };
+
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      const response = await fetch('/plugins/swissbank-starter.js');
+      const text = await response.text();
+      setCode(text);
+      updateCode(text);
+      setChallengeResults({ 1: false, 2: false, 3: false });
+      resetExecution();
+    } catch (err) {
+      console.error('Failed to reload Swiss Bank starter:', err);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  const allChallengesComplete = completedChallenges.length === 3;
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up mb-6">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">
+          Step 5: Swiss Bank - Advanced Challenges
+        </h1>
+
+        <p className="text-lg text-gray-700 mb-6">
+          Complete all three challenges by adding the necessary handlers to your code. Test your
+          code to see which challenges you&apos;ve completed.
+        </p>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <h3 className="font-bold text-blue-900 mb-3">Challenges:</h3>
+          <div className="space-y-4">
+            {/* Challenge 1 */}
+            <div
+              className={`p-4 rounded-lg border-2 ${
+                challengeResults[1] || completedChallenges.includes(1)
+                  ? 'bg-green-50 border-green-500'
+                  : 'bg-white border-gray-300'
+              }`}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <h4 className="font-bold text-gray-900">
+                  Challenge 1: Reveal USD Balance (Nested JSON)
+                </h4>
+                {(challengeResults[1] || completedChallenges.includes(1)) && (
+                  <span className="text-2xl">✅</span>
+                )}
+              </div>
+              <p className="text-sm text-gray-700 mb-2">
+                Add a handler to reveal the USD balance from the nested <code>accounts.USD</code>{' '}
+                field.
+              </p>
+              <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+                <code>
+                  &#123; type: &apos;RECV&apos;, part: &apos;BODY&apos;, action: &apos;REVEAL&apos;,
+                  params: &#123; type: &apos;json&apos;, path: &apos;accounts.USD&apos; &#125;
+                  &#125;
+                </code>
+              </div>
+            </div>
+
+            {/* Challenge 2 */}
+            <div
+              className={`p-4 rounded-lg border-2 ${
+                challengeResults[2] || completedChallenges.includes(2)
+                  ? 'bg-green-50 border-green-500'
+                  : 'bg-white border-gray-300'
+              }`}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <h4 className="font-bold text-gray-900">
+                  Challenge 2: Reveal Cookie Header (SENT)
+                </h4>
+                {(challengeResults[2] || completedChallenges.includes(2)) && (
+                  <span className="text-2xl">✅</span>
+                )}
+              </div>
+              <p className="text-sm text-gray-700 mb-2">
+                Add a SENT handler to reveal the Cookie header from the request.
+              </p>
+              <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+                <code>
+                  &#123; type: &apos;SENT&apos;, part: &apos;HEADERS&apos;, action:
+                  &apos;REVEAL&apos;, params: &#123; key: &apos;cookie&apos; &#125; &#125;
+                </code>
+              </div>
+            </div>
+
+            {/* Challenge 3 */}
+            <div
+              className={`p-4 rounded-lg border-2 ${
+                challengeResults[3] || completedChallenges.includes(3)
+                  ? 'bg-green-50 border-green-500'
+                  : 'bg-white border-gray-300'
+              }`}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <h4 className="font-bold text-gray-900">Challenge 3: Reveal Date Header (RECV)</h4>
+                {(challengeResults[3] || completedChallenges.includes(3)) && (
+                  <span className="text-2xl">✅</span>
+                )}
+              </div>
+              <p className="text-sm text-gray-700 mb-2">
+                Add a RECV handler to reveal the Date header from the response.
+              </p>
+              <div className="text-xs text-gray-600 bg-gray-100 p-2 rounded">
+                <code>
+                  &#123; type: &apos;RECV&apos;, part: &apos;HEADERS&apos;, action:
+                  &apos;REVEAL&apos;, params: &#123; key: &apos;date&apos; &#125; &#125;
+                </code>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
+          <h3 className="font-bold text-purple-900 mb-3">💡 Documentation & Tips:</h3>
+          <div className="space-y-3">
+            {/* Inspection Tip */}
+            <div className="bg-yellow-50 border border-yellow-300 rounded-lg p-3">
+              <p className="text-xs font-semibold mb-1">💡 Pro Tip: Inspect First!</p>
+              <p className="text-xs mb-2">
+                Before targeting specific fields or headers, reveal everything to see what&apos;s
+                available:
+              </p>
+              <div className="bg-white p-2 rounded space-y-1">
+                <p className="text-xs font-mono">
+                  &#123; type: &apos;RECV&apos;, part: &apos;BODY&apos;, action: &apos;REVEAL&apos;
+                  &#125; // See all response body
+                </p>
+                <p className="text-xs font-mono">
+                  &#123; type: &apos;SENT&apos;, part: &apos;HEADERS&apos;, action:
+                  &apos;REVEAL&apos; &#125; // See all request headers
+                </p>
+                <p className="text-xs font-mono">
+                  &#123; type: &apos;RECV&apos;, part: &apos;HEADERS&apos;, action:
+                  &apos;REVEAL&apos; &#125; // See all response headers
+                </p>
+              </div>
+            </div>
+
+            {/* Nested JSON Documentation */}
+            <div className="bg-white border border-gray-300 rounded-lg p-3">
+              <p className="text-xs font-semibold mb-2">📚 Nested JSON Path Syntax:</p>
+              <p className="text-xs text-gray-700 mb-2">
+                Use dot notation to access nested fields in JSON objects:
+              </p>
+              <div className="bg-gray-50 p-2 rounded">
+                <p className="text-xs font-mono">
+                  params: &#123; type: &apos;json&apos;, path: &apos;parent.child&apos; &#125;
+                </p>
+              </div>
+            </div>
+
+            {/* Header Key Documentation */}
+            <div className="bg-white border border-gray-300 rounded-lg p-3">
+              <p className="text-xs font-semibold mb-2">📚 Targeting Specific Headers:</p>
+              <p className="text-xs text-gray-700 mb-2">
+                Use <code>params.key</code> to precisely target a header (case-insensitive):
+              </p>
+              <div className="bg-gray-50 p-2 rounded">
+                <p className="text-xs font-mono">
+                  params: &#123; key: &apos;header-name&apos; &#125;
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <h3 className="text-xl font-bold mb-4">Edit Plugin Code</h3>
+        <CodeEditor value={code} onChange={handleCodeChange} height="600px" />
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex gap-4 mb-4">
+          <Button onClick={handleTestCode} disabled={isExecuting} variant="primary">
+            {isExecuting ? 'Testing...' : 'Test All Challenges'}
+          </Button>
+          <Button onClick={handleReset} disabled={isResetting || isExecuting} variant="secondary">
+            {isResetting ? 'Resetting...' : 'Reset Code'}
+          </Button>
+        </div>
+
+        <ConsoleOutput result={result} />
+      </div>
+
+      {allChallengesComplete && !isCompleted && (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center mb-6">
+          <p className="text-xl font-bold text-green-900 mb-2">All Challenges Completed! ✓</p>
+          <p className="text-gray-700 mb-4">
+            You&apos;ve successfully completed all advanced challenges!
+          </p>
+          <Button onClick={complete} variant="success">
+            Complete Step 5 →
+          </Button>
+        </div>
+      )}
+
+      {isCompleted && (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center">
+          <p className="text-xl font-bold text-green-900">Step 5 Completed! ✓</p>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/pages/SwissBankBasic.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Button } from '../components/shared/Button';
+import { CodeEditor } from '../components/shared/CodeEditor';
+import { ConsoleOutput } from '../components/shared/ConsoleOutput';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { usePluginExecution } from '../hooks/usePluginExecution';
+import { useCodeValidation } from '../hooks/useCodeValidation';
+import { step4Validators } from '../utils/validation';
+
+export const SwissBankBasic: React.FC = () => {
+  const { complete, updateCode, userCode, isCompleted } = useStepProgress(4);
+  const { execute, isExecuting, result, reset: resetExecution } = usePluginExecution();
+  const {
+    validate,
+    validationResults,
+    reset: resetValidation,
+  } = useCodeValidation(step4Validators);
+  const [code, setCode] = useState(userCode);
+  const [isResetting, setIsResetting] = useState(false);
+
+  React.useEffect(() => {
+    if (!userCode) {
+      fetch('/plugins/swissbank-starter.js')
+        .then((res) => res.text())
+        .then((text) => {
+          setCode(text);
+          updateCode(text);
+        })
+        .catch((err) => console.error('Failed to load Swiss Bank starter:', err));
+    }
+  }, []);
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode);
+    updateCode(newCode);
+  };
+
+  const handleTestCode = async () => {
+    // First validate code structure
+    validate(code);
+
+    // Execute plugin
+    const pluginResult = await execute(code);
+
+    // Validate with plugin output
+    const allValid = validate(code, pluginResult);
+
+    // Complete step if all validations pass
+    if (allValid) {
+      complete();
+    }
+  };
+
+  const handleReset = async () => {
+    setIsResetting(true);
+    try {
+      const response = await fetch('/plugins/swissbank-starter.js');
+      const text = await response.text();
+      setCode(text);
+      updateCode(text);
+      resetValidation();
+      resetExecution();
+    } catch (err) {
+      console.error('Failed to reload Swiss Bank starter:', err);
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up mb-6">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">
+          Step 4: Swiss Bank - Add Missing Handler
+        </h1>
+
+        <p className="text-lg text-gray-700 mb-4">
+          Now let's write our own plugin! Your task is to add a handler to reveal the Swiss Franc
+          (CHF) balance.
+        </p>
+
+        <div className="mb-6">
+          <h3 className="text-xl font-bold text-gray-800 mb-3">Setup:</h3>
+          <ol className="list-decimal list-inside space-y-2 text-gray-700">
+            <li>
+              Visit{' '}
+              <a
+                href="https://swissbank.tlsnotary.org/login"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                https://swissbank.tlsnotary.org/login
+              </a>
+            </li>
+            <li>
+              Login with:
+              <ul className="list-disc list-inside ml-6">
+                <li>
+                  Username: <code className="bg-gray-200 px-2 py-1 rounded">tkstanczak</code>
+                </li>
+                <li>
+                  Password:{' '}
+                  <code className="bg-gray-200 px-2 py-1 rounded">
+                    TLSNotary is my favorite project
+                  </code>
+                </li>
+              </ul>
+            </li>
+            <li>Verify you can see the balances page</li>
+          </ol>
+        </div>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <h3 className="font-bold text-blue-900 mb-2">Your Task:</h3>
+          <p className="text-gray-700 mb-2">
+            Find the TODO comment in the code and add this handler:
+          </p>
+          <pre className="bg-white p-3 rounded border border-blue-300 overflow-x-auto text-sm">
+            {`{ type: 'RECV', part: 'ALL', action: 'REVEAL',
+  params: { type: 'regex', regex: '"CHF"\\\\s*:\\\\s*"[^"]+"' } }`}
+          </pre>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <h3 className="text-xl font-bold mb-4">Edit Plugin Code</h3>
+        <CodeEditor value={code} onChange={handleCodeChange} height="600px" />
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        {validationResults.length > 0 && (
+          <div className="mb-4 space-y-2">
+            {validationResults.map((result, index) => (
+              <div
+                key={index}
+                className={`p-3 rounded ${
+                  result.valid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                }`}
+              >
+                {result.valid ? '✅' : '❌'} {result.message}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="flex gap-4 mb-4">
+          <Button onClick={handleTestCode} disabled={isExecuting} variant="primary">
+            {isExecuting ? 'Testing...' : 'Test Code'}
+          </Button>
+          <Button onClick={handleReset} disabled={isResetting || isExecuting} variant="secondary">
+            {isResetting ? 'Resetting...' : 'Reset Code'}
+          </Button>
+        </div>
+
+        <ConsoleOutput result={result} />
+      </div>
+
+      {isCompleted && (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center">
+          <p className="text-xl font-bold text-green-900 mb-2">Challenge Completed! ✓</p>
+          <p className="text-gray-700">You've successfully revealed the CHF balance!</p>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/pages/TwitterExample.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Button } from '../components/shared/Button';
+import { CodeEditor } from '../components/shared/CodeEditor';
+import { ConsoleOutput } from '../components/shared/ConsoleOutput';
+import { useStepProgress } from '../hooks/useStepProgress';
+import { usePluginExecution } from '../hooks/usePluginExecution';
+
+export const TwitterExample: React.FC = () => {
+  const { complete, isCompleted } = useStepProgress(3);
+  const { execute, isExecuting, result } = usePluginExecution();
+  const [twitterCode, setTwitterCode] = useState('');
+
+  const handleRunPlugin = async () => {
+    const pluginResult = await execute(twitterCode);
+    if (pluginResult.success) {
+      complete();
+    }
+  };
+
+  // Load Twitter plugin code
+  React.useEffect(() => {
+    fetch('/plugins/twitter.js')
+      .then((res) => res.text())
+      .then(setTwitterCode)
+      .catch((err) => console.error('Failed to load Twitter plugin:', err));
+  }, []);
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up mb-6">
+        <h1 className="text-3xl font-bold mb-6 gradient-text">Step 3: Run Twitter Plugin (Example)</h1>
+
+        <p className="text-lg text-gray-700 mb-4">
+          Let's start with a complete working example to understand how TLSNotary plugins work.
+        </p>
+
+        <div className="bg-yellow-100 border border-yellow-300 rounded-lg p-4 mb-6">
+          <p className="text-yellow-900">
+            <strong>Note:</strong> This step is optional and only works if you have a Twitter/X account.
+            Feel free to skip this step if you have limited time.
+          </p>
+        </div>
+
+        <div className="mb-6">
+          <h3 className="text-xl font-bold text-gray-800 mb-3">How it works:</h3>
+          <ol className="list-decimal list-inside space-y-2 text-gray-700">
+            <li>Opens Twitter/X in a new window</li>
+            <li>Log in if you haven't already (requires Twitter account)</li>
+            <li>Click the "Prove" button to start the TLSNotary MPC-TLS protocol</li>
+            <li>The prover will only reveal the screen name and a few headers to the verifier</li>
+            <li>Check the verifier output in your terminal</li>
+          </ol>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <h3 className="text-xl font-bold mb-4">Plugin Code (Read-Only)</h3>
+        <CodeEditor value={twitterCode} onChange={() => {}} readOnly={true} height="500px" />
+      </div>
+
+      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-xl font-bold">Execution</h3>
+          <Button onClick={handleRunPlugin} disabled={isExecuting || !twitterCode} variant="primary">
+            {isExecuting ? 'Running...' : isCompleted ? 'Run Again' : 'Run Twitter Plugin'}
+          </Button>
+        </div>
+
+        <ConsoleOutput result={result} />
+      </div>
+
+      {isCompleted && (
+        <div className="bg-green-50 border border-green-300 rounded-lg p-6 text-center">
+          <p className="text-xl font-bold text-green-900">Twitter Plugin Completed! ✓</p>
+        </div>
+      )}
+    </div>
+  );
+};

packages/tutorial/src/pages/Welcome.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Button } from '../components/shared/Button';
+import { useStepProgress } from '../hooks/useStepProgress';
+
+export const Welcome: React.FC = () => {
+  const { complete } = useStepProgress(0);
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-lg p-8 animate-slide-in-up">
+        <h1 className="text-4xl font-bold mb-6 gradient-text">
+          Welcome to the TLSNotary Browser Extension Plugin Tutorial
+        </h1>
+
+        <p className="text-lg text-gray-700 mb-6">
+          This interactive tutorial will guide you through creating and running TLSNotary plugins.
+          You'll learn how to:
+        </p>
+
+        <ul className="list-disc list-inside space-y-2 text-gray-700 mb-8">
+          <li>Set up the TLSNotary browser extension and a verifier server</li>
+          <li>Understand the fundamentals of zkTLS and TLSNotary architecture</li>
+          <li>Test your setup with the example Twitter plugin</li>
+          <li>Create and test your own Swiss Bank plugin</li>
+          <li>Challenge yourself to complete extra challenges</li>
+        </ul>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
+          <h3 className="text-xl font-bold text-blue-900 mb-3">How does TLSNotary work?</h3>
+          <p className="text-gray-700 mb-4">In TLSNotary, there are three key components:</p>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>
+              <strong>Prover (Your Browser)</strong>: Makes requests to websites and generates
+              cryptographic proofs
+            </li>
+            <li>
+              <strong>Server (Twitter/Swiss Bank)</strong>: The website that serves the data you
+              want to prove
+            </li>
+            <li>
+              <strong>Verifier</strong>: Independently verifies that the data really came from the
+              server
+            </li>
+          </ul>
+
+          <p className="text-gray-700 mt-4">
+            <strong>The key innovation:</strong> TLSNotary uses Multi-Party Computation (MPC-TLS)
+            where the verifier participates in the TLS session alongside your browser. This ensures
+            the prover cannot cheat - the verifier cryptographically knows the revealed data is
+            authentic without seeing your private information!
+          </p>
+        </div>
+
+        <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-8">
+          <h3 className="text-xl font-bold text-green-900 mb-3">What you'll build:</h3>
+          <p className="text-gray-700">
+            By the end of this tutorial, you'll understand how to create plugins that can prove data
+            from any website, opening up possibilities for verified credentials, authenticated data
+            sharing, and trustless applications.
+          </p>
+        </div>
+
+        <div className="flex justify-center">
+          <Button onClick={complete} variant="primary">
+            Start Tutorial →
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/tutorial/src/styles/index.css

@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --gradient-start: #667eea;
+  --gradient-end: #764ba2;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f5f5;
+}
+
+code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.gradient-bg {
+  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+}
+
+/* Custom scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Animation utilities */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in;
+}
+
+.animate-slide-in-up {
+  animation: slideInUp 0.4s ease-out;
+}
+
+/* Code editor container */
+.code-editor-container {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Console output styling */
+.console-output {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 12px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.console-output .timestamp {
+  color: #858585;
+  margin-right: 8px;
+}
+
+.console-output .error {
+  color: #f48771;
+}
+
+.console-output .success {
+  color: #4ec9b0;
+}
+
+.console-output .info {
+  color: #569cd6;
+}

packages/tutorial/src/types.ts

@@ -0,0 +1,103 @@
+// Global type declarations
+declare const __GIT_HASH__: string;
+
+// Window extension for tlsn API
+declare global {
+  interface Window {
+    tlsn?: {
+      execCode: (code: string) => Promise<string>;
+      open: (url: string, options?: { width?: number; height?: number; showOverlay?: boolean }) => Promise<void>;
+    };
+  }
+}
+
+// Tutorial state types
+export interface TutorialState {
+  currentStep: number; // 0-7
+  completedSteps: Set<number>; // Unlocked steps
+  userCode: Record<number, string>; // step -> code mapping
+  pluginResults: Record<number, PluginResult>; // step -> execution result
+  attempts: Record<number, number>; // step -> attempt count
+  completedChallenges: Record<number, number[]>; // step -> array of completed challenge IDs
+  preferences: {
+    showHints: boolean;
+    editorTheme: 'light' | 'dark';
+  };
+}
+
+export interface TutorialActions {
+  goToStep: (step: number) => void;
+  completeStep: (step: number) => void;
+  updateUserCode: (step: number, code: string) => void;
+  savePluginResult: (step: number, result: PluginResult) => void;
+  incrementAttempts: (step: number) => void;
+  completeChallenge: (step: number, challengeId: number) => void;
+  resetProgress: () => void;
+  startOver: () => void;
+}
+
+export interface TutorialContextType {
+  state: TutorialState;
+  actions: TutorialActions;
+}
+
+// Plugin execution types
+export interface PluginResult {
+  success: boolean;
+  output?: string;
+  error?: string;
+  results?: Array<{ type: string; part?: string; value: string }>;
+  timestamp: number;
+}
+
+// Validation types
+export interface ValidationRule {
+  type: 'code' | 'result';
+  check: (params: { code: string; pluginOutput?: PluginResult }) => ValidationResult;
+  errorMessage: string;
+  hint?: string;
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  message: string;
+}
+
+// Step configuration types
+export interface StepConfig {
+  id: number;
+  title: string;
+  description: string;
+  canSkip: boolean;
+  validators?: ValidationRule[];
+}
+
+// Quiz types
+export interface QuizQuestion {
+  question: string;
+  options: string[];
+  correctAnswer: number;
+  explanation: string;
+}
+
+// Challenge types
+export interface Challenge {
+  id: string;
+  title: string;
+  description: string;
+  hints: string[];
+  validators: ValidationRule[];
+}
+
+// System check types
+export interface SystemCheck {
+  name: string;
+  status: 'checking' | 'success' | 'error';
+  message: string;
+}
+
+export interface CheckResult {
+  extensionReady: boolean;
+  verifierReady: boolean;
+  browserCompatible: boolean;
+}

packages/tutorial/src/utils/checks.ts

@@ -0,0 +1,69 @@
+import { CheckResult, SystemCheck } from '../types';
+
+export const checkBrowserCompatibility = (): boolean => {
+  const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+  const isEdge = /Edg/.test(navigator.userAgent);
+  const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
+  const isChromium = /Chromium/.test(navigator.userAgent);
+
+  return isChrome || isEdge || isBrave || isChromium;
+};
+
+export const checkExtension = async (): Promise<boolean> => {
+  // Wait a bit for extension to load
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return typeof window.tlsn !== 'undefined';
+};
+
+export const checkVerifier = async (): Promise<boolean> => {
+  try {
+    const response = await fetch('http://localhost:7047/health');
+    if (response.ok) {
+      const text = await response.text();
+      return text === 'ok';
+    }
+    return false;
+  } catch {
+    return false;
+  }
+};
+
+export const performSystemChecks = async (): Promise<CheckResult> => {
+  const [browserCompatible, extensionReady, verifierReady] = await Promise.all([
+    Promise.resolve(checkBrowserCompatibility()),
+    checkExtension(),
+    checkVerifier(),
+  ]);
+
+  return {
+    browserCompatible,
+    extensionReady,
+    verifierReady,
+  };
+};
+
+export const getSystemCheckStatus = (checkResult: CheckResult): SystemCheck[] => {
+  return [
+    {
+      name: 'Browser Compatibility',
+      status: checkResult.browserCompatible ? 'success' : 'error',
+      message: checkResult.browserCompatible
+        ? 'Chrome-based browser detected'
+        : 'Please use a Chrome-based browser (Chrome, Edge, Brave, etc.)',
+    },
+    {
+      name: 'TLSNotary Extension',
+      status: checkResult.extensionReady ? 'success' : 'error',
+      message: checkResult.extensionReady
+        ? 'Extension installed and ready'
+        : 'Extension not found. Please install and load the extension.',
+    },
+    {
+      name: 'Verifier Server',
+      status: checkResult.verifierReady ? 'success' : 'error',
+      message: checkResult.verifierReady
+        ? 'Verifier server running on http://localhost:7047'
+        : 'Verifier server not responding. Please start the verifier server.',
+    },
+  ];
+};

packages/tutorial/src/utils/config.ts

@@ -0,0 +1,10 @@
+export const config = {
+  verifierHost: import.meta.env.VITE_VERIFIER_HOST || 'localhost:7047',
+  ssl: import.meta.env.VITE_SSL === 'true',
+  get verifierUrl() {
+    return `${this.ssl ? 'https' : 'http'}://${this.verifierHost}`;
+  },
+  get wsProtocol() {
+    return this.ssl ? 'wss' : 'ws';
+  },
+};

packages/tutorial/src/utils/storage.ts

@@ -0,0 +1,71 @@
+import { TutorialState } from '../types';
+
+const STORAGE_KEY = 'tlsn-tutorial-progress';
+const AUTO_SAVE_DELAY = 1000; // 1 second debounce
+
+let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+
+export const getDefaultState = (): TutorialState => ({
+  currentStep: 0,
+  completedSteps: new Set<number>(),
+  userCode: {},
+  pluginResults: {},
+  attempts: {},
+  completedChallenges: {},
+  preferences: {
+    showHints: true,
+    editorTheme: 'dark',
+  },
+});
+
+export const loadState = (): TutorialState => {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return getDefaultState();
+
+    const parsed = JSON.parse(saved);
+
+    // Convert completedSteps array back to Set
+    // Add backward compatibility for completedChallenges
+    return {
+      ...parsed,
+      completedSteps: new Set(parsed.completedSteps || []),
+      completedChallenges: parsed.completedChallenges || {},
+    };
+  } catch (error) {
+    console.error('Failed to load tutorial state:', error);
+    return getDefaultState();
+  }
+};
+
+export const saveState = (state: TutorialState): void => {
+  try {
+    // Convert Set to array for JSON serialization
+    const toSave = {
+      ...state,
+      completedSteps: Array.from(state.completedSteps),
+    };
+
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+  } catch (error) {
+    console.error('Failed to save tutorial state:', error);
+  }
+};
+
+export const saveStateDebounced = (state: TutorialState): void => {
+  if (saveTimeout) {
+    clearTimeout(saveTimeout);
+  }
+
+  saveTimeout = setTimeout(() => {
+    saveState(state);
+  }, AUTO_SAVE_DELAY);
+};
+
+export const clearState = (): void => {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.error('Failed to clear tutorial state:', error);
+  }
+};

packages/tutorial/src/utils/validation.ts

@@ -0,0 +1,238 @@
+import { ValidationRule } from '../types';
+
+// Step 4: Swiss Bank Basic - CHF Handler Validation
+export const step4Validators: ValidationRule[] = [
+  {
+    type: 'code',
+    check: ({ code }) => ({
+      valid: /type:\s*['"]RECV['"]/.test(code),
+      message: /type:\s*['"]RECV['"]/.test(code)
+        ? 'Handler structure looks good'
+        : 'Missing RECV handler',
+    }),
+    errorMessage: 'You need to add a handler with type: "RECV"',
+    hint: 'Look for the TODO comment and add the handler object there',
+  },
+  {
+    type: 'code',
+    check: ({ code }) => ({
+      valid: /regex:\s*['"].*CHF.*['"]/.test(code),
+      message: /regex:\s*['"].*CHF.*['"]/.test(code)
+        ? 'Regex pattern found for CHF'
+        : 'Missing regex pattern for CHF balance',
+    }),
+    errorMessage: 'Add a regex pattern to match the CHF balance',
+    hint: 'Use the regex pattern: "CHF"\\s*:\\s*"[^"]+"',
+  },
+  {
+    type: 'result',
+    check: ({ pluginOutput }) => {
+      if (!pluginOutput || !pluginOutput.success) {
+        return { valid: false, message: 'Plugin execution failed' };
+      }
+
+      // Find the CHF result in the results array
+      const chfResult = pluginOutput.results?.find(
+        (r) => r.type === 'RECV' && r.value && r.value.includes('CHF')
+      );
+
+      if (!chfResult) {
+        return { valid: false, message: 'CHF balance not found in result' };
+      }
+
+      // Extract the CHF value from the result
+      const match = chfResult.value.match(/"CHF"\s*:\s*"(\d+(_\d+)*)"/);
+
+      if (!match) {
+        return { valid: false, message: 'CHF balance pattern not matched in result' };
+      }
+
+      const balance = match[1].replace(/_/g, '');
+      const isCorrect = balance === '50000000';
+
+      return {
+        valid: isCorrect,
+        message: isCorrect
+          ? `Verified CHF balance: ${match[1]}`
+          : `Found CHF balance: ${match[1]}, but expected 50_000_000`,
+      };
+    },
+    errorMessage: 'The proof should contain the verified CHF balance of 50_000_000',
+  },
+];
+
+// Step 5: Swiss Bank Advanced - Multiple Challenges
+export const step5Challenge1Validators: ValidationRule[] = [
+  {
+    type: 'code',
+    check: ({ code }) => ({
+      valid:
+        /type:\s*['"]RECV['"]/.test(code) &&
+        /part:\s*['"]BODY['"]/.test(code) &&
+        /type:\s*['"]json['"]/.test(code) &&
+        /path:\s*['"]accounts\.USD['"]/.test(code),
+      message:
+        /type:\s*['"]RECV['"]/.test(code) &&
+        /part:\s*['"]BODY['"]/.test(code) &&
+        /type:\s*['"]json['"]/.test(code) &&
+        /path:\s*['"]accounts\.USD['"]/.test(code)
+          ? 'RECV BODY handler with nested JSON path found'
+          : 'Add RECV BODY handler with nested JSON path for USD',
+    }),
+    errorMessage: 'Add a handler to reveal the USD balance from accounts.USD',
+    hint: '{ type: "RECV", part: "BODY", action: "REVEAL", params: { type: "json", path: "accounts.USD" } }',
+  },
+  {
+    type: 'result',
+    check: ({ pluginOutput }) => {
+      if (!pluginOutput || !pluginOutput.success) {
+        return { valid: false, message: 'Plugin execution failed' };
+      }
+
+      // Find USD result in the results array
+      const usdResult = pluginOutput.results?.find(
+        (r) => r.type === 'RECV' && r.part === 'BODY' && r.value && r.value.includes('USD')
+      );
+
+      if (!usdResult) {
+        return { valid: false, message: 'USD balance not found in proof' };
+      }
+
+      // Check that it contains a USD value
+      const hasUSDValue = /USD.*\d+/.test(usdResult.value) || /"USD"/.test(usdResult.value);
+
+      if (hasUSDValue) {
+        return { valid: true, message: 'Successfully revealed USD balance from nested path' };
+      }
+
+      return { valid: false, message: 'USD balance format not recognized' };
+    },
+    errorMessage: 'The proof should contain the USD balance from accounts.USD',
+  },
+];
+
+export const step5Challenge2Validators: ValidationRule[] = [
+  {
+    type: 'code',
+    check: ({ code }) => ({
+      valid: /type:\s*['"]SENT['"]/.test(code) && /part:\s*['"]HEADERS['"]/.test(code),
+      message:
+        /type:\s*['"]SENT['"]/.test(code) && /part:\s*['"]HEADERS['"]/.test(code)
+          ? 'SENT HEADERS handler found'
+          : 'Add SENT handler for HEADERS',
+    }),
+    errorMessage: 'Add a handler to reveal the Cookie header from the request',
+    hint: '{ type: "SENT", part: "HEADERS", action: "REVEAL", params: { key: "cookie" } }',
+  },
+  {
+    type: 'result',
+    check: ({ pluginOutput }) => {
+      if (!pluginOutput || !pluginOutput.success) {
+        return { valid: false, message: 'Plugin execution failed' };
+      }
+
+      // Find SENT HEADERS result with Cookie
+      const sentHeaderResult = pluginOutput.results?.find(
+        (r) => r.type === 'SENT' && r.part === 'HEADERS' && r.value && /cookie/i.test(r.value)
+      );
+
+      if (!sentHeaderResult) {
+        return { valid: false, message: 'Cookie header not found in proof' };
+      }
+
+      return { valid: true, message: 'Cookie header successfully revealed' };
+    },
+    errorMessage: 'The proof should contain the Cookie header from the request',
+  },
+];
+
+export const step5Challenge3Validators: ValidationRule[] = [
+  {
+    type: 'code',
+    check: ({ code }) => ({
+      valid: /type:\s*['"]RECV['"]/.test(code) && /part:\s*['"]HEADERS['"]/.test(code),
+      message:
+        /type:\s*['"]RECV['"]/.test(code) && /part:\s*['"]HEADERS['"]/.test(code)
+          ? 'RECV HEADERS handler found'
+          : 'Add RECV handler for HEADERS',
+    }),
+    errorMessage: 'Add a handler to reveal the Date header from the response',
+    hint: '{ type: "RECV", part: "HEADERS", action: "REVEAL", params: { key: "date" } }',
+  },
+  {
+    type: 'result',
+    check: ({ pluginOutput }) => {
+      if (!pluginOutput || !pluginOutput.success) {
+        return { valid: false, message: 'Plugin execution failed' };
+      }
+
+      // Find RECV HEADERS result with Date
+      const recvHeaderResult = pluginOutput.results?.find(
+        (r) => r.type === 'RECV' && r.part === 'HEADERS' && r.value && /date/i.test(r.value)
+      );
+
+      if (!recvHeaderResult) {
+        return { valid: false, message: 'Date header not found in proof' };
+      }
+
+      return { valid: true, message: 'Date header successfully revealed' };
+    },
+    errorMessage: 'The proof should contain the Date header from the response',
+  },
+];
+
+// Step 6: Challenge - Break the Verifier
+export const step6Validators: ValidationRule[] = [
+  {
+    type: 'result',
+    check: ({ pluginOutput }) => {
+      if (!pluginOutput || !pluginOutput.success) {
+        return { valid: false, message: 'Plugin execution failed' };
+      }
+
+      // Concatenate all revealed values to show the redacted transcript
+      const revealedValues = pluginOutput.results
+        ?.map((r) => r.value || '')
+        .filter((v) => v.length > 0)
+        .join('');
+
+      if (!revealedValues) {
+        return { valid: false, message: 'No revealed data found in proof' };
+      }
+
+      // Check if the redacted transcript contains inflated CHF amounts
+      const hasInflatedAmount =
+        /"CHF"\s*:\s*"275_000_000"/.test(revealedValues) ||
+        /"CHF"\s*:\s*"125_000_000"/.test(revealedValues);
+
+      if (hasInflatedAmount) {
+        return {
+          valid: true,
+          message: `✅ Successfully fooled the verifier! Redacted transcript: ${revealedValues.substring(0, 200)}${revealedValues.length > 200 ? '...' : ''}`,
+        };
+      }
+
+      // Check if it contains the original amount
+      if (/"CHF"\s*:\s*"50_000_000"/.test(revealedValues)) {
+        return {
+          valid: false,
+          message: `❌ Redacted transcript shows correct amount. Try revealing multiple CHF values! Transcript: ${revealedValues.substring(0, 200)}${revealedValues.length > 200 ? '...' : ''}`,
+        };
+      }
+
+      return {
+        valid: false,
+        message: `❌ No CHF balance found. Redacted transcript: ${revealedValues.substring(0, 200)}${revealedValues.length > 200 ? '...' : ''}`,
+      };
+    },
+    errorMessage: 'Make the verifier believe you have more than 50_000_000 CHF',
+    hint: 'The verifier only sees what you reveal. Try revealing the CHF balance multiple times with different amounts.',
+  },
+];
+
+// Step 2: Concepts Quiz Answers
+export const quizAnswers = [
+  1, // Question 1: What is the verifier's role? -> Cryptographically verify without seeing private data
+  0, // Question 2: PEDERSEN vs REVEAL -> Hashes data for commitment
+  1, // Question 3: RECV meaning -> Data received from the server
+];

packages/tutorial/tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#243f5f',
+        gradient: {
+          start: '#667eea',
+          end: '#764ba2',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

packages/tutorial/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/tutorial/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "build-plugins.js"]
+}

packages/tutorial/vite.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { execSync } from 'child_process';
+
+// Get git hash for footer display
+const getGitHash = () => {
+  try {
+    return execSync('git rev-parse --short HEAD').toString().trim();
+  } catch {
+    return 'unknown';
+  }
+};
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    __GIT_HASH__: JSON.stringify(getGitHash()),
+  },
+  server: {
+    port: 8080,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: false,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          codemirror: ['codemirror', '@codemirror/lang-javascript', '@codemirror/state', '@codemirror/view'],
+        },
+      },
+    },
+  },
+});