@jesonliu/lark-claudecode-bridge 1.4.3 → 2.0.0

package/assets/web/js/pages/permissions.js

@@ -1,7 +1,11 @@
 // ============ 权限（页内一级 tab：免确认工具 / 危险命令黑名单） ============
+// 改动即时保存并热生效；「全部工具免确认」缺省开启（显式 false 才算关闭），开启时黑名单是唯一安全网。
 import { S, $, esc, toast, saveDoc } from '../core.js';
 import { confirmDialog } from '../ui.js';
 
+const svg = (inner, s = 14) => `<svg viewBox="0 0 24 24" width="${s}" height="${s}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg>`;
+const IC_INFO = '<circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M12 12v4"/>';
+
 let permTab = 'allow'; // tab 状态：切换 / 重渲染保持
 function renderPermissions(el) {
   const p = S.doc.permissions || (S.doc.permissions = {});
@@ -10,7 +14,7 @@ function renderPermissions(el) {
   el.innerHTML = `
   <div class="tabs">
     <button data-t="allow" class="${permTab === 'allow' ? 'active' : ''}">免确认工具</button>
-    <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单</button>
+    <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单 <span class="tag off" style="margin-left:4px">${p.dangerous_commands.length}</span></button>
   </div>
   <div id="permPanel"></div>`;
   el.querySelectorAll('.tabs button').forEach((b) =>
@@ -26,28 +30,30 @@ function renderAllowTab(panel, p) {
   // 缺省即开（与后端 DEFAULT_ALLOW_ALL_TOOLS 一致）：只有显式 false 才算用户主动关闭
   const allOn = p.allow_all_tools !== false;
   panel.innerHTML = `
-  <div class="card">
-    <h3>免确认工具</h3>
-    <div class="switch-row">
-      <label class="switch">
-        <input type="checkbox" id="allowAll" ${allOn ? 'checked' : ''}>
-        <span class="track"></span>
-      </label>
-      <span class="switch-label">全部工具免确认（除危险命令黑名单外）</span>
-    </div>
-    ${allOn ? '<div style="background:var(--warn-bg);color:var(--warn-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 已开启全部放行：除命中危险命令黑名单的 Bash 外，所有工具（含 Write/Edit）都不再弹确认卡，下方名单暂不生效</div>' : ''}
-    <div class="${allOn ? 'block-disabled' : ''}">
-      <div class="desc">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
-      <div class="list-toolbar">
-        <input type="text" id="newTool" placeholder="工具名，如 Write" style="max-width:320px">
-        <button class="btn" id="addTool">添加</button>
-        <button class="btn" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+  <div class="panel">
+    <header class="panel-head"><h3>免确认工具</h3>
+      <div class="panel-actions">
+        ${isDefault ? '<span class="tag off">与内置默认一致</span>' : ''}
+        <span class="tip" data-tip="开启后除命中黑名单的 Bash 外，所有工具（含写入）都不再弹确认卡">${svg(IC_INFO)}</span>
+      </div></header>
+    <div class="panel-body">
+      <div class="switch-row" style="margin-top:0">
+        <label class="switch"><input type="checkbox" id="allowAll" ${allOn ? 'checked' : ''}><span class="track"></span></label>
+        <span class="switch-label">全部工具免确认（除危险命令黑名单外）</span>
+      </div>
+      ${allOn ? '<div class="banner warn" style="margin:8px 0"><span>已开启全部放行——下方名单暂不生效，黑名单是唯一安全网。</span></div>' : ''}
+      <div style="${allOn ? 'opacity:.45;pointer-events:none' : ''}">
+        <div class="desc" style="margin:8px 0 4px">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
+        <table><tbody id="toolBody"></tbody></table>
+        ${p.allow_tools.length === 0 ? '<div class="banner warn" style="margin:8px 0"><span>⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</span></div>' : ''}
+        <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
+          <input type="text" id="newTool" placeholder="工具名，如 Write" style="max-width:300px">
+          <button class="btn" id="addTool">添加</button>
+          <button class="btn" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+        </div>
       </div>
-      ${p.allow_tools.length === 0 ? '<div style="background:var(--warn-bg);color:var(--warn-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</div>' : ''}
-      ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
-      <table><tbody id="toolBody"></tbody></table>
     </div>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：${allOn ? '全部免确认已开启，除危险命令外一律直通' : '白名单命中直通，未命中弹确认卡'}。</div>
+    <footer class="panel-foot">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。plan 模式下写操作仍会经此判定：${allOn ? '全部免确认已开启，除危险命令外一律直通' : '白名单命中直通，未命中弹确认卡'}。</footer>
   </div>`;
   $('#toolBody').innerHTML = p.allow_tools.map((t, i) =>
     `<tr><td><code>${esc(t)}</code></td><td style="width:80px"><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
@@ -112,18 +118,19 @@ function renderDangerTab(panel, p) {
   const defaults = S.status?.permissionDefaults?.dangerousCommands || [];
   const isDefault = defaults.length > 0 && JSON.stringify(p.dangerous_commands) === JSON.stringify(defaults);
   panel.innerHTML = `
-  <div class="card">
-    <h3>危险命令黑名单</h3>
-    <div class="desc">正则源串（不区分大小写），命中即弹确认卡。删除正则 = 放宽对应命令为直通，请谨慎。</div>
-    <div class="list-toolbar">
-      <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force" style="max-width:480px">
-      <button class="btn" id="addDc">添加</button>
-      <button class="btn" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+  <div class="panel">
+    <header class="panel-head"><h3>危险命令黑名单</h3>
+      <div class="panel-actions"><span class="tip" data-tip="正则（不区分大小写），命中的 Bash 命令弹确认卡">${svg(IC_INFO)}</span></div></header>
+    <div class="panel-body">
+      ${p.dangerous_commands.length === 0 ? '<div class="banner err" style="margin-bottom:10px"><span>黑名单为空——所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之。</span></div>' : ''}
+      <table><tbody id="dcBody"></tbody></table>
+      <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap">
+        <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force" style="max-width:420px">
+        <button class="btn" id="addDc">添加</button>
+        <button class="btn" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button>
+      </div>
     </div>
-    ${p.dangerous_commands.length === 0 ? '<div style="background:var(--err-bg);color:var(--err-tx);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 黑名单为空：所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之</div>' : ''}
-    ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
-    <table><tbody id="dcBody"></tbody></table>
-    <div class="footer-note">权限改动即时保存并热生效（已有会话的下一个工具调用即用新名单）。「全部工具免确认」开启时本黑名单是唯一的安全网——删除正则等于放行对应命令。</div>
+    <footer class="panel-foot">正则源串不区分大小写，命中即弹确认卡；删除正则 = 放宽对应命令为直通，请谨慎。改动即时保存并热生效。「全部工具免确认」开启时本黑名单是唯一的安全网。</footer>
   </div>`;
   $('#dcBody').innerHTML = p.dangerous_commands.map((s, i) =>
     `<tr><td style="width:90%"><code>${esc(s)}</code></td><td><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
@@ -165,6 +172,7 @@ function renderDangerTab(panel, p) {
 export const page = {
   id: 'permissions',
   title: '权限',
+  desc: '工具免确认名单与危险命令黑名单，改动即时生效',
   icon: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
   render: renderPermissions,
 };

package/assets/web/js/pages/plugins.js

@@ -1,48 +1,58 @@
-// ============ 插件 ============
+// ============ 插件（已装列表 + 管理市场 / 从市场安装 双卡；市场卡在左：先添加市场再安装） ============
 import { $, esc, toast, api } from '../core.js';
 import { confirmDialog } from '../ui.js';
 
 // 点击 combobox 之外收起面板的监听只注册一次（模块级标志，等价原 document.body 标记法）
 let comboHideBound = false;
+let badgeCount = 0; // 有新版本的插件数（导航徽标；进过本页后可见）
 
 async function renderPlugins(el) {
   el.innerHTML = `
-  <div class="card">
-    <h3>Claude Code 插件 <button class="btn sm" id="plCheckUpdate" style="margin-left:8px">检查更新</button></h3>
-    <div class="desc">两处目录的已启用插件都会自动加载（managed 托管目录优先）：本机 <code>~/.claude</code>（来源「本机」，与本机 claude CLI 共用）与 bridge 托管目录 <code id="pluginDir">…</code>。装好后下一条消息自动加载。飞书端同样可用 <code>/plugin install xxx@marketplace</code>（仅管理员）。打开页面在后台自动检查远程市场新版本（不阻塞列表，5 分钟内不重复；只检测不升级，升级点单行「更新」）。</div>
-    <div class="hint" id="plSyncNote" hidden style="margin:6px 0"></div>
-    <table><thead><tr><th>插件</th><th>市场</th><th>来源</th><th>版本</th><th style="width:90px">状态</th><th style="width:250px">操作</th></tr></thead>
-    <tbody id="plBody"><tr><td colspan="6" class="hint">加载中…</td></tr></tbody></table>
+  <div class="panel">
+    <header class="panel-head"><h3>已安装插件</h3>
+      <div class="panel-actions"><button class="btn sm" id="plCheckUpdate">检查更新</button></div></header>
+    <div class="panel-body">
+      <div class="hint" id="plSyncNote" hidden style="margin:0 0 8px"></div>
+      <table><thead><tr><th>插件</th><th style="width:120px">市场</th><th style="width:130px">来源</th><th style="width:170px">版本</th><th style="width:90px">状态</th><th style="width:230px">操作</th></tr></thead>
+      <tbody id="plBody"><tr><td colspan="6" class="hint">加载中…</td></tr></tbody></table>
+    </div>
+    <footer class="panel-foot">两处目录的已启用插件都会自动加载（managed 托管目录优先）：本机 <code>~/.claude</code> 与 bridge 托管目录 <code id="pluginDir">…</code>。启停 / 更新后<b>下一条消息生效</b>，无须重启；飞书端亦可用 <code>/plugin install xxx@marketplace</code>（仅管理员）。</footer>
   </div>
-  <div class="card">
-    <h3>安装 / 市场</h3>
-    <div class="desc">安装来源为已添加的市场：新插件先「添加市场」，再从下拉选择安装。</div>
-    <label>从市场安装插件</label>
-    <div class="row" style="max-width:760px">
-      <div class="combo">
-        <input type="text" id="plInstall" placeholder="（加载中…）" autocomplete="off">
-        <div class="combo-panel" id="plInstallPanel" hidden></div>
+  <div class="grid2" style="gap:16px;align-items:start">
+    <div class="panel" style="margin:0">
+      <header class="panel-head"><h3>管理市场</h3></header>
+      <div class="panel-body">
+        <div class="mini-note" style="margin-bottom:10px">安装来源为已添加的市场：新插件先在这里「添加市场」，再到右侧安装。</div>
+        <label class="fld">添加市场（git 地址或本机路径）</label>
+        <div class="input-btn"><input type="text" id="plMarket" placeholder="https://github.com/…/marketplace"><button class="btn" id="plDoMarketAdd">添加</button></div>
+        <label class="fld" style="margin-top:12px">目标目录</label>
+        <div class="input-btn"><select id="plMarketDir">
+          <option value="user" selected>本机 ~/.claude</option>
+          <option value="bridge">bridge 托管目录</option>
+        </select><button class="btn" id="plDoMarketUpdate">全部更新</button></div>
+        <div class="mini-note" style="margin-top:8px">「全部更新」= 刷新市场索引 + 逐个更新该目录所有已装插件。</div>
       </div>
-      <select id="plDir" style="max-width:170px">
-        <option value="user" selected>装到本机 ~/.claude</option>
-        <option value="bridge">装到 bridge 托管目录</option>
-      </select>
-      <button class="btn primary" id="plDoInstall">安装</button>
     </div>
-    <div class="hint" style="margin:6px 0">默认装本机 ~/.claude：本机 claude CLI 与桥接器两处共用一份，无须安装两次。装好后下一条消息自动加载。</div>
-    <label style="margin-top:14px">管理市场</label>
-    <div class="row" style="max-width:760px">
-      <input type="text" id="plMarket" placeholder="marketplace git 地址或本机路径">
-      <select id="plMarketDir" style="max-width:170px">
-        <option value="user" selected>本机 ~/.claude</option>
-        <option value="bridge">bridge 托管目录</option>
-      </select>
-      <button class="btn" id="plDoMarketAdd">添加市场</button>
-      <button class="btn" id="plDoMarketUpdate">全部更新</button>
+    <div class="panel" style="margin:0">
+      <header class="panel-head"><h3>从市场安装</h3></header>
+      <div class="panel-body">
+        <label class="fld">搜索插件 <span class="tip" data-tip="候选来自已添加市场的全部插件；也可在飞书端 /plugin install xxx@marketplace（仅管理员）">ⓘ</span></label>
+        <div class="input-btn" style="align-items:flex-start">
+          <div class="combo" style="flex:1;min-width:0">
+            <input type="text" id="plInstall" placeholder="（加载中…）" autocomplete="off">
+            <div class="combo-panel" id="plInstallPanel" hidden></div>
+          </div>
+        </div>
+        <label class="fld" style="margin-top:12px">安装到</label>
+        <select id="plDir">
+          <option value="user" selected>本机 ~/.claude（推荐：本机 CLI 与桥接器共用一份）</option>
+          <option value="bridge">bridge 托管目录</option>
+        </select>
+        <div style="margin-top:12px"><button class="btn primary" id="plDoInstall">安装</button></div>
+      </div>
     </div>
-    <div class="hint" style="margin:6px 0">「全部更新」= 刷新市场索引 + 逐个更新该目录所有已装插件。</div>
-    <pre class="report" id="plReport" style="display:none;margin-top:12px"></pre>
-  </div>`;
+  </div>
+  <pre class="report" id="plReport" style="display:none;margin-top:0"></pre>`;
   const report = (title, text) => {
     $('#plReport').style.display = '';
     $('#plReport').textContent = `${title}\n${text}`;
@@ -65,11 +75,12 @@ async function renderPlugins(el) {
   /** 渲染已装插件表（本地秒出与后台刷新完成两条路径共用；入参 /api/plugins 响应） */
   const renderList = (r) => {
     installed = r.plugins || [];
+    badgeCount = installed.filter((p) => p.latestVersion).length;
     $('#pluginDir').textContent = r.configDir;
     const body = $('#plBody');
     if (!body) return; // 页面已切走（后台刷新回调晚于切页）
     if (!installed.length) {
-      body.innerHTML = '<tr><td colspan="6" class="hint">尚未安装任何插件</td></tr>';
+      body.innerHTML = '<tr class="empty"><td colspan="6">尚未安装任何插件</td></tr>';
       return;
     }
     body.innerHTML = installed.map((p) => `
@@ -77,9 +88,9 @@ async function renderPlugins(el) {
         <td><b>${esc(p.name)}</b></td>
         <td>${esc(p.marketplace || '-')}</td>
         <td>${p.source === 'bridge' ? '<span class="tag warn">bridge 托管</span>' : '<span class="tag off">本机 ~/.claude</span>'}</td>
-        <td class="hint">${esc(p.version || '-')}${p.latestVersion ? ` <span class="tag warn">→ ${esc(p.latestVersion)}</span>` : ''}</td>
+        <td><span class="mono">${esc(p.version || '-')}</span>${p.latestVersion ? ` <span class="tag warn">→ ${esc(p.latestVersion)}</span>` : ''}</td>
         <td>${p.enabled ? '<span class="tag ok">已启用</span>' : '<span class="tag off">未启用</span>'}</td>
-        <td>
+        <td class="ops">
           <button class="btn sm" data-op="update" data-arg="${esc(p.key)}" data-dir="${p.source}">更新</button>
           <button class="btn sm" data-op="${p.enabled ? 'disable' : 'enable'}" data-arg="${esc(p.key)}" data-dir="${p.source}">${p.enabled ? '停用' : '启用'}</button>
           <button class="btn sm danger" data-op="uninstall" data-arg="${esc(p.key)}" data-dir="${p.source}">卸载</button>
@@ -263,7 +274,7 @@ async function renderPlugins(el) {
         }
       }
       $('#plDoInstall').disabled = !available.length;
-      input.placeholder = available.length ? '输入关键词搜索插件，从结果中选择' : '（请先在下方添加市场）';
+      input.placeholder = available.length ? '输入关键词搜索插件，从结果中选择' : '（请先在左侧添加市场）';
     } catch (e) {
       available = [];
       $('#plDoInstall').disabled = true;
@@ -360,6 +371,9 @@ async function renderPlugins(el) {
 export const page = {
   id: 'plugins',
   title: '插件',
+  desc: '两处目录的 Claude Code 插件统一管理，改动下一条消息自动生效',
+  legend: false,
+  badge: () => (badgeCount ? `<span class="nav-badge">${badgeCount}</span>` : ''),
   icon: '<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z"/>',
   render: renderPlugins,
 };

package/assets/web/js/pages/skills.js

@@ -1,10 +1,12 @@
-// ============ Skills 管理页（#12）============
+// ============ Skills 管理 ============
 // 后端：GET /api/skills · POST /api/skills/action（create/delete）· POST /api/skills/import（zip）
 // 四来源：用户级·本机（~/.claude/skills）/ 用户级·bridge（managed 生效目录）/ 项目级（工作区 .claude/skills）/
 // 已装插件内（<plugin-installPath>/skills；plugin 只读，未启用时标「（未启用）」）。
-// 远端 CRUD：改动即时落盘，无页内保存条
+// 搜索只匹配「名称 + 说明」两列；过滤只切换行显隐不重建 DOM（兼容中文输入法组合输入）。
+// 远端 CRUD：改动即时落盘，无页内保存条。
 import { $, esc, toast, api } from '../core.js';
 import { openDrawer, closeDrawer, confirmDialog, promptDialog } from '../ui.js';
+import { renderMarkdown } from '../markdown.js';
 
 /** 来源标签（function：plugin 来源需要拼插件名与启用状态） */
 const SOURCE_TAG = {
@@ -17,34 +19,46 @@ const sourceTag = (s) => {
   if (s.source === 'plugin') return `插件 · ${esc(s.pluginName || '?')}${s.pluginEnabled ? '' : '（未启用）'}`;
   return SOURCE_TAG[s.source] || s.source;
 };
+const sourceTagClass = (s) => (s.source === 'bridge' ? 'info' : s.source === 'plugin' ? (s.pluginEnabled ? 'off' : 'warn') : 'ghost');
 /** 来源是否可删（project / plugin 只读；其他用户级可删） */
 const isDeletable = (s) => s.source !== 'project' && s.source !== 'plugin';
 
 function renderSkills(el) {
   el.innerHTML = `
-  <div class="card">
-    <h3>Skills</h3>
-    <div class="desc">Claude Code 技能（每项一个目录，含 SKILL.md）。列表聚合四个来源：本机用户级、bridge 自管用户级、各工作区项目级、已装插件内的 skills（只读展示）。新增（含 zip 导入）统一进用户级生效目录。</div>
-    <div class="list-toolbar">
-      <button class="btn" id="skillImport">导入 zip</button>
-      <button class="btn primary" id="skillAdd">+ 新建</button>
+  <div class="panel">
+    <header class="panel-head"><h3>技能列表</h3>
+      <div class="panel-actions">
+        <input type="search" id="skillSearch" placeholder="过滤：名称 / 说明…" style="width:210px;padding:4px 10px;font-size:12.5px">
+        <button class="btn sm" id="skillImport">导入 zip</button>
+        <button class="btn primary sm" id="skillAdd">＋ 新建</button>
+      </div></header>
+    <div class="panel-body">
+      <input type="file" id="skillZipFile" accept=".zip" style="display:none">
+      <table><thead><tr>
+        <th style="width:220px">名字</th><th>说明</th><th style="width:190px">来源</th><th style="width:130px">操作</th>
+      </tr></thead>
+        <tbody id="skillBody"><tr><td colspan="4" class="hint">加载中…</td></tr></tbody>
+      </table>
+      <div class="mini-note" id="skillEffective" style="margin-top:10px"></div>
     </div>
-    <input type="file" id="skillZipFile" accept=".zip" style="display:none">
-    <input type="search" class="list-search" id="skillSearch" placeholder="按名字 / 来源 / 路径过滤…">
-    <table><thead><tr>
-      <th style="width:170px">名字</th><th>说明</th><th style="width:130px">来源</th><th style="width:240px">路径</th><th style="width:130px"></th>
-    </tr></thead>
-      <tbody id="skillBody"><tr><td colspan="5" class="desc">加载中…</td></tr></tbody>
-    </table>
-    <div class="desc" id="skillEffective" style="margin-top:10px"></div>
+    <footer class="panel-foot">新增 / 导入统一落盘用户级生效目录；项目级与插件内来源只读。改动即时生效。</footer>
   </div>`;
   $('#skillAdd').onclick = addSkill;
-  $('#skillSearch').oninput = filterSkillRows;
+  bindSearch();
   bindZipImport();
   void loadSkills();
 }
 
-/** 搜索过滤：遍历 tr.dataset.searchText 切换 hidden */
+/** 搜索过滤：只匹配名称+说明；只切换 tr 显隐不重建 DOM；组合输入（中文 IME）期间暂停 */
+function bindSearch() {
+  const inp = $('#skillSearch');
+  let composing = false;
+  inp.addEventListener('compositionstart', () => { composing = true; });
+  inp.addEventListener('compositionend', () => { composing = false; filterSkillRows(); });
+  inp.oninput = () => { if (!composing) filterSkillRows(); };
+}
+
+/** 搜索过滤：遍历 tr.dataset.searchText 切换 hidden（关键词只命中名称与说明） */
 function filterSkillRows() {
   const q = ($('#skillSearch').value || '').trim().toLowerCase();
   const body = $('#skillBody');
@@ -70,7 +84,7 @@ async function loadSkills() {
   try {
     data = await api('GET', '/api/skills');
   } catch (e) {
-    body.innerHTML = `<tr><td colspan="5" class="desc">加载失败：${esc(e.message)}</td></tr>`;
+    body.innerHTML = `<tr><td colspan="4" class="hint">加载失败：${esc(e.message)}</td></tr>`;
     return;
   }
   const eff = $('#skillEffective');
@@ -83,22 +97,21 @@ async function loadSkills() {
   }
   const skills = data.skills || [];
   if (skills.length === 0) {
-    body.innerHTML = `<tr class="empty-row"><td colspan="5" class="desc">暂无 skill（四个来源均未发现 SKILL.md）。可点上方「+ 新建」或「导入 zip」。</td></tr>`;
+    body.innerHTML = `<tr class="empty-row"><td colspan="4" class="empty">暂无 skill（四个来源均未发现 SKILL.md）<br><span class="mini-note">可点右上「＋ 新建」或「导入 zip」。</span></td></tr>`;
     return;
   }
   body.innerHTML = '';
   for (const s of skills) {
-    const tag = sourceTag(s);
     const tr = document.createElement('tr');
-    tr.dataset.searchText = `${s.name} ${sourceTag(s)} ${s.path} ${s.description || ''}`.toLowerCase();
+    // 搜索只匹配名称 + 说明两列（路径/来源不参与，避免全字段模糊误命中）
+    tr.dataset.searchText = `${s.name} ${s.description || ''}`.toLowerCase();
     tr.innerHTML = `
-      <td><strong>${esc(s.name)}</strong></td>
-      <td>${esc(s.description) || '<span class="desc">（无说明）</span>'}</td>
-      <td><span class="chip">${tag}</span></td>
-      <td><code class="desc">${esc(s.path)}</code></td>
+      <td><b>${esc(s.name)}</b>${s.path ? `<div class="mini-note" style="margin-top:2px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="完整目录：${esc(s.path)}"><code>${esc(s.path)}</code></div>` : ''}</td>
+      <td>${esc(s.description) || '<span class="mut">（无说明）</span>'}</td>
+      <td><span class="tag ${sourceTagClass(s)}">${sourceTag(s)}</span></td>
       <td class="ops">
         <button class="btn sm" data-browse="${esc(s.name)}">查看</button>
-        ${isDeletable(s) ? `<button class="btn sm danger" data-del="${esc(s.name)}">删除</button>` : ''}
+        ${isDeletable(s) ? `<button class="btn sm danger" data-del="${esc(s.name)}">删除</button>` : '<span class="dim" style="font-size:11.5px">只读</span>'}
       </td>`;
     tr.querySelector('[data-browse]').onclick = () => browseSkill(s);
     const delBtn = tr.querySelector('[data-del]');
@@ -121,71 +134,31 @@ async function delSkill(s) {
     .catch((e) => toast(e.message, true));
 }
 
-// ---------- skill 文件浏览（#3）：目录树 + 原文/视图/双栏三种查看模式 ----------
-
-/** 极简 markdown → HTML（先整体转义再还原语法，绝无 XSS 面）：标题/代码块/行内代码/粗斜体/列表/引用/链接/分割线 */
-function renderMarkdown(src) {
-  const codeBlocks = [];
-  let text = String(src).replace(/```(\w*)\n?([\s\S]*?)(?:```|$)/g, (_m, lang, code) => {
-    codeBlocks.push(`<pre style="background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow:auto;font-size:12px"><code>${esc(code.replace(/\n$/, ''))}</code></pre>`);
-    return `${codeBlocks.length - 1}`;
-  });
-  const lines = text.split('\n');
-  const out = [];
-  let listOpen = false;
-  const closeList = () => { if (listOpen) { out.push('</ul>'); listOpen = false; } };
-  const inline = (s) => esc(s)
-    .replace(/`([^`]+)`/g, '<code style="background:var(--code-bg);padding:1px 5px;border-radius:4px;font-size:12px">$1</code>')
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" style="color:var(--primary)">$1</a>');
-  for (const line of lines) {
-    const block = /^ (\d+) $/.exec(line);
-    if (block) { closeList(); out.push(codeBlocks[Number(block[1])]); continue; }
-    const h = /^(#{1,4})\s+(.*)$/.exec(line);
-    if (h) { closeList(); const lv = h[1].length; out.push(`<h${lv + 1} style="margin:12px 0 6px">${inline(h[2])}</h${lv + 1}>`); continue; }
-    if (/^\s*[-*]\s+/.test(line)) {
-      if (!listOpen) { out.push('<ul style="margin:4px 0;padding-left:22px">'); listOpen = true; }
-      out.push(`<li>${inline(line.replace(/^\s*[-*]\s+/, ''))}</li>`);
-      continue;
-    }
-    if (/^\s*\d+\.\s+/.test(line)) {
-      if (!listOpen) { out.push('<ul style="margin:4px 0;padding-left:22px">'); listOpen = true; }
-      out.push(`<li>${inline(line.replace(/^\s*\d+\.\s+/, ''))}</li>`);
-      continue;
-    }
-    closeList();
-    if (/^---+\s*$/.test(line)) { out.push('<hr style="border:none;border-top:1px solid var(--border);margin:10px 0">'); continue; }
-    if (/^>\s?/.test(line)) { out.push(`<blockquote style="margin:6px 0;padding:4px 12px;border-left:3px solid var(--border);color:var(--muted,#667)">${inline(line.replace(/^>\s?/, ''))}</blockquote>`); continue; }
-    if (line.trim() === '') { out.push(''); continue; }
-    out.push(`<p style="margin:4px 0">${inline(line)}</p>`);
-  }
-  closeList();
-  return out.join('\n');
-}
+// ---------- skill 文件浏览：目录树 + 原文/视图/双栏三种查看模式 ----------
+// markdown 渲染走公共模块 ../markdown.js（与会话页 AI 气泡同源，含表格支持）
 
 /** 浏览抽屉：左侧文件树（目录懒加载展开），右侧查看区（markdown 文件支持 原文/视图/两者 三模式） */
 function browseSkill(s) {
   openDrawer({
     title: `${s.name} · ${sourceTag(s)}`,
     bodyHtml: `
-      <div class="hint" style="margin:0 0 10px"><code class="desc">${esc(s.path)}</code></div>
-      <div style="display:flex;gap:14px;align-items:flex-start">
-        <div id="sbTree" style="width:250px;flex:none;border:1px solid var(--border);border-radius:8px;padding:8px;max-height:62vh;overflow:auto;font-size:13px">
-          <div class="desc">目录加载中…</div>
-        </div>
-        <div style="flex:1;min-width:0">
+      <div class="hint" style="margin:0 0 10px"><code>${esc(s.path)}</code></div>
+      <div class="dw-layout">
+        <nav class="dw-nav" id="sbTree" style="width:250px;border:1px solid var(--border);border-radius:10px;padding:8px;max-height:62vh;overflow:auto;font-size:13px">
+          <span class="hint">目录加载中…</span>
+        </nav>
+        <div class="dw-pane">
           <div id="sbModes" style="display:none;gap:8px;margin-bottom:8px" class="subtabs">
             <button data-mode="both" class="active">两者都看</button>
             <button data-mode="raw">只看原文</button>
             <button data-mode="view">只看视图</button>
           </div>
-          <div id="sbFileName" class="desc" style="margin-bottom:6px">点击左侧文件查看内容</div>
-          <div id="sbView" style="display:none;border:1px solid var(--border);border-radius:8px;padding:12px;max-height:56vh;overflow:auto;font-size:13px;line-height:1.6"></div>
-          <textarea id="sbRaw" readonly style="display:none;width:100%;min-height:56vh;font-family:ui-monospace,Consolas,monospace;font-size:12px"></textarea>
+          <div id="sbFileName" class="mini-note" style="margin-bottom:6px">点击左侧文件查看内容</div>
+          <div id="sbView" style="display:none;border:1px solid var(--border);border-radius:10px;padding:12px;max-height:56vh;overflow:auto;font-size:13px;line-height:1.6;background:var(--sunk)"></div>
+          <textarea id="sbRaw" readonly style="display:none;width:100%;min-height:56vh;font-family:var(--mono);font-size:12px"></textarea>
         </div>
       </div>`,
-    footHtml: `<button class="btn" data-act="close">关闭</button>`,
+    footHtml: `<span class="sp"></span><button class="btn" data-act="close">关闭</button>`,
     onMount({ body, foot }) {
       foot.querySelector('[data-act="close"]').onclick = () => closeDrawer();
       const tree = body.querySelector('#sbTree');
@@ -207,7 +180,7 @@ function browseSkill(s) {
         fileName.textContent = `加载中：${fp}`;
         try {
           const r = await api('GET', `/api/skills/raw?path=${encodeURIComponent(fp)}`);
-          fileName.innerHTML = `<strong>${esc(r.name)}</strong> <span class="desc">· ${(r.size / 1024).toFixed(1)}KB</span>`;
+          fileName.innerHTML = `<b>${esc(r.name)}</b> <span class="dim">· ${(r.size / 1024).toFixed(1)}KB</span>`;
           rawPane.value = r.content;
           if (isMd(r.name)) {
             viewPane.innerHTML = renderMarkdown(r.content);
@@ -225,25 +198,25 @@ function browseSkill(s) {
         }
       };
       const renderDir = async (dir, container) => {
-        container.innerHTML = '<div class="desc" style="padding:2px 6px">加载中…</div>';
+        container.innerHTML = '<div class="hint" style="padding:2px 6px">加载中…</div>';
         let files;
         try {
           const r = await api('GET', `/api/skills/files?path=${encodeURIComponent(dir)}`);
           files = r.files || [];
         } catch (e) {
-          container.innerHTML = `<div class="desc" style="padding:2px 6px;color:var(--err-tx)">${esc(e.message)}</div>`;
+          container.innerHTML = `<div class="hint" style="padding:2px 6px;color:var(--err-tx)">${esc(e.message)}</div>`;
           return;
         }
         container.innerHTML = '';
         if (files.length === 0) {
-          container.innerHTML = '<div class="desc" style="padding:2px 6px">（空目录）</div>';
+          container.innerHTML = '<div class="hint" style="padding:2px 6px">（空目录）</div>';
           return;
         }
         for (const f of files) {
-          const row = document.createElement('div');
-          row.style.cssText = 'padding:3px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis';
-          row.onmouseenter = () => { row.style.background = 'var(--off-bg)'; };
-          row.onmouseleave = () => { row.style.background = ''; };
+          const row = document.createElement('button');
+          row.style.cssText = 'display:block;width:100%;text-align:left;border:0;background:none;font:inherit;cursor:pointer;padding:4px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis';
+          row.onmouseenter = () => { row.style.background = 'var(--pri-w)'; };
+          row.onmouseleave = () => { if (!row.dataset.active) row.style.background = ''; };
           const childPath = `${dir.replace(/[\\/]+$/, '')}/${f.name}`;
           if (f.isDir) {
             row.textContent = `▸ 📁 ${f.name}`;
@@ -267,7 +240,7 @@ function browseSkill(s) {
             row.onclick = () => {
               tree.querySelectorAll('[data-active]').forEach((x) => { delete x.dataset.active; x.style.background = ''; x.style.fontWeight = ''; });
               row.dataset.active = '1';
-              row.style.background = 'var(--primary-weak)';
+              row.style.background = 'var(--pri-w)';
               row.style.fontWeight = '600';
               void openFile(childPath);
             };
@@ -283,13 +256,14 @@ function browseSkill(s) {
 function addSkill() {
   openDrawer({
     title: '新建 skill（用户级）',
+    narrow: true,
     bodyHtml: `
-      <label>名字（字母/数字/下划线/连字符，1-64 位）</label>
+      <label class="fld">名字（字母/数字/下划线/连字符，1-64 位）</label>
       <input type="text" id="nskName" placeholder="my-skill">
-      <label>说明（frontmatter description）</label>
+      <label class="fld">说明（frontmatter description）</label>
       <input type="text" id="nskDesc" placeholder="这个 skill 做什么、什么时候用">
-      <div class="hint" style="margin-top:10px">创建后生成目录与 SKILL.md 模板，请到目录中补充正文与脚本。</div>`,
-    footHtml: `<button class="btn" data-act="cancel">取消</button><button class="btn primary" data-act="save">创建</button>`,
+      <div class="mini-note" style="margin-top:10px">创建后生成目录与 SKILL.md 模板，请到目录中补充正文与脚本。</div>`,
+    footHtml: `<span class="sp"></span><button class="btn" data-act="cancel">取消</button><button class="btn primary" data-act="save">创建</button>`,
     onMount({ foot }) {
       foot.querySelector('[data-act="cancel"]').onclick = () => closeDrawer();
       foot.querySelector('[data-act="save"]').onclick = async () => {
@@ -337,6 +311,8 @@ function bindZipImport() {
 export const page = {
   id: 'skills',
   title: 'Skills',
+  desc: '四个来源的技能聚合：本机 / bridge / 项目 / 插件（只读）',
+  legend: false,
   icon: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
   render: renderSkills,
 };