openclacky 1.3.11 → 1.4.1

data/lib/clacky/web/app.css

@@ -662,11 +662,15 @@ body {
 }
 
 /* ── New Session button ──────────────────────────────────────────────────── */
+.btn-split-wrap {
+  display: flex;
+  align-items: stretch;
+}
 .btn-split-main {
   height: 1.5rem;
-  padding: 0 0.625rem;
+  padding: 0 0.6rem;
   border: none;
-  border-radius: 6px;
+  border-radius: 6px 0 0 6px;
   background: var(--color-accent-primary);
   color: #fff;
   font-size: 0.75rem;
@@ -674,12 +678,85 @@ body {
   white-space: nowrap;
   line-height: 1;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
   transition: background 0.15s, box-shadow 0.15s;
 }
 .btn-split-main:hover {
   background: var(--color-button-primary-hover);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
+.btn-split-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.375rem;
+  padding: 0;
+  border: none;
+  border-left: 1px solid rgba(255,255,255,0.2);
+  border-radius: 0 6px 6px 0;
+  background: var(--color-accent-primary);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+  flex-shrink: 0;
+}
+.btn-split-arrow:hover {
+  background: var(--color-button-primary-hover);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+.btn-split-dropdown {
+  position: relative;
+  display: flex;
+}
+.btn-split-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 9rem;
+  background: var(--color-bg-elevated, var(--color-bg-secondary));
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 0.25rem;
+  z-index: 200;
+  white-space: nowrap;
+}
+/* Bridge the 4px gap so hover doesn't break when moving to the menu */
+.btn-split-menu::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+.btn-split-dropdown:hover .btn-split-menu {
+  display: block;
+}
+.btn-split-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.btn-split-menu-item:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
 
 /* ── Session source badge ────────────────────────────────────────────────── */
 /* Design: compact neutral chips — the visual weight is carried by the
@@ -782,7 +859,7 @@ body {
   color: var(--color-accent-primary);
 }
 
-/* ── Command-palette search overlay (⌘K) ─────────────────────────────────── */
+/* ── Command-palette search overlay ──────────────────────────────────────── */
 .cmd-palette-overlay {
   position: fixed;
   inset: 0;
@@ -6484,6 +6561,28 @@ body {
   overflow-y: auto;
 }
 
+/* ── Skills search ──────────────────────────────────────────────────────── */
+.skills-search {
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  width: 12rem;
+}
+.skills-search::placeholder { color: var(--color-text-tertiary); }
+.skills-search:focus {
+  outline: none;
+  border-color: var(--color-accent, #6366f1);
+}
+.skills-search-empty {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--color-text-tertiary);
+  font-size: 0.875rem;
+}
+
 /* ── My Skills upload area (user-licensed only) ───────────────────────────── */
 .my-skills-upload-area {
   display: flex;
@@ -7171,7 +7270,7 @@ body {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
-  padding: 0.875rem 1rem;
+  padding: 0.6rem 1rem;
   transition: border-color .15s;
 }
 .extension-card:hover { border-color: var(--color-text-muted); }
@@ -7184,13 +7283,25 @@ body {
   font-size: 1.5rem;
   line-height: 1.4;
   flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.extension-default-icon {
+  width: 2rem;
+  height: 100%;
+  display: block;
+  border-radius: 7px;
+}
+.extension-emoji-lg .extension-default-icon {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 10px;
 }
-.extension-info { flex: 1; min-width: 0; }
+.extension-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
 .extension-title {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.25rem;
   flex-wrap: wrap;
 }
 .extension-name {
@@ -7203,7 +7314,6 @@ body {
   color: var(--color-text-secondary);
   background: var(--color-bg-tertiary, rgba(255,255,255,0.05));
   border-radius: 4px;
-  padding: 0.0625rem 0.375rem;
 }
 .extension-units {
   font-size: 0.6875rem;
@@ -7234,11 +7344,10 @@ body {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
   line-height: 1.5;
-  margin-bottom: 0.375rem;
 }
 .extension-desc-detail {
   font-size: 0.8125rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
 }
 .extension-detail-author {
   font-size: 0.6875rem;
@@ -7300,8 +7409,13 @@ body {
   padding-bottom: 1.25rem;
   border-bottom: 1px solid var(--color-border-primary);
 }
-.extension-detail-heading { flex: 1; min-width: 0; }
+.extension-detail-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
 .extension-emoji-lg { font-size: 2.5rem; line-height: 1; margin-top: 0.125rem; }
+.extension-emoji-lg .extension-default-icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 12px;
+}
 .extension-name-lg { font-size: 1.125rem; font-weight: 700; }
 .extension-detail-block { margin-top: 1.5rem; }
 .extension-detail-block-title {
@@ -7309,9 +7423,40 @@ body {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--color-text-muted);
   margin: 0 0 0.75rem;
 }
+/* Readme rendered Markdown */
+.extension-readme-body {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text-primary);
+  overflow-wrap: break-word;
+}
+.extension-readme-body h1,
+.extension-readme-body h2,
+.extension-readme-body h3 { margin: 1em 0 0.4em; font-weight: 600; }
+.extension-readme-body h1 { font-size: 1.2em; }
+.extension-readme-body h2 { font-size: 1.05em; }
+.extension-readme-body h3 { font-size: 0.95em; }
+.extension-readme-body p  { margin: 0 0 0.75em; }
+.extension-readme-body ul,
+.extension-readme-body ol { padding-left: 1.4em; margin: 0 0 0.75em; }
+.extension-readme-body pre {
+  background: var(--color-bg-secondary);
+  border-radius: 6px;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  font-size: 0.8em;
+}
+.extension-readme-body code {
+  background: var(--color-bg-secondary);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+.extension-readme-body pre code { background: none; padding: 0; }
+.extension-readme-body a { color: var(--color-accent); }
+.extension-readme-body img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 8px 0; }
 .extension-detail-section { margin-bottom: 0.875rem; }
 .extension-detail-section-title {
   font-size: 0.6875rem;
@@ -7371,13 +7516,17 @@ body {
   border-bottom: 1px solid var(--color-border-primary);
 }
 .extension-version-row .extension-version {
-  font-size: 0.9375rem;
+  font-size: 0.8375rem;
   font-weight: 700;
   color: var(--color-text-primary);
   background: none;
   padding: 0;
   border-radius: 0;
 }
+.extension-version-separator {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+}
 .extension-version-date {
   font-size: 0.6875rem;
   color: var(--color-text-muted);
@@ -7423,7 +7572,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 0.75rem;
+  margin-top: 0.25rem;
 }
 .extension-disabled {
   font-size: 0.6875rem;
@@ -7631,7 +7780,7 @@ body {
   color: #ffffff;
   border: 1px solid var(--color-accent-primary);
 }
-.btn-brand-update:hover { background: var(--color-accent-hover); }
+.btn-brand-update:hover { background: var(--color-button-primary-hover); }
 .btn-brand-install:disabled,
 .btn-brand-update:disabled {
   opacity: 0.5;
@@ -10055,7 +10204,7 @@ body.setup-mode[data-theme="dark"] {
 
 .memory-card-actions {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 0.375rem;
   flex-shrink: 0;
 }
@@ -10095,6 +10244,7 @@ body.setup-mode[data-theme="dark"] {
 
 .btn-memory-expand {
   min-width: 1.75rem;
+  align-self: stretch;
   justify-content: center;
   color: var(--color-text-muted);
 }
@@ -10608,7 +10758,7 @@ body.setup-mode[data-theme="dark"] {
 
 /* ── Model Filter ────────────────────────────────────────────────────── */
 .billing-model-filter {
-  padding: 0.4375rem 0.75rem;
+  padding: 0.4375rem 1.75rem 0.4375rem 0.75rem;
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   background: var(--color-bg-secondary);
@@ -10616,6 +10766,23 @@ body.setup-mode[data-theme="dark"] {
   font-size: 0.8125rem;
   cursor: pointer;
   min-width: 130px;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.625rem center;
+  transition: border-color 0.15s ease;
+}
+.billing-model-filter:hover {
+  border-color: var(--color-border-strong);
+}
+.billing-model-filter:focus {
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+.billing-model-filter option {
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
 }
 
 /* ── Action Buttons ──────────────────────────────────────────────────── */
@@ -11374,12 +11541,11 @@ body.setup-mode[data-theme="dark"] {
   color: var(--color-danger, #c33);
 }
 .mcp-tools-header {
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--color-text-secondary);
   margin-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.01em;
 }
 .mcp-tool-list {
   list-style: none;
@@ -11391,10 +11557,9 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-tool-item {
   display: flex;
-  align-items: baseline;
-  gap: 0.625rem;
-  font-size: 0.8125rem;
-  padding: 0.4375rem 0;
+  flex-direction: column;
+  gap: 0.3rem;
+  padding: 0.625rem 0;
   border-bottom: 1px solid var(--color-border-primary, var(--color-border));
 }
 .mcp-tool-item:last-child {
@@ -11402,18 +11567,15 @@ body.setup-mode[data-theme="dark"] {
 }
 .mcp-tool-name {
   font-family: var(--font-mono);
-  background: var(--color-bg-elevated, var(--color-bg-secondary));
-  padding: 0.125rem 0.4375rem;
-  border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
   color: var(--color-text-primary, var(--color-text));
-  flex-shrink: 0;
-  border: 1px solid var(--color-border-primary, var(--color-border));
 }
 .mcp-tool-desc {
   color: var(--color-text-secondary);
-  flex: 1;
   line-height: 1.5;
+  font-size: 0.8125rem;
+  opacity: 0.6;
 }
 
 /* ── MCP CTA banner & action buttons ─────────────────────────────────── */
@@ -12398,11 +12560,48 @@ body.setup-mode[data-theme="dark"] {
     display: none;
   }
 
+  /* Collapse session search into the right-side header actions */
+  #header-center {
+    justify-content: flex-end;
+    padding: 0;
+  }
+  #header-cmdbar {
+    flex: 0 0 1.875rem;
+    width: 1.875rem;
+    max-width: 1.875rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    justify-content: center;
+    gap: 0;
+    margin-right: 0.125rem;
+  }
+  #header-cmdbar:hover {
+    color: var(--color-text-primary);
+  }
+  #header-cmdbar svg {
+    width: 1rem;
+    height: 1rem;
+    opacity: 1;
+  }
+  #header-cmdbar .cmdbar-ph,
+  #header-cmdbar .cmdbar-kbd,
+  #ext-slot-header-right:empty {
+    display: none;
+  }
+
   /* Tighten right-side icon gap on mobile */
   #header-right {
     gap: 0.125rem;
   }
 
+  @media (max-width: 360px) {
+    #top-header {
+      padding: 0 0.375rem;
+    }
+  }
+
   /* Session info bar: single-line, no hover-expand, font smaller */
   #session-info-bar {
     padding: 0.1875rem 0.5rem;
@@ -12819,4 +13018,3 @@ body.setup-mode[data-theme="dark"] {
     background: var(--color-bg-primary);
   }
 }
-

data/lib/clacky/web/components/onboard.js

@@ -17,6 +17,7 @@
 const Onboard = (() => {
   let _providers   = [];
   let _selectedLang = I18n.lang();  // language chosen during setup
+  let _branded      = false;        // true when running under a brand license
 
   // ── Public API ──────────────────────────────────────────────────────────────
 
@@ -27,6 +28,7 @@ const Onboard = (() => {
       if (!data.needs_onboard) return { needsOnboard: false, phase: null };
 
       const phase = data.phase;
+      _branded = !!data.branded;
 
       if (phase === "key_setup") {
         // Mandatory: show full-screen setup panel, block boot.
@@ -111,9 +113,16 @@ const Onboard = (() => {
     $("setup-dot-1").className = "setup-step" + (step === "lang" ? " active" : " done");
     $("setup-dot-2").className = "setup-step" + (step === "key"  ? " active" : "");
     if (step === "key") {
-      $("setup-device-block").style.display   = "";
-      $("setup-manual-toggle").style.display  = "";
-      $("setup-manual-section").style.display = "none";
+      if (_branded) {
+        // Brand mode: skip the OpenClacky AI Keys card, go straight to manual config
+        $("setup-device-block").style.display   = "none";
+        $("setup-manual-toggle").style.display  = "none";
+        $("setup-manual-section").style.display = "";
+      } else {
+        $("setup-device-block").style.display   = "";
+        $("setup-manual-toggle").style.display  = "";
+        $("setup-manual-section").style.display = "none";
+      }
     }
   }
 
@@ -379,7 +388,8 @@ const Onboard = (() => {
     });
 
     $("setup-btn-back").addEventListener("click", () => {
-      if ($("setup-manual-section").style.display !== "none") {
+      if (!_branded && $("setup-manual-section").style.display !== "none") {
+        // Non-brand: collapse manual section back to device card
         $("setup-device-block").style.display  = "";
         $("setup-manual-toggle").style.display = "";
         $("setup-manual-section").style.display = "none";

data/lib/clacky/web/features/backup/view.js

@@ -58,7 +58,8 @@ const BackupView = (() => {
       a.click();
       a.remove();
       URL.revokeObjectURL(url);
-      if (statusEl) { statusEl.textContent = I18n.t("settings.backup.downloaded"); statusEl.className = "model-test-result success"; }
+      if (statusEl) { statusEl.textContent = ""; statusEl.className = "model-test-result"; }
+      Modal.toast(I18n.t("settings.backup.downloaded"), "success");
     } else if (statusEl) {
       statusEl.textContent = I18n.t("settings.backup.lastError", { msg: res.error });
       statusEl.className = "model-test-result error";
@@ -108,8 +109,8 @@ const BackupView = (() => {
       if (ev.type !== "_ws_connected" || !_restoreStatusEl) return;
       const el = _restoreStatusEl;
       _restoreStatusEl = null;
-      el.textContent = I18n.t("settings.backup.restartOk");
-      el.className = "model-test-result success";
+      if (el) { el.textContent = ""; el.className = "model-test-result"; }
+      Modal.toast(I18n.t("settings.backup.restartOk"), "success");
       if (typeof Settings !== "undefined") Settings.open();
     });
   }

data/lib/clacky/web/features/extensions/store.js

@@ -22,7 +22,7 @@ const ExtensionsStore = (() => {
   let _extensions      = [];        // [{ id, name, name_zh, description, ..., units }]
   let _allExtensions   = [];        // unfiltered result from server
   let _query           = "";        // current search text
-  let _sort            = "newest";  // "newest" | "updated" | "downloads"
+  let _sort            = "downloads";  // "newest" | "updated" | "downloads"
   let _filterInstalled = false;     // when true, show only installed extensions
   let _loading    = false;
   let _error      = null;      // soft warning when the store is unreachable
@@ -102,7 +102,7 @@ const ExtensionsStore = (() => {
 
     /** Set the sort order and reload. */
     setSort(sort) {
-      _sort = sort || "newest";
+      _sort = sort || "downloads";
       return Extensions.load();
     },
 

data/lib/clacky/web/features/extensions/view.js

@@ -77,13 +77,27 @@ const ExtensionsView = (() => {
     return parts.join(" · ");
   }
 
+  function _defaultIcon(name, extraClass) {
+    const letter = (name || "?")[0].toUpperCase();
+    const colors = [
+      ["#6366f1","#818cf8"], ["#8b5cf6","#a78bfa"], ["#ec4899","#f472b6"],
+      ["#f59e0b","#fbbf24"], ["#10b981","#34d399"], ["#3b82f6","#60a5fa"],
+      ["#ef4444","#f87171"], ["#14b8a6","#2dd4bf"],
+    ];
+    const idx = (name || "").charCodeAt(0) % colors.length;
+    const [c1, c2] = colors[idx];
+    const gid = `eg-${idx}-${Math.random().toString(36).slice(2,7)}`;
+    const cls = extraClass ? `extension-emoji ${extraClass}` : "extension-emoji";
+    return `<span class="${cls}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="extension-default-icon"><defs><linearGradient id="${gid}" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="${c1}"/><stop offset="100%" stop-color="${c2}"/></linearGradient></defs><rect width="32" height="32" rx="8" fill="url(#${gid})"/><text x="16" y="22" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" font-weight="700" fill="white">${letter}</text></svg></span>`;
+  }
+
   function _renderCard(ext) {
     const currentLang = I18n.lang();
-    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const name = (currentLang === "zh" && ext.display_name_zh) ? ext.display_name_zh : (ext.display_name || ext.name);
     const description = (currentLang === "zh" && ext.description_zh)
       ? ext.description_zh
       : ext.description || "";
-    const emoji = ext.emoji || "🧩";
+    const emojiHtml = ext.emoji ? `<span class="extension-emoji">${escapeHtml(ext.emoji)}</span>` : _defaultIcon(ext.name);
 
     const versionHtml = ext.version
       ? `<span class="extension-version">v${escapeHtml(String(ext.version))}</span>` : "";
@@ -110,7 +124,7 @@ const ExtensionsView = (() => {
     card.dataset.extId = ext.id != null ? String(ext.id) : (ext.name || "");
     card.innerHTML = `
       <div class="extension-card-main">
-        <div class="extension-emoji">${escapeHtml(emoji)}</div>
+        ${emojiHtml}
         <div class="extension-info">
           <div class="extension-title">
             <span class="extension-name">${escapeHtml(name)}</span>
@@ -229,11 +243,14 @@ const ExtensionsView = (() => {
 
   function _detailContent(ext) {
     const currentLang = I18n.lang();
-    const name = (currentLang === "zh" && ext.name_zh) ? ext.name_zh : ext.name;
+    const name = (currentLang === "zh" && ext.display_name_zh) ? ext.display_name_zh : (ext.display_name || ext.name);
     const description = (currentLang === "zh" && ext.description_zh)
       ? ext.description_zh
       : ext.description || "";
     const emoji = ext.emoji || "🧩";
+    const detailEmojiHtml = ext.emoji
+      ? `<span class="extension-emoji extension-emoji-lg">${escapeHtml(ext.emoji)}</span>`
+      : _defaultIcon(ext.name, "extension-emoji-lg");
 
     const canUpdate = ext.installed && ext.installed_version && ext.version && ext.installed_version !== ext.version;
     const versionHtml = ext.version
@@ -258,7 +275,7 @@ const ExtensionsView = (() => {
 
     return `
       <div class="extension-detail-hero">
-        <div class="extension-emoji extension-emoji-lg">${escapeHtml(emoji)}</div>
+        ${detailEmojiHtml}
         <div class="extension-detail-heading">
           <div class="extension-title">
             <span class="extension-name extension-name-lg">${escapeHtml(name)}</span>
@@ -274,10 +291,23 @@ const ExtensionsView = (() => {
           ${_renderActions(ext)}
         </div>
       </div>
-      ${_renderContributes(ext.contributes)}
+      ${_renderReadme(ext.readme)}
       ${_renderVersions(ext.versions)}`;
   }
 
+  // Renders Markdown readme content. Uses marked.js if available, falls back to plain text.
+  function _renderReadme(readme) {
+    if (!readme || !readme.trim()) return "";
+    const html = typeof marked !== "undefined"
+      ? marked.parse(readme, { breaks: true, gfm: true })
+      : `<pre style="white-space:pre-wrap">${escapeHtml(readme)}</pre>`;
+    return `
+      <div class="extension-detail-block extension-readme">
+        <h3 class="extension-detail-block-title">${escapeHtml(I18n.t("extensions.detail.readme"))}</h3>
+        <div class="extension-readme-body">${html}</div>
+      </div>`;
+  }
+
   // Manage buttons for a locally installed extension: enable/disable toggle
   // (always available when installed) plus remove (installed layer only).
   function _renderActions(ext) {
@@ -365,7 +395,7 @@ const ExtensionsView = (() => {
         <li class="extension-version-item">
           <div class="extension-version-row">
             <span class="extension-version">v${escapeHtml(String(v.version || ""))}</span>
-            ${date ? `<span class="extension-version-date">${escapeHtml(date)}</span>` : ""}
+            ${date ? `<span class="extension-version-separator">-</span><span class="extension-version-date">${escapeHtml(date)}</span>` : ""}
           </div>
           ${v.release_notes ? `<div class="extension-version-notes">${typeof marked !== "undefined" ? marked.parse(String(v.release_notes).replace(/^#{1,3}[^\n]*\n?/, ""), { breaks: true, gfm: true }) : escapeHtml(String(v.release_notes))}</div>` : ""}
         </li>`;

data/lib/clacky/web/features/mcp/view.js

@@ -84,6 +84,11 @@ const McpView = (() => {
 
     data.servers.forEach(server => {
       list.appendChild(_renderCard(server));
+      // _renderTools uses getElementById which requires the card to already be
+      // in the DOM, so we call it after appendChild (not inside _renderCard).
+      if (McpStore.state.isExpanded(server.name) && !server.disabled) {
+        _renderTools(server.name);
+      }
     });
   }
 
@@ -170,8 +175,6 @@ const McpView = (() => {
     card.querySelector(`#toggle-mcp-${CSS.escape(server.name)}`)
       ?.addEventListener("change", (ev) => _toggle(server.name, ev.target.checked));
 
-    if (isExpanded && !server.disabled) _renderTools(server.name);
-
     return card;
   }