@chrysb/alphaclaw 0.1.0

package/bin/alphaclaw.js

@@ -0,0 +1,338 @@
+#!/usr/bin/env node
+"use strict";
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+const { execSync } = require("child_process");
+
+// ---------------------------------------------------------------------------
+// Parse CLI flags
+// ---------------------------------------------------------------------------
+
+const args = process.argv.slice(2);
+const command = args.find((a) => !a.startsWith("-"));
+
+if (!command || command === "help" || args.includes("--help")) {
+  console.log(`
+Usage: alphaclaw <command> [options]
+
+Commands:
+  start     Start the AlphaClaw server (Setup UI + gateway manager)
+
+Options:
+  --root-dir <path>   Persistent data directory (default: ~/.alphaclaw)
+  --port <number>     Server port (default: 3000)
+  --help              Show this help message
+`);
+  process.exit(0);
+}
+
+const flagValue = (flag) => {
+  const idx = args.indexOf(flag);
+  return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : undefined;
+};
+
+// ---------------------------------------------------------------------------
+// 1. Resolve root directory (before requiring any lib/ modules)
+// ---------------------------------------------------------------------------
+
+const rootDir = flagValue("--root-dir")
+  || process.env.ALPHACLAW_ROOT_DIR
+  || path.join(os.homedir(), ".alphaclaw");
+
+process.env.ALPHACLAW_ROOT_DIR = rootDir;
+
+const portFlag = flagValue("--port");
+if (portFlag) {
+  process.env.PORT = portFlag;
+}
+
+// ---------------------------------------------------------------------------
+// 2. Create directory structure
+// ---------------------------------------------------------------------------
+
+const openclawDir = path.join(rootDir, ".openclaw");
+fs.mkdirSync(openclawDir, { recursive: true });
+console.log(`[alphaclaw] Root directory: ${rootDir}`);
+
+// ---------------------------------------------------------------------------
+// 3. Symlink ~/.openclaw -> <root>/.openclaw
+// ---------------------------------------------------------------------------
+
+const homeOpenclawLink = path.join(os.homedir(), ".openclaw");
+try {
+  if (!fs.existsSync(homeOpenclawLink)) {
+    fs.symlinkSync(openclawDir, homeOpenclawLink);
+    console.log(`[alphaclaw] Symlinked ${homeOpenclawLink} -> ${openclawDir}`);
+  }
+} catch (e) {
+  console.log(`[alphaclaw] Symlink skipped: ${e.message}`);
+}
+
+// ---------------------------------------------------------------------------
+// 4. Seed .env from template if missing; load into process.env
+// ---------------------------------------------------------------------------
+
+const envFilePath = path.join(rootDir, ".env");
+const setupDir = path.join(__dirname, "..", "lib", "setup");
+
+if (!fs.existsSync(envFilePath)) {
+  const templatePath = path.join(setupDir, "env.template");
+  if (fs.existsSync(templatePath)) {
+    fs.copyFileSync(templatePath, envFilePath);
+    console.log("[alphaclaw] Created .env from template");
+  }
+}
+
+if (fs.existsSync(envFilePath)) {
+  const content = fs.readFileSync(envFilePath, "utf8");
+  for (const line of content.split("\n")) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const eqIdx = trimmed.indexOf("=");
+    if (eqIdx === -1) continue;
+    const key = trimmed.slice(0, eqIdx);
+    const value = trimmed.slice(eqIdx + 1);
+    if (value) process.env[key] = value;
+  }
+  console.log("[alphaclaw] Loaded .env");
+}
+
+// ---------------------------------------------------------------------------
+// 5. Set OPENCLAW_HOME globally so all child processes inherit it
+// ---------------------------------------------------------------------------
+
+process.env.OPENCLAW_HOME = rootDir;
+process.env.OPENCLAW_CONFIG_PATH = path.join(openclawDir, "openclaw.json");
+
+// ---------------------------------------------------------------------------
+// 6. Install gog (Google Workspace CLI) if not present
+// ---------------------------------------------------------------------------
+
+process.env.XDG_CONFIG_HOME = openclawDir;
+
+const gogInstalled = (() => {
+  try {
+    execSync("command -v gog", { stdio: "ignore" });
+    return true;
+  } catch {
+    return false;
+  }
+})();
+
+if (!gogInstalled) {
+  console.log("[alphaclaw] Installing gog CLI...");
+  try {
+    const gogVersion = process.env.GOG_VERSION || "0.11.0";
+    const platform = os.platform() === "darwin" ? "darwin" : "linux";
+    const arch = os.arch() === "arm64" ? "arm64" : "amd64";
+    const tarball = `gogcli_${gogVersion}_${platform}_${arch}.tar.gz`;
+    const url = `https://github.com/steipete/gogcli/releases/download/v${gogVersion}/${tarball}`;
+    execSync(`curl -fsSL "${url}" -o /tmp/gog.tar.gz && tar -xzf /tmp/gog.tar.gz -C /tmp/ && mv /tmp/gog /usr/local/bin/gog && chmod +x /usr/local/bin/gog && rm -f /tmp/gog.tar.gz`, { stdio: "inherit" });
+    console.log("[alphaclaw] gog CLI installed");
+  } catch (e) {
+    console.log(`[alphaclaw] gog install skipped: ${e.message}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 7. Configure gog keyring (file backend for headless environments)
+// ---------------------------------------------------------------------------
+
+process.env.GOG_KEYRING_PASSWORD = process.env.GOG_KEYRING_PASSWORD || "alphaclaw";
+const gogConfigFile = path.join(openclawDir, "gogcli", "config.json");
+
+if (!fs.existsSync(gogConfigFile)) {
+  fs.mkdirSync(path.join(openclawDir, "gogcli"), { recursive: true });
+  try {
+    execSync("gog auth keyring file", { stdio: "ignore" });
+    console.log("[alphaclaw] gog keyring configured (file backend)");
+  } catch {}
+}
+
+// ---------------------------------------------------------------------------
+// 8. Install/reconcile system cron entry
+// ---------------------------------------------------------------------------
+
+const hourlyGitSyncPath = path.join(openclawDir, "hourly-git-sync.sh");
+
+if (fs.existsSync(hourlyGitSyncPath)) {
+  try {
+    const syncCronConfig = path.join(openclawDir, "cron", "system-sync.json");
+    let cronEnabled = true;
+    let cronSchedule = "0 * * * *";
+
+    if (fs.existsSync(syncCronConfig)) {
+      try {
+        const cfg = JSON.parse(fs.readFileSync(syncCronConfig, "utf8"));
+        cronEnabled = cfg.enabled !== false;
+        const schedule = String(cfg.schedule || "").trim();
+        if (/^(\S+\s+){4}\S+$/.test(schedule)) cronSchedule = schedule;
+      } catch {}
+    }
+
+    const cronFilePath = "/etc/cron.d/openclaw-hourly-sync";
+    if (cronEnabled) {
+      const cronContent = [
+        "SHELL=/bin/bash",
+        "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
+        `${cronSchedule} root bash "${hourlyGitSyncPath}" >> /var/log/openclaw-hourly-sync.log 2>&1`,
+        "",
+      ].join("\n");
+      fs.writeFileSync(cronFilePath, cronContent, { mode: 0o644 });
+      console.log("[alphaclaw] System cron entry installed");
+    } else {
+      try { fs.unlinkSync(cronFilePath); } catch {}
+      console.log("[alphaclaw] System cron entry disabled");
+    }
+  } catch (e) {
+    console.log(`[alphaclaw] Cron setup skipped: ${e.message}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 9. Start cron daemon if available
+// ---------------------------------------------------------------------------
+
+try {
+  execSync("command -v cron", { stdio: "ignore" });
+  try {
+    execSync("pgrep -x cron", { stdio: "ignore" });
+  } catch {
+    execSync("cron", { stdio: "ignore" });
+  }
+  console.log("[alphaclaw] Cron daemon running");
+} catch {}
+
+// ---------------------------------------------------------------------------
+// 10. Configure gog credentials (if env vars present)
+// ---------------------------------------------------------------------------
+
+if (process.env.GOG_CLIENT_CREDENTIALS_JSON && process.env.GOG_REFRESH_TOKEN) {
+  try {
+    const tmpCreds = `/tmp/gog-creds-${process.pid}.json`;
+    const tmpToken = `/tmp/gog-token-${process.pid}.json`;
+    fs.writeFileSync(tmpCreds, process.env.GOG_CLIENT_CREDENTIALS_JSON);
+    execSync(`gog auth credentials set "${tmpCreds}"`, { stdio: "ignore" });
+    fs.unlinkSync(tmpCreds);
+    fs.writeFileSync(tmpToken, JSON.stringify({
+      email: process.env.GOG_ACCOUNT || "",
+      refresh_token: process.env.GOG_REFRESH_TOKEN,
+    }));
+    execSync(`gog auth tokens import "${tmpToken}"`, { stdio: "ignore" });
+    fs.unlinkSync(tmpToken);
+    console.log(`[alphaclaw] gog CLI configured for ${process.env.GOG_ACCOUNT || "account"}`);
+  } catch (e) {
+    console.log(`[alphaclaw] gog credentials setup skipped: ${e.message}`);
+  }
+} else {
+  console.log("[alphaclaw] Google credentials not set -- skipping gog setup");
+}
+
+// ---------------------------------------------------------------------------
+// 11. Reconcile channels if already onboarded
+// ---------------------------------------------------------------------------
+
+const configPath = path.join(openclawDir, "openclaw.json");
+
+if (fs.existsSync(configPath)) {
+  console.log("[alphaclaw] Config exists, reconciling channels...");
+
+  const githubToken = process.env.GITHUB_TOKEN;
+  const githubRepo = process.env.GITHUB_WORKSPACE_REPO;
+  if (githubToken && githubRepo && fs.existsSync(path.join(openclawDir, ".git"))) {
+    const repoUrl = githubRepo
+      .replace(/^git@github\.com:/, "")
+      .replace(/^https:\/\/github\.com\//, "")
+      .replace(/\.git$/, "");
+    const remoteUrl = `https://${githubToken}@github.com/${repoUrl}.git`;
+    try {
+      execSync(`git remote set-url origin "${remoteUrl}"`, { cwd: openclawDir, stdio: "ignore" });
+      console.log("[alphaclaw] Repo ready");
+    } catch {}
+  }
+
+  try {
+    const cfg = JSON.parse(fs.readFileSync(configPath, "utf8"));
+    if (!cfg.channels) cfg.channels = {};
+    if (!cfg.plugins) cfg.plugins = {};
+    if (!cfg.plugins.entries) cfg.plugins.entries = {};
+    let changed = false;
+
+    if (process.env.TELEGRAM_BOT_TOKEN && !cfg.channels.telegram) {
+      cfg.channels.telegram = {
+        enabled: true,
+        botToken: process.env.TELEGRAM_BOT_TOKEN,
+        dmPolicy: "pairing",
+        groupPolicy: "allowlist",
+      };
+      cfg.plugins.entries.telegram = { enabled: true };
+      console.log("[alphaclaw] Telegram added");
+      changed = true;
+    }
+
+    if (process.env.DISCORD_BOT_TOKEN && !cfg.channels.discord) {
+      cfg.channels.discord = {
+        enabled: true,
+        token: process.env.DISCORD_BOT_TOKEN,
+        dmPolicy: "pairing",
+        groupPolicy: "allowlist",
+      };
+      cfg.plugins.entries.discord = { enabled: true };
+      console.log("[alphaclaw] Discord added");
+      changed = true;
+    }
+
+    if (changed) {
+      let content = JSON.stringify(cfg, null, 2);
+      const replacements = [
+        [process.env.OPENCLAW_GATEWAY_TOKEN, "${OPENCLAW_GATEWAY_TOKEN}"],
+        [process.env.ANTHROPIC_API_KEY, "${ANTHROPIC_API_KEY}"],
+        [process.env.ANTHROPIC_TOKEN, "${ANTHROPIC_TOKEN}"],
+        [process.env.TELEGRAM_BOT_TOKEN, "${TELEGRAM_BOT_TOKEN}"],
+        [process.env.DISCORD_BOT_TOKEN, "${DISCORD_BOT_TOKEN}"],
+        [process.env.OPENAI_API_KEY, "${OPENAI_API_KEY}"],
+        [process.env.GEMINI_API_KEY, "${GEMINI_API_KEY}"],
+        [process.env.NOTION_API_KEY, "${NOTION_API_KEY}"],
+        [process.env.BRAVE_API_KEY, "${BRAVE_API_KEY}"],
+      ];
+      for (const [secret, envRef] of replacements) {
+        if (secret && secret.length > 8) {
+          content = content.split(secret).join(envRef);
+        }
+      }
+      fs.writeFileSync(configPath, content);
+      console.log("[alphaclaw] Config updated and sanitized");
+    }
+  } catch (e) {
+    console.error(`[alphaclaw] Channel reconciliation error: ${e.message}`);
+  }
+} else {
+  console.log("[alphaclaw] No config yet -- onboarding will run from the Setup UI");
+}
+
+// ---------------------------------------------------------------------------
+// 12. Install systemctl shim if in Docker (no real systemd)
+// ---------------------------------------------------------------------------
+
+try {
+  execSync("command -v systemctl", { stdio: "ignore" });
+} catch {
+  const shimSrc = path.join(__dirname, "..", "lib", "scripts", "systemctl");
+  const shimDest = "/usr/local/bin/systemctl";
+  try {
+    fs.copyFileSync(shimSrc, shimDest);
+    fs.chmodSync(shimDest, 0o755);
+    console.log("[alphaclaw] systemctl shim installed");
+  } catch (e) {
+    console.log(`[alphaclaw] systemctl shim skipped: ${e.message}`);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 13. Start Express server
+// ---------------------------------------------------------------------------
+
+console.log("[alphaclaw] Setup complete -- starting server");
+require("../lib/server.js");

package/lib/public/icons/chevron-down.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 20 20" fill="none">
+  <path
+    d="M5 7.5L10 12.5L15 7.5"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/lib/public/js/app.js

@@ -0,0 +1,325 @@
+import { h, render } from "https://esm.sh/preact";
+import { useState, useEffect } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import {
+  fetchStatus,
+  fetchPairings,
+  approvePairing,
+  rejectPairing,
+  fetchDevicePairings,
+  approveDevice,
+  rejectDevice,
+  fetchOnboardStatus,
+  fetchDashboardUrl,
+  updateSyncCron,
+} from "./lib/api.js";
+import { usePolling } from "./hooks/usePolling.js";
+import { Gateway } from "./components/gateway.js";
+import { Channels, ALL_CHANNELS } from "./components/channels.js";
+import { Pairings } from "./components/pairings.js";
+import { DevicePairings } from "./components/device-pairings.js";
+import { Google } from "./components/google.js";
+import { Models } from "./components/models.js";
+import { Welcome } from "./components/welcome.js";
+import { Envars } from "./components/envars.js";
+import { ToastContainer, showToast } from "./components/toast.js";
+import { ChevronDownIcon } from "./components/icons.js";
+const html = htm.bind(h);
+
+const GeneralTab = ({ onSwitchTab }) => {
+  const [googleKey, setGoogleKey] = useState(0);
+  const [dashboardLoading, setDashboardLoading] = useState(false);
+
+  const statusPoll = usePolling(fetchStatus, 15000);
+  const status = statusPoll.data;
+  const gatewayStatus = status?.gateway ?? null;
+  const channels = status?.channels ?? null;
+  const repo = status?.repo || null;
+  const syncCron = status?.syncCron || null;
+  const openclawVersion = status?.openclawVersion || null;
+  const [syncCronEnabled, setSyncCronEnabled] = useState(true);
+  const [syncCronSchedule, setSyncCronSchedule] = useState("0 * * * *");
+  const [savingSyncCron, setSavingSyncCron] = useState(false);
+  const [syncCronChoice, setSyncCronChoice] = useState("0 * * * *");
+
+  const hasUnpaired = ALL_CHANNELS.some((ch) => {
+    const info = channels?.[ch];
+    return info && info.status !== "paired";
+  });
+
+  const pairingsPoll = usePolling(
+    async () => {
+      const d = await fetchPairings();
+      return d.pending || [];
+    },
+    1000,
+    { enabled: hasUnpaired && gatewayStatus === "running" },
+  );
+  const pending = pairingsPoll.data || [];
+
+  // Poll status faster when gateway isn't running yet
+  useEffect(() => {
+    if (!gatewayStatus || gatewayStatus !== "running") {
+      const id = setInterval(statusPoll.refresh, 3000);
+      return () => clearInterval(id);
+    }
+  }, [gatewayStatus, statusPoll.refresh]);
+
+  const refreshAfterAction = () => {
+    setTimeout(pairingsPoll.refresh, 500);
+    setTimeout(pairingsPoll.refresh, 2000);
+    setTimeout(statusPoll.refresh, 3000);
+  };
+
+  const handleApprove = async (id, channel) => {
+    await approvePairing(id, channel);
+    refreshAfterAction();
+  };
+
+  const handleReject = async (id, channel) => {
+    await rejectPairing(id, channel);
+    refreshAfterAction();
+  };
+
+  const devicePoll = usePolling(
+    async () => {
+      const d = await fetchDevicePairings();
+      return d.pending || [];
+    },
+    2000,
+    { enabled: gatewayStatus === "running" },
+  );
+  const devicePending = devicePoll.data || [];
+
+  const handleDeviceApprove = async (id) => {
+    await approveDevice(id);
+    setTimeout(devicePoll.refresh, 500);
+    setTimeout(devicePoll.refresh, 2000);
+  };
+
+  const handleDeviceReject = async (id) => {
+    await rejectDevice(id);
+    setTimeout(devicePoll.refresh, 500);
+    setTimeout(devicePoll.refresh, 2000);
+  };
+
+  const fullRefresh = () => {
+    statusPoll.refresh();
+    pairingsPoll.refresh();
+    devicePoll.refresh();
+    setGoogleKey((k) => k + 1);
+  };
+
+  useEffect(() => {
+    if (!syncCron) return;
+    setSyncCronEnabled(syncCron.enabled !== false);
+    setSyncCronSchedule(syncCron.schedule || "0 * * * *");
+    setSyncCronChoice(syncCron.enabled === false ? "disabled" : syncCron.schedule || "0 * * * *");
+  }, [syncCron?.enabled, syncCron?.schedule]);
+
+  const saveSyncCronSettings = async ({ enabled = syncCronEnabled, schedule = syncCronSchedule }) => {
+    if (savingSyncCron) return;
+    setSavingSyncCron(true);
+    try {
+      const data = await updateSyncCron({ enabled, schedule });
+      if (!data.ok) throw new Error(data.error || "Could not save sync settings");
+      showToast("Sync schedule updated", "success");
+      statusPoll.refresh();
+    } catch (err) {
+      showToast(err.message || "Could not save sync settings", "error");
+    }
+    setSavingSyncCron(false);
+  };
+
+  const syncCronStatusText = syncCronEnabled ? "Enabled" : "Disabled";
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway} status=${gatewayStatus} openclawVersion=${openclawVersion} />
+      <${Channels} channels=${channels} onSwitchTab=${onSwitchTab} />
+      <${Pairings}
+        pending=${pending}
+        channels=${channels}
+        visible=${hasUnpaired}
+        onApprove=${handleApprove}
+        onReject=${handleReject}
+      />
+      <${Google} key=${googleKey} gatewayStatus=${gatewayStatus} />
+
+      ${repo && html`
+        <div class="bg-surface border border-border rounded-xl p-4">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2 min-w-0">
+              <svg class="w-4 h-4 text-gray-400" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+              <a href="https://github.com/${repo}" target="_blank" class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate">${repo}</a>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span class="text-xs text-gray-400">Auto-sync</span>
+              <div class="relative">
+                <select
+                  value=${syncCronChoice}
+                  onchange=${(e) => {
+                    const nextChoice = e.target.value;
+                    setSyncCronChoice(nextChoice);
+                    const nextEnabled = nextChoice !== "disabled";
+                    const nextSchedule = nextEnabled ? nextChoice : syncCronSchedule;
+                    setSyncCronEnabled(nextEnabled);
+                    setSyncCronSchedule(nextSchedule);
+                    saveSyncCronSettings({
+                      enabled: nextEnabled,
+                      schedule: nextSchedule,
+                    });
+                  }}
+                  disabled=${savingSyncCron}
+                  class="appearance-none bg-black/30 border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-gray-300 ${savingSyncCron
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""}"
+                  title=${syncCron?.installed === false ? "Not Installed Yet" : syncCronStatusText}
+                >
+                  <option value="disabled">Disabled</option>
+                  <option value="*/30 * * * *">Every 30 min</option>
+                  <option value="0 * * * *">Hourly</option>
+                  <option value="0 0 * * *">Daily</option>
+                </select>
+                <${ChevronDownIcon}
+                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      `}
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="font-semibold text-sm">Gateway Dashboard</h2>
+          </div>
+          <button
+            onclick=${async () => {
+              if (dashboardLoading) return;
+              setDashboardLoading(true);
+              try {
+                const data = await fetchDashboardUrl();
+                console.log('[dashboard] response:', JSON.stringify(data));
+                window.open(data.url || '/openclaw', '_blank');
+              } catch (err) {
+                console.error('[dashboard] error:', err);
+                window.open('/openclaw', '_blank');
+              }
+              setDashboardLoading(false);
+            }}
+            disabled=${dashboardLoading}
+            class="text-xs px-2.5 py-1 rounded-lg border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors ${dashboardLoading ? 'opacity-50 cursor-not-allowed' : ''}"
+          >
+            ${dashboardLoading ? 'Opening...' : 'Open'}
+          </button>
+        </div>
+        <${DevicePairings}
+          pending=${devicePending}
+          onApprove=${handleDeviceApprove}
+          onReject=${handleDeviceReject}
+        />
+      </div>
+
+      <p class="text-center text-gray-600 text-xs">
+        <a
+          href="#"
+          onclick=${(e) => {
+            e.preventDefault();
+            fullRefresh();
+          }}
+          class="text-gray-500 hover:text-gray-300"
+          >Refresh all</a
+        >
+      </p>
+    </div>
+  `;
+};
+
+function App() {
+  const [onboarded, setOnboarded] = useState(null);
+  const [tab, setTab] = useState("general");
+
+  useEffect(() => {
+    fetchOnboardStatus()
+      .then((data) => setOnboarded(data.onboarded))
+      .catch(() => setOnboarded(false));
+  }, []);
+
+  // Still loading onboard status
+  if (onboarded === null) {
+    return html`
+      <div class="max-w-lg w-full flex items-center justify-center py-20">
+        <svg
+          class="animate-spin h-6 w-6 text-gray-500"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          />
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
+        </svg>
+      </div>
+      <${ToastContainer} />
+    `;
+  }
+
+  if (!onboarded) {
+    return html`
+      <${Welcome} onComplete=${() => setOnboarded(true)} />
+      <${ToastContainer} />
+    `;
+  }
+
+  return html`
+    <div class="max-w-lg w-full">
+      <div class="sticky top-0 z-10 bg-[#0a0a0a] pb-3">
+        <div class="flex items-center gap-3 pb-3">
+          <div class="text-4xl">🦞</div>
+          <div>
+            <h1 class="text-2xl font-semibold">OpenClaw Setup</h1>
+            <p class="text-gray-500 text-sm">This should be easy, right?</p>
+          </div>
+        </div>
+
+        <div class="flex gap-1 border-b border-border">
+          ${["general", "models", "envars"].map(
+            (t) => html`
+              <button
+                onclick=${() => setTab(t)}
+                class="px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab ===
+                t
+                  ? "border-white text-white"
+                  : "border-transparent text-gray-500 hover:text-gray-300"}"
+              >
+                ${t === "general" ? "General" : t === "models" ? "Models" : "Envars"}
+              </button>
+            `,
+          )}
+        </div>
+      </div>
+
+      <div class="space-y-4 pt-4">
+        ${tab === "general"
+          ? html`<${GeneralTab} onSwitchTab=${setTab} />`
+          : tab === "models"
+          ? html`<${Models} />`
+          : html`<${Envars} />`}
+      </div>
+    </div>
+    <${ToastContainer} />
+  `;
+}
+
+render(html`<${App} />`, document.getElementById("app"));

package/lib/public/js/components/badge.js

@@ -0,0 +1,16 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const kToneClasses = {
+  success: "bg-green-500/10 text-green-500",
+  warning: "bg-yellow-500/10 text-yellow-500",
+  neutral: "bg-gray-500/10 text-gray-400",
+};
+
+export const Badge = ({ tone = "neutral", children }) => html`
+  <span class="text-xs px-2 py-0.5 rounded-full font-medium ${kToneClasses[tone] || kToneClasses.neutral}">
+    ${children}
+  </span>
+`;