@symerian/symi 3.5.19 → 3.5.21

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

@@ -0,0 +1,395 @@
+// ── Symframe Substrate ─────────────────────────────────────────────────
+// Stage B of the Dynamic Glass Panel arc — see ~/Documents/dynamic-glass-panel.md.
+//
+// The substrate is the ambient reasoning layer that lives BEHIND the
+// foreground cards in the symframe. It's the single move that converts
+// the panel from "card list with a tagline" into a felt "window into
+// the agent's mind" — there is always something alive in the negative
+// space, even when no specific card is being pushed.
+//
+// What this module owns:
+//   - The substrate container (#symframe-substrate)
+//   - The live trace (the in-flight thinking entry, pinned at top with a
+//     pulsing dot — full opacity, no blur)
+//   - Recent reasoning entries (every block routed through the old
+//     reasoning-feed window globals — `appendToReasoningPanel`,
+//     `injectReasoningRunSeparator`, `openLiveThinking`,
+//     `updateLiveThinking`, `closeLiveThinking`, `clearReasoningPanel`)
+//   - Per-entry decay tick: opacity / blur / scale / height collapse as
+//     a function of (now - entry.createdAt). See DECAY_TIERS below.
+//   - Quiet-mind empty state when the substrate has no entries
+//
+// Backward-compatible surface:
+//   This module DEFINES the same six window globals that render.js used
+//   to expose for the reasoning panel. Script load order in index.html
+//   loads render.js first then this file, so our definitions override.
+//   app.js (~12 call sites) is unchanged.
+//
+// Layout:
+//   The substrate is one of two children of .symframe-stack (the other
+//   is .symframe-cards). Both share a single CSS grid cell via
+//   grid-area: overlay, with the substrate at z-index 0 and cards at
+//   z-index 1. Cards have backdrop-filter so the substrate is visible
+//   THROUGH them — the agent's mind breathes behind whatever artifacts
+//   are foregrounded.
+
+"use strict";
+
+(function () {
+  const substrate = document.getElementById("symframe-substrate");
+  if (!substrate) {
+    // Substrate not in DOM — nothing to do. The 6 window globals stay
+    // bound to render.js's no-op-on-missing-DOM implementations.
+    return;
+  }
+
+  // ── Decay tiers ─────────────────────────────────────────────────────
+  // Each entry carries dataset.createdAt; the tick reads its age and
+  // looks up the matching tier. Tiers are evaluated in order; first
+  // match (age < maxAge) wins. Constants tuned per the plan §5.2; expect
+  // to revisit live.
+  const DECAY_TIERS = [
+    { maxAge: 10_000, opacity: 1.0, blur: 0, scale: 1.0, texture: false },
+    { maxAge: 30_000, opacity: 0.85, blur: 1, scale: 1.0, texture: false },
+    { maxAge: 120_000, opacity: 0.55, blur: 2, scale: 1.0, texture: false },
+    { maxAge: 600_000, opacity: 0.25, blur: 4, scale: 0.97, texture: false },
+    { maxAge: Infinity, opacity: 0.08, blur: 6, scale: 0.94, texture: true },
+  ];
+
+  const DECAY_TICK_MS = 1000;
+
+  // ── Live trace state ────────────────────────────────────────────────
+  // The "live" entry is the in-flight thinking stream. It's pinned at
+  // the top of the substrate, exempt from decay, and has a pulsing dot.
+  // When closeLiveThinking fires, the live class is dropped and the
+  // entry starts decaying like any other.
+  let liveEntry = null;
+  let liveBody = null;
+  let liveBuffer = "";
+
+  // Decay tick handle. Pauses when page is hidden (Page Visibility API)
+  // so a backgrounded tab doesn't burn CPU on substrate-only animation.
+  let decayHandle = null;
+
+  // ── DOM helpers ─────────────────────────────────────────────────────
+  function escHtml(s) {
+    return String(s ?? "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  function ensureEmptyRemoved() {
+    const empty = substrate.querySelector(".substrate-empty");
+    if (empty) {
+      empty.remove();
+    }
+  }
+
+  function renderQuietMind() {
+    if (substrate.querySelector(".substrate-empty")) {
+      return;
+    }
+    const empty = document.createElement("div");
+    empty.className = "substrate-empty";
+    empty.innerHTML = `
+      <span class="substrate-quiet-dot" aria-hidden="true"></span>
+      <span class="substrate-quiet-label">quiet mind</span>
+    `;
+    substrate.appendChild(empty);
+  }
+
+  function insertAtTopRespectingLive(entry) {
+    // Live entry stays at index 0; everything else prepends after it.
+    if (liveEntry && substrate.firstChild === liveEntry) {
+      liveEntry.after(entry);
+    } else {
+      substrate.prepend(entry);
+    }
+  }
+
+  // ── Decay ────────────────────────────────────────────────────────────
+  function applyDecay(el, age) {
+    let tier = DECAY_TIERS[DECAY_TIERS.length - 1];
+    for (const t of DECAY_TIERS) {
+      if (age < t.maxAge) {
+        tier = t;
+        break;
+      }
+    }
+    el.style.setProperty("--substrate-opacity", String(tier.opacity));
+    el.style.setProperty("--substrate-blur", `${tier.blur}px`);
+    el.style.setProperty("--substrate-scale", String(tier.scale));
+    el.classList.toggle("substrate-texture", tier.texture);
+  }
+
+  function tickDecay() {
+    const now = Date.now();
+    const entries = substrate.querySelectorAll(".substrate-entry:not(.substrate-live)");
+    for (const e of entries) {
+      const createdAt = Number(e.dataset.createdAt) || now;
+      applyDecay(e, now - createdAt);
+    }
+  }
+
+  function startDecayTick() {
+    if (decayHandle) {
+      return;
+    }
+    decayHandle = setInterval(tickDecay, DECAY_TICK_MS);
+  }
+
+  function stopDecayTick() {
+    if (decayHandle) {
+      clearInterval(decayHandle);
+      decayHandle = null;
+    }
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      stopDecayTick();
+    } else if (substrate.querySelector(".substrate-entry:not(.substrate-live)")) {
+      startDecayTick();
+      tickDecay(); // immediate catch-up after a long pause
+    }
+  });
+
+  // ── Entry builders ──────────────────────────────────────────────────
+  // Returns an HTMLElement or null (null = skip, e.g. empty block).
+  // Class names mirror the existing reasoning-* set so the badge/body
+  // styles from style.css continue to apply unchanged.
+  function buildEntryForBlock(block) {
+    const entry = document.createElement("div");
+    entry.className = "substrate-entry reasoning-entry";
+    entry.dataset.createdAt = String(Date.now());
+
+    switch (block.type) {
+      case "text": {
+        const text = (block.text ?? "").trim();
+        if (!text) {
+          return null;
+        }
+        entry.innerHTML = `
+          <div class="reasoning-entry-header">
+            <span class="reasoning-entry-badge badge-narration">✦ NOTE</span>
+            <span class="reasoning-entry-name">${escHtml(text.split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
+          </div>
+        `;
+        return entry;
+      }
+      case "thinking": {
+        const text = (block.thinking ?? "").trim();
+        if (!text) {
+          return null;
+        }
+        entry.innerHTML = `
+          <div class="reasoning-entry-header">
+            <span class="reasoning-entry-badge badge-think">◈ THINK</span>
+            <span class="reasoning-entry-name">${escHtml(text.split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
+          </div>
+          <div class="reasoning-think-body">${escHtml(text)}</div>
+        `;
+        return entry;
+      }
+      case "tool_use":
+      case "toolCall": {
+        const name = block.name ?? "tool";
+        const inputData = block.input ?? block.arguments ?? {};
+        const inputJson = inputData ? JSON.stringify(inputData, null, 2) : "{}";
+        let preview = "";
+        try {
+          const obj = typeof inputData === "string" ? JSON.parse(inputData) : inputData;
+          const keys = Object.keys(obj ?? {});
+          if (keys.length) {
+            const val = String(obj[keys[0]]).slice(0, 50);
+            preview = `${keys[0]}: ${val}${val.length >= 50 ? "…" : ""}`;
+          }
+        } catch {
+          /* ignore */
+        }
+        entry.innerHTML = `
+          <div class="reasoning-entry-header">
+            <span class="reasoning-entry-badge badge-tool">⚙ TOOL</span>
+            <span class="reasoning-entry-name">${escHtml(name)}</span>
+          </div>
+          ${preview ? `<div class="reasoning-tool-preview">${escHtml(preview)}</div>` : ""}
+          <div class="reasoning-tool-detail">${escHtml(inputJson)}</div>
+        `;
+        entry.style.cursor = "pointer";
+        entry.addEventListener("click", () => entry.classList.toggle("expanded"));
+        return entry;
+      }
+      case "tool_result": {
+        const content = Array.isArray(block.content)
+          ? block.content.map((b) => b.text ?? "").join("\n")
+          : String(block.content ?? "");
+        const chars = content.length;
+        const isError = block.is_error === true;
+        entry.innerHTML = `
+          <div class="reasoning-entry-header">
+            <span class="reasoning-entry-badge badge-result">${isError ? "⚠ ERROR" : "↩ RESULT"}</span>
+            <span class="reasoning-entry-name">${chars} chars</span>
+          </div>
+          <div class="reasoning-result-meta">${escHtml(content.slice(0, 80))}${chars > 80 ? "…" : ""}</div>
+        `;
+        return entry;
+      }
+      default:
+        return null;
+    }
+  }
+
+  // ── Window globals (preserve render.js signatures) ──────────────────
+
+  /**
+   * Append a finished block to the substrate. Block shapes match what
+   * app.js produces from agent events: { type:"text"|"thinking"|
+   * "tool_use"|"toolCall"|"tool_result", ... }.
+   */
+  window.appendToReasoningPanel = function (block) {
+    ensureEmptyRemoved();
+    const entry = buildEntryForBlock(block);
+    if (!entry) {
+      return;
+    }
+    insertAtTopRespectingLive(entry);
+    startDecayTick();
+  };
+
+  /**
+   * Inject a horizontal-rule + timestamp separator marking a new agent
+   * run. Called from app.js on lifecycle:start.
+   */
+  window.injectReasoningRunSeparator = function () {
+    ensureEmptyRemoved();
+    const sep = document.createElement("div");
+    sep.className = "substrate-entry substrate-run-sep reasoning-run-sep";
+    sep.dataset.createdAt = String(Date.now());
+    const now = new Date();
+    const hhmm = now.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+    sep.innerHTML = `<span class="reasoning-run-sep-label">RUN · ${hhmm}</span>`;
+    insertAtTopRespectingLive(sep);
+    startDecayTick();
+  };
+
+  /**
+   * Clear all substrate entries and restore the quiet-mind empty state.
+   * Called from app.js on session reset.
+   */
+  window.clearReasoningPanel = function () {
+    substrate.innerHTML = "";
+    liveEntry = null;
+    liveBody = null;
+    liveBuffer = "";
+    stopDecayTick();
+    renderQuietMind();
+  };
+
+  /**
+   * Open the live thinking entry — pinned at top, exempt from decay,
+   * with a pulsing dot. Called when streaming starts.
+   */
+  window.openLiveThinking = function () {
+    if (liveEntry) {
+      return; // already open
+    }
+    ensureEmptyRemoved();
+    liveBuffer = "";
+    const entry = document.createElement("div");
+    entry.className = "substrate-entry substrate-live reasoning-entry";
+    entry.id = "substrate-live-entry";
+    entry.innerHTML = `
+      <div class="reasoning-entry-header">
+        <span class="substrate-live-dot" aria-hidden="true"></span>
+        <span class="reasoning-entry-badge badge-think">◈ THINKING</span>
+        <span class="reasoning-entry-name" id="substrate-live-name">…</span>
+      </div>
+      <div class="reasoning-think-body" id="substrate-live-body"></div>
+    `;
+    substrate.prepend(entry);
+    liveEntry = entry;
+    liveBody = entry.querySelector("#substrate-live-body");
+  };
+
+  /**
+   * Append text to the live thinking entry's body. Idempotent on open —
+   * calls openLiveThinking if no live entry exists yet.
+   */
+  window.updateLiveThinking = function (text) {
+    if (!liveEntry) {
+      window.openLiveThinking();
+    }
+    if (typeof text !== "string" || !text) {
+      return;
+    }
+    liveBuffer += text;
+    if (liveBody) {
+      liveBody.textContent = liveBuffer;
+    }
+    // Update name preview to the first line
+    const nameEl = liveEntry?.querySelector("#substrate-live-name");
+    if (nameEl) {
+      const firstLine = liveBuffer.split("\n")[0].slice(0, 60);
+      nameEl.textContent = firstLine + (liveBuffer.length > 60 ? "…" : "");
+    }
+  };
+
+  /**
+   * Close the live thinking entry: drop the live class so it starts
+   * decaying like any other entry, and stamp its createdAt to "now" so
+   * the decay timer starts from when it finished, not when it opened.
+   */
+  window.closeLiveThinking = function () {
+    if (!liveEntry) {
+      return;
+    }
+    liveEntry.classList.remove("substrate-live");
+    liveEntry.removeAttribute("id");
+    liveEntry.dataset.createdAt = String(Date.now());
+    const nameEl = liveEntry.querySelector("#substrate-live-name");
+    if (nameEl) {
+      nameEl.removeAttribute("id");
+    }
+    const bodyEl = liveEntry.querySelector("#substrate-live-body");
+    if (bodyEl) {
+      bodyEl.removeAttribute("id");
+    }
+    liveEntry = null;
+    liveBody = null;
+    liveBuffer = "";
+    startDecayTick();
+  };
+
+  // Extract thinking text from a content array — used by streaming code
+  // in app.js to extract just the thinking portion from a content
+  // array (Anthropic-style multi-block messages). Recursive on
+  // content.content to handle wrapper-shape messages.
+  window.extractThinkingText = function (content) {
+    if (!content) {
+      return "";
+    }
+    if (typeof content === "string") {
+      return "";
+    }
+    if (Array.isArray(content)) {
+      return content
+        .filter((b) => b?.type === "thinking")
+        .map((b) => b.thinking ?? "")
+        .join("");
+    }
+    if (content?.content) {
+      return window.extractThinkingText(content.content);
+    }
+    return "";
+  };
+
+  // ── Initial state ───────────────────────────────────────────────────
+  renderQuietMind();
+})();

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,17 +573,193 @@
     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());
   }
 
-  // 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.
+  // Auto-register the sticky panels that already live in the DOM. The
+  // existing JS for each panel (subagents.js, scheduling.js) keeps
+  // targeting them by id and is unaffected.
+  // Stage B (3.5.20): reasoning was removed from this list — its DOM
+  // block is gone; reasoning content now flows to #symframe-substrate
+  // (see glass-ui/js/symframe-substrate.js).
   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",
@@ -584,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
@@ -592,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") {
@@ -604,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";