@wendongfly/myhi 1.3.191 → 1.3.193

package/dist/index.html

@@ -13,8 +13,9 @@
   <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 {
@@ -36,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;
@@ -48,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 {
@@ -169,6 +178,107 @@
     .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; }
+    /* 任务操作：⋯ 按钮（电脑上悬停才出现）+ 小菜单 / 原地改名 / 标签编辑 */
+    .card-more { display: none; background: none; border: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0.15rem 0.35rem; border-radius: 6px; cursor: pointer; }
+    .card-more:hover, .card-more.on { background: var(--border); color: var(--text); }
+    @media (hover: hover) and (pointer: fine) { .card:hover .card-more, .card-more.on { display: block; } }
+    #card-menu:not(.sheet-mode), #tag-pop:not(.sheet-mode) { position: fixed; z-index: 85; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); padding: 0.3rem; }
+    #card-menu:not(.sheet-mode) { min-width: 10.5rem; }
+    #card-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.84rem; padding: 0.5rem 0.65rem; border-radius: 7px; cursor: pointer; }
+    #card-menu button:hover { background: var(--bg); }
+    #card-menu button.danger { color: var(--red); }
+    #card-menu.sheet-mode, #tag-pop.sheet-mode { position: fixed; inset: auto 0 0 0; z-index: 85; }
+    #card-menu.sheet-mode { inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; }
+    #card-menu .cm-box { background: var(--surface); border-radius: 18px 18px 0 0; width: 100%; max-width: 640px; padding: 0.5rem 0 max(1rem, env(safe-area-inset-bottom)); }
+    #card-menu .cm-title { padding: 0.6rem 1.25rem 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #card-menu.sheet-mode button { font-size: 0.95rem; padding: 0.9rem 1.25rem; border-radius: 0; border-top: 1px solid var(--border); }
+    #card-menu .cm-cancel { color: var(--muted) !important; text-align: center !important; border-top: 6px solid var(--bg) !important; }
+    .rename-inp { width: 100%; font-size: 0.9rem; font-weight: 600; padding: 0.15rem 0.35rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); outline: none; }
+    #tag-pop:not(.sheet-mode) { width: 17rem; padding: 0.7rem; }
+    #tag-pop.sheet-mode { background: var(--surface); border-radius: 18px 18px 0 0; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,0.35); max-width: 640px; margin: 0 auto; }
+    #tag-pop .tp-title { font-size: 0.8rem; font-weight: 600; color: var(--text2); margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    #tag-pop .tp-cur, #tag-pop .tp-all { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+    #tag-pop .tp-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; background: rgba(124,58,237,0.14); border: 1px solid rgba(124,58,237,0.35); border-radius: 999px; padding: 0.1rem 0.25rem 0.1rem 0.55rem; }
+    #tag-pop .tp-chip b { cursor: pointer; color: var(--muted); font-weight: 400; padding: 0 0.2rem; }
+    #tag-pop .tp-chip b:hover { color: var(--red); }
+    #tag-pop .tp-none { font-size: 0.74rem; color: var(--muted); }
+    #tag-pop .tp-inp { width: 100%; margin: 0.6rem 0 0.2rem; font-size: 0.82rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); outline: none; }
+    #tag-pop .tp-inp:focus { border-color: var(--accent); }
+    #tag-pop .tp-sub { font-size: 0.7rem; color: var(--muted); margin: 0.45rem 0 0.3rem; }
+    #tag-pop .tp-sug { font-size: 0.74rem; color: var(--text2); border: 1px dashed var(--border); border-radius: 999px; padding: 0.1rem 0.5rem; cursor: pointer; }
+    #tag-pop .tp-sug:hover { border-color: var(--accent); color: var(--accent); }
+    #tag-pop .tp-done { display: block; margin: 0.65rem 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 0.35rem 0.9rem; font-size: 0.78rem; cursor: pointer; }
     /* 当前使用模式（单用户 / 多用户·管理员 / 多用户·成员），让成员知道为什么有些项是只读 */
     .set-mode { font-size: 0.72rem; color: var(--muted); margin: 0.35rem 0.25rem 0; }
     .set-mode a { color: var(--accent); text-decoration: none; }
@@ -184,11 +294,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;
@@ -213,7 +322,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;
@@ -226,10 +335,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;
@@ -240,7 +349,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;
@@ -279,6 +391,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);
@@ -612,6 +730,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>
@@ -655,6 +774,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 -->
@@ -684,6 +839,7 @@
     <div class="hs-tile"><span>🛡</span><div><b>护栏 / 密钥</b><p>敏感信息不外泄</p></div></div>
     <div class="hs-tile"><span>⚙️</span><div><b>会话设置</b><p>快捷栏、折叠、主题字号</p></div></div>
   </div>
+  <div class="hs-tip" style="margin-bottom:0.45rem">💡 进入任务后点顶栏 <kbd>?</kbd> 可看每个按钮是做什么的（模型、计划、压缩、清除…）；电脑上鼠标停在按钮上也有提示。</div>
   <div class="hs-tip">📱 手机浏览器打开同一地址即可（局域网 / Tailscale），建议「添加到主屏幕」当 App 用。</div>
   <div class="hs-actions">
     <button class="hs-ghost" onclick="closeHelpSheet()">我知道了</button>
@@ -906,6 +1062,7 @@
       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
@@ -917,7 +1074,9 @@
     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 = '';
+    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;
       // 默认填入绑定目录，隐藏盘符栏，保留最近目录
@@ -1026,9 +1185,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'); };
@@ -1047,7 +1211,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);
@@ -1059,6 +1223,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');
@@ -1072,7 +1237,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);
@@ -1210,6 +1375,9 @@
       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（重启/停服期间连不上是正常的）。成功 = 版本变了（且等于目标）；
@@ -1340,7 +1508,13 @@
 
   // 视图状态：分组方式 + 标签筛选
   let _allSessions = [];
-  let _groupMode = localStorage.getItem('myhi_group_mode') || 'time'; // time | project | tag
+  let _renaming = null, _renderPending = false;   // 原地改名中的任务 id / 期间被推迟的刷新
+  // 电脑端工作台状态（声明放这里：列表渲染会用到，必须先于任何一次渲染）
+  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: 待发草稿数 }，给卡片打角标
@@ -1388,17 +1562,18 @@
       ? `<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>
+          <button class="card-more" title="更多操作（重命名 / 标签 / 终止）">⋯</button>
+          ${!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>`;
@@ -1428,6 +1603,8 @@
 
   function renderSessions(sessions) {
     if (Array.isArray(sessions)) _allSessions = sessions;
+    // 正在原地改名：列表每 5 秒刷新一次会把输入框冲掉，先攒着，改完再刷
+    if (_renaming) { _renderPending = true; return; }
     renderTagFilter();
     updateGroupSeg();
 
@@ -1490,6 +1667,7 @@
       html = items.map(cardHTML).join('');
     }
     list.innerHTML = html;
+    wsAfterRender();
 
     // 组头点击折叠/展开（项目多了列表很长）
     list.querySelectorAll('.group-header[data-gkey]').forEach(h => {
@@ -1505,8 +1683,9 @@
     list.querySelectorAll('.card').forEach(card => {
       const id = card.dataset.id;
       const title = card.dataset.title;
-      card.addEventListener('click', () => openSession(id));
+      card.addEventListener('click', (e) => { if (!e.target.closest('.card-more, .rename-inp')) openSession(id); });
       card.addEventListener('contextmenu', (e) => showActions(e, id, title));
+      card.querySelector('.card-more')?.addEventListener('click', (e) => { e.stopPropagation(); showActions(e, id, title, e.currentTarget); });
       // 移动端长按
       let lpTimer = null;
       card.addEventListener('touchstart', (e) => { lpTimer = setTimeout(() => showActions(e, id, title), 550); }, { passive: true });
@@ -1576,6 +1755,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); };
@@ -1662,10 +1842,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';
@@ -2056,38 +2341,131 @@
   // ── Kill ─────────────────────────────────────────────────────
   let _killId = null;
   // 会话操作菜单：打开 / 重命名 / 设置标签 / 终止
-  function showActions(e, id, title) {
+  // 任务操作菜单：电脑上（细指针）在 ⋯ 按钮或鼠标旁弹小菜单；手机上长按弹底部菜单。
+  // 原来电脑右键也弹手机式底部菜单（离鼠标很远、整屏变暗），重命名 / 标签用浏览器自带 prompt。
+  function showActions(e, id, title, anchor) {
     e.preventDefault();
-    const s = _allSessions.find(x => x.id === id);
-    const curTags = (s?.tags || []).join(', ');
+    closeCardMenu();
+    const items = [
+      ['✏️ 重命名', () => inlineRename(id)],
+      ['🏷 设置标签', () => openTagEditor(id, anchor || { x: e.clientX, y: e.clientY })],
+      ['↗ 在新窗口打开', () => window.open('/terminal/' + encodeURIComponent(id), '_blank')],
+      ['🗑 终止会话', () => showKill(e, id, title), true],
+    ];
+    if (matchMedia('(pointer: fine)').matches) {
+      const m = document.createElement('div');
+      m.id = 'card-menu';
+      m.innerHTML = items.map(([l, , danger], i) => `<button data-i="${i}" class="${danger ? 'danger' : ''}">${l}</button>`).join('');
+      document.body.appendChild(m);
+      m.querySelectorAll('button').forEach(b => b.onclick = (ev) => { ev.stopPropagation(); closeCardMenu(); items[b.dataset.i][1](); });
+      placePopover(m, anchor || { x: e.clientX, y: e.clientY });
+      if (anchor) anchor.classList.add('on');
+      m._anchor = anchor;
+      return;
+    }
+    // 手机：底部菜单
     const overlay = document.createElement('div');
-    overlay.style.cssText = 'position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.55);display:flex;align-items:flex-end;justify-content:center';
-    const box = document.createElement('div');
-    box.style.cssText = 'background:var(--surface,var(--surface));border-radius:18px 18px 0 0;width:100%;max-width:640px;padding:0.5rem 0 max(1rem,env(safe-area-inset-bottom))';
-    const mkBtn = (label, color) => `<button style="display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border,var(--border));color:${color || 'var(--text,var(--text))'};font-size:0.95rem;padding:0.9rem 1.25rem;cursor:pointer">${label}</button>`;
-    box.innerHTML =
-      `<div style="padding:0.6rem 1.25rem 0.4rem;color:var(--muted,var(--muted));font-size:0.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(title)}</div>` +
-      mkBtn('打开') + mkBtn('重命名') + mkBtn('设置标签') + mkBtn('终止会话', 'var(--red,var(--red))') +
-      `<button style="display:block;width:100%;background:none;border:none;border-top:6px solid var(--bg,var(--bg));color:var(--muted,var(--muted));font-size:0.9rem;padding:0.85rem;cursor:pointer">取消</button>`;
-    overlay.appendChild(box);
-    const close = () => overlay.remove();
-    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) close(); });
-    const btns = box.querySelectorAll('button');
-    btns[0].onclick = () => { close(); openSession(id); };
-    btns[1].onclick = () => {
-      close();
-      const nv = prompt('重命名会话', title);
-      if (nv && nv.trim()) socket.emit('rename', { sessionId: id, title: nv.trim() });
+    overlay.id = 'card-menu';
+    overlay.className = 'sheet-mode';
+    overlay.innerHTML = `<div class="cm-box"><div class="cm-title">${esc(title)}</div>` +
+      items.map(([l, , danger], i) => `<button data-i="${i}" class="${danger ? 'danger' : ''}">${l}</button>`).join('') +
+      `<button class="cm-cancel">取消</button></div>`;
+    document.body.appendChild(overlay);
+    overlay.addEventListener('click', (ev) => { if (ev.target === overlay) closeCardMenu(); });
+    overlay.querySelector('.cm-cancel').onclick = closeCardMenu;
+    overlay.querySelectorAll('button[data-i]').forEach(b => b.onclick = () => { closeCardMenu(); items[b.dataset.i][1](); });
+  }
+  function closeCardMenu() {
+    const m = document.getElementById('card-menu');
+    if (m) { m._anchor?.classList.remove('on'); m.remove(); }
+  }
+  // 弹层贴着锚点（按钮或鼠标位置）放，超出视口就往回收
+  function placePopover(el, anchor) {
+    const r = anchor.getBoundingClientRect ? anchor.getBoundingClientRect() : { left: anchor.x, right: anchor.x, top: anchor.y, bottom: anchor.y };
+    const w = el.offsetWidth, h = el.offsetHeight;
+    let x = r.left, y = r.bottom + 4;
+    if (x + w > innerWidth - 8) x = Math.max(8, r.right - w);
+    if (y + h > innerHeight - 8) y = Math.max(8, r.top - h - 4);
+    el.style.left = x + 'px'; el.style.top = y + 'px';
+  }
+  document.addEventListener('mousedown', (e) => {
+    if (!e.target.closest('#card-menu') && !e.target.closest('.card-more')) closeCardMenu();
+    if (!e.target.closest('#tag-pop') && !e.target.closest('#card-menu')) closeTagEditor();
+  });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeCardMenu(); closeTagEditor(); } });
+
+  // 原地改名：标题变输入框，回车 / 失焦保存，Esc 取消
+  function inlineRename(id) {
+    const card = document.querySelector(`#list .card[data-id="${CSS.escape(id)}"]`);
+    const t = card?.querySelector('.card-title');
+    if (!t) return;
+    const old = _allSessions.find(x => x.id === id)?.title || t.textContent;
+    _renaming = id;
+    const inp = document.createElement('input');
+    inp.className = 'rename-inp';
+    inp.value = old;
+    inp.maxLength = 80;
+    t.replaceWith(inp);
+    inp.focus(); inp.select();
+    let done = false;
+    const finish = (save) => {
+      if (done) return; done = true;
+      const v = inp.value.trim();
+      if (save && v && v !== old) {
+        socket.emit('rename', { sessionId: id, title: v });
+        const s = _allSessions.find(x => x.id === id); if (s) s.title = v;
+      }
+      _renaming = null;
+      _renderPending = false;
+      renderSessions();
     };
-    btns[2].onclick = () => {
-      close();
-      const nv = prompt('设置标签（多个用逗号分隔，留空清除）', curTags);
-      if (nv !== null) socket.emit('set-tags', { sessionId: id, tags: nv.split(/[,，]/).map(t => t.trim()).filter(Boolean) });
+    inp.addEventListener('keydown', (ev) => {
+      if (ev.key === 'Enter' && !ev.isComposing) { ev.preventDefault(); finish(true); }
+      else if (ev.key === 'Escape') { ev.stopPropagation(); finish(false); }
+    });
+    inp.addEventListener('blur', () => finish(true));
+    inp.addEventListener('click', (ev) => ev.stopPropagation());
+  }
+
+  // 标签编辑：当前标签（点 × 去掉）+ 其他任务用过的标签（点一下加上）+ 输入新标签回车；每次改动立即保存
+  function openTagEditor(id, anchor) {
+    closeTagEditor();
+    const s = _allSessions.find(x => x.id === id);
+    if (!s) return;
+    const pop = document.createElement('div');
+    pop.id = 'tag-pop';
+    if (!matchMedia('(pointer: fine)').matches) pop.classList.add('sheet-mode');
+    document.body.appendChild(pop);
+    const save = (tags) => {
+      s.tags = tags;
+      socket.emit('set-tags', { sessionId: id, tags });
+      draw();
     };
-    btns[3].onclick = () => { close(); showKill(e, id, title); };
-    btns[4].onclick = close;
-    document.body.appendChild(overlay);
+    function draw() {
+      const cur = s.tags || [];
+      const all = [...new Set(_allSessions.flatMap(x => x.tags || []))].filter(t => !cur.includes(t)).sort((a, b) => a.localeCompare(b, 'zh'));
+      pop.innerHTML = `<div class="tp-title">🏷 「${esc(s.title || '')}」的标签</div>` +
+        `<div class="tp-cur">${cur.length ? cur.map(t => `<span class="tp-chip">${esc(t)}<b data-del="${esc(t)}">×</b></span>`).join('') : '<span class="tp-none">还没有标签</span>'}</div>` +
+        `<input class="tp-inp" placeholder="输入新标签，回车添加" maxlength="20">` +
+        (all.length ? `<div class="tp-sub">点一下添加：</div><div class="tp-all">${all.map(t => `<span class="tp-sug" data-add="${esc(t)}">＋ ${esc(t)}</span>`).join('')}</div>` : '') +
+        `<button class="tp-done">完成</button>`;
+      pop.querySelectorAll('[data-del]').forEach(b => b.onclick = () => save(cur.filter(t => t !== b.dataset.del)));
+      pop.querySelectorAll('[data-add]').forEach(b => b.onclick = () => save([...cur, b.dataset.add]));
+      const inp = pop.querySelector('.tp-inp');
+      inp.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' && !ev.isComposing) {
+          ev.preventDefault();
+          const v = inp.value.trim().replace(/[,，]/g, '');
+          if (v && !cur.includes(v)) save([...cur, v]); else inp.value = '';
+        }
+      });
+      pop.querySelector('.tp-done').onclick = closeTagEditor;
+      if (!pop.classList.contains('sheet-mode')) placePopover(pop, anchor);
+      setTimeout(() => pop.querySelector('.tp-inp')?.focus(), 0);
+    }
+    draw();
   }
+  function closeTagEditor() { document.getElementById('tag-pop')?.remove(); }
 
   function showKill(e, id, title) {
     if (e && e.preventDefault) e.preventDefault();