@kolbo/mcp 1.30.0 → 1.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolbo/mcp",
-  "version": "1.30.0",
+  "version": "1.30.2",
   "description": "Kolbo AI MCP Server - Generate images, videos, music, speech, and sound effects from Claude Code",
   "main": "src/index.js",
   "bin": {

package/src/apps/bridge.js

@@ -91,9 +91,13 @@ const BRIDGE_JS = `
   }).catch(function () { /* host without apps support — widget stays static */ });
 
   function notifySize() {
-    var el = document.documentElement;
+    // Measure the widget card itself — documentElement.scrollHeight over-reports
+    // in some hosts and leaves a huge empty iframe below the card.
+    var card = document.querySelector('.k-card');
+    var rect = card ? card.getBoundingClientRect() : null;
+    var height = rect ? Math.ceil(rect.bottom + 8) : document.documentElement.scrollHeight;
     notify('ui/notifications/size-changed', {
-      width: el.scrollWidth, height: el.scrollHeight
+      width: document.documentElement.scrollWidth, height: height
     });
   }
 

package/src/apps/index.js

@@ -42,6 +42,26 @@ function widgetHtml(uri) {
   return htmlCache.get(uri);
 }
 
+// Hosts apply a deny-by-default CSP to widget iframes — without this
+// declaration EVERY external asset (generated images/videos on the CDN, model
+// icons, Google Fonts) is silently blocked. resourceDomains maps to
+// img/script/style/font/media-src; connectDomains to connect-src.
+const WIDGET_CSP = {
+  resourceDomains: [
+    'https://*.kolbo.ai',                       // media.kolbo.ai CDN + app.kolbo.ai model icons
+    'https://*.digitaloceanspaces.com',         // DO Spaces buckets (all envs)
+    'https://*.cdn.digitaloceanspaces.com',     // DO Spaces CDN endpoints
+    'https://fonts.googleapis.com',             // Inter / JetBrains Mono stylesheet
+    'https://fonts.gstatic.com',                // font files
+    'https://images.pexels.com',                // stock thumbnails
+    'https://*.pexels.com',
+    'https://*.pixabay.com',
+    'https://*.sketchfab.com',
+    'https://*.cloudfront.net',                 // provider-hosted previews
+  ],
+  connectDomains: [],
+};
+
 /** Register all Kolbo widget resources on an McpServer. */
 function registerApps(server) {
   for (const [uri, name] of [
@@ -50,9 +70,16 @@ function registerApps(server) {
     [UI.catalog, 'Kolbo Model Catalog Widget'],
     [UI.transcript, 'Kolbo Transcription Widget'],
   ]) {
-    registerAppResource(server, name, uri, { mimeType: RESOURCE_MIME_TYPE }, async () => ({
-      contents: [{ uri, mimeType: RESOURCE_MIME_TYPE, text: widgetHtml(uri) }],
-    }));
+    registerAppResource(
+      server, name, uri,
+      { mimeType: RESOURCE_MIME_TYPE, _meta: { csp: WIDGET_CSP, ui: { csp: WIDGET_CSP } } },
+      async () => ({
+        contents: [{
+          uri, mimeType: RESOURCE_MIME_TYPE, text: widgetHtml(uri),
+          _meta: { csp: WIDGET_CSP, ui: { csp: WIDGET_CSP } },
+        }],
+      })
+    );
   }
 }
 
@@ -130,9 +157,64 @@ async function modelIcon(client, modelName) {
   return map.get(String(modelName).toLowerCase()) || null;
 }
 
+/* ------------------------------------------------------------------ */
+/* Declaration-level widget metadata                                    */
+/* ------------------------------------------------------------------ */
+
+// Hosts (claude.ai) decide whether to prepare a widget iframe from the TOOL
+// DECLARATION in tools/list — result-level `_meta` alone is not enough. The
+// legacy server.tool() registration API has no _meta parameter, so we attach
+// it post-registration via the SDK's registered-tool objects (tools/list
+// serves `tool._meta` verbatim; verified against SDK 1.29.0).
+const TOOL_WIDGETS = {
+  // generation card
+  generate_image: UI.generation,
+  generate_image_edit: UI.generation,
+  generate_creative_director: UI.generation,
+  generate_video: UI.generation,
+  generate_video_from_image: UI.generation,
+  generate_video_from_video: UI.generation,
+  generate_elements: UI.generation,
+  generate_first_last_frame: UI.generation,
+  generate_lipsync: UI.generation,
+  generate_music: UI.generation,
+  generate_speech: UI.generation,
+  generate_sound: UI.generation,
+  generate_3d: UI.generation,
+  edit_image: UI.generation,
+  edit_video: UI.generation,
+  shorts_render: UI.generation,
+  // transcript viewer
+  transcribe_audio: UI.transcript,
+  // model catalog
+  list_models: UI.catalog,
+  // media grid
+  list_media: UI.mediaGrid,
+  search_stock_media: UI.mediaGrid,
+  get_stock_collections: UI.mediaGrid,
+  search_music_library: UI.mediaGrid,
+  browse_music_library: UI.mediaGrid,
+  list_presets: UI.mediaGrid,
+  list_voices: UI.mediaGrid,
+  list_visual_dnas: UI.mediaGrid,
+  list_moodboards: UI.mediaGrid,
+  shorts_analyze: UI.mediaGrid,
+};
+
+function attachToolWidgetMeta(server) {
+  const registered = server && server._registeredTools;
+  if (!registered) return;
+  for (const [name, uri] of Object.entries(TOOL_WIDGETS)) {
+    const tool = registered[name];
+    if (!tool) continue;
+    tool._meta = { ...(tool._meta || {}), ...uiMeta(uri) };
+  }
+}
+
 module.exports = {
   UI,
   registerApps,
+  attachToolWidgetMeta,
   uiMeta,
   uiResult,
   appsEnabled,

package/src/apps/widgets/catalog.js

@@ -34,20 +34,22 @@ function boot(sc) {
   if (!sc || !sc.groups) return;
   state = sc;
   el('title').textContent = sc.title || 'AI Models';
-  var total = sc.groups.reduce(function (n, g) { return n + g.models.length; }, 0);
+  var shown = sc.groups.reduce(function (n, g) { return n + g.models.length; }, 0);
   el('count-chip').style.display = '';
-  el('count-chip').textContent = total + ' models';
+  el('count-chip').textContent = sc.total_available && sc.total_available > shown
+    ? 'top picks · ' + sc.total_available + ' total'
+    : shown + ' models';
   el('stage').innerHTML = sc.groups.map(function (g, gi) {
-    return '<div style="margin-bottom:14px">' +
-      '<div style="font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:8px">' + esc(g.name) + '</div>' +
+    return '<div style="margin-bottom:10px">' +
+      '<div style="font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px">' + esc(g.name) + '</div>' +
       g.models.map(function (m, mi) {
-        return '<div class="k-audio-row" data-g="' + gi + '" data-m="' + mi + '" style="cursor:pointer">' +
-          (m.icon ? '<img class="k-audio-art" style="width:32px;height:32px" src="' + esc(m.icon) + '" onerror="this.outerHTML=monogram(\\'' + esc(m.name).replace(/'/g, '') + '\\')">'
+        return '<div class="k-audio-row" data-g="' + gi + '" data-m="' + mi + '" style="cursor:pointer;padding:6px 8px;margin-bottom:4px">' +
+          (m.icon ? '<img class="k-audio-art" style="width:24px;height:24px;border-radius:6px" src="' + esc(m.icon) + '" onerror="this.outerHTML=monogram(\\'' + esc(m.name).replace(/'/g, '') + '\\')">'
                   : '<span style="flex:none">' + monogram(m.name) + '</span>') +
-          '<div class="k-audio-meta"><div class="k-audio-title">' + esc(m.name) + '</div>' +
-          (m.description ? '<div class="k-audio-sub">' + esc(m.description) + '</div>' : '') + '</div>' +
+          '<div class="k-audio-meta"><div class="k-audio-title" style="font-size:12px">' + esc(m.name) + '</div>' +
+          (m.description ? '<div class="k-audio-sub" style="font-size:10.5px">' + esc(m.description) + '</div>' : '') + '</div>' +
           '<div style="display:flex;gap:4px;flex:none">' + (m.chips || []).slice(0, 3).map(function (c) {
-            return '<span class="k-chip">' + esc(c) + '</span>';
+            return '<span class="k-chip" style="padding:2px 7px;font-size:10px">' + esc(c) + '</span>';
           }).join('') + '</div></div>';
       }).join('') + '</div>';
   }).join('');

package/src/apps/widgets/generation.js

@@ -98,7 +98,7 @@ function renderChips(sc) {
   if (s.voice) h += chip('🎤 ' + esc(s.voice));
   if (s.mode) h += chip(esc(s.mode));
   if (sc.count > 1) h += chip('×' + sc.count);
-  if (sc.reference_image) h += '<img class="k-ref-thumb" src="' + esc(sc.reference_image) + '" alt="ref" title="Reference image">';
+  if (sc.reference_image) h += '<img class="k-ref-thumb" src="' + esc(sc.reference_image) + '" alt="" title="Reference image" onerror="this.style.display=\'none\'">';
   el('chips').innerHTML = h;
 }
 function chip(inner) { return '<span class="k-chip">' + inner + '</span>'; }
@@ -166,7 +166,6 @@ function poll(sc) {
     } else if (stateName === 'failed' || stateName === 'error' || stateName === 'cancelled') {
       renderError(st.error || 'Generation ' + stateName);
     } else {
-      if (st.progress != null) el('status-text').textContent = 'Generating… ' + Math.round(st.progress) + '%';
       schedulePoll(sc);
     }
   }).catch(function () { schedulePoll(sc); });
@@ -196,7 +195,10 @@ function renderResult(sc) {
 
 function renderImages(sc, urls) {
   selected = Math.min(selected, urls.length - 1);
-  var viewer = '<div class="k-viewer"><img id="main-img" src="' + esc(urls[selected]) + '" alt=""></div>';
+  // If the host CSP still blocks the image, degrade to open-in-browser rows
+  // instead of a broken empty viewer.
+  var viewer = '<div class="k-viewer"><img id="main-img" src="' + esc(urls[selected]) + '" alt="" onerror="window.__imgFail && window.__imgFail()"></div>';
+  window.__imgFail = function () { renderLinks(urls); window.kolbo.notifySize(); };
   var thumbs = '';
   if (urls.length > 1) {
     thumbs = '<div class="k-thumbs">' + urls.map(function (u, i) {

package/src/index.js

@@ -73,7 +73,7 @@ const { registerVoiceTools } = require('./tools/voices');
 const { registerMusicLibraryTools } = require('./tools/music_library');
 const { registerStockLibraryTools } = require('./tools/stock_library');
 const { registerShortsCreatorTools } = require('./tools/shorts_creator');
-const { registerApps } = require('./apps');
+const { registerApps, attachToolWidgetMeta } = require('./apps');
 
 /**
  * Build a fully-configured Kolbo MCP server (all tool groups registered)
@@ -123,6 +123,9 @@ function createServer(opts = {}) {
   // MCP Apps widget resources (ui://kolbo/*). Registering resources is inert
   // for text-only hosts — they never fetch them.
   registerApps(server);
+  // Declaration-level `_meta['ui/resourceUri']` on every widget-carrying tool —
+  // claude.ai prepares the widget iframe from tools/list, not from the result.
+  attachToolWidgetMeta(server);
 
   return server;
 }

package/src/tools/models.js

@@ -43,14 +43,34 @@ function modelChips(m) {
 }
 
 // structuredContent for ui://kolbo/catalog.html — see src/apps/widgets/catalog.js
+// Deliberately CURATED, not exhaustive: the widget is a picker, not a database.
+// Smart Select is pinned first, each group shows the recommended/new models
+// (max 6), and the total count chip tells the user how many exist overall.
 function buildCatalogStructured(models, type) {
   const groups = [];
   const byName = new Map();
-  for (const m of models) {
+  const isAuto = (m) => /^auto$|smart.select/i.test(String(m.name || '')) || /smart-select|k_auto/i.test(String(m.identifier || ''));
+
+  // Pinned Smart Select entry (replaces the confusing "Other / Auto" row).
+  const smartSelect = {
+    name: 'Smart Select',
+    icon: null,
+    description: 'Recommended — automatically routes to the best model for your prompt, quality and cost.',
+    chips: ['AUTO'],
+    use_hint: 'Generate with Smart Select (omit the model) — ask me what I want to create first.',
+  };
+
+  // Recommended + new models float to the top of each group.
+  const ranked = [...models].filter((m) => !isAuto(m)).sort((a, b) => {
+    const score = (m) => (m.recommended ? 2 : 0) + (m.new_model || m.newModel ? 1 : 0);
+    return score(b) - score(a);
+  });
+
+  for (const m of ranked) {
     const name = groupNameFor(m);
     let g = byName.get(name);
     if (!g) { g = { name, models: [] }; byName.set(name, g); groups.push(g); }
-    if (g.models.length >= 12) continue; // cap per group (≤60 total across groups)
+    if (g.models.length >= 6) continue; // curated cap — full list lives in the text payload
     g.models.push({
       name: m.name,
       icon: m.avatar
@@ -61,10 +81,12 @@ function buildCatalogStructured(models, type) {
       use_hint: `Generate with the "${m.name}" model — ask me what I want to create first.`,
     });
   }
+  groups.sort((a, b) => (a.name === 'Other' ? 1 : b.name === 'Other' ? -1 : 0));
   return {
     widget: 'catalog',
     title: 'Kolbo AI Models' + (type ? ' — ' + type : ''),
-    groups,
+    total_available: models.length,
+    groups: [{ name: 'Recommended', models: [smartSelect] }, ...groups],
   };
 }