@kolbo/mcp 1.106.2 → 1.106.4

package/package.json

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

package/src/apps/theme.js

@@ -11,7 +11,10 @@
 const KOLBO_CSS = `
 :root {
   --bg: #0f0f0f;
-  --card: rgba(22, 22, 25, 0.96);
+  /* A translucent lift, not a fixed colour: every host paints its own dark grey
+     behind the iframe (claude.ai, ChatGPT, Codex, Kolbo Code all differ), and a
+     fixed near-black card read as a hole cut into the chat. */
+  --card: rgba(255, 255, 255, 0.04);
   --card-solid: #161619;
   --panel: rgba(255, 255, 255, 0.035);
   --surface: rgba(255, 255, 255, 0.03);
@@ -67,7 +70,8 @@ body {
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid var(--border);
   border-radius: var(--radius-card);
-  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22), var(--specular);
+  /* No drop shadow: on a dark host it only adds a muddy halo. */
+  box-shadow: var(--specular);
   overflow: hidden;
   animation: k-in 400ms var(--spring);
 }
@@ -126,10 +130,11 @@ body {
   display: inline-flex; align-items: center; gap: 5px;
   padding: 3px 8px; border-radius: 999px;
   background: var(--surface-2); border: 0;
-  font-size: 10.5px; font-weight: 500; color: var(--text-muted);
+  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
   white-space: nowrap;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  letter-spacing: 0.01em;
+  /* UI font, not a code font: tags are labels people read ("7 images",
+     "Seedance 2.5"), and monospace made the whole row look like a log line. */
+  font-variant-numeric: tabular-nums;
   animation: k-chip-in 200ms var(--spring);
 }
 @keyframes k-chip-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

package/src/apps/widgets/credits.js

@@ -4,27 +4,34 @@ const { widgetPage } = require('../html');
 
 const BODY = `
 <style>
-#loading[hidden], #balance[hidden], #error[hidden] { display: none !important; }
-.k-credit-total { font-size: clamp(30px, 8vw, 46px); font-weight: 600; letter-spacing: -1.5px; line-height: 1.2; overflow-wrap: anywhere; }
-.k-credit-label { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
-.k-credit-breakdown { margin: 22px 0 0; padding: 0; }
-.k-credit-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13px; }
+#loading[hidden], #balance[hidden], #error[hidden], #breakdown[hidden] { display: none !important; }
+/* One line by default. Agents check the balance at session start and before
+   big batches; a full-height balance card each time buried the chat. */
+.k-credit-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.k-credit-total { font-size: 22px; font-weight: 650; letter-spacing: -0.5px; line-height: 1.2;
+  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.k-credit-label { color: var(--text-muted); font-size: 12px; }
+.k-credit-line .k-text-btn { margin-left: auto; align-self: center; }
+.k-credit-breakdown { margin: 10px 0 0; padding: 0; }
+.k-credit-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
 .k-credit-row dt { color: var(--text-muted); }
 .k-credit-row dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
 </style>
 <div class="k-card">
-  <div class="k-head"><span class="k-logo" id="logo"></span><span class="k-title">Credit balance</span></div>
+  <div class="k-head"><span class="k-logo" id="logo"></span><span class="k-title">Credits</span></div>
   <div class="k-body" aria-live="polite">
-    <div id="loading" class="k-skel" style="height:160px" aria-label="Loading credit balance"></div>
+    <div id="loading" class="k-skel" style="min-height:0;height:28px" aria-label="Loading credit balance"></div>
     <div id="balance" hidden>
-      <div class="k-credit-total" id="total"></div>
-      <div class="k-credit-label">Available credits</div>
-      <dl class="k-credit-breakdown">
+      <div class="k-credit-line">
+        <span class="k-credit-total" id="total"></span>
+        <span class="k-credit-label">available</span>
+        <button type="button" class="k-text-btn" id="toggle" aria-expanded="false" aria-controls="breakdown">Details</button>
+      </div>
+      <dl class="k-credit-breakdown" id="breakdown" hidden>
         <div class="k-credit-row"><dt>Plan credits</dt><dd id="plan"></dd></div>
         <div class="k-credit-row"><dt>Credit pack</dt><dd id="pack"></dd></div>
         <div class="k-credit-row"><dt>Redemption</dt><dd id="redemption"></dd></div>
       </dl>
-      <div class="k-credit-label">Balance at time of check</div>
     </div>
     <div id="error" class="k-error" hidden>Credit balance unavailable. Please check again.</div>
   </div>
@@ -32,6 +39,13 @@ const BODY = `
 
 const SCRIPT = `
 el('logo').innerHTML = KOLBO_LOGO + '<span>Kolbo</span>';
+el('toggle').onclick = function () {
+  var open = el('breakdown').hidden;
+  el('breakdown').hidden = !open;
+  el('toggle').setAttribute('aria-expanded', String(open));
+  el('toggle').textContent = open ? 'Hide' : 'Details';
+  window.kolbo.notifySize();
+};
 function amount(value) {
   if (value == null || value === '' || !Number.isFinite(Number(value))) return '\u2014';
   return Number(value).toLocaleString('en-US', { maximumFractionDigits: 8 });

package/src/apps/widgets/generation.js

@@ -221,7 +221,13 @@ function boot(sc) {
 // model_name / voice_name are the CLEAN catalog names, resolved server-side
 // (src/tools/_shared.js on submit, get_generation_status on completion). The raw
 // ids stay in sc.model / sc.voice for Recreate + model context — never for display.
-function modelLabel(sc) { return sc.model_name || sc.model; }
+// 'Generations' is the server's placeholder when a status check spans
+// several generations and no single model is known (src/tools/generate.js).
+// It is not a model: rendered as one it showed a "G Generations" brand chip.
+function modelLabel(sc) {
+  var m = sc.model_name || sc.model;
+  return m && m !== 'Generations' ? m : '';
+}
 function voiceLabel(sc) { return sc.voice_name || sc.voice || (sc.settings || {}).voice; }
 
 // @VisualDNA / #Moodboard mentions are the tag syntax the server resolves into
@@ -297,7 +303,10 @@ function renderChips(sc) {
   var h = modelChipHTML(modelLabel(sc), sc.model_icon);
   var s = sc.settings || {};
   var kind = displayKind(sc);
-  if (kind) h += chip(iconFor(kind) + ' ' + kind);
+  // One chip says what and how many: "7 images", not "image" + "×7".
+  var many = sc.count > 1;
+  var noun = kind === '3d' ? '3D model' : kind === 'audio' ? 'track' : kind;
+  if (kind) h += chip(iconFor(kind) + ' ' + (many ? sc.count + ' ' + noun + 's' : (kind === '3d' ? '3D' : kind)));
   // Shot count when we know it, otherwise just say multishot is on — the
   // provider picks the count in that case, and showing nothing made an
   // enabled toggle look like it had not applied.
@@ -332,7 +341,7 @@ function renderChips(sc) {
     h += chip(face + ' ' + esc(voice));
   }
   if (s.mode) h += chip(esc(s.mode));
-  if (sc.count > 1) h += chip('×' + sc.count);
+  if (many && !kind) h += chip(sc.count + ' items');
   h += referenceHTML(sc);
   el('chips').innerHTML = h;
 }

package/src/tools/trends.js

@@ -30,7 +30,7 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 function trendTile(t) {
   const example = (t.examples || [])[0] || {};
-  const poster = t.cover?.image || example.poster || t.source_poster;
+  const poster = t.cover?.image || example.poster;
   return {
     id: t.slug,
     title: t.name,