@chrysb/alphaclaw 0.1.19 → 0.1.21

package/bin/alphaclaw.js

@@ -106,20 +106,42 @@ try {
 }
 
 // ---------------------------------------------------------------------------
-// 4. Seed .env from template if missing; load into process.env
+// 4. Ensure shared ~/data/.env exists (seed from template if missing)
 // ---------------------------------------------------------------------------
 
 const envFilePath = path.join(rootDir, ".env");
+const sharedDataDir = path.join(os.homedir(), "data");
+const sharedEnvFilePath = path.join(sharedDataDir, ".env");
 const setupDir = path.join(__dirname, "..", "lib", "setup");
+const templatePath = path.join(setupDir, "env.template");
 
-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");
+try {
+  if (!fs.existsSync(sharedEnvFilePath) && fs.existsSync(templatePath)) {
+    fs.mkdirSync(sharedDataDir, { recursive: true });
+    fs.copyFileSync(templatePath, sharedEnvFilePath);
+    console.log(`[alphaclaw] Created shared env at ${sharedEnvFilePath}`);
   }
+} catch (e) {
+  console.log(`[alphaclaw] Shared .env setup skipped: ${e.message}`);
 }
 
+// ---------------------------------------------------------------------------
+// 5. Symlink <root>/.env -> ~/data/.env when available
+// ---------------------------------------------------------------------------
+
+try {
+  if (!fs.existsSync(envFilePath) && fs.existsSync(sharedEnvFilePath)) {
+    fs.symlinkSync(sharedEnvFilePath, envFilePath);
+    console.log(`[alphaclaw] Symlinked ${envFilePath} -> ${sharedEnvFilePath}`);
+  }
+} catch (e) {
+  console.log(`[alphaclaw] .env symlink skipped: ${e.message}`);
+}
+
+// ---------------------------------------------------------------------------
+// 6. Load .env into process.env
+// ---------------------------------------------------------------------------
+
 if (fs.existsSync(envFilePath)) {
   const content = fs.readFileSync(envFilePath, "utf8");
   for (const line of content.split("\n")) {
@@ -135,14 +157,14 @@ if (fs.existsSync(envFilePath)) {
 }
 
 // ---------------------------------------------------------------------------
-// 5. Set OPENCLAW_HOME globally so all child processes inherit it
+// 7. 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
+// 8. Install gog (Google Workspace CLI) if not present
 // ---------------------------------------------------------------------------
 
 process.env.XDG_CONFIG_HOME = openclawDir;

package/lib/public/assets/icons/discord.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -28.5 256 256" role="img" aria-labelledby="title">
+  <title>Discord</title>
+  <path
+    d="M216.856339 16.5966031C200.285002 8.84328665 182.566144 3.2084988 164.041564 0C161.766523 4.11318106 159.108624 9.64549908 157.276099 14.0464379C137.583995 11.0849896 118.072967 11.0849896 98.7430163 14.0464379C96.9108417 9.64549908 94.1925838 4.11318106 91.8971895 0C73.3526068 3.2084988 55.6133949 8.86399117 39.0420583 16.6376612C5.61752293 67.146514 -3.4433191 116.400813 1.08711069 164.955721C23.2560196 181.510915 44.7403634 191.567697 65.8621325 198.148576C71.0772151 190.971126 75.7283628 183.341335 79.7352139 175.300261C72.104019 172.400575 64.7949724 168.822202 57.8887866 164.667963C59.7209612 163.310589 61.5131304 161.891452 63.2445898 160.431257C105.36741 180.133187 151.134928 180.133187 192.754523 160.431257C194.506336 161.891452 196.298154 163.310589 198.110326 164.667963C191.183787 168.842556 183.854737 172.420929 176.223542 175.320965C180.230393 183.341335 184.861538 190.991831 190.096624 198.16893C211.238746 191.588051 232.743023 181.531619 254.911949 164.955721C260.227747 108.668201 245.831087 59.8662432 216.856339 16.5966031ZM85.4738752 135.09489C72.8290281 135.09489 62.4592217 123.290155 62.4592217 108.914901C62.4592217 94.5396472 72.607595 82.7145587 85.4738752 82.7145587C98.3405064 82.7145587 108.709962 94.5189427 108.488529 108.914901C108.508531 123.290155 98.3405064 135.09489 85.4738752 135.09489ZM170.525237 135.09489C157.88039 135.09489 147.510584 123.290155 147.510584 108.914901C147.510584 94.5396472 157.658606 82.7145587 170.525237 82.7145587C183.391518 82.7145587 193.761324 94.5189427 193.539891 108.914901C193.539891 123.290155 183.391518 135.09489 170.525237 135.09489Z"
+    fill="#5865F2"
+  />
+</svg>

package/lib/public/assets/icons/telegram.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" role="img" aria-labelledby="title">
+  <title>Telegram</title>
+  <defs>
+    <linearGradient id="telegram-gradient" x1="120" y1="240" x2="120" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1d93d2"/>
+      <stop offset="1" stop-color="#38b0e3"/>
+    </linearGradient>
+  </defs>
+  <circle cx="120" cy="120" r="120" fill="url(#telegram-gradient)"/>
+  <path d="M81.229 128.772l14.237 39.406s1.78 3.687 3.686 3.687 30.255-29.492 30.255-29.492l31.525-60.89L81.737 118.6z" fill="#c8daea"/>
+  <path d="M100.106 138.878l-2.733 29.046s-1.144 8.9 7.754 0 17.415-15.763 17.415-15.763" fill="#a9c6d8"/>
+  <path d="M81.486 130.178L52.2 120.636s-3.5-1.42-2.373-4.64c.232-.664.7-1.229 2.1-2.2 6.489-4.523 120.106-45.36 120.106-45.36s3.208-1.081 5.1-.362a2.766 2.766 0 0 1 1.885 2.055 9.357 9.357 0 0 1 .254 2.585c-.009.752-.1 1.449-.169 2.542-.692 11.165-21.4 94.493-21.4 94.493s-1.239 4.876-5.678 5.043a8.13 8.13 0 0 1-5.925-2.292c-8.711-7.493-38.819-27.727-45.472-32.177a1.27 1.27 0 0 1-.546-.9c-.093-.469.417-1.05.417-1.05s52.426-46.6 53.821-51.492c.108-.379-.3-.566-.848-.4-3.482 1.281-63.844 39.4-70.506 43.607a3.21 3.21 0 0 1-1.48.09z" fill="#fff"/>
+</svg>

package/lib/public/css/shell.css

@@ -19,8 +19,10 @@
 /* ── Sidebar ───────────────────────────────────── */
 
 .app-sidebar {
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
+    var(--bg-sidebar);
+  border-right: 1px solid var(--border-strong);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -108,12 +110,58 @@
 .sidebar-update-btn:hover { background: rgba(227, 179, 65, 0.14); border-color: rgba(227, 179, 65, 0.35); }
 .sidebar-update-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
+/* ── Brand dropdown menu ───────────────────────── */
+
+.brand-menu {
+  position: relative;
+  margin-left: auto;
+}
+
+.brand-menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.brand-menu-trigger:hover { background: var(--bg-hover); color: var(--text-muted); }
+
+.brand-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 120px;
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  padding: 4px;
+  z-index: 50;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.brand-dropdown a {
+  display: block;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background 0.1s, color 0.1s;
+}
+.brand-dropdown a:hover { background: var(--bg-hover); color: var(--text); }
+
 /* ── Statusbar ─────────────────────────────────── */
 
 .app-statusbar {
   grid-column: 1 / -1;
   background: var(--bg-sidebar);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border-strong);
   display: flex;
   align-items: center;
   justify-content: space-between;

package/lib/public/css/theme.css

@@ -1,16 +1,21 @@
 :root {
-  --bg: #0a0e14;
-  --bg-sidebar: #0d1117;
-  --bg-content: #0a0e14;
+  --bg: #0d121b;
+  --bg-sidebar: #111826;
+  --bg-content: #0f1521;
   --bg-hover: rgba(99, 235, 255, 0.05);
   --bg-active: rgba(99, 235, 255, 0.08);
   --border: rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.11);
   --text: #c9d1d9;
   --text-muted: #6e7681;
   --text-dim: #383d47;
   --accent: #63ebff;
   --accent-dim: rgba(99, 235, 255, 0.4);
   --accent-link: rgba(99, 235, 255, 0.6);
+  --panel-bg-contrast: rgba(255, 255, 255, 0.028);
+  --panel-border-contrast: rgba(255, 255, 255, 0.11);
+  --field-bg-contrast: rgba(0, 0, 0, 0.3);
+  --field-border-contrast: rgba(255, 255, 255, 0.13);
 }
 
 html, body { height: 100%; }
@@ -29,13 +34,37 @@ body::before {
   position: fixed;
   inset: 0;
   background-image:
-    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
+    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
   background-size: 48px 48px;
   pointer-events: none;
   z-index: 0;
 }
 
+/* Unified panel treatment across tabs/pages. */
+.bg-surface {
+  background: var(--panel-bg-contrast) !important;
+  border-color: var(--panel-border-contrast) !important;
+}
+
+.border-border {
+  border-color: var(--panel-border-contrast) !important;
+}
+
+/* Universal field contrast treatment (all tabs/pages). */
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+select,
+textarea {
+  background: var(--field-bg-contrast);
+  border-color: var(--field-border-contrast);
+}
+
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
+select:focus,
+textarea:focus {
+  border-color: rgba(255, 255, 255, 0.28);
+}
+
 ::placeholder { color: var(--text-dim) !important; opacity: 1 !important; }
 ::-webkit-input-placeholder { color: var(--text-dim) !important; }
 ::-moz-placeholder { color: var(--text-dim) !important; }

package/lib/public/js/app.js

@@ -1,5 +1,5 @@
 import { h, render } from "https://esm.sh/preact";
-import { useState, useEffect } from "https://esm.sh/preact/hooks";
+import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   fetchStatus,
@@ -10,6 +10,8 @@ import {
   approveDevice,
   rejectDevice,
   fetchOnboardStatus,
+  fetchAuthStatus,
+  logout,
   fetchDashboardUrl,
   updateSyncCron,
   fetchAlphaclawVersion,
@@ -27,7 +29,6 @@ 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 kUiTabStorageKey = "alphaclaw_ui_tab";
 const kUiTabs = ["general", "models", "envars"];
 const kDefaultUiTab = "general";
 
@@ -278,29 +279,42 @@ const GeneralTab = ({ onSwitchTab, isActive }) => {
 function App() {
   const [onboarded, setOnboarded] = useState(null);
   const [tab, setTab] = useState(() => {
-    try {
-      const savedTab = localStorage.getItem(kUiTabStorageKey);
-      return kUiTabs.includes(savedTab) ? savedTab : kDefaultUiTab;
-    } catch {
-      return kDefaultUiTab;
-    }
+    const hash = window.location.hash.replace("#", "");
+    return kUiTabs.includes(hash) ? hash : kDefaultUiTab;
   });
   const [acVersion, setAcVersion] = useState(null);
   const [acLatest, setAcLatest] = useState(null);
   const [acHasUpdate, setAcHasUpdate] = useState(false);
   const [acUpdating, setAcUpdating] = useState(false);
   const [acDismissed, setAcDismissed] = useState(false);
+  const [authEnabled, setAuthEnabled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  const closeMenu = useCallback((e) => {
+    if (menuRef.current && !menuRef.current.contains(e.target)) {
+      setMenuOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (menuOpen) {
+      document.addEventListener("click", closeMenu, true);
+      return () => document.removeEventListener("click", closeMenu, true);
+    }
+  }, [menuOpen, closeMenu]);
 
   useEffect(() => {
     fetchOnboardStatus()
       .then((data) => setOnboarded(data.onboarded))
       .catch(() => setOnboarded(false));
+    fetchAuthStatus()
+      .then((data) => setAuthEnabled(!!data.authEnabled))
+      .catch(() => {});
   }, []);
 
   useEffect(() => {
-    try {
-      localStorage.setItem(kUiTabStorageKey, tab);
-    } catch {}
+    history.replaceState(null, "", `#${tab}`);
   }, [tab]);
 
   useEffect(() => {
@@ -397,6 +411,34 @@ function App() {
         <div class="sidebar-brand">
           <img src="./img/logo.svg" alt="" width="20" height="20" />
           <span><span style="color: var(--accent)">alpha</span>claw</span>
+          ${authEnabled && html`
+            <div class="brand-menu" ref=${menuRef}>
+              <button
+                class="brand-menu-trigger"
+                onclick=${() => setMenuOpen((o) => !o)}
+                aria-label="Menu"
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                  <circle cx="8" cy="3" r="1.5" />
+                  <circle cx="8" cy="8" r="1.5" />
+                  <circle cx="8" cy="13" r="1.5" />
+                </svg>
+              </button>
+              ${menuOpen && html`
+                <div class="brand-dropdown">
+                  <a
+                    href="#"
+                    onclick=${async (e) => {
+                      e.preventDefault();
+                      setMenuOpen(false);
+                      await logout();
+                      window.location.href = "/login.html";
+                    }}
+                  >Log out</a>
+                </div>
+              `}
+            </div>
+          `}
         </div>
         <div class="sidebar-label">Setup</div>
         <nav class="sidebar-nav">
@@ -429,7 +471,10 @@ function App() {
       <div class="app-content">
         <div class="max-w-2xl w-full mx-auto space-y-4">
           <div style=${{ display: tab === "general" ? "" : "none" }}>
-            <${GeneralTab} onSwitchTab=${setTab} isActive=${tab === "general"} />
+            <${GeneralTab}
+              onSwitchTab=${setTab}
+              isActive=${tab === "general"}
+            />
           </div>
           <div style=${{ display: tab === "models" ? "" : "none" }}>
             <${Models} />

package/lib/public/js/components/channels.js

@@ -4,6 +4,10 @@ import { Badge } from './badge.js';
 const html = htm.bind(h);
 
 const ALL_CHANNELS = ['telegram', 'discord'];
+const kChannelMeta = {
+  telegram: { label: 'Telegram', iconSrc: '/assets/icons/telegram.svg' },
+  discord: { label: 'Discord', iconSrc: '/assets/icons/discord.svg' },
+};
 
 export function Channels({ channels, onSwitchTab }) {
   return html`
@@ -12,6 +16,7 @@ export function Channels({ channels, onSwitchTab }) {
       <div class="space-y-2">
         ${channels ? ALL_CHANNELS.map(ch => {
           const info = channels[ch];
+          const channelMeta = kChannelMeta[ch] || { label: ch.charAt(0).toUpperCase() + ch.slice(1), iconSrc: '' };
           let badge;
           if (!info) {
             badge = html`<a
@@ -25,7 +30,12 @@ export function Channels({ channels, onSwitchTab }) {
             badge = html`<${Badge} tone="warning">Awaiting pairing</${Badge}>`;
           }
           return html`<div class="flex justify-between items-center py-1.5">
-            <span class="font-medium text-sm">${ch.charAt(0).toUpperCase() + ch.slice(1)}</span>
+            <span class="font-medium text-sm flex items-center gap-2">
+              ${channelMeta.iconSrc
+                ? html`<img src=${channelMeta.iconSrc} alt="" class="w-4 h-4 rounded-sm" aria-hidden="true" />`
+                : null}
+              ${channelMeta.label}
+            </span>
             ${badge}
           </div>`;
         }) : html`<div class="text-gray-500 text-sm text-center py-2">Loading...</div>`}

package/lib/public/js/components/envars.js

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useEffect, useCallback } from "https://esm.sh/preact/hooks";
+import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars, saveEnvVars, restartGateway } from "../lib/api.js";
 import { showToast } from "./toast.js";
@@ -14,6 +14,16 @@ const kGroupLabels = {
 };
 
 const kGroupOrder = ["github", "channels", "tools", "custom"];
+const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+const getVarsSignature = (items) =>
+  JSON.stringify(
+    (items || [])
+      .map((v) => ({
+        key: String(v?.key || ""),
+        value: String(v?.value || ""),
+      }))
+      .sort((a, b) => a.key.localeCompare(b.key)),
+  );
 
 const kHintByKey = {
   ANTHROPIC_API_KEY: html`from <a href="https://console.anthropic.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.anthropic.com</a>`,
@@ -72,17 +82,21 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
 
 export const Envars = () => {
   const [vars, setVars] = useState([]);
+  const [reservedKeys, setReservedKeys] = useState(() => new Set());
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [restartingGateway, setRestartingGateway] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
   const [newKey, setNewKey] = useState("");
+  const baselineSignatureRef = useRef("[]");
 
   const load = useCallback(async () => {
     try {
       const data = await fetchEnvVars();
-      setVars(data.vars || []);
-      setDirty(false);
+      const nextVars = data.vars || [];
+      baselineSignatureRef.current = getVarsSignature(nextVars);
+      setVars(nextVars);
+      setReservedKeys(new Set(data.reservedKeys || []));
       setRestartRequired(!!data.restartRequired);
     } catch (err) {
       console.error("Failed to load env vars:", err);
@@ -93,14 +107,16 @@ export const Envars = () => {
     load();
   }, [load]);
 
+  useEffect(() => {
+    setDirty(getVarsSignature(vars) !== baselineSignatureRef.current);
+  }, [vars]);
+
   const handleChange = (key, value) => {
     setVars((prev) => prev.map((v) => (v.key === key ? { ...v, value } : v)));
-    setDirty(true);
   };
 
   const handleDelete = (key) => {
     setVars((prev) => prev.filter((v) => v.key !== key));
-    setDirty(true);
   };
 
   const handleSave = async () => {
@@ -119,6 +135,7 @@ export const Envars = () => {
           : "Environment variables saved",
         "success",
       );
+      baselineSignatureRef.current = getVarsSignature(vars);
       setDirty(false);
     } catch (err) {
       showToast("Failed to save: " + err.message, "error");
@@ -163,11 +180,16 @@ export const Envars = () => {
 
   const addVars = (pairs) => {
     let added = 0;
+    const blocked = [];
     setVars((prev) => {
       const next = [...prev];
       for (const { key: rawKey, value } of pairs) {
-        const key = rawKey.toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+        const key = normalizeEnvVarKey(rawKey);
         if (!key) continue;
+        if (reservedKeys.has(key)) {
+          blocked.push(key);
+          continue;
+        }
         const existing = next.find((v) => v.key === key);
         if (existing) {
           existing.value = value;
@@ -186,8 +208,7 @@ export const Envars = () => {
       }
       return next;
     });
-    if (added) setDirty(true);
-    return added;
+    return { added, blocked };
   };
 
   const handlePaste = (e, fallbackField) => {
@@ -195,10 +216,19 @@ export const Envars = () => {
     const pairs = parsePaste(text);
     if (pairs.length > 1) {
       e.preventDefault();
-      const added = addVars(pairs);
+      const { added, blocked } = addVars(pairs);
       setNewKey("");
       setNewVal("");
-      showToast(`Added ${added} variable${added !== 1 ? "s" : ""}`, "success");
+      if (blocked.length) {
+        const uniqueBlocked = Array.from(new Set(blocked));
+        showToast(
+          `Reserved vars can't be added: ${uniqueBlocked.join(", ")}`,
+          "error",
+        );
+      }
+      if (added) {
+        showToast(`Added ${added} variable${added !== 1 ? "s" : ""}`, "success");
+      }
       return;
     }
     if (pairs.length === 1) {
@@ -230,11 +260,12 @@ export const Envars = () => {
   };
 
   const handleAddVar = () => {
-    const key = newKey
-      .trim()
-      .toUpperCase()
-      .replace(/[^A-Z0-9_]/g, "_");
+    const key = normalizeEnvVarKey(newKey);
     if (!key) return;
+    if (reservedKeys.has(key)) {
+      showToast(`Reserved var can't be added: ${key}`, "error");
+      return;
+    }
     addVars([{ key, value: newVal }]);
     setNewKey("");
     setNewVal("");

package/lib/public/js/components/models.js

@@ -13,6 +13,7 @@ import {
 } from "../lib/api.js";
 import { showToast } from "./toast.js";
 import { Badge } from "./badge.js";
+import { SecretInput } from "./secret-input.js";
 import {
   getModelProvider,
   getAuthProviderFromModelProvider,
@@ -274,12 +275,12 @@ export const Models = () => {
   const renderCredentialField = (field) => html`
     <div class="space-y-1">
       <label class="text-xs font-medium text-gray-400">${field.label}</label>
-      <input
-        type="password"
-        placeholder=${field.placeholder || ""}
+      <${SecretInput}
         value=${getKeyVal(envVars, field.key)}
         onInput=${(e) => setEnvValue(field.key, e.target.value)}
-        class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+        placeholder=${field.placeholder || ""}
+        isSecret=${!field.isText}
+        inputClass="flex-1 w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
       />
       <p class="text-xs text-gray-600">${field.hint}</p>
     </div>

package/lib/public/js/components/onboarding/pairing-utils.js

@@ -0,0 +1,12 @@
+export const getPreferredPairingChannel = (vals = {}) => {
+  if (vals.TELEGRAM_BOT_TOKEN) return "telegram";
+  if (vals.DISCORD_BOT_TOKEN) return "discord";
+  return "";
+};
+
+export const isChannelPaired = (channels = {}, channel = "") => {
+  if (!channel) return false;
+  const info = channels?.[channel];
+  if (!info) return false;
+  return info.status === "paired" && Number(info.paired || 0) > 0;
+};

package/lib/public/js/components/onboarding/welcome-config.js

@@ -4,6 +4,20 @@ import { kAllAiAuthFields } from "../../lib/model-config.js";
 
 const html = htm.bind(h);
 
+export const normalizeGithubRepoInput = (repoInput) =>
+  String(repoInput || "")
+    .trim()
+    .replace(/^git@github\.com:/, "")
+    .replace(/^https:\/\/github\.com\//, "")
+    .replace(/\.git$/, "");
+
+export const isValidGithubRepoInput = (repoInput) => {
+  const cleaned = normalizeGithubRepoInput(repoInput);
+  if (!cleaned) return false;
+  const parts = cleaned.split("/").filter(Boolean);
+  return parts.length === 2 && !parts.some((part) => /\s/.test(part));
+};
+
 export const kWelcomeGroups = [
   {
     id: "ai",
@@ -39,7 +53,10 @@ export const kWelcomeGroups = [
         placeholder: "ghp_...",
       },
     ],
-    validate: (vals) => !!(vals.GITHUB_TOKEN && vals.GITHUB_WORKSPACE_REPO),
+    validate: (vals) =>
+      !!(
+        vals.GITHUB_TOKEN && isValidGithubRepoInput(vals.GITHUB_WORKSPACE_REPO)
+      ),
   },
   {
     id: "channels",