octo-agent 0.11.2

data/lib/octo/web/version.js

@@ -0,0 +1,449 @@
+// ── Version — version check and upgrade flow ───────────────────────────────
+//
+// Badge states:
+//   (none)        → up-to-date, muted version text
+//   has-update    → amber pulsing dot: new version available
+//   is-upgrading  → spinning ring: gem install in progress
+//   needs-restart → orange bouncing dot: upgrade done, waiting for restart
+//   upgrade-done  → green check: restarted & reconnected successfully
+//
+// Flow:
+//   1. Page load → checkVersion() → badge shows version number
+//   2. needs_update: badge shows amber pulsing dot
+//   3. Click badge → fixed popover (confirm state)
+//   4. Click "Upgrade" → popover → progress state (live log)
+//   5. upgrade_complete (success) → badge: needs-restart; popover: restart button
+//   6. Click "Restart" → /api/restart → popover: reconnecting spinner
+//      → poll /api/version until server back → badge: upgrade-done (green ✓) → reload
+// ─────────────────────────────────────────────────────────────────────────
+
+const Version = (() => {
+  // ── State ──────────────────────────────────────────────────────────────
+  let _current        = null;
+  let _latest         = null;
+  let _needsUpdate    = false;
+  let _upgrading      = false;
+  let _needsRestart   = false;   // upgrade done, waiting for restart
+  let _reconnecting   = false;   // restart sent, polling for server to come back
+  let _upgradeDone    = false;   // restarted and reconnected successfully
+  let _restartFailed  = false;   // 30s passed, server still not responding
+  let _popoverOpen    = false;
+  let _reconnectTimer = null;
+  let _reconnectDeadline = 0;
+  let _logLines       = [];
+  let _cliCommand     = "octo";
+
+  const RECONNECT_TIMEOUT_MS = 30_000;
+
+  // ── DOM helpers ────────────────────────────────────────────────────────
+  const $  = id => document.getElementById(id);
+  const el = (tag, attrs = {}, ...children) => {
+    const e = document.createElement(tag);
+    Object.entries(attrs).forEach(([k, v]) => {
+      if (k === "className") e.className = v;
+      else if (k === "innerHTML") e.innerHTML = v;
+      else e.setAttribute(k, v);
+    });
+    children.forEach(c => c && e.appendChild(typeof c === "string" ? document.createTextNode(c) : c));
+    return e;
+  };
+
+  // ── Version check ──────────────────────────────────────────────────────
+  async function checkVersion() {
+    try {
+      const res  = await fetch("/api/version");
+      if (!res.ok) return;
+      const data = await res.json();
+      _current     = data.current;
+      _latest      = data.latest;
+      _needsUpdate = !!data.needs_update;
+      if (data.cli_command) _cliCommand = data.cli_command;
+      _renderBadge();
+    } catch (e) {
+      console.warn("[Version] check failed:", e);
+    }
+  }
+
+  // ── Badge render ───────────────────────────────────────────────────────
+  function _renderBadge() {
+    const badge         = $("version-badge");
+    const text          = $("version-text");
+    const dot           = $("version-update-dot");
+    const restartDot    = $("version-restart-dot");
+    const check         = $("version-done-check");
+    const spinner       = $("version-spinner");
+    if (!badge || !text) return;
+
+    text.textContent = _current ? `v${_current}` : "";
+
+    // Reset all indicators
+    if (dot)        dot.style.display        = "none";
+    if (restartDot) restartDot.style.display = "none";
+    if (check)      check.style.display      = "none";
+    if (spinner)    spinner.style.display    = "none";
+    badge.className = "version-badge";
+
+    if (_upgrading) {
+      // Spinning ring: gem install running
+      badge.classList.add("is-upgrading");
+      badge.title = I18n.t("upgrade.tooltip.upgrading");
+      if (spinner) spinner.style.display = "inline-block";
+    } else if (_needsRestart) {
+      // Orange bouncing dot: upgrade done, please restart
+      badge.classList.add("needs-restart");
+      badge.title = I18n.t("upgrade.tooltip.needs_restart");
+      if (restartDot) restartDot.style.display = "inline-block";
+    } else if (_upgradeDone) {
+      // Green check: restarted successfully
+      badge.classList.add("upgrade-done");
+      badge.title = I18n.t("upgrade.tooltip.done");
+      if (check) check.style.display = "inline-block";
+    } else if (_needsUpdate) {
+      // Amber pulsing dot: new version available
+      badge.classList.add("has-update");
+      badge.title = I18n.t("upgrade.tooltip.new", { latest: _latest });
+      if (dot) dot.style.display = "inline-block";
+    } else {
+      badge.title = I18n.t("upgrade.tooltip.ok", { current: _current });
+    }
+
+    badge.style.display = "flex";
+  }
+
+  // ── Popover (fixed, positioned above badge) ────────────────────────────
+  function _getOrCreatePopover() {
+    let pop = $("version-upgrade-popover");
+    if (pop) return pop;
+
+    pop = el("div", { id: "version-upgrade-popover", className: "vup" });
+    document.body.appendChild(pop);
+    return pop;
+  }
+
+  function _positionPopover() {
+    const badge = $("version-badge");
+    const pop   = $("version-upgrade-popover");
+    if (!badge || !pop) return;
+
+    const rect = badge.getBoundingClientRect();
+    // Appear above the badge, right-aligned to sidebar edge
+    pop.style.left   = rect.left + "px";
+    pop.style.bottom = (window.innerHeight - rect.top + 8) + "px";
+    pop.style.top    = "auto";
+  }
+
+  function _openPopover() {
+    if (_popoverOpen) { _positionPopover(); return; }
+    _popoverOpen = true;
+
+    const pop = _getOrCreatePopover();
+    pop.innerHTML = "";
+
+    if (_restartFailed) {
+      _renderRestartFailedState(pop);
+    } else if (_reconnecting) {
+      _renderReconnectState(pop);
+    } else if (_upgrading) {
+      _renderProgressState(pop);
+    } else if (_needsRestart) {
+      _renderDoneState(pop);
+    } else if (_upgradeDone) {
+      _renderDoneState(pop);
+    } else if (_needsUpdate) {
+      _renderConfirmState(pop);
+    } else {
+      _renderUpToDateState(pop);
+    }
+
+    pop.style.display = "block";
+    _positionPopover();
+
+    // Animate in
+    requestAnimationFrame(() => pop.classList.add("vup--visible"));
+  }
+
+  function _closePopover() {
+    // Don't allow closing while upgrading or waiting for server to come back
+    if (_upgrading || _reconnecting) return;
+    const pop = $("version-upgrade-popover");
+    if (!pop) return;
+    pop.classList.remove("vup--visible");
+    setTimeout(() => {
+      pop.style.display = "none";
+      _popoverOpen = false;
+    }, 180);
+  }
+
+  // ── Popover states ─────────────────────────────────────────────────────
+
+  /** State 0: already up to date */
+  function _renderUpToDateState(pop) {
+    pop.innerHTML = `
+      <p class="vup-up-to-date">
+        <span class="vup-check-icon">✓</span>
+        ${I18n.t("upgrade.tooltip.ok", { current: _current })}
+      </p>
+    `;
+    // Auto-close after 2 s so user doesn't need to click away
+    setTimeout(() => { if (_popoverOpen) _closePopover(); }, 2000);
+  }
+
+  /** State 1: confirm upgrade */
+  function _renderConfirmState(pop) {
+    pop.innerHTML = `
+      <p class="vup-desc">${I18n.t("upgrade.desc")}</p>
+      <p class="vup-versions">v${_current} <span class="vup-arrow">→</span> v${_latest}</p>
+      <div class="vup-actions">
+        <button id="vup-btn-upgrade" class="vup-btn-primary">${I18n.t("upgrade.btn.upgrade")}</button>
+        <button id="vup-btn-cancel"  class="vup-btn-cancel">${I18n.t("upgrade.btn.cancel")}</button>
+      </div>
+    `;
+    $("vup-btn-upgrade").addEventListener("click", () => _startUpgrade(pop));
+    $("vup-btn-cancel").addEventListener("click", _closePopover);
+  }
+
+  /** State 2: upgrading — show live log */
+  function _renderProgressState(pop) {
+    pop.innerHTML = `
+      <div class="vup-progress-header">
+        <span class="vup-installing-dot"></span>
+        <span class="vup-installing-label">${I18n.t("upgrade.installing")}</span>
+      </div>
+      <pre id="vup-log" class="vup-log"></pre>
+    `;
+    // Replay any logs already received
+    const logEl = $("vup-log");
+    if (logEl && _logLines.length) {
+      logEl.textContent = _logLines.join("\n");
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+  }
+
+  /** State 3: done — show restart button */
+  function _renderDoneState(pop) {
+    pop.innerHTML = `
+      <div class="vup-done-header">
+        <span class="vup-done-icon">✓</span>
+        <span>${I18n.t("upgrade.done")}</span>
+      </div>
+      <button id="vup-btn-restart" class="vup-btn-restart">${I18n.t("upgrade.btn.restart")}</button>
+    `;
+    $("vup-btn-restart").addEventListener("click", _startRestart);
+  }
+
+  /** State 4: reconnecting after restart */
+  function _renderReconnectState(pop) {
+    pop.innerHTML = `
+      <div class="vup-reconnect">
+        <div class="vup-reconnect-spinner"></div>
+        <p class="vup-reconnect-msg">${I18n.t("upgrade.reconnecting")}</p>
+      </div>
+    `;
+  }
+
+  /** State 5: restart timed out — show both recovery paths (tray + CLI) */
+  function _renderRestartFailedState(pop) {
+    const safeCmd = String(_cliCommand).replace(/[&<>"']/g, c => (
+      { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]
+    ));
+    const cmd = `<code class="vup-cmd">${safeCmd} server</code>`;
+    pop.innerHTML = `
+      <div class="vup-restart-failed">
+        <p class="vup-restart-failed-title">⚠ ${I18n.t("upgrade.restart.timeout.title")}</p>
+        <p class="vup-restart-failed-desc">${I18n.t("upgrade.restart.timeout.desc")}</p>
+        <ul class="vup-restart-failed-options">
+          <li>${I18n.t("upgrade.restart.timeout.tray")}</li>
+          <li>${I18n.t("upgrade.restart.timeout.cli", { cmd })}</li>
+        </ul>
+        <div class="vup-actions">
+          <button id="vup-btn-retry" class="vup-btn-primary">${I18n.t("upgrade.restart.timeout.retry")}</button>
+        </div>
+      </div>
+    `;
+    const retry = $("vup-btn-retry");
+    if (retry) retry.addEventListener("click", _retryReconnect);
+  }
+
+  // ── Upgrade ────────────────────────────────────────────────────────────
+  async function _startUpgrade(pop) {
+    if (_upgrading || _upgradeDone) return;
+    _upgrading  = true;
+    _logLines   = [];
+    _renderBadge();
+    _renderProgressState(pop);
+
+    try {
+      await fetch("/api/version/upgrade", { method: "POST" });
+    } catch (e) {
+      console.warn("[Version] upgrade request failed:", e);
+      _upgrading = false;
+      _renderBadge();
+    }
+  }
+
+  // ── Restart ────────────────────────────────────────────────────────────
+  async function _startRestart() {
+    _reconnecting = true;
+
+    // Ensure popover is open and showing the reconnect spinner
+    const pop = _getOrCreatePopover();
+    _renderReconnectState(pop);
+    if (!_popoverOpen) {
+      _popoverOpen = true;
+      pop.style.display = "block";
+      _positionPopover();
+      requestAnimationFrame(() => pop.classList.add("vup--visible"));
+    }
+
+    try {
+      fetch("/api/restart", { method: "POST" }).catch(() => {});
+    } catch (_) {}
+
+    _waitForReconnect();
+  }
+
+  function _waitForReconnect() {
+    if (_reconnectTimer) clearInterval(_reconnectTimer);
+    _reconnectDeadline = Date.now() + RECONNECT_TIMEOUT_MS;
+    setTimeout(() => {
+      _reconnectTimer = setInterval(async () => {
+        if (Date.now() > _reconnectDeadline) {
+          clearInterval(_reconnectTimer);
+          _reconnectTimer = null;
+          _reconnecting   = false;
+          _restartFailed  = true;
+          _renderBadge();
+          const pop = $("version-upgrade-popover");
+          if (pop && _popoverOpen) _renderRestartFailedState(pop);
+          return;
+        }
+        try {
+          const res = await fetch("/api/version", { cache: "no-store" });
+          if (res.ok) {
+            clearInterval(_reconnectTimer);
+            _reconnectTimer = null;
+            // Server is back — close popover, badge → green check, then reload
+            _reconnecting = false;
+            _needsRestart = false;
+            _upgradeDone  = true;
+            _renderBadge();
+            _closePopover();
+            setTimeout(() => window.location.reload(), 800);
+          }
+        } catch (_) { /* server not yet up */ }
+      }, 2000);
+    }, 2500);
+  }
+
+  function _retryReconnect() {
+    _restartFailed = false;
+    _reconnecting  = true;
+    const pop = $("version-upgrade-popover");
+    if (pop && _popoverOpen) _renderReconnectState(pop);
+    _renderBadge();
+    _waitForReconnect();
+  }
+
+  // ── WebSocket events ───────────────────────────────────────────────────
+  function _handleWsEvent(event) {
+    if (event.type === "upgrade_log") {
+      const line = event.line || "";
+      _logLines.push(line);
+      // Append to live log if popover is open
+      const logEl = $("vup-log");
+      if (logEl) {
+        logEl.textContent += (logEl.textContent ? "\n" : "") + line;
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+    } else if (event.type === "upgrade_complete") {
+      _upgrading = false;
+      if (event.success) {
+        _needsUpdate  = false;
+        _needsRestart = true;   // badge: orange bouncing dot
+        _upgradeDone  = false;
+      }
+      // On failure, _needsUpdate stays true so badge stays amber
+      _renderBadge();
+      // Morph popover to done/error state
+      const pop = $("version-upgrade-popover");
+      if (pop && _popoverOpen) {
+        if (event.success) {
+          _renderDoneState(pop);
+        } else {
+          pop.innerHTML = `<p class="vup-error">${I18n.t("upgrade.failed")}</p>`;
+        }
+      }
+    }
+  }
+
+  // ── Init ───────────────────────────────────────────────────────────────
+  let _hoverTimer = null;
+
+  function init() {
+    const badge = $("version-badge");
+    if (badge) {
+      // Click still works (e.g. during reconnect to keep popover visible)
+      badge.addEventListener("click", e => {
+        e.stopPropagation();
+        if (_reconnecting) { if (!_popoverOpen) _openPopover(); return; }
+      });
+
+      // Hover to open
+      badge.addEventListener("mouseenter", () => {
+        if (!_current) return;
+        clearTimeout(_hoverTimer);
+        _openPopover();
+      });
+
+      // Leave badge or popover → close (with small delay so mouse can move to popover)
+      badge.addEventListener("mouseleave", () => {
+        _hoverTimer = setTimeout(() => {
+          const pop = $("version-upgrade-popover");
+          if (pop && pop.matches(":hover")) return;
+          _closePopover();
+        }, 200);
+      });
+    }
+
+    // Keep popover open while hovering it; close when leaving
+    document.addEventListener("mouseover", e => {
+      const pop = $("version-upgrade-popover");
+      if (pop && e.target.closest("#version-upgrade-popover")) {
+        clearTimeout(_hoverTimer);
+      }
+    });
+    document.addEventListener("mouseout", e => {
+      const pop = $("version-upgrade-popover");
+      if (!pop) return;
+      if (e.target.closest("#version-upgrade-popover") && !e.relatedTarget?.closest("#version-upgrade-popover") && !e.relatedTarget?.closest("#version-badge")) {
+        _hoverTimer = setTimeout(() => _closePopover(), 200);
+      }
+    });
+
+    // Click outside still closes (e.g. keyboard users, edge cases)
+    document.addEventListener("click", e => {
+      if (!e.target.closest("#version-badge") && !e.target.closest("#version-upgrade-popover")) {
+        if (_popoverOpen && !_upgrading && !_reconnecting) _closePopover();
+      }
+    });
+
+    // Reposition on window resize
+    window.addEventListener("resize", () => {
+      if (_popoverOpen) _positionPopover();
+    });
+
+    if (typeof WS !== "undefined") {
+      WS.onEvent(_handleWsEvent);
+    }
+
+    checkVersion();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  return { checkVersion };
+})();

data/lib/octo/web/weixin-qr.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>微信扫码登录</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+    .card {
+      background: #fff;
+      border-radius: 16px;
+      padding: 40px 48px;
+      text-align: center;
+      box-shadow: 0 4px 24px rgba(0,0,0,.08);
+      max-width: 360px;
+      width: 100%;
+    }
+    .logo {
+      width: 48px;
+      height: 48px;
+      background: linear-gradient(135deg, #2dc100, #1aad19);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      margin: 0 auto 16px;
+    }
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111;
+      margin-bottom: 6px;
+    }
+    p {
+      font-size: 13px;
+      color: #888;
+      margin-bottom: 24px;
+      line-height: 1.5;
+    }
+    #qrcode {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    #qrcode canvas, #qrcode img {
+      border-radius: 8px;
+      border: 1px solid #eee;
+    }
+    .hint {
+      font-size: 12px;
+      color: #bbb;
+    }
+    .error {
+      color: #e53e3e;
+      font-size: 13px;
+      padding: 12px;
+      background: #fff5f5;
+      border-radius: 8px;
+    }
+
+    /* Success overlay */
+    #success-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(255,255,255,0.92);
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+      z-index: 100;
+    }
+    #success-overlay.show {
+      display: flex;
+    }
+    .success-icon {
+      width: 72px;
+      height: 72px;
+      background: linear-gradient(135deg, #2dc100, #1aad19);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 36px;
+      animation: pop 0.3s ease-out;
+    }
+    .success-title {
+      font-size: 20px;
+      font-weight: 700;
+      color: #111;
+    }
+    .success-sub {
+      font-size: 14px;
+      color: #888;
+    }
+    @keyframes pop {
+      0%   { transform: scale(0.5); opacity: 0; }
+      80%  { transform: scale(1.1); }
+      100% { transform: scale(1);   opacity: 1; }
+    }
+
+    /* Scanned state */
+    .scanned-hint {
+      display: none;
+      font-size: 13px;
+      color: #1aad19;
+      font-weight: 500;
+      margin-top: 8px;
+    }
+    .scanned-hint.show { display: block; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="logo">微</div>
+    <h1>微信扫码登录</h1>
+    <p>使用微信扫描下方二维码<br>在手机上点击「确认登录」</p>
+    <div id="qrcode"></div>
+    <div class="hint">二维码有效期 5 分钟</div>
+    <div class="scanned-hint" id="scanned-hint">✅ 已扫码，请在手机上确认…</div>
+  </div>
+
+  <!-- Success overlay shown after polling detects token -->
+  <div id="success-overlay">
+    <div class="success-icon">✓</div>
+    <div class="success-title">登录成功</div>
+    <div class="success-sub">微信已连接，可以开始聊天了</div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
+  <script>
+    const params  = new URLSearchParams(location.search);
+    const url     = params.get("url");
+    // since: Unix timestamp (seconds) passed by the setup skill when opening this page.
+    // We only show success if token_updated_at > since, preventing false positives
+    // when the user already had a token from a previous login.
+    const since   = parseInt(params.get("since") || "0", 10);
+    const el      = document.getElementById("qrcode");
+
+    if (!url) {
+      el.innerHTML = '<div class="error">缺少 url 参数</div>';
+    } else {
+      try {
+        new QRCode(el, {
+          text: url,
+          width: 220,
+          height: 220,
+          colorDark: "#111111",
+          colorLight: "#ffffff",
+          correctLevel: QRCode.CorrectLevel.M
+        });
+      } catch (e) {
+        el.innerHTML = '<div class="error">二维码生成失败: ' + e.message + '</div>';
+      }
+    }
+
+    // Poll GET /api/channels every 2s; show success overlay once weixin has_token = true
+    const POLL_INTERVAL_MS = 2000;
+    const POLL_TIMEOUT_MS  = 5 * 60 * 1000; // 5 minutes — matches QR expiry
+    const startedAt        = Date.now();
+    let   pollTimer        = null;
+    let   prevHasToken     = false;
+
+    function showSuccess() {
+      clearTimeout(pollTimer);
+      document.getElementById("success-overlay").classList.add("show");
+    }
+
+    async function pollChannelStatus() {
+      if (Date.now() - startedAt > POLL_TIMEOUT_MS) return; // QR expired, stop quietly
+
+      try {
+        const res  = await fetch("/api/channels", { cache: "no-store" });
+        const data = await res.json();
+        const weixin = (data.channels || []).find(c => c.platform === "weixin");
+
+        if (weixin && weixin.has_token) {
+          const updatedAt = weixin.token_updated_at || 0;
+          if (updatedAt > since) {
+            showSuccess();
+            return;
+          }
+        }
+
+        // Show "scanned, waiting for confirm" hint once token appears in-progress
+        // (iLink doesn't expose a "scanned" state via this API, so we just keep polling)
+      } catch (_) {
+        // Server temporarily unreachable — keep polling
+      }
+
+      pollTimer = setTimeout(pollChannelStatus, POLL_INTERVAL_MS);
+    }
+
+    // Start polling only when QR code is actually shown
+    if (url) {
+      pollTimer = setTimeout(pollChannelStatus, POLL_INTERVAL_MS);
+    }
+  </script>
+</body>
+</html>