@kolbo/mcp 1.106.3 → 1.106.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolbo/mcp",
-  "version": "1.106.3",
+  "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);
 }

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/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,