openclacky 1.0.4 → 1.1.0

data/lib/clacky/web/datepicker.js

@@ -0,0 +1,205 @@
+// datepicker.js — Lightweight custom calendar picker
+//
+// Usage:
+//   Any <button data-value=""> with class "datepicker-trigger" gets a calendar
+//   popup on click. When a date is selected the button's data-value is set to
+//   an ISO string (YYYY-MM-DD) and a "datepicker:change" CustomEvent bubbles up.
+//
+//   DatePicker.clear(el)  — clear value and label
+//   DatePicker.init(el)   — programmatically attach (optional; click delegation
+//                           handles all .datepicker-trigger elements automatically)
+
+const DatePicker = (() => {
+  const LOCALE = {
+    en: {
+      days:    ["Su","Mo","Tu","We","Th","Fr","Sa"],
+      months:  ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
+      title:   (y, m, months) => `${months[m]} ${y}`,
+      clear:   "Clear",
+      today:   "Today",
+      label:   (y, m, d) => `${y}/${String(m + 1).padStart(2,"0")}/${String(d).padStart(2,"0")}`,
+    },
+    zh: {
+      days:    ["日","一","二","三","四","五","六"],
+      months:  ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
+      title:   (y, m, months) => `${y}年${months[m]}`,
+      clear:   "清除",
+      today:   "今天",
+      label:   (y, m, d) => `${y}/${String(m + 1).padStart(2,"0")}/${String(d).padStart(2,"0")}`,
+    },
+  };
+
+  function _loc() {
+    const code = (typeof I18n !== "undefined") ? I18n.lang() : "en";
+    return LOCALE[code] || LOCALE.en;
+  }
+
+  function _pad(n) { return String(n).padStart(2, "0"); }
+  function _toISO(y, m, d) { return `${y}-${_pad(m + 1)}-${_pad(d)}`; }
+
+  let _popup  = null;
+  let _anchor = null;
+  let _year   = 0;
+  let _month  = 0;
+
+  function _ensurePopup() {
+    if (_popup) return;
+    _popup = document.createElement("div");
+    _popup.className = "dp-popup";
+    _popup.hidden = true;
+    document.body.appendChild(_popup);
+
+    _popup.addEventListener("click", (e) => {
+      const nav = e.target.closest(".dp-nav");
+      if (nav) {
+        e.stopPropagation();
+        _month += parseInt(nav.dataset.dir);
+        if (_month < 0)  { _month = 11; _year--; }
+        if (_month > 11) { _month = 0;  _year++; }
+        _render();
+        return;
+      }
+      const day = e.target.closest("[data-date]");
+      if (day) { _pick(day.dataset.date); return; }
+      if (e.target.closest(".dp-btn-clear")) {
+        clear(_anchor); _dispatch(); _close(); return;
+      }
+      if (e.target.closest(".dp-btn-today")) {
+        const t = new Date();
+        _pick(_toISO(t.getFullYear(), t.getMonth(), t.getDate()));
+      }
+    });
+  }
+
+  function _render() {
+    const loc     = _loc();
+    const selVal  = _anchor ? (_anchor.dataset.value || "") : "";
+    const today   = new Date();
+    const tY = today.getFullYear(), tM = today.getMonth(), tD = today.getDate();
+
+    const firstWeekday = new Date(_year, _month, 1).getDay();
+    const daysInMonth  = new Date(_year, _month + 1, 0).getDate();
+
+    let html = `<div class="dp-header">
+      <button class="dp-nav" data-dir="-12" type="button">&#8810;</button>
+      <button class="dp-nav" data-dir="-1" type="button">&#8249;</button>
+      <span class="dp-title">${loc.title(_year, _month, loc.months)}</span>
+      <button class="dp-nav" data-dir="1" type="button">&#8250;</button>
+      <button class="dp-nav" data-dir="12" type="button">&#8811;</button>
+    </div>
+    <div class="dp-grid">`;
+
+    loc.days.forEach(d => { html += `<div class="dp-dow">${d}</div>`; });
+    for (let i = 0; i < firstWeekday; i++) html += `<div></div>`;
+
+    for (let d = 1; d <= daysInMonth; d++) {
+      const iso = _toISO(_year, _month, d);
+      const cls = ["dp-day",
+        iso === selVal ? "dp-day--selected" : "",
+        (_year === tY && _month === tM && d === tD) ? "dp-day--today" : "",
+      ].filter(Boolean).join(" ");
+      html += `<button class="${cls}" data-date="${iso}" type="button">${d}</button>`;
+    }
+
+    html += `</div>
+    <div class="dp-footer">
+      <button class="dp-btn-clear" type="button">${loc.clear}</button>
+      <button class="dp-btn-today" type="button">${loc.today}</button>
+    </div>`;
+
+    _popup.innerHTML = html;
+  }
+
+  function _pick(iso) {
+    if (!_anchor) return;
+    const [y, m, d] = iso.split("-").map(Number);
+    const loc = _loc();
+    _anchor.dataset.value  = iso;
+    _anchor.textContent    = loc.label(y, m - 1, d);
+    _anchor.dataset.active = "true";
+    _anchor.removeAttribute("data-i18n");
+    _dispatch();
+    _close();
+  }
+
+  function _dispatch() {
+    if (!_anchor) return;
+    _anchor.dispatchEvent(new CustomEvent("datepicker:change", { bubbles: true }));
+  }
+
+  function _position() {
+    if (!_anchor || !_popup || _popup.hidden) return;
+    const rect = _anchor.getBoundingClientRect();
+    _popup.style.left   = rect.left + "px";
+    const spaceBelow = window.innerHeight - rect.bottom;
+    if (spaceBelow >= 290) {
+      _popup.style.top    = (rect.bottom + 4) + "px";
+      _popup.style.bottom = "auto";
+    } else {
+      _popup.style.top    = "auto";
+      _popup.style.bottom = (window.innerHeight - rect.top + 4) + "px";
+    }
+  }
+
+  function _open(anchorEl) {
+    _ensurePopup();
+    _anchor = anchorEl;
+    const val = anchorEl.dataset.value;
+    if (val) {
+      const d = new Date(val + "T00:00:00");
+      _year = d.getFullYear(); _month = d.getMonth();
+    } else {
+      const now = new Date();
+      _year = now.getFullYear(); _month = now.getMonth();
+    }
+    _render();
+    _popup.hidden = false;
+    _position();
+  }
+
+  function _close() {
+    if (_popup) _popup.hidden = true;
+    _anchor = null;
+  }
+
+  // Click delegation — open on trigger, close on outside click
+  document.addEventListener("click", (e) => {
+    const trigger = e.target.closest(".datepicker-trigger");
+    if (trigger) {
+      e.stopPropagation();
+      if (_anchor === trigger) { _close(); return; }
+      _open(trigger);
+      return;
+    }
+    if (_popup && !_popup.hidden && !e.target.closest(".dp-popup")) _close();
+  });
+
+  window.addEventListener("scroll", _position, true);
+  window.addEventListener("resize", _position);
+
+  // Re-render popup label when language changes
+  document.addEventListener("langchange", () => {
+    if (_popup && !_popup.hidden && _anchor) _render();
+    _refreshTriggers();
+  });
+
+  function _refreshTriggers() {
+    const loc = _loc();
+    document.querySelectorAll(".datepicker-trigger[data-value]").forEach(el => {
+      const val = el.dataset.value;
+      if (!val) return;
+      const [y, m, d] = val.split("-").map(Number);
+      el.textContent = loc.label(y, m - 1, d);
+    });
+  }
+
+  function clear(el) {
+    if (!el) return;
+    el.dataset.value  = "";
+    el.dataset.active = "false";
+    el.setAttribute("data-i18n", "sessions.search.datePlaceholder");
+    if (typeof I18n !== "undefined") el.textContent = I18n.t("sessions.search.datePlaceholder");
+  }
+
+  return { clear };
+})();

data/lib/clacky/web/i18n.js

@@ -60,7 +60,7 @@ const I18n = (() => {
 
       // ── Session list ──
       "sessions.empty":         "No sessions yet",
-      "sessions.confirmDelete": "Delete session \"{{name}}\"?\nThis cannot be undone.",
+      "sessions.confirmDelete": "Delete session {{name}}? This cannot be undone.",
       "sessions.meta":          "{{tasks}} tasks · ${{cost}}",
       "sessions.metaTasks":     "{{n}} tasks",
       "sessions.deleteTitle":   "Delete session",
@@ -92,6 +92,7 @@ const I18n = (() => {
       "sessions.search.typeChannel": "Channel",
       "sessions.search.typeCoding":  "Coding",
       "sessions.search.typeSetup":   "Setup",
+      "sessions.search.datePlaceholder": "Date",
 
       // ── Modal ──
       "modal.yes": "Yes",
@@ -130,6 +131,11 @@ const I18n = (() => {
       "upgrade.failed":            "Upgrade failed. Try again or run manually: gem update openclacky",
       "upgrade.reconnecting":      "Restarting server…",
       "upgrade.restart.success":   "✓ Restarted successfully!",
+      "upgrade.restart.timeout.title":   "Hot restart didn't complete",
+      "upgrade.restart.timeout.desc":    "The server didn't come back within 30 s. Please recover using one of the methods below:",
+      "upgrade.restart.timeout.tray":    "From the tray menu, choose “Quit” and start the app again.",
+      "upgrade.restart.timeout.cli":     "If you launched from a terminal, run: {{cmd}}",
+      "upgrade.restart.timeout.retry":   "Try Again",
       "upgrade.tooltip.upgrading":    "Upgrading — click to see progress",
       "upgrade.tooltip.new":         "v{{latest}} available — click to upgrade",
       "upgrade.tooltip.ok":          "v{{current}} (up to date)",
@@ -347,17 +353,20 @@ const I18n = (() => {
 
       // ── Channels panel ──
       "channels.title":           "Channels",
-      "channels.subtitle":        "Connect IM platforms so your users can chat with the assistant via Feishu, WeCom or Weixin",
+      "channels.subtitle":        "Connect IM platforms so your users can chat with the assistant via Feishu, WeCom, Weixin, Discord, Telegram or DingTalk",
       "channels.loading":         "Loading…",
       "channels.badge.running":         "Running",
       "channels.badge.enabled":         "Enabled",
-      "channels.badge.disabled":        "Not configured",
+      "channels.badge.disabled":        "Disabled",
       "channels.badge.notConfigured":   "Not configured",
       "channels.hint.running":          "Adapter is running and accepting messages from users",
       "channels.hint.enabled":          "⚠ Enabled but not running — the adapter may have failed to connect. Run Diagnostics to investigate.",
       "channels.hint.enabledNotRunning":"Enabled but not running — the adapter may have failed to connect. Run Diagnostics to investigate.",
       "channels.hint.idle":             "Not configured yet. Click \"Set Up with Agent\" to get started.",
       "channels.hint.notConfigured":    "Not configured yet. Click \"Set Up with Agent\" to get started.",
+      "channels.hint.disabled":         "Configured but turned off. Use the toggle to enable.",
+      "channels.toggle.on":             "Enabled — click to turn off",
+      "channels.toggle.off":            "Disabled — click to turn on",
       "channels.btn.test":        "Diagnostics",
       "channels.btn.setup":       "Set Up with Agent",
       "channels.btn.reconfig":    "Reconfigure",
@@ -368,6 +377,9 @@ const I18n = (() => {
       "channels.feishu.desc":     "Connect via Feishu open platform WebSocket long connection",
       "channels.wecom.desc":      "Connect via WeCom intelligent robot WebSocket",
       "channels.weixin.desc":     "Connect via WeChat iLink bot (QR login, HTTP long-poll)",
+      "channels.discord.desc":    "Connect via Discord bot, invite via OAuth2 authorization link",
+      "channels.telegram.desc":   "Connect via Telegram Bot API (HTTPS long-poll, token from @BotFather)",
+      "channels.dingtalk.desc":   "Connect via DingTalk Stream Mode WebSocket",
 
       // ── Settings panel ──
       "settings.title":           "Settings",
@@ -383,6 +395,8 @@ const I18n = (() => {
       "settings.models.field.baseurl":    "Base URL",
       "settings.models.field.apikey":     "API Key",
       "settings.models.field.getApiKey":  "How to get →",
+      "settings.models.field.docsGuide.question": "New to AI keys?",
+      "settings.models.field.docsGuide.cta":      "See the guide →",
       "settings.models.placeholder.provider": "— Choose provider —",
       "settings.models.placeholder.model":    "e.g. claude-sonnet-4-5",
       "settings.models.placeholder.baseurl":  "https://api.anthropic.com",
@@ -471,9 +485,16 @@ const I18n = (() => {
       "onboard.key.baseurl":        "Base URL",
       "onboard.key.apikey":         "API Key",
       "onboard.key.getApiKey":      "How to get →",
+      "onboard.key.docsGuide.question": "New to AI keys?",
+      "onboard.key.docsGuide.cta":      "See the guide →",
       "onboard.key.btn.test":       "Test & Continue →",
       "onboard.key.btn.back":       "← Back",
       "onboard.provider.custom":    "Custom",
+      "provider.recommended":        "Recommended",
+      "provider.promo.openclacky.title": "Recommended: OpenClacky",
+      "provider.promo.openclacky.1": "One key for all frontier models worldwide.",
+      "provider.promo.openclacky.2": "Switch models instantly — no extra accounts or billing setup.",
+      "provider.promo.openclacky.3": "Same pricing as official APIs, with ultra-low latency.",
       "onboard.key.testing":        "Testing…",
       "onboard.key.saving":         "Saving…",
       "onboard.soul.title":         "Personalize your assistant",
@@ -558,7 +579,7 @@ const I18n = (() => {
 
       // ── Session list ──
       "sessions.empty":         "暂无对话",
-      "sessions.confirmDelete": "删除对话「{{name}}」？\n此操作不可撤销。",
+      "sessions.confirmDelete": "删除对话 {{name}}？此操作不可撤销。",
       "sessions.meta":          "{{tasks}} 个任务 · ${{cost}}",
       "sessions.metaTasks":     "{{n}} 个任务",
       "sessions.deleteTitle":   "删除对话",
@@ -590,9 +611,7 @@ const I18n = (() => {
       "sessions.search.typeChannel": "频道",
       "sessions.search.typeCoding":  "Coding",
       "sessions.search.typeSetup":   "配置",
-
-      // ── Modal ──
-      "modal.yes": "确认",
+      "sessions.search.datePlaceholder": "日期",
       "modal.no":  "取消",
       "modal.ok": "确定",
       "modal.cancel": "取消",
@@ -628,6 +647,11 @@ const I18n = (() => {
       "upgrade.failed":            "升级失败，请重试或手动执行：gem update openclacky",
       "upgrade.reconnecting":      "服务重启中…",
       "upgrade.restart.success":   "✓ 重启成功！",
+      "upgrade.restart.timeout.title":   "热重启未完成",
+      "upgrade.restart.timeout.desc":    "服务在 30 秒内未恢复。请通过以下任一方式重启：",
+      "upgrade.restart.timeout.tray":    "在系统托盘菜单中选择「退出」，然后重新打开应用。",
+      "upgrade.restart.timeout.cli":     "如果是终端启动，请执行命令： {{cmd}}",
+      "upgrade.restart.timeout.retry":   "重试",
       "upgrade.tooltip.upgrading":    "升级中，点击查看进度",
       "upgrade.tooltip.new":         "v{{latest}} 可用，点击升级",
       "upgrade.tooltip.ok":          "v{{current}}（已是最新）",
@@ -844,18 +868,21 @@ const I18n = (() => {
 
       // ── Channels panel ──
       "channels.title":           "频道",
-      "channels.subtitle":        "连接即时通讯平台，让用户通过飞书、企业微信或微信与助手对话",
+      "channels.subtitle":        "连接即时通讯平台，让用户通过飞书、企业微信、微信、Discord、Telegram 或钉钉与助手对话",
       "channels.loading":         "加载中…",
       "channels.loadError":       "加载频道失败：{{msg}}",
       "channels.badge.running":         "运行中",
       "channels.badge.enabled":         "已启用",
-      "channels.badge.disabled":        "未配置",
+      "channels.badge.disabled":        "已关闭",
       "channels.badge.notConfigured":   "未配置",
       "channels.hint.running":          "适配器运行中，正在接受用户消息",
       "channels.hint.enabled":          "⚠ 已启用但未运行 — 适配器可能连接失败，请点击「诊断问题」排查。",
       "channels.hint.enabledNotRunning":"已启用但未运行 — 适配器可能连接失败，请点击「诊断问题」排查。",
       "channels.hint.idle":             "尚未配置。点击「用 Agent 配置」开始。",
       "channels.hint.notConfigured":    "尚未配置。点击「用 Agent 配置」开始。",
+      "channels.hint.disabled":         "已配置但已关闭，使用开关重新启用。",
+      "channels.toggle.on":             "已启用 — 点击关闭",
+      "channels.toggle.off":            "已关闭 — 点击启用",
       "channels.btn.test":        "诊断问题",
       "channels.btn.setup":       "用 Agent 配置",
       "channels.btn.reconfig":    "重新配置",
@@ -865,6 +892,9 @@ const I18n = (() => {
       "channels.feishu.desc":     "通过飞书开放平台 WebSocket 长连接接入",
       "channels.wecom.desc":      "通过企业微信智能机器人 WebSocket 接入",
       "channels.weixin.desc":     "通过微信 iLink 机器人接入（扫码登录，HTTP 长轮询）",
+      "channels.discord.desc":    "通过 Discord 机器人接入，授权链接邀请 Bot 加入服务器",
+      "channels.telegram.desc":   "通过 Telegram Bot API 接入（HTTPS 长轮询，token 来自 @BotFather）",
+      "channels.dingtalk.desc":   "通过钉钉 Stream 模式 WebSocket 接入",
 
       // ── Settings panel ──
       "settings.title":           "设置",
@@ -880,6 +910,8 @@ const I18n = (() => {
       "settings.models.field.baseurl":    "Base URL",
       "settings.models.field.apikey":     "API Key",
       "settings.models.field.getApiKey":  "如何获取 →",
+      "settings.models.field.docsGuide.question": "不会配置 AI 模型？",
+      "settings.models.field.docsGuide.cta":      "查看指南 →",
       "settings.models.placeholder.provider": "— 选择服务商 —",
       "settings.models.placeholder.model":    "如 claude-sonnet-4-5",
       "settings.models.placeholder.baseurl":  "https://api.anthropic.com",
@@ -968,9 +1000,16 @@ const I18n = (() => {
       "onboard.key.baseurl":        "Base URL",
       "onboard.key.apikey":         "API Key",
       "onboard.key.getApiKey":      "如何获取 →",
+      "onboard.key.docsGuide.question": "不会配置 AI 模型？",
+      "onboard.key.docsGuide.cta":      "查看指南 →",
       "onboard.key.btn.test":       "测试并继续 →",
       "onboard.key.btn.back":       "← 返回",
       "onboard.provider.custom":    "自定义",
+      "provider.recommended":        "推荐",
+      "provider.promo.openclacky.title": "推荐选择 OpenClacky",
+      "provider.promo.openclacky.1": "一个 Key 即可使用全球顶级模型。",
+      "provider.promo.openclacky.2": "国内网络直连，无需额外配置。",
+      "provider.promo.openclacky.3": "官方同价，秒级响应延迟。",
       "onboard.key.testing":        "测试中…",
       "onboard.key.saving":         "保存中…",
       "onboard.soul.title":         "个性化助手",

data/lib/clacky/web/index.html

@@ -110,7 +110,7 @@
                 <option value="coding"  data-i18n="sessions.search.typeCoding">Coding</option>
               </select>
               <div class="search-date-wrap">
-                <input id="session-search-date" type="date" class="search-date" />
+                <button id="session-search-date" class="search-date datepicker-trigger" type="button" data-value="" data-i18n="sessions.search.datePlaceholder"></button>
               </div>
               <button id="btn-search-clear-all" class="btn-search-clear-all" aria-label="Clear filters" hidden>✕</button>
             </div>
@@ -834,15 +834,16 @@
         <label class="setup-label" data-i18n="onboard.key.provider">Provider</label>
         <div class="custom-select-wrapper" id="setup-provider-wrapper">
           <div class="custom-select-trigger">
-            <span class="custom-select-value placeholder">— Choose provider —</span>
+            <span class="custom-select-value placeholder" data-i18n="onboard.key.provider.placeholder">— Choose provider —</span>
             <svg class="custom-select-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
             </svg>
           </div>
           <div class="custom-select-dropdown" id="setup-provider-dropdown">
-            <div class="custom-select-option" data-value="">— Choose provider —</div>
+            <div class="custom-select-option" data-value="" data-i18n="onboard.key.provider.placeholder">— Choose provider —</div>
           </div>
         </div>
+        <div id="setup-provider-promo" class="provider-promo-hint"></div>
       </div>
 
       <div class="setup-field">
@@ -883,7 +884,12 @@
         </div>
       </div>
 
-      <div id="setup-test-result" class="setup-test-result"></div>
+      <div class="setup-docs-hint" style="font-size:12px;margin-top:2px;text-align:left;">
+        <span style="color:var(--muted,#6b7280);" data-i18n="onboard.key.docsGuide.question">New to AI keys?</span>
+        <a id="setup-docs-link" href="https://www.openclacky.com/docs/ai-key-guide" target="_blank" rel="noopener" style="margin-left:4px;color:var(--accent,#6366f1);text-decoration:none;" data-i18n="onboard.key.docsGuide.cta">See the guide →</a>
+      </div>
+
+      <div id="setup-test-result" class="setup-test-result" style="min-height:0;"></div>
 
       <div class="setup-key-actions">
         <button id="setup-btn-back" class="setup-back-btn" data-i18n="onboard.key.btn.back">← Back</button>
@@ -948,10 +954,10 @@
 <!-- ── CONFIRMATION MODAL ────────────────────────────────────────────────── -->
 <div id="modal-overlay" class="modal-overlay" style="display:none">
   <div class="modal-box sm">
-    <div id="modal-message" style="font-size:14px;line-height:1.6;margin-bottom:20px;white-space:pre-wrap"></div>
+    <div id="modal-message" class="modal-confirm-message"></div>
     <div class="modal-actions">
-      <button id="modal-yes" class="btn-primary" data-i18n="modal.yes">Yes</button>
       <button id="modal-no"  class="btn-secondary" data-i18n="modal.no">No</button>
+      <button id="modal-yes" class="btn-primary" data-i18n="modal.yes">Yes</button>
     </div>
   </div>
 </div>
@@ -968,6 +974,26 @@
   </div>
 </div>
 
+<!-- Rename Session Modal -->
+<div id="rename-modal-overlay" class="modal-overlay" style="display:none">
+  <div class="modal-box sm">
+    <div class="modal-title" data-i18n="sessions.actions.rename">Rename</div>
+    <div class="modal-body">
+      <div class="modal-field">
+        <label class="modal-label" for="rename-modal-input">
+          <span data-i18n="sessions.modal.name">Name</span>
+          <span class="label-required">*</span>
+        </label>
+        <input type="text" id="rename-modal-input" class="modal-input" autocomplete="off" spellcheck="false">
+      </div>
+    </div>
+    <div class="modal-actions">
+      <button id="rename-modal-cancel" class="btn-secondary" data-i18n="modal.cancel">Cancel</button>
+      <button id="rename-modal-save" class="btn-primary" data-i18n="modal.ok">OK</button>
+    </div>
+  </div>
+</div>
+
 
 
 <script src="/marked.min.js"></script>
@@ -977,6 +1003,7 @@
 <script src="/ws.js"></script>
 <script src="/ws-dispatcher.js"></script>
 <script src="/sessions.js"></script>
+<script src="/datepicker.js"></script>
 <script src="/tasks.js"></script>
 <script src="/skills.js"></script>
 <script src="/channels.js"></script>

data/lib/clacky/web/onboard.js

@@ -126,6 +126,9 @@ const Onboard = (() => {
     _renderProviderOptions();
     // Bind event listeners only once (delegation-based, safe to skip on re-entry)
     _bindCustomDropdown();
+    // Show promo hint by default (no provider selected on initial entry)
+    const promoHint = $("setup-provider-promo");
+    if (promoHint && !promoHint.classList.contains("visible")) _showPromoHint(promoHint);
   }
 
   function _renderProviderOptions() {
@@ -133,11 +136,26 @@ const Onboard = (() => {
     // Clear any previously rendered options before re-rendering
     dropdown.innerHTML = "";
 
+    // Insert placeholder option first
+    const placeholder = document.createElement("div");
+    placeholder.className    = "custom-select-option";
+    placeholder.dataset.value = "";
+    placeholder.dataset.i18n  = "onboard.key.provider.placeholder";
+    placeholder.textContent   = I18n.t("onboard.key.provider.placeholder");
+    dropdown.appendChild(placeholder);
+
     _providers.forEach(p => {
       const opt = document.createElement("div");
       opt.className     = "custom-select-option";
       opt.dataset.value = p.id;
-      opt.textContent   = p.name;
+      opt.dataset.label = p.name;
+      if (p.id === "openclacky") {
+        const nameSpan = document.createElement("span");
+        nameSpan.textContent = p.name;
+        opt.innerHTML = nameSpan.outerHTML + ` <span class="provider-badge-recommended">${I18n.t("provider.recommended")}</span>`;
+      } else {
+        opt.textContent = p.name;
+      }
       dropdown.appendChild(opt);
     });
 
@@ -225,6 +243,18 @@ const Onboard = (() => {
     });
   }
 
+  function _showPromoHint(promoHint) {
+    const items = [
+      I18n.t("provider.promo.openclacky.1"),
+      I18n.t("provider.promo.openclacky.2"),
+      I18n.t("provider.promo.openclacky.3"),
+    ];
+    const title = `<div class="promo-title">${I18n.t("provider.promo.openclacky.title")}</div>`;
+    const body = items.map(s => `<div class="promo-item"><span class="promo-icon">✦</span>${s}</div>`).join("");
+    promoHint.innerHTML = `<div class="promo-inner">${title}${body}</div>`;
+    promoHint.classList.add("visible");
+  }
+
   function _bindCustomDropdown() {
     if (_dropdownBound) return; // listeners already attached
     _dropdownBound = true;
@@ -248,7 +278,7 @@ const Onboard = (() => {
       if (!opt) return;
 
       const value = opt.dataset.value;
-      valueSpan.textContent = opt.textContent;
+      valueSpan.textContent = opt.dataset.label || opt.textContent;
       valueSpan.classList.toggle("placeholder", !value);
       dropdown.querySelectorAll(".custom-select-option").forEach(o => o.classList.remove("selected"));
       opt.classList.add("selected");
@@ -256,6 +286,7 @@ const Onboard = (() => {
       trigger.classList.remove("open");
 
       const getApiKeyLink = $("setup-get-apikey-link");
+      const promoHint = $("setup-provider-promo");
       if (value === "__custom__") {
         // Custom: clear presets so the user can fill in their own values
         $("setup-model").value    = "";
@@ -263,6 +294,7 @@ const Onboard = (() => {
         _updateSetupModelDropdown([]);
         _updateSetupBaseUrlDropdown(null);
         if (getApiKeyLink) getApiKeyLink.style.display = "none";
+        if (promoHint) promoHint.classList.remove("visible");
       } else if (value) {
         const preset = _providers.find(p => p.id === value);
         if (preset) {
@@ -278,8 +310,18 @@ const Onboard = (() => {
             getApiKeyLink.style.display = "none";
           }
         }
-      } else if (getApiKeyLink) {
-        getApiKeyLink.style.display = "none";
+        // Show promo hint for openclacky, hide for others
+        if (promoHint) {
+          if (value === "openclacky") {
+            _showPromoHint(promoHint);
+          } else {
+            promoHint.classList.remove("visible");
+          }
+        }
+      } else {
+        if (getApiKeyLink) getApiKeyLink.style.display = "none";
+        // Show promo hint when no provider selected (default state)
+        if (promoHint) _showPromoHint(promoHint);
       }
     });