Deploy Marimo Zero 2026-03-24 23:38:58 UTC

.dockerignore

@@ -0,0 +1,13 @@
+.git
+.gitignore
+*.md
+!README.md
+.env.example
+Dockerfile
+entrypoint.sh
+DEPLOY_HF.md
+STRUCTURE.md
+README.md
+README.spaces.md
+deploy.py
+deploy-to-hf.sh

.gitignore

@@ -0,0 +1,6 @@
+*.pyc
+__pycache__/
+*.log
+.env
+*.swp
+*.swo

Dockerfile

@@ -0,0 +1,70 @@
+# Marimo Zero - Hugging Face Spaces Dockerfile
+# Optimized for HF Spaces deployment
+
+FROM python:3.11-slim
+
+# 1. System Dependencies
+RUN apt-get update && \
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
+    curl git bash jq procps net-tools nodejs npm ca-certificates nginx \
+    && rm -rf /var/lib/apt/lists/*
+
+# 2. Install Python Dependencies
+RUN pip install --no-cache-dir \
+    marimo \
+    huggingface_hub \
+    tomli \
+    tomli-w \
+    fastapi \
+    uvicorn \
+    requests
+
+# 3. Install ZeroClaw (Agent Zero)
+RUN curl -fsSL "https://github.com/zeroclaw-labs/zeroclaw/releases/latest/download/zeroclaw-x86_64-unknown-linux-gnu.tar.gz" \
+    -o zeroclaw.tar.gz && \
+    tar -xzf zeroclaw.tar.gz && \
+    mv zeroclaw /usr/local/bin/zeroclaw && \
+    chmod +x /usr/local/bin/zeroclaw && \
+    rm zeroclaw.tar.gz
+
+# 4. Install OmniRoute
+RUN npm install -g omniroute
+
+# 5. Setup Workspace
+WORKDIR /app
+RUN mkdir -p /app/workspace /app/.zeroclaw /app/.omniroute /var/log/marimo-zero && \
+    chmod -R 777 /app/workspace /app/.zeroclaw /app/.omniroute /var/log/marimo-zero
+
+# 6. Copy Config Files
+COPY config.toml /app/.zeroclaw/config.toml
+COPY omniroute-accounts.json /app/.omniroute/accounts.json
+
+# 7. Copy Marimo Notebook
+COPY marimo_sandbox.py /app/marimo_sandbox.py
+
+# 8. Copy Static UI
+COPY marimo-zero-ui.html /app/static/index.html
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# 9. Copy Proxy Server (routes all ports through 7860)
+COPY proxy_server.py /app/proxy_server.py
+
+# 10. Copy Entrypoint
+COPY entrypoint-hf.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+# 11. HF Spaces Environment
+ENV PORT=7860
+ENV MARIMO_PORT=8080
+ENV OMNIROUTE_PORT=20128
+ENV WORKSPACE=/app/workspace
+ENV HOME=/app
+ENV HF_SPACE=true
+
+# 12. Expose single port (HF Spaces requirement)
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+ENTRYPOINT ["/app/entrypoint.sh"]

README.md

@@ -1,10 +1,116 @@
 ---
 title: Marimo Zero
-emoji: 👀
+emoji: 🦀
 colorFrom: blue
-colorTo: green
+colorTo: purple
 sdk: docker
 pinned: false
+license: mit
+short_description: Agent Zero chat + Marimo sandbox with OmniRoute LLM gateway
+app_port: 7860
+tags:
+  - agent-zero
+  - marimo
+  - llm
+  - ai
+  - zeroclaw
+  - omniroute
+  - ai-assistant
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+  <img src="https://via.placeholder.com/720x400/1a1a2e/00d9ff?text=Marimo+Zero" alt="Marimo Zero" width="720"/>
+  <br/><br/>
+  <strong>Agent Zero + Marimo Sandbox</strong>
+  <br/>
+  <sub>Chat-first AI with toggleable code execution environment</sub>
+  <br/><br/>
+
+  [![Agent Zero](https://img.shields.io/badge/Agent%20Zero-Powered-blue)](https://github.com/zeroclaw-labs/zeroclaw)
+  [![Marimo](https://img.shields.io/badge/Marimo-Reactive-orange)](https://marimo.io)
+  [![OmniRoute](https://img.shields.io/badge/OmniRoute-Multi--Account-green)](https://github.com/omniroute/omniroute)
+</div>
+
+---
+
+## Architecture
+
+This Space uses a custom Docker image with **Agent Zero**, **Marimo**, and **OmniRoute**.
+
+- **🤖 Agent Zero:** Fast Rust-based AI agent framework
+- **📓 Marimo:** Reactive Python notebook for code execution
+- **🔀 OmniRoute:** Multi-account LLM routing with automatic failover
+- **🔒 Secure:** All API keys managed via HF Spaces secrets
+
+## Quick Start
+
+1. **Duplicate this Space**
+2. **Set Secrets:**
+   - `API_KEYS_JSON`: JSON with your LLM API keys (see below)
+3. **Wait for build** (~5-10 minutes)
+4. **Start chatting!**
+
+### API Keys Format
+
+Set `API_KEYS_JSON` in **Space Settings → Repository secrets**:
+
+```json
+{
+  "openai": "sk-...",
+  "anthropic": "sk-ant-...",
+  "nvidia": "nvapi-...",
+  "groq": "gsk_..."
+}
+```
+
+Supports key rotation: `openai_2`, `openai_3`, etc.
+
+## Features
+
+### Agent Zero Chat
+- Natural language conversations
+- Tool calling (file operations, HTTP requests)
+- Persistent memory per project
+- Code generation with execution context
+
+### Marimo Sandbox (Toggleable)
+- **Code Editor:** Write and execute Python code
+- **File Browser:** View workspace files
+- **File Editor:** Create/edit files directly
+- **Reactive:** Changes propagate instantly
+
+### OmniRoute Integration
+- Multiple LLM account pooling
+- Automatic failover between accounts
+- Support for OpenAI, Anthropic, NVIDIA, Groq
+- Local proxy for privacy
+
+## Routes
+
+| Path | Service | Description |
+|------|---------|-------------|
+| `/` | Main UI | Agent Zero chat + Marimo toggle |
+| `/chat/*` | Agent Zero | Chat API |
+| `/sandbox/*` | Marimo | Sandbox notebook |
+| `/api/*` | OmniRoute | LLM proxy |
+| `/health` | Healthcheck | HF Spaces monitoring |
+
+## Workspace
+
+All files are stored in `/app/workspace` and persist across restarts:
+
+```
+/workspace
+├── projects/       # Agent Zero project data
+├── memory/         # Persistent memory files
+├── code/           # Generated code
+└── files/          # User files
+```
+
+## Development
+
+See full documentation: [GitHub Repository](https://github.com/YOUR_REPO/marimo-zero)
+
+## License
+
+MIT

config.toml

@@ -0,0 +1,52 @@
+# ZeroClaw / Agent Zero Configuration
+# Uses OmniRoute as the LLM provider
+
+default_provider = "omniroute"
+default_model = "gpt-4"
+default_temperature = 0.7
+
+[gateway]
+host = "0.0.0.0"
+port = 80
+allow_public_bind = true
+require_pairing = false
+
+[skills]
+open_skills_enabled = true
+
+[memory]
+backend = "sqlite"
+auto_save = true
+
+# OmniRoute Provider
+[providers.omniroute]
+api_url = "http://localhost:20128/v1"
+api_key = "sk-omniroute"
+
+[browser]
+enabled = false
+
+[http_request]
+enabled = true
+allowed_domains = ["*"]
+
+[agents.primary]
+provider = "omniroute"
+model = "gpt-4"
+system_prompt = """
+You are an AI assistant running in Marimo Zero.
+
+WORKSPACE:
+- All files are stored in /app/workspace
+- You share this workspace with the Marimo sandbox
+
+MARIMO SANDBOX:
+- Users can toggle a Marimo notebook panel for code execution
+- Code written in Marimo runs in the same container
+- Files created in Marimo are visible to you and vice versa
+
+CAPABILITIES:
+- Write and execute code via Marimo sandbox
+- Read/write files in /app/workspace
+- Use tools for file operations, HTTP requests, etc.
+"""

entrypoint.sh

@@ -0,0 +1,134 @@
+#!/bin/bash
+set -e
+
+echo "🚀 Starting Marimo Zero for Hugging Face Spaces..."
+
+# HF Spaces provides these env vars:
+# - HF_SPACE_ID (e.g., "username/space-name")
+# - HF_TOKEN (for API access)
+# - API_KEYS_JSON (single JSON secret with all provider keys)
+
+# Parse API_KEYS_JSON (same as VerdantClaw)
+if [ -n "$API_KEYS_JSON" ]; then
+    echo "📝 Parsing API keys from JSON..."
+
+    # Extract individual keys
+    export OPENAI_API_KEY=$(echo $API_KEYS_JSON | jq -r '.openai // empty')
+    export ANTHROPIC_API_KEY=$(echo $API_KEYS_JSON | jq -r '.anthropic // empty')
+    export NVIDIA_API_KEY=$(echo $API_KEYS_JSON | jq -r '.nvidia // empty')
+    export GROQ_API_KEY=$(echo $API_KEYS_JSON | jq -r '.groq // empty')
+    export GOOGLE_API_KEY=$(echo $API_KEYS_JSON | jq -r '.google // empty')
+
+    # Support key rotation (openai_2, openai_3, etc.)
+    for provider in openai anthropic nvidia groq google; do
+        for i in $(seq 2 5); do
+            val=$(echo $API_KEYS_JSON | jq -r ".${provider}_${i} // empty")
+            if [ -n "$val" ] && [ "$val" != "null" ]; then
+                envname=$(echo "${provider}_API_KEY_${i}" | tr '[:lower:]' '[:upper:]')
+                export "$envname=$val"
+                echo "✓ Loaded rotation key: $envname"
+            fi
+        done
+    done
+
+    echo "✓ API keys loaded from API_KEYS_JSON"
+else
+    echo "⚠️ WARNING: API_KEYS_JSON not set!"
+fi
+
+# 1. Start OmniRoute (LLM Gateway)
+echo "📡 Starting OmniRoute on port $OMNIROUTE_PORT..."
+
+# Build accounts.json from parsed env vars
+cat > /app/.omniroute/accounts.json << EOF
+{
+  "accounts": [
+EOF
+
+first=true
+if [ -n "$OPENAI_API_KEY" ]; then
+    cat >> /app/.omniroute/accounts.json << EOF
+    {"name": "openai", "provider": "openai", "api_key": "$OPENAI_API_KEY", "default": true}
+EOF
+    first=false
+fi
+
+if [ -n "$ANTHROPIC_API_KEY" ]; then
+    if [ "$first" = false ]; then echo "," >> /app/.omniroute/accounts.json; fi
+    cat >> /app/.omniroute/accounts.json << EOF
+    {"name": "anthropic", "provider": "anthropic", "api_key": "$ANTHROPIC_API_KEY", "default": false}
+EOF
+    first=false
+fi
+
+if [ -n "$NVIDIA_API_KEY" ]; then
+    if [ "$first" = false ]; then echo "," >> /app/.omniroute/accounts.json; fi
+    cat >> /app/.omniroute/accounts.json << EOF
+    {"name": "nvidia", "provider": "nvidia", "api_key": "$NVIDIA_API_KEY", "default": false}
+EOF
+    first=false
+fi
+
+if [ -n "$GROQ_API_KEY" ]; then
+    if [ "$first" = false ]; then echo "," >> /app/.omniroute/accounts.json; fi
+    cat >> /app/.omniroute/accounts.json << EOF
+    {"name": "groq", "provider": "groq", "api_key": "$GROQ_API_KEY", "default": false}
+EOF
+    first=false
+fi
+
+cat >> /app/.omniroute/accounts.json << EOF
+  ]
+}
+EOF
+
+echo "✓ Generated accounts.json from API_KEYS_JSON"
+
+omniroute start --port $OMNIROUTE_PORT --accounts /app/.omniroute/accounts.json &
+OMNI_PID=$!
+sleep 3
+
+# 2. Start Agent Zero (Main Chat UI)
+echo "🤖 Starting Agent Zero on port 80..."
+zeroclaw gateway --host 127.0.0.1 --port 80 --config /app/.zeroclaw/config.toml &
+AZ_PID=$!
+sleep 5
+
+# 3. Start Marimo (Sandbox)
+echo "📓 Starting Marimo on port $MARIMO_PORT..."
+marimo run /app/marimo_sandbox.py --host 127.0.0.1 --port $MARIMO_PORT --headless &
+MARIMO_PID=$!
+sleep 3
+
+# 4. Start Proxy Server (exposes everything on port 7860)
+echo "🔀 Starting proxy server on port 7860 (HF Spaces public port)..."
+python3 /app/proxy_server.py &
+PROXY_PID=$!
+sleep 2
+
+echo ""
+echo "✅ Marimo Zero Ready for Hugging Face Spaces!"
+echo "   ─────────────────────────────────────"
+echo "   Public URL: https://huggingface.co/spaces/$HF_SPACE_ID"
+echo "   ─────────────────────────────────────"
+echo "   Routes:"
+echo "     /           → Main UI (Agent Zero + Marimo toggle)"
+echo "     /chat/*     → Agent Zero API"
+echo "     /sandbox/*  → Marimo Sandbox"
+echo "     /api/*      → OmniRoute LLM API"
+echo "     /health     → Healthcheck"
+echo "   ─────────────────────────────────────"
+echo ""
+echo "   Processes: OmniRoute($OMNI_PID) AgentZero($AZ_PID) Marimo($MARIMO_PID) Proxy($PROXY_PID)"
+echo ""
+
+# Monitor processes
+while true; do
+    for pid in $OMNI_PID $AZ_PID $MARIMO_PID $PROXY_PID; do
+        if ! kill -0 $pid 2>/dev/null; then
+            echo "❌ Process $pid died, exiting..."
+            exit 1
+        fi
+    done
+    sleep 5
+done

marimo_sandbox.py

@@ -0,0 +1,147 @@
+# /// script
+# requires-python = ">=3.10"
+# dependencies = ["marimo"]
+# ///
+
+import marimo
+
+__generated_with = "0.17.6"
+app = marimo.App()
+
+
+@app.cell
+def _():
+    import marimo as mo
+    import os
+    
+    WORKSPACE = os.environ.get("WORKSPACE", "/app/workspace")
+    return WORKSPACE, mo
+
+
+@app.cell
+def _(mo):
+    mo.md("# 🦀 Marimo Sandbox")
+    mo.md("Toggle this panel from Agent Zero chat UI")
+    mo.md("---")
+    return
+
+
+@app.cell
+def _(mo):
+    """Code Editor Cell"""
+    mo.md("### 💻 Code Editor")
+    
+    code_editor = mo.ui.code_editor(
+        language="python",
+        value="# Write your code here\nprint('Hello from Marimo Zero!')",
+        label=""
+    )
+    
+    def run_code(code):
+        import sys
+        from io import StringIO
+        old_stdout = sys.stdout
+        sys.stdout = buf = StringIO()
+        try:
+            exec(code, {}, {})
+            output = buf.getvalue()
+            if output:
+                return mo.md(f"**Output:**\n```\n{output}\n```")
+            else:
+                return mo.md("✅ Code executed (no output)")
+        except Exception as e:
+            return mo.md(f"❌ Error:\n```\n{str(e)}\n```")
+        finally:
+            sys.stdout = old_stdout
+    
+    result = run_code(code_editor.value)
+    
+    mo.vstack([
+        code_editor,
+        mo.ui.run_button(label="▶️ Run"),
+        result
+    ])
+    return
+
+
+@app.cell
+def _(mo, WORKSPACE):
+    """File Browser Cell"""
+    mo.md("### 📁 Workspace Files")
+    
+    import os
+    
+    def list_files():
+        if not os.path.exists(WORKSPACE):
+            return mo.md("⚠️ Workspace not found")
+        
+        files = os.listdir(WORKSPACE)
+        if not files:
+            return mo.md("📭 Empty workspace")
+        
+        file_list = "\n".join([f"- 📄 `{f}`" for f in sorted(files)])
+        return mo.md(file_list)
+    
+    list_files()
+    return
+
+
+@app.cell
+def _(mo, WORKSPACE):
+    """File Editor Cell"""
+    mo.md("### ✏️ File Editor")
+    
+    import os
+    
+    filename = mo.ui.text(
+        label="Filename:",
+        value="example.md",
+        full_width=False
+    )
+    
+    filepath = os.path.join(WORKSPACE, filename.value)
+    
+    def read_file(name):
+        path = os.path.join(WORKSPACE, name)
+        if os.path.exists(path):
+            with open(path, 'r') as f:
+                return f.read()
+        return "# New file\n\nStart writing..."
+    
+    content = mo.ui.text_area(
+        label="Content:",
+        value=read_file(filename.value),
+        full_width=True,
+        height=300
+    )
+    
+    def save_file(name, text):
+        path = os.path.join(WORKSPACE, name)
+        with open(path, 'w') as f:
+            f.write(text)
+        return mo.md(f"✅ Saved to `{path}`")
+    
+    mo.vstack([
+        filename,
+        content,
+        mo.ui.run_button(label="💾 Save"),
+        save_file(filename.value, content.value)
+    ])
+    return
+
+
+@app.cell
+def _(mo):
+    """Terminal Output Cell"""
+    mo.md("### 📊 Output")
+    
+    mo.md("""
+    View execution results, plots, and outputs here.
+    
+    **Tip:** Use `print()` in code cells to see output here.
+    """)
+    return
+
+
+if __name__ == "__main__":
+    app.run()

nginx.conf

@@ -0,0 +1,57 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream agent_zero {
+        server localhost:80;
+    }
+    
+    upstream marimo {
+        server localhost:8080;
+    }
+    
+    upstream omniroute {
+        server localhost:20128;
+    }
+    
+    server {
+        listen 7860;
+        
+        # Health check
+        location /health {
+            return 200 '{"status":"healthy"}';
+            add_header Content-Type application/json;
+        }
+        
+        # Main UI
+        location / {
+            root /app/static;
+            try_files $uri $uri/ /index.html;
+        }
+        
+        # Agent Zero
+        location /chat/ {
+            proxy_pass http://agent_zero/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+        }
+        
+        # Marimo Sandbox
+        location /sandbox/ {
+            proxy_pass http://marimo/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+        }
+        
+        # OmniRoute API
+        location /api/ {
+            proxy_pass http://omniroute/;
+            proxy_set_header Host $host;
+        }
+    }
+}

omniroute-accounts.json

@@ -0,0 +1,12 @@
+{
+  "_comment": "This file is auto-generated from API_KEYS_JSON env var at startup",
+  "_note": "For HF Spaces, set API_KEYS_JSON as a Space secret",
+  "_example": {
+    "openai": "sk-...",
+    "anthropic": "sk-ant-...",
+    "nvidia": "nvapi-...",
+    "groq": "gsk_...",
+    "openai_2": "sk-..."
+  },
+  "accounts": []
+}

proxy_server.py

@@ -0,0 +1,94 @@
+# HF Spaces requires all traffic through port 7860
+# This proxy routes:
+#   /chat/* → Agent Zero (port 80)
+#   /sandbox/* → Marimo (port 8080)
+#   /api/* → OmniRoute (port 20128)
+
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+import httpx
+import asyncio
+
+app = FastAPI()
+
+# Service ports (internal)
+AGENT_ZERO_PORT = 80
+MARIMO_PORT = 8080
+OMNIROUTE_PORT = 20128
+HF_PORT = 7860
+
+# HTTP client with connection pooling
+http_client = httpx.AsyncClient(timeout=60.0)
+
+
+@app.get("/health")
+async def health():
+    """HF Spaces healthcheck endpoint"""
+    return {"status": "healthy", "service": "marimo-zero"}
+
+
+@app.get("/")
+async def root():
+    """Serve main UI"""
+    try:
+        with open("/app/static/index.html", "r") as f:
+            return HTMLResponse(content=f.read())
+    except FileNotFoundError:
+        return HTMLResponse("<h1>Marimo Zero</h1><p>UI not found</p>", status_code=404)
+
+
+@app.api_route("/chat/{path:path}", methods=["GET", "POST", "PUT", "DELETE"])
+async def proxy_agent_zero(request: Request, path: str):
+    """Proxy to Agent Zero"""
+    return await proxy_request(AGENT_ZERO_PORT, path, request)
+
+
+@app.api_route("/sandbox/{path:path}", methods=["GET", "POST", "PUT", "DELETE"])
+async def proxy_marimo(request: Request, path: str):
+    """Proxy to Marimo"""
+    return await proxy_request(MARIMO_PORT, path, request)
+
+
+@app.api_route("/api/{path:path}", methods=["GET", "POST", "PUT", "DELETE"])
+async def proxy_omniroute(request: Request, path: str):
+    """Proxy to OmniRoute"""
+    return await proxy_request(OMNIROUTE_PORT, path, request)
+
+
+async def proxy_request(target_port: int, path: str, request: Request):
+    """Generic proxy handler"""
+    url = f"http://localhost:{target_port}/{path}"
+    
+    try:
+        # Forward headers
+        headers = dict(request.headers)
+        headers.pop("host", None)
+        headers.pop("content-length", None)
+        
+        # Get body
+        body = await request.body() if request.method in ["POST", "PUT"] else None
+        
+        # Make request
+        response = await http_client.request(
+            method=request.method,
+            url=url,
+            headers=headers,
+            content=body
+        )
+        
+        # Return response
+        return StreamingResponse(
+            response.aiter_bytes(),
+            status_code=response.status_code,
+            headers=dict(response.headers)
+        )
+    except httpx.ConnectError as e:
+        raise HTTPException(status_code=503, detail=f"Service unavailable (port {target_port})")
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=HF_PORT)

static/index.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marimo Zero - Toggle Sandbox</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #1a1a2e;
+            color: #eee;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+
+        /* Agent Zero Chat Panel */
+        .chat-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #333;
+            transition: all 0.3s ease;
+        }
+
+        .chat-panel.collapsed {
+            flex: 0;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .chat-header {
+            padding: 1rem;
+            background: #16213e;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .chat-header h1 {
+            font-size: 1.2rem;
+            color: #00d9ff;
+        }
+
+        .chat-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem;
+        }
+
+        .chat-input {
+            padding: 1rem;
+            background: #16213e;
+            border-top: 1px solid #333;
+        }
+
+        .chat-input textarea {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #333;
+            border-radius: 8px;
+            background: #0f0f23;
+            color: #eee;
+            resize: none;
+            font-family: inherit;
+        }
+
+        .chat-input button {
+            margin-top: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: #00d9ff;
+            color: #000;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+        }
+
+        .chat-input button:hover {
+            background: #00b8d9;
+        }
+
+        /* Marimo Sandbox Panel */
+        .marimo-panel {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+        }
+
+        .marimo-panel.hidden {
+            width: 0;
+            opacity: 0;
+            overflow: hidden;
+        }
+
+        .marimo-header {
+            padding: 1rem;
+            background: #16213e;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .marimo-header h2 {
+            font-size: 1.2rem;
+            color: #ff6b6b;
+        }
+
+        .marimo-frame {
+            flex: 1;
+            border: none;
+            background: #fff;
+        }
+
+        /* Toggle Button */
+        .toggle-btn {
+            padding: 0.5rem 1rem;
+            background: #ff6b6b;
+            color: #fff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background 0.2s;
+        }
+
+        .toggle-btn:hover {
+            background: #ff5252;
+        }
+
+        .toggle-btn.active {
+            background: #4ecdc4;
+        }
+
+        /* Resize Handle */
+        .resize-handle {
+            width: 4px;
+            background: #333;
+            cursor: col-resize;
+            transition: background 0.2s;
+        }
+
+        .resize-handle:hover {
+            background: #00d9ff;
+        }
+
+        /* Message Styles */
+        .message {
+            margin-bottom: 1rem;
+            padding: 0.75rem;
+            border-radius: 8px;
+            max-width: 80%;
+        }
+
+        .message.user {
+            background: #00d9ff;
+            color: #000;
+            margin-left: auto;
+        }
+
+        .message.assistant {
+            background: #2a2a4a;
+            color: #eee;
+        }
+
+        .message pre {
+            background: #0f0f23;
+            padding: 0.5rem;
+            border-radius: 4px;
+            overflow-x: auto;
+            margin-top: 0.5rem;
+        }
+
+        .message code {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Agent Zero Chat Panel -->
+        <div class="chat-panel" id="chatPanel">
+            <div class="chat-header">
+                <h1>🤖 Agent Zero</h1>
+                <button class="toggle-btn" id="toggleChatBtn" onclick="toggleChat()">Hide Chat</button>
+            </div>
+            <div class="chat-body" id="chatBody">
+                <div class="message assistant">
+                    <strong>Agent Zero:</strong>
+                    <p>Welcome to Marimo Zero! I'm your AI assistant. Use the toggle button to show/hide the Marimo sandbox for code execution.</p>
+                </div>
+            </div>
+            <div class="chat-input">
+                <textarea id="chatInput" rows="3" placeholder="Type your message..."></textarea>
+                <button onclick="sendMessage()">Send</button>
+            </div>
+        </div>
+
+        <!-- Resize Handle -->
+        <div class="resize-handle" id="resizeHandle"></div>
+
+        <!-- Marimo Sandbox Panel -->
+        <div class="marimo-panel hidden" id="marimoPanel">
+            <div class="marimo-header">
+                <h2>📓 Marimo Sandbox</h2>
+                <button class="toggle-btn active" id="toggleMarimoBtn" onclick="toggleMarimo()">Hide Sandbox</button>
+            </div>
+            <iframe 
+                class="marimo-frame" 
+                id="marimoFrame"
+                src="http://localhost:8080"
+                sandbox="allow-scripts allow-same-origin allow-downloads"
+            ></iframe>
+        </div>
+    </div>
+
+    <script>
+        const chatPanel = document.getElementById('chatPanel');
+        const marimoPanel = document.getElementById('marimoPanel');
+        const chatBody = document.getElementById('chatBody');
+        const chatInput = document.getElementById('chatInput');
+        const resizeHandle = document.getElementById('resizeHandle');
+
+        // Toggle Marimo Sandbox
+        function toggleMarimo() {
+            marimoPanel.classList.toggle('hidden');
+            const btn = document.getElementById('toggleMarimoBtn');
+            btn.textContent = marimoPanel.classList.contains('hidden') ? 'Show Sandbox' : 'Hide Sandbox';
+            btn.classList.toggle('active');
+        }
+
+        // Toggle Chat Panel
+        function toggleChat() {
+            chatPanel.classList.toggle('collapsed');
+            const btn = document.getElementById('toggleChatBtn');
+            btn.textContent = chatPanel.classList.contains('collapsed') ? 'Show Chat' : 'Hide Chat';
+        }
+
+        // Send Message (simulated - replace with actual Agent Zero API call)
+        async function sendMessage() {
+            const message = chatInput.value.trim();
+            if (!message) return;
+
+            // Add user message
+            chatBody.innerHTML += `
+                <div class="message user">
+                    <strong>You:</strong>
+                    <p>${escapeHtml(message)}</p>
+                </div>
+            `;
+
+            chatInput.value = '';
+            chatBody.scrollTop = chatBody.scrollHeight;
+
+            // Call Agent Zero API (replace with actual endpoint)
+            try {
+                const response = await fetch('http://localhost:80/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message })
+                });
+                const data = await response.json();
+                
+                chatBody.innerHTML += `
+                    <div class="message assistant">
+                        <strong>Agent Zero:</strong>
+                        <p>${escapeHtml(data.response || 'No response')}</p>
+                    </div>
+                `;
+            } catch (err) {
+                chatBody.innerHTML += `
+                    <div class="message assistant">
+                        <strong>Agent Zero:</strong>
+                        <p>⚠️ Could not connect to Agent Zero. Make sure it's running on port 80.</p>
+                    </div>
+                `;
+            }
+
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+
+        // Escape HTML
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // Resize functionality
+        let isResizing = false;
+
+        resizeHandle.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            document.body.style.cursor = 'col-resize';
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!isResizing) return;
+
+            const containerWidth = document.querySelector('.container').offsetWidth;
+            const newMarimoWidth = ((containerWidth - e.clientX) / containerWidth) * 100;
+            
+            if (newMarimoWidth > 20 && newMarimoWidth < 80) {
+                marimoPanel.style.width = `${newMarimoWidth}%`;
+                chatPanel.style.flex = `0 0 ${100 - newMarimoWidth}%`;
+            }
+        });
+
+        document.addEventListener('mouseup', () => {
+            isResizing = false;
+            document.body.style.cursor = 'default';
+        });
+
+        // Enter to send
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    </script>
+</body>
+</html>