@inetafrica/open-claudia 1.3.3 → 1.4.0

package/.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+.env
+vault.enc
+vault.json
+auth.json
+crons.json
+sessions.json
+state.json
+bot.log
+*.log
+.setup-state.json
+.web-password
+.telegram-media
+.DS_Store
+.git

package/Dockerfile

@@ -0,0 +1,33 @@
+FROM node:20-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    curl \
+    ffmpeg \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Claude Code CLI
+RUN curl -fsSL https://claude.ai/install.sh | sh || \
+    npm install -g @anthropic-ai/claude-code
+
+# Create app directory
+WORKDIR /app
+
+# Copy package files and install
+COPY package*.json ./
+RUN npm ci --production
+
+# Copy app source
+COPY . .
+
+# Config and data volume
+ENV HOME=/data
+ENV WEB_UI=true
+ENV WEB_PORT=8080
+VOLUME /data
+
+EXPOSE 8080
+
+# Start with web UI enabled
+CMD ["node", "bin/cli.js", "web"]

package/bin/cli.js

@@ -40,9 +40,26 @@ switch (command) {
 
   case "start":
     console.log("Starting Open Claudia...");
+    // Start web UI alongside bot if WEB_UI=true or --web flag
+    if (process.env.WEB_UI === "true" || args.includes("--web")) {
+      const { startWebServer } = require(path.join(botDir, "web.js"));
+      startWebServer();
+    }
     require(path.join(botDir, "bot.js"));
     break;
 
+  case "web":
+    // Web UI only (for initial setup or config management)
+    const { startWebServer: startWeb, isConfigured } = require(path.join(botDir, "web.js"));
+    startWeb();
+    if (isConfigured()) {
+      console.log("Bot config found. Starting bot too...");
+      require(path.join(botDir, "bot.js"));
+    } else {
+      console.log("No config found. Complete setup in the web UI.");
+    }
+    break;
+
   case "auth":
     // Pass through to setup.js auth mode
     process.argv = [process.argv[0], process.argv[1], "--auth"];
@@ -88,7 +105,8 @@ Open Claudia — AI Coding Assistant via Telegram
 Commands:
   open-claudia setup    Interactive setup wizard
   open-claudia auth     Manage chat authorizations
-  open-claudia start    Start the bot
+  open-claudia start    Start the bot (add --web for web UI)
+  open-claudia web      Start with web UI for setup/config
   open-claudia stop     Stop the bot
   open-claudia status   Check if running
   open-claudia logs     View recent logs

package/bot.js

@@ -834,7 +834,20 @@ bot.onText(/\/restart$/, async (msg) => {
 
 bot.onText(/\/upgrade$/, async (msg) => {
   if (!isOwner(msg)) return;
-  await send("Upgrading — I'll be unreachable for a few seconds...");
+  // Check if there's actually a newer version
+  try {
+    const latest = execSync("npm view @inetafrica/open-claudia version", {
+      encoding: "utf-8", timeout: 15000,
+      env: { ...process.env, PATH: FULL_PATH, HOME: process.env.HOME || require("os").homedir() },
+    }).trim();
+    if (latest === CURRENT_VERSION) {
+      await send(`Already on the latest version (v${CURRENT_VERSION}).`);
+      return;
+    }
+    await send(`Upgrading v${CURRENT_VERSION} → v${latest}...`);
+  } catch (e) {
+    await send("Upgrading...");
+  }
   try {
     execSync("npm install -g @inetafrica/open-claudia@latest 2>&1", {
       encoding: "utf-8", timeout: 120000,

package/k8s/deployment.yaml

@@ -0,0 +1,61 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: open-claudia
+  labels:
+    app: open-claudia
+spec:
+  replicas: 1
+  strategy:
+    type: Recreate  # Only one instance can poll Telegram
+  selector:
+    matchLabels:
+      app: open-claudia
+  template:
+    metadata:
+      labels:
+        app: open-claudia
+    spec:
+      containers:
+        - name: open-claudia
+          image: registry.example.com/open-claudia:latest
+          ports:
+            - containerPort: 8080
+              name: web
+          env:
+            - name: WEB_UI
+              value: "true"
+            - name: WEB_PORT
+              value: "8080"
+            - name: ANTHROPIC_API_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: open-claudia-secrets
+                  key: anthropic-api-key
+                  optional: true
+          volumeMounts:
+            - name: data
+              mountPath: /data
+          resources:
+            requests:
+              memory: "256Mi"
+              cpu: "100m"
+            limits:
+              memory: "1Gi"
+              cpu: "1000m"
+          livenessProbe:
+            httpGet:
+              path: /api/status
+              port: 8080
+            initialDelaySeconds: 10
+            periodSeconds: 30
+          readinessProbe:
+            httpGet:
+              path: /api/status
+              port: 8080
+            initialDelaySeconds: 5
+            periodSeconds: 10
+      volumes:
+        - name: data
+          persistentVolumeClaim:
+            claimName: open-claudia-data

package/k8s/ingress.yaml

@@ -0,0 +1,26 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: open-claudia
+  labels:
+    app: open-claudia
+  annotations:
+    # Uncomment for cert-manager TLS
+    # cert-manager.io/cluster-issuer: letsencrypt-prod
+spec:
+  rules:
+    - host: claudia.example.com  # Replace with your domain
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: open-claudia
+                port:
+                  number: 8080
+  # Uncomment for TLS
+  # tls:
+  #   - hosts:
+  #       - claudia.example.com
+  #     secretName: open-claudia-tls

package/k8s/pvc.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: open-claudia-data
+  labels:
+    app: open-claudia
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 1Gi

package/k8s/secret.yaml

@@ -0,0 +1,10 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  name: open-claudia-secrets
+  labels:
+    app: open-claudia
+type: Opaque
+stringData:
+  # Replace with your actual API key
+  anthropic-api-key: "sk-ant-your-key-here"

package/k8s/service.yaml

@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: open-claudia
+  labels:
+    app: open-claudia
+spec:
+  type: ClusterIP
+  ports:
+    - port: 8080
+      targetPort: 8080
+      name: web
+  selector:
+    app: open-claudia

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inetafrica/open-claudia",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Your always-on AI coding assistant — Claude Code via Telegram",
   "main": "bot.js",
   "bin": {
@@ -15,8 +15,12 @@
     "bot.js",
     "vault.js",
     "setup.js",
+    "web.js",
     "config-dir.js",
     "bin/",
+    "k8s/",
+    "Dockerfile",
+    ".dockerignore",
     ".env.example",
     "README.md"
   ],

package/web.js

@@ -0,0 +1,651 @@
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const https = require("https");
+const CONFIG_DIR = require("./config-dir");
+const Vault = require("./vault");
+
+const ENV_FILE = path.join(CONFIG_DIR, ".env");
+const AUTH_FILE = path.join(CONFIG_DIR, "auth.json");
+const SOUL_FILE = path.join(CONFIG_DIR, "soul.md");
+const CRONS_FILE = path.join(CONFIG_DIR, "crons.json");
+const SESSIONS_FILE = path.join(CONFIG_DIR, "sessions.json");
+const WEB_PASSWORD_FILE = path.join(CONFIG_DIR, ".web-password");
+const PORT = parseInt(process.env.WEB_PORT || "8080", 10);
+
+// ── Password management ────────────────────────────────────────────
+
+function getPassword() {
+  if (fs.existsSync(WEB_PASSWORD_FILE)) {
+    return fs.readFileSync(WEB_PASSWORD_FILE, "utf-8").trim();
+  }
+  // Generate initial password
+  const initial = crypto.randomBytes(4).toString("hex");
+  fs.writeFileSync(WEB_PASSWORD_FILE, initial);
+  console.log(`\n  Web UI initial password: ${initial}`);
+  console.log(`  Change it in Settings after first login.\n`);
+  return initial;
+}
+
+function setPassword(newPassword) {
+  fs.writeFileSync(WEB_PASSWORD_FILE, newPassword);
+}
+
+function checkAuth(req) {
+  const cookie = (req.headers.cookie || "").split(";").find((c) => c.trim().startsWith("oc_session="));
+  if (!cookie) return false;
+  const token = cookie.split("=")[1]?.trim();
+  const expected = crypto.createHash("sha256").update(getPassword()).digest("hex");
+  return token === expected;
+}
+
+function authToken() {
+  return crypto.createHash("sha256").update(getPassword()).digest("hex");
+}
+
+// ── Config helpers ─────────────────────────────────────────────────
+
+function loadEnv() {
+  if (!fs.existsSync(ENV_FILE)) return {};
+  const env = {};
+  for (const line of fs.readFileSync(ENV_FILE, "utf-8").split("\n")) {
+    const idx = line.indexOf("=");
+    if (idx > 0) env[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+  }
+  return env;
+}
+
+function saveEnv(env) {
+  const content = Object.entries(env).map(([k, v]) => `${k}=${v}`).join("\n");
+  fs.writeFileSync(ENV_FILE, content);
+}
+
+function loadAuth() {
+  try { return JSON.parse(fs.readFileSync(AUTH_FILE, "utf-8")); } catch (e) { return { authorized: [], pending: [] }; }
+}
+
+function saveAuth(auth) {
+  fs.writeFileSync(AUTH_FILE, JSON.stringify(auth, null, 2));
+}
+
+function loadSoul() {
+  try { return fs.readFileSync(SOUL_FILE, "utf-8"); } catch (e) { return "# Soul\n\nYou are a helpful AI coding assistant running via Telegram.\n"; }
+}
+
+function loadCrons() {
+  try { return JSON.parse(fs.readFileSync(CRONS_FILE, "utf-8")); } catch (e) { return []; }
+}
+
+function loadSessions() {
+  try { return JSON.parse(fs.readFileSync(SESSIONS_FILE, "utf-8")); } catch (e) { return {}; }
+}
+
+function loadLogs(lines = 100) {
+  const logFile = path.join(CONFIG_DIR, "bot.log");
+  try {
+    const content = fs.readFileSync(logFile, "utf-8");
+    return content.split("\n").slice(-lines).join("\n");
+  } catch (e) { return "No logs yet."; }
+}
+
+function isConfigured() {
+  return fs.existsSync(ENV_FILE);
+}
+
+// ── Telegram helpers ───────────────────────────────────────────────
+
+function telegramGet(token, method) {
+  return new Promise((resolve) => {
+    https.get(`https://api.telegram.org/bot${token}/getMe`, (res) => {
+      let data = "";
+      res.on("data", (d) => { data += d; });
+      res.on("end", () => {
+        try { resolve(JSON.parse(data)); } catch (e) { resolve({ ok: false }); }
+      });
+    }).on("error", () => resolve({ ok: false }));
+  });
+}
+
+// ── API routes ─────────────────────────────────────────────────────
+
+async function handleAPI(req, res, body) {
+  const url = req.url;
+
+  // Login — no auth required
+  if (url === "/api/login" && req.method === "POST") {
+    const { password } = JSON.parse(body);
+    if (password === getPassword()) {
+      res.writeHead(200, {
+        "Content-Type": "application/json",
+        "Set-Cookie": `oc_session=${authToken()}; Path=/; HttpOnly; SameSite=Strict; Max-Age=86400`,
+      });
+      return res.end(JSON.stringify({ ok: true }));
+    }
+    res.writeHead(401, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: false, error: "Wrong password" }));
+  }
+
+  // All other API routes require auth
+  if (!checkAuth(req)) {
+    res.writeHead(401, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ error: "Unauthorized" }));
+  }
+
+  // Status
+  if (url === "/api/status") {
+    const env = loadEnv();
+    const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json"), "utf-8"));
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({
+      configured: isConfigured(),
+      version: pkg.version,
+      workspace: env.WORKSPACE || "",
+      botToken: env.TELEGRAM_BOT_TOKEN ? "***" + env.TELEGRAM_BOT_TOKEN.slice(-8) : "",
+      chatId: env.TELEGRAM_CHAT_ID || "",
+      claudePath: env.CLAUDE_PATH || "",
+      onboarded: env.ONBOARDED === "true",
+    }));
+  }
+
+  // Setup — save initial config
+  if (url === "/api/setup" && req.method === "POST") {
+    const data = JSON.parse(body);
+
+    // Verify token
+    const botInfo = await telegramGet(data.botToken, "getMe");
+    if (!botInfo.ok) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "Invalid Telegram bot token" }));
+    }
+
+    const env = {
+      TELEGRAM_BOT_TOKEN: data.botToken,
+      TELEGRAM_CHAT_ID: data.chatId,
+      WORKSPACE: data.workspace || path.join(CONFIG_DIR, "Workspace"),
+      CLAUDE_PATH: data.claudePath || "claude",
+      ANTHROPIC_API_KEY: data.apiKey || "",
+      WHISPER_CLI: "",
+      WHISPER_MODEL: "",
+      FFMPEG: "",
+      VAULT_FILE: path.join(CONFIG_DIR, "vault.enc"),
+      SOUL_FILE: SOUL_FILE,
+      CRONS_FILE: CRONS_FILE,
+      AUTH_FILE: AUTH_FILE,
+      ONBOARDED: "false",
+    };
+    saveEnv(env);
+
+    // Create workspace dir
+    const wsDir = env.WORKSPACE;
+    if (!fs.existsSync(wsDir)) fs.mkdirSync(wsDir, { recursive: true });
+
+    // Create default files
+    if (!fs.existsSync(CRONS_FILE)) fs.writeFileSync(CRONS_FILE, "[]");
+    if (!fs.existsSync(SOUL_FILE)) fs.writeFileSync(SOUL_FILE, "# Soul\n\nYou are a helpful AI coding assistant running via Telegram.\n");
+
+    // Save auth
+    const auth = loadAuth();
+    if (data.chatId && !auth.authorized.some((a) => a.chatId === data.chatId)) {
+      auth.authorized.push({
+        chatId: data.chatId,
+        name: "Owner",
+        username: "",
+        isOwner: true,
+        authorizedAt: new Date().toISOString(),
+      });
+      saveAuth(auth);
+    }
+
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true, bot: botInfo.result }));
+  }
+
+  // Get config
+  if (url === "/api/config") {
+    const env = loadEnv();
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(env));
+  }
+
+  // Update config
+  if (url === "/api/config" && req.method === "POST") {
+    const updates = JSON.parse(body);
+    const env = loadEnv();
+    Object.assign(env, updates);
+    saveEnv(env);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  // Auth management
+  if (url === "/api/auth") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(loadAuth()));
+  }
+
+  if (url === "/api/auth/approve" && req.method === "POST") {
+    const { chatId } = JSON.parse(body);
+    const auth = loadAuth();
+    const idx = auth.pending.findIndex((p) => p.chatId === chatId);
+    if (idx >= 0) {
+      const approved = auth.pending.splice(idx, 1)[0];
+      auth.authorized.push({ ...approved, isOwner: false, authorizedAt: new Date().toISOString() });
+      saveAuth(auth);
+      // Update .env
+      const env = loadEnv();
+      env.TELEGRAM_CHAT_ID = auth.authorized.map((a) => a.chatId).join(",");
+      saveEnv(env);
+    }
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  if (url === "/api/auth/deny" && req.method === "POST") {
+    const { chatId } = JSON.parse(body);
+    const auth = loadAuth();
+    auth.pending = auth.pending.filter((p) => p.chatId !== chatId);
+    saveAuth(auth);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  if (url === "/api/auth/remove" && req.method === "POST") {
+    const { chatId } = JSON.parse(body);
+    const auth = loadAuth();
+    auth.authorized = auth.authorized.filter((a) => a.chatId !== chatId);
+    saveAuth(auth);
+    const env = loadEnv();
+    env.TELEGRAM_CHAT_ID = auth.authorized.map((a) => a.chatId).join(",");
+    saveEnv(env);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  // Soul
+  if (url === "/api/soul") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ content: loadSoul() }));
+  }
+
+  if (url === "/api/soul" && req.method === "POST") {
+    const { content } = JSON.parse(body);
+    fs.writeFileSync(SOUL_FILE, content);
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  // Crons
+  if (url === "/api/crons") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(loadCrons()));
+  }
+
+  // Sessions
+  if (url === "/api/sessions") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify(loadSessions()));
+  }
+
+  // Logs
+  if (url === "/api/logs") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    return res.end(JSON.stringify({ content: loadLogs() }));
+  }
+
+  // Change password
+  if (url === "/api/password" && req.method === "POST") {
+    const { current, newPassword } = JSON.parse(body);
+    if (current !== getPassword()) {
+      res.writeHead(400, { "Content-Type": "application/json" });
+      return res.end(JSON.stringify({ error: "Wrong current password" }));
+    }
+    setPassword(newPassword);
+    res.writeHead(200, {
+      "Content-Type": "application/json",
+      "Set-Cookie": `oc_session=${authToken()}; Path=/; HttpOnly; SameSite=Strict; Max-Age=86400`,
+    });
+    return res.end(JSON.stringify({ ok: true }));
+  }
+
+  res.writeHead(404, { "Content-Type": "application/json" });
+  res.end(JSON.stringify({ error: "Not found" }));
+}
+
+// ── HTML UI ────────────────────────────────────────────────────────
+
+function getHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Open Claudia</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f0f; color: #e0e0e0; min-height: 100vh; }
+  .container { max-width: 720px; margin: 0 auto; padding: 20px; }
+  h1 { font-size: 24px; margin-bottom: 8px; color: #fff; }
+  h2 { font-size: 18px; margin: 24px 0 12px; color: #fff; }
+  .subtitle { color: #888; margin-bottom: 24px; }
+  .card { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
+  .form-group { margin-bottom: 16px; }
+  label { display: block; font-size: 13px; color: #888; margin-bottom: 6px; }
+  input, textarea, select { width: 100%; padding: 10px 12px; background: #0f0f0f; border: 1px solid #333; border-radius: 8px; color: #e0e0e0; font-size: 14px; font-family: inherit; }
+  input:focus, textarea:focus { outline: none; border-color: #6366f1; }
+  textarea { min-height: 120px; resize: vertical; }
+  button { padding: 10px 20px; background: #6366f1; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
+  button:hover { background: #5558e6; }
+  button.danger { background: #dc2626; }
+  button.danger:hover { background: #b91c1c; }
+  button.secondary { background: #333; }
+  button.secondary:hover { background: #444; }
+  .tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
+  .tab { padding: 8px 16px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; cursor: pointer; font-size: 13px; color: #888; }
+  .tab.active { background: #6366f1; color: #fff; border-color: #6366f1; }
+  .badge { display: inline-block; background: #dc2626; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: 4px; }
+  .status-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 12px 16px; background: #1a1a1a; border-radius: 8px; font-size: 13px; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
+  .status-dot.green { background: #22c55e; }
+  .status-dot.red { background: #dc2626; }
+  .status-dot.yellow { background: #eab308; }
+  .list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #222; }
+  .list-item:last-child { border-bottom: none; }
+  pre { background: #0a0a0a; padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 12px; color: #aaa; max-height: 400px; overflow-y: auto; }
+  .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+  .login-box { width: 320px; }
+  .msg { padding: 10px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
+  .msg.ok { background: #052e16; color: #22c55e; }
+  .msg.err { background: #2a0a0a; color: #dc2626; }
+  .hidden { display: none; }
+</style>
+</head>
+<body>
+<div id="app"></div>
+<script>
+const $ = (s) => document.querySelector(s);
+const api = async (url, opts = {}) => {
+  const r = await fetch(url, { ...opts, headers: { "Content-Type": "application/json", ...opts.headers }, body: opts.body ? JSON.stringify(opts.body) : undefined });
+  if (r.status === 401 && url !== "/api/login") { showLogin(); return null; }
+  return r.json();
+};
+
+let currentTab = "dashboard";
+let status = {};
+
+async function init() {
+  const r = await api("/api/status");
+  if (!r) return;
+  status = r;
+  if (!status.configured) currentTab = "setup";
+  render();
+}
+
+function showLogin() {
+  $("#app").innerHTML = \`
+    <div class="login-page"><div class="login-box">
+      <h1>Open Claudia</h1>
+      <p class="subtitle">Enter your admin password</p>
+      <div id="login-msg"></div>
+      <div class="card">
+        <div class="form-group">
+          <input type="password" id="pw" placeholder="Password" onkeydown="if(event.key==='Enter')doLogin()">
+        </div>
+        <button onclick="doLogin()" style="width:100%">Sign in</button>
+      </div>
+    </div></div>\`;
+  setTimeout(() => $("#pw")?.focus(), 100);
+}
+
+async function doLogin() {
+  const pw = $("#pw").value;
+  const r = await api("/api/login", { method: "POST", body: { password: pw } });
+  if (r?.ok) init();
+  else $("#login-msg").innerHTML = '<div class="msg err">Wrong password</div>';
+}
+
+function render() {
+  const tabs = [
+    { id: "dashboard", label: "Dashboard" },
+    { id: "auth", label: "Users" },
+    { id: "soul", label: "Soul" },
+    { id: "crons", label: "Crons" },
+    { id: "sessions", label: "Sessions" },
+    { id: "logs", label: "Logs" },
+    { id: "settings", label: "Settings" },
+  ];
+  if (!status.configured) {
+    renderSetup();
+    return;
+  }
+  $("#app").innerHTML = \`
+    <div class="container">
+      <h1>Open Claudia</h1>
+      <p class="subtitle">v\${status.version}</p>
+      <div class="tabs">
+        \${tabs.map(t => \`<div class="tab \${currentTab===t.id?'active':''}" onclick="switchTab('\${t.id}')">\${t.label}</div>\`).join("")}
+      </div>
+      <div id="content"></div>
+    </div>\`;
+  loadTab();
+}
+
+function switchTab(tab) { currentTab = tab; render(); }
+
+async function loadTab() {
+  const el = $("#content");
+  if (currentTab === "dashboard") {
+    el.innerHTML = \`
+      <div class="card">
+        <div class="status-bar">
+          <span><span class="status-dot green"></span> Bot configured</span>
+          <span>v\${status.version}</span>
+        </div>
+        <div class="list-item"><span>Workspace</span><span>\${status.workspace}</span></div>
+        <div class="list-item"><span>Bot Token</span><span>\${status.botToken}</span></div>
+        <div class="list-item"><span>Chat ID</span><span>\${status.chatId}</span></div>
+        <div class="list-item"><span>Claude</span><span>\${status.claudePath}</span></div>
+      </div>\`;
+  }
+  else if (currentTab === "auth") {
+    const auth = await api("/api/auth");
+    if (!auth) return;
+    el.innerHTML = \`
+      <div class="card">
+        <h2>Authorized Users</h2>
+        \${auth.authorized.map(a => \`
+          <div class="list-item">
+            <span>\${a.name || a.chatId} \${a.username ? "@"+a.username : ""} \${a.isOwner ? "(owner)" : ""}</span>
+            \${!a.isOwner ? \`<button class="danger" onclick="removeAuth('\${a.chatId}')">Remove</button>\` : ""}
+          </div>\`).join("") || "<p>None</p>"}
+      </div>
+      \${auth.pending.length > 0 ? \`
+      <div class="card">
+        <h2>Pending Requests</h2>
+        \${auth.pending.map(p => \`
+          <div class="list-item">
+            <span>\${p.name} \${p.username ? "@"+p.username : ""}</span>
+            <span>
+              <button onclick="approveAuth('\${p.chatId}')">Approve</button>
+              <button class="danger" onclick="denyAuth('\${p.chatId}')">Deny</button>
+            </span>
+          </div>\`).join("")}
+      </div>\` : ""}\`;
+  }
+  else if (currentTab === "soul") {
+    const soul = await api("/api/soul");
+    if (!soul) return;
+    el.innerHTML = \`
+      <div class="card">
+        <div class="form-group">
+          <label>Assistant Identity & Personality</label>
+          <textarea id="soul-content" rows="15">\${soul.content}</textarea>
+        </div>
+        <button onclick="saveSoul()">Save</button>
+        <span id="soul-msg" style="margin-left:12px;font-size:13px;color:#888;"></span>
+      </div>\`;
+  }
+  else if (currentTab === "crons") {
+    const crons = await api("/api/crons");
+    if (!crons) return;
+    el.innerHTML = \`
+      <div class="card">
+        <h2>Scheduled Tasks</h2>
+        \${crons.map((c, i) => \`
+          <div class="list-item">
+            <span>\${c.label || c.prompt.slice(0,40)} — \${c.schedule} — \${c.project}</span>
+          </div>\`).join("") || "<p>No cron jobs. Use /cron in Telegram to add them.</p>"}
+      </div>\`;
+  }
+  else if (currentTab === "sessions") {
+    const sessions = await api("/api/sessions");
+    if (!sessions) return;
+    const projects = Object.keys(sessions);
+    el.innerHTML = \`
+      <div class="card">
+        <h2>Conversation History</h2>
+        \${projects.map(p => \`
+          <h2 style="font-size:14px;color:#6366f1;margin:16px 0 8px;">\${p}</h2>
+          \${sessions[p].slice().reverse().slice(0,5).map(s => \`
+            <div class="list-item">
+              <span>\${s.title}</span>
+              <span style="color:#666;font-size:12px;">\${new Date(s.lastUsed).toLocaleDateString()}</span>
+            </div>\`).join("")}
+        \`).join("") || "<p>No sessions yet.</p>"}
+      </div>\`;
+  }
+  else if (currentTab === "logs") {
+    const logs = await api("/api/logs");
+    if (!logs) return;
+    el.innerHTML = \`
+      <div class="card">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+          <h2 style="margin:0">Logs</h2>
+          <button class="secondary" onclick="loadTab()">Refresh</button>
+        </div>
+        <pre>\${logs.content}</pre>
+      </div>\`;
+  }
+  else if (currentTab === "settings") {
+    el.innerHTML = \`
+      <div class="card">
+        <h2>Change Admin Password</h2>
+        <div class="form-group"><label>Current Password</label><input type="password" id="cur-pw"></div>
+        <div class="form-group"><label>New Password</label><input type="password" id="new-pw"></div>
+        <button onclick="changePassword()">Change</button>
+        <span id="pw-msg" style="margin-left:12px;font-size:13px;"></span>
+      </div>
+      <div class="card">
+        <h2>Configuration</h2>
+        <p style="color:#888;font-size:13px;margin-bottom:12px;">Edit ~/.open-claudia/.env values</p>
+        <div id="config-fields"></div>
+        <button onclick="saveConfig()">Save</button>
+        <span id="config-msg" style="margin-left:12px;font-size:13px;color:#888;"></span>
+      </div>\`;
+    const config = await api("/api/config");
+    if (!config) return;
+    const safe = ["WORKSPACE", "CLAUDE_PATH", "WHISPER_CLI", "FFMPEG", "WHISPER_MODEL"];
+    $("#config-fields").innerHTML = safe.map(k => \`
+      <div class="form-group"><label>\${k}</label><input id="cfg-\${k}" value="\${config[k] || ""}"></div>
+    \`).join("");
+  }
+}
+
+async function removeAuth(chatId) { await api("/api/auth/remove", { method: "POST", body: { chatId } }); loadTab(); }
+async function approveAuth(chatId) { await api("/api/auth/approve", { method: "POST", body: { chatId } }); loadTab(); }
+async function denyAuth(chatId) { await api("/api/auth/deny", { method: "POST", body: { chatId } }); loadTab(); }
+
+async function saveSoul() {
+  await api("/api/soul", { method: "POST", body: { content: $("#soul-content").value } });
+  $("#soul-msg").textContent = "Saved";
+  setTimeout(() => $("#soul-msg").textContent = "", 2000);
+}
+
+async function changePassword() {
+  const r = await api("/api/password", { method: "POST", body: { current: $("#cur-pw").value, newPassword: $("#new-pw").value } });
+  $("#pw-msg").textContent = r?.ok ? "Changed!" : (r?.error || "Failed");
+  $("#pw-msg").style.color = r?.ok ? "#22c55e" : "#dc2626";
+}
+
+async function saveConfig() {
+  const updates = {};
+  for (const el of document.querySelectorAll("[id^='cfg-']")) {
+    updates[el.id.replace("cfg-", "")] = el.value;
+  }
+  await api("/api/config", { method: "POST", body: updates });
+  $("#config-msg").textContent = "Saved — restart bot to apply.";
+  setTimeout(() => $("#config-msg").textContent = "", 3000);
+}
+
+function renderSetup() {
+  $("#app").innerHTML = \`
+    <div class="container">
+      <h1>Open Claudia Setup</h1>
+      <p class="subtitle">Configure your AI coding assistant</p>
+      <div id="setup-msg"></div>
+      <div class="card">
+        <div class="form-group"><label>Telegram Bot Token (from @BotFather)</label><input id="s-token" placeholder="123456:ABC-DEF..."></div>
+        <div class="form-group"><label>Your Telegram Chat ID</label><input id="s-chatid" placeholder="e.g. 6251055967"></div>
+        <div class="form-group"><label>Anthropic API Key (or leave blank if Claude CLI is authed)</label><input id="s-apikey" type="password" placeholder="sk-ant-..."></div>
+        <div class="form-group"><label>Claude CLI Path (auto-detected if on PATH)</label><input id="s-claude" placeholder="claude" value="claude"></div>
+        <div class="form-group"><label>Workspace Path</label><input id="s-workspace" placeholder="Leave blank for default"></div>
+        <button onclick="doSetup()" style="width:100%">Complete Setup</button>
+      </div>
+    </div>\`;
+}
+
+async function doSetup() {
+  const r = await api("/api/setup", { method: "POST", body: {
+    botToken: $("#s-token").value,
+    chatId: $("#s-chatid").value,
+    apiKey: $("#s-apikey").value,
+    claudePath: $("#s-claude").value,
+    workspace: $("#s-workspace").value,
+  }});
+  if (r?.ok) {
+    status.configured = true;
+    currentTab = "dashboard";
+    await init();
+  } else {
+    $("#setup-msg").innerHTML = \`<div class="msg err">\${r?.error || "Setup failed"}</div>\`;
+  }
+}
+
+init();
+</script>
+</body>
+</html>`;
+}
+
+// ── Server ─────────────────────────────────────────────────────────
+
+function startWebServer() {
+  const server = http.createServer(async (req, res) => {
+    // CORS for local dev
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") { res.writeHead(204); return res.end(); }
+
+    if (req.url.startsWith("/api/")) {
+      let body = "";
+      req.on("data", (d) => { body += d; });
+      req.on("end", () => handleAPI(req, res, body));
+      return;
+    }
+
+    // Serve HTML
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(getHTML());
+  });
+
+  server.listen(PORT, () => {
+    const pw = getPassword();
+    console.log(`Web UI running on http://localhost:${PORT}`);
+    console.log(`Admin password: ${pw}`);
+  });
+
+  return server;
+}
+
+module.exports = { startWebServer, isConfigured };