@symerian/symi 3.5.14 → 3.5.15

package/dist/build-info.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.14",
-  "commit": "717a47dd4ed3d79cd51e0392bdb0234271d8b354",
-  "builtAt": "2026-05-06T17:04:48.417Z"
+  "version": "3.5.15",
+  "commit": "0c1f6e78053ad75f79f7c644822530a1299df9a7",
+  "builtAt": "2026-05-06T17:23:13.592Z"
 }

package/dist/canvas-host/a2ui/.bundle.hash

@@ -1 +1 @@
-b79723675878faef939375c6e1c5aeba4af2beba5b4fed5b057a23b9321ec6dd
+542830bc5960faae2edcb1d271ead8ae8b0e4a4a5f2cfbcaadd26c9aa81b7c22

package/dist/control-ui/css/style.css

@@ -907,6 +907,86 @@ body {
   border-color: rgba(0, 212, 255, 0.18);
 }
 
+/* Phase 2: dynamic-card sub-elements (only present on cards added via
+   symframe.add(); the 3 sticky panels render their own internals). */
+.symframe-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.symframe-card-dismiss {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  line-height: 1;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease,
+    background 0.15s ease;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.symframe-card-dismiss:hover {
+  opacity: 1;
+  color: var(--accent-cyan);
+  background: rgba(0, 212, 255, 0.08);
+}
+.symframe-card-body {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--text);
+  margin-top: 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.symframe-card-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  flex-wrap: wrap;
+}
+.symframe-card-action {
+  flex: 1 1 auto;
+  min-width: 60px;
+  padding: 6px 10px;
+  border: 1px solid var(--glass-border);
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.symframe-card-action:hover {
+  border-color: var(--accent-cyan);
+  color: var(--text);
+}
+.symframe-card-action-primary {
+  background: rgba(0, 212, 255, 0.08);
+  border-color: var(--accent-cyan);
+  color: var(--accent-cyan);
+}
+.symframe-card-action-primary:hover {
+  background: rgba(0, 212, 255, 0.14);
+  box-shadow: 0 0 8px rgba(0, 212, 255, 0.18);
+}
+
 /* ── Response Area ────────────────────────────────────────────────── */
 .response-area {
   position: fixed;

package/dist/control-ui/index.html

@@ -1059,5 +1059,6 @@
     <script src="js/scheduling.js"></script>
     <script src="js/models.js"></script>
     <script src="js/slash-autocomplete.js"></script>
+    <script src="js/symframe.js"></script>
   </body>
 </html>

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

@@ -0,0 +1,275 @@
+// ── Symframe registry ─────────────────────────────────────────────────
+// Phase 2 of the symframe arc. Provides `window.symframe.add/update/remove/list`
+// for dynamic cards in the right column. The 3 existing panels (SUBAGENTS,
+// REASONING, SCHEDULING) auto-register at boot as sticky cards — they keep
+// their own DOM and JS hookups, the registry just tracks metadata.
+//
+// Card stack order: ephemeral (non-sticky) cards stack at the TOP of the
+// container, newest at the very top; sticky cards anchor below them in
+// fixed insertion order so the always-visible system panels never drift.
+//
+// Phase 3+ will add type-specific renderers + a server-side push RPC. For
+// now the registry is JS-only and exercisable from the browser console:
+//   symframe.add({ title: "Test", body: "hello", dismissable: true });
+//   symframe.update("<id>", { body: "updated" });
+//   symframe.remove("<id>");
+
+(function () {
+  const container = document.getElementById("symframe-cards");
+  const countEl = document.getElementById("symframe-count");
+  if (!container) {
+    return;
+  }
+
+  /** @type {Map<string, Card>} */
+  const cards = new Map();
+
+  /**
+   * @typedef {Object} Card
+   * @property {string} id
+   * @property {string} [type]            generic descriptor; renderers in Phase 3+ key off this
+   * @property {string} title             header text (rendered uppercase via existing .panel-label)
+   * @property {string} [body]            plain-text body (escaped)
+   * @property {string} [bodyHtml]        trusted-HTML body (no escape) — only set internally
+   * @property {Array<Action>} [actions]  footer buttons
+   * @property {boolean} [sticky]         true → anchored at bottom of stack, no dismiss control
+   * @property {boolean} [dismissable]    true → header gains a × button that calls remove(id)
+   * @property {Element} [element]        DOM element for register()-tracked cards (existing panels)
+   * @property {number} createdAt         set by the registry
+   */
+
+  /**
+   * @typedef {Object} Action
+   * @property {string} label
+   * @property {"primary"|"secondary"} [kind]
+   * @property {() => void} onClick
+   */
+
+  function genId() {
+    return `sf-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+
+  function updateCount() {
+    if (!countEl) {
+      return;
+    }
+    const total = cards.size;
+    countEl.textContent = total === 1 ? "1 card" : `${total} cards`;
+  }
+
+  function renderCardElement(card) {
+    const el = document.createElement("div");
+    el.className = "glass-panel symframe-card symframe-card-dynamic";
+    if (card.sticky) {
+      el.classList.add("symframe-card-sticky");
+    }
+    el.dataset.cardId = card.id;
+    if (card.type) {
+      el.dataset.cardType = card.type;
+    }
+
+    // Header
+    const header = document.createElement("div");
+    header.className = "panel-label symframe-card-header";
+    const titleSpan = document.createElement("span");
+    titleSpan.textContent = card.title || "";
+    header.appendChild(titleSpan);
+    if (card.dismissable && !card.sticky) {
+      const dismiss = document.createElement("button");
+      dismiss.className = "symframe-card-dismiss";
+      dismiss.type = "button";
+      dismiss.setAttribute("aria-label", "Dismiss");
+      dismiss.textContent = "×";
+      dismiss.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        remove(card.id);
+      });
+      header.appendChild(dismiss);
+    }
+    el.appendChild(header);
+
+    // Body
+    if (card.bodyHtml || card.body) {
+      const body = document.createElement("div");
+      body.className = "symframe-card-body";
+      if (card.bodyHtml) {
+        body.innerHTML = card.bodyHtml;
+      } else {
+        body.textContent = card.body;
+      }
+      el.appendChild(body);
+    }
+
+    // Actions
+    if (Array.isArray(card.actions) && card.actions.length > 0) {
+      const actionsRow = document.createElement("div");
+      actionsRow.className = "symframe-card-actions";
+      for (const action of card.actions) {
+        const btn = document.createElement("button");
+        btn.className = "symframe-card-action";
+        if (action.kind === "primary") {
+          btn.classList.add("symframe-card-action-primary");
+        }
+        btn.type = "button";
+        btn.textContent = action.label || "";
+        if (typeof action.onClick === "function") {
+          btn.addEventListener("click", (e) => {
+            e.preventDefault();
+            try {
+              action.onClick();
+            } catch (err) {
+              console.warn("[symframe] action threw:", err);
+            }
+          });
+        }
+        actionsRow.appendChild(btn);
+      }
+      el.appendChild(actionsRow);
+    }
+
+    return el;
+  }
+
+  function insertElement(card, el) {
+    if (card.sticky) {
+      // Sticky cards anchor below all ephemeral cards. Append to end of
+      // the sticky group (which is the end of the container, since
+      // ephemeral cards live above).
+      container.appendChild(el);
+    } else {
+      // Ephemeral cards stack at the top, newest first → prepend.
+      container.prepend(el);
+    }
+  }
+
+  /**
+   * Track an existing DOM-managed card (e.g. SUBAGENTS panel). The
+   * element is already in the container and renders/updates itself; the
+   * registry just records metadata so list/count/sort logic can see it.
+   */
+  function register(card) {
+    if (!card || !card.id || !card.element) {
+      console.warn("[symframe] register: missing id or element");
+      return;
+    }
+    const entry = {
+      ...card,
+      sticky: card.sticky !== false,
+      dismissable: false,
+      createdAt: Date.now(),
+    };
+    cards.set(entry.id, entry);
+    entry.element.classList.add("symframe-card");
+    if (entry.sticky) {
+      entry.element.classList.add("symframe-card-sticky");
+    }
+    updateCount();
+    return entry;
+  }
+
+  /**
+   * Add a new dynamic card. Renders into the container, prepended for
+   * ephemeral cards or appended for sticky cards.
+   */
+  function add(card) {
+    const id = card?.id || genId();
+    if (cards.has(id)) {
+      // Treat as update if id collides.
+      return update(id, card);
+    }
+    const entry = {
+      ...card,
+      id,
+      sticky: card?.sticky === true,
+      dismissable: card?.dismissable !== false,
+      createdAt: Date.now(),
+    };
+    const el = renderCardElement(entry);
+    entry.element = el;
+    cards.set(id, entry);
+    insertElement(entry, el);
+    updateCount();
+    return entry;
+  }
+
+  /**
+   * Patch an existing card. Re-renders the card's DOM element from the
+   * merged data; preserves stack position.
+   */
+  function update(id, patch) {
+    const existing = cards.get(id);
+    if (!existing) {
+      console.warn(`[symframe] update: unknown id ${id}`);
+      return;
+    }
+    if (!existing.element) {
+      console.warn(`[symframe] update: card ${id} has no element (registered, not added)`);
+      // Allow metadata patch without re-render
+      const merged = { ...existing, ...patch, id };
+      cards.set(id, merged);
+      return merged;
+    }
+    const merged = { ...existing, ...patch, id };
+    const newEl = renderCardElement(merged);
+    merged.element = newEl;
+    existing.element.replaceWith(newEl);
+    cards.set(id, merged);
+    return merged;
+  }
+
+  /**
+   * 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).
+   */
+  function remove(id, force = false) {
+    const entry = cards.get(id);
+    if (!entry) {
+      return false;
+    }
+    if (entry.sticky && !force) {
+      console.warn(`[symframe] remove: refusing to drop sticky card '${id}' without force=true`);
+      return false;
+    }
+    if (entry.element && entry.element.parentElement === container) {
+      entry.element.remove();
+    }
+    cards.delete(id);
+    updateCount();
+    return true;
+  }
+
+  /** Snapshot of all registered cards. */
+  function list() {
+    return Array.from(cards.values());
+  }
+
+  // Auto-register the 3 sticky panels that already live in the DOM. The
+  // existing JS for each panel (subagents.js, scheduling.js, reasoning
+  // render code) keeps targeting them by id and is unaffected.
+  const KNOWN_STICKY = [
+    { id: "subagents", elementId: "subagents-panel", title: "SUBAGENTS", type: "panel-subagents" },
+    { id: "reasoning", elementId: "reasoning-panel", title: "REASONING", type: "panel-reasoning" },
+    {
+      id: "scheduling",
+      elementId: "scheduling-panel",
+      title: "SCHEDULING",
+      type: "panel-scheduling",
+    },
+  ];
+  for (const known of KNOWN_STICKY) {
+    const el = document.getElementById(known.elementId);
+    if (el) {
+      register({
+        id: known.id,
+        type: known.type,
+        title: known.title,
+        sticky: true,
+        element: el,
+      });
+    }
+  }
+
+  window.symframe = { add, update, remove, list, register };
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symerian/symi",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "description": "Multi-channel AI gateway with extensible messaging integrations",
   "keywords": [],
   "homepage": "https://github.com/jaysteelmind/symi#readme",