openclacky 1.1.2 → 1.1.4

data/lib/clacky/web/brand.js

@@ -39,7 +39,7 @@ const Brand = (() => {
       if (data.needs_activation) {
         // 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.product_name);
+        _showActivationBanner(data.product_name, data.free_skills_count, data.paid_skills_count);
 
         // Apply logo/theme from whatever is already cached in brand.yml —
         // install.sh only writes product_name + package_name, but if a
@@ -77,7 +77,7 @@ const Brand = (() => {
   // Show a dismissible activation banner at the top of the page.
   // Clicking the banner creates a dedicated session and invokes the
   // Clicking the banner opens Settings and focuses the license key input directly.
-  function _showActivationBanner(brandName) {
+  function _showActivationBanner(brandName, freeCount, paidCount) {
     const existing = document.getElementById("brand-activation-banner");
     if (existing) return;
 
@@ -87,9 +87,19 @@ const Brand = (() => {
 
     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 free = Number(freeCount) || 0;
+    const paid = Number(paidCount) || 0;
+
+    let i18nKey;
+    if (free > 0 && paid > 0)       i18nKey = "brand.banner.freePromptBoth";
+    else if (free > 0 && paid === 0) i18nKey = "brand.banner.freePromptOnlyFree";
+    else if (free === 0 && paid > 0) i18nKey = "brand.banner.freePromptOnlyPaid";
+    else                             i18nKey = "brand.banner.prompt";
+
+    const vars = { name, free, paid, freePlural: free === 1 ? "" : "s", paidPlural: paid === 1 ? "" : "s" };
+    span.textContent = I18n.t(i18nKey, vars);
+    span.setAttribute("data-i18n", i18nKey);
+    span.setAttribute("data-i18n-vars", `name=${name};free=${free};paid=${paid};freePlural=${vars.freePlural};paidPlural=${vars.paidPlural}`);
 
     const link = document.createElement("button");
     link.className   = "brand-activation-banner-link";
@@ -97,6 +107,11 @@ const Brand = (() => {
     link.setAttribute("data-i18n", "brand.banner.action");
     link.addEventListener("click", () => _goToLicenseInput());
 
+    // Hide the "Activate Now" button when there is nothing premium to unlock.
+    if (paid === 0 && free > 0) {
+      link.style.display = "none";
+    }
+
     const closeBtn = document.createElement("button");
     closeBtn.className = "brand-activation-banner-close";
     closeBtn.innerHTML = "✕";

data/lib/clacky/web/i18n.js

@@ -78,6 +78,14 @@ const I18n = (() => {
       "sib.dir.changePrompt":    "Change working directory:",
       "sib.model.tooltip":       "Click to switch model",
       "sib.signal.tooltip":      "Recent LLM latency",
+      "sib.reasoning.tooltip":   "Click to change reasoning effort",
+      "sib.reasoning.label":     "Reasoning",
+      "sib.reasoning.heading":   "Reasoning effort",
+      "sib.reasoning.hint":      "Higher effort = deeper thinking, slower response.",
+      "sib.reasoning.off":       "Default",
+      "sib.reasoning.low":       "Low",
+      "sib.reasoning.medium":    "Medium",
+      "sib.reasoning.high":      "High",
       "sessions.thinking":      "Thinking…",
       "sessions.default_name":  "Session {{n}}",
       "sessions.badge.cron":    "Auto",
@@ -330,6 +338,10 @@ const I18n = (() => {
       "skills.brand.btn.use":       "Use",
       "skills.brand.private":       "Private",
       "skills.brand.privateTip":    "Private — licensed to your organization",
+      "skills.brand.free":          "Free",
+      "skills.brand.freeTip":       "Free — no serial number required",
+      "skills.brand.lockedTip":     "Activate your license to unlock this premium skill.",
+      "skills.brand.paidHint":      "{{n}} more premium skill(s) available — activate your license to unlock.",
       "skills.brand.installFailed": "Install failed: ",
       "skills.brand.unknownError":  "unknown error",
       "skills.brand.networkError":  "Network error during install.",
@@ -481,6 +493,11 @@ const I18n = (() => {
       "settings.lang.en":                  "English",
       "settings.lang.zh":                  "中文",
 
+      "settings.fontSize.title":           "Font Size",
+      "settings.fontSize.small":           "Small",
+      "settings.fontSize.medium":          "Medium",
+      "settings.fontSize.large":           "Large",
+
       // ── Onboard ──
       "onboard.title":              "Welcome to {{brand}}",
       "onboard.subtitle":           "Let's get you set up in a minute.",
@@ -526,6 +543,10 @@ const I18n = (() => {
       "brand.banner.defaultName": "Your license",
       "brand.banner.action":      "Activate Now",
       "brand.banner.sessionName": "License Activation",
+      "brand.banner.freePromptZero":      "Welcome to {{name}} — {{paid}} premium skill{{paidPlural}} can be unlocked with a serial number.",
+      "brand.banner.freePromptOnlyFree":  "Welcome to {{name}} — {{free}} free skill{{freePlural}} ready to use.",
+      "brand.banner.freePromptOnlyPaid":  "Welcome to {{name}} — {{paid}} premium skill{{paidPlural}} can be unlocked with a serial number.",
+      "brand.banner.freePromptBoth":      "Welcome to {{name}} — {{free}} free skill{{freePlural}} ready to use, plus {{paid}} premium skill{{paidPlural}} unlockable with a serial number.",
 
       "header.owner.tooltip":     "Creator — click to open Creator Hub",
 
@@ -604,6 +625,14 @@ const I18n = (() => {
       "sib.dir.changePrompt":    "切换工作目录：",
       "sib.model.tooltip":       "点击切换模型",
       "sib.signal.tooltip":      "最近一次 LLM 响应延迟",
+      "sib.reasoning.tooltip":   "点击调整思考等级",
+      "sib.reasoning.label":     "思考",
+      "sib.reasoning.heading":   "思考等级",
+      "sib.reasoning.hint":      "等级越高，思考越深，响应越慢。",
+      "sib.reasoning.off":       "默认",
+      "sib.reasoning.low":       "低",
+      "sib.reasoning.medium":    "中",
+      "sib.reasoning.high":      "高",
       "sessions.thinking":      "思考中…",
       "sessions.default_name":  "对话 {{n}}",
       "sessions.badge.cron":    "定时",
@@ -853,6 +882,10 @@ const I18n = (() => {
       "skills.brand.btn.use":       "使用",
       "skills.brand.private":       "私有",
       "skills.brand.privateTip":    "私有 — 仅授权给您的组织",
+      "skills.brand.free":          "免费",
+      "skills.brand.freeTip":       "免费 — 无需序列号即可使用",
+      "skills.brand.lockedTip":     "激活授权后可解锁该增值技能。",
+      "skills.brand.paidHint":      "还有 {{n}} 个增值技能 — 激活序列号后即可解锁。",
       "skills.brand.installFailed": "安装失败：",
       "skills.brand.unknownError":  "未知错误",
       "skills.brand.networkError":  "安装时网络错误。",
@@ -1004,6 +1037,11 @@ const I18n = (() => {
       "settings.lang.en":                  "English",
       "settings.lang.zh":                  "中文",
 
+      "settings.fontSize.title":           "字体大小",
+      "settings.fontSize.small":           "小",
+      "settings.fontSize.medium":          "中",
+      "settings.fontSize.large":           "大",
+
       // ── Onboard ──
       "onboard.title":              "欢迎使用 {{brand}}",
       "onboard.subtitle":           "一分钟完成配置，马上开始。",
@@ -1049,6 +1087,10 @@ const I18n = (() => {
       "brand.banner.defaultName": "您的授权",
       "brand.banner.action":      "立即激活",
       "brand.banner.sessionName": "激活授权",
+      "brand.banner.freePromptZero":      "欢迎使用 {{name}} — 还有 {{paid}} 个增值技能，输入序列号后即可解锁。",
+      "brand.banner.freePromptOnlyFree":  "欢迎使用 {{name}} — 已自动安装 {{free}} 个免费技能，现可直接使用。",
+      "brand.banner.freePromptOnlyPaid":  "欢迎使用 {{name}} — 还有 {{paid}} 个增值技能，输入序列号后即可解锁。",
+      "brand.banner.freePromptBoth":      "欢迎使用 {{name}} — 已自动安装 {{free}} 个免费技能，还有 {{paid}} 个增值技能可输入序列号解锁。",
 
       "header.owner.tooltip":     "创作者 — 点击进入创作者中心",
 

data/lib/clacky/web/index.html

@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" id="html-root">
+<html lang="en" id="html-root" data-font-size="medium">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title id="page-title">{{BRAND_NAME}}</title>
   <link rel="icon" type="image/svg+xml" href="/icon.svg">
   <link rel="stylesheet" href="/vendor/katex/katex.min.css">
+  <link rel="stylesheet" href="/vendor/hljs/hljs-theme.css">
   <link rel="stylesheet" href="/app.css">
   <script>
     // Inline theme init — must run before CSS renders to prevent flash of wrong theme.
@@ -308,6 +309,11 @@
           <div id="sib-model-dropdown" class="sib-model-dropdown" style="display:none"></div>
         </span>
         <span class="sib-sep sib-sep-after-model">│</span>
+        <span id="sib-reasoning-wrap">
+          <span id="sib-reasoning" class="sib-reasoning-clickable" data-i18n-title="sib.reasoning.tooltip" title="Click to change reasoning effort"></span>
+          <div id="sib-reasoning-dropdown" class="sib-reasoning-dropdown" style="display:none" role="menu"></div>
+        </span>
+        <span class="sib-sep sib-sep-after-reasoning">│</span>
         <!-- Latency signal: 4-bar signal + TTFT number. Hidden until the first LLM
              call completes (see updateInfoBar / Sessions.renderSignalBars). Click
              opens a mini benchmark panel (see Step 3/4 — not yet implemented). -->
@@ -380,7 +386,7 @@
             <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
           </svg>
           <span data-i18n="creator.promo.text">Publish your skills &amp; build your own brand on OpenClacky.</span>
-          <a href="https://www.openclacky.com" target="_blank" data-i18n="creator.promo.link">Learn more →</a>
+          <a href="https://www.openclacky.com/creators" target="_blank" data-i18n="creator.promo.link">Learn more →</a>
         </div>
 
         <!-- Section 1: Cloud skills (published) -->
@@ -700,6 +706,18 @@
           </div>
         </section>
 
+        <!-- Font Size section -->
+        <section class="settings-section" id="font-size-section">
+          <div class="settings-section-title">
+            <span data-i18n="settings.fontSize.title">Font Size</span>
+          </div>
+          <div class="settings-lang-btns">
+            <button id="settings-btn-font-small" class="settings-lang-btn" data-font="small" data-i18n="settings.fontSize.small">小</button>
+            <button id="settings-btn-font-medium" class="settings-lang-btn" data-font="medium" data-i18n="settings.fontSize.medium">中</button>
+            <button id="settings-btn-font-large" class="settings-lang-btn" data-font="large" data-i18n="settings.fontSize.large">大</button>
+          </div>
+        </section>
+
         <!-- Brand & License section -->
         <section class="settings-section" id="brand-license-section">
           <div class="settings-section-title">
@@ -834,7 +852,7 @@
       <div class="setup-field">
         <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">
+          <div class="custom-select-trigger" tabindex="0">
             <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>
@@ -872,7 +890,7 @@
       <div class="setup-field">
         <label class="setup-label">
           <span data-i18n="onboard.key.apikey">API Key</span>
-          <a id="setup-get-apikey-link" href="#" target="_blank" rel="noopener" style="display:none;margin-left:8px;font-size:12px;color:var(--accent,#6366f1);text-decoration:none;opacity:0.85;" data-i18n="onboard.key.getApiKey">How to get →</a>
+          <a id="setup-get-apikey-link" href="#" target="_blank" rel="noopener" style="display:none;margin-left:0.5rem;font-size:0.75rem;color:var(--accent,#6366f1);text-decoration:none;opacity:0.85;" data-i18n="onboard.key.getApiKey">How to get →</a>
         </label>
         <div class="setup-input-row">
           <input id="setup-api-key" type="password" class="setup-input" data-i18n-placeholder="settings.models.placeholder.apikey" placeholder="sk-…">
@@ -885,9 +903,9 @@
         </div>
       </div>
 
-      <div class="setup-docs-hint" style="font-size:12px;margin-top:2px;text-align:left;">
+      <div class="setup-docs-hint" style="font-size:0.75rem;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>
+        <a id="setup-docs-link" href="https://www.openclacky.com/docs/ai-key-guide" target="_blank" rel="noopener" style="margin-left:0.25rem;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>
@@ -965,7 +983,7 @@
 <!-- Prompt modal for text input -->
 <div id="prompt-modal-overlay" class="modal-overlay" style="display:none">
   <div class="modal-box sm">
-    <div id="prompt-modal-message" style="font-size:14px;line-height:1.6;margin-bottom:12px"></div>
+    <div id="prompt-modal-message" style="font-size:0.875rem;line-height:1.6;margin-bottom:0.75rem"></div>
     <input type="text" id="prompt-modal-input" class="prompt-modal-input" autocomplete="off" spellcheck="false">
     <div class="modal-actions">
       <button id="prompt-modal-cancel" class="btn-secondary" data-i18n="modal.cancel">Cancel</button>
@@ -997,6 +1015,7 @@
 
 
 <script src="/marked.min.js"></script>
+<script src="/vendor/hljs/highlight.min.js"></script>
 <script src="/vendor/katex/katex.min.js"></script>
 <script src="/vendor/katex/auto-render.min.js"></script>
 <script src="/i18n.js"></script>

data/lib/clacky/web/onboard.js

@@ -86,6 +86,12 @@ const Onboard = (() => {
       _showSetupStep("key");
       await _loadProviders();
       _bindKeyStep();
+      // Nudge: focus the provider trigger so the user knows step 1 is "pick
+      // a provider". `tabindex="0"` on the trigger makes it focusable; the
+      // .open class is NOT toggled, so the dropdown stays closed — we just
+      // get the accent-color border via `.custom-select-trigger:focus`.
+      const trigger = $("setup-provider-wrapper")?.querySelector(".custom-select-trigger");
+      if (trigger) trigger.focus({ preventScroll: true });
     });
   }
 

data/lib/clacky/web/sessions.js

@@ -103,6 +103,29 @@ const Sessions = (() => {
         const titleAttr = title ? ` title="${title}"` : "";
         return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
       };
+      // Override code block rendering: apply syntax highlighting + header with
+      // language label and copy button.
+      renderer.code = function({ text: code, lang }) {
+        const language = (lang || "").split(/\s+/)[0]; // strip extra info after lang
+        const highlighted = _highlightCode(code, language);
+        const displayLang = language || "text";
+        return (
+          `<div class="code-block">` +
+            `<div class="code-block-header">` +
+              `<span class="code-block-lang">${escapeHtml(displayLang)}</span>` +
+              `<button type="button" class="code-block-copy" aria-label="${I18n.t("chat.copy")}" title="${I18n.t("chat.copy")}">` +
+                `<svg class="code-copy-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+                  `<path fill="currentColor" d="M10 1H4a2 2 0 0 0-2 2v8h1.5V3a.5.5 0 0 1 .5-.5h6V1zm3 3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm.5 10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v8z"/>` +
+                `</svg>` +
+                `<svg class="code-copy-icon-check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
+                  `<path fill="currentColor" d="M13.5 3.5 6 11 2.5 7.5 1 9l5 5 9-9z"/>` +
+                `</svg>` +
+              `</button>` +
+            `</div>` +
+            `<pre><code class="hljs${language ? ` language-${escapeHtml(language)}` : ""}">${highlighted}</code></pre>` +
+          `</div>`
+        );
+      };
       html = marked.parse(prepared, { breaks: true, gfm: true, renderer });
     } else {
       html = escapeHtml(prepared).replace(/\n/g, "<br>");
@@ -114,6 +137,23 @@ const Sessions = (() => {
     return html;
   }
 
+  // Apply highlight.js to a code string. Returns highlighted HTML (already escaped
+  // by hljs). Falls back to plain escaped text if hljs is unavailable.
+  function _highlightCode(code, language) {
+    if (typeof hljs === "undefined") return escapeHtml(code);
+    if (language && hljs.getLanguage(language)) {
+      try {
+        return hljs.highlight(code, { language, ignoreIllegals: true }).value;
+      } catch (_) { /* fall through */ }
+    }
+    // Auto-detect when no language specified or language not recognized
+    try {
+      return hljs.highlightAuto(code).value;
+    } catch (_) {
+      return escapeHtml(code);
+    }
+  }
+
   // Pull $$...$$, \[...\], $...$, \(...\) out of `text` and replace each with a
   // sentinel placeholder so marked won't mangle the LaTeX source. The matched
   // segments are pushed (with display flag) onto `out` for later KaTeX rendering.
@@ -1414,13 +1454,27 @@ const Sessions = (() => {
   }
 
   // Install the click-delegation listener on #messages exactly once.
-  // Handles copy clicks for all current AND future assistant bubbles.
+  // Handles copy clicks for all current AND future assistant bubbles
+  // AND code block copy buttons.
   let _copyDelegationInstalled = false;
   function _ensureCopyDelegation() {
     if (_copyDelegationInstalled) return;
     const messages = $("messages");
     if (!messages) return;
     messages.addEventListener("click", (e) => {
+      // ── Code block copy button ──
+      const codeBtn = e.target.closest(".code-block-copy");
+      if (codeBtn) {
+        e.preventDefault();
+        e.stopPropagation();
+        const block = codeBtn.closest(".code-block");
+        if (!block) return;
+        const codeEl = block.querySelector("pre code");
+        if (!codeEl) return;
+        _copyTextAndFlash(codeBtn, codeEl.textContent || "");
+        return;
+      }
+      // ── Message-level copy button ──
       const btn = e.target.closest(".msg-copy-btn");
       if (!btn) return;
       e.preventDefault();
@@ -1605,8 +1659,10 @@ const Sessions = (() => {
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
       // Browsers block file:// navigation from http:// pages. Intercept clicks on
-      // file:// links and delegate to the backend API (OS default handler).
-      document.addEventListener("click", (e) => {
+      // file:// links and delegate to the backend API.
+      // Local deployments (localhost / 127.0.0.1 / ::1): open the file with the
+      // OS default handler.  Remote deployments: download the file.
+      document.addEventListener("click", async (e) => {
         const link = e.target.closest("a[href^='file://']");
         if (!link) return;
         e.preventDefault();
@@ -1614,11 +1670,32 @@ const Sessions = (() => {
         // file:///C:/foo → /C:/foo after replace; strip the leading slash for Windows drive letters
         if (/^\/[A-Za-z]:/.test(filePath)) filePath = filePath.substring(1);
         if (!filePath) return;
-        fetch("/api/open-file", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ path: filePath })
-        });
+
+        const hostname = window.location.hostname;
+        const isLocal = ["localhost", "127.0.0.1", "::1"].includes(hostname);
+        const action = isLocal ? "open" : "download";
+
+        try {
+          const resp = await fetch("/api/file-action", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ path: filePath, action })
+          });
+
+          if (action === "download" && resp.ok) {
+            const blob = await resp.blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = filePath.split("/").pop() || "download";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+          }
+        } catch (err) {
+          console.error("file-action failed:", err);
+        }
       });
     },
 
@@ -2122,7 +2199,7 @@ const Sessions = (() => {
       this._lastSession = s;
       if (!s) {
         // Hide all spans when no session
-        ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-tasks", "sib-cost"].forEach(id => {
+        ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-reasoning", "sib-tasks", "sib-cost"].forEach(id => {
           const el = $(id); if (el) el.textContent = "";
         });
         const sibIdEl = $("sib-id");
@@ -2184,6 +2261,18 @@ const Sessions = (() => {
       }
       if (sibModelWrap) sibModelWrap.style.display = s.model ? "" : "none";
 
+      const sibReasoning = $("sib-reasoning");
+      const sibReasoningWrap = $("sib-reasoning-wrap");
+      const sibSepAfterReasoning = document.querySelector(".sib-sep-after-reasoning");
+      if (sibReasoning) {
+        const eff = (s.reasoning_effort || "off").toLowerCase();
+        sibReasoning.textContent = I18n.t(`sib.reasoning.${eff}`);
+        sibReasoning.dataset.sessionId = s.id;
+        sibReasoning.dataset.reasoningEffort = eff;
+      }
+      if (sibReasoningWrap) sibReasoningWrap.style.display = "";
+      if (sibSepAfterReasoning) sibSepAfterReasoning.style.display = "";
+
       // Latency signal — read from s.latest_latency (populated by:
       //   - HTTP /api/sessions → session_registry#list (from agent.latest_latency)
       //   - WS session_update events patched by app.js
@@ -3097,7 +3186,7 @@ const Sessions = (() => {
       console.log("[Model Switcher] Models count:", models.length);
 
       if (models.length === 0) {
-        dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-text-secondary);font-size:11px;">No models configured</div>';
+        dropdown.innerHTML = '<div style="padding:0.75rem;text-align:center;color:var(--color-text-secondary);font-size:0.6875rem;">No models configured</div>';
         return;
       }
 
@@ -3167,7 +3256,7 @@ const Sessions = (() => {
       console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
     } catch (e) {
       console.error("Failed to load models:", e);
-      dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-error);font-size:11px;">Error loading models</div>';
+      dropdown.innerHTML = '<div style="padding:0.75rem;text-align:center;color:var(--color-error);font-size:0.6875rem;">Error loading models</div>';
     }
   }
 
@@ -3491,6 +3580,100 @@ const Sessions = (() => {
 
 })();
 
+// ── Session Info Bar Reasoning Effort Switcher ────────────────────────────
+(function() {
+  let _isOpen = false;
+  const LEVELS = ["off", "low", "medium", "high"];
+
+  document.addEventListener("click", async (e) => {
+    const el = e.target.closest("#sib-reasoning");
+    if (el) {
+      e.stopPropagation();
+      const dropdown = $("sib-reasoning-dropdown");
+      if (!dropdown) return;
+
+      if (_isOpen) {
+        dropdown.style.display = "none";
+        _isOpen = false;
+        return;
+      }
+
+      _populate(dropdown, el.dataset.sessionId, el.dataset.reasoningEffort || "off");
+
+      const rect = el.getBoundingClientRect();
+      dropdown.style.left = `${rect.left + rect.width / 2}px`;
+      dropdown.style.top = `${rect.top - 6}px`;
+      dropdown.style.transform = "translate(-50%, -100%)";
+      dropdown.style.display = "block";
+      _isOpen = true;
+      return;
+    }
+
+    if (_isOpen && !e.target.closest("#sib-reasoning-dropdown")) {
+      const dropdown = $("sib-reasoning-dropdown");
+      if (dropdown) dropdown.style.display = "none";
+      _isOpen = false;
+    }
+  });
+
+  function _populate(dropdown, sessionId, current) {
+    dropdown.innerHTML = "";
+
+    const header = document.createElement("div");
+    header.className = "sib-reasoning-header";
+    const heading = document.createElement("div");
+    heading.className = "sib-reasoning-heading";
+    heading.textContent = I18n.t("sib.reasoning.heading");
+    const hint = document.createElement("div");
+    hint.className = "sib-reasoning-hint";
+    hint.textContent = I18n.t("sib.reasoning.hint");
+    header.appendChild(heading);
+    header.appendChild(hint);
+    dropdown.appendChild(header);
+
+    LEVELS.forEach(level => {
+      const opt = document.createElement("div");
+      opt.className = "sib-reasoning-option";
+      if (level === current) opt.classList.add("current");
+
+      const label = document.createElement("span");
+      label.className = "sib-reasoning-name";
+      label.textContent = I18n.t(`sib.reasoning.${level}`);
+      opt.appendChild(label);
+
+      opt.addEventListener("click", () => _switch(sessionId, level));
+      dropdown.appendChild(opt);
+    });
+  }
+
+  async function _switch(sessionId, level) {
+    const dropdown = $("sib-reasoning-dropdown");
+    if (dropdown) {
+      dropdown.style.display = "none";
+      _isOpen = false;
+    }
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/reasoning_effort`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ reasoning_effort: level })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Unknown error");
+
+      const el = $("sib-reasoning");
+      if (el) {
+        el.textContent = I18n.t(`sib.reasoning.${level}`);
+        el.dataset.reasoningEffort = level;
+      }
+    } catch (e) {
+      console.error("Failed to switch reasoning effort:", e);
+      alert("Failed to switch reasoning effort: " + e.message);
+    }
+  }
+})();
+
 document.addEventListener("langchange", () => {
   if (Sessions._lastSession) Sessions.updateInfoBar(Sessions._lastSession);
 });

data/lib/clacky/web/settings.js

@@ -81,7 +81,7 @@ const Settings = (() => {
         <label class="model-field quick-setup-field" ${(model.model || model.base_url) ? 'style="display:none"' : ''}>
           <span class="field-label">${I18n.t("settings.models.field.quicksetup")}</span>
           <div class="custom-select-wrapper" data-index="${index}">
-            <div class="custom-select-trigger">
+            <div class="custom-select-trigger" tabindex="0">
               <span class="custom-select-value placeholder">${I18n.t("settings.models.placeholder.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>
@@ -126,7 +126,7 @@ const Settings = (() => {
         <label class="model-field">
           <span class="field-label">
             ${I18n.t("settings.models.field.apikey")}
-            <a class="get-apikey-link" data-index="${index}" href="#" target="_blank" rel="noopener" style="display:none;margin-left:8px;font-size:12px;color:var(--accent,#6366f1);text-decoration:none;opacity:0.85;">${I18n.t("settings.models.field.getApiKey")}</a>
+            <a class="get-apikey-link" data-index="${index}" href="#" target="_blank" rel="noopener" style="display:none;margin-left:0.5rem;font-size:0.75rem;color:var(--accent,#6366f1);text-decoration:none;opacity:0.85;">${I18n.t("settings.models.field.getApiKey")}</a>
           </span>
           <div class="field-input-row">
             <input type="password" class="field-input api-key-input" data-key="api_key" data-index="${index}"
@@ -142,9 +142,9 @@ const Settings = (() => {
       </div>
 
       <div class="model-card-footer">
-        ${!model.api_key_masked ? `<span class="model-card-docs-link" style="font-size:12px;">
+        ${!model.api_key_masked ? `<span class="model-card-docs-link" style="font-size:0.75rem;">
           <span style="color:var(--muted,#6b7280);">${I18n.t("settings.models.field.docsGuide.question")}</span>
-          <a href="https://www.openclacky.com/docs/ai-key-guide" target="_blank" rel="noopener" style="margin-left:4px;color:var(--accent,#6366f1);text-decoration:none;">${I18n.t("settings.models.field.docsGuide.cta")}</a>
+          <a href="https://www.openclacky.com/docs/ai-key-guide" target="_blank" rel="noopener" style="margin-left:0.25rem;color:var(--accent,#6366f1);text-decoration:none;">${I18n.t("settings.models.field.docsGuide.cta")}</a>
         </span>` : ""}
         <span class="model-test-result" data-index="${index}"></span>
         <div class="model-card-actions-row">
@@ -709,10 +709,22 @@ const Settings = (() => {
           behavior: "smooth"
         });
 
-        // Put focus on the new card's first input so the user can start
-        // typing immediately.
-        const firstInput = last.querySelector("input, select, textarea");
-        if (firstInput) firstInput.focus({ preventScroll: true });
+        // Put focus on the new card so the user can start configuring.
+        // Priority order:
+        //   1. The provider `.custom-select-trigger` — nudges the user to
+        //      pick a provider first (step 1 of the 3-field form). It's a
+        //      div with tabindex="0", so it gets the accent border via
+        //      `:focus` without expanding the dropdown.
+        //   2. Fall back to the first form input (used when the quick-setup
+        //      field is hidden, e.g. on a model card that already has values).
+        const providerTrigger = last.querySelector(".custom-select-wrapper .custom-select-trigger");
+        const isVisible = el => el && el.offsetParent !== null;
+        if (isVisible(providerTrigger)) {
+          providerTrigger.focus({ preventScroll: true });
+        } else {
+          const firstInput = last.querySelector("input, select, textarea");
+          if (firstInput) firstInput.focus({ preventScroll: true });
+        }
       });
     });
   }
@@ -1048,11 +1060,11 @@ const Settings = (() => {
 
   function _initLangBtns() {
     // Highlight the active language button on open
-    document.querySelectorAll(".settings-lang-btn").forEach(btn => {
+    document.querySelectorAll("#language-section .settings-lang-btn").forEach(btn => {
       btn.classList.toggle("active", btn.dataset.lang === I18n.lang());
       btn.addEventListener("click", () => {
         I18n.setLang(btn.dataset.lang);
-        document.querySelectorAll(".settings-lang-btn").forEach(b =>
+        document.querySelectorAll("#language-section .settings-lang-btn").forEach(b =>
           b.classList.toggle("active", b.dataset.lang === I18n.lang())
         );
       });
@@ -1129,11 +1141,40 @@ const Settings = (() => {
     });
 
     _initLangBtns();
+    _initFontBtns();
 
     // Re-render model cards when language changes (dynamic HTML, not data-i18n)
     document.addEventListener("langchange", () => _renderCards());
   }
 
+  // ── Font Size ──────────────────────────────────────────────────────────
+  const FONT_STORAGE_KEY = "clacky-font-size";
+  const FONT_DEFAULT     = "medium";
+
+  function _applyFontSize(size) {
+    document.documentElement.setAttribute("data-font-size", size);
+    try { localStorage.setItem(FONT_STORAGE_KEY, size); } catch (_) {}
+    // Update active state on all font-size buttons (if settings panel is open)
+    document.querySelectorAll("#font-size-section .settings-lang-btn").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.font === size);
+    });
+  }
+
+  function _initFontBtns() {
+    // Apply saved preference (or default) on page load
+    let saved = null;
+    try { saved = localStorage.getItem(FONT_STORAGE_KEY); } catch (_) {}
+    _applyFontSize(saved || FONT_DEFAULT);
+
+    // Wire up button clicks
+    document.querySelectorAll("#font-size-section .settings-lang-btn").forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.font === (saved || FONT_DEFAULT));
+      btn.addEventListener("click", () => {
+        _applyFontSize(btn.dataset.font);
+      });
+    });
+  }
+
   // ── QR Code Lightbox ───────────────────────────────────────────────────
   // Sets up click-to-enlarge behaviour for the support QR code.
   // Safe to call multiple times — idempotent via a data attribute guard.