@wendongfly/myhi 1.3.190 → 1.3.192

package/dist/index.html

@@ -11,9 +11,11 @@
   <link rel="apple-touch-icon" href="/icon.png">
   <title>myhi</title>
   <script src="/lib/machine.js"></script>
+  <script src="/lib/prefs.js"></script>
   <script src="/sio-client/socket.io.min.js"></script>
+  <script src="/theme.js"></script>
   <script>
-    (function(){try{var t=localStorage.getItem('myhi_theme')||'dark',f=localStorage.getItem('myhi_font')||'medium',r=document.documentElement;if(t&&t!=='dark')r.setAttribute('data-theme',t);r.setAttribute('data-font',f);}catch(e){}})();
+    (function(){try{var t=localStorage.getItem('myhi_theme')||window.MYHI_DEFAULT_THEME||'dark',f=localStorage.getItem('myhi_font')||'medium',r=document.documentElement;if(t&&t!=='dark')r.setAttribute('data-theme',t);r.setAttribute('data-font',f);}catch(e){}})();
   </script>
   <style>
     :root {
@@ -35,8 +37,15 @@
     html[data-font="small"]{font-size:15px;} html[data-font="medium"]{font-size:17px;} html[data-font="large"]{font-size:19.5px;}
     * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
 
+    /* 整页滚动（原来只有中间 640px 的列表在滚：大屏上鼠标在两侧空白处滚不动，系统白色粗滚动条还贴着卡片）。
+       顶栏 + 搜索区吸顶，滚动条回到浏览器最右，改成细的深色样式 */
+    html { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+    ::-webkit-scrollbar-track { background: transparent; }
     html, body {
-      height: 100%;
+      min-height: 100%;
       background: var(--bg);
       color: var(--text);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -47,10 +56,11 @@
     #app {
       display: flex;
       flex-direction: column;
-      height: 100%;
+      min-height: 100vh;
       max-width: 640px;
       margin: 0 auto;
     }
+    #view-controls { position: sticky; top: var(--hd-h, 57px); z-index: 9; background: var(--bg); padding-bottom: 0.4rem !important; }
 
     /* ── Header ── */
     #header {
@@ -98,6 +108,8 @@
       width: auto; white-space: nowrap; flex-shrink: 0;
     }
     .hd-btn:hover { color: var(--text); border-color: var(--border2); }
+    #settings-btn { position: relative; }
+    #settings-btn.has-dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg); }
     #user-name { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; margin-left: 0.2rem; }
     /* 用户菜单：顶栏 👤 点开，修改密码 / 退出登录 */
     #user-menu { display: none; position: fixed; z-index: 40; min-width: 11rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); padding: 0.3rem; }
@@ -159,6 +171,87 @@
     .set-link:hover { background: var(--surface); }
     .set-link small { color: var(--muted); font-size: 0.7rem; }
     .set-link::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 1rem; }
+    .ai-banner { margin: 0.75rem 0.75rem 0; padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid rgba(210,153,34,0.45); background: rgba(210,153,34,0.1); font-size: 0.82rem; line-height: 1.6; color: var(--text); }
+    .ai-banner b { display: block; margin-bottom: 0.15rem; }
+    .ai-banner code { background: var(--bg); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.78rem; }
+    .ai-banner button { margin-top: 0.45rem; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.42rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
+    .ai-banner button:disabled { opacity: 0.6; cursor: default; }
+    .ai-banner.ok { border-color: rgba(63,185,80,0.45); background: rgba(63,185,80,0.1); }
+    .ai-banner.err { border-color: rgba(248,81,73,0.45); background: rgba(248,81,73,0.08); }
+    /* ── 电脑端工作台（≥1024px，body.ws）：左侧任务栏 + 右侧嵌入当前任务会话（仿 DeepSeek）。手机/窄屏不变 ── */
+    #ws-main, #ws-foot, #ws-collapse, #ws-rail { display: none; }
+    body.ws { overflow: hidden; }
+    body.ws #app { position: fixed; left: 0; top: 0; bottom: 0; width: 290px; max-width: none; min-height: 0; margin: 0;
+      border-right: 1px solid var(--border); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
+    body.ws #header { background: var(--surface); padding-top: 0.8rem; padding-bottom: 0.6rem; border-bottom: none; }
+    body.ws .hd-actions > :not(#conn-dot) { display: none !important; }
+    body.ws #ws-collapse { display: block; }
+    body.ws #view-controls { position: static; background: var(--surface); padding-top: 0 !important; }
+    body.ws #view-controls > div:first-child { flex-direction: column-reverse; align-items: stretch; }
+    body.ws #new-btn { display: block !important; width: 100%; padding: 0.55rem; }
+    body.ws #search-count { display: none; }
+    body.ws #sess-search { flex: none; width: 100%; }
+    body.ws #header { justify-content: flex-start; }
+    body.ws #ws-collapse { margin-left: auto; }
+    body.ws #list { flex: 1; overflow-y: auto; padding: 0.3rem 0.5rem 1rem; scrollbar-width: thin; }
+    body.ws .card { padding: 0.45rem 0.55rem; gap: 0.55rem; margin-bottom: 2px; border: 1px solid transparent; background: transparent; border-radius: 8px; }
+    body.ws .card:hover { background: var(--bg); }
+    body.ws .card.active { background: var(--bg); border-color: var(--border); }
+    body.ws .card.active .card-title { color: var(--accent); }
+    body.ws .avatar { width: 26px; height: 26px; border-radius: 7px; font-size: 0.78rem; }
+    body.ws .card-title { font-size: 0.84rem; font-weight: 500; }
+    body.ws .card-sub { font-size: 0.68rem; margin-top: 0.05rem; }
+    body.ws .card-gist, body.ws .card-tags { display: none !important; }
+    body.ws .group-header { margin: 0.6rem 0.3rem 0.2rem !important; }
+    body.ws #fab, body.ws #fab-note, body.ws #fab-tip { display: none !important; }
+    body.ws #ws-foot { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.6rem 0.6rem 0.9rem; }
+    #ws-user { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #ws-set { position: relative; background: none; border: none; color: var(--text2); font-size: 1.05rem; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
+    #ws-set:hover, #ws-set.on { background: var(--bg); color: var(--text); }
+    #ws-set.has-dot::after, #ws-menu-dot.on { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
+    #ws-menu { display: none; position: fixed; z-index: 45; min-width: 12rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); padding: 0.3rem; }
+    #ws-menu.open { display: block; }
+    #ws-menu button { position: relative; display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.84rem; padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; }
+    #ws-menu button:hover { background: var(--bg); }
+    #ws-menu button small { margin-left: auto; font-size: 0.68rem; color: var(--muted); }
+    #ws-menu button.danger { color: var(--red); }
+    #ws-menu hr { border: none; border-top: 1px solid var(--border); margin: 0.3rem 0.2rem; }
+    #ws-menu-dot.on { position: static; display: inline-block; margin-left: 0.3rem; }
+    #ws-collapse { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 6px; }
+    #ws-collapse:hover { background: var(--bg); color: var(--text); }
+    body.ws #ws-main { display: block; position: fixed; left: 290px; top: 0; right: 0; bottom: 0; background: var(--bg); }
+    #ws-main iframe { width: 100%; height: 100%; border: none; display: block; }
+    #ws-welcome { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; color: var(--muted); text-align: center; }
+    #ws-welcome .logo { font-size: 2.2rem; }
+    #ws-welcome .ai-banner { margin: 0; max-width: 520px; text-align: left; }
+    #ws-welcome button.ws-new { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 0.7rem 1.6rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
+    /* 收起任务栏 → 留一条 56px 窄栏（仿 VS Code / DeepSeek）：展开、新建、最近任务头像（悬停看名字、点了直接切）、设置。
+       原来收起后只剩左下角一个小「» 任务」，还压在快捷栏上，普通用户根本发现不了 */
+    body.ws.ws-collapsed #app { display: none; }
+    body.ws.ws-collapsed #ws-main { left: 56px; }
+    body.ws.ws-collapsed #ws-rail { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 56px; flex-direction: column; align-items: center;
+      gap: 0.35rem; padding: 0.7rem 0 0.6rem; background: var(--surface); border-right: 1px solid var(--border); z-index: 20; }
+    #ws-rail .rb { position: relative; width: 38px; height: 38px; border-radius: 10px; border: none; background: none; color: var(--text2); font-size: 1.05rem;
+      cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+    #ws-rail .rb:hover { background: var(--bg); color: var(--text); }
+    #ws-rail .rb.new { background: var(--accent); color: #fff; font-size: 1.3rem; }
+    #ws-rail .rb.has-dot::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
+    #ws-rail .rail-sep { width: 28px; border-top: 1px solid var(--border); margin: 0.2rem 0; flex-shrink: 0; }
+    #ws-rail .rail-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.1rem 0; }
+    #ws-rail .rail-list::-webkit-scrollbar { display: none; }
+    #ws-rail .ra { position: relative; width: 34px; height: 34px; border-radius: 9px; color: #fff; font-weight: 700; font-size: 0.85rem; border: 2px solid transparent;
+      display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-family: 'SF Mono', Consolas, monospace; }
+    #ws-rail .ra:hover { filter: brightness(1.15); }
+    #ws-rail .ra.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
+    #ws-rail .ra.busy::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
+      border: 2px solid var(--surface); animation: stPulse 1.2s ease-in-out infinite; }
+    #ws-rail .rail-more { font-size: 0.68rem; color: var(--muted); cursor: pointer; padding: 0.2rem; }
+    /* 窄栏悬停提示（原生 title 有延迟，这里即时显示） */
+    #ws-tip { position: fixed; z-index: 60; left: 62px; background: var(--text); color: var(--bg); font-size: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 6px;
+      white-space: nowrap; pointer-events: none; display: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
+    /* 当前使用模式（单用户 / 多用户·管理员 / 多用户·成员），让成员知道为什么有些项是只读 */
+    .set-mode { font-size: 0.72rem; color: var(--muted); margin: 0.35rem 0.25rem 0; }
+    .set-mode a { color: var(--accent); text-decoration: none; }
     .set-foot { font-size: 0.7rem; color: var(--muted); line-height: 1.5; margin: 0.9rem 0.25rem 0.2rem; text-align: center; }
     /* 手机（≤540px）：藏用户名、文字标签只留图标，一行放下且不憋屈 */
     @media (max-width: 540px) {
@@ -171,11 +264,10 @@
     /* ── Session list ── */
     #list {
       flex: 1;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-      padding: 0.75rem 0.75rem 6rem;
+      padding: 0.5rem 0.75rem 6rem;
     }
 
+
     .empty-state {
       display: flex;
       flex-direction: column;
@@ -200,7 +292,7 @@
       display: flex;
       align-items: center;
       gap: 0.85rem;
-      padding: 0.85rem 0.9rem;
+      padding: 0.7rem 0.85rem;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 12px;
@@ -213,10 +305,10 @@
     .card:active { background: #1c2230; }
 
     .avatar {
-      width: 44px; height: 44px;
+      width: 38px; height: 38px;
       border-radius: 10px;
       display: flex; align-items: center; justify-content: center;
-      font-size: 1.3rem;
+      font-size: 1.1rem;
       font-weight: 700;
       flex-shrink: 0;
       font-family: 'SF Mono', Consolas, monospace;
@@ -227,7 +319,10 @@
       flex: 1;
       min-width: 0;
     }
+    .card-title-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
+    .card-title-row .card-tags { display: flex; gap: 0.25rem; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
     .card-title {
+      flex: 0 1 auto; min-width: 0;
       font-size: 0.95rem;
       font-weight: 600;
       white-space: nowrap;
@@ -266,6 +361,12 @@
     }
     .status-dot.alive { background: var(--green); box-shadow: 0 0 5px var(--green); }
     .status-dot.dead  { background: var(--red); }
+    /* 任务状态：执行中（AI 正在跑，跳动）/ 已停止；空闲不显示，免得一排绿点看不出谁在干活 */
+    .st { font-size: 0.68rem; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; }
+    .st-busy { color: var(--accent); font-weight: 600; }
+    .st-busy::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: stPulse 1.2s ease-in-out infinite; }
+    @keyframes stPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
+    .st-dead { color: var(--muted); }
     .viewers {
       font-size: 0.7rem;
       color: var(--muted);
@@ -599,6 +700,7 @@
 <div id="app">
   <div id="header">
     <div class="logo">my<span>hi</span></div>
+    <button id="ws-collapse" onclick="wsSetCollapsed(true)" title="收起任务栏（收起后左侧保留窄栏）">«</button>
     <div class="hd-actions">
       <button id="grid-btn" class="hd-btn" onclick="location.href='/grid'" title="分屏工作台（多任务并排）">▦<span class="hd-txt"> 分屏</span></button>
       <button id="doctor-btn" class="hd-btn" onclick="openDoctor()" title="会话体检">🩺<span class="hd-txt"> 体检</span></button>
@@ -611,6 +713,8 @@
   </div>
 
   <!-- 升级管理已移至 /admin -->
+  <!-- AI 引擎（Claude Code）没装时的提示：npm 装 myhi 不会顺带装它，新机器第一次用最容易卡在这 -->
+  <div id="ai-banner" class="ai-banner" style="display:none"></div>
 
   <div id="view-controls" style="display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem 0.75rem 0">
     <!-- 会话搜索：任务多了光看标题认不出，连首条消息/目录/标签一起搜 -->
@@ -640,6 +744,42 @@
       <small>以后随时点右下角的 ＋ 新建</small>
     </div>
   </div>
+  <!-- 工作台任务栏底部：平时只留一行「用户 + ⚙」，其余功能收进 ⚙ 菜单（功能再多也不占地方） -->
+  <div id="ws-foot">
+    <span id="ws-user">👤 本机</span>
+    <button id="ws-set" onclick="toggleWsMenu(event)" title="设置与更多">⚙</button>
+  </div>
+</div>
+
+<!-- 电脑端工作台：任务栏底部功能区 + 右侧会话区（body.ws 时显示） -->
+<div id="ws-main"><div id="ws-welcome">
+  <div class="logo">my<span>hi</span></div>
+  <div>在左边选一个任务继续，或者新建一个</div>
+  <button class="ws-new" onclick="openSheet()">＋ 新建任务</button>
+</div></div>
+<!-- 收起后的窄栏 -->
+<div id="ws-rail">
+  <button class="rb" onclick="wsSetCollapsed(false)" data-tip="展开任务栏">☰</button>
+  <button class="rb new" onclick="openSheet()" data-tip="新建任务">＋</button>
+  <div class="rail-sep"></div>
+  <div class="rail-list" id="rail-list"></div>
+  <div class="rail-sep"></div>
+  <button class="rb" id="rail-set" onclick="toggleWsMenu(event)" data-tip="设置与更多">⚙</button>
+</div>
+<div id="ws-tip"></div>
+<!-- ⚙ 菜单（工作台底部 / 窄栏的 ⚙ 打开） -->
+<div id="ws-menu">
+  <button onclick="wsMenuGo(openSettings)">⚙ 设置<span id="ws-menu-dot"></span></button>
+  <button onclick="wsMenuGo(() => location.href = '/grid')">▦ 分屏<small>多任务并排</small></button>
+  <button onclick="wsMenuGo(openNoteSheet)">📥 随手记<small>先记进草稿箱</small></button>
+  <button onclick="wsMenuGo(openDoctor)">🩺 会话体检</button>
+  <button onclick="wsMenuGo(showUsage)">📊 用量</button>
+  <button onclick="wsMenuGo(openHelpSheet)">❓ 帮助</button>
+  <div id="ws-menu-acct">
+    <hr>
+    <button id="ws-menu-pw" onclick="wsMenuGo(openPasswdSheet)" style="display:none">🔑 修改密码</button>
+    <button class="danger" onclick="wsMenuGo(doLogout)">↩ 退出登录</button>
+  </div>
 </div>
 
 <!-- FAB -->
@@ -718,6 +858,7 @@
     <div class="sheet-handle"></div>
     <div class="set-head"><b>设置</b><button class="set-x" onclick="closeSettings()" title="关闭 (Esc)">✕</button></div>
   </div>
+  <div id="set-mode" class="set-mode"></div>
 
   <div class="set-group-t">本设备</div>
   <div class="set-card">
@@ -745,12 +886,19 @@
     <div id="set-asr-status" class="set-status"></div>
   </div>
 
-  <div class="set-group-t">服务</div>
-  <div class="set-card">
-    <a id="set-admin-link" class="set-link" href="/admin" style="display:none">🛠 管理后台 <small>用户 · 网关 · 密钥 · 升级</small></a>
-    <button class="set-link" onclick="restartMyhi()">🔄 重启 myhi</button>
+  <div id="set-svc">
+    <div class="set-group-t" id="set-svc-t">服务</div>
+    <div class="set-card">
+      <div class="set-item">
+        <div class="set-lbl">myhi 版本<small id="set-ver-sub">检查中…</small></div>
+        <button id="set-up-btn" class="set-btn dirty" style="display:none" onclick="homeUpgrade()">升级</button>
+      </div>
+      <div id="set-up-status" class="set-status"></div>
+      <a id="set-admin-link" class="set-link admin-only" href="/admin">🛠 管理后台 <small>用户 · 网关 · 密钥 · Claude 升级</small></a>
+      <button class="set-link" onclick="restartMyhi()">🔄 重启 myhi</button>
+    </div>
+    <div id="set-restart-status" class="set-status" style="padding:0.45rem 0.25rem 0;margin:0"></div>
   </div>
-  <div id="set-restart-status" class="set-status" style="padding:0.45rem 0.25rem 0;margin:0"></div>
   <div class="set-foot">聊天显示、回车键、快捷栏在会话页右上角 ⚙ 设置</div>
 </div>
 
@@ -877,17 +1025,27 @@
 
   // 加载当前用户信息（独占模式显示用户名、退出按钮、锁定目录）
   let _userDir = null;
+  let _isAdmin = true;
   fetch('/api/me').then(r => r.json()).then(data => {
     if ((data.exclusive || data.hasUsers) && data.name) {
       document.getElementById('user-name').textContent = data.name;
       document.getElementById('um-name').textContent = data.name;
       document.getElementById('user-btn').style.display = '';
+      document.getElementById('ws-user').textContent = '👤 ' + data.name;
       fitHeader();
     }
     // 成员用户（users.json 登录）才显示自助改密入口；管理员改密码在 /admin
-    if (data.role === 'admin') document.getElementById('set-admin-link').style.display = '';
-    else document.getElementById('set-admin-link').remove();   // 别留个隐藏首项，免得下一项顶部多一道分隔线
-    if (data.hasUsers && data.role === 'operator') document.getElementById('passwd-btn').style.display = '';
+    // 改全局配置只给管理员（后端同样拦）：成员的「服务」组没有管理后台入口，本机显示名与语音只读
+    _isAdmin = (data.role || 'admin') === 'admin';
+    document.getElementById('set-mode').innerHTML = !data.hasUsers ? '👤 单用户模式 · 所有功能都可用'
+      : _isAdmin ? '👥 多用户模式 · 你是管理员 · <a href="/admin#mode">管理成员 →</a>'
+      : `👥 多用户模式 · 你是成员「${esc(data.name || '')}」· 本机显示名、语音等全局设置需管理员修改`;
+    if (!_isAdmin) document.querySelectorAll('#set-svc .admin-only').forEach(el => el.remove());
+    checkAiEngine();
+    checkHomeVersion();
+    if (data.hasUsers && data.role === 'operator') { document.getElementById('passwd-btn').style.display = ''; document.getElementById('ws-menu-pw').style.display = ''; }
+    // 单用户模式没有「登录账号」可退：⚙ 菜单不显示账户段
+    if (!(data.exclusive || data.hasUsers)) document.getElementById('ws-menu-acct').style.display = 'none';
     if (data.dir) {
       _userDir = data.dir;
       // 默认填入绑定目录，隐藏盘符栏，保留最近目录
@@ -996,9 +1154,14 @@
     e.stopPropagation();
     const m = document.getElementById('user-menu');
     if (m.classList.contains('open')) return closeUserMenu();
-    const r = document.getElementById('user-btn').getBoundingClientRect();
-    m.style.top = (r.bottom + 6) + 'px';
-    m.style.right = Math.max(8, window.innerWidth - r.right) + 'px';
+    const r = (e.currentTarget || document.getElementById('user-btn')).getBoundingClientRect();
+    if (r.bottom > innerHeight - 220) {   // 工作台任务栏底部的用户按钮：往上弹
+      m.style.top = ''; m.style.bottom = (innerHeight - r.top + 6) + 'px';
+      m.style.left = r.left + 'px'; m.style.right = 'auto';
+    } else {
+      m.style.bottom = ''; m.style.top = (r.bottom + 6) + 'px';
+      m.style.left = 'auto'; m.style.right = Math.max(8, window.innerWidth - r.right) + 'px';
+    }
     m.classList.add('open');
   };
   window.closeUserMenu = function() { document.getElementById('user-menu').classList.remove('open'); };
@@ -1017,7 +1180,7 @@
   // ── 外观：主题 & 字号（与会话页共用 localStorage myhi_theme / myhi_font）──
   const THEME_META = { dark: '#0d1117', light: '#ffffff', black: '#000000', system: '#0d1117' };
   function applyAppearance() {
-    const t = localStorage.getItem('myhi_theme') || 'dark';
+    const t = localStorage.getItem('myhi_theme') || window.MYHI_DEFAULT_THEME || 'dark';
     const f = localStorage.getItem('myhi_font') || 'medium';
     const r = document.documentElement;
     if (!t || t === 'dark') r.removeAttribute('data-theme'); else r.setAttribute('data-theme', t);
@@ -1029,6 +1192,7 @@
   // 顶栏按钮组折行了就逐级收紧：字号「大」时按钮跟着 rem 变宽，固定断点兜不住
   function fitHeader() {
     const h = document.getElementById('header');
+    requestAnimationFrame(() => document.documentElement.style.setProperty('--hd-h', h.offsetHeight + 'px'));   // 搜索区吸顶在顶栏下方
     const acts = h.querySelector('.hd-actions');
     const wraps = () => acts.offsetHeight > document.getElementById('settings-btn').offsetHeight * 1.5;
     h.classList.remove('hd-fit1', 'hd-fit2');
@@ -1042,7 +1206,7 @@
   const THEMES = [['system','跟随系统'],['dark','深色'],['light','浅色'],['black','纯黑']];
   const FONTS = [['small','小'],['medium','中'],['large','大']];
   function renderAppearance() {
-    const t = localStorage.getItem('myhi_theme') || 'dark';
+    const t = localStorage.getItem('myhi_theme') || window.MYHI_DEFAULT_THEME || 'dark';
     const f = localStorage.getItem('myhi_font') || 'medium';
     const seg = (key, opts, cur) => opts.map(([v, l]) => `<button data-k="${key}" data-v="${v}" class="${v === cur ? 'on' : ''}">${l}</button>`).join('');
     document.getElementById('set-theme').innerHTML = seg('myhi_theme', THEMES, t);
@@ -1052,6 +1216,7 @@
     const b = e.target.closest('button[data-k]');
     if (!b) return;
     localStorage.setItem(b.dataset.k, b.dataset.v);
+    window.myhiPrefsPush?.();   // 同步到其他设备
     applyAppearance(); renderAppearance();
   });
   function setStatus(id, text, color) {
@@ -1067,7 +1232,7 @@
 
   window.openSettings = function() {
     renderAppearance();
-    ['set-machine-status', 'set-asr-status', 'set-restart-status'].forEach(id => setStatus(id, ''));
+    ['set-machine-status', 'set-asr-status', 'set-restart-status', 'set-up-status'].filter(id => document.getElementById(id)).forEach(id => setStatus(id, ''));
     document.querySelectorAll('#set-sheet .set-btn').forEach(b => b.classList.remove('dirty'));
     document.getElementById('set-backdrop').classList.add('open');
     document.getElementById('set-sheet').classList.add('open');
@@ -1075,12 +1240,17 @@
       const inp = document.getElementById('set-machine-name');
       inp.placeholder = d.hostname || '';
       inp.value = d.name === d.hostname ? '' : (d.name || '');
-      inp.disabled = !!d.fromEnv;
+      inp.disabled = !!d.fromEnv || !_isAdmin;
       if (d.fromEnv) setStatus('set-machine-status', '已由环境变量 MYHI_NAME 指定，此处不可改');
+      else if (!_isAdmin) setStatus('set-machine-status', '仅管理员可修改');
     }).catch(() => {});
     fetch('/api/server-config').then(readJson).then(d => {
-      document.getElementById('set-asr-url').value = d.asrUrl || '';
+      const inp = document.getElementById('set-asr-url');
+      inp.value = d.asrUrl || '';
+      inp.disabled = !_isAdmin;
+      if (!_isAdmin) setStatus('set-asr-status', '仅管理员可修改');
     }).catch(() => {});
+    checkHomeVersion();
   };
   // 输入框改了内容 → 保存按钮亮起；回车 = 保存
   document.querySelectorAll('#set-sheet input[data-save]').forEach(inp => {
@@ -1125,6 +1295,97 @@
     } catch (e) { setStatus('set-asr-status', '保存失败：' + e.message, 'red'); }
   };
 
+  // ── AI 引擎（Claude Code）检测 / 一键安装 ──
+  const AI_MANUAL = '也可以在这台电脑上执行 <code>npm i -g @anthropic-ai/claude-code</code>';
+  const AI_LOGIN = '还差一步：在这台电脑上打开终端，运行一次 <code>claude</code> 登录 Anthropic 账号；或者让管理员在 <a href="/admin">管理后台</a> 配置大模型网关。';
+  function aiBanner(cls, html) {
+    const el = document.getElementById('ai-banner');
+    el.className = 'ai-banner' + (cls ? ' ' + cls : '');
+    el.innerHTML = html;
+    el.style.display = html ? '' : 'none';
+  }
+  async function checkAiEngine() {
+    try {
+      const d = await (await fetch('/api/claude/version', { cache: 'no-store' })).json();
+      if (d.upgrade?.running) return pollAiInstall(Date.now());
+      if (d.current) return aiBanner('', '');
+      aiBanner('', '<b>⚠ AI 引擎还没安装</b>myhi 的 AI 任务靠 Claude Code 运行，这台电脑上还没有，发消息会失败。' +
+        (_isAdmin ? '<br><button id="ai-install-btn" onclick="installAiEngine()">一键安装 AI 引擎</button><br><small>' + AI_MANUAL + '</small>'
+                  : '<br>请联系管理员安装。'));
+    } catch {}
+  }
+  window.installAiEngine = async function() {
+    if (!confirm('在这台电脑上安装 Claude Code（myhi 的 AI 引擎）？\n下载约 200MB，需要几分钟，期间可以继续用其他功能。')) return;
+    try {
+      const r = await fetch('/api/claude/update', { method: 'POST' });
+      const d = await r.json().catch(() => ({}));
+      if (!d.ok) return aiBanner('err', '<b>安装没有开始</b>' + esc(d.error || ('HTTP ' + r.status)) + '<br><small>' + AI_MANUAL + '</small>');
+      pollAiInstall(Date.now());
+    } catch (e) { aiBanner('err', '<b>安装没有开始</b>' + esc(e.message)); }
+  };
+  async function pollAiInstall(t0) {
+    aiBanner('', `<b>⏳ 正在安装 AI 引擎…</b>已用 ${Math.round((Date.now() - t0) / 1000)} 秒，装好后这里会提示下一步。`);
+    let s = null;
+    try { s = await (await fetch('/api/claude/update-status', { cache: 'no-store' })).json(); } catch {}
+    if (!s || s.running) return setTimeout(() => pollAiInstall(t0), 4000);
+    if (s.ok) aiBanner('ok', `<b>✓ AI 引擎已安装（v${esc(s.version || '')}）</b>` + AI_LOGIN);
+    else aiBanner('err', '<b>安装失败</b><code style="white-space:pre-wrap;display:block;margin:0.3rem 0">' + esc(s.error || '') + '</code>' + AI_MANUAL);
+  }
+
+  // ── 版本 / 升级（成员也可升级）：有新版时 ⚙ 按钮挂小红点，设置里一键升级 ──
+  let _homeVer = null;
+  async function checkHomeVersion() {
+    try {
+      const r = await fetch('/api/version', { cache: 'no-store' });
+      _homeVer = await r.json();
+      const sub = document.getElementById('set-ver-sub'), btn = document.getElementById('set-up-btn');
+      if (!sub) return;
+      sub.textContent = `当前 v${_homeVer.current}` + (_homeVer.updateAvailable ? ` · 有新版 v${_homeVer.latest}` : ' · 已是最新');
+      btn.style.display = _homeVer.updateAvailable ? '' : 'none';
+      btn.textContent = '升级到 v' + _homeVer.latest;
+      document.getElementById('settings-btn').classList.toggle('has-dot', !!_homeVer.updateAvailable);
+      document.getElementById('ws-set').classList.toggle('has-dot', !!_homeVer.updateAvailable);
+      document.getElementById('ws-menu-dot').classList.toggle('on', !!_homeVer.updateAvailable);
+      document.getElementById('rail-set').classList.toggle('has-dot', !!_homeVer.updateAvailable);
+    } catch {}
+  }
+  // 等升级落地：轮询 /api/version（重启/停服期间连不上是正常的）。成功 = 版本变了（且等于目标）；
+  // 失败 = 服务端报了本次升级的失败原因；10 分钟兜底超时。（会话页 / 管理后台同款）
+  async function waitUpgrade(from, target, onTick) {
+    const t0 = Date.now();
+    while (Date.now() - t0 < 10 * 60 * 1000) {
+      await new Promise(r => setTimeout(r, 3000));
+      let v = null;
+      try { const r = await fetch('/api/version', { cache: 'no-store' }); if (r.ok) v = await r.json(); } catch {}
+      onTick?.(!!v, Math.round((Date.now() - t0) / 1000));
+      if (!v) continue;
+      if (v.current !== from && (!target || v.current === target)) return { ok: true, version: v.current };
+      const last = v.upgrade?.last;
+      if (!v.upgrade?.running && last && !last.ok && last.at >= t0 - 5000) return { ok: false, error: last.error };
+    }
+    return { ok: false, error: '等了 10 分钟仍未完成，请稍后刷新页面查看版本，或到服务器上查看 myhi log' };
+  }
+  window.homeUpgrade = async function(force) {
+    if (!_homeVer?.updateAvailable) return;
+    if (!force && !confirm(`升级 myhi？\n当前 v${_homeVer.current} → 最新 v${_homeVer.latest}\n\n升级后服务会自动重启，期间页面会短暂断开。`)) return;
+    const btn = document.getElementById('set-up-btn');
+    btn.disabled = true;
+    setStatus('set-up-status', '正在提交升级…');
+    try {
+      const r = await fetch('/api/update', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ force: !!force }) });
+      const d = await r.json().catch(() => ({}));
+      if (!d.ok) {
+        btn.disabled = false;
+        if (d.busy?.length && confirm(d.error + '\n\n仍然现在升级吗？')) return homeUpgrade(true);
+        return setStatus('set-up-status', '升级失败：' + (d.error || ('HTTP ' + r.status)), 'red');
+      }
+      setStatus('set-up-status', d.message || '升级中…');
+      const res = await waitUpgrade(d.from, d.target, (up, sec) => setStatus('set-up-status', (up ? '正在安装新版本… ' : '服务重启中… ') + sec + 's'));
+      if (res.ok) { setStatus('set-up-status', `✓ 已升级到 v${res.version}，即将刷新`, 'green'); setTimeout(() => location.reload(), 800); }
+      else { btn.disabled = false; setStatus('set-up-status', '升级失败：' + res.error, 'red'); }
+    } catch (e) { btn.disabled = false; setStatus('set-up-status', '升级失败：' + e.message, 'red'); }
+  };
+
   window.restartMyhi = async function() {
     if (!confirm('确认重启 myhi 服务？\n重启期间连接会短暂中断，页面将自动重连。')) return;
     try { await fetch('/api/restart', { method: 'POST' }); } catch {}
@@ -1216,7 +1477,12 @@
 
   // 视图状态：分组方式 + 标签筛选
   let _allSessions = [];
-  let _groupMode = localStorage.getItem('myhi_group_mode') || 'time'; // time | project | tag
+  // 电脑端工作台状态（声明放这里：列表渲染会用到，必须先于任何一次渲染）
+  let _wsCur = null;                                                  // 右侧当前打开的任务
+  let _wsPending = new URLSearchParams(location.search).get('s');     // 刷新后回到上次的任务
+  const _wsFrames = new Map();                                        // id → iframe，按最近使用排序（最后一个最新）
+  // 电脑端工作台默认按项目分组（任务多了按项目找最快），手机默认按最近；用户切过就按用户的
+  let _groupMode = localStorage.getItem('myhi_group_mode') || (matchMedia('(min-width: 1024px)').matches ? 'project' : 'time'); // time | project | tag
   let _tagFilter = null; // 仅 tag 模式下：只看某标签
   let _search = '';      // 会话搜索关键词（标题/首条需求/目录/标签）
   let _draftCounts = {}; // { sessionId: 待发草稿数 }，给卡片打角标
@@ -1264,17 +1530,17 @@
       ? `<div style="font-size:0.66rem;color:#d29922;margin-top:0.2rem">📥 ${nDraft} 条待发草稿</div>`
       : '';
     return `
-      <div class="card" data-id="${safeId}" data-title="${safeTitle}">
+      <div class="card${s.id === _wsCur ? ' active' : ''}" data-id="${safeId}" data-title="${safeTitle}">
         <div class="avatar" style="background:${color}">${letter}</div>
         <div class="card-body">
-          <div class="card-title">${safeTitle}</div>
+          <div class="card-title-row"><div class="card-title">${safeTitle}</div>${tags ? `<div class="card-tags">${tags}</div>` : ''}</div>
           <div class="card-sub">${sub}</div>
           ${gist}
           ${draftChip}
-          ${tags ? `<div class="card-tags" style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.3rem">${tags}</div>` : ''}
         </div>
         <div class="card-right">
-          <div class="status-dot ${s.alive ? 'alive' : 'dead'}"></div>
+          ${!s.alive ? '<div class="st st-dead" title="会话进程已退出，点进去会自动恢复">已停止</div>'
+            : s.busy ? '<div class="st st-busy" title="AI 正在执行">执行中</div>' : ''}
           ${s.viewers > 1 ? `<div class="viewers">👁 ${s.viewers}</div>` : ''}
         </div>
       </div>`;
@@ -1366,6 +1632,7 @@
       html = items.map(cardHTML).join('');
     }
     list.innerHTML = html;
+    wsAfterRender();
 
     // 组头点击折叠/展开（项目多了列表很长）
     list.querySelectorAll('.group-header[data-gkey]').forEach(h => {
@@ -1452,6 +1719,7 @@
     if (first && !creating) showFabHint();
   };
   function showFabHint() {
+    if (wsOn()) return;   // 工作台里「＋ 新建任务」就在左上角，不用再指右下角
     const fab = document.getElementById('fab'), tip = document.getElementById('fab-tip');
     fab.classList.add('hint'); tip.classList.add('show');
     const done = () => { fab.classList.remove('hint'); tip.classList.remove('show'); document.removeEventListener('pointerdown', done, true); };
@@ -1538,10 +1806,115 @@
   };
 
   // ── Navigation ──────────────────────────────────────────────
+  // 电脑端工作台：在右侧打开；手机/窄屏：进会话页
   function openSession(id) {
+    if (wsOn()) return wsOpen(id);
     window.location.href = `/terminal/${id}`;
   }
 
+  // ── 电脑端工作台（≥1024px）：左侧任务栏 + 右侧嵌入会话页（/terminal/:id?embed=ws）──
+  // 最近打开的 5 个任务的会话页留在后台（隐藏不销毁），来回切换不用重载，滚动位置/没发的输入都还在。
+  const WS_MQ = matchMedia('(min-width: 1024px)');
+  const WS_KEEP = 5;
+  function wsOn() { return document.body.classList.contains('ws'); }
+  function wsOpen(id) {
+    _wsCur = id;
+    let f = _wsFrames.get(id);
+    if (f) _wsFrames.delete(id);
+    else {
+      f = document.createElement('iframe');
+      f.src = '/terminal/' + encodeURIComponent(id) + '?embed=ws';
+      f.setAttribute('allow', 'microphone; camera; clipboard-read; clipboard-write');
+      document.getElementById('ws-main').appendChild(f);
+    }
+    _wsFrames.set(id, f);
+    while (_wsFrames.size > WS_KEEP) { const [oid, of] = _wsFrames.entries().next().value; _wsFrames.delete(oid); of.remove(); }
+    for (const [k, fr] of _wsFrames) fr.style.display = k === id ? '' : 'none';
+    document.getElementById('ws-welcome').style.display = 'none';
+    history.replaceState(null, '', '/?s=' + encodeURIComponent(id));
+    const s = _allSessions.find(x => x.id === id);
+    document.title = (s?.title || 'myhi') + ' — myhi';
+    wsMarkActive();
+    setTimeout(() => f.contentWindow?.focus(), 50);
+  }
+  function wsShowWelcome() {
+    _wsCur = null;
+    for (const fr of _wsFrames.values()) fr.style.display = 'none';
+    document.getElementById('ws-welcome').style.display = '';
+    history.replaceState(null, '', '/');
+    document.title = 'myhi';
+    wsMarkActive();
+  }
+  function wsMarkActive() {
+    document.querySelectorAll('#list .card').forEach(c => c.classList.toggle('active', c.dataset.id === _wsCur));
+    document.querySelectorAll('#rail-list .ra').forEach(c => c.classList.toggle('active', c.dataset.id === _wsCur));
+  }
+  // 收起后的窄栏：最近的任务头像（最多 20 个，按最近活动），执行中带跳点，点了直接切
+  const RAIL_MAX = 20;
+  function renderRail() {
+    const el = document.getElementById('rail-list');
+    if (!el) return;
+    const items = [..._allSessions].sort((a, b) => sessionTime(b) - sessionTime(a));
+    el.innerHTML = items.slice(0, RAIL_MAX).map(s =>
+      `<div class="ra${s.id === _wsCur ? ' active' : ''}${s.busy ? ' busy' : ''}" data-id="${esc(s.id)}" style="background:${avatarColor(s.title)}"` +
+      ` data-tip="${esc(s.title || '')}${s.busy ? ' · 执行中' : !s.alive ? ' · 已停止' : ''}">${esc((s.title || '?')[0].toUpperCase())}</div>`).join('') +
+      (items.length > RAIL_MAX ? `<div class="rail-more" data-tip="展开任务栏看全部 ${items.length} 个任务" onclick="wsSetCollapsed(false)">+${items.length - RAIL_MAX}</div>` : '');
+    el.querySelectorAll('.ra').forEach(a => a.onclick = () => wsOpen(a.dataset.id));
+  }
+  // 窄栏即时悬停提示
+  document.addEventListener('mouseover', (e) => {
+    const t = e.target.closest('#ws-rail [data-tip]'), tip = document.getElementById('ws-tip');
+    if (!t) { tip.style.display = 'none'; return; }
+    const r = t.getBoundingClientRect();
+    tip.textContent = t.dataset.tip;
+    tip.style.top = (r.top + r.height / 2 - 13) + 'px';
+    tip.style.display = 'block';
+  });
+  // 每次列表重绘后：刷新前打开的任务等列表到了再打开；当前任务被删了就回欢迎页、回收它的会话页
+  function wsAfterRender() {
+    if (!wsOn()) return;
+    if (_wsPending && _allSessions.some(x => x.id === _wsPending)) { const id = _wsPending; _wsPending = null; wsOpen(id); return; }
+    for (const [k, fr] of _wsFrames) if (!_allSessions.some(x => x.id === k)) { fr.remove(); _wsFrames.delete(k); if (k === _wsCur) wsShowWelcome(); }
+    renderRail();
+    wsMarkActive();
+  }
+  // ⚙ 菜单：从底部 / 窄栏的 ⚙ 往上弹，点外面或 Esc 关闭
+  window.toggleWsMenu = function(e) {
+    e.stopPropagation();
+    const m = document.getElementById('ws-menu');
+    if (m.classList.contains('open')) return closeWsMenu();
+    const r = e.currentTarget.getBoundingClientRect();
+    m.classList.add('open');
+    // 右边缘对齐 ⚙、往左展开，留在任务栏范围内，不压右侧会话的输入框（窄栏的 ⚙ 在最左，就贴左边）
+    m.style.left = Math.max(8, r.right - m.offsetWidth) + 'px';
+    m.style.bottom = (innerHeight - r.top + 6) + 'px';
+    document.getElementById('ws-set').classList.add('on');
+  };
+  function closeWsMenu() { document.getElementById('ws-menu').classList.remove('open'); document.getElementById('ws-set').classList.remove('on'); }
+  window.wsMenuGo = function(fn) { closeWsMenu(); fn(); };
+  document.addEventListener('click', (e) => { if (!e.target.closest('#ws-menu')) closeWsMenu(); });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeWsMenu(); });
+
+  window.wsSetCollapsed = function(on) {
+    document.body.classList.toggle('ws-collapsed', on);
+    localStorage.setItem('myhi_ws_collapsed', on ? '1' : '');
+    document.getElementById('ws-tip').style.display = 'none';
+    if (on) renderRail();
+  };
+  function applyWs() {
+    const on = WS_MQ.matches && !new URLSearchParams(location.search).get('embed');
+    document.body.classList.toggle('ws', on);
+    document.body.classList.toggle('ws-collapsed', on && !!localStorage.getItem('myhi_ws_collapsed'));
+    // 「AI 引擎没装」提示：工作台里放到右侧欢迎页，手机上放列表上方
+    const banner = document.getElementById('ai-banner');
+    const target = on ? document.getElementById('ws-welcome') : document.getElementById('view-controls');
+    if (on) target.appendChild(banner); else target.parentNode.insertBefore(banner, target);
+    if (!on && _wsCur) { location.href = '/terminal/' + encodeURIComponent(_wsCur); return; }   // 窗口拉窄：直接进当前任务的会话页
+    fitHeader();
+  }
+  WS_MQ.addEventListener('change', applyWs);
+  applyWs();
+
   // ── 会话体检 ────────────────────────────────────────────────
   window.openDoctor = function() {
     document.getElementById('doctor-menu').style.display = 'block';