@wendongfly/myhi 1.3.188 → 1.3.191

package/dist/index.html

@@ -11,6 +11,7 @@
   <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>
     (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){}})();
@@ -98,6 +99,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 +162,16 @@
     .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); }
+    /* 当前使用模式（单用户 / 多用户·管理员 / 多用户·成员），让成员知道为什么有些项是只读 */
+    .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) {
@@ -187,6 +200,13 @@
     }
     .empty-state svg { opacity: 0.3; }
     .empty-state p { font-size: 0.95rem; }
+    .empty-new { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 0.65rem 1.4rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(124,58,237,0.35); }
+    .empty-new:hover { background: var(--accent2); }
+    .empty-state small { font-size: 0.72rem; opacity: 0.8; }
+    /* 搜索框旁的「＋ 新建任务」：大屏上右下角 FAB 离内容太远容易看不到；手机上有 FAB 就够了 */
+    #new-btn { flex-shrink: 0; white-space: nowrap; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600; padding: 0.42rem 0.85rem; cursor: pointer; }
+    #new-btn:hover { background: var(--accent2); }
+    @media (max-width: 540px) { #new-btn { display: none; } }
 
     /* ── Session card ── */
     .card {
@@ -283,6 +303,14 @@
       z-index: 20;
     }
     #fab:active { background: var(--accent2); transform: scale(0.93); }
+    /* 首次引导关掉后：FAB 呼吸光圈 + 气泡指一下「点这里新建任务」，只出现一次 */
+    #fab.hint { animation: fabPulse 1.4s ease-out infinite; }
+    @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(124,58,237,0.7), 0 4px 20px rgba(124,58,237,0.5); } 100% { box-shadow: 0 0 0 22px rgba(124,58,237,0), 0 4px 20px rgba(124,58,237,0.5); } }
+    #fab-tip { display: none; position: fixed; z-index: 21; right: max(5.2rem, calc(env(safe-area-inset-right) + 4.7rem)); bottom: max(1.85rem, calc(env(safe-area-inset-bottom) + 1.35rem));
+      background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 0.8rem; border-radius: 10px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.35); cursor: pointer; }
+    #fab-tip::after { content: ''; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: none; border-left-color: var(--accent); }
+    #fab-tip.show { display: block; animation: tipIn 0.3s ease; }
+    @keyframes tipIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
 
     /* 随手记 FAB：灵感常常在你不在任何会话页的时候冒出来，首页也得能记 */
     #fab-note {
@@ -596,6 +624,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">
     <!-- 会话搜索：任务多了光看标题认不出，连首条消息/目录/标签一起搜 -->
@@ -604,6 +634,7 @@
              autocomplete="off" spellcheck="false"
              style="flex:1;background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));border-radius:8px;color:var(--text,var(--text));font-size:0.8rem;padding:0.4rem 0.7rem;outline:none">
       <span id="search-count" style="font-size:0.72rem;color:var(--muted,var(--muted));white-space:nowrap"></span>
+      <button id="new-btn" onclick="openSheet()" title="新建任务（也可点右下角 ＋）">＋ 新建任务</button>
     </div>
     <div id="group-seg" style="display:inline-flex;align-self:flex-start;background:var(--bg,var(--bg));border:1px solid var(--border,var(--border));border-radius:8px;overflow:hidden">
       <button class="grp-btn" data-group="time"    style="background:none;border:none;color:var(--muted,var(--muted));font-size:0.78rem;padding:0.35rem 0.8rem;cursor:pointer">最近</button>
@@ -619,13 +650,16 @@
         <rect x="2" y="4" width="20" height="16" rx="2"/>
         <path d="M8 9l4 3-4 3M13 15h3"/>
       </svg>
-      <p>还没有终端会话</p>
+      <p>还没有任务</p>
+      <button class="empty-new" onclick="openSheet()">＋ 新建第一个任务</button>
+      <small>以后随时点右下角的 ＋ 新建</small>
     </div>
   </div>
 </div>
 
 <!-- FAB -->
-<button id="fab" onclick="openSheet()">+</button>
+<button id="fab" onclick="openSheet()" title="新建任务">+</button>
+<div id="fab-tip" onclick="openSheet()">👉 点这里新建任务</div>
 <button id="fab-note" onclick="openNoteSheet()" title="随手记：把想法先记进某个任务的草稿箱">📥</button>
 
 <!-- 使用说明 / 快速上手（首次访问自动弹出，之后从顶栏 ❓ 打开）。桌面居中卡片，手机底部抽屉 -->
@@ -653,7 +687,7 @@
   <div class="hs-tip">📱 手机浏览器打开同一地址即可（局域网 / Tailscale），建议「添加到主屏幕」当 App 用。</div>
   <div class="hs-actions">
     <button class="hs-ghost" onclick="closeHelpSheet()">我知道了</button>
-    <button class="hs-primary" onclick="closeHelpSheet(); openSheet();">＋ 新建第一个任务</button>
+    <button class="hs-primary" onclick="closeHelpSheet(true); openSheet();">＋ 新建第一个任务</button>
   </div>
 </div>
 
@@ -699,6 +733,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">
@@ -709,7 +744,7 @@
   <div class="set-group-t">这台电脑 · 所有设备生效</div>
   <div class="set-card">
     <div class="set-item inp">
-      <div class="set-lbl">本机名称<small>显示在浏览器标签上</small></div>
+      <div class="set-lbl">本机显示名<small>首页 / 分屏的浏览器标签显示它，不改电脑主机名；留空用主机名</small></div>
       <div class="set-ctl">
         <input id="set-machine-name" class="set-inp" maxlength="32" autocomplete="off" data-save="saveMachineName">
         <button class="set-btn" onclick="saveMachineName()">保存</button>
@@ -726,12 +761,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>
 
@@ -858,6 +900,7 @@
 
   // 加载当前用户信息（独占模式显示用户名、退出按钮、锁定目录）
   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;
@@ -866,8 +909,14 @@
       fitHeader();
     }
     // 成员用户（users.json 登录）才显示自助改密入口；管理员改密码在 /admin
-    if (data.role === 'admin') document.getElementById('set-admin-link').style.display = '';
-    else document.getElementById('set-admin-link').remove();   // 别留个隐藏首项，免得下一项顶部多一道分隔线
+    // 改全局配置只给管理员（后端同样拦）：成员的「服务」组没有管理后台入口，本机显示名与语音只读
+    _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 = '';
     if (data.dir) {
       _userDir = data.dir;
@@ -1033,6 +1082,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) {
@@ -1048,7 +1098,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');
@@ -1056,12 +1106,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 => {
@@ -1106,6 +1161,94 @@
     } 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);
+    } 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 {}
@@ -1224,7 +1367,9 @@
         <rect x="2" y="4" width="20" height="16" rx="2"/>
         <path d="M8 9l4 3-4 3M13 15h3"/>
       </svg>
-      <p>还没有终端会话</p>
+      <p>还没有任务</p>
+      <button class="empty-new" onclick="openSheet()">＋ 新建第一个任务</button>
+      <small>以后随时点右下角的 ＋ 新建</small>
     </div>`;
 
   function cardHTML(s) {
@@ -1422,11 +1567,21 @@
     document.getElementById('help-backdrop').style.display = 'block';
     document.getElementById('help-sheet').style.display = 'block';
   };
-  window.closeHelpSheet = function() {
+  window.closeHelpSheet = function(creating) {
     document.getElementById('help-backdrop').style.display = 'none';
     document.getElementById('help-sheet').style.display = 'none';
+    const first = !localStorage.getItem('myhi_onboarded');
     localStorage.setItem('myhi_onboarded', '1');   // 看过一次就不再自动弹
+    // 第一次看完引导点的是「我知道了 / ✕」：把用户的视线引到右下角 ＋（大屏上它离内容很远，容易看不到）
+    if (first && !creating) showFabHint();
   };
+  function showFabHint() {
+    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); };
+    setTimeout(() => document.addEventListener('pointerdown', done, true), 300);   // 点任何地方（含 ＋ 本身）就收起
+    setTimeout(done, 12000);
+  }
   // 首次访问：自动弹快速上手，带着建第一个任务
   if (!localStorage.getItem('myhi_onboarded') && !new URLSearchParams(location.search).get('embed')) {
     setTimeout(openHelpSheet, 600);