openclacky 1.3.2 → 1.3.4

data/lib/clacky/web/app.js

@@ -10,6 +10,14 @@
 // ── DOM helper (shared by all modules loaded after this) ──────────────────
 const $ = id => document.getElementById(id);
 
+// ── Inject X-Lang header into every fetch request ─────────────────────────
+const _nativeFetch = window.fetch;
+window.fetch = function(input, init = {}) {
+  const headers = new Headers(init.headers || {});
+  if (!headers.has("X-Lang")) headers.set("X-Lang", I18n.lang());
+  return _nativeFetch.call(this, input, { ...init, headers });
+};
+
 // ── Utilities (shared) ────────────────────────────────────────────────────
 function escapeHtml(str) {
   return String(str)
@@ -116,7 +124,10 @@ const Router = (() => {
   }
 
   // Core: apply a view change. Called both from navigate() and hashchange.
-  function _apply(view, params = {}) {
+  // Async because the "session" case may need to fetch /api/sessions/:id when
+  // the target session isn't in the paged sidebar list (search clicks, URL
+  // deep links, share links, browser back/forward, notification jumps).
+  async function _apply(view, params = {}) {
     _current = view;
     _params  = params;
 
@@ -135,6 +146,12 @@ const Router = (() => {
 
     _hideAll();
 
+    // Leaving a session view → clear agent scope so agent panels don't linger
+    // over non-session views. The session case re-sets it below.
+    if (view !== "session" && window.Clacky && Clacky.ext && Clacky.ext.context.agentProfile) {
+      Clacky.ext.setContext({ agentProfile: null, sessionId: null });
+    }
+
     // Reveal #app on first navigation — ensures the correct view (and language)
     // is already in place before the user sees anything.
     // #app covers sidebar + main, so data-i18n elements in the sidebar are also
@@ -150,10 +167,14 @@ const Router = (() => {
 
       case "session": {
         const id = params.id;
-        const s  = Sessions.find(id);
+        // findOrFetch falls back to the backend when the session isn't in the
+        // sidebar's paged `_sessions` (search results, URL deep links, share
+        // links, browser back/forward). On success it caches the row in the
+        // local `_extraSessions` pool so subsequent sync `find` calls hit too.
+        const s  = await Sessions.findOrFetch(id);
         if (!s) {
-          // Session not found (e.g. deleted) — fall back to welcome
-          _apply("welcome");
+          // Truly not found (deleted, or never existed) — fall back to welcome.
+          await _apply("welcome");
           return;
         }
         _setHash(`session/${id}`);
@@ -163,6 +184,13 @@ const Router = (() => {
         Sessions.updateInfoBar(s);
         Sessions._restoreMessagesPublic(id);
         Sessions._setActiveId(id);
+        // Scope agent UI / official panels to this session's agent profile, then
+        // re-render every slot so the right panels appear (and a previous
+        // agent's panels are cleared).
+        if (window.Clacky && Clacky.ext) {
+          Clacky.ext.setContext({ agentProfile: s.agent_profile || "general", sessionId: id });
+          Clacky.ext.emit("session:agent-changed", { sessionId: id, agentProfile: s.agent_profile || "general" });
+        }
         // Immediately re-attach saved progress UI (timer + spinner) so it appears
         // instantly without waiting for the async history fetch or WS replay.
         Sessions._attachProgressUI(id);
@@ -277,7 +305,7 @@ const Router = (() => {
       return;
     }
     const { view, params } = _parseHash(location.hash);
-    _apply(view, params);
+    _apply(view, params).catch(err => console.error("Router._apply failed:", err));
   });
 
   return {
@@ -286,13 +314,16 @@ const Router = (() => {
 
     /** Navigate to a view. This is the only way panels should change. */
     navigate(view, params = {}) {
-      _apply(view, params);
+      // Fire-and-forget: _apply is async (may fetch /api/sessions/:id), but
+      // navigate() keeps a sync signature so all existing call sites are
+      // unaffected. Errors are logged; UI falls back to welcome on missing id.
+      _apply(view, params).catch(err => console.error("Router._apply failed:", err));
     },
 
     /** Restore state from current URL hash (called once on boot after data loads). */
     restoreFromHash() {
       const { view, params } = _parseHash(location.hash);
-      _apply(view, params);
+      _apply(view, params).catch(err => console.error("Router._apply failed:", err));
     },
   };
 })();
@@ -302,13 +333,53 @@ const Modal = (() => {
   /** Show a yes/no confirmation dialog. Returns a Promise<boolean>. */
   function confirm(message) {
     return new Promise(resolve => {
+      const overlay = $("modal-overlay");
+      $("modal-message").textContent = message;
+      $("modal-skip-label").style.display = "none";
+      $("modal-skip-cb").checked = false;
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
+
+      const cleanup = (result) => {
+        overlay.style.display = "none";
+        $("modal-yes").onclick = null;
+        $("modal-no").onclick  = null;
+        resolve(result);
+      };
+      $("modal-yes").onclick = () => cleanup(true);
+      $("modal-no").onclick  = () => cleanup(false);
+    });
+  }
+
+  /**
+   * Like confirm(), but shows a "don't show again" checkbox.
+   * If localStorage[storageKey] === "1", resolves true immediately.
+   * Returns Promise<boolean>.
+   */
+  function confirmOnce(storageKey, message, skipLabel) {
+    if (localStorage.getItem(storageKey) === "1") return Promise.resolve(true);
+
+    return new Promise(resolve => {
+      const overlay = $("modal-overlay");
       $("modal-message").textContent   = message;
-      $("modal-overlay").style.display = "flex";
+      $("modal-skip-text").textContent = skipLabel;
+      $("modal-skip-cb").checked       = false;
+      $("modal-skip-label").style.display = "flex";
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
 
       const cleanup = (result) => {
-        $("modal-overlay").style.display = "none";
+        overlay.style.display = "none";
+        $("modal-skip-label").style.display = "none";
         $("modal-yes").onclick = null;
         $("modal-no").onclick  = null;
+        if (result && $("modal-skip-cb").checked) {
+          localStorage.setItem(storageKey, "1");
+        }
         resolve(result);
       };
       $("modal-yes").onclick = () => cleanup(true);
@@ -319,10 +390,15 @@ const Modal = (() => {
   /** Show a text input prompt dialog. Returns a Promise<string|null>. */
   function prompt(message, defaultValue = "") {
     return new Promise(resolve => {
+      const overlay = $("prompt-modal-overlay");
       $("prompt-modal-message").textContent = message;
       const input = $("prompt-modal-input");
       input.value = defaultValue;
-      $("prompt-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       // Auto-focus and select all text
       setTimeout(() => {
@@ -352,10 +428,15 @@ const Modal = (() => {
   /** Show a rename dialog. Returns a Promise<string|null>. */
   function rename(currentName = "") {
     return new Promise(resolve => {
+      const overlay = $("rename-modal-overlay");
       const input = $("rename-modal-input");
       input.value = currentName;
       input.classList.remove("input-error");
-      $("rename-modal-overlay").style.display = "flex";
+      // Re-attach to <body> end so it stacks above dynamically-appended overlays.
+      if (overlay.parentNode !== document.body || overlay.nextSibling) {
+        document.body.appendChild(overlay);
+      }
+      overlay.style.display = "flex";
       
       setTimeout(() => {
         input.focus();
@@ -400,7 +481,7 @@ const Modal = (() => {
     });
   }
 
-  return { confirm, prompt, rename };
+  return { confirm, confirmOnce, prompt, rename };
 })();
 
 // ── Toast helper ──────────────────────────────────────────────────────────
@@ -527,7 +608,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
   let startW = 0;
 
   // Restore saved width
-  const saved = localStorage.getItem("sidebar-width");
+  const saved = localStorage.getItem("clacky-sidebar-width");
   if (saved) {
     const w = parseFloat(saved);
     if (w >= MIN_W && w <= MAX_W) {
@@ -560,7 +641,7 @@ $("sidebar-overlay").addEventListener("click", _closeSidebar);
     handle.classList.remove("active");
     document.body.style.cursor = "";
     document.body.style.userSelect = "";
-    localStorage.setItem("sidebar-width", _getWidth());
+    localStorage.setItem("clacky-sidebar-width", _getWidth());
   });
 })();
 

data/lib/clacky/web/components/code-editor.js

@@ -0,0 +1,197 @@
+/* global CM */
+/**
+ * CodeEditor — a reusable wrapper around CodeMirror 6.
+ *
+ * Usage:
+ *   CodeEditor.open({
+ *     content: '# Hello',
+ *     language: 'markdown',
+ *     title: 'SKILL.md',
+ *     readOnly: false,
+ *     onSave: async (content) => { ... }
+ *   });
+ */
+;(function(window) {
+  "use strict";
+
+  const LANG_MAP = {
+    markdown: () => CM.markdown({ base: CM.markdownLanguage }),
+    md:       () => CM.markdown({ base: CM.markdownLanguage }),
+  };
+
+  const IMAGE_EXTS  = new Set(["png","jpg","jpeg","gif","bmp","webp","svg","ico","tiff","tif","avif"]);
+  const BINARY_EXTS = new Set(["zip","gz","7z","tar","dmg","pdf","xls","xlsx","doc","docx","exe","rar","ttf","mov","mp4","mp3","db","db3","sqlite","sqlite3","dat","wasm","bin","so","dylib","dll"]);
+
+  function _fileKind(filename) {
+    if (!filename) return "text";
+    const ext = filename.split(".").pop().toLowerCase();
+    if (IMAGE_EXTS.has(ext))  return "image";
+    if (BINARY_EXTS.has(ext)) return "binary";
+    return "text";
+  }
+
+  function _detectLanguage(filename) {
+    if (!filename) return "markdown";
+    const ext = filename.split(".").pop().toLowerCase();
+    const map = { md: "markdown", markdown: "markdown" };
+    return map[ext] || "markdown";
+  }
+
+  function _isDark() {
+    return document.documentElement.getAttribute("data-theme") === "dark";
+  }
+
+  function _buildExtensions(opts) {
+    const extensions = [
+      CM.lineNumbers(),
+      CM.highlightActiveLineGutter(),
+      CM.highlightSpecialChars(),
+      CM.history(),
+      CM.drawSelection(),
+      CM.dropCursor(),
+      CM.indentOnInput(),
+      CM.bracketMatching(),
+      CM.rectangularSelection(),
+      CM.crosshairCursor(),
+      CM.highlightActiveLine(),
+      CM.highlightSelectionMatches(),
+      CM.keymap.of([
+        ...CM.defaultKeymap,
+        ...CM.historyKeymap,
+        ...CM.searchKeymap,
+        ...CM.foldKeymap,
+        CM.indentWithTab,
+      ]),
+      CM.search(),
+      CM.foldGutter(),
+      CM.syntaxHighlighting(CM.defaultHighlightStyle, { fallback: true }),
+      CM.EditorView.lineWrapping,
+    ];
+
+    if (_isDark()) {
+      extensions.push(CM.oneDark);
+    }
+
+    const langFn = LANG_MAP[opts.language || "markdown"];
+    if (langFn) extensions.push(langFn());
+
+    if (opts.readOnly) {
+      extensions.push(CM.EditorState.readOnly.of(true));
+    }
+
+    if (opts.onSave) {
+      extensions.push(CM.keymap.of([{
+        key: "Mod-s",
+        run: () => { opts.onSave(opts._getContent()); return true; }
+      }]));
+    }
+
+    return extensions;
+  }
+
+  function open(opts) {
+    const {
+      content = "",
+      title = "Editor",
+      readOnly = false,
+      onSave = null,
+      onClose = null,
+      imageUrl = null,
+    } = opts;
+
+    const kind = opts.kind || (opts.filename ? _fileKind(opts.filename) : "text");
+    const language = opts.language || _detectLanguage(opts.filename);
+
+    let overlay = document.getElementById("code-editor-overlay");
+    if (overlay) overlay.remove();
+
+    overlay = document.createElement("div");
+    overlay.id = "code-editor-overlay";
+    overlay.className = "modal-overlay";
+
+    const cancelLabel = I18n.t("modal.cancel");
+    const closeLabel = I18n.t("modal.close");
+    const saveLabel = I18n.t("modal.save");
+
+    const isReadOnlyOrImage = readOnly || kind === "image";
+    const footerActions = isReadOnlyOrImage
+      ? `<button class="btn btn-secondary code-editor-cancel">${closeLabel}</button>`
+      : `<button class="btn btn-secondary code-editor-cancel">${cancelLabel}</button><button class="btn btn-primary code-editor-save">${saveLabel}</button>`;
+
+    overlay.innerHTML = `
+      <div class="code-editor-modal${kind === "image" ? " code-editor-modal--image" : ""}">
+        <div class="code-editor-header">
+          <h3 class="code-editor-title"></h3>
+          <button class="code-editor-close" title="${closeLabel}">&times;</button>
+        </div>
+        <div class="code-editor-body"></div>
+        <div class="code-editor-footer">
+          <span class="code-editor-status"></span>
+          <div class="code-editor-actions">${footerActions}</div>
+        </div>
+      </div>`;
+
+    document.body.appendChild(overlay);
+    overlay.querySelector(".code-editor-title").textContent = title;
+
+    const body    = overlay.querySelector(".code-editor-body");
+    const status  = overlay.querySelector(".code-editor-status");
+    const closeBtn  = overlay.querySelector(".code-editor-close");
+    const cancelBtn = overlay.querySelector(".code-editor-cancel");
+    const saveBtn   = overlay.querySelector(".code-editor-save");
+
+    function close() {
+      overlay.remove();
+      if (onClose) onClose();
+    }
+
+    closeBtn.addEventListener("click", close);
+    if (cancelBtn) cancelBtn.addEventListener("click", close);
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+
+    if (kind === "image") {
+      body.classList.add("code-editor-body--image");
+      const img = document.createElement("img");
+      img.className = "code-editor-img-preview";
+      img.alt = title;
+      img.src = imageUrl || "";
+      body.appendChild(img);
+      return { close };
+    }
+
+    const editorOpts = { language, readOnly, onSave: null, _getContent: null };
+    const getContent = () => view.state.doc.toString();
+    editorOpts._getContent = getContent;
+    editorOpts.onSave = onSave ? () => doSave() : null;
+
+    const view = new CM.EditorView({
+      state: CM.EditorState.create({
+        doc: content,
+        extensions: _buildExtensions(editorOpts),
+      }),
+      parent: body,
+    });
+
+    async function doSave() {
+      if (!onSave) return;
+      if (saveBtn) saveBtn.disabled = true;
+      status.textContent = I18n.t("modal.saving");
+      status.className = "code-editor-status";
+      try {
+        await onSave(getContent());
+        close();
+      } catch (e) {
+        status.textContent = e.message || "Save failed";
+        status.className = "code-editor-status code-editor-status-error";
+        if (saveBtn) saveBtn.disabled = false;
+      }
+    }
+
+    if (saveBtn) saveBtn.addEventListener("click", doSave);
+    setTimeout(() => view.focus(), 50);
+
+    return { view, close, getContent };
+  }
+
+  window.CodeEditor = { open, fileKind: _fileKind };
+})(window);

data/lib/clacky/web/{notify.js → components/notify.js}

@@ -28,7 +28,7 @@
 // ─────────────────────────────────────────────────────────────────────────
 const Notify = (() => {
   const STORAGE_KEY = "clacky-notify-sound";
-  const AUDIO_SRC   = "/notify.mp3";
+  const AUDIO_SRC   = "/assets/notify.mp3";
 
   let _audio = null;
 

data/lib/clacky/web/{onboard.js → components/onboard.js}

@@ -110,6 +110,11 @@ const Onboard = (() => {
     $("setup-phase-key").style.display  = step === "key"  ? "" : "none";
     $("setup-dot-1").className = "setup-step" + (step === "lang" ? " active" : " done");
     $("setup-dot-2").className = "setup-step" + (step === "key"  ? " active" : "");
+    if (step === "key") {
+      $("setup-device-block").style.display   = "";
+      $("setup-manual-toggle").style.display  = "";
+      $("setup-manual-section").style.display = "none";
+    }
   }
 
   // Step 2 — API key setup
@@ -367,9 +372,20 @@ const Onboard = (() => {
 
     $("setup-btn-test").addEventListener("click", _testAndSave);
 
-    // Back to Step 1
+    $("setup-manual-toggle").addEventListener("click", () => {
+      $("setup-device-block").style.display  = "none";
+      $("setup-manual-toggle").style.display = "none";
+      $("setup-manual-section").style.display = "";
+    });
+
     $("setup-btn-back").addEventListener("click", () => {
-      _showSetupStep("lang");
+      if ($("setup-manual-section").style.display !== "none") {
+        $("setup-device-block").style.display  = "";
+        $("setup-manual-toggle").style.display = "";
+        $("setup-manual-section").style.display = "none";
+      } else {
+        _showSetupStep("lang");
+      }
     });
 
     _bindDeviceStep();

data/lib/clacky/web/core/aside.js

@@ -0,0 +1,117 @@
+// ── Session aside chrome — resize / collapse / opener ─────────────────────
+//
+// Host-owned controls for the right column (#session-aside). The tab bar and
+// bodies inside are rendered by Clacky.ext; this only drives the surrounding
+// chrome so slot re-renders never disturb width or collapse state.
+//
+//   - drag #session-aside-resize to change width (persisted)
+//   - #btn-aside-collapse hides the column; #btn-aside-open brings it back
+//   - when the slot is empty (no panels for this agent) CSS collapses the
+//     column on its own; the opener stays hidden in that case
+//
+// Depends on: nothing (loads right after core/ext.js).
+// ───────────────────────────────────────────────────────────────────────────
+"use strict";
+
+(() => {
+  const WIDTH_KEY = "clacky.aside.width";
+  const OPEN_KEY  = "clacky.aside.open";
+  const MIN_W = 256;
+  const MAX_W = 720;
+
+  const $ = (id) => document.getElementById(id);
+
+  function slotEmpty() {
+    const slot = $("ext-slot-session-aside");
+    return !slot || slot.childElementCount === 0;
+  }
+
+  function applyOpenState() {
+    const aside   = $("session-aside");
+    const opener  = $("btn-aside-open");
+    const overlay = $("workspace-overlay");
+    if (!aside) return;
+    let open = false;
+    try {
+      const stored = localStorage.getItem(OPEN_KEY);
+      open = stored === null ? false : stored !== "0";
+    } catch (_e) { /* ignore */ }
+    const empty = slotEmpty();
+    aside.classList.toggle("collapsed", !open);
+    if (opener)  opener.style.display = (!open && !empty) ? "" : "none";
+    if (overlay) overlay.classList.toggle("active", open && !empty);
+  }
+
+  function setOpen(open) {
+    try { localStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch (_e) { /* ignore */ }
+    applyOpenState();
+  }
+
+  function initResize() {
+    const aside  = $("session-aside");
+    const handle = $("session-aside-resize");
+    if (!aside || !handle) return;
+
+    try {
+      const saved = parseFloat(localStorage.getItem(WIDTH_KEY));
+      if (saved >= MIN_W && saved <= MAX_W) aside.style.setProperty("--session-aside-width", saved + "px");
+    } catch (_e) { /* ignore */ }
+
+    let dragging = false;
+    let startX = 0;
+    let startW = 0;
+
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      dragging = true;
+      startX = e.clientX;
+      startW = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));
+      handle.classList.add("active");
+      aside.style.transition = "none";
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    });
+
+    document.addEventListener("mousemove", (e) => {
+      if (!dragging) return;
+      const dx = startX - e.clientX;
+      const w = Math.min(MAX_W, Math.max(MIN_W, startW + dx));
+      aside.style.setProperty("--session-aside-width", w + "px");
+    });
+
+    document.addEventListener("mouseup", () => {
+      if (!dragging) return;
+      dragging = false;
+      handle.classList.remove("active");
+      aside.style.transition = "";
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      const w = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));
+      try { localStorage.setItem(WIDTH_KEY, w); } catch (_e) { /* ignore */ }
+    });
+  }
+
+  function init() {
+    const collapse = $("btn-aside-collapse");
+    const opener   = $("btn-aside-open");
+    const overlay  = $("workspace-overlay");
+    if (collapse) collapse.addEventListener("click", () => setOpen(false));
+    if (opener)   opener.addEventListener("click", () => setOpen(true));
+    if (overlay)  overlay.addEventListener("click", () => setOpen(false));
+    initResize();
+    applyOpenState();
+
+    // Re-evaluate opener visibility whenever the slot content changes (panels
+    // re-render on session / agent switch).
+    const slot = $("ext-slot-session-aside");
+    if (slot && window.MutationObserver) {
+      new MutationObserver(() => applyOpenState()).observe(slot, { childList: true });
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();