openclacky 0.9.2 → 0.9.4

data/lib/clacky/web/app.js

@@ -38,8 +38,8 @@ function escapeHtml(str) {
 // one is shown. Modules must NOT touch panel display styles directly.
 // ─────────────────────────────────────────────────────────────────────────
 const PANELS = [
+  "setup-panel",
   "onboard-panel",
-  "brand-panel",
   "welcome",
   "chat-panel",
   "task-detail-panel",
@@ -188,8 +188,13 @@ const Router = (() => {
         Sessions.renderList();
         break;
 
+      case "setup":
+        // Full-screen mandatory setup (language + API key). No hash — keep URL clean.
+        $("setup-panel").style.display = "flex";
+        break;
+
       case "onboard":
-        // No hash — keep URL clean during onboarding
+        // Kept for compatibility; setup-panel is now used for first-run setup.
         $("onboard-panel").style.display = "flex";
         break;
 
@@ -911,23 +916,33 @@ Settings.init();
 Channels.init();
 
 // Boot sequence:
-//   1. Onboard check  — first-run key setup / soul setup
-//   2. Brand check    — license activation for white-label installs
+//   1. Brand check    — shows a dismissible top banner if license activation is needed.
+//                       Never blocks boot; user can activate at any time via the banner.
+//   2. Onboard check  — first-run setup (key_setup / soul_setup)
 //   3. Normal UI boot — WS + sessions + tasks + skills
 //
-// Only "key_setup" is a hard block (nothing works without an API key).
-// "soul_setup" is soft: the onboard panel is shown but the normal UI still
-// boots so the user can access Skills, New Skill, etc. without being forced
-// to complete onboarding first. They can always re-run /onboard from Settings.
-(async () => {
-  const { needsOnboard, phase } = await Onboard.check();
+// key_setup  → hard block: shows full-screen setup-panel (language + API key).
+//              On success, setup-panel auto-launches /onboard session then boots UI.
+// soul_setup → soft: auto-launches /onboard session and boots UI immediately.
+//              No blocking panel shown.
 
+window.bootAfterBrand = async function() {
+  const { needsOnboard, phase } = await Onboard.check();
+  // key_setup blocks boot entirely; onboard.js calls _bootUI() when done.
   if (needsOnboard && phase === "key_setup") return;
 
-  const needsBrandActivation = await Brand.check();
-  if (needsBrandActivation) return;
+  // soul_setup: Onboard.check() already launched the session and called _bootUI().
+  // For any other state, boot normally here.
+  if (!needsOnboard) {
+    WS.connect();   // triggers session_list → Router.restoreFromHash()
+    Tasks.load();
+    Skills.load();
+  }
+};
 
-  WS.connect();   // triggers session_list → Router.restoreFromHash()
-  Tasks.load();
-  Skills.load();
+(async () => {
+  // Brand.check() now only shows a top banner when activation is needed;
+  // it never returns true to block boot, so we always continue to bootAfterBrand().
+  await Brand.check();
+  await window.bootAfterBrand();
 })();

data/lib/clacky/web/brand.js

@@ -31,12 +31,17 @@ const Brand = (() => {
       // so no DOM update is needed here on boot.
 
       if (data.needs_activation) {
-        _showActivationPanel(data.brand_name);
-        return true;
+        // Show a top banner instead of a blocking full-screen panel.
+        // Boot continues normally; user can activate at any time via the banner.
+        _showActivationBanner(data.brand_name);
+        return false;
       }
 
       if (data.warning) _showWarning(data.warning);
 
+      // Load full brand info to apply logo in header
+      _applyHeaderLogo();
+
       return false;
     } catch (_) {
       return false;
@@ -45,6 +50,71 @@ const Brand = (() => {
 
   // ── Internal ───────────────────────────────────────────────────────────────
 
+  // Show a dismissible activation banner at the top of the page.
+  // Clicking the banner creates a dedicated session and invokes the
+  // /activate-license skill to guide the user through activation interactively.
+  function _showActivationBanner(brandName) {
+    const existing = document.getElementById("brand-activation-banner");
+    if (existing) return;
+
+    const bar = document.createElement("div");
+    bar.id        = "brand-activation-banner";
+    bar.className = "brand-activation-banner";
+
+    const span = document.createElement("span");
+    const name = brandName || I18n.t("brand.banner.defaultName");
+    span.textContent = I18n.t("brand.banner.prompt", { name });
+    span.setAttribute("data-i18n", "brand.banner.prompt");
+    if (brandName) span.setAttribute("data-i18n-vars", `name=${brandName}`);
+
+    const link = document.createElement("button");
+    link.className   = "brand-activation-banner-link";
+    link.textContent = I18n.t("brand.banner.action");
+    link.setAttribute("data-i18n", "brand.banner.action");
+    link.addEventListener("click", () => _startActivationSession(brandName));
+
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "brand-activation-banner-close";
+    closeBtn.innerHTML = "✕";
+    closeBtn.onclick   = () => bar.remove();
+
+    bar.appendChild(span);
+    bar.appendChild(link);
+    bar.appendChild(closeBtn);
+    document.getElementById("main").prepend(bar);
+  }
+
+  // Create a dedicated session and send the /activate-license slash command
+  // to guide the user through license activation interactively.
+  async function _startActivationSession(brandName) {
+    try {
+      const lang = (typeof I18n.lang === "function" ? I18n.lang() : null) || "zh";
+      const res  = await fetch("/api/sessions", {
+        method:  "POST",
+        headers: { "Content-Type": "application/json" },
+        body:    JSON.stringify({ name: "🔑 " + I18n.t("brand.banner.sessionName") })
+      });
+      const data    = await res.json();
+      const session = data.session;
+      if (!session) throw new Error("No session returned");
+
+      const nameArg = brandName ? ` name:${brandName}` : "";
+      Sessions.add(session);
+      Sessions.renderList();
+      Sessions.setPendingMessage(session.id, `/activate-license lang:${lang}${nameArg}`);
+      Sessions.select(session.id);
+    } catch (e) {
+      // Fallback: show inline error in banner
+      const banner = document.getElementById("brand-activation-banner");
+      if (banner) {
+        const err = document.createElement("span");
+        err.style.color = "var(--color-danger)";
+        err.textContent = " " + e.message;
+        banner.appendChild(err);
+      }
+    }
+  }
+
   function _showActivationPanel(brandName) {
     if (brandName) {
       const title = $("brand-title");
@@ -94,6 +164,7 @@ const Brand = (() => {
       if (data.ok) {
         _setResult(true, I18n.t("brand.activate.success"));
         if (data.brand_name) _applyBrandName(data.brand_name);
+        _applyHeaderLogo();
         setTimeout(_bootUI, 800);
       } else {
         _setResult(false, data.error || I18n.t("settings.brand.activationFailed"));
@@ -108,6 +179,9 @@ const Brand = (() => {
   }
 
   function _skipActivation() {
+    // Show a dismissible warning so the user knows brand features are unavailable.
+    // Pass the i18n key so the bar text updates when the user switches language.
+    _showWarning(I18n.t("brand.skip.warning"), "brand.skip.warning");
     _bootUI();
   }
 
@@ -133,24 +207,82 @@ const Brand = (() => {
     });
   }
 
+  // Fetch /api/brand and apply logo_url + brand_name to the header if available.
+  function _applyHeaderLogo() {
+    fetch("/api/brand").then(r => r.json()).then(info => {
+      const logoImg   = document.getElementById("header-logo-img");
+      const logoText  = document.getElementById("header-logo");
+      const brandWrap = document.getElementById("header-brand");
+
+      const hasLogo = !!(info.logo_url && logoImg);
+
+      if (hasLogo) {
+        // Pre-load the image; only show it once loaded to avoid layout flicker
+        const img = new Image();
+        img.onload = () => {
+          logoImg.src           = info.logo_url;
+          logoImg.alt           = info.brand_name || "";
+          logoImg.style.display = "";
+          if (brandWrap) brandWrap.classList.add("has-logo");
+        };
+        img.onerror = () => {
+          // Logo failed to load — keep text-only mode
+        };
+        img.src = info.logo_url;
+      }
+
+      // Always show brand name text; hide it only when no brand name is set
+      if (logoText) {
+        const name = info.brand_name || "";
+        if (name) {
+          logoText.textContent    = name;
+          logoText.style.display  = "";
+        } else {
+          // No brand name at all — hide the text span
+          logoText.style.display = "none";
+        }
+      }
+    }).catch(() => {
+      // Silently ignore — logo is non-critical
+    });
+  }
+
   // Show a dismissible warning bar above the main content.
-  function _showWarning(message) {
+  // The i18n key is stored on the span so I18n.applyAll() can re-translate
+  // it when the user switches language without dismissing the bar.
+  function _showWarning(message, i18nKey) {
     const existing = document.getElementById("brand-warning-bar");
     if (existing) return;
 
     const bar = document.createElement("div");
     bar.id        = "brand-warning-bar";
     bar.className = "brand-warning-bar";
-    bar.innerHTML = `<span>${escapeHtml(message)}</span>
-                     <button onclick="this.parentElement.remove()">&#x2715;</button>`;
+
+    const span = document.createElement("span");
+    span.textContent = message;
+    if (i18nKey) span.setAttribute("data-i18n", i18nKey);
+
+    const btn = document.createElement("button");
+    btn.innerHTML = "&#x2715;";
+    btn.onclick = () => bar.remove();
+
+    bar.appendChild(span);
+    bar.appendChild(btn);
     document.getElementById("main").prepend(bar);
   }
 
-  // Boot the normal UI (mirrors Onboard._bootUI).
+  // Continue the boot sequence after brand check is resolved (activated or skipped).
+  // Delegates to window.bootAfterBrand() defined in app.js so the onboard check
+  // runs before WS.connect() — ensures key_setup is shown when no API key exists.
   function _bootUI() {
-    WS.connect();
-    Tasks.load();
-    Skills.load();
+    if (typeof window.bootAfterBrand === "function") {
+      window.bootAfterBrand();
+    } else {
+      // Fallback: app.js not yet loaded, boot directly
+      WS.connect();
+      Tasks.load();
+      Skills.load();
+    }
   }
 
   return { check, applyBrandName: _applyBrandName };

data/lib/clacky/web/i18n.js

@@ -192,9 +192,12 @@ const I18n = (() => {
       "settings.brand.label.brand":        "Brand",
       "settings.brand.label.status":       "Status",
       "settings.brand.label.expires":      "Expires",
+      "settings.brand.label.supportQr":    "Tech Support",
+      "settings.brand.label.qrHint":       "Scan with your phone camera",
       "settings.brand.btn.change":         "Change License Key",
       "settings.brand.badge.active":       "Active",
-      "settings.brand.badge.warning":      "Warning",
+      "settings.brand.badge.warning":      "Expiring Soon",
+      "settings.brand.badge.expired":      "Expired",
       "settings.brand.desc":               "Have a license key from a brand partner? Enter it below to activate branded mode.",
       "settings.brand.btn.activate":       "Activate",
       "settings.brand.btn.activating":     "Activating…",
@@ -219,6 +222,8 @@ const I18n = (() => {
       "onboard.key.baseurl":        "Base URL",
       "onboard.key.apikey":         "API Key",
       "onboard.key.btn.test":       "Test & Continue →",
+      "onboard.key.btn.back":       "← Back",
+      "onboard.provider.custom":    "Custom",
       "onboard.key.testing":        "Testing…",
       "onboard.key.saving":         "Saving…",
       "onboard.soul.title":         "Personalize your assistant",
@@ -236,6 +241,14 @@ const I18n = (() => {
       "brand.activate.title":    "Activate {{name}}",
       "brand.activate.subtitle": "Enter your license key to get started.",
       "brand.activate.success":  "License activated successfully!",
+      "brand.skip.warning":      "Brand license not activated — brand-exclusive skills are unavailable. You can activate your license anytime in Settings → Brand & License.",
+
+      // ── Brand activation banner ──
+      "brand.banner.prompt":      "{{name}} is not activated yet — some features are unavailable.",
+      "brand.banner.defaultName": "Your license",
+      "brand.banner.action":      "Activate Now",
+      "brand.banner.sessionName": "License Activation",
+
       "onboard.welcome":         "Welcome to {{name}}",
     },
 
@@ -419,9 +432,12 @@ const I18n = (() => {
       "settings.brand.label.brand":        "品牌",
       "settings.brand.label.status":       "状态",
       "settings.brand.label.expires":      "到期时间",
+      "settings.brand.label.supportQr":    "技术支持",
+      "settings.brand.label.qrHint":       "使用手机扫描二维码",
       "settings.brand.btn.change":         "更换授权码",
       "settings.brand.badge.active":       "已激活",
-      "settings.brand.badge.warning":      "警告",
+      "settings.brand.badge.warning":      "即将过期",
+      "settings.brand.badge.expired":      "已过期",
       "settings.brand.desc":               "有品牌合作伙伴的授权码？在下方输入以激活品牌模式。",
       "settings.brand.btn.activate":       "激活",
       "settings.brand.btn.activating":     "激活中…",
@@ -446,6 +462,8 @@ const I18n = (() => {
       "onboard.key.baseurl":        "Base URL",
       "onboard.key.apikey":         "API Key",
       "onboard.key.btn.test":       "测试并继续 →",
+      "onboard.key.btn.back":       "← 返回",
+      "onboard.provider.custom":    "自定义",
       "onboard.key.testing":        "测试中…",
       "onboard.key.saving":         "保存中…",
       "onboard.soul.title":         "个性化助手",
@@ -463,6 +481,14 @@ const I18n = (() => {
       "brand.activate.title":    "激活 {{name}}",
       "brand.activate.subtitle": "输入授权码以开始使用。",
       "brand.activate.success":  "授权激活成功！",
+      "brand.skip.warning":      "品牌授权未激活 — 品牌专属技能暂不可用。可随时在「设置 → 品牌 & 授权」中激活。",
+
+      // ── Brand activation banner ──
+      "brand.banner.prompt":      "{{name}} 尚未激活授权 — 部分功能暂不可用。",
+      "brand.banner.defaultName": "您的授权",
+      "brand.banner.action":      "立即激活",
+      "brand.banner.sessionName": "激活授权",
+
       "onboard.welcome":         "欢迎使用 {{name}}",
     }
   };