@symerian/symi 3.5.20 → 3.5.21

package/dist/control-ui/js/symframe-awaiting.js

@@ -0,0 +1,301 @@
+// ── Symframe AWAITING surface ───────────────────────────────────────────────
+// Stage C of the Dynamic Glass Panel arc — see ~/Documents/dynamic-glass-panel.md.
+//
+// The AWAITING surface is a footer inside the symframe that merges
+// in-flight sub-agents and scheduled cron jobs into a single list —
+// one mental concept: "things that aren't done yet."
+//
+// Sort order:
+//   1. In-flight sub-agents first, sorted by start time (descending —
+//      most-recently-started visible at the top)
+//   2. Then scheduled jobs sorted by next ETA (soonest first)
+//
+// Data flow:
+//   subagents.js + scheduling.js dispatch CustomEvents after each
+//   successful poll fetch. The AWAITING surface listens to both events
+//   and re-renders the merged list. No duplicate polling — single
+//   source of truth per data type.
+//
+// Click handlers:
+//   - Sub-agent row → no-op for now (subagents.list returns enough
+//     info to display, but there's no per-subagent detail modal yet;
+//     future enhancement: open a side view with the subagent transcript)
+//   - Schedule row → opens the existing schedule edit modal via
+//     window.schedulingPanel.openForEdit(job)
+//   - Schedule toggle → window.schedulingPanel.toggle(jobId)
+//   - [+ Add] → small menu: "Spawn subagent" / "Add scheduled task"
+//     → opens the corresponding existing modal.
+// ─────────────────────────────────────────────────────────────────────────────
+
+"use strict";
+
+(function () {
+  const root = document.getElementById("symframe-awaiting");
+  if (!root) {
+    return;
+  }
+  const list = document.getElementById("awaiting-list");
+  const countEl = document.getElementById("awaiting-count");
+  const addBtn = document.getElementById("awaiting-add-btn");
+  const addMenu = document.getElementById("awaiting-add-menu");
+
+  // ── State ──
+  let subagents = [];
+  let schedules = [];
+
+  // ── DOM helpers ──
+  function escHtml(s) {
+    return String(s ?? "")
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  // ── Formatters ──
+  function formatRuntime(sub) {
+    const start = sub.startedAt;
+    const end = sub.endedAt || Date.now();
+    if (!start) {
+      return "--";
+    }
+    const seconds = Math.floor((end - start) / 1000);
+    if (seconds < 60) {
+      return `${seconds}s`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (minutes < 60) {
+      return `${minutes}m${secs > 0 ? secs + "s" : ""}`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h${mins}m`;
+  }
+
+  function formatEta(nextRunAtMs) {
+    if (!nextRunAtMs) {
+      return "—";
+    }
+    const ms = nextRunAtMs - Date.now();
+    if (ms <= 0) {
+      return "now";
+    }
+    const minutes = Math.floor(ms / 60_000);
+    if (minutes < 1) {
+      return "<1m";
+    }
+    if (minutes < 60) {
+      return `in ${minutes}m`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    if (hours < 24) {
+      return mins > 0 ? `in ${hours}h ${mins}m` : `in ${hours}h`;
+    }
+    const days = Math.floor(hours / 24);
+    const hrs = hours % 24;
+    return hrs > 0 ? `in ${days}d ${hrs}h` : `in ${days}d`;
+  }
+
+  // ── Item builders ──
+  function buildSubagentRow(sub) {
+    const item = document.createElement("div");
+    item.className = "awaiting-item awaiting-item-subagent";
+    item.dataset.runId = sub.runId || "";
+    const label = sub.label || "Subagent";
+    const status = sub.status === "active" || !sub.endedAt ? "running" : sub.status;
+    const right = status === "running" ? formatRuntime(sub) : status;
+    item.innerHTML = `
+      <span class="awaiting-glyph awaiting-glyph-subagent">◆</span>
+      <span class="awaiting-label">${escHtml(label)}</span>
+      <span class="awaiting-meta">${escHtml(right)}</span>
+    `;
+    return item;
+  }
+
+  function buildScheduleRow(job) {
+    const item = document.createElement("div");
+    item.className = "awaiting-item awaiting-item-schedule";
+    if (!job.enabled) {
+      item.classList.add("awaiting-item-disabled");
+    }
+    item.dataset.scheduleId = job.id || "";
+    item.tabIndex = 0;
+    item.setAttribute("role", "button");
+    const name = job.name || "Unnamed";
+    const eta = job.enabled ? formatEta(job.state?.nextRunAtMs) : "off";
+    item.innerHTML = `
+      <span class="awaiting-glyph awaiting-glyph-schedule" data-action="toggle" title="${job.enabled ? "Disable" : "Enable"}">⏱</span>
+      <span class="awaiting-label">${escHtml(name)}</span>
+      <span class="awaiting-meta">${escHtml(eta)}</span>
+    `;
+    // Toggle on the glyph; edit modal on the row.
+    item.addEventListener("click", (e) => {
+      if (e.target instanceof Element && e.target.dataset.action === "toggle") {
+        e.stopPropagation();
+        if (typeof window.schedulingPanel?.toggle === "function") {
+          void window.schedulingPanel.toggle(job.id);
+        }
+        return;
+      }
+      if (typeof window.schedulingPanel?.openForEdit === "function") {
+        window.schedulingPanel.openForEdit(job);
+      }
+    });
+    item.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (typeof window.schedulingPanel?.openForEdit === "function") {
+          window.schedulingPanel.openForEdit(job);
+        }
+      }
+    });
+    return item;
+  }
+
+  // ── Render ──
+  function render() {
+    const activeSubagents = subagents
+      .filter((s) => s.status === "active" || !s.endedAt)
+      .toSorted((a, b) => (b.startedAt || 0) - (a.startedAt || 0));
+
+    const sortedSchedules = schedules.toSorted((a, b) => {
+      // Enabled first; then by next ETA ascending; disabled tail
+      if (a.enabled !== b.enabled) {
+        return b.enabled ? 1 : -1;
+      }
+      return (a.state?.nextRunAtMs || Infinity) - (b.state?.nextRunAtMs || Infinity);
+    });
+
+    const totalActive = activeSubagents.length + sortedSchedules.filter((s) => s.enabled).length;
+
+    // Hide entire footer when nothing's pending and no schedules exist —
+    // a quiet panel is part of the design. Show whenever there's any
+    // activity or any scheduled job (even disabled — so user can re-enable).
+    const hasAny = activeSubagents.length > 0 || sortedSchedules.length > 0;
+    root.hidden = !hasAny && !addMenuOpen;
+
+    // Count badge: "N active" (in-flight subagents + enabled schedules)
+    if (countEl) {
+      if (totalActive === 0) {
+        countEl.textContent = "";
+      } else {
+        const subPart =
+          activeSubagents.length > 0
+            ? `${activeSubagents.length} sub${activeSubagents.length !== 1 ? "s" : ""}`
+            : null;
+        const schedPart =
+          sortedSchedules.filter((s) => s.enabled).length > 0
+            ? `${sortedSchedules.filter((s) => s.enabled).length} job${sortedSchedules.filter((s) => s.enabled).length !== 1 ? "s" : ""}`
+            : null;
+        countEl.textContent = [subPart, schedPart].filter(Boolean).join(" · ");
+      }
+    }
+
+    if (!list) {
+      return;
+    }
+    list.innerHTML = "";
+    for (const sub of activeSubagents) {
+      list.appendChild(buildSubagentRow(sub));
+    }
+    for (const job of sortedSchedules) {
+      list.appendChild(buildScheduleRow(job));
+    }
+  }
+
+  // ── Add menu ──
+  let addMenuOpen = false;
+
+  function openAddMenu() {
+    if (!addMenu || !addBtn) {
+      return;
+    }
+    addMenuOpen = true;
+    addMenu.hidden = false;
+    addBtn.setAttribute("aria-expanded", "true");
+    // Ensure footer is visible while menu is open
+    root.hidden = false;
+    document.addEventListener("click", onOutsideClickAddMenu, true);
+    document.addEventListener("keydown", onAddMenuKey);
+  }
+
+  function closeAddMenu() {
+    if (!addMenu || !addBtn) {
+      return;
+    }
+    addMenuOpen = false;
+    addMenu.hidden = true;
+    addBtn.setAttribute("aria-expanded", "false");
+    document.removeEventListener("click", onOutsideClickAddMenu, true);
+    document.removeEventListener("keydown", onAddMenuKey);
+    render(); // re-evaluate hidden state
+  }
+
+  function onOutsideClickAddMenu(e) {
+    if (!addMenu || !addBtn) {
+      return;
+    }
+    if (e.target instanceof Node) {
+      if (addMenu.contains(e.target) || addBtn.contains(e.target)) {
+        return;
+      }
+    }
+    closeAddMenu();
+  }
+
+  function onAddMenuKey(e) {
+    if (e.key === "Escape") {
+      closeAddMenu();
+    }
+  }
+
+  // ── Init ──
+  function init() {
+    window.addEventListener("symi:subagents-updated", (e) => {
+      subagents = e.detail?.subagents || [];
+      render();
+    });
+    window.addEventListener("symi:schedules-updated", (e) => {
+      schedules = e.detail?.schedules || [];
+      render();
+    });
+
+    if (addBtn) {
+      addBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (addMenuOpen) {
+          closeAddMenu();
+        } else {
+          openAddMenu();
+        }
+      });
+    }
+    if (addMenu) {
+      addMenu.addEventListener("click", (e) => {
+        const target = e.target instanceof Element ? e.target.closest("[data-add]") : null;
+        if (!target) {
+          return;
+        }
+        const which = target.getAttribute("data-add");
+        closeAddMenu();
+        if (which === "subagent" && typeof window.subagentsPanel?.open === "function") {
+          window.subagentsPanel.open();
+        } else if (which === "schedule" && typeof window.schedulingPanel?.open === "function") {
+          window.schedulingPanel.open();
+        }
+      });
+    }
+
+    // First paint
+    render();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/dist/control-ui/js/symframe-pin-store.js

@@ -0,0 +1,104 @@
+// ── Symframe Pin Store ──────────────────────────────────────────────────────
+// Stage C of the Dynamic Glass Panel arc — see ~/Documents/dynamic-glass-panel.md §9.3.
+//
+// Per-browser pin persistence via localStorage. Pinned cards survive
+// page reload, /new, and gateway reconnect — they are user-curated
+// state, not agent-pushed state.
+//
+// Storage shape:
+//   localStorage["symi:symframe:pins"] = JSON.stringify({
+//     version: 1,
+//     pins: [
+//       { id, card: {...}, pinnedAt: <ms> },
+//       ...
+//     ]
+//   })
+//
+// `card` is a snapshot of the card at pin time — frozen content. A
+// dynamic card whose content changes after pinning will keep the
+// pinned-time snapshot in the registry on next reload (intentional;
+// the user pinned what they saw).
+//
+// Public API (window.symframePinStore):
+//   list()       — snapshot of all pinned card records
+//   pin(card)    — write a card to localStorage (idempotent on id)
+//   unpin(id)    — remove a card from localStorage by id
+//   isPinned(id) — boolean check
+// ─────────────────────────────────────────────────────────────────────────────
+
+"use strict";
+
+(function () {
+  const KEY = "symi:symframe:pins";
+  const VERSION = 1;
+
+  function readStore() {
+    try {
+      const raw = localStorage.getItem(KEY);
+      if (!raw) {
+        return { version: VERSION, pins: [] };
+      }
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object" || !Array.isArray(parsed.pins)) {
+        return { version: VERSION, pins: [] };
+      }
+      return parsed;
+    } catch (err) {
+      console.warn("[symframe-pin-store] read failed; resetting:", err);
+      return { version: VERSION, pins: [] };
+    }
+  }
+
+  function writeStore(store) {
+    try {
+      localStorage.setItem(KEY, JSON.stringify(store));
+    } catch (err) {
+      console.warn("[symframe-pin-store] write failed:", err);
+    }
+  }
+
+  function list() {
+    return readStore().pins;
+  }
+
+  function pin(card) {
+    if (!card || typeof card !== "object" || !card.id) {
+      console.warn("[symframe-pin-store] pin: card missing id");
+      return false;
+    }
+    const store = readStore();
+    const existing = store.pins.findIndex((p) => p.id === card.id);
+    const record = {
+      id: card.id,
+      card: { ...card, pinned: true },
+      pinnedAt: Date.now(),
+    };
+    if (existing >= 0) {
+      store.pins[existing] = record;
+    } else {
+      store.pins.push(record);
+    }
+    writeStore(store);
+    return true;
+  }
+
+  function unpin(id) {
+    if (!id) {
+      return false;
+    }
+    const store = readStore();
+    const before = store.pins.length;
+    store.pins = store.pins.filter((p) => p.id !== id);
+    if (store.pins.length === before) {
+      return false;
+    }
+    writeStore(store);
+    return true;
+  }
+
+  function isPinned(id) {
+    return readStore().pins.some((p) => p.id === id);
+  }
+
+  window.symframePinStore = { list, pin, unpin, isPinned };
+})();

package/dist/control-ui/js/symframe.js

@@ -358,7 +358,21 @@
     const titleSpan = document.createElement("span");
     titleSpan.textContent = card.title || "";
     header.appendChild(titleSpan);
-    if (card.dismissable && !card.sticky) {
+    // Stage C: pin glyph for pinned cards. Click toggles unpin.
+    if (card.pinned) {
+      const pinGlyph = document.createElement("button");
+      pinGlyph.className = "symframe-card-pin";
+      pinGlyph.type = "button";
+      pinGlyph.setAttribute("aria-label", "Unpin");
+      pinGlyph.title = "Pinned — click to unpin";
+      pinGlyph.textContent = "📌";
+      pinGlyph.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        unpin(card.id);
+      });
+      header.appendChild(pinGlyph);
+    } else if (card.dismissable && !card.sticky) {
       const dismiss = document.createElement("button");
       dismiss.className = "symframe-card-dismiss";
       dismiss.type = "button";
@@ -535,6 +549,12 @@
    * Remove a card from the registry + DOM. Sticky cards refuse removal
    * unless force=true is passed (defensive — the system panels really
    * shouldn't disappear via stray API calls).
+   *
+   * Stage C: pinned cards behave like sticky for the user-side dismiss
+   * button (× hidden in the header) but `remove` still drops them when
+   * called — the pin survives in localStorage and the card re-appears
+   * on the next reload. To actually drop a pinned card permanently,
+   * the agent / user must unpin first.
    */
   function remove(id, force = false) {
     const entry = cards.get(id);
@@ -553,6 +573,180 @@
     return true;
   }
 
+  // ── Stage C: dwell / release / recall / pin / unpin ────────────────
+  // The CRUD vocabulary (add/update/remove) treats the panel as a
+  // notification list. These verbs treat it as a mind-window: cards
+  // can be foregrounded ("dwell"), softly let go of ("release"),
+  // brought back ("recall"), or persisted across sessions ("pin").
+
+  const RECENTLY_RELEASED_MAX = 10;
+  /** @type {Array<{id:string, card:object, releasedAt:number}>} */
+  const recentlyReleased = [];
+
+  /**
+   * Pull a card to the top of the stack with a brief cyan border pulse.
+   * Implementation: prepend the element (newest-first stack order
+   * normally has it there if it was just added, but for older cards
+   * this lifts them up), then add a `dwelling` class for a 600ms
+   * CSS pulse animation. Sticky cards aren't reordered (they live at
+   * the anchored end of the stack by design).
+   */
+  function dwell(id) {
+    const entry = cards.get(id);
+    if (!entry) {
+      console.warn(`[symframe] dwell: unknown id ${id}`);
+      return false;
+    }
+    if (!entry.element) {
+      console.warn(`[symframe] dwell: card ${id} has no element`);
+      return false;
+    }
+    if (!entry.sticky) {
+      // Re-prepend to bring to top of ephemeral stack.
+      container.prepend(entry.element);
+    }
+    entry.element.classList.remove("symframe-dwelling");
+    // Re-flow so the animation restarts even on repeated dwell calls.
+    void entry.element.offsetWidth;
+    entry.element.classList.add("symframe-dwelling");
+    setTimeout(() => entry.element?.classList.remove("symframe-dwelling"), 700);
+    return true;
+  }
+
+  /**
+   * Soft-dismiss a card. Animated fade + scale; on animation end the
+   * element is removed from the registry and DOM. Unlike `remove`,
+   * `release` records the card in a session ring buffer so `recall(id)`
+   * can bring it back. Sticky cards refuse release without force=true.
+   */
+  function release(id, force = false) {
+    const entry = cards.get(id);
+    if (!entry) {
+      return false;
+    }
+    if (entry.sticky && !force) {
+      console.warn(`[symframe] release: refusing sticky card '${id}' without force=true`);
+      return false;
+    }
+    // Snapshot for recall (strip the live DOM element)
+    const snapshot = { ...entry };
+    delete snapshot.element;
+    recentlyReleased.unshift({
+      id,
+      card: snapshot,
+      releasedAt: Date.now(),
+    });
+    if (recentlyReleased.length > RECENTLY_RELEASED_MAX) {
+      recentlyReleased.length = RECENTLY_RELEASED_MAX;
+    }
+    // Animate then drop
+    const el = entry.element;
+    if (el) {
+      el.classList.add("symframe-releasing");
+      const cleanup = () => {
+        cards.delete(id);
+        if (el.parentElement === container) {
+          el.remove();
+        }
+        updateCount();
+      };
+      // Fail-safe: drop after the CSS transition window even if the
+      // transitionend event doesn't fire (browser bug, reduced motion).
+      const handle = setTimeout(cleanup, 900);
+      el.addEventListener(
+        "transitionend",
+        () => {
+          clearTimeout(handle);
+          cleanup();
+        },
+        { once: true },
+      );
+    } else {
+      cards.delete(id);
+      updateCount();
+    }
+    return true;
+  }
+
+  /**
+   * Re-summon a recently-released card from the session ring buffer.
+   * Calling `recall(id)` without an id recalls the most-recent release.
+   * If the id isn't in the buffer or the card already exists, no-op.
+   */
+  function recall(id) {
+    const recordIdx = id
+      ? recentlyReleased.findIndex((r) => r.id === id)
+      : recentlyReleased.length > 0
+        ? 0
+        : -1;
+    if (recordIdx < 0) {
+      console.warn(`[symframe] recall: nothing to recall${id ? ` for id ${id}` : ""}`);
+      return false;
+    }
+    const [record] = recentlyReleased.splice(recordIdx, 1);
+    if (cards.has(record.id)) {
+      // Already restored elsewhere — no-op.
+      return false;
+    }
+    add(record.card);
+    return true;
+  }
+
+  /** Snapshot of recently-released cards (most-recent first). */
+  function listRecentlyReleased() {
+    return recentlyReleased.slice();
+  }
+
+  /**
+   * Pin a card to localStorage so it survives reload + /new. Idempotent
+   * on id. The card is marked `pinned: true` so the dismiss button is
+   * hidden. Calling pin on an unknown id is a no-op.
+   */
+  function pin(id) {
+    const entry = cards.get(id);
+    if (!entry) {
+      console.warn(`[symframe] pin: unknown id ${id}`);
+      return false;
+    }
+    if (typeof window.symframePinStore?.pin !== "function") {
+      console.warn("[symframe] pin: pin-store unavailable");
+      return false;
+    }
+    const snapshot = { ...entry };
+    delete snapshot.element;
+    snapshot.pinned = true;
+    snapshot.dismissable = false;
+    window.symframePinStore.pin(snapshot);
+    // Update live entry so the chrome reflects the pin (no dismiss btn,
+    // pin glyph in header).
+    entry.pinned = true;
+    entry.dismissable = false;
+    if (entry.element) {
+      const newEl = renderCardElement(entry);
+      entry.element.replaceWith(newEl);
+      entry.element = newEl;
+    }
+    return true;
+  }
+
+  /** Inverse of pin. Removes from localStorage; does NOT drop the card. */
+  function unpin(id) {
+    const entry = cards.get(id);
+    if (typeof window.symframePinStore?.unpin === "function") {
+      window.symframePinStore.unpin(id);
+    }
+    if (entry) {
+      entry.pinned = false;
+      entry.dismissable = true;
+      if (entry.element) {
+        const newEl = renderCardElement(entry);
+        entry.element.replaceWith(newEl);
+        entry.element = newEl;
+      }
+    }
+    return true;
+  }
+
   /** Snapshot of all registered cards. */
   function list() {
     return Array.from(cards.values());
@@ -586,7 +780,20 @@
     }
   }
 
-  window.symframe = { add, update, remove, list, register };
+  window.symframe = {
+    add,
+    update,
+    remove,
+    list,
+    register,
+    // Stage C — attention verbs
+    dwell,
+    release,
+    recall,
+    pin,
+    unpin,
+    listRecentlyReleased,
+  };
 
   // Phase 3: server-pushed cards. The gateway's `symframe` broadcast is
   // re-emitted as a window-level CustomEvent by gateway.js — subscribe
@@ -594,6 +801,8 @@
   // chat.symframe.push RPC: { action, id?, card?, force? }.
   // Stage A: `force` flows through to update/remove so the agent (via
   // display_artifact) and the CLI can override the sticky-card guard.
+  // Stage C: new verbs (dwell / release / recall / pin / unpin) route
+  // alongside the existing CRUD trio.
   window.addEventListener("symi:symframe", (e) => {
     const payload = e.detail;
     if (!payload || typeof payload !== "object") {
@@ -606,6 +815,33 @@
       update(payload.id, payload.card, force);
     } else if (payload.action === "remove" && payload.id) {
       remove(payload.id, force);
+    } else if (payload.action === "dwell" && payload.id) {
+      dwell(payload.id);
+    } else if (payload.action === "release" && payload.id) {
+      release(payload.id, force);
+    } else if (payload.action === "recall") {
+      recall(payload.id);
+    } else if (payload.action === "pin" && payload.id) {
+      pin(payload.id);
+    } else if (payload.action === "unpin" && payload.id) {
+      unpin(payload.id);
     }
   });
+
+  // Stage C: restore pinned cards from localStorage on boot. Pinned
+  // cards are user-curated state and survive reload, /new, and gateway
+  // reconnect. Each pin is a snapshot; the registry re-adds it as a
+  // dynamic card with pinned=true (no dismiss button).
+  if (typeof window.symframePinStore?.list === "function") {
+    try {
+      const pinned = window.symframePinStore.list();
+      for (const record of pinned) {
+        if (record?.card && !cards.has(record.id)) {
+          add({ ...record.card, pinned: true, dismissable: false });
+        }
+      }
+    } catch (err) {
+      console.warn("[symframe] failed to restore pinned cards:", err);
+    }
+  }
 })();

package/dist/{control-ui-assets-CJQ97d4u.js → control-ui-assets-B8B9z_Ll.js}

@@ -1,5 +1,5 @@
 import { f as defaultRuntime } from "./subsystem-CHbO_DkH.js";
-import { n as resolveSymiPackageRootSync, t as resolveSymiPackageRoot } from "./symi-root-BQ0IpoW2.js";
+import { n as resolveSymiPackageRootSync, t as resolveSymiPackageRoot } from "./symi-root-DeCVdZB4.js";
 import { t as runCommandWithTimeout } from "./exec-DuYbft0z.js";
 import { fileURLToPath } from "node:url";
 import path from "node:path";