openclacky 1.3.1 → 1.3.3

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

@@ -0,0 +1,170 @@
+// ── Profile · store — Soul/User/memories data + curate/delete network ─────
+//
+// Owns the profile data (soul / user identity files, memories list) and the
+// network calls: load profile, load memories, fetch one memory, delete a
+// memory, and open agent-led curate sessions. It never renders.
+//
+// Emits store events the view reacts to; mirrors them to the extension bus via
+// Clacky.ext.emit.
+//
+// `Profile` stays the single public facade.
+//
+// Depends on: Sessions, I18n, Clacky.ext.
+// ───────────────────────────────────────────────────────────────────────────
+
+const ProfileStore = (() => {
+  let _data = { user: null, soul: null, memories: [] };
+
+  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);
+  }
+
+  const state = {
+    get user()     { return _data.user; },
+    get soul()     { return _data.soul; },
+    get memories() { return _data.memories; },
+  };
+
+  async function _loadProfile() {
+    try {
+      const res  = await fetch("/api/profile");
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.error || "Load failed");
+      _data.user = data.user;
+      _data.soul = data.soul;
+    } catch (e) {
+      console.error("[Profile] load profile failed", e);
+      _data.user = null;
+      _data.soul = null;
+    }
+  }
+
+  async function _loadMemories() {
+    try {
+      const res  = await fetch("/api/memories");
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.error || "Load failed");
+      _data.memories = data.memories || [];
+    } catch (e) {
+      console.error("[Profile] load memories failed", e);
+      _data.memories = [];
+    }
+  }
+
+  async function _openCurateSession(name, command) {
+    const res     = await fetch("/api/sessions", {
+      method:  "POST",
+      headers: { "Content-Type": "application/json" },
+      body:    JSON.stringify({ name, source: "onboard" })
+    });
+    const data    = await res.json();
+    const session = data.session;
+    if (!session) throw new Error("No session returned");
+
+    Sessions.add(session);
+    Sessions.renderList();
+    Sessions.setPendingMessage(session.id, command);
+    Sessions.select(session.id);
+  }
+
+  const Profile = {
+    on: _on,
+    state,
+
+    async loadAll() {
+      await Promise.all([_loadProfile(), _loadMemories()]);
+      _emit("profile:changed");
+    },
+
+    /** Fetch one memory's raw content. Returns { ok, content, error }. */
+    async fetchMemory(filename) {
+      try {
+        const res  = await fetch("/api/memories/" + encodeURIComponent(filename));
+        const data = await res.json();
+        if (!data.ok) throw new Error(data.error || "Load failed");
+        return { ok: true, content: data.content || "" };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
+    /** Delete a memory (trash semantics). Returns { ok, error }. */
+    async deleteMemory(filename) {
+      try {
+        const res  = await fetch("/api/memories/" + encodeURIComponent(filename), { method: "DELETE" });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok || !data.ok) throw new Error(data.error || `HTTP ${res.status}`);
+        _data.memories = _data.memories.filter(x => x.filename !== filename);
+        _emit("profile:memoriesChanged");
+        return { ok: true };
+      } catch (e) {
+        console.error("[Profile] delete memory failed", e);
+        return { ok: false, error: e.message };
+      }
+    },
+
+    /** Open an /onboard scope:<soul|user> curate session. */
+    async curateProfile(scope) {
+      const lang = (I18n && I18n.lang) ? I18n.lang() : "en";
+      const sessionName = (I18n && I18n.t)
+        ? I18n.t(scope === "soul" ? "profile.curateName.soul" : "profile.curateName.user")
+        : scope;
+      await _openCurateSession(sessionName, `/onboard scope:${scope} lang:${lang}`);
+    },
+
+    /** Update SOUL.md or USER.md content. Returns { ok, error }. */
+    async updateProfile(kind, content) {
+      const res = await fetch("/api/profile", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind, content })
+      });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.error || "Save failed");
+      await Profile.loadAll();
+    },
+
+    /** Update a memory file's content. Returns { ok, error }. */
+    async updateMemory(filename, content) {
+      try {
+        const res = await fetch("/api/memories/" + encodeURIComponent(filename), {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ content })
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "Save failed");
+        await _loadMemories();
+        _emit("profile:memoriesChanged");
+        return { ok: true };
+      } catch (e) {
+        console.error("[Profile] update memory failed", e);
+        return { ok: false, error: e.message };
+      }
+    },
+
+    /** Open an /onboard path:<abs> curate session for a memory. */
+    async curateMemory(m) {
+      const absPath = m.path || ("~/.clacky/memories/" + m.filename);
+      const base    = (I18n && I18n.t) ? I18n.t("memories.curateName") : "Curate";
+      const name    = base + " · " + (m.topic || m.filename);
+      await _openCurateSession(name, `/onboard path:${absPath}`);
+    },
+  };
+
+  return Profile;
+})();
+
+const Profile = ProfileStore;

data/lib/clacky/web/{profile.js → features/profile/view.js}

@@ -1,28 +1,17 @@
-// profile.js — Assistant Memory panel
+// ── Profile · view — markdown render, tabs, memory cards, DOM wiring ───────
 //
-// Three tabs, all read-only views with single-action buttons that delegate to
-// the agent via slash-commands:
+// Owns the safe Markdown renderer, identity/memory rendering, tab switching,
+// and all DOM wiring. Reads through ProfileStore.state; load/curate/delete go
+// through store actions. Confirm dialogs and alerts (UI concerns) live here.
 //
-//   🧬 Soul      — SOUL.md rendered. Button opens /onboard scope:soul.
-//   👤 User      — USER.md rendered. Button opens /onboard scope:user.
-//   🧠 Memories  — list of ~/.clacky/memories/*.md, sorted by updated_at desc.
-//                  Per-card "Curate" opens /onboard path:<abs>.
-//                  Per-card "Delete" calls DELETE /api/memories/:filename
-//                  (with a confirm); the file lands in File Recall.
+// Augments the `Profile` facade with onPanelShow.
 //
-// The single `onboard` skill handles all three slash-command shapes: with no
-// args it runs the full first-run ceremony; with `scope:` or `path:` it runs
-// the corresponding light curate flow.
-//
-// Philosophy: the agent's inner state is never hand-edited. The UI shows it
-// and offers curation buttons that start agent-led flows.
-//
-// Load order: after app.js modules (I18n, Sessions, Onboard), before boot.
+// Depends on: ProfileStore, I18n.
+// ───────────────────────────────────────────────────────────────────────────
 
-const Profile = (() => {
+const ProfileView = (() => {
   let _wired   = false;
   let _activeTab = "soul";
-  let _data    = { user: null, soul: null, memories: [] };
 
   function $(id) { return document.getElementById(id); }
 
@@ -30,11 +19,8 @@ const Profile = (() => {
     return (I18n && I18n.t) ? I18n.t(key, args) : key;
   }
 
-  // ── Minimal safe Markdown renderer ──────────────────────────────────
-  // Handles:  # H1 / ## H2 / ### H3, **bold**, *em*, `code`,
-  //           - / * bullets, numbered lists, blank-line paragraphs.
-  // Everything is HTML-escaped first, so raw user Markdown can never
-  // inject script/style/event attributes.
+  // ── Minimal safe Markdown renderer ──────────────────────────────────────
+  // HTML-escapes first, so raw Markdown can never inject script/style/events.
 
   function _escapeHtml(s) {
     return String(s ?? "")
@@ -46,7 +32,6 @@ const Profile = (() => {
   }
 
   function _renderInline(text) {
-    // Inline: **bold**, *em*, `code`. Text is already HTML-escaped by caller.
     return text
       .replace(/`([^`]+)`/g, "<code>$1</code>")
       .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
@@ -59,7 +44,7 @@ const Profile = (() => {
     const lines = escaped.split(/\r?\n/);
 
     const out = [];
-    let listType = null;   // "ul" | "ol" | null
+    let listType = null;
     let paraBuf  = [];
 
     function flushPara() {
@@ -122,38 +107,10 @@ const Profile = (() => {
     return (i === 0 ? n.toFixed(0) : n.toFixed(2)) + " " + units[i];
   }
 
-  // ── Data loading ─────────────────────────────────────────────────────
-
-  async function _loadProfile() {
-    try {
-      const res  = await fetch("/api/profile");
-      const data = await res.json();
-      if (!res.ok || !data.ok) throw new Error(data.error || "Load failed");
-      _data.user = data.user;
-      _data.soul = data.soul;
-    } catch (e) {
-      console.error("[Profile] load profile failed", e);
-      _data.user = null;
-      _data.soul = null;
-    }
-  }
-
-  async function _loadMemories() {
-    try {
-      const res  = await fetch("/api/memories");
-      const data = await res.json();
-      if (!res.ok || !data.ok) throw new Error(data.error || "Load failed");
-      _data.memories = data.memories || [];
-    } catch (e) {
-      console.error("[Profile] load memories failed", e);
-      _data.memories = [];
-    }
-  }
-
-  // ── Rendering ────────────────────────────────────────────────────────
+  // ── Rendering ────────────────────────────────────────────────────────────
 
   function _renderIdentitySection(kind) {
-    const file    = _data[kind];
+    const file    = ProfileStore.state[kind];
     const wrap    = $(`profile-${kind}-body`);
     const status  = $(`profile-${kind}-status`);
     const pathEl  = $(`profile-${kind}-path`);
@@ -183,19 +140,20 @@ const Profile = (() => {
     const summary = $("memories-summary");
     if (!list) return;
 
+    const memories = ProfileStore.state.memories;
     if (summary) {
-      summary.textContent = _data.memories.length
-        ? _t("memories.summary", { count: _data.memories.length })
+      summary.textContent = memories.length
+        ? _t("memories.summary", { count: memories.length })
         : _t("memories.emptyHint");
     }
 
-    if (_data.memories.length === 0) {
+    if (memories.length === 0) {
       list.innerHTML = `<div class="profile-empty">${_t("memories.empty")}</div>`;
       return;
     }
 
     list.innerHTML = "";
-    _data.memories.forEach(m => list.appendChild(_buildMemoryCard(m)));
+    memories.forEach(m => list.appendChild(_buildMemoryCard(m)));
   }
 
   function _buildMemoryCard(m) {
@@ -222,11 +180,19 @@ const Profile = (() => {
       </div>
       <div class="memory-card-actions">
         <button class="btn-memory-curate" title="${_t("memories.curateTitle")}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 4V2"/><path d="M15 16v-2"/><path d="M8 9h2"/><path d="M20 9h2"/>
+            <path d="M17.8 11.8 19 13"/><path d="M15 9h.01"/><path d="M17.8 6.2 19 5"/>
+            <path d="m3 21 9-9"/><path d="M12.2 6.2 11 5"/>
+          </svg>
+          <span>${_t("memories.curate")}</span>
+        </button>
+        <button class="btn-memory-edit" title="${_t("memories.edit")}">
           <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M12 20h9"/>
             <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
           </svg>
-          <span>${_t("memories.curate")}</span>
+          <span>${_t("memories.edit")}</span>
         </button>
         <button class="btn-memory-delete" title="${_t("memories.deleteTitle")}">
           <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -245,12 +211,14 @@ const Profile = (() => {
       </div>`;
     card.appendChild(head);
 
-    // Collapsible body — rendered lazily on first expand.
     const body = document.createElement("div");
     body.className = "memory-card-body";
     body.style.display = "none";
     card.appendChild(body);
 
+    head.querySelector(".btn-memory-edit")
+      .addEventListener("click", (e) => { e.stopPropagation(); _editMemory(m); });
+
     head.querySelector(".btn-memory-curate")
       .addEventListener("click", (e) => { e.stopPropagation(); _curateMemory(m); });
 
@@ -267,18 +235,16 @@ const Profile = (() => {
       } else {
         if (!body.dataset.loaded) {
           body.innerHTML = `<div class="memory-card-loading">${_t("memories.loading")}</div>`;
-          fetch("/api/memories/" + encodeURIComponent(m.filename))
-            .then(r => r.json())
-            .then(d => {
-              if (!d.ok) throw new Error(d.error || "Load failed");
-              const stripped = _stripFrontmatter(d.content || "");
-              body.innerHTML = _renderMarkdown(stripped)
-                || `<div class="profile-empty">${_t("profile.emptyContent")}</div>`;
-              body.dataset.loaded = "1";
-            })
-            .catch(err => {
-              body.innerHTML = `<div class="profile-empty">${_escapeHtml(err.message)}</div>`;
-            });
+          Profile.fetchMemory(m.filename).then(res => {
+            if (!res.ok) {
+              body.innerHTML = `<div class="profile-empty">${_escapeHtml(res.error)}</div>`;
+              return;
+            }
+            const stripped = _stripFrontmatter(res.content);
+            body.innerHTML = _renderMarkdown(stripped)
+              || `<div class="profile-empty">${_t("profile.emptyContent")}</div>`;
+            body.dataset.loaded = "1";
+          });
         }
         body.style.display = "";
         expandBtn.setAttribute("aria-expanded", "true");
@@ -286,14 +252,12 @@ const Profile = (() => {
       }
     }
     expandBtn.addEventListener("click", (e) => { e.stopPropagation(); toggle(); });
-    // Clicking the info area also toggles, for a larger hit-target.
-    head.querySelector(".memory-card-info")
-      .addEventListener("click", toggle);
+    head.querySelector(".memory-card-info").addEventListener("click", toggle);
 
     return card;
   }
 
-  // ── Tabs ─────────────────────────────────────────────────────────────
+  // ── Tabs ─────────────────────────────────────────────────────────────────
 
   function _switchTab(tab) {
     if (!tab || tab === _activeTab) return;
@@ -314,33 +278,13 @@ const Profile = (() => {
     });
   }
 
-  // ── Actions ──────────────────────────────────────────────────────────
+  // ── Actions (UI side, delegating to store) ───────────────────────────────
 
-  // Curate one of the identity files via /onboard scope:<soul|user>.
   async function _curateProfile(scope) {
     const btn = $(`btn-profile-curate-${scope}`);
     if (btn) btn.disabled = true;
     try {
-      const lang = (I18n && I18n.lang) ? I18n.lang() : "en";
-      const sessionName = _t(
-        scope === "soul" ? "profile.curateName.soul" : "profile.curateName.user"
-      );
-      const res = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name: sessionName, source: "onboard" })
-      });
-      const data    = await res.json();
-      const session = data.session;
-      if (!session) throw new Error("No session returned");
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(
-        session.id,
-        `/onboard scope:${scope} lang:${lang}`
-      );
-      Sessions.select(session.id);
+      await Profile.curateProfile(scope);
     } catch (e) {
       console.error("[Profile] curate profile failed", e);
       alert(_t("profile.curateFail") + ": " + e.message);
@@ -348,52 +292,49 @@ const Profile = (() => {
     }
   }
 
-  // Curate a single memory → /onboard path:<abs> session.
+  async function _editMemory(m) {
+    const res = await Profile.fetchMemory(m.filename);
+    if (!res.ok) { alert(_t("memories.curateFail") + ": " + res.error); return; }
+
+    CodeEditor.open({
+      content: res.content,
+      title: m.topic || m.filename,
+      language: "markdown",
+      onSave: async (newContent) => {
+        const r = await Profile.updateMemory(m.filename, newContent);
+        if (!r.ok) throw new Error(r.error);
+      }
+    });
+  }
+
   async function _curateMemory(m) {
-    const absPath = m.path || ("~/.clacky/memories/" + m.filename);
     try {
-      const name = _t("memories.curateName") + " · " + (m.topic || m.filename);
-      const res  = await fetch("/api/sessions", {
-        method:  "POST",
-        headers: { "Content-Type": "application/json" },
-        body:    JSON.stringify({ name, source: "onboard" })
-      });
-      const data    = await res.json();
-      const session = data.session;
-      if (!session) throw new Error("No session returned");
-
-      Sessions.add(session);
-      Sessions.renderList();
-      Sessions.setPendingMessage(session.id, `/onboard path:${absPath}`);
-      Sessions.select(session.id);
+      await Profile.curateMemory(m);
     } catch (e) {
       console.error("[Profile] curate memory failed", e);
       alert(_t("memories.curateFail") + ": " + e.message);
     }
   }
 
-  // Delete a memory directly. Backend uses `trash` semantics so it lands in
-  // File Recall and can still be recovered.
   async function _deleteMemory(m) {
     const label = m.topic || m.filename;
     if (!confirm(_t("memories.confirmDelete", { name: label }))) return;
+    const res = await Profile.deleteMemory(m.filename);
+    if (!res.ok) alert(_t("memories.deleteFail") + ": " + res.error);
+  }
 
-    try {
-      const res = await fetch(
-        "/api/memories/" + encodeURIComponent(m.filename),
-        { method: "DELETE" }
-      );
-      const data = await res.json().catch(() => ({}));
-      if (!res.ok || !data.ok) {
-        throw new Error(data.error || `HTTP ${res.status}`);
-      }
-      // Optimistic local remove + re-render.
-      _data.memories = _data.memories.filter(x => x.filename !== m.filename);
-      _renderMemories();
-    } catch (e) {
-      console.error("[Profile] delete memory failed", e);
-      alert(_t("memories.deleteFail") + ": " + e.message);
-    }
+  function _editProfile(kind) {
+    const file = ProfileStore.state[kind];
+    if (!file) return;
+
+    const title = kind === "soul" ? _t("profile.whoIAm") : _t("profile.whoYouAre");
+
+    CodeEditor.open({
+      content: file.content || "",
+      title,
+      language: "markdown",
+      onSave: (newContent) => Profile.updateProfile(kind, newContent)
+    });
   }
 
   // ── Wiring ───────────────────────────────────────────────────────────
@@ -402,41 +343,50 @@ const Profile = (() => {
     if (_wired) return;
     _wired = true;
 
-    // Tabs
     document.querySelectorAll(".profile-tab").forEach(el => {
       el.addEventListener("click", () => _switchTab(el.dataset.tab));
     });
 
-    // Per-tab curate buttons
     const soulBtn = $("btn-profile-curate-soul");
     if (soulBtn) soulBtn.addEventListener("click", () => _curateProfile("soul"));
     const userBtn = $("btn-profile-curate-user");
     if (userBtn) userBtn.addEventListener("click", () => _curateProfile("user"));
 
+    // Per-tab direct edit buttons
+    const editSoulBtn = $("btn-profile-edit-soul");
+    if (editSoulBtn) editSoulBtn.addEventListener("click", () => _editProfile("soul"));
+    const editUserBtn = $("btn-profile-edit-user");
+    if (editUserBtn) editUserBtn.addEventListener("click", () => _editProfile("user"));
+
     // Memories list reload
     const refreshMemBtn = $("btn-memories-refresh-list");
-    if (refreshMemBtn) refreshMemBtn.addEventListener("click", () => _loadAndRender());
+    if (refreshMemBtn) refreshMemBtn.addEventListener("click", () => Profile.loadAll());
   }
 
-  async function _loadAndRender() {
-    await Promise.all([_loadProfile(), _loadMemories()]);
+  function _renderAll() {
     _renderIdentitySection("soul");
     _renderIdentitySection("user");
     _renderMemories();
   }
 
-  // ── Public API ────────────────────────────────────────────────────────
+  function _subscribe() {
+    Profile.on("profile:changed", _renderAll);
+    Profile.on("profile:memoriesChanged", _renderMemories);
+  }
 
-  return {
+  const viewApi = {
     onPanelShow() {
       _wire();
-      // Re-enable curate buttons on every panel entry — they may have been
-      // disabled by a prior click that navigated away.
       ["soul", "user"].forEach(s => {
         const b = $(`btn-profile-curate-${s}`);
         if (b) b.disabled = false;
       });
-      _loadAndRender();
+      Profile.loadAll();
     }
   };
+
+  return { init: _subscribe, api: viewApi };
 })();
+
+Object.assign(Profile, ProfileView.api);
+ProfileView.init();