npm - llm-api-gateway-cli - Versions diffs - 1.0.5 → 1.0.6 - Mend

llm-api-gateway-cli 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/public/mcp.html ADDED Viewed

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LLM API Gateway · MCP 工具</title>
+  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/mcp.css" />
+  <script>
+    // 防闪白：必须在首次绘制前把主题定下来（逻辑与 /theme.js 一致，各页面都一样）。
+    (() => {
+      try {
+        let t = localStorage.getItem('lgw.theme');
+        if (t !== 'dark' && t !== 'light') {
+          t = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        document.documentElement.setAttribute('data-theme', t);
+        document.documentElement.style.colorScheme = t;
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+      // 被 Tab 外壳嵌着时挂上 data-embed：styles.css 据此收起本页自己的顶栏（顶栏归外壳）
+      try {
+        if (new URLSearchParams(location.search).get('embed') === '1') {
+          document.documentElement.setAttribute('data-embed', '1');
+        }
+      } catch (e) {
+        /* 地址解析不了就当作没嵌入，页面照常独立使用 */
+      }
+    })();
+  </script>
+  <!-- 外部集成：地址上带 ?bg=<底色> 时按底色推导整套配色。必须是阻塞脚本（排在 theme.js 之前） -->
+  <script src="/tint.js"></script>
+  <script src="/theme.js" defer></script>
+</head>
+<body>
+  <div class="app">
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-head">
+        <a class="btn ghost block" href="/task" title="回到任务页（模型真读写你选的目录）">← 回到任务页</a>
+        <div class="mcp-field" style="margin:0">
+          <input id="mcp-search" type="search" spellcheck="false" autocomplete="off"
+                 placeholder="搜索工具 / 服务器" aria-label="搜索 MCP 工具" />
+        </div>
+      </div>
+      <div class="session-list" id="mcp-tools"></div>
+      <div class="sidebar-foot">
+        <span id="mcp-tool-count">工具 —</span>
+      </div>
+      <div class="store-line" id="mcp-gateway" title="">—</div>
+    </aside>
+    <main class="main">
+      <header class="topbar">
+        <div class="brand">
+          <span class="dot" id="mcp-dot"></span>
+          <h1>MCP 工具</h1>
+        </div>
+        <div class="topbar-actions">
+          <button class="btn ghost" id="mcp-reload" type="button" title="重新读一次绑定与工具清单">刷新</button>
+          <a class="btn ghost" href="/manual"
+             title="操作手册：三端指令对照与 MCP 子命令说明">手册</a>
+          <div class="theme-switch" role="group" aria-label="主题">
+            <button class="theme-btn" type="button" data-theme-option="system" title="跟随系统" aria-label="跟随系统">◐</button>
+            <button class="theme-btn" type="button" data-theme-option="light" title="白天" aria-label="白天">☀</button>
+            <button class="theme-btn" type="button" data-theme-option="dark" title="黑夜" aria-label="黑夜">☾</button>
+          </div>
+        </div>
+      </header>
+      <p class="mcp-banner" id="mcp-banner" hidden></p>
+      <section class="messages" id="mcp-body">
+        <div class="mcp-doc">
+          <div class="mcp-card">
+            <h2>这把密钥的 MCP（范围就是你这把 sk- 密钥，不是全局）</h2>
+            <div class="mcp-row">
+              <span>模式</span>
+              <select class="mcp-select" id="mcp-mode" aria-label="MCP 模式">
+                <option value="off">off · 本密钥不用 MCP</option>
+                <option value="inject">inject · 只把工具定义注入上游</option>
+                <option value="loop">loop · 网关代执行</option>
+              </select>
+              <button class="btn ghost tiny" id="mcp-mode-save" type="button">保存模式（不动绑定）</button>
+              <span id="mcp-enabled"></span>
+            </div>
+            <div class="mcp-row" id="mcp-selfserver">自助登记：—</div>
+            <p class="mcp-note">
+              密钥只存在服务端：这一页（浏览器）从不接触 <code>sk-</code>，所有动作都由本机服务代发给网关。
+            </p>
+          </div>
+          <div class="mcp-card">
+            <h2>已绑定 / 可自助加</h2>
+            <div id="mcp-bind-list"></div>
+            <div class="mcp-actions">
+              <button class="btn primary" id="mcp-bind-save" type="button" disabled>保存绑定</button>
+              <span class="mcp-note" id="mcp-bind-note">勾选后保存；只能在自己可选的范围内改。</span>
+            </div>
+          </div>
+          <div class="mcp-card">
+            <h2>我自建的（BYO-A：http/https 公网地址）</h2>
+            <div id="mcp-mine-list"></div>
+            <div class="mcp-actions" style="margin-top:10px">
+              <label class="mcp-field" style="flex:1;margin:0">
+                <span>名字（全局唯一，用于绑定与识别）</span>
+                <input id="mcp-add-name" spellcheck="false" autocomplete="off" placeholder="例如 my-wiki" />
+              </label>
+              <label class="mcp-field" style="flex:2;margin:0">
+                <span>URL（http/https，公网可达）</span>
+                <input id="mcp-add-url" spellcheck="false" autocomplete="off" placeholder="https://mcp.example.com/mcp" />
+              </label>
+            </div>
+            <label class="mcp-field" style="margin-top:8px">
+              <span>自定义请求头（可选，一行一个 <code>名字: 值</code>；值只发给网关，不回显）</span>
+              <textarea id="mcp-add-headers" rows="2" spellcheck="false"
+                        placeholder="Authorization: Bearer xxx"></textarea>
+            </label>
+            <div class="mcp-actions">
+              <button class="btn primary" id="mcp-add-save" type="button">登记并探测</button>
+              <span class="mcp-note">
+                能不能自助登记由网关决定；没开放时这里会告诉你怎么开（<code>.env</code> 的
+                <code>MCP_ALLOW_SELF_SERVERS=true</code> + 重启网关）。
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+  <script src="/mcp.js"></script>
+</body>
+</html>

package/public/mcp.js ADDED Viewed

@@ -0,0 +1,327 @@
+/**
+ * 网页 MCP 面板（/mcp）—— 用户视角
+ *
+ * 它对应终端里的 `/mcp`（bind / mode / add / rm），差别只有一个：
+ * 用网页的人不该被迫去终端敲命令，而**页面又绝不能碰 sk- 密钥**。
+ * 所以这一页只打本机的 `/api/mcp*`，由 hub 用服务端保存的密钥代发给网关
+ * （与 `/api/chat` 完全同一套姿势）。
+ *
+ * 纪律（与 manual.js / sessions.js 一致）：
+ *  · 一律 `textContent` —— 服务器名、探测错误、网关 detail 都是**数据**，不是 HTML；
+ *  · 不本地判断"能不能自助登记"：那是网关的事（`self_server.allowed`），页面只显示；
+ *  · 改完就重读（服务端已经重拉过清单，这里再拉一次绑定，保证页面上看到的是新的）。
+ */
+(function () {
+  'use strict';
+  var MODES = ['off', 'inject', 'loop'];
+  var SECRET_PARAMS = ['key', 'apikey', 'api_key', 'ak', 'sk', 'token', 'access_token', 'auth',
+    'authorization', 'password', 'passwd', 'pwd', 'secret', 'client_secret', 'sign', 'signature', 'sig'];
+  var dom = {
+    tools: document.getElementById('mcp-tools'),
+    toolCount: document.getElementById('mcp-tool-count'),
+    gateway: document.getElementById('mcp-gateway'),
+    dot: document.getElementById('mcp-dot'),
+    banner: document.getElementById('mcp-banner'),
+    mode: document.getElementById('mcp-mode'),
+    modeSave: document.getElementById('mcp-mode-save'),
+    enabled: document.getElementById('mcp-enabled'),
+    selfServer: document.getElementById('mcp-selfserver'),
+    bindList: document.getElementById('mcp-bind-list'),
+    bindSave: document.getElementById('mcp-bind-save'),
+    bindNote: document.getElementById('mcp-bind-note'),
+    mineList: document.getElementById('mcp-mine-list'),
+    addName: document.getElementById('mcp-add-name'),
+    addUrl: document.getElementById('mcp-add-url'),
+    addHeaders: document.getElementById('mcp-add-headers'),
+    addSave: document.getElementById('mcp-add-save'),
+    search: document.getElementById('mcp-search'),
+    reload: document.getElementById('mcp-reload'),
+  };
+  var state = { binding: null, tools: [], keyword: '', busy: false };
+  function el(tag, cls, content) {
+    var node = document.createElement(tag);
+    if (cls) node.className = cls;
+    if (content != null) node.textContent = String(content);
+    return node;
+  }
+  function banner(msg, kind) {
+    if (!dom.banner) return;
+    dom.banner.textContent = msg || '';
+    dom.banner.hidden = !msg;
+    dom.banner.className = 'mcp-banner' + (kind ? ' ' + kind : '');
+  }
+  /** 只用于**显示**的掩码（真正的掩码在服务端 lib/mcpadmin.js；这里是给页面自己回显用的） */
+  function maskUrl(url) {
+    var raw = String(url == null ? '' : url);
+    if (!raw) return '';
+    try {
+      var u = new URL(raw);
+      var keys = [];
+      u.searchParams.forEach(function (_v, k) { keys.push(k); });
+      if (!keys.length) return u.origin + u.pathname;
+      return u.origin + u.pathname + '?' + keys.map(function (k) {
+        return k + '=' + (SECRET_PARAMS.indexOf(k.toLowerCase()) >= 0 ? '***' : u.searchParams.get(k));
+      }).join('&');
+    } catch (e) {
+      return raw.replace(/([?&])([A-Za-z0-9_.\-]+)=([^&\s]*)/g, function (m, sep, name, value) {
+        return SECRET_PARAMS.indexOf(String(name).toLowerCase()) >= 0 ? sep + name + '=***' : m;
+      });
+    }
+  }
+  function api(method, path, body) {
+    return fetch(path, {
+      method: method,
+      headers: body ? { 'content-type': 'application/json' } : undefined,
+      body: body ? JSON.stringify(body) : undefined,
+    }).then(function (resp) {
+      return resp.json().catch(function () { return {}; }).then(function (data) {
+        if (!resp.ok) {
+          var err = new Error((data && data.error) || ('HTTP ' + resp.status));
+          err.status = resp.status;
+          err.hint = (data && data.hint) || '';
+          throw err;
+        }
+        return data;
+      });
+    });
+  }
+  function fail(e) {
+    banner(e.message + (e.hint ? '　· ' + e.hint : ''), 'danger');
+  }
+  /* ---------- 渲染 ---------- */
+  function serverMeta(s) {
+    var bits = [];
+    if (Number.isFinite(Number(s && s.tool_count))) bits.push(Number(s.tool_count) + ' 个工具');
+    if (s && s.enabled === false) bits.push('已停用');
+    if (s && s.owner === 'self') bits.push('自建');
+    else if (s && s.self_service) bits.push('可自助');
+    return bits.join(' · ');
+  }
+  function renderTools() {
+    var kw = state.keyword.toLowerCase();
+    var rows = state.tools.filter(function (t) {
+      if (!kw) return true;
+      return (t.name + ' ' + t.server + ' ' + t.tool + ' ' + t.description).toLowerCase().indexOf(kw) >= 0;
+    });
+    dom.tools.textContent = '';
+    if (!rows.length) {
+      dom.tools.appendChild(el('p', 'store-line', state.tools.length ? '没有匹配的工具' : '这把密钥现在没有可用工具'));
+      return;
+    }
+    rows.forEach(function (t) {
+      var box = el('span', 'mcp-tool');
+      box.appendChild(el('b', null, t.name));
+      var meta = [t.server, t.tool].filter(Boolean).join('/');
+      if (meta) box.appendChild(el('span', null, '  [' + meta + ']'));
+      if (t.description) box.appendChild(el('span', null, '  ' + t.description));
+      dom.tools.appendChild(box);
+    });
+  }
+  function renderBinding() {
+    var b = state.binding;
+    dom.bindList.textContent = '';
+    dom.mineList.textContent = '';
+    if (!b) {
+      dom.bindList.appendChild(el('p', 'store-line', '读不到绑定信息（见上面的红色提示）'));
+      dom.mineList.appendChild(el('p', 'store-line', '—'));
+      dom.mode.value = 'off';
+      dom.selfServer.textContent = '自助登记：—';
+      dom.bindSave.disabled = true;
+      return;
+    }
+    dom.mode.value = MODES.indexOf(b.mode) >= 0 ? b.mode : 'off';
+    dom.enabled.textContent = b.enabled === false ? '（总开关：关）' : '（总开关：开）';
+    var s = b.selfServer || {};
+    dom.selfServer.textContent = s.allowed
+      ? '自助登记：开放（' + (s.used || 0) + '/' + (s.max || 0) + ' 台）'
+      : '自助登记：未开放（部署方在网关 .env 设 MCP_ALLOW_SELF_SERVERS=true 并重启网关后才可用）';
+    dom.selfServer.className = 'mcp-row' + (s.allowed ? '' : ' mcp-note');
+    // 可勾选的集合：已绑定 ∪ 可自助加（后者勾上就是"加"）
+    var byId = {};
+    (b.bound || []).forEach(function (x) { byId[Number(x.id)] = { s: x, bound: true }; });
+    (b.addable || []).forEach(function (x) {
+      var id = Number(x.id);
+      if (!byId[id]) byId[id] = { s: x, bound: false };
+    });
+    var ids = Object.keys(byId).map(Number).sort(function (a, c) { return a - c; });
+    if (!ids.length) {
+      dom.bindList.appendChild(el('p', 'store-line', '这把密钥一台都没绑；管理员也没把它标成可自助。'));
+    }
+    ids.forEach(function (id) {
+      var it = byId[id];
+      var row = el('label', 'mcp-item');
+      var cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.checked = it.bound;
+      cb.setAttribute('data-id', String(id));
+      cb.addEventListener('change', function () { dom.bindSave.disabled = false; });
+      row.appendChild(cb);
+      row.appendChild(el('span', 'name', '#' + id + ' ' + (it.s.name || '')));
+      row.appendChild(el('span', 'meta', serverMeta(it.s)));
+      if (it.bound) row.appendChild(el('span', 'mcp-tag', '已绑定'));
+      else row.appendChild(el('span', 'mcp-tag off', '可加'));
+      dom.bindList.appendChild(row);
+    });
+    var selectable = (b.selectableIds || []).length;
+    dom.bindNote.textContent = selectable
+      ? '网关允许你在这 ' + selectable + ' 台里选（勾选后保存）。'
+      : '网关没有给你可选项。';
+    if (!(b.mine || []).length) {
+      dom.mineList.appendChild(el('p', 'store-line', '你还没有登记过服务器 —— 用下面的表单加一台。'));
+    }
+    (b.mine || []).forEach(function (m) {
+      var row = el('div', 'mcp-item');
+      row.appendChild(el('span', 'name', '#' + m.id + ' ' + (m.name || '')));
+      row.appendChild(el('span', 'meta', serverMeta(m)));
+      row.appendChild(el('span', 'spacer'));
+      var del = el('button', 'btn ghost tiny', '删除');
+      del.type = 'button';
+      del.addEventListener('click', function () {
+        if (!window.confirm('删掉 #' + m.id + ' ' + (m.name || '') + '？删完还要重新探测才能恢复。')) return;
+        run(function () {
+          return api('DELETE', '/api/mcp/servers/' + encodeURIComponent(m.id)).then(function (r) {
+            banner('已删除（现有 ' + r.toolCount + ' 个工具）', 'ok');
+          });
+        });
+      });
+      row.appendChild(del);
+      dom.mineList.appendChild(row);
+    });
+    dom.bindSave.disabled = true;
+  }
+  /* ---------- 动作 ---------- */
+  function run(fn) {
+    if (state.busy) return Promise.resolve();
+    state.busy = true;
+    return Promise.resolve()
+      .then(fn)
+      .then(load)
+      .catch(fail)
+      .then(function () { state.busy = false; });
+  }
+  function checkedIds() {
+    var out = [];
+    var boxes = dom.bindList.querySelectorAll('input[type=checkbox]');
+    for (var i = 0; i < boxes.length; i++) {
+      if (boxes[i].checked) out.push(Number(boxes[i].getAttribute('data-id')));
+    }
+    return out;
+  }
+  function parseHeaders(text) {
+    var out = {};
+    String(text || '').split('\n').forEach(function (line) {
+      var s = line.trim();
+      if (!s) return;
+      var idx = s.indexOf(':');
+      if (idx <= 0) throw Object.assign(new Error('自定义头要写成 "名字: 值"，这一行不认识：' + s), { hint: '' });
+      out[s.slice(0, idx).trim()] = s.slice(idx + 1).trim();
+    });
+    return out;
+  }
+  function load() {
+    return api('GET', '/api/mcp').then(function (data) {
+      state.binding = data.binding;
+      state.tools = Array.isArray(data.tools) ? data.tools : [];
+      dom.dot.className = 'dot ok';
+      dom.toolCount.textContent = '工具 ' + state.tools.length;
+      dom.gateway.textContent = '密钥与网关地址都由服务端代发（本页不接触密钥）';
+      renderBinding();
+      renderTools();
+      if (data.bindingError) {
+        banner('绑定信息读不到：' + data.bindingError.error + (data.bindingError.hint ? '　· ' + data.bindingError.hint : ''), 'danger');
+      } else if (data.toolsError) {
+        banner('工具清单读不到：' + data.toolsError, 'danger');
+      } else {
+        banner('');
+      }
+    }).catch(function (e) {
+      dom.dot.className = 'dot err';
+      dom.toolCount.textContent = '工具 —';
+      dom.gateway.textContent = e.status === 403 ? '接口已禁用（服务未绑定在本机地址）' : '读不到';
+      fail(e);
+      state.binding = null;
+      state.tools = [];
+      renderBinding();
+      renderTools();
+    });
+  }
+  dom.bindSave.addEventListener('click', function () {
+    var ids = checkedIds();
+    run(function () {
+      return api('PATCH', '/api/mcp/binding', { serverIds: ids }).then(function (r) {
+        banner('已改绑：' + (ids.length ? ids.map(function (i) { return '#' + i; }).join('、') : '（空 = 不绑任何服务器）')
+          + '　现有 ' + r.toolCount + ' 个工具', 'ok');
+      });
+    });
+  });
+  dom.modeSave.addEventListener('click', function () {
+    var mode = dom.mode.value;
+    run(function () {
+      return api('PATCH', '/api/mcp/binding', { mode: mode }).then(function (r) {
+        banner('已把模式改成 ' + mode + '（绑定没动）　现有 ' + r.toolCount + ' 个工具', 'ok');
+      });
+    });
+  });
+  dom.addSave.addEventListener('click', function () {
+    var name = String(dom.addName.value || '').trim();
+    var url = String(dom.addUrl.value || '').trim();
+    if (!name || !url) {
+      banner('名字和 URL 都要填（URL 必须是 http/https 公网可达地址）', 'danger');
+      return;
+    }
+    var headers;
+    try {
+      headers = parseHeaders(dom.addHeaders.value);
+    } catch (e) {
+      banner(e.message, 'danger');
+      return;
+    }
+    run(function () {
+      banner('登记中：' + name + ' ← ' + maskUrl(url), '');
+      return api('POST', '/api/mcp/servers', { name: name, url: url, headers: headers }).then(function (r) {
+        dom.addName.value = '';
+        dom.addUrl.value = '';
+        dom.addHeaders.value = '';
+        var msg = '已登记 #' + (r.server && r.server.id) + ' ' + ((r.server && r.server.name) || name)
+          + '（工具 ' + ((r.server && r.server.tool_count) || 0) + ' 个），并已绑到这把密钥　现有 ' + r.toolCount + ' 个工具';
+        if (r.probeError) {
+          banner(msg + '　· 探测失败（已置为停用）：' + r.probeError, 'danger');
+        } else {
+          banner(msg, 'ok');
+        }
+      });
+    });
+  });
+  dom.reload.addEventListener('click', function () { run(function () { return Promise.resolve(); }); });
+  dom.search.addEventListener('input', function () {
+    state.keyword = String(dom.search.value || '').trim();
+    renderTools();
+  });
+  load();
+})();

package/public/sessions.css ADDED Viewed

@@ -0,0 +1,198 @@
+/**
+ * 命令行会话（/sessions）只读页
+ *
+ * 只用 styles.css 里的变量取色，不定义新变量、不写裸颜色 —— 与另外三个页面同一套主题契约
+ * （tests/theme.test.mjs 的「选择器里没有裸的十六进制颜色 / 裸的 rgba」对本文件同样成立）。
+ * 布局骨架复用 styles.css 的 .app / .sidebar / .main / .topbar / .messages / .empty。
+ */
+.cs-filter input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-raised);
+  color: var(--text);
+  font-size: 12px;
+}
+.cs-list-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 1px solid transparent;
+  background: none;
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  padding: 8px;
+  margin-bottom: 4px;
+  cursor: pointer;
+  transition: background var(--t), border-color var(--t);
+}
+.cs-list-item:hover { background: var(--bg-raised); }
+.cs-list-item.active {
+  background: var(--accent-soft);
+  border-color: var(--border-focus);
+}
+.cs-item-title {
+  display: block;
+  font-size: 12px;
+  font-family: var(--mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;      /* 路径太长时优先露出尾部（目录名更有信息量） */
+  text-align: left;
+}
+.cs-item-meta {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.cs-item-tag {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border-radius: 999px;
+  font-size: 10px;
+  background: var(--warn-soft-strong);
+  color: var(--warn);
+}
+.cs-banner {
+  margin: 0;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+  color: var(--text-dim);
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+.cs-banner.danger {
+  background: var(--danger-soft);
+  border-bottom-color: var(--danger-border);
+  color: var(--danger);
+}
+.cs-banner b { color: var(--text); }
+.cs-cmd {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 4px;
+}
+.cs-cmd code {
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+.cs-doc {
+  padding: 4px 0 40px;
+}
+.cs-head {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-soft);
+  padding: 12px 14px;
+  margin-bottom: 14px;
+}
+.cs-head h2 {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-family: var(--mono);
+  word-break: break-all;
+}
+.cs-head-row {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.9;
+}
+.cs-head-row code {
+  font-family: var(--mono);
+  color: var(--text);
+}
+.cs-msg {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 10px;
+  overflow: hidden;
+  background: var(--bg-soft);
+}
+.cs-msg-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--bg-code);
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.cs-role {
+  font-weight: 600;
+  color: var(--text);
+}
+.cs-content {
+  padding: 10px;
+  font-size: 13px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 420px;
+  overflow: auto;
+  color: var(--text);
+}
+.cs-content.clamped { max-height: 180px; }
+.cs-tool {
+  border-top: 1px dashed var(--border-dashed);
+  padding: 8px 10px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 260px;
+  overflow: auto;
+}
+.cs-tool b { color: var(--accent); }
+.cs-toggle {
+  margin-left: auto;
+  border: 1px solid var(--border);
+  background: none;
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  font-size: 11px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+.cs-toggle:hover { color: var(--text); border-color: var(--border-strong); }
+.cs-sys { color: var(--text-faint); }