From 5aa5ab73f30843aceab9741a330838d8fd25cf2a Mon Sep 17 00:00:00 2001
From: Nova <nova@vm42.us>
Date: Wed, 25 Feb 2026 03:11:16 +0000
Subject: [PATCH] Initial commit: OpenClaw WebUI with LDAP SSO

Features:
- Modern chat interface with streaming responses
- Multi-file upload support
- Code canvas panel for code viewing/editing
- Chat history persistence
- LDAP SSO authentication
- OpenAI-compatible API proxy to OpenClaw gateway
- Model/agent selection
- Dark theme
---
 .gitignore                |   7 +
 README.md                 | 180 +++++++++
 client/index.html         |  14 +
 client/main.js            | 779 ++++++++++++++++++++++++++++++++++++++
 client/public/favicon.svg |   4 +
 client/public/styles.css  | 752 ++++++++++++++++++++++++++++++++++++
 package.json              |  32 ++
 scripts/create-repo.py    |  36 ++
 server/index.js           | 480 +++++++++++++++++++++++
 vite.config.js            |  22 ++
 10 files changed, 2306 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 client/index.html
 create mode 100644 client/main.js
 create mode 100644 client/public/favicon.svg
 create mode 100644 client/public/styles.css
 create mode 100644 package.json
 create mode 100644 scripts/create-repo.py
 create mode 100644 server/index.js
 create mode 100644 vite.config.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..330a338
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+dist/
+data/
+.DS_Store
+*.log
+.env
+.env.local
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1b376dd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,180 @@
+# OpenClaw WebUI
+
+A modern, OpenWebUI-compatible chat interface for OpenClaw with LDAP SSO support.
+
+![OpenClaw WebUI](https://via.placeholder.com/800x400?text=OpenClaw+WebUI)
+
+## Features
+
+- **Modern Chat Interface** - Clean, responsive UI inspired by OpenWebUI
+- **Multi-file Upload** - Attach files to messages
+- **Code Canvas** - Side panel for code editing and viewing
+- **Chat History** - Persistent conversation storage
+- **Streaming Responses** - Real-time token streaming
+- **LDAP SSO** - Enterprise authentication via LDAP
+- **Model Selection** - Switch between OpenClaw agents
+- **Dark Theme** - Easy on the eyes
+
+## Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Development mode (with hot reload)
+npm run dev
+
+# Production build
+npm run build
+
+# Start production server
+npm start
+```
+
+The server runs on port 3000 by default.
+
+## Configuration
+
+Configure via environment variables:
+
+```bash
+# Server
+PORT=3000
+NODE_ENV=production
+
+# OpenClaw Gateway
+OPENCLAW_GATEWAY=http://127.0.0.1:18789
+
+# LDAP Authentication
+LDAP_ENABLED=true
+LDAP_URL=ldap://localhost:389
+LDAP_BASE_DN=ou=users,dc=example,dc=com
+
+# Session
+SESSION_SECRET=your-secret-key
+
+# Development (disable auth)
+DISABLE_AUTH=true
+```
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                     OpenClaw WebUI                       │
+├─────────────────────────────────────────────────────────┤
+│  Frontend (Vanilla JS + Vite)                           │
+│  ├── Chat Interface                                      │
+│  ├── File Upload                                         │
+│  ├── Code Canvas                                         │
+│  └── History Sidebar                                     │
+├─────────────────────────────────────────────────────────┤
+│  Backend (Express.js)                                    │
+│  ├── LDAP SSO Authentication                             │
+│  ├── Session Management                                  │
+│  ├── Chat History Persistence                            │
+│  ├── File Upload Handling                                │
+│  └── /v1/chat/completions Proxy                          │
+├─────────────────────────────────────────────────────────┤
+│  OpenClaw Gateway (port 18789)                           │
+│  ├── WebSocket Protocol                                  │
+│  ├── OpenAI-Compatible API                               │
+│  └── Agent Execution                                     │
+└─────────────────────────────────────────────────────────┘
+```
+
+## API Endpoints
+
+### Authentication
+- `GET /api/auth/status` - Check authentication status
+- `POST /api/auth/login` - Login with username/password
+- `POST /api/auth/logout` - Logout
+
+### Conversations
+- `GET /api/conversations` - List all conversations
+- `POST /api/conversations` - Create new conversation
+- `PUT /api/conversations/:id` - Update conversation
+- `DELETE /api/conversations/:id` - Delete conversation
+- `GET /api/conversations/:id/messages` - Get messages
+- `POST /api/conversations/:id/messages` - Save message
+
+### Files
+- `POST /api/upload` - Upload file
+- `GET /api/upload/:id` - Download file
+- `GET /api/upload/:id/meta` - Get file metadata
+
+### OpenAI-Compatible
+- `POST /v1/chat/completions` - Chat completions (proxied to OpenClaw)
+- `GET /v1/models` - List available models
+
+## LDAP Configuration
+
+The LDAP integration supports standard Active Directory and OpenLDAP setups:
+
+```bash
+# LDAP Server URL
+LDAP_URL=ldap://ldap.example.com:389
+
+# Base DN for user search
+LDAP_BASE_DN=ou=users,dc=example,dc=com
+
+# Bind DN for searching (if needed)
+LDAP_BIND_DN=cn=admin,dc=example,dc=com
+LDAP_BIND_PASSWORD=admin_password
+
+# Custom search filter (optional)
+LDAP_SEARCH_FILTER=(uid={{username}})
+```
+
+Users authenticate with their LDAP username and password.
+
+## Development
+
+```bash
+# Run in development mode
+npm run dev
+
+# This starts:
+# - Backend server on port 3000 (with hot reload)
+# - Vite dev server on port 5173 (with HMR)
+# - Proxy from Vite to backend for /api and /v1
+```
+
+## Production Deployment
+
+```bash
+# Build frontend
+npm run build
+
+# Start production server
+NODE_ENV=production npm start
+```
+
+The production server serves static files from `dist/` and handles all API routes.
+
+## File Structure
+
+```
+openclaw-webui/
+├── client/
+│   ├── index.html
+│   ├── main.js           # Main application
+│   └── public/
+│       ├── styles.css
+│       └── favicon.svg
+├── server/
+│   └── index.js          # Express server
+├── data/                 # Chat history (gitignored)
+├── dist/                 # Production build (gitignored)
+├── package.json
+├── vite.config.js
+└── README.md
+```
+
+## License
+
+MIT License - See LICENSE file for details.
+
+## Credits
+
+Built for [OpenClaw](https://github.com/openclaw/openclaw) - AI assistant framework.
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 0000000..d97823f
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OpenClaw WebUI</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/client/main.js b/client/main.js
new file mode 100644
index 0000000..776edeb
--- /dev/null
+++ b/client/main.js
@@ -0,0 +1,779 @@
+/**
+ * OpenClaw WebUI - Main Application
+ * 
+ * A modern chat interface for OpenClaw with:
+ * - Multi-file upload
+ * - Code canvas
+ * - Chat history
+ * - Streaming responses
+ * - LDAP SSO
+ */
+
+// ==================== State Management ====================
+
+const state = {
+  user: null,
+  conversations: [],
+  currentConversation: null,
+  messages: [],
+  isLoading: false,
+  models: [],
+  selectedModel: 'main',
+  files: [],
+  canvasOpen: false,
+  canvasContent: '',
+  canvasLanguage: 'javascript'
+};
+
+// ==================== API Client ====================
+
+const api = {
+  async request(path, options = {}) {
+    const res = await fetch(path, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers
+      },
+      body: options.body ? JSON.stringify(options.body) : undefined
+    });
+    
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || 'Request failed');
+    }
+    
+    if (res.status === 204) return null;
+    return res.json();
+  },
+
+  // Auth
+  async getStatus() {
+    return this.request('/api/auth/status');
+  },
+  
+  async login(username, password) {
+    return this.request('/api/auth/login', {
+      method: 'POST',
+      body: { username, password }
+    });
+  },
+  
+  async logout() {
+    return this.request('/api/auth/logout', { method: 'POST' });
+  },
+
+  // Conversations
+  async getConversations() {
+    return this.request('/api/conversations');
+  },
+  
+  async createConversation(title) {
+    return this.request('/api/conversations', {
+      method: 'POST',
+      body: { title }
+    });
+  },
+  
+  async updateConversation(id, data) {
+    return this.request(`/api/conversations/${id}`, {
+      method: 'PUT',
+      body: data
+    });
+  },
+  
+  async deleteConversation(id) {
+    return this.request(`/api/conversations/${id}`, { method: 'DELETE' });
+  },
+  
+  async getMessages(convId) {
+    return this.request(`/api/conversations/${convId}/messages`);
+  },
+  
+  async saveMessage(convId, message) {
+    return this.request(`/api/conversations/${convId}/messages`, {
+      method: 'POST',
+      body: message
+    });
+  },
+
+  // Models
+  async getModels() {
+    return this.request('/api/models');
+  },
+
+  // Upload
+  async uploadFile(file) {
+    const res = await fetch(`/api/upload?filename=${encodeURIComponent(file.name)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': file.type },
+      body: file
+    });
+    return res.json();
+  }
+};
+
+// ==================== Markdown Parser (Simple) ====================
+
+function parseMarkdown(text) {
+  if (!text) return '';
+  
+  // Escape HTML
+  text = text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+  
+  // Code blocks (with language)
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    const langClass = lang ? `language-${lang}` : '';
+    return `<pre class="code-block ${langClass}" data-language="${lang}"><code>${code}</code></pre>`;
+  });
+  
+  // Inline code
+  text = text.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+  
+  // Bold
+  text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+  
+  // Italic
+  text = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+  
+  // Links
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+  
+  // Line breaks
+  text = text.replace(/\n/g, '<br>');
+  
+  return text;
+}
+
+// ==================== Streaming Chat ====================
+
+async function streamChat(messages, onToken, onComplete, onError) {
+  const body = {
+    model: `openclaw:${state.selectedModel}`,
+    stream: true,
+    messages: messages.map(m => ({
+      role: m.role,
+      content: m.content
+    }))
+  };
+  
+  try {
+    const res = await fetch('/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer a41984619a5f4b9bf9148ab6eb4abca53eb796d046cbbec5',
+        'x-openclaw-agent-id': state.selectedModel
+      },
+      body: JSON.stringify(body)
+    });
+    
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error?.message || err.error || 'Request failed');
+    }
+    
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let fullContent = '';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      
+      const chunk = decoder.decode(value);
+      const lines = chunk.split('\n');
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = line.slice(6);
+          if (data === '[DONE]') continue;
+          
+          try {
+            const json = JSON.parse(data);
+            const content = json.choices?.[0]?.delta?.content;
+            if (content) {
+              fullContent += content;
+              onToken(content, fullContent);
+            }
+          } catch {
+            // Ignore parse errors
+          }
+        }
+      }
+    }
+    
+    onComplete(fullContent);
+  } catch (err) {
+    onError(err);
+  }
+}
+
+// ==================== UI Components ====================
+
+function render(selector, html) {
+  document.querySelector(selector).innerHTML = html;
+}
+
+function renderApp() {
+  const app = document.getElementById('app');
+  
+  if (!state.user) {
+    app.innerHTML = renderLoginPage();
+  } else {
+    app.innerHTML = renderMainPage();
+    attachEventListeners();
+  }
+}
+
+function renderLoginPage() {
+  return `
+    <div class="login-container">
+      <div class="login-card">
+        <div class="login-header">
+          <svg class="logo" viewBox="0 0 100 100" width="64" height="64">
+            <circle cx="50" cy="50" r="45" fill="none" stroke="var(--primary)" stroke-width="4"/>
+            <path d="M30 50 L45 65 L70 35" stroke="var(--primary)" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <h1>OpenClaw WebUI</h1>
+          <p>Sign in to continue</p>
+        </div>
+        <form id="login-form" class="login-form">
+          <input type="text" id="login-username" placeholder="Username" autocomplete="username" required>
+          <input type="password" id="login-password" placeholder="Password" autocomplete="current-password" required>
+          <button type="submit" class="btn-primary">Sign In</button>
+        </form>
+        <div id="login-error" class="login-error hidden"></div>
+      </div>
+    </div>
+  `;
+}
+
+function renderMainPage() {
+  return `
+    <div class="app-container">
+      <!-- Sidebar -->
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <button id="new-chat-btn" class="btn-new-chat">
+            <svg viewBox="0 0 24 24" width="20" height="20">
+              <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+            </svg>
+            New Chat
+          </button>
+        </div>
+        <div class="sidebar-content">
+          <div id="conversations-list" class="conversations-list">
+            ${renderConversationsList()}
+          </div>
+        </div>
+        <div class="sidebar-footer">
+          <div class="user-info">
+            <div class="user-avatar">${state.user.username?.[0]?.toUpperCase() || '?'}</div>
+            <div class="user-name">${state.user.displayName || state.user.username}</div>
+          </div>
+          <button id="logout-btn" class="btn-logout" title="Sign out">
+            <svg viewBox="0 0 24 24" width="20" height="20">
+              <path fill="currentColor" d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/>
+            </svg>
+          </button>
+        </div>
+      </aside>
+
+      <!-- Main Chat Area -->
+      <main class="main-content">
+        <div class="chat-header">
+          <div class="model-selector">
+            <label for="model-select">Model:</label>
+            <select id="model-select">
+              ${state.models.map(m => `
+                <option value="${m.id}" ${m.id === state.selectedModel ? 'selected' : ''}>
+                  ${m.name || m.id}
+                </option>
+              `).join('')}
+            </select>
+          </div>
+          <button id="canvas-toggle" class="btn-canvas ${state.canvasOpen ? 'active' : ''}">
+            <svg viewBox="0 0 24 24" width="20" height="20">
+              <path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+            </svg>
+            Code Canvas
+          </button>
+        </div>
+
+        <div class="chat-container">
+          <div id="messages-container" class="messages-container">
+            ${state.messages.length === 0 ? renderEmptyState() : renderMessages()}
+          </div>
+
+          <div class="input-container">
+            <div id="files-preview" class="files-preview"></div>
+            <div class="input-wrapper">
+              <label for="file-input" class="btn-attach" title="Attach files">
+                <svg viewBox="0 0 24 24" width="20" height="20">
+                  <path fill="currentColor" d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
+                </svg>
+              </label>
+              <input type="file" id="file-input" multiple accept="*/*" style="display:none">
+              <textarea id="message-input" placeholder="Message OpenClaw..." rows="1"></textarea>
+              <button id="send-btn" class="btn-send" title="Send">
+                <svg viewBox="0 0 24 24" width="24" height="24">
+                  <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Code Canvas Panel -->
+        <div id="canvas-panel" class="canvas-panel ${state.canvasOpen ? 'open' : ''}">
+          <div class="canvas-header">
+            <select id="canvas-language">
+              <option value="javascript">JavaScript</option>
+              <option value="python">Python</option>
+              <option value="html">HTML</option>
+              <option value="css">CSS</option>
+              <option value="json">JSON</option>
+              <option value="markdown">Markdown</option>
+              <option value="bash">Bash</option>
+              <option value="sql">SQL</option>
+            </select>
+            <button id="canvas-copy" class="btn-canvas-action" title="Copy">
+              <svg viewBox="0 0 24 24" width="16" height="16">
+                <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+              </svg>
+            </button>
+            <button id="canvas-close" class="btn-canvas-action" title="Close">
+              <svg viewBox="0 0 24 24" width="16" height="16">
+                <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+              </svg>
+            </button>
+          </div>
+          <textarea id="canvas-content" class="canvas-editor" spellcheck="false"></textarea>
+        </div>
+      </main>
+    </div>
+  `;
+}
+
+function renderConversationsList() {
+  if (state.conversations.length === 0) {
+    return '<div class="no-conversations">No conversations yet</div>';
+  }
+  
+  return state.conversations.map(conv => `
+    <div class="conversation-item ${conv.id === state.currentConversation?.id ? 'active' : ''}" data-id="${conv.id}">
+      <div class="conv-title">${escapeHtml(conv.title)}</div>
+      <div class="conv-date">${formatDate(conv.updatedAt)}</div>
+      <button class="conv-delete" data-id="${conv.id}" title="Delete">
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+        </svg>
+      </button>
+    </div>
+  `).join('');
+}
+
+function renderEmptyState() {
+  return `
+    <div class="empty-state">
+      <svg viewBox="0 0 100 100" width="80" height="80">
+        <circle cx="50" cy="50" r="45" fill="none" stroke="var(--text-muted)" stroke-width="2"/>
+        <circle cx="50" cy="40" r="12" fill="none" stroke="var(--text-muted)" stroke-width="2"/>
+        <path d="M35 55 Q50 70 65 55" fill="none" stroke="var(--text-muted)" stroke-width="2"/>
+      </svg>
+      <h2>Welcome to OpenClaw</h2>
+      <p>Start a conversation or upload files to begin</p>
+    </div>
+  `;
+}
+
+function renderMessages() {
+  return state.messages.map(msg => renderMessage(msg)).join('');
+}
+
+function renderMessage(msg) {
+  const isUser = msg.role === 'user';
+  const content = msg.content || '';
+  
+  let filesHtml = '';
+  if (msg.files?.length) {
+    filesHtml = `<div class="message-files">
+      ${msg.files.map(f => `
+        <div class="attached-file">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+          </svg>
+          ${escapeHtml(f.name)}
+        </div>
+      `).join('')}
+    </div>`;
+  }
+  
+  return `
+    <div class="message ${isUser ? 'user' : 'assistant'}">
+      <div class="message-avatar">${isUser ? (state.user.username?.[0]?.toUpperCase() || 'U') : '⚡'}</div>
+      <div class="message-content">
+        ${filesHtml}
+        <div class="message-text">${parseMarkdown(content)}</div>
+      </div>
+    </div>
+  `;
+}
+
+// ==================== Event Handlers ====================
+
+function attachEventListeners() {
+  // Login form
+  document.getElementById('login-form')?.addEventListener('submit', handleLogin);
+  
+  // Logout
+  document.getElementById('logout-btn')?.addEventListener('click', handleLogout);
+  
+  // New chat
+  document.getElementById('new-chat-btn')?.addEventListener('click', handleNewChat);
+  
+  // Model selection
+  document.getElementById('model-select')?.addEventListener('change', (e) => {
+    state.selectedModel = e.target.value;
+    localStorage.setItem('selected-model', state.selectedModel);
+  });
+  
+  // Message input
+  const input = document.getElementById('message-input');
+  input?.addEventListener('keydown', handleInputKeydown);
+  input?.addEventListener('input', autoResizeTextarea);
+  
+  // Send button
+  document.getElementById('send-btn')?.addEventListener('click', handleSendMessage);
+  
+  // File input
+  document.getElementById('file-input')?.addEventListener('change', handleFileSelect);
+  
+  // Canvas toggle
+  document.getElementById('canvas-toggle')?.addEventListener('click', toggleCanvas);
+  document.getElementById('canvas-close')?.addEventListener('click', () => toggleCanvas(false));
+  document.getElementById('canvas-copy')?.addEventListener('click', copyCanvasContent);
+  
+  // Conversation clicks
+  document.getElementById('conversations-list')?.addEventListener('click', handleConversationClick);
+}
+
+async function handleLogin(e) {
+  e.preventDefault();
+  const username = document.getElementById('login-username').value;
+  const password = document.getElementById('login-password').value;
+  const errorDiv = document.getElementById('login-error');
+  
+  try {
+    const result = await api.login(username, password);
+    if (result.success) {
+      state.user = result.user;
+      await loadInitialData();
+      renderApp();
+    }
+  } catch (err) {
+    errorDiv.textContent = err.message;
+    errorDiv.classList.remove('hidden');
+  }
+}
+
+async function handleLogout() {
+  await api.logout();
+  state.user = null;
+  renderApp();
+}
+
+async function handleNewChat() {
+  const conv = await api.createConversation('New Chat');
+  state.conversations.unshift(conv);
+  state.currentConversation = conv;
+  state.messages = [];
+  renderApp();
+}
+
+async function handleConversationClick(e) {
+  const deleteBtn = e.target.closest('.conv-delete');
+  if (deleteBtn) {
+    e.stopPropagation();
+    await handleDeleteConversation(deleteBtn.dataset.id);
+    return;
+  }
+  
+  const item = e.target.closest('.conversation-item');
+  if (item) {
+    await selectConversation(item.dataset.id);
+  }
+}
+
+async function handleDeleteConversation(id) {
+  if (!confirm('Delete this conversation?')) return;
+  
+  await api.deleteConversation(id);
+  state.conversations = state.conversations.filter(c => c.id !== id);
+  
+  if (state.currentConversation?.id === id) {
+    state.currentConversation = state.conversations[0] || null;
+    state.messages = state.currentConversation ? await api.getMessages(state.currentConversation.id) : [];
+  }
+  
+  renderApp();
+}
+
+async function selectConversation(id) {
+  state.currentConversation = state.conversations.find(c => c.id === id);
+  state.messages = await api.getMessages(id);
+  renderApp();
+  scrollToBottom();
+}
+
+function handleInputKeydown(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    handleSendMessage();
+  }
+}
+
+function autoResizeTextarea(e) {
+  const textarea = e.target;
+  textarea.style.height = 'auto';
+  textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+}
+
+async function handleFileSelect(e) {
+  const files = Array.from(e.target.files);
+  
+  for (const file of files) {
+    try {
+      const uploaded = await api.uploadFile(file);
+      state.files.push({
+        id: uploaded.id,
+        name: file.name,
+        type: file.type,
+        size: file.size
+      });
+    } catch (err) {
+      console.error('Failed to upload file:', file.name, err);
+    }
+  }
+  
+  renderFilesPreview();
+  e.target.value = '';
+}
+
+function renderFilesPreview() {
+  const container = document.getElementById('files-preview');
+  if (!container) return;
+  
+  container.innerHTML = state.files.map(f => `
+    <div class="file-preview" data-id="${f.id}">
+      <span>${escapeHtml(f.name)}</span>
+      <button class="file-remove" data-id="${f.id}">×</button>
+    </div>
+  `).join('');
+  
+  container.querySelectorAll('.file-remove').forEach(btn => {
+    btn.addEventListener('click', () => {
+      state.files = state.files.filter(f => f.id !== btn.dataset.id);
+      renderFilesPreview();
+    });
+  });
+}
+
+async function handleSendMessage() {
+  const input = document.getElementById('message-input');
+  const content = input.value.trim();
+  
+  if (!content && state.files.length === 0) return;
+  if (state.isLoading) return;
+  
+  // Create conversation if needed
+  if (!state.currentConversation) {
+    const conv = await api.createConversation(content.substring(0, 50));
+    state.conversations.unshift(conv);
+    state.currentConversation = conv;
+  }
+  
+  // Build message
+  const userMessage = {
+    role: 'user',
+    content: buildMessageContent(content, state.files),
+    files: state.files.length ? [...state.files] : null
+  };
+  
+  // Add user message
+  state.messages.push(userMessage);
+  await api.saveMessage(state.currentConversation.id, userMessage);
+  
+  // Clear input
+  input.value = '';
+  input.style.height = 'auto';
+  state.files = [];
+  renderFilesPreview();
+  
+  // Add placeholder for assistant response
+  const assistantMessage = { role: 'assistant', content: '' };
+  state.messages.push(assistantMessage);
+  
+  state.isLoading = true;
+  updateSendButton(true);
+  renderApp();
+  scrollToBottom();
+  
+  // Stream response
+  const messagesForApi = state.messages.slice(0, -1).map(m => ({
+    role: m.role,
+    content: m.content
+  }));
+  
+  await streamChat(
+    messagesForApi,
+    (token, full) => {
+      assistantMessage.content = full;
+      updateLastMessage(full);
+    },
+    async (fullContent) => {
+      state.isLoading = false;
+      updateSendButton(false);
+      await api.saveMessage(state.currentConversation.id, assistantMessage);
+      
+      // Update conversation title if first message
+      if (state.messages.length === 2) {
+        const title = content.substring(0, 50) + (content.length > 50 ? '...' : '');
+        await api.updateConversation(state.currentConversation.id, { title });
+        state.currentConversation.title = title;
+        document.querySelector('.conv-title[data-id="' + state.currentConversation.id + '"]')?.textContent = title;
+      }
+    },
+    (err) => {
+      state.isLoading = false;
+      updateSendButton(false);
+      assistantMessage.content = `**Error:** ${err.message}`;
+      updateLastMessage(assistantMessage.content);
+    }
+  );
+}
+
+function buildMessageContent(text, files) {
+  if (!files.length) return text;
+  
+  const fileDescriptions = files.map(f => `[Attached: ${f.name}]`).join('\n');
+  return `${text}\n\n${fileDescriptions}`;
+}
+
+function updateLastMessage(content) {
+  const container = document.getElementById('messages-container');
+  const messages = container.querySelectorAll('.message');
+  const last = messages[messages.length - 1];
+  if (last) {
+    const textDiv = last.querySelector('.message-text');
+    if (textDiv) {
+      textDiv.innerHTML = parseMarkdown(content);
+      scrollToBottom();
+    }
+  }
+}
+
+function updateSendButton(loading) {
+  const btn = document.getElementById('send-btn');
+  if (btn) {
+    btn.disabled = loading;
+    btn.classList.toggle('loading', loading);
+  }
+}
+
+function toggleCanvas(open) {
+  state.canvasOpen = open ?? !state.canvasOpen;
+  const panel = document.getElementById('canvas-panel');
+  const btn = document.getElementById('canvas-toggle');
+  
+  if (state.canvasOpen) {
+    panel?.classList.add('open');
+    btn?.classList.add('active');
+  } else {
+    panel?.classList.remove('open');
+    btn?.classList.remove('active');
+  }
+}
+
+function copyCanvasContent() {
+  const content = document.getElementById('canvas-content')?.value;
+  if (content) {
+    navigator.clipboard.writeText(content);
+  }
+}
+
+function scrollToBottom() {
+  const container = document.getElementById('messages-container');
+  if (container) {
+    container.scrollTop = container.scrollHeight;
+  }
+}
+
+// ==================== Utilities ====================
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function formatDate(ts) {
+  const date = new Date(ts);
+  const now = new Date();
+  
+  if (date.toDateString() === now.toDateString()) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  
+  const diff = now - date;
+  if (diff < 7 * 24 * 60 * 60 * 1000) {
+    return date.toLocaleDateString([], { weekday: 'short' });
+  }
+  
+  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
+// ==================== Initialization ====================
+
+async function loadInitialData() {
+  try {
+    const [convRes, modelsRes] = await Promise.all([
+      api.getConversations(),
+      api.getModels()
+    ]);
+    
+    state.conversations = convRes || [];
+    state.models = (modelsRes?.data || []).map(m => ({
+      id: m.id,
+      name: m.name || m.id
+    }));
+    
+    // Restore selected model
+    const savedModel = localStorage.getItem('selected-model');
+    if (savedModel && state.models.find(m => m.id === savedModel)) {
+      state.selectedModel = savedModel;
+    }
+  } catch (err) {
+    console.error('Failed to load initial data:', err);
+  }
+}
+
+async function init() {
+  try {
+    const result = await api.getStatus();
+    if (result.authenticated) {
+      state.user = result.user;
+      await loadInitialData();
+    }
+  } catch (err) {
+    console.error('Failed to check auth status:', err);
+  }
+  
+  renderApp();
+}
+
+init();
\ No newline at end of file
diff --git a/client/public/favicon.svg b/client/public/favicon.svg
new file mode 100644
index 0000000..9ac348c
--- /dev/null
+++ b/client/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" fill="none" stroke="#6366f1" stroke-width="6"/>
+  <path d="M28 50 L43 65 L72 30" stroke="#6366f1" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/client/public/styles.css b/client/public/styles.css
new file mode 100644
index 0000000..fca84c2
--- /dev/null
+++ b/client/public/styles.css
@@ -0,0 +1,752 @@
+/**
+ * OpenClaw WebUI - Styles
+ * Dark theme inspired by OpenWebUI
+ */
+
+:root {
+  --bg-primary: #0f0f0f;
+  --bg-secondary: #1a1a1a;
+  --bg-tertiary: #242424;
+  --bg-hover: #2a2a2a;
+  --bg-active: #333;
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666;
+  --border-color: #333;
+  --primary: #6366f1;
+  --primary-hover: #818cf8;
+  --accent: #22c55e;
+  --danger: #ef4444;
+  --user-msg-bg: #2f2f2f;
+  --assistant-msg-bg: #1a1a1a;
+  --code-bg: #0d0d0d;
+  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --transition: 0.2s ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  height: 100%;
+}
+
+/* ==================== Login Page ==================== */
+
+.login-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 40px;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: var(--shadow-md);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-header .logo {
+  margin-bottom: 16px;
+}
+
+.login-header h1 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.login-header p {
+  color: var(--text-secondary);
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.login-form input {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  font-size: 1rem;
+  color: var(--text-primary);
+  transition: border-color var(--transition);
+}
+
+.login-form input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.login-form input::placeholder {
+  color: var(--text-muted);
+}
+
+.login-error {
+  color: var(--danger);
+  text-align: center;
+  padding: 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+}
+
+.login-error.hidden {
+  display: none;
+}
+
+/* ==================== Buttons ==================== */
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+  transition: all var(--transition);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  padding: 14px 20px;
+  border-radius: var(--radius-md);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-new-chat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--bg-tertiary);
+  border: 1px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.95rem;
+}
+
+.btn-new-chat:hover {
+  background: var(--bg-hover);
+  border-color: var(--primary);
+}
+
+.btn-send {
+  background: var(--primary);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-send:hover:not(:disabled) {
+  background: var(--primary-hover);
+  transform: scale(1.05);
+}
+
+.btn-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-send.loading {
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.btn-attach {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+.btn-attach:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-canvas {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.btn-canvas:hover,
+.btn-canvas.active {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-logout {
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+.btn-logout:hover {
+  background: var(--danger);
+  color: white;
+}
+
+.btn-canvas-action {
+  padding: 6px;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+}
+
+.btn-canvas-action:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ==================== Main Layout ==================== */
+
+.app-container {
+  display: flex;
+  height: 100%;
+}
+
+/* ==================== Sidebar ==================== */
+
+.sidebar {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.user-name {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+/* ==================== Conversations List ==================== */
+
+.conversations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.conversation-item {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 14px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--transition);
+}
+
+.conversation-item:hover {
+  background: var(--bg-hover);
+}
+
+.conversation-item.active {
+  background: var(--bg-active);
+}
+
+.conv-title {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 24px;
+}
+
+.conv-date {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.conv-delete {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  opacity: 0;
+}
+
+.conversation-item:hover .conv-delete {
+  opacity: 1;
+}
+
+.conv-delete:hover {
+  color: var(--danger);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.no-conversations {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 20px;
+  font-size: 0.85rem;
+}
+
+/* ==================== Main Content ==================== */
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 12px 20px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.model-selector label {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+}
+
+.model-selector select {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+}
+
+.model-selector select:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+/* ==================== Chat Container ==================== */
+
+.chat-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.empty-state svg {
+  opacity: 0.5;
+  margin-bottom: 16px;
+}
+
+.empty-state h2 {
+  font-size: 1.25rem;
+  margin-bottom: 8px;
+  color: var(--text-secondary);
+}
+
+.empty-state p {
+  font-size: 0.9rem;
+}
+
+/* ==================== Messages ==================== */
+
+.message {
+  display: flex;
+  gap: 12px;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.message-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.message.user .message-avatar {
+  background: var(--primary);
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-text {
+  background: var(--bg-secondary);
+  padding: 14px 18px;
+  border-radius: var(--radius-lg);
+  border-top-left-radius: var(--radius-sm);
+  line-height: 1.6;
+}
+
+.message.user .message-text {
+  background: var(--user-msg-bg);
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-sm);
+}
+
+.message-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.attached-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+/* ==================== Code Blocks ==================== */
+
+.code-block {
+  background: var(--code-bg);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  margin: 12px 0;
+  overflow-x: auto;
+  position: relative;
+}
+
+.code-block code {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.inline-code {
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+/* ==================== Input Area ==================== */
+
+.input-container {
+  padding: 16px 20px 24px;
+  background: var(--bg-primary);
+}
+
+.files-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.file-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+}
+
+.file-remove {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  padding: 2px;
+}
+
+.file-remove:hover {
+  color: var(--danger);
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: 900px;
+  margin: 0 auto;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 8px;
+}
+
+.input-wrapper:focus-within {
+  border-color: var(--primary);
+}
+
+#message-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 1rem;
+  line-height: 1.5;
+  resize: none;
+  min-height: 24px;
+  max-height: 200px;
+  padding: 8px 4px;
+  font-family: inherit;
+}
+
+#message-input:focus {
+  outline: none;
+}
+
+#message-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* ==================== Code Canvas ==================== */
+
+.canvas-panel {
+  position: absolute;
+  right: -400px;
+  top: 0;
+  bottom: 0;
+  width: 400px;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  transition: right var(--transition);
+  z-index: 10;
+}
+
+.canvas-panel.open {
+  right: 0;
+}
+
+.canvas-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#canvas-language {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 6px 10px;
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  flex: 1;
+}
+
+.canvas-editor {
+  flex: 1;
+  background: var(--code-bg);
+  border: none;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  padding: 16px;
+  resize: none;
+}
+
+.canvas-editor:focus {
+  outline: none;
+}
+
+/* ==================== Scrollbar ==================== */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--bg-hover);
+}
+
+/* ==================== Responsive ==================== */
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    left: -280px;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    transition: left var(--transition);
+  }
+  
+  .sidebar.open {
+    left: 0;
+  }
+  
+  .canvas-panel {
+    width: 100%;
+    right: -100%;
+  }
+  
+  .message {
+    max-width: 100%;
+  }
+  
+  .input-wrapper {
+    max-width: 100%;
+  }
+}
+
+/* ==================== Syntax Highlighting (Basic) ==================== */
+
+.language-javascript .keyword { color: #c678dd; }
+.language-javascript .string { color: #98c379; }
+.language-javascript .number { color: #d19a66; }
+.language-javascript .comment { color: #5c6370; }
+.language-javascript .function { color: #61afef; }
+
+.language-python .keyword { color: #c678dd; }
+.language-python .string { color: #98c379; }
+.language-python .number { color: #d19a66; }
+.language-python .comment { color: #5c6370; }
+.language-python .function { color: #61afef; }
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ab845fa
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "openclaw-webui",
+  "version": "1.0.0",
+  "description": "OpenWebUI-compatible chat interface for OpenClaw with LDAP SSO",
+  "main": "server/index.js",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "node --watch server/index.js",
+    "dev:client": "vite",
+    "build": "vite build && npm run build:server",
+    "build:server": "echo 'Server is ESM, no build needed'",
+    "start": "NODE_ENV=production node server/index.js",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "http-proxy-middleware": "^2.0.6",
+    "ldapjs": "^3.0.7",
+    "uuid": "^9.0.0",
+    "ws": "^8.16.0",
+    "eventsource": "^2.0.2"
+  },
+  "devDependencies": {
+    "vite": "^5.0.12",
+    "concurrently": "^8.2.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
\ No newline at end of file
diff --git a/scripts/create-repo.py b/scripts/create-repo.py
new file mode 100644
index 0000000..eb0c89e
--- /dev/null
+++ b/scripts/create-repo.py
@@ -0,0 +1,36 @@
+#!/usr/bin/env python3
+"""Create the Gitea repository for OpenClaw WebUI."""
+
+import requests
+import sys
+
+GITEA_URL = "https://git.theta42.com/api/v1"
+USERNAME = "nova"
+PASSWORD = "ea21f1d%e2c0fHD93*21ab0"
+REPO_NAME = "openclaw-webui"
+
+def create_repo():
+    endpoint = f"{GITEA_URL}/user/repos"
+    data = {
+        "name": REPO_NAME,
+        "description": "OpenWebUI-compatible chat interface for OpenClaw with LDAP SSO",
+        "private": False,
+        "auto_init": False
+    }
+    
+    response = requests.post(endpoint, auth=(USERNAME, PASSWORD), json=data)
+    
+    if response.status_code == 201:
+        repo = response.json()
+        print(f"✅ Repository created: {repo['html_url']}")
+        return repo['html_url']
+    elif response.status_code == 409:
+        print(f"⚠️  Repository already exists")
+        return f"https://git.theta42.com/{USERNAME}/{REPO_NAME}"
+    else:
+        print(f"❌ Failed to create repo: {response.status_code}")
+        print(response.text)
+        sys.exit(1)
+
+if __name__ == "__main__":
+    create_repo()
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
new file mode 100644
index 0000000..b3d44e9
--- /dev/null
+++ b/server/index.js
@@ -0,0 +1,480 @@
+/**
+ * OpenClaw WebUI - Backend Proxy Server
+ * 
+ * Features:
+ * - LDAP SSO Authentication
+ * - Proxy to OpenClaw Gateway (WebSocket + HTTP)
+ * - Session management
+ * - Chat history persistence
+ */
+
+import express from 'express';
+import session from 'express-session';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { WebSocketServer, WebSocket } from 'ws';
+import { createServer } from 'http';
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import ldap from 'ldapjs';
+import { v4 as uuidv4 } from 'uuid';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// Configuration
+const CONFIG = {
+  port: process.env.PORT || 3000,
+  gatewayUrl: process.env.OPENCLAW_GATEWAY || 'http://127.0.0.1:18789',
+  gatewayToken: process.env.OPENCLAW_TOKEN || 'a41984619a5f4b9bf9148ab6eb4abca53eb796d046cbbec5',
+  sessionSecret: process.env.SESSION_SECRET || 'openclaw-webui-secret-change-in-production',
+  
+  // LDAP Configuration
+  ldap: {
+    url: process.env.LDAP_URL || 'ldap://localhost:389',
+    baseDN: process.env.LDAP_BASE_DN || 'ou=users,dc=example,dc=com',
+    bindDN: process.env.LDAP_BIND_DN || '',
+    bindPassword: process.env.LDAP_BIND_PASSWORD || '',
+    searchFilter: process.env.LDAP_SEARCH_FILTER || '(uid={{username}})',
+    enabled: process.env.LDAP_ENABLED === 'true'
+  },
+  
+  // Data paths
+  dataDir: process.env.DATA_DIR || join(__dirname, '../data'),
+  
+  // Disable auth for development
+  disableAuth: process.env.DISABLE_AUTH === 'true'
+};
+
+// Ensure data directory exists
+if (!existsSync(CONFIG.dataDir)) {
+  mkdirSync(CONFIG.dataDir, { recursive: true });
+}
+
+// Initialize Express app
+const app = express();
+const server = createServer(app);
+
+// Middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// Session middleware
+app.use(session({
+  secret: CONFIG.sessionSecret,
+  resave: false,
+  saveUninitialized: false,
+  cookie: {
+    secure: process.env.NODE_ENV === 'production',
+    maxAge: 24 * 60 * 60 * 1000 // 24 hours
+  }
+}));
+
+// CORS for development
+app.use((req, res, next) => {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  if (req.method === 'OPTIONS') return res.sendStatus(200);
+  next();
+});
+
+// ==================== LDAP Authentication ====================
+
+async function authenticateLDAP(username, password) {
+  return new Promise((resolve, reject) => {
+    const client = ldap.createClient({ url: CONFIG.ldap.url });
+    
+    client.on('error', (err) => {
+      reject(new Error('LDAP connection failed'));
+    });
+    
+    // Construct user DN
+    const userDN = `uid=${username},${CONFIG.ldap.baseDN}`;
+    
+    client.bind(userDN, password, (err) => {
+      if (err) {
+        client.destroy();
+        reject(new Error('Invalid credentials'));
+        return;
+      }
+      
+      // Successfully authenticated - get user info
+      const searchOptions = {
+        scope: 'base',
+        filter: `(uid=${username})`,
+        attributes: ['dn', 'uid', 'cn', 'mail', 'displayName', 'memberOf']
+      };
+      
+      client.search(userDN, searchOptions, (err, res) => {
+        if (err) {
+          client.destroy();
+          reject(err);
+          return;
+        }
+        
+        const user = { username };
+        
+        res.on('searchEntry', (entry) => {
+          user.dn = entry.object.dn;
+          user.uid = entry.object.uid;
+          user.cn = entry.object.cn;
+          user.email = entry.object.mail;
+          user.displayName = entry.object.displayName || entry.object.cn;
+          user.groups = entry.object.memberOf || [];
+        });
+        
+        res.on('error', (err) => {
+          client.destroy();
+          reject(err);
+        });
+        
+        res.on('end', () => {
+          client.destroy();
+          resolve(user);
+        });
+      });
+    });
+  });
+}
+
+// ==================== Auth Routes ====================
+
+// Check auth status
+app.get('/api/auth/status', (req, res) => {
+  if (CONFIG.disableAuth) {
+    return res.json({ authenticated: true, user: { username: 'dev-user', displayName: 'Dev User' } });
+  }
+  
+  if (req.session.user) {
+    return res.json({ authenticated: true, user: req.session.user });
+  }
+  
+  res.json({ authenticated: false });
+});
+
+// Login endpoint
+app.post('/api/auth/login', async (req, res) => {
+  const { username, password } = req.body;
+  
+  if (!username || !password) {
+    return res.status(400).json({ error: 'Username and password required' });
+  }
+  
+  // Development bypass
+  if (CONFIG.disableAuth) {
+    req.session.user = { username, displayName: username };
+    return res.json({ success: true, user: req.session.user });
+  }
+  
+  // LDAP authentication
+  if (CONFIG.ldap.enabled) {
+    try {
+      const user = await authenticateLDAP(username, password);
+      req.session.user = user;
+      res.json({ success: true, user });
+    } catch (err) {
+      res.status(401).json({ error: 'Invalid credentials' });
+    }
+    return;
+  }
+  
+  // Fallback: simple password check (for development without LDAP)
+  res.status(401).json({ error: 'LDAP not configured' });
+});
+
+// Logout endpoint
+app.post('/api/auth/logout', (req, res) => {
+  req.session.destroy();
+  res.json({ success: true });
+});
+
+// Auth middleware for protected routes
+function requireAuth(req, res, next) {
+  if (CONFIG.disableAuth) return next();
+  if (!req.session.user) {
+    return res.status(401).json({ error: 'Authentication required' });
+  }
+  next();
+}
+
+// ==================== Chat History ====================
+
+function getHistoryPath(userId) {
+  return join(CONFIG.dataDir, `history-${userId}.json`);
+}
+
+function loadHistory(userId) {
+  const path = getHistoryPath(userId);
+  if (!existsSync(path)) return { conversations: [], messages: {} };
+  try {
+    return JSON.parse(readFileSync(path, 'utf-8'));
+  } catch {
+    return { conversations: [], messages: {} };
+  }
+}
+
+function saveHistory(userId, data) {
+  const path = getHistoryPath(userId);
+  writeFileSync(path, JSON.stringify(data, null, 2));
+}
+
+// Get conversations list
+app.get('/api/conversations', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  res.json(history.conversations);
+});
+
+// Get messages for a conversation
+app.get('/api/conversations/:id/messages', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  res.json(history.messages[req.params.id] || []);
+});
+
+// Create new conversation
+app.post('/api/conversations', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  
+  const conv = {
+    id: uuidv4(),
+    title: req.body.title || 'New Chat',
+    createdAt: Date.now(),
+    updatedAt: Date.now()
+  };
+  
+  history.conversations.unshift(conv);
+  history.messages[conv.id] = [];
+  saveHistory(userId, history);
+  
+  res.json(conv);
+});
+
+// Update conversation
+app.put('/api/conversations/:id', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  
+  const conv = history.conversations.find(c => c.id === req.params.id);
+  if (!conv) return res.status(404).json({ error: 'Not found' });
+  
+  Object.assign(conv, req.body, { updatedAt: Date.now() });
+  saveHistory(userId, history);
+  
+  res.json(conv);
+});
+
+// Delete conversation
+app.delete('/api/conversations/:id', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  
+  history.conversations = history.conversations.filter(c => c.id !== req.params.id);
+  delete history.messages[req.params.id];
+  saveHistory(userId, history);
+  
+  res.json({ success: true });
+});
+
+// Save message to conversation
+app.post('/api/conversations/:id/messages', requireAuth, (req, res) => {
+  const userId = req.session.user?.username || 'dev-user';
+  const history = loadHistory(userId);
+  
+  if (!history.messages[req.params.id]) {
+    history.messages[req.params.id] = [];
+  }
+  
+  const msg = {
+    id: uuidv4(),
+    role: req.body.role,
+    content: req.body.content,
+    timestamp: Date.now(),
+    ...req.body
+  };
+  
+  history.messages[req.params.id].push(msg);
+  
+  // Update conversation
+  const conv = history.conversations.find(c => c.id === req.params.id);
+  if (conv) {
+    conv.updatedAt = Date.now();
+    // Auto-title from first user message
+    if (msg.role === 'user' && history.messages[req.params.id].length === 1) {
+      conv.title = msg.content.substring(0, 50) + (msg.content.length > 50 ? '...' : '');
+    }
+  }
+  
+  saveHistory(userId, history);
+  res.json(msg);
+});
+
+// ==================== OpenClaw Gateway Proxy ====================
+
+// HTTP proxy for OpenAI-compatible endpoints
+app.use('/v1', requireAuth, createProxyMiddleware({
+  target: CONFIG.gatewayUrl,
+  changeOrigin: true,
+  onProxyReq: (proxyReq, req, res) => {
+    // Add auth token for OpenClaw gateway
+    proxyReq.setHeader('Authorization', `Bearer ${CONFIG.gatewayToken}`);
+    proxyReq.setHeader('x-openclaw-agent-id', req.headers['x-openclaw-agent-id'] || 'main');
+  },
+  onProxyRes: (proxyRes, req, res) => {
+    // Handle SSE streaming
+    if (proxyRes.headers['content-type']?.includes('text/event-stream')) {
+      proxyRes.headers['cache-control'] = 'no-cache';
+      proxyRes.headers['connection'] = 'keep-alive';
+    }
+  }
+}));
+
+// ==================== File Upload ====================
+
+import { createWriteStream } from 'fs';
+import { tmpdir } from 'os';
+
+const uploads = new Map();
+
+app.post('/api/upload', requireAuth, express.raw({ type: '*/*', limit: '50mb' }), (req, res) => {
+  const id = uuidv4();
+  const filename = req.query.filename || 'file';
+  const mimeType = req.headers['content-type'] || 'application/octet-stream';
+  
+  uploads.set(id, {
+    filename,
+    mimeType,
+    data: req.body,
+    uploadedAt: Date.now()
+  });
+  
+  // Clean up old uploads (older than 1 hour)
+  const now = Date.now();
+  for (const [k, v] of uploads) {
+    if (now - v.uploadedAt > 3600000) uploads.delete(k);
+  }
+  
+  res.json({ id, filename, mimeType, size: req.body.length });
+});
+
+app.get('/api/upload/:id', requireAuth, (req, res) => {
+  const upload = uploads.get(req.params.id);
+  if (!upload) return res.status(404).json({ error: 'Not found' });
+  
+  res.setHeader('Content-Type', upload.mimeType);
+  res.setHeader('Content-Disposition', `attachment; filename="${upload.filename}"`);
+  res.send(upload.data);
+});
+
+// Get upload metadata
+app.get('/api/upload/:id/meta', requireAuth, (req, res) => {
+  const upload = uploads.get(req.params.id);
+  if (!upload) return res.status(404).json({ error: 'Not found' });
+  
+  res.json({
+    id: req.params.id,
+    filename: upload.filename,
+    mimeType: upload.mimeType,
+    size: upload.data.length
+  });
+});
+
+// ==================== Models & Agents ====================
+
+app.get('/api/models', requireAuth, async (req, res) => {
+  try {
+    const response = await fetch(`${CONFIG.gatewayUrl}/v1/models`, {
+      headers: { 'Authorization': `Bearer ${CONFIG.gatewayToken}` }
+    });
+    const data = await response.json();
+    res.json(data);
+  } catch (err) {
+    res.json({ 
+      data: [
+        { id: 'main', name: 'Main', owned_by: 'openclaw' },
+        { id: 'huihui', name: 'HuiHui MoE', owned_by: 'openclaw' },
+        { id: 'gpt-oss', name: 'GPT-OSS 120B', owned_by: 'openclaw' }
+      ]
+    });
+  }
+});
+
+// ==================== Static Files ====================
+
+// Serve frontend in production
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(join(__dirname, '../dist')));
+  
+  app.get('*', (req, res) => {
+    res.sendFile(join(__dirname, '../dist/index.html'));
+  });
+} else {
+  // Development mode - proxy to Vite
+  app.get('/', (req, res) => {
+    res.redirect('http://localhost:5173');
+  });
+}
+
+// ==================== WebSocket Server ====================
+
+const wss = new WebSocketServer({ server, path: '/ws' });
+
+wss.on('connection', (ws, req) => {
+  console.log('WebSocket client connected');
+  
+  // Connect to OpenClaw gateway
+  const gatewayUrl = CONFIG.gatewayUrl.replace('http', 'ws');
+  const gatewayWs = new WebSocket(`${gatewayUrl}/ws`);
+  
+  let helloReceived = false;
+  
+  gatewayWs.on('open', () => {
+    // Wait for challenge and send connect
+    ws.on('message', (data) => {
+      // Forward client messages to gateway
+      gatewayWs.send(data);
+    });
+  });
+  
+  gatewayWs.on('message', (data) => {
+    // Forward gateway messages to client
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(data);
+    }
+  });
+  
+  gatewayWs.on('error', (err) => {
+    console.error('Gateway WS error:', err.message);
+  });
+  
+  gatewayWs.on('close', () => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.close();
+    }
+  });
+  
+  ws.on('close', () => {
+    gatewayWs.close();
+  });
+  
+  ws.on('error', (err) => {
+    console.error('Client WS error:', err.message);
+    gatewayWs.close();
+  });
+});
+
+// ==================== Start Server ====================
+
+server.listen(CONFIG.port, () => {
+  console.log(`
+╔═══════════════════════════════════════════════════════════╗
+║                  OpenClaw WebUI Server                    ║
+╠═══════════════════════════════════════════════════════════╣
+║  Port:      ${CONFIG.port.toString().padEnd(44)}║
+║  Gateway:   ${CONFIG.gatewayUrl.padEnd(44)}║
+║  LDAP:      ${(CONFIG.ldap.enabled ? 'Enabled' : 'Disabled').padEnd(44)}║
+║  Auth:      ${(CONFIG.disableAuth ? 'Disabled (dev mode)' : 'Enabled').padEnd(44)}║
+╚═══════════════════════════════════════════════════════════╝
+  `);
+});
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..d4083ba
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  root: 'client',
+  publicDir: 'public',
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/v1': 'http://localhost:3000',
+      '/ws': {
+        target: 'ws://localhost:3000',
+        ws: true
+      }
+    }
+  }
+});
\ No newline at end of file