openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/app.js

@@ -116,7 +116,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 +138,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 +159,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 +176,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 +297,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 +306,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));
     },
   };
 })();

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/core/aside.js

@@ -0,0 +1,112 @@
+// ── 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 = 280;
+  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 = true;
+    try { open = localStorage.getItem(OPEN_KEY) !== "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");
+      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");
+      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();
+  }
+})();