@cremini/skillpack 1.1.9 → 1.2.1

package/dist/runtime/registry.js

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+
+// src/runtime/registry.ts
+import crypto from "crypto";
+import fs from "fs";
+import os from "os";
+import path from "path";
+var SKILLPACK_HOME = path.join(os.homedir(), ".skillpack");
+var LEGACY_REGISTRY_FILE = path.join(SKILLPACK_HOME, "registry.json");
+var REGISTRY_DIR = path.join(SKILLPACK_HOME, "registry.d");
+var migrationChecked = false;
+function getRegistryPath() {
+  ensureRegistryReady();
+  return REGISTRY_DIR;
+}
+function ensureHomeDir() {
+  if (!fs.existsSync(SKILLPACK_HOME)) {
+    fs.mkdirSync(SKILLPACK_HOME, { recursive: true });
+  }
+}
+function ensureRegistryDir() {
+  ensureHomeDir();
+  if (!fs.existsSync(REGISTRY_DIR)) {
+    fs.mkdirSync(REGISTRY_DIR, { recursive: true });
+  }
+}
+function canonicalizeDir(dir) {
+  const resolved = path.resolve(dir);
+  try {
+    return fs.realpathSync(resolved);
+  } catch {
+    return resolved;
+  }
+}
+function hashDir(dir) {
+  return crypto.createHash("md5").update(canonicalizeDir(dir)).digest("hex");
+}
+function getEntryPathForCanonicalDir(dir) {
+  return path.join(REGISTRY_DIR, `${hashDir(dir)}.json`);
+}
+function getEntryPath(dir) {
+  ensureRegistryReady();
+  return getEntryPathForCanonicalDir(canonicalizeDir(dir));
+}
+function listEntryFiles() {
+  ensureRegistryReady();
+  return fs.readdirSync(REGISTRY_DIR).filter((file) => file.endsWith(".json")).sort().map((file) => path.join(REGISTRY_DIR, file));
+}
+function readEntryFile(filePath) {
+  try {
+    const raw = fs.readFileSync(filePath, "utf-8");
+    const data = JSON.parse(raw);
+    if (typeof data?.dir !== "string" || typeof data?.name !== "string" || typeof data?.version !== "string" || typeof data?.port !== "number" || typeof data?.pid !== "number" && data?.pid !== null || data?.status !== "running" && data?.status !== "stopped") {
+      return null;
+    }
+    return {
+      dir: canonicalizeDir(data.dir),
+      name: data.name,
+      version: data.version,
+      port: data.port,
+      pid: data.pid,
+      status: data.status,
+      startedAt: data.startedAt,
+      stoppedAt: data.stoppedAt,
+      updatedAt: data.updatedAt
+    };
+  } catch {
+    return null;
+  }
+}
+function createTmpPath(entryPath) {
+  const suffix = `${process.pid}.${Date.now()}.${Math.random().toString(16).slice(2)}`;
+  return `${entryPath}.tmp.${suffix}`;
+}
+function writeEntryFile(entry) {
+  ensureRegistryReady();
+  const normalized = {
+    ...entry,
+    dir: canonicalizeDir(entry.dir),
+    updatedAt: entry.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString()
+  };
+  const entryPath = getEntryPathForCanonicalDir(normalized.dir);
+  const tmpPath = createTmpPath(entryPath);
+  fs.writeFileSync(tmpPath, JSON.stringify(normalized, null, 2), "utf-8");
+  fs.renameSync(tmpPath, entryPath);
+}
+function migrateLegacyRegistryIfNeeded() {
+  if (migrationChecked) {
+    return;
+  }
+  migrationChecked = true;
+  ensureRegistryDir();
+  if (!fs.existsSync(LEGACY_REGISTRY_FILE)) {
+    return;
+  }
+  if (listEntryFiles().length > 0) {
+    return;
+  }
+  try {
+    const raw = fs.readFileSync(LEGACY_REGISTRY_FILE, "utf-8");
+    const data = JSON.parse(raw);
+    const packs = Array.isArray(data?.packs) ? data.packs : [];
+    for (const pack of packs) {
+      try {
+        writeEntryFile({
+          ...pack,
+          dir: canonicalizeDir(pack.dir),
+          updatedAt: pack.updatedAt ?? pack.stoppedAt ?? pack.startedAt ?? (/* @__PURE__ */ new Date()).toISOString()
+        });
+      } catch {
+      }
+    }
+    fs.renameSync(LEGACY_REGISTRY_FILE, `${LEGACY_REGISTRY_FILE}.legacy`);
+  } catch (err) {
+    console.warn("  [Registry] Failed to migrate legacy registry.json:", err);
+  }
+}
+function ensureRegistryReady() {
+  ensureRegistryDir();
+  migrateLegacyRegistryIfNeeded();
+}
+function entriesEqual(a, b) {
+  return a.dir === b.dir && a.name === b.name && a.version === b.version && a.port === b.port && a.pid === b.pid && a.status === b.status && a.startedAt === b.startedAt && a.stoppedAt === b.stoppedAt;
+}
+function readEntry(dir) {
+  ensureRegistryReady();
+  return readEntryFile(getEntryPath(dir));
+}
+function writeEntry(entry) {
+  writeEntryFile(entry);
+}
+function deleteEntry(dir) {
+  ensureRegistryReady();
+  const entryPath = getEntryPath(dir);
+  if (fs.existsSync(entryPath)) {
+    fs.unlinkSync(entryPath);
+  }
+}
+function readRegistry() {
+  return { packs: readAll() };
+}
+function writeRegistry(data) {
+  ensureRegistryReady();
+  const nextPaths = /* @__PURE__ */ new Set();
+  for (const pack of data.packs) {
+    const normalized = {
+      ...pack,
+      dir: canonicalizeDir(pack.dir),
+      updatedAt: pack.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const entryPath = getEntryPathForCanonicalDir(normalized.dir);
+    nextPaths.add(entryPath);
+    writeEntryFile(normalized);
+  }
+  for (const existingPath of listEntryFiles()) {
+    if (!nextPaths.has(existingPath)) {
+      fs.unlinkSync(existingPath);
+    }
+  }
+}
+function register(opts) {
+  try {
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const entry = {
+      dir: canonicalizeDir(opts.dir),
+      name: opts.name,
+      version: opts.version,
+      port: opts.port,
+      pid: process.pid,
+      status: "running",
+      startedAt: now,
+      updatedAt: now
+    };
+    writeEntryFile(entry);
+    console.log(`  [Registry] Registered "${opts.name}" (pid ${process.pid})`);
+  } catch (err) {
+    console.warn("  [Registry] Failed to register:", err);
+  }
+}
+function deregister(dir, pid) {
+  try {
+    const entry = readEntry(dir);
+    if (!entry || entry.pid !== pid) {
+      return;
+    }
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    writeEntryFile({
+      ...entry,
+      pid: null,
+      status: "stopped",
+      stoppedAt: now,
+      updatedAt: now
+    });
+    console.log(`  [Registry] Deregistered "${entry.name}"`);
+  } catch (err) {
+    console.warn("  [Registry] Failed to deregister:", err);
+  }
+}
+function readAll() {
+  return listEntryFiles().map((entryPath) => readEntryFile(entryPath)).filter((entry) => entry !== null);
+}
+function isPidAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function validateEntries() {
+  const entries = readAll();
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  for (const entry of entries) {
+    if (entry.status === "running" && entry.pid !== null && !isPidAlive(entry.pid)) {
+      writeEntryFile({
+        ...entry,
+        pid: null,
+        status: "stopped",
+        stoppedAt: now,
+        updatedAt: now
+      });
+    }
+  }
+  const nextEntries = readAll();
+  if (entries.length === nextEntries.length && entries.every((entry, index) => entriesEqual(entry, nextEntries[index]))) {
+    return entries;
+  }
+  return nextEntries;
+}
+export {
+  canonicalizeDir,
+  deleteEntry,
+  deregister,
+  getEntryPath,
+  getRegistryPath,
+  isPidAlive,
+  readAll,
+  readEntry,
+  readRegistry,
+  register,
+  validateEntries,
+  writeEntry,
+  writeRegistry
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cremini/skillpack",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "description": "Pack AI Skills into Local Agents",
   "type": "module",
   "repository": {
@@ -65,4 +65,4 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }
-}
+}

package/web/index.html

@@ -39,12 +39,6 @@
         <ul id="skills-list"></ul>
       </div>
 
-      <div class="sidebar-settings-section">
-        <button id="open-settings-btn" class="settings-trigger-btn">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="btn-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-          Settings
-        </button>
-      </div>
     </aside>
 
     <main id="chat-area" class="mode-welcome">
@@ -71,59 +65,6 @@
     </main>
   </div>
 
-  <!-- Settings Dialog -->
-  <dialog id="settings-dialog" class="settings-modal">
-    <div class="settings-modal-header">
-      <h2>Settings</h2>
-      <button id="close-settings-btn" class="close-btn" aria-label="Close">
-         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-      </button>
-    </div>
-    <div class="settings-modal-body">
-      <div class="settings-sections">
-        <!-- General Section -->
-        <div class="settings-section">
-          <h3 class="section-title">General</h3>
-          <div class="form-group">
-            <label>Provider</label>
-            <div class="provider-select-wrapper">
-              <select id="provider-select">
-                <option value="openai">OpenAI</option>
-                <option value="anthropic">Anthropic</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group">
-            <label>API Key</label>
-            <input type="password" id="api-key-input" placeholder="sk-..." class="form-input" />
-          </div>
-        </div>
-
-        <!-- IM Bots Section -->
-        <div class="settings-section">
-          <h3 class="section-title">IM Bots</h3>
-          <div class="form-group">
-            <label>Telegram Bot Token</label>
-            <input type="password" id="telegram-token-input" placeholder="123456:ABC-DEF..." class="form-input" />
-          </div>
-          <div class="form-group">
-            <label>Slack Bot Token</label>
-            <input type="password" id="slack-bot-token-input" placeholder="xoxb-..." class="form-input" />
-          </div>
-          <div class="form-group">
-            <label>Slack App Token</label>
-            <input type="password" id="slack-app-token-input" placeholder="xapp-..." class="form-input" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="settings-modal-footer">
-      <p id="key-status" class="status-text"></p>
-      <button id="restart-service-btn" class="secondary-btn" hidden>Restart Service</button>
-      <button id="save-settings-btn" class="primary-btn">Save Settings</button>
-    </div>
-  </dialog>
-
   <!-- API Key Dialog -->
   <dialog id="apikey-dialog" class="settings-modal compact-modal">
     <div class="settings-modal-header">
@@ -140,12 +81,38 @@
             <select id="apikey-provider-select">
               <option value="openai">OpenAI</option>
               <option value="anthropic">Anthropic</option>
+              <option value="google">Google (Gemini)</option>
+              <option value="openai-codex">OpenAI Codex</option>
             </select>
           </div>
         </div>
-        <div class="form-group">
-          <label>API Key</label>
-          <input type="password" id="apikey-input" placeholder="sk-..." class="form-input" />
+        <!-- API Key Section -->
+        <div id="apikey-apikey-section">
+          <div class="form-group">
+            <label>API Key</label>
+            <input type="password" id="apikey-input" placeholder="sk-..." class="form-input" />
+          </div>
+          <div class="form-group" id="apikey-baseurl-group">
+            <label>Custom Base URL <span class="label-hint">(optional)</span></label>
+            <input type="text" id="apikey-baseurl-input" placeholder="https://api.example.com/v1" class="form-input" />
+          </div>
+        </div>
+
+        <!-- OAuth Section -->
+        <div id="apikey-oauth-section" style="display: none;">
+          <div class="oauth-status-card">
+            <div id="oauth-status-indicator" class="oauth-disconnected">
+              <span class="oauth-status-dot"></span>
+              <span id="oauth-status-text">Not Connected</span>
+            </div>
+            <p class="oauth-hint">Login with your ChatGPT account to use Codex subscription.</p>
+          </div>
+          <button id="oauth-login-btn" class="primary-btn oauth-btn">
+            Login with ChatGPT
+          </button>
+          <button id="oauth-logout-btn" class="secondary-btn oauth-btn" style="display: none;">
+            Logout
+          </button>
         </div>
       </div>
     </div>

package/web/js/api-key-dialog.js

@@ -1,8 +1,7 @@
 /**
  * API Key Dialog Module
  * 
- * 负责 Model API Key 的配置管理。
- * 独立的 Dialog，从原 SettingDialog 的 API Key 部分拆分出来。
+ * 负责 Model 认证配置管理。支持 API Key 模式和 OAuth 模式切换。
  */
 import { state } from "./config.js";
 import { saveConfigData, restartRuntime } from "./api.js";
@@ -15,6 +14,14 @@ let saveBtn;
 let restartBtn;
 let providerSelect;
 let apiKeyInput;
+let baseUrlInput;
+let baseUrlGroup;
+let apikeySection;
+let oauthSection;
+let oauthLoginBtn;
+let oauthLogoutBtn;
+let oauthStatusIndicator;
+let oauthStatusText;
 let statusEl;
 
 // --- Public API ---
@@ -27,6 +34,14 @@ export function initApiKeyDialog() {
   restartBtn = document.getElementById("restart-apikey-btn");
   providerSelect = document.getElementById("apikey-provider-select");
   apiKeyInput = document.getElementById("apikey-input");
+  baseUrlInput = document.getElementById("apikey-baseurl-input");
+  baseUrlGroup = document.getElementById("apikey-baseurl-group");
+  apikeySection = document.getElementById("apikey-apikey-section");
+  oauthSection = document.getElementById("apikey-oauth-section");
+  oauthLoginBtn = document.getElementById("oauth-login-btn");
+  oauthLogoutBtn = document.getElementById("oauth-logout-btn");
+  oauthStatusIndicator = document.getElementById("oauth-status-indicator");
+  oauthStatusText = document.getElementById("oauth-status-text");
   statusEl = document.getElementById("apikey-status");
 
   if (!dialog) return;
@@ -44,7 +59,13 @@ export function initApiKeyDialog() {
     restartBtn.addEventListener("click", handleRestart);
   }
   if (providerSelect) {
-    providerSelect.addEventListener("change", updatePlaceholder);
+    providerSelect.addEventListener("change", updateProviderUI);
+  }
+  if (oauthLoginBtn) {
+    oauthLoginBtn.addEventListener("click", handleOAuthLogin);
+  }
+  if (oauthLogoutBtn) {
+    oauthLogoutBtn.addEventListener("click", handleOAuthLogout);
   }
 }
 
@@ -54,12 +75,19 @@ export function initApiKeyDialog() {
 export function updateApiKeyButton() {
   if (!openBtn) return;
   const config = state.config;
-  if (config && config.hasApiKey) {
+  const currentProvider = config?.provider || "openai";
+  const meta = config?.supportedProviders?.[currentProvider];
+  
+  const connected = meta?.authType === "oauth" 
+    ? config?.oauthConnected 
+    : config?.hasApiKey;
+
+  if (connected) {
     openBtn.classList.add("connected");
-    openBtn.querySelector(".action-btn-label").textContent = "API Key Configured";
+    openBtn.querySelector(".action-btn-label").textContent = "Model Configured";
   } else {
     openBtn.classList.remove("connected");
-    openBtn.querySelector(".action-btn-label").textContent = "Provide Model API Key";
+    openBtn.querySelector(".action-btn-label").textContent = "Provide Model Auth";
   }
 }
 
@@ -83,10 +111,11 @@ function populateForm() {
   if (config.provider && providerSelect) {
     providerSelect.value = config.provider;
   }
-  updatePlaceholder();
+  updateProviderUI();
 
   setStatus("", "");
 
+  // API Key & BaseURL
   if (config.hasApiKey && config.apiKey) {
     apiKeyInput.value = config.apiKey;
   } else if (config.hasApiKey) {
@@ -94,27 +123,64 @@ function populateForm() {
   } else {
     apiKeyInput.value = "";
   }
+  if (baseUrlInput) {
+    baseUrlInput.value = config.baseUrl || "";
+  }
+
+  // OAuth Status
+  if (config.oauthConnected) {
+    updateOAuthUI(true);
+  } else {
+    updateOAuthUI(false);
+  }
 }
 
-function updatePlaceholder() {
-  if (!providerSelect || !apiKeyInput) return;
+function updateProviderUI() {
+  if (!providerSelect) return;
   const p = providerSelect.value;
-  if (p === "openai") apiKeyInput.placeholder = "sk-proj-...";
-  else if (p === "anthropic") apiKeyInput.placeholder = "sk-ant-api03-...";
-  else apiKeyInput.placeholder = "sk-...";
+  const meta = state.config?.supportedProviders?.[p];
+  
+  if (!meta) return;
+
+  if (meta.authType === "oauth") {
+    // Show OAuth section, hide API Key section
+    if (apikeySection) apikeySection.style.display = "none";
+    if (oauthSection) oauthSection.style.display = "";
+    if (saveBtn) saveBtn.style.display = "none";
+    checkOAuthStatus();
+  } else {
+    // Show API Key section, hide OAuth section
+    if (apikeySection) apikeySection.style.display = "";
+    if (oauthSection) oauthSection.style.display = "none";
+    if (saveBtn) saveBtn.style.display = "";
+    
+    // Toggle BaseURL input
+    if (baseUrlGroup) {
+      baseUrlGroup.style.display = meta.supportsBaseUrl ? "" : "none";
+    }
+    
+    // Update placeholder
+    if (apiKeyInput) {
+      apiKeyInput.placeholder = meta.placeholder || "sk-...";
+    }
+  }
 }
 
 async function handleSave() {
   const key = apiKeyInput.value.trim();
   const provider = providerSelect.value;
+  const baseUrl = baseUrlInput.value.trim();
 
-  if (!key) {
-    setStatus("Please enter an API key", "error");
-    return;
-  }
+  // If OAuth is selected, we don't handle it here but it shouldn't happen as save button is hidden
+  const meta = state.config?.supportedProviders?.[provider];
+  if (meta?.authType === "oauth") return;
 
   const updates = { provider };
-  if (key !== "***************************************************" && key !== state.config.apiKey) {
+  if (baseUrl !== state.config.baseUrl) {
+    updates.baseUrl = baseUrl;
+  }
+  
+  if (key && key !== "***************************************************" && key !== state.config.apiKey) {
     updates.key = key;
   }
 
@@ -123,35 +189,21 @@ async function handleSave() {
     const res = await saveConfigData(updates);
 
     state.config.provider = res.provider;
+    state.config.baseUrl = res.baseUrl || "";
     if (updates.key) {
       state.config.hasApiKey = true;
       state.config.apiKey = updates.key;
     }
     
-    if (state.config.hasApiKey && state.config.apiKey) {
-      apiKeyInput.value = state.config.apiKey;
-    } else if (state.config.hasApiKey) {
-      apiKeyInput.value = "***************************************************";
-    } else {
-      apiKeyInput.value = "";
-    }
-    
-    state.config.runtimeControl = res.runtimeControl;
+    populateForm();
     state.restartRequired = !!res.requiresRestart;
-
     updateApiKeyButton();
 
     if (res.requiresRestart) {
-      setStatus(
-        res.runtimeControl?.canManagedRestart
-          ? "API key saved. Restart service to apply changes."
-          : "API key saved. Restart the service manually to apply changes.",
-        "warning",
-      );
-      updateRestartButton(!!res.runtimeControl?.canManagedRestart);
+      setStatus("Settings saved. Restart service to apply changes.", "warning");
+      updateRestartButton(true);
     } else {
-      setStatus("API key saved successfully", "success");
-      // 延迟关闭让用户看到成功消息
+      setStatus("Settings saved successfully", "success");
       setTimeout(() => close(), 1200);
     }
   } catch (err) {
@@ -161,6 +213,107 @@ async function handleSave() {
   }
 }
 
+async function handleOAuthLogin() {
+  const provider = providerSelect.value;
+  oauthLoginBtn.disabled = true;
+  setStatus("Starting OAuth login...", "warning");
+
+  try {
+    // Ensure provider is saved first
+    await saveConfigData({ provider });
+    
+    const res = await fetch("/api/oauth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ provider }),
+    });
+    const data = await res.json();
+
+    if (data.authUrl) {
+      window.open(data.authUrl, "_blank");
+      setStatus("Waiting for authorization in browser...", "warning");
+      pollOAuthStatus();
+    } else {
+      setStatus("OAuth process started. Check terminal for URL if browser didn't open.", "warning");
+      pollOAuthStatus();
+    }
+  } catch (err) {
+    setStatus("Login failed: " + err.message, "error");
+    oauthLoginBtn.disabled = false;
+  }
+}
+
+async function handleOAuthLogout() {
+  const provider = providerSelect.value;
+  try {
+    await fetch("/api/oauth/logout", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ provider }),
+    });
+    updateOAuthUI(false);
+    state.config.oauthConnected = false;
+    updateApiKeyButton();
+    setStatus("Logged out successfully", "success");
+  } catch (err) {
+    setStatus("Logout failed: " + err.message, "error");
+  }
+}
+
+async function checkOAuthStatus() {
+  try {
+    const res = await fetch("/api/oauth/status");
+    const { connected } = await res.json();
+    updateOAuthUI(connected);
+    state.config.oauthConnected = connected;
+    updateApiKeyButton();
+  } catch (err) {
+    console.error("Failed to check OAuth status:", err);
+  }
+}
+
+function pollOAuthStatus() {
+  const interval = setInterval(async () => {
+    const res = await fetch("/api/oauth/status");
+    const { connected } = await res.json();
+    if (connected) {
+      clearInterval(interval);
+      updateOAuthUI(true);
+      state.config.oauthConnected = true;
+      state.restartRequired = true;
+      updateApiKeyButton();
+      setStatus("Connected successfully!", "success");
+      updateRestartButton(true);
+    }
+  }, 2000);
+  
+  // Timeout after 5 minutes
+  setTimeout(() => clearInterval(interval), 300000);
+}
+
+function updateOAuthUI(connected) {
+  if (connected) {
+    if (oauthStatusIndicator) {
+      oauthStatusIndicator.classList.remove("oauth-disconnected");
+      oauthStatusIndicator.classList.add("oauth-connected");
+    }
+    if (oauthStatusText) oauthStatusText.textContent = "Connected";
+    if (oauthLoginBtn) oauthLoginBtn.style.display = "none";
+    if (oauthLogoutBtn) oauthLogoutBtn.style.display = "";
+  } else {
+    if (oauthStatusIndicator) {
+      oauthStatusIndicator.classList.add("oauth-disconnected");
+      oauthStatusIndicator.classList.remove("oauth-connected");
+    }
+    if (oauthStatusText) oauthStatusText.textContent = "Not Connected";
+    if (oauthLoginBtn) {
+      oauthLoginBtn.style.display = "";
+      oauthLoginBtn.disabled = false;
+    }
+    if (oauthLogoutBtn) oauthLogoutBtn.style.display = "none";
+  }
+}
+
 async function handleRestart() {
   if (!restartBtn) return;