@kolbo/mcp 1.79.7 → 1.80.0

package/package.json

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

package/skill/GENERATED.md

@@ -1,6 +1,6 @@
 # AUTO-GENERATED — do not edit
 
-This tree is mirrored from kolbo-code@fccda44, the single source of truth.
+This tree is mirrored from kolbo-code@b39d555, the single source of truth.
 Canonical source: packages/opencode/skills/kolbo/
 Distribution: .github/workflows/sync-skill-to-plugin.yml
 

package/src/apps/bridge.js

@@ -23,6 +23,7 @@
  *   .callTool(name, args)      — Promise<CallToolResult>
  *   .sendMessage(text)         — append a user chat message (returns Promise)
  *   .openLink(url)             — open external URL
+ *   .copyText(text)            — copy via the host clipboard (ui/copy-text)
  *   .notifySize()              — report content size to host
  */
 
@@ -183,6 +184,7 @@ const BRIDGE_JS = `
       return request('ui/message', { role: 'user', content: [{ type: 'text', text: text }] });
     },
     openLink: function (url) { return request('ui/open-link', { url: url }); },
+    copyText: function (text) { return request('ui/copy-text', { text: text }); },
     // Hand a piece of this widget's media to the host's composer. Dragging it
     // out cannot work: a widget is a sandboxed cross-origin iframe, so a native
     // HTML5 drag started in here never delivers its dataTransfer to the host

package/src/apps/html.js

@@ -57,7 +57,10 @@ var ICONS = {
   audio: _svg('<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>'),
   document: _svg('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h8"/>'),
   cube: _svg('<path d="M21 8l-9-5-9 5 9 5z"/><path d="M3 8v8l9 5 9-5V8"/><path d="M12 13v8"/>'),
-  file: _svg('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>')
+  file: _svg('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>'),
+  copy: _svg('<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'),
+  chevronDown: _svg('<path d="M6 9l6 6 6-6"/>'),
+  chevronUp: _svg('<path d="M18 15l-6-6-6 6"/>')
 };
 // Media-kind → icon (accepts model kind / media_type strings).
 function kindIcon(kind) {
@@ -82,6 +85,36 @@ function downloadUrl(u) {
   if (!u) return u;
   return 'https://api.kolbo.ai/mcp/download?url=' + encodeURIComponent(u);
 }
+// Copy from a sandboxed widget iframe. Order: Clipboard API (Kolbo Code
+// grants clipboard-write) → execCommand → host ui/copy-text (parent clipboard).
+function writeClipboard(text) {
+  text = String(text || '');
+  function fallback() {
+    if (!document.body) return false;
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    var ok = false;
+    try { ok = document.execCommand('copy'); } catch (e) {}
+    document.body.removeChild(ta);
+    return ok;
+  }
+  function host() {
+    if (!window.kolbo || !window.kolbo.copyText) return Promise.resolve(false);
+    return window.kolbo.copyText(text).then(function () { return true; }).catch(function () { return false; });
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text).then(function () { return true; }).catch(function () {
+      return fallback() ? Promise.resolve(true) : host();
+    });
+  }
+  if (fallback()) return Promise.resolve(true);
+  return host();
+}
 function fmtCredits(n) { return (n == null) ? '' : (Math.round(n * 100) / 100) + ' cr'; }
 function fmtDur(s) { if (s == null) return ''; s = Math.round(s); return s >= 60 ? Math.floor(s/60) + 'm ' + (s%60) + 's' : s + 's'; }
 function applyTheme(ctx) {
@@ -105,6 +138,62 @@ function modelChipHTML(name, iconUrl) {
 function monogram(name) {
   return '<span class="k-mono-icon">' + esc(String(name).trim().charAt(0).toUpperCase()) + '</span>';
 }
+// In-widget preview overlay — every card (generation chips, media grid, list
+// rows) uses this so a DNA / reference / library thumb opens a popup in Kolbo
+// Code, Claude Code, Codex, and any other host. Host fullscreen is not required.
+function ensurePeek() {
+  if (el('peek')) return el('peek');
+  var card = document.querySelector('.k-card') || document.body;
+  var box = document.createElement('div');
+  box.id = 'peek';
+  box.className = 'k-peek';
+  box.hidden = true;
+  box.innerHTML = '<button type="button" class="k-peek-close" id="peek-close" aria-label="Close"></button>'
+    + '<img id="peek-img" alt="">'
+    + '<video id="peek-video" muted playsinline controls></video>'
+    + '<div class="k-peek-cap" id="peek-cap"></div>';
+  card.appendChild(box);
+  el('peek-close').innerHTML = ICONS.x;
+  el('peek-close').onclick = function (e) { e.stopPropagation(); closePeek(); };
+  box.onclick = function (e) { if (e.target === box) closePeek(); };
+  return box;
+}
+function peekAttrs(url, kind, cap) {
+  if (!url) return '';
+  return ' data-peek="' + esc(url) + '" data-peek-kind="' + esc(kind || 'image') + '" data-peek-cap="' + esc(cap || '') + '"';
+}
+function bindPeekHits(root) {
+  if (!root) return;
+  Array.prototype.forEach.call(root.querySelectorAll('[data-peek]'), function (node) {
+    node.onclick = function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openPeek(node.getAttribute('data-peek'), node.getAttribute('data-peek-kind'), node.getAttribute('data-peek-cap'));
+    };
+  });
+}
+function openPeek(url, kind, cap) {
+  if (!url) return;
+  var box = ensurePeek();
+  var img = el('peek-img');
+  var vid = el('peek-video');
+  var video = kind === 'video';
+  if (video) { vid.setAttribute('src', url); img.removeAttribute('src'); }
+  else { img.setAttribute('src', url); vid.removeAttribute('src'); }
+  el('peek-cap').textContent = cap || '';
+  box.hidden = false;
+  if (window.kolbo && window.kolbo.notifySize) window.kolbo.notifySize();
+}
+function closePeek() {
+  var box = el('peek');
+  if (!box || box.hidden) return;
+  box.hidden = true;
+  el('peek-img').removeAttribute('src');
+  var vid = el('peek-video');
+  if (vid) { try { vid.pause(); } catch (e) {} vid.removeAttribute('src'); }
+  if (window.kolbo && window.kolbo.notifySize) window.kolbo.notifySize();
+}
+document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePeek(); });
 // Pull structuredContent out of a tools/call result (host bridge shape).
 function structured(res) {
   if (!res) return null;

package/src/apps/index.js

@@ -193,8 +193,19 @@ const ICON_CDN_BASE = 'https://kolbo-general-media.fra1.cdn.digitaloceanspaces.c
 
 function resolveAvatarUrl(avatar) {
   if (!avatar) return null;
-  if (/^https?:\/\//i.test(avatar)) return avatar;
-  return `${ICON_CDN_BASE}/${encodeURIComponent(avatar)}`;
+  if (/^https?:\/\//i.test(avatar)) {
+    try {
+      const parsed = new URL(avatar);
+      const file = parsed.pathname.match(/\/(?:models_icons|assets)\/([^/]+)$/);
+      // api.kolbo.ai / app.kolbo.ai avatars 404 or get bot-blocked inside
+      // sandboxed widget iframes. The CDN copy is the same file.
+      if (file && /(?:^|\.)kolbo\.ai$|digitaloceanspaces\.com$/i.test(parsed.hostname)) {
+        return `${ICON_CDN_BASE}/${file[1]}`;
+      }
+    } catch (_) { /* keep the original absolute URL */ }
+    return avatar;
+  }
+  return `${ICON_CDN_BASE}/${encodeURIComponent(String(avatar).replace(/^\/+/, ''))}`;
 }
 
 async function modelCatalog(client) {
@@ -219,7 +230,11 @@ async function modelCatalog(client) {
       // the ONLY thing that tells two same-named variants apart. See canonicalModelId.
       const raw = m.types !== undefined ? m.types : m.type;
       const types = (Array.isArray(raw) ? raw : [raw]).filter(Boolean).map(String);
-      const info = { icon, eta, id: m.identifier || null, name: m.name || null, types };
+      const aspects = Array.isArray(m.supported_aspect_ratios)
+        ? m.supported_aspect_ratios
+        : (Array.isArray(m.supportedAspectRatios) ? m.supportedAspectRatios : []);
+      const aspectsByType = m.supported_aspect_ratios_by_type || m.supportedAspectRatiosByType || null;
+      const info = { icon, eta, id: m.identifier || null, name: m.name || null, types, aspects, aspectsByType };
       all.push(info);
       // Display names collide across variants ("Nano Banana 2" names both the
       // t2i model and its editing sibling) — on collision keep the model with
@@ -251,8 +266,138 @@ async function modelInfoMap(client) {
 /** Resolve one model's { icon, eta, name }; missing → all null. */
 async function modelInfo(client, modelName) {
   if (!modelName) return { icon: null, eta: null, name: null };
-  const map = await modelInfoMap(client);
-  return map.get(String(modelName).toLowerCase()) || { icon: null, eta: null, name: null };
+  const catalog = await modelCatalog(client);
+  const exact = catalog.byKey.get(String(modelName).toLowerCase());
+  if (exact) return exact;
+  // Same separator-insensitive / prefix leniency as canonicalModelId — the
+  // chip used to miss "gpt-image-2" when the catalog only keyed the editor
+  // sibling, and the widget fell back to a first-letter monogram.
+  const want = normId(modelName);
+  if (!want) return { icon: null, eta: null, name: null };
+  const rows = catalog.all || [];
+  return rows.find((row) => normId(row.id) === want || normId(row.name) === want)
+    || rows.find((row) => normId(row.id).startsWith(want) || normId(row.name).startsWith(want))
+    || { icon: null, eta: null, name: null };
+}
+
+/**
+ * Snap a requested aspect ratio onto the catalog enum for that model.
+ * Every image/video generate_* tool must call this after canonicalModelId —
+ * list_models already prints supported_aspect_ratios, but the LLM still
+ * invents 21:9 / "widescreen" / "21/9". Fail open only when the catalog is
+ * empty or the model is unpublished (hidden ids still reach the API).
+ */
+const ASPECT_ALIASES = {
+  square: '1:1',
+  landscape: '16:9',
+  widescreen: '16:9',
+  horizontal: '16:9',
+  portrait: '9:16',
+  vertical: '9:16',
+  story: '9:16',
+  stories: '9:16',
+  reel: '9:16',
+  reels: '9:16',
+  ultrawide: '21:9',
+  cinema: '21:9',
+  cinematic: '21:9',
+};
+
+function normalizeAspectRatio(requested) {
+  if (requested == null || requested === '') return requested;
+  const raw = String(requested).trim();
+  const lower = raw.toLowerCase();
+  if (lower === 'auto' || lower === 'adaptive') return lower;
+  if (ASPECT_ALIASES[lower]) return ASPECT_ALIASES[lower];
+  const pair = lower.match(/^(\d+(?:\.\d+)?)\s*[:x×/\-]\s*(\d+(?:\.\d+)?)$/);
+  if (!pair) return raw;
+  const a = Number(pair[1]);
+  const b = Number(pair[2]);
+  if (!Number.isFinite(a) || !Number.isFinite(b) || a <= 0 || b <= 0) return raw;
+  return Number.isInteger(a) && Number.isInteger(b) ? `${a}:${b}` : `${a}:${b}`;
+}
+
+function parseAspectDecimal(ratio) {
+  const normalized = normalizeAspectRatio(ratio);
+  const parts = String(normalized || '').split(':').map(Number);
+  if (parts.length !== 2 || parts.some((n) => !Number.isFinite(n) || n <= 0)) return 1;
+  return parts[0] / parts[1];
+}
+
+function aspectKey(ratio) {
+  return String(normalizeAspectRatio(ratio) || '').toLowerCase();
+}
+
+function closestAspectRatio(requested, supported) {
+  const normalized = normalizeAspectRatio(requested);
+  if (!normalized) return requested;
+  if (normalized === 'auto' || normalized === 'adaptive') return normalized;
+  if (!Array.isArray(supported) || supported.length === 0) return normalized;
+  const exact = supported.find((ratio) => aspectKey(ratio) === aspectKey(normalized));
+  if (exact) return exact;
+  const concrete = supported.filter((ratio) => {
+    const key = aspectKey(ratio);
+    return key && key !== 'auto' && key !== 'adaptive';
+  });
+  if (!concrete.length) return normalized;
+  const target = parseAspectDecimal(normalized);
+  let best = concrete[0];
+  let bestDist = Infinity;
+  for (const ratio of concrete) {
+    const dist = Math.abs(parseAspectDecimal(ratio) - target);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = ratio;
+    }
+  }
+  return best;
+}
+
+function findCatalogModel(catalog, modelId, type) {
+  if (!catalog || !modelId) return null;
+  const key = String(modelId).toLowerCase().trim();
+  const want = normId(key);
+  if (!want) return null;
+  const byKey = catalog.byKey && catalog.byKey.get(key);
+  if (byKey) return byKey;
+  const all = catalog.all || [];
+  const types = (Array.isArray(type) ? type : [type]).filter(Boolean);
+  const candidates = all.filter((info) =>
+    (info.id && (info.id.toLowerCase() === key || normId(info.id) === want))
+    || (info.name && (info.name.toLowerCase() === key || normId(info.name) === want))
+  );
+  if (!candidates.length) return null;
+  if (types.length) {
+    const typed = candidates.filter((info) => Array.isArray(info.types) && info.types.some((t) => types.includes(t)));
+    if (typed.length) return typed[0];
+  }
+  return candidates[0];
+}
+
+function supportedAspectsFor(info, type) {
+  if (!info) return [];
+  const byType = type && info.aspectsByType;
+  if (byType && typeof byType === 'object') {
+    const typed = Array.isArray(type)
+      ? type.map((t) => byType[t]).find((arr) => Array.isArray(arr) && arr.length)
+      : byType[type];
+    if (Array.isArray(typed) && typed.length) return typed;
+  }
+  return Array.isArray(info.aspects) ? info.aspects : [];
+}
+
+async function resolveCatalogAspectRatio(client, modelId, requested, type) {
+  if (!requested) return requested;
+  const normalized = normalizeAspectRatio(requested);
+  if (!modelId) return normalized;
+  try {
+    const catalog = await modelCatalog(client);
+    const info = findCatalogModel(catalog, modelId, type);
+    if (!info) return normalized;
+    return closestAspectRatio(normalized, supportedAspectsFor(info, type));
+  } catch (_) {
+    return normalized;
+  }
 }
 
 /* ------------------------------------------------------------------ */
@@ -512,6 +657,9 @@ module.exports = {
   modelInfoMap,
   voiceInfo,
   canonicalModelId,
+  normalizeAspectRatio,
+  closestAspectRatio,
+  resolveCatalogAspectRatio,
   resolveAvatarUrl,
   widgetHtml, // exported for smoke tests
 };

package/src/apps/theme.js

@@ -59,6 +59,7 @@ body {
 
 /* ---- Card shell ---- */
 .k-card {
+  position: relative;
   background: var(--card);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -81,10 +82,20 @@ body {
 .k-head .k-spacer { flex: 1; }
 
 .k-body { padding: 14px 16px; }
-.k-prompt { color: var(--text-muted); font-size: 12.5px; margin-bottom: 10px; word-break: break-word;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-.k-prompt.k-clamped, .k-caption.k-clamped { cursor: pointer; }
+.k-prompt { color: var(--text-muted); font-size: 12.5px; margin-bottom: 4px; word-break: break-word;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  user-select: text; -webkit-user-select: text; cursor: text; }
 .k-prompt.expanded { -webkit-line-clamp: unset; }
+.k-text-tools { display: flex; gap: 2px; justify-content: flex-end; margin: 0 0 10px; }
+.k-text-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px; border: 0; border-radius: 6px;
+  background: transparent; color: var(--text-faint);
+  font-size: 11px; font-weight: 600; font-family: inherit;
+  cursor: pointer;
+}
+.k-text-btn:hover { color: var(--text); background: var(--surface-2); }
+.k-text-btn svg { width: 12px; height: 12px; }
 /* @VisualDNA / #Moodboard mentions are load-bearing prompt syntax, not prose —
    the server resolves them to the actual asset. Mark them so a glance at the
    prompt shows which references it pulls in. */
@@ -96,8 +107,10 @@ body {
 }
 /* Single-line media caption (scene / batch prompt under the viewer) */
 .k-caption { font-size: 11px; color: var(--text-faint); margin: 2px 2px 0;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  user-select: text; -webkit-user-select: text; cursor: text; }
 .k-caption.expanded { white-space: normal; word-break: break-word; }
+.k-caption + .k-text-tools { margin: 0 2px 6px; justify-content: flex-start; }
 
 /* ---- Chips ---- */
 .k-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
@@ -122,6 +135,26 @@ body {
 }
 .k-chip img.k-voice-thumb { width: 18px; height: 18px; border-radius: 999px; margin-left: -3px; }
 .k-ref-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border-strong); }
+.k-peek-hit { cursor: zoom-in; }
+.k-peek {
+  position: absolute; inset: 0; z-index: 20;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 10px; padding: 28px 16px 16px;
+  background: rgba(8, 10, 16, 0.92);
+}
+.k-peek[hidden] { display: none !important; }
+.k-peek img, .k-peek video {
+  display: none; max-width: 100%; max-height: min(360px, 70vh);
+  border-radius: 10px; object-fit: contain; background: #000;
+}
+.k-peek img[src], .k-peek video[src] { display: block; }
+.k-peek-close {
+  position: absolute; top: 8px; right: 8px;
+  width: 28px; height: 28px; border: 0; border-radius: 999px;
+  background: var(--surface-2); color: var(--text); cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.k-peek-cap { font-size: 12px; color: var(--text-muted); text-align: center; max-width: 100%; word-break: break-word; }
 /* Visual DNA chips: the character's face, so you can see WHICH DNA is locked in. */
 .k-dna-face { width: 18px; height: 18px; border-radius: 999px; object-fit: cover; margin-left: -3px; background: var(--border-strong); }
 .k-dna-stack .k-dna-stack-item { display: inline-flex; }
@@ -264,6 +297,10 @@ html.k-fullscreen .k-actions { flex: none; padding-top: 8px; }
   box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
 .k-btn.primary:hover { background: #2f74e8; }
 .k-btn.ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-muted); }
+.k-btn.danger { background: var(--error); border-color: var(--error); color: #fff;
+  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
+.k-btn.danger:hover { background: #dc2626; }
+.k-stop-ask { color: var(--text-muted); font-size: 12px; font-weight: 500; margin-right: 4px; }
 .k-btn.ghost:hover { color: var(--text); background: var(--surface-2); }
 .k-btn svg { width: 13px; height: 13px; }
 /* Inline SVG icons (replace emoji) — align with text, inherit color, never shrink. */
@@ -333,6 +370,7 @@ html.k-fullscreen .k-actions { flex: none; padding-top: 8px; }
   .k-prompt-row { flex-wrap: wrap; }
   .k-prompt-row .k-input { min-width: 0; flex: 1 1 100%; }
   .k-prompt-row .k-btn { flex: 1 1 auto; }
+  .k-text-btn { min-height: 32px; padding: 6px 10px; }
 }
 .k-play {
   width: 32px; height: 32px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,0.18);