@inetafrica/open-claudia 2.6.30 → 2.6.32

package/core/actions.js

@@ -19,6 +19,9 @@ const { finishOnboarding } = require("./onboarding");
 const { startSession } = require("./handlers");
 const jobs = require("./jobs");
 const scheduler = require("./scheduler");
+const {
+  getClaudeOAuthToken, runClaudeAuthCommand, runCodexLoginStatus, runCodexDeviceLogin,
+} = require("./auth-flow");
 
 async function handleAction(envelope) {
   const adapter = envelope.adapter;
@@ -251,6 +254,20 @@ async function handleAction(envelope) {
     state.settings.model = model;
     saveState();
     const beLabel = be === "cursor" ? "Cursor Agent" : be === "codex" ? "Codex" : "Claude Code";
+    // Auth-aware: if the chosen provider isn't connected, start its login flow
+    // now. The model is already set, so once auth completes the user is on it.
+    if (be === "claude" && !getClaudeOAuthToken().value) {
+      if (!isChatOwner(envelope.channelId)) { await send("Claude isn't connected and only the owner can sign it in."); return; }
+      await send(`Set to ${model}, but Claude isn't connected yet. Starting login — open the URL I send, then paste the code here.`);
+      await runClaudeAuthCommand(["auth", "login", "--claudeai"], "Claude login");
+      return;
+    }
+    if (be === "codex" && !runCodexLoginStatus().ok) {
+      if (!isChatOwner(envelope.channelId)) { await send("Codex isn't connected and only the owner can sign it in."); return; }
+      await send(`Set to ${model}, but Codex isn't connected yet. Starting device login — open the URL and enter the code I send.`);
+      await runCodexDeviceLogin();
+      return;
+    }
     await send(switched ? `Switched to ${beLabel}.\nModel: ${model}` : `Model: ${model}`);
     return;
   }

package/core/auth-flow.js

@@ -317,6 +317,16 @@ function runCodexLoginStatus() {
   return { ...result, ok: result.ok && !isCodexAuthErrorText(result.output) };
 }
 
+// Quick "is this provider usable non-interactively" check for the unified
+// /login model picker. Claude is cheap (token presence is what the bot relies
+// on). Codex spawns `codex login status` once — fine for a setup screen.
+function providerAuthStatus() {
+  return {
+    claude: !!getClaudeOAuthToken().value,
+    codex: resolvedCodexPath ? runCodexLoginStatus().ok : false,
+  };
+}
+
 async function sendCodexAuthStatusSummary(prefix = "Codex auth status") {
   const status = runCodexLoginStatus();
   const version = resolvedCodexPath ? runCommand(resolvedCodexPath, ["--version"]) : { ok: false, output: "not found" };
@@ -427,6 +437,7 @@ module.exports = {
   clearPendingCodexAuth,
   runCommand,
   runCodexLoginStatus,
+  providerAuthStatus,
   sendCodexAuthStatusSummary,
   saveCodexApiKeyWithCli,
   runCodexDeviceLogin,

package/core/config.js

@@ -90,7 +90,7 @@ const WORKSPACE = config.WORKSPACE;
 const CLAUDE_PATH = resolveExecutablePath(config.CLAUDE_PATH, null, "Claude CLI", { required: true });
 const CURSOR_PATH = config.CURSOR_PATH || null;
 const CODEX_PATH = config.CODEX_PATH || null;
-const DEFAULT_CLAUDE_MODEL = config.CLAUDE_MODEL || process.env.CLAUDE_MODEL || "claude-fable-5";
+const DEFAULT_CLAUDE_MODEL = config.CLAUDE_MODEL || process.env.CLAUDE_MODEL || "claude-opus-4-8";
 const AUTO_COMPACT_TOKENS = parseInt(config.AUTO_COMPACT_TOKENS || process.env.AUTO_COMPACT_TOKENS || "380000", 10);
 const MIN_COMPACT_INTERVAL_MS = parseInt(config.MIN_COMPACT_INTERVAL_MS || process.env.MIN_COMPACT_INTERVAL_MS || "1800000", 10);
 const PROJECT_TRANSCRIPTS = configTruthy(config.PROJECT_TRANSCRIPTS || process.env.PROJECT_TRANSCRIPTS, true);

package/core/handlers.js

@@ -38,7 +38,7 @@ const {
   sendClaudeAuthStatusSummary,
   runClaudeAuthCommand, clearPendingClaudeAuth,
   sendCodexAuthStatusSummary, runCodexDeviceLogin, clearPendingCodexAuth,
-  saveCodexApiKeyWithCli,
+  saveCodexApiKeyWithCli, providerAuthStatus,
 } = require("./auth-flow");
 
 const CURRENT_VERSION = require(path.join(__dirname, "..", "package.json")).version;
@@ -126,7 +126,8 @@ register({
       "Identity: /whoami /link",
       "Team: /people /intros /auth (owner)",
       "Automation: /cron /vault /soul /dreamsummary",
-      "Claude auth: /auth_status /login /setup_token /use_oauth_token /clear_oauth_token",
+      "Connect: /login (pick model + sign in)",
+      "Claude auth: /auth_status /setup_token /use_oauth_token /clear_oauth_token",
       "Codex auth: /codex_auth_status /codex_login /codex_setup_token",
       "System: /doctor /requirements /restart /upgrade",
       "",
@@ -605,6 +606,57 @@ register({
   },
 });
 
+// Shared model picker used by /model and the unified /login. When authAware is
+// set, the provider section headers show connection status so the user knows a
+// tap on an unconnected provider will start its auth flow (handled in the mb:
+// callback in actions.js).
+function buildModelPicker({ authAware = false } = {}) {
+  const { settings } = currentState();
+  const auth = authAware ? providerAuthStatus() : null;
+  const mark = (ok) => authAware ? (ok ? " · connected" : " · tap to connect") : "";
+  const rows = [];
+  rows.push([{ text: `── Claude${mark(auth && auth.claude)} ──`, callback_data: "noop" }]);
+  rows.push([
+    { text: "Fable 5", callback_data: "mb:claude:claude-fable-5" },
+    { text: "Opus 4.8", callback_data: "mb:claude:claude-opus-4-8" },
+  ]);
+  rows.push([
+    { text: "Opus 4.7", callback_data: "mb:claude:claude-opus-4-7" },
+    { text: "Opus 4.6", callback_data: "mb:claude:claude-opus-4-6" },
+  ]);
+  rows.push([
+    { text: "Sonnet 4.6", callback_data: "mb:claude:claude-sonnet-4-6" },
+    { text: "Haiku", callback_data: "mb:claude:claude-haiku-4-5-20251001" },
+  ]);
+  if (resolvedCursorPath) {
+    rows.push([{ text: "── Cursor ──", callback_data: "noop" }]);
+    rows.push([
+      { text: "Composer 2", callback_data: "mb:cursor:composer-2" },
+      { text: "Composer 2 Fast", callback_data: "mb:cursor:composer-2-fast" },
+      { text: "Auto", callback_data: "mb:cursor:auto" },
+    ]);
+    rows.push([
+      { text: "Opus 4.6 Thinking", callback_data: "mb:cursor:claude-4.6-opus-high-thinking" },
+      { text: "GPT-5.4", callback_data: "mb:cursor:gpt-5.4-medium" },
+    ]);
+  }
+  if (resolvedCodexPath) {
+    rows.push([{ text: `── Codex${mark(auth && auth.codex)} ──`, callback_data: "noop" }]);
+    rows.push([
+      { text: "GPT-5.5", callback_data: "mb:codex:gpt-5.5" },
+      { text: "gpt-5", callback_data: "mb:codex:gpt-5" },
+      { text: "gpt-5-codex", callback_data: "mb:codex:gpt-5-codex" },
+    ]);
+    rows.push([
+      { text: "o3", callback_data: "mb:codex:o3" },
+      { text: "o4-mini", callback_data: "mb:codex:o4-mini" },
+    ]);
+  }
+  rows.push([{ text: `Default (Claude: ${DEFAULT_CLAUDE_MODEL})`, callback_data: "m:default" }]);
+  const beLabel = settings.backend === "cursor" ? "Cursor" : settings.backend === "codex" ? "Codex" : "Claude";
+  return { rows, beLabel, model: settings.model };
+}
+
 register({
   name: "model", description: "Switch model (opus/sonnet/haiku)", args: "[<model>]",
   handler: async (env, { tail }) => {
@@ -615,48 +667,8 @@ register({
       if (settings.model === "default") settings.model = null;
       return send(`Model: ${settings.model || "default"}`);
     }
-    const { settings } = currentState();
-    const rows = [];
-    rows.push([{ text: "── Claude ──", callback_data: "noop" }]);
-    rows.push([
-      { text: "Fable 5", callback_data: "mb:claude:claude-fable-5" },
-      { text: "Opus 4.8", callback_data: "mb:claude:claude-opus-4-8" },
-    ]);
-    rows.push([
-      { text: "Opus 4.7", callback_data: "mb:claude:claude-opus-4-7" },
-      { text: "Opus 4.6", callback_data: "mb:claude:claude-opus-4-6" },
-    ]);
-    rows.push([
-      { text: "Sonnet 4.6", callback_data: "mb:claude:claude-sonnet-4-6" },
-      { text: "Haiku", callback_data: "mb:claude:claude-haiku-4-5-20251001" },
-    ]);
-    if (resolvedCursorPath) {
-      rows.push([{ text: "── Cursor ──", callback_data: "noop" }]);
-      rows.push([
-        { text: "Composer 2", callback_data: "mb:cursor:composer-2" },
-        { text: "Composer 2 Fast", callback_data: "mb:cursor:composer-2-fast" },
-        { text: "Auto", callback_data: "mb:cursor:auto" },
-      ]);
-      rows.push([
-        { text: "Opus 4.6 Thinking", callback_data: "mb:cursor:claude-4.6-opus-high-thinking" },
-        { text: "GPT-5.4", callback_data: "mb:cursor:gpt-5.4-medium" },
-      ]);
-    }
-    if (resolvedCodexPath) {
-      rows.push([{ text: "── Codex ──", callback_data: "noop" }]);
-      rows.push([
-        { text: "GPT-5.5", callback_data: "mb:codex:gpt-5.5" },
-        { text: "gpt-5", callback_data: "mb:codex:gpt-5" },
-        { text: "gpt-5-codex", callback_data: "mb:codex:gpt-5-codex" },
-      ]);
-      rows.push([
-        { text: "o3", callback_data: "mb:codex:o3" },
-        { text: "o4-mini", callback_data: "mb:codex:o4-mini" },
-      ]);
-    }
-    rows.push([{ text: `Default (Claude: ${DEFAULT_CLAUDE_MODEL})`, callback_data: "m:default" }]);
-    const beLabel = settings.backend === "cursor" ? "Cursor" : settings.backend === "codex" ? "Codex" : "Claude";
-    send(`Current: ${beLabel} · ${settings.model || "default"}\n\nPick a model — backend switches automatically.\nOr type /model <name>.`, { keyboard: { inline_keyboard: rows } });
+    const { rows, beLabel, model } = buildModelPicker();
+    send(`Current: ${beLabel} · ${model || "default"}\n\nPick a model — backend switches automatically.\nOr type /model <name>.`, { keyboard: { inline_keyboard: rows } });
   },
 });
 
@@ -1148,10 +1160,12 @@ register({
 });
 
 register({
-  name: "login", description: "Start Claude Code login", ownerOnly: true,
+  name: "login", description: "Pick a model and connect its provider", ownerOnly: true,
   handler: async (env) => {
-    if (!ownerEnv(env)) return send("Owner only — Claude auth is shared across users.");
-    await runClaudeAuthCommand(["auth", "login", "--claudeai", "--email", "sumeet@inet.africa"], "Claude login");
+    if (!ownerEnv(env)) return send("Owner only — provider auth is shared across users.");
+    await send("Connecting… checking which providers are signed in.");
+    const { rows, beLabel, model } = buildModelPicker({ authAware: true });
+    send(`Current: ${beLabel} · ${model || "default"}\n\nPick a model. If its provider isn't connected yet, tapping it starts the login flow — then you're on that model.`, { keyboard: { inline_keyboard: rows } });
   },
 });
 

package/core/router.js

@@ -228,10 +228,17 @@ async function handleText(envelope) {
   if (state.pendingClaudeAuthProcess && state.pendingClaudeAuthLabel !== "manual OAuth token save") {
     const text = (envelope.text || "").trim();
     if (looksLikeClaudeAuthReply(text)) {
-      await send("That looks like a Claude login code/callback. I did not delete it or send it to Claude as a prompt. Please resend it as `/auth_code YOUR_CODE`, or use /cancel_auth to stop the login flow.");
+      await deleteMessage(envelope.messageId);
+      try {
+        state.pendingClaudeAuthProcess.stdin.write(text + "\n");
+        await send("Got it — sent the code to Claude. I'll confirm with an auth-status check when it finishes.");
+      } catch (e) {
+        clearPendingClaudeAuth(state);
+        await send(`Could not send the auth code to Claude: ${redactSensitive(e.message)}`);
+      }
       return;
     }
-    await send("Claude login is still waiting. I will not delete normal messages. If Claude gave you a code, send it as `/auth_code YOUR_CODE`, or use /cancel_auth.");
+    await send("Claude login is still waiting. Paste the code/callback Claude gave you and I'll submit it, or send /cancel_auth to stop.");
   }
 
   if (!isOnboarded() && state.onboardingStep) {

package/core/web-auth.js

@@ -0,0 +1,160 @@
+// Web-driven Claude/Codex authentication. Runs the same interactive CLIs
+// the Telegram /login flow uses, but captures the URL/output into in-memory
+// state that the web dashboard polls, instead of pushing it to a chat.
+// A single admin owns the dashboard, so one module-level slot per provider
+// is enough. Lives in-process with the bot (web.js is started by bot.js).
+
+const { spawn } = require("child_process");
+const os = require("os");
+const { CLAUDE_PATH, resolvedCodexPath, botSubprocessEnv } = require("./config");
+const { redactSensitive, stripTerminalControls, extractUrls } = require("./redact");
+const {
+  claudeSubprocessEnv, saveClaudeOAuthToken, getClaudeOAuthToken,
+  extractClaudeToken, isClaudeAuthUrl, looksLikeClaudeToken, looksLikeOpenAIKey,
+  runClaudeAuthStatusDiagnostic, isClaudeAuthErrorText,
+  runCodexLoginStatus, saveCodexApiKeyWithCli,
+} = require("./auth-flow");
+
+const HOME = process.env.HOME || os.homedir();
+
+// ── Claude interactive browser login ────────────────────────────────
+let claude = null;
+
+function startClaudeLogin() {
+  if (claude && claude.proc && !claude.done) return { ok: true, already: true };
+  const proc = spawn(CLAUDE_PATH, ["auth", "login", "--claudeai"], {
+    cwd: HOME, env: claudeSubprocessEnv(), stdio: ["pipe", "pipe", "pipe"],
+  });
+  claude = { proc, url: null, log: "", awaitingCode: false, done: false, ok: false, error: null, tokenStored: false };
+  const onChunk = (buf) => {
+    const chunk = buf.toString();
+    claude.log = (claude.log + chunk).slice(-4000);
+    const token = extractClaudeToken(chunk) || extractClaudeToken(claude.log);
+    if (token && !claude.tokenStored) claude.tokenStored = saveClaudeOAuthToken(token);
+    for (const u of extractUrls(chunk)) {
+      if (isClaudeAuthUrl(u) && !claude.url) { claude.url = u; claude.awaitingCode = true; }
+    }
+  };
+  proc.stdout.on("data", onChunk);
+  proc.stderr.on("data", onChunk);
+  proc.on("close", (code) => {
+    claude.done = true;
+    claude.awaitingCode = false;
+    const tty = /raw mode is not supported|process\.stdin|not a tty|inappropriate ioctl/i.test(claude.log);
+    claude.ok = claude.tokenStored || code === 0;
+    if (!claude.ok) claude.error = tty ? "tty" : "failed";
+  });
+  proc.on("error", (err) => { claude.done = true; claude.ok = false; claude.error = redactSensitive(err.message); });
+  return { ok: true };
+}
+
+function submitClaudeCode(code) {
+  if (!claude || !claude.proc || claude.done) return { ok: false, error: "No Claude login is in progress." };
+  try {
+    claude.proc.stdin.write(String(code || "").trim() + "\n");
+    claude.awaitingCode = false;
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: redactSensitive(e.message) };
+  }
+}
+
+function cancelClaude() {
+  if (claude && claude.proc && claude.proc.kill) { try { claude.proc.kill("SIGTERM"); } catch (e) {} }
+  claude = null;
+  return { ok: true };
+}
+
+function claudeState() {
+  if (!claude) return { running: false };
+  return {
+    running: !claude.done,
+    url: claude.url,
+    awaitingCode: claude.awaitingCode,
+    done: claude.done,
+    ok: claude.ok,
+    error: claude.error,
+    log: redactSensitive(stripTerminalControls(claude.log)).slice(-600),
+  };
+}
+
+// Reliable path: save a pasted Claude OAuth token directly.
+function saveClaudeToken(token) {
+  const t = String(token || "").trim();
+  if (!looksLikeClaudeToken(t)) return { ok: false, error: "That does not look like a Claude OAuth token." };
+  return saveClaudeOAuthToken(t) ? { ok: true } : { ok: false, error: "Could not store the token." };
+}
+
+// ── Codex device login ──────────────────────────────────────────────
+let codex = null;
+
+function startCodexLogin() {
+  if (!resolvedCodexPath) return { ok: false, error: "Codex CLI not found." };
+  if (codex && codex.proc && !codex.done) return { ok: true, already: true };
+  const proc = spawn(resolvedCodexPath, ["login", "--device-auth"], {
+    cwd: HOME, env: botSubprocessEnv(), stdio: ["pipe", "pipe", "pipe"],
+  });
+  codex = { proc, url: null, code: null, log: "", done: false, ok: false, error: null };
+  const onChunk = (buf) => {
+    const clean = redactSensitive(stripTerminalControls(buf.toString()));
+    codex.log = (codex.log + clean).slice(-4000);
+    for (const u of extractUrls(clean)) { if (!codex.url) codex.url = u; }
+    const m = clean.match(/(?:code|device code)[:\s]+([A-Z0-9-]{6,})/i);
+    if (m && !codex.code) codex.code = m[1];
+  };
+  proc.stdout.on("data", onChunk);
+  proc.stderr.on("data", onChunk);
+  proc.on("close", (code) => {
+    codex.done = true;
+    const tty = /raw mode is not supported|not a tty|inappropriate ioctl/i.test(codex.log);
+    codex.ok = code === 0;
+    if (!codex.ok) codex.error = tty ? "tty" : "failed";
+  });
+  proc.on("error", (err) => { codex.done = true; codex.ok = false; codex.error = redactSensitive(err.message); });
+  return { ok: true };
+}
+
+function cancelCodex() {
+  if (codex && codex.proc && codex.proc.kill) { try { codex.proc.kill("SIGTERM"); } catch (e) {} }
+  codex = null;
+  return { ok: true };
+}
+
+function codexState() {
+  if (!codex) return { running: false };
+  return {
+    running: !codex.done,
+    url: codex.url,
+    code: codex.code,
+    done: codex.done,
+    ok: codex.ok,
+    error: codex.error,
+    log: codex.log.slice(-600),
+  };
+}
+
+// Reliable path: save a pasted OpenAI API key via the Codex CLI.
+async function saveCodexApiKey(key) {
+  if (!resolvedCodexPath) return { ok: false, error: "Codex CLI not found." };
+  const k = String(key || "").trim();
+  if (!looksLikeOpenAIKey(k)) return { ok: false, error: "That does not look like an OpenAI API key." };
+  const result = await saveCodexApiKeyWithCli(k);
+  return result.ok ? { ok: true } : { ok: false, error: redactSensitive(result.output).slice(-300) };
+}
+
+// ── Combined status ─────────────────────────────────────────────────
+function authStatus() {
+  const tokenInfo = getClaudeOAuthToken();
+  const diag = runClaudeAuthStatusDiagnostic();
+  const codexStatus = resolvedCodexPath ? runCodexLoginStatus() : { ok: false };
+  return {
+    claude: { configured: !!tokenInfo.value, source: tokenInfo.source, loggedIn: !isClaudeAuthErrorText(diag) },
+    codex: { cliFound: !!resolvedCodexPath, loggedIn: !!codexStatus.ok },
+  };
+}
+
+module.exports = {
+  startClaudeLogin, submitClaudeCode, cancelClaude, claudeState, saveClaudeToken,
+  startCodexLogin, cancelCodex, codexState, saveCodexApiKey,
+  authStatus,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inetafrica/open-claudia",
-  "version": "2.6.30",
+  "version": "2.6.32",
   "description": "Your always-on AI coding assistant — Claude Code, Cursor Agent, and OpenAI Codex via Telegram or Kazee Chat",
   "main": "bot.js",
   "bin": {

package/web.js

@@ -15,6 +15,7 @@ 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 JOBS_FILE = path.join(CONFIG_DIR, "jobs.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);
@@ -173,6 +174,13 @@ function loadSoul() {
 }
 
 function loadCrons() {
+  // Crons now live in the unified jobs store (jobs.json), tagged kind:"cron".
+  // The legacy crons.json was migrated and renamed, so read jobs first and
+  // only fall back to the old file for un-migrated installs.
+  try {
+    const jobs = JSON.parse(fs.readFileSync(JOBS_FILE, "utf-8"));
+    if (Array.isArray(jobs)) return jobs.filter((j) => j && j.kind === "cron");
+  } catch (e) { /* fall through to legacy */ }
   try { return JSON.parse(fs.readFileSync(CRONS_FILE, "utf-8")); } catch (e) { return []; }
 }
 
@@ -261,6 +269,24 @@ async function handleAPI(req, res, body) {
     return res.end(JSON.stringify({ error: "Unauthorized" }));
   }
 
+  // ── Authentication (Claude / Codex) ──
+  if (url.startsWith("/api/auth/")) {
+    const webAuth = require("./core/web-auth");
+    const json = (obj, c = 200) => { res.writeHead(c, { "Content-Type": "application/json" }); return res.end(JSON.stringify(obj)); };
+    const post = req.method === "POST";
+    if (url === "/api/auth/status") return json(webAuth.authStatus());
+    if (url === "/api/auth/claude/start" && post) return json(webAuth.startClaudeLogin());
+    if (url === "/api/auth/claude/state") return json(webAuth.claudeState());
+    if (url === "/api/auth/claude/code" && post) return json(webAuth.submitClaudeCode(JSON.parse(body || "{}").code));
+    if (url === "/api/auth/claude/token" && post) return json(webAuth.saveClaudeToken(JSON.parse(body || "{}").token));
+    if (url === "/api/auth/claude/cancel" && post) return json(webAuth.cancelClaude());
+    if (url === "/api/auth/codex/start" && post) return json(webAuth.startCodexLogin());
+    if (url === "/api/auth/codex/state") return json(webAuth.codexState());
+    if (url === "/api/auth/codex/key" && post) return json(await webAuth.saveCodexApiKey(JSON.parse(body || "{}").key));
+    if (url === "/api/auth/codex/cancel" && post) return json(webAuth.cancelCodex());
+    return json({ error: "Unknown auth route" }, 404);
+  }
+
   // Status
   if (url === "/api/status") {
     const env = loadEnv();
@@ -489,13 +515,30 @@ async function handleAPI(req, res, body) {
 
 // ── HTML UI ────────────────────────────────────────────────────────
 
+// The dashboard is generic "Open Claudia" by default, but each pod is its
+// own named bot (e.g. euvy). Prefer an explicit BOT_NAME, else derive the
+// pod name from its public hostname, else fall back to the generic brand.
+function botDisplayName() {
+  if (process.env.BOT_NAME && process.env.BOT_NAME.trim()) return process.env.BOT_NAME.trim();
+  try {
+    const u = process.env.WEB_PUBLIC_URL;
+    if (u) {
+      const host = new URL(u).hostname;
+      const label = host.split(".")[0];
+      if (label) return label;
+    }
+  } catch (e) { /* ignore */ }
+  return "Open Claudia";
+}
+
 function getHTML() {
+  const botName = botDisplayName();
   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>
+<title>${botName}</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; }
@@ -570,7 +613,7 @@ async function init() {
 function showLogin() {
   $("#app").innerHTML = \`
     <div class="login-page"><div class="login-box">
-      <h1>Open Claudia</h1>
+      <h1>${botName}</h1>
       <p class="subtitle">Enter your admin password</p>
       <div id="login-msg"></div>
       <div class="card">
@@ -625,6 +668,7 @@ function render() {
     { id: "dashboard", label: "Dashboard" },
     { id: "usage", label: "Usage" },
     { id: "auth", label: "Users" },
+    { id: "credentials", label: "Credentials" },
     { id: "soul", label: "Soul" },
     { id: "crons", label: "Crons" },
     { id: "sessions", label: "Sessions" },
@@ -637,7 +681,7 @@ function render() {
   }
   $("#app").innerHTML = \`
     <div class="container">
-      <h1>Open Claudia</h1>
+      <h1>${botName}</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("")}
@@ -724,6 +768,34 @@ async function loadTab() {
           </div>\`).join("")}
       </div>\` : ""}\`;
   }
+  else if (currentTab === "credentials") {
+    el.innerHTML = \`
+      <div class="card" id="cred-status"><h2>Credentials</h2><p class="subtitle">Loading status…</p></div>
+      <div class="card">
+        <h2>Claude</h2>
+        <button onclick="startClaudeAuth()">Authenticate via browser</button>
+        <div id="claude-flow" style="margin-top:12px;"></div>
+        <div style="margin-top:16px;border-top:1px solid #2a2a2a;padding-top:16px;">
+          <label>Or paste a Claude OAuth token</label>
+          <div style="color:#777;font-size:11px;margin:2px 0 6px;">Generate with <code>claude setup-token</code> in a terminal if the browser flow can't finish here.</div>
+          <input id="claude-token" type="password" placeholder="sk-ant-...">
+          <button onclick="saveClaudeTokenWeb()" style="margin-top:8px;">Save token</button>
+          <span id="claude-token-msg" style="margin-left:10px;font-size:12px;color:#888;"></span>
+        </div>
+      </div>
+      <div class="card">
+        <h2>Codex</h2>
+        <button onclick="startCodexAuth()">Authenticate via device</button>
+        <div id="codex-flow" style="margin-top:12px;"></div>
+        <div style="margin-top:16px;border-top:1px solid #2a2a2a;padding-top:16px;">
+          <label>Or paste an OpenAI API key</label>
+          <input id="codex-key" type="password" placeholder="sk-...">
+          <button onclick="saveCodexKeyWeb()" style="margin-top:8px;">Save key</button>
+          <span id="codex-key-msg" style="margin-left:10px;font-size:12px;color:#888;"></span>
+        </div>
+      </div>\`;
+    loadCredStatus();
+  }
   else if (currentTab === "soul") {
     const soul = await api("/api/soul");
     if (!soul) return;
@@ -789,23 +861,44 @@ async function loadTab() {
       </div>
       <div class="card">
         <h2>Configuration</h2>
-        <p style="color:#888;font-size:13px;margin-bottom:12px;">Edit ~/.open-claudia/.env values</p>
+        <p style="color:#888;font-size:13px;margin-bottom:16px;">Changes are saved to the bot's environment and take effect after the next restart.</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",
-      "MEMORY_RECALL_MAX_CHARS",
-      "USAGE_ALERT_CONTEXT_TOKENS", "USAGE_ALERT_RATE_MULTIPLIER",
-      "USAGE_ALERT_BASELINE_TURNS", "USAGE_ALERT_MIN_BASELINE_TURNS",
-      "USAGE_ALERT_COOLDOWN_MS",
+    const groups = [
+      { title: "General", fields: [
+        { k: "WORKSPACE", label: "Workspace folder", desc: "Root directory where the bot reads and writes project files.", ph: "/data/Workspace" },
+        { k: "CLAUDE_PATH", label: "Claude CLI path", desc: "Path or command name for the Claude Code CLI.", ph: "claude" },
+      ]},
+      { title: "Voice transcription", fields: [
+        { k: "WHISPER_CLI", label: "Whisper CLI", desc: "Path to the whisper binary for transcribing voice notes. Leave blank to disable voice.", ph: "whisper" },
+        { k: "FFMPEG", label: "ffmpeg path", desc: "Path to ffmpeg, used to convert incoming voice audio.", ph: "ffmpeg" },
+        { k: "WHISPER_MODEL", label: "Whisper model", desc: "Transcription model size, e.g. base / small / medium.", ph: "base" },
+      ]},
+      { title: "Memory", fields: [
+        { k: "MEMORY_RECALL_MAX_CHARS", label: "Memory recall limit", desc: "Max characters of memory injected into context per turn.", ph: "e.g. 6000" },
+      ]},
+      { title: "Usage alerts (advanced)", fields: [
+        { k: "USAGE_ALERT_CONTEXT_TOKENS", label: "Context-token threshold", desc: "Warn when a turn's context exceeds this many tokens.", ph: "e.g. 150000" },
+        { k: "USAGE_ALERT_RATE_MULTIPLIER", label: "Rate multiplier", desc: "Warn when usage exceeds the recent baseline by this factor.", ph: "e.g. 2" },
+        { k: "USAGE_ALERT_BASELINE_TURNS", label: "Baseline window (turns)", desc: "How many recent turns form the usage baseline.", ph: "e.g. 20" },
+        { k: "USAGE_ALERT_MIN_BASELINE_TURNS", label: "Min baseline turns", desc: "Minimum turns required before alerts activate.", ph: "e.g. 5" },
+        { k: "USAGE_ALERT_COOLDOWN_MS", label: "Alert cooldown (ms)", desc: "Minimum gap between repeated usage alerts.", ph: "e.g. 300000" },
+      ]},
     ];
-    $("#config-fields").innerHTML = safe.map(k => \`
-      <div class="form-group"><label>\${k}</label><input id="cfg-\${k}" value="\${config[k] || ""}"></div>
-    \`).join("");
+    $("#config-fields").innerHTML = groups.map(g => \`
+      <div style="margin-bottom:20px;">
+        <div style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#9a9aff;border-bottom:1px solid #2a2a2a;padding-bottom:6px;margin-bottom:12px;">\${g.title}</div>
+        \${g.fields.map(f => \`
+          <div class="form-group">
+            <label>\${f.label}</label>
+            <div style="color:#777;font-size:11px;margin:2px 0 6px;">\${f.desc}</div>
+            <input id="cfg-\${f.k}" value="\${config[f.k] || ""}" placeholder="\${f.ph || ""}">
+          </div>\`).join("")}
+      </div>\`).join("");
   }
 }
 
@@ -878,6 +971,88 @@ async function removeAuth(chatId) { await api("/api/auth/remove", { method: "POS
 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 loadCredStatus() {
+  const s = await api("/api/auth/status");
+  if (!s) return;
+  const yn = (b) => b ? "<span style='color:#22c55e'>yes</span>" : "<span style='color:#dc2626'>no</span>";
+  $("#cred-status").innerHTML = \`<h2>Credentials</h2>
+    <div class="list-item"><span>Claude OAuth token saved</span><span>\${yn(s.claude.configured)}</span></div>
+    <div class="list-item"><span>Claude logged in</span><span>\${yn(s.claude.loggedIn)}</span></div>
+    <div class="list-item"><span>Codex CLI present</span><span>\${yn(s.codex.cliFound)}</span></div>
+    <div class="list-item"><span>Codex logged in</span><span>\${yn(s.codex.loggedIn)}</span></div>\`;
+}
+async function startClaudeAuth() {
+  $("#claude-flow").innerHTML = "<p class='subtitle'>Starting…</p>";
+  await api("/api/auth/claude/start", { method: "POST" });
+  pollClaudeAuth();
+}
+async function pollClaudeAuth() {
+  const st = await api("/api/auth/claude/state");
+  if (!st) return;
+  const box = $("#claude-flow");
+  if (st.done) {
+    box.innerHTML = st.ok ? "<div class='msg ok'>Claude authenticated.</div>"
+      : (st.error === "tty" ? "<div class='msg err'>The Claude CLI needs a real terminal here. Paste an OAuth token below instead.</div>"
+      : "<div class='msg err'>Login didn't complete. Paste a token below instead.</div>");
+    loadCredStatus();
+    return;
+  }
+  if (st.url) {
+    box.innerHTML = \`<p style="font-size:13px;">Open this URL, sign in, then paste the code Claude gives you:</p>
+      <p style="word-break:break-all;"><a href="\${st.url}" target="_blank">\${st.url}</a></p>
+      <input id="claude-code" placeholder="Paste code here">
+      <button onclick="submitClaudeCodeWeb()" style="margin-top:8px;">Submit code</button>\`;
+  } else {
+    box.innerHTML = "<p class='subtitle'>Starting…</p>";
+  }
+  setTimeout(pollClaudeAuth, 2000);
+}
+async function submitClaudeCodeWeb() {
+  const code = $("#claude-code").value;
+  await api("/api/auth/claude/code", { method: "POST", body: { code } });
+  $("#claude-flow").innerHTML = "<p class='subtitle'>Submitting…</p>";
+  setTimeout(pollClaudeAuth, 1500);
+}
+async function saveClaudeTokenWeb() {
+  const token = $("#claude-token").value;
+  const r = await api("/api/auth/claude/token", { method: "POST", body: { token } });
+  $("#claude-token-msg").textContent = r && r.ok ? "Saved — restart to apply." : ((r && r.error) || "Failed");
+  if (r && r.ok) { $("#claude-token").value = ""; loadCredStatus(); }
+}
+async function startCodexAuth() {
+  $("#codex-flow").innerHTML = "<p class='subtitle'>Starting…</p>";
+  const r = await api("/api/auth/codex/start", { method: "POST" });
+  if (r && r.error) { $("#codex-flow").innerHTML = "<div class='msg err'>" + r.error + "</div>"; return; }
+  pollCodexAuth();
+}
+async function pollCodexAuth() {
+  const st = await api("/api/auth/codex/state");
+  if (!st) return;
+  const box = $("#codex-flow");
+  if (st.done) {
+    box.innerHTML = st.ok ? "<div class='msg ok'>Codex authenticated.</div>"
+      : (st.error === "tty" ? "<div class='msg err'>The Codex CLI needs a real terminal here. Paste an API key below instead.</div>"
+      : "<div class='msg err'>Login didn't complete. Paste an API key below instead.</div>");
+    loadCredStatus();
+    return;
+  }
+  if (st.url) {
+    box.innerHTML = \`<p style="font-size:13px;">Open this URL and enter the code:</p>
+      <p style="word-break:break-all;"><a href="\${st.url}" target="_blank">\${st.url}</a></p>
+      \${st.code ? "<p>Device code: <b>" + st.code + "</b></p>" : ""}
+      <p class='subtitle'>Waiting for you to finish in the browser…</p>\`;
+  } else {
+    box.innerHTML = "<p class='subtitle'>Starting…</p>";
+  }
+  setTimeout(pollCodexAuth, 2000);
+}
+async function saveCodexKeyWeb() {
+  const key = $("#codex-key").value;
+  const r = await api("/api/auth/codex/key", { method: "POST", body: { key } });
+  $("#codex-key-msg").textContent = r && r.ok ? "Saved." : ((r && r.error) || "Failed");
+  if (r && r.ok) { $("#codex-key").value = ""; loadCredStatus(); }
+}
+
 async function saveSoul() {
   await api("/api/soul", { method: "POST", body: { content: $("#soul-content").value } });
   $("#soul-msg").textContent = "Saved";
@@ -903,7 +1078,7 @@ async function saveConfig() {
 function renderSetup() {
   $("#app").innerHTML = \`
     <div class="container">
-      <h1>Open Claudia Setup</h1>
+      <h1>${botName} Setup</h1>
       <p class="subtitle">Configure your AI coding assistant</p>
       <div id="setup-msg"></div>
       <div class="card">