@wendongfly/myhi 1.3.191 → 1.3.192

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,77 @@
     .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; }
@@ -184,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;
@@ -213,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;
@@ -226,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;
@@ -240,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;
@@ -279,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);
@@ -612,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>
@@ -655,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 -->
@@ -906,6 +1031,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 +1043,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 +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'); };
@@ -1047,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);
@@ -1059,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');
@@ -1072,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);
@@ -1210,6 +1344,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 +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: 待发草稿数 }，给卡片打角标
@@ -1388,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>`;
@@ -1490,6 +1632,7 @@
       html = items.map(cardHTML).join('');
     }
     list.innerHTML = html;
+    wsAfterRender();
 
     // 组头点击折叠/展开（项目多了列表很长）
     list.querySelectorAll('.group-header[data-gkey]').forEach(h => {
@@ -1576,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); };
@@ -1662,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';