openclacky 1.3.2 → 1.3.3

data/lib/clacky/web/features/version/store.js

@@ -0,0 +1,165 @@
+// ── Version · store — version data, upgrade lifecycle, network ────────────
+//
+// Owns the version data and the upgrade/restart lifecycle state machine plus
+// every network call (check, upgrade, restart, reconnect polling) and the WS
+// event ingestion. It never renders — it emits "version:changed" carrying a
+// full state snapshot the view re-renders from.
+//
+// `Version` stays the single public facade (checkVersion).
+//
+// Depends on: WS, Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+
+const VersionStore = (() => {
+  let _current        = null;
+  let _latest         = null;
+  let _needsUpdate    = false;
+  let _upgrading      = false;
+  let _needsRestart   = false;
+  let _reconnecting   = false;
+  let _upgradeDone    = false;
+  let _restartFailed  = false;
+  let _logLines       = [];
+  let _cliCommand     = "openclacky";
+
+  let _reconnectTimer = null;
+  let _reconnectDeadline = 0;
+  const RECONNECT_TIMEOUT_MS = 30_000;
+
+  const _listeners = {};
+
+  function _on(event, handler) {
+    (_listeners[event] ||= []).push(handler);
+    return () => {
+      const list = _listeners[event];
+      const i = list ? list.indexOf(handler) : -1;
+      if (i >= 0) list.splice(i, 1);
+    };
+  }
+
+  function snapshot() {
+    return {
+      current:       _current,
+      latest:        _latest,
+      needsUpdate:   _needsUpdate,
+      upgrading:     _upgrading,
+      needsRestart:  _needsRestart,
+      reconnecting:  _reconnecting,
+      upgradeDone:   _upgradeDone,
+      restartFailed: _restartFailed,
+      logLines:      _logLines.slice(),
+      cliCommand:    _cliCommand,
+    };
+  }
+
+  function _emit(extra) {
+    const payload = Object.assign(snapshot(), extra || {});
+    (_listeners["version:changed"] || []).forEach((h) => h(payload));
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit("version:changed", payload);
+  }
+
+  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;
+      _emit();
+    } catch (e) {
+      console.warn("[Version] check failed:", e);
+    }
+  }
+
+  async function startUpgrade() {
+    if (_upgrading || _upgradeDone) return;
+    _upgrading = true;
+    _logLines  = [];
+    _emit({ reason: "upgrade-start" });
+    try {
+      await fetch("/api/version/upgrade", { method: "POST" });
+    } catch (e) {
+      console.warn("[Version] upgrade request failed:", e);
+      _upgrading = false;
+      _emit();
+    }
+  }
+
+  function startRestart() {
+    _reconnecting = true;
+    _emit({ reason: "restart-start" });
+    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;
+          _emit({ reason: "restart-failed" });
+          return;
+        }
+        try {
+          const res = await fetch("/api/version", { cache: "no-store" });
+          if (res.ok) {
+            clearInterval(_reconnectTimer);
+            _reconnectTimer = null;
+            _reconnecting = false;
+            _needsRestart = false;
+            _upgradeDone  = true;
+            _emit({ reason: "reconnected" });
+          }
+        } catch (_) { /* server not yet up */ }
+      }, 2000);
+    }, 2500);
+  }
+
+  function retryReconnect() {
+    _restartFailed = false;
+    _reconnecting  = true;
+    _emit({ reason: "retry-reconnect" });
+    _waitForReconnect();
+  }
+
+  function _handleWsEvent(event) {
+    if (event.type === "upgrade_log") {
+      _logLines.push(event.line || "");
+      _emit({ reason: "log", line: event.line || "" });
+    } else if (event.type === "upgrade_complete") {
+      _upgrading = false;
+      if (event.success) {
+        _needsUpdate  = false;
+        _needsRestart = true;
+        _upgradeDone  = false;
+      }
+      _emit({ reason: "upgrade-complete", success: !!event.success });
+    }
+  }
+
+  const Version = {
+    on: _on,
+    snapshot,
+    checkVersion,
+    startUpgrade,
+    startRestart,
+    retryReconnect,
+
+    bootWs() {
+      if (typeof WS !== "undefined") WS.onEvent(_handleWsEvent);
+    },
+  };
+
+  return Version;
+})();
+
+const Version = VersionStore;

data/lib/clacky/web/features/version/view.js

@@ -0,0 +1,323 @@
+// ── Version · view — badge, upgrade popover, hover lifecycle ──────────────
+//
+// Renders the sidebar version badge and the fixed upgrade popover, driven
+// entirely from VersionStore snapshots. All hover/click/popover lifecycle and
+// DOM lives here; lifecycle transitions and network go through store actions.
+//
+// Badge states: up-to-date / has-update / is-upgrading / needs-restart /
+// upgrade-done. Popover morphs as the store emits version:changed with reason.
+//
+// Depends on: VersionStore, I18n.
+// ───────────────────────────────────────────────────────────────────────────
+
+const VersionView = (() => {
+  let _popoverOpen = false;
+  let _hoverTimer  = null;
+  let _autoReloaded = false;
+
+  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;
+  };
+
+  function S() { return Version.snapshot(); }
+
+  // ── Badge render ───────────────────────────────────────────────────────
+  function _renderBadge() {
+    const s             = S();
+    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 = s.current ? `v${s.current}` : "";
+
+    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 (s.upgrading) {
+      badge.classList.add("is-upgrading");
+      badge.title = I18n.t("upgrade.tooltip.upgrading");
+      if (spinner) spinner.style.display = "inline-block";
+    } else if (s.needsRestart) {
+      badge.classList.add("needs-restart");
+      badge.title = I18n.t("upgrade.tooltip.needs_restart");
+      if (restartDot) restartDot.style.display = "inline-block";
+    } else if (s.upgradeDone) {
+      badge.classList.add("upgrade-done");
+      badge.title = I18n.t("upgrade.tooltip.done");
+      if (check) check.style.display = "inline-block";
+    } else if (s.needsUpdate) {
+      badge.classList.add("has-update");
+      badge.title = I18n.t("upgrade.tooltip.new", { latest: s.latest });
+      if (dot) dot.style.display = "inline-block";
+    } else {
+      badge.title = I18n.t("upgrade.tooltip.ok", { current: s.current });
+    }
+
+    badge.style.display = "flex";
+  }
+
+  // ── Popover ──────────────────────────────────────────────────────────
+  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();
+    pop.style.left   = rect.left + "px";
+    pop.style.bottom = (window.innerHeight - rect.top + 8) + "px";
+    pop.style.top    = "auto";
+  }
+
+  function _renderPopoverFor(pop) {
+    const s = S();
+    pop.innerHTML = "";
+    if (s.restartFailed)      _renderRestartFailedState(pop, s);
+    else if (s.reconnecting)  _renderReconnectState(pop);
+    else if (s.upgrading)     _renderProgressState(pop, s);
+    else if (s.needsRestart)  _renderDoneState(pop);
+    else if (s.upgradeDone)   _renderDoneState(pop);
+    else if (s.needsUpdate)   _renderConfirmState(pop, s);
+    else                      _renderUpToDateState(pop, s);
+  }
+
+  function _openPopover() {
+    if (_popoverOpen) { _positionPopover(); return; }
+    _popoverOpen = true;
+    const pop = _getOrCreatePopover();
+    _renderPopoverFor(pop);
+    pop.style.display = "block";
+    _positionPopover();
+    requestAnimationFrame(() => pop.classList.add("vup--visible"));
+  }
+
+  function _closePopover() {
+    const s = S();
+    if (s.upgrading || s.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 ─────────────────────────────────────────────────────
+
+  function _renderUpToDateState(pop, s) {
+    pop.innerHTML = `
+      <p class="vup-up-to-date">
+        <span class="vup-check-icon">✓</span>
+        ${I18n.t("upgrade.tooltip.ok", { current: s.current })}
+      </p>
+    `;
+    setTimeout(() => { if (_popoverOpen) _closePopover(); }, 2000);
+  }
+
+  function _renderConfirmState(pop, s) {
+    pop.innerHTML = `
+      <p class="vup-desc">${I18n.t("upgrade.desc")}</p>
+      <p class="vup-versions">v${s.current} <span class="vup-arrow">→</span> v${s.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", () => Version.startUpgrade());
+    $("vup-btn-cancel").addEventListener("click", _closePopover);
+  }
+
+  function _renderProgressState(pop, s) {
+    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>
+    `;
+    const logEl = $("vup-log");
+    if (logEl && s.logLines.length) {
+      logEl.textContent = s.logLines.join("\n");
+      logEl.scrollTop = logEl.scrollHeight;
+    }
+  }
+
+  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", () => Version.startRestart());
+  }
+
+  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>
+    `;
+  }
+
+  function _renderRestartFailedState(pop, s) {
+    const safeCmd = String(s.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", () => Version.retryReconnect());
+  }
+
+  // ── Store event reaction ─────────────────────────────────────────────
+  function _onChanged(s) {
+    _renderBadge();
+
+    const reason = s.reason;
+
+    if (reason === "log") {
+      const logEl = $("vup-log");
+      if (logEl) {
+        logEl.textContent += (logEl.textContent ? "\n" : "") + (s.line || "");
+        logEl.scrollTop = logEl.scrollHeight;
+      }
+      return;
+    }
+
+    if (reason === "restart-start") {
+      const pop = _getOrCreatePopover();
+      _renderReconnectState(pop);
+      if (!_popoverOpen) {
+        _popoverOpen = true;
+        pop.style.display = "block";
+        _positionPopover();
+        requestAnimationFrame(() => pop.classList.add("vup--visible"));
+      }
+      return;
+    }
+
+    if (reason === "reconnected") {
+      _closePopover();
+      if (!_autoReloaded) {
+        _autoReloaded = true;
+        setTimeout(() => window.location.reload(), 800);
+      }
+      return;
+    }
+
+    const pop = $("version-upgrade-popover");
+    if (!pop || !_popoverOpen) return;
+
+    if (reason === "upgrade-complete") {
+      if (s.success) _renderDoneState(pop);
+      else pop.innerHTML = `<p class="vup-error">${I18n.t("upgrade.failed")}</p>`;
+      return;
+    }
+    if (reason === "upgrade-start")   { _renderProgressState(pop, s); return; }
+    if (reason === "restart-failed")  { _renderRestartFailedState(pop, s); return; }
+    if (reason === "retry-reconnect") { _renderReconnectState(pop); return; }
+  }
+
+  // ── Init ───────────────────────────────────────────────────────────────
+  function init() {
+    const badge = $("version-badge");
+    if (badge) {
+      badge.addEventListener("click", e => {
+        e.stopPropagation();
+        if (S().reconnecting) { if (!_popoverOpen) _openPopover(); return; }
+      });
+
+      badge.addEventListener("mouseenter", () => {
+        if (!S().current) return;
+        clearTimeout(_hoverTimer);
+        _openPopover();
+      });
+
+      badge.addEventListener("mouseleave", () => {
+        _hoverTimer = setTimeout(() => {
+          const pop = $("version-upgrade-popover");
+          if (pop && pop.matches(":hover")) return;
+          _closePopover();
+        }, 200);
+      });
+    }
+
+    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);
+      }
+    });
+
+    document.addEventListener("click", e => {
+      if (!e.target.closest("#version-badge") && !e.target.closest("#version-upgrade-popover")) {
+        const s = S();
+        if (_popoverOpen && !s.upgrading && !s.reconnecting) _closePopover();
+      }
+    });
+
+    window.addEventListener("resize", () => {
+      if (_popoverOpen) _positionPopover();
+    });
+
+    Version.bootWs();
+    Version.checkVersion();
+  }
+
+  function _boot() {
+    Version.on("version:changed", _onChanged);
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+  }
+
+  return { init: _boot };
+})();
+
+VersionView.init();

data/lib/clacky/web/features/workspace/store.js

@@ -0,0 +1,99 @@
+// ── Workspace · store — session context + file-tree network ───────────────
+//
+// Owns the active session id / working dir and the network calls: list one
+// directory level, reveal a file in Finder, download a file. It never renders.
+//
+// `Workspace` stays the single public facade.
+//
+// Depends on: Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+"use strict";
+
+const WorkspaceStore = (() => {
+  let _sessionId  = null;
+  let _workingDir = null;
+
+  const _listeners = {};
+
+  function _on(event, handler) {
+    (_listeners[event] ||= []).push(handler);
+    return () => {
+      const list = _listeners[event];
+      const i = list ? list.indexOf(handler) : -1;
+      if (i >= 0) list.splice(i, 1);
+    };
+  }
+
+  function _emit(event, payload) {
+    (_listeners[event] || []).forEach((h) => h(payload));
+    if (window.Clacky && Clacky.ext) Clacky.ext.emit(event, payload);
+  }
+
+  function _absPath(relPath) {
+    return _workingDir.replace(/\/+$/, "") + "/" + relPath;
+  }
+
+  const state = {
+    get sessionId()  { return _sessionId; },
+    get workingDir() { return _workingDir; },
+    hasSession()     { return _sessionId != null; },
+  };
+
+  const Workspace = {
+    on: _on,
+    state,
+
+    /** Update active session context. Returns { changed, hadSession }. */
+    setSession(session) {
+      const newId      = session ? session.id : null;
+      const newDir     = session ? session.working_dir : null;
+      const hadSession = _sessionId != null;
+      const changed    = newId !== _sessionId || newDir !== _workingDir;
+      _sessionId  = newId;
+      _workingDir = newDir;
+      if (changed) _emit("workspace:sessionChanged", { sessionId: newId });
+      return { changed, hadSession };
+    },
+
+    async fetchEntries(relPath) {
+      const url  = `/api/sessions/${encodeURIComponent(_sessionId)}/files?path=${encodeURIComponent(relPath || "")}`;
+      const resp = await fetch(url);
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      return data.entries || [];
+    },
+
+    async revealFile(entry) {
+      const resp = await fetch("/api/file-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: _absPath(entry.path), action: "reveal" })
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+    },
+
+    async fetchFileBlob(entry) {
+      const resp = await fetch("/api/file-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: _absPath(entry.path), action: "download" })
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      return resp.blob();
+    },
+
+    async fetchFileText(entry) {
+      const resp = await fetch("/api/file-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: _absPath(entry.path), action: "download" })
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      return resp.text();
+    },
+  };
+
+  return Workspace;
+})();
+
+const Workspace = WorkspaceStore;