npm - @symerian/symi - Versions diffs - 3.5.19 → 3.5.21 - Mend

@symerian/symi 3.5.19 → 3.5.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

package/dist/control-ui/index.html CHANGED Viewed

@@ -20,7 +20,6 @@
       drop a real hljs theme CSS at `glass-ui/vendor/highlight.css` (e.g.,
       github-dark.min.css from highlight.js) and re-add the link.
     -->
   </head>
   <body>
     <!-- Animated background -->
@@ -192,145 +191,68 @@
     </aside>
     <!-- Symframe — dynamic display panel ("window into the agent's mind") -->
+    <!-- Stage B (3.5.20): reasoning panel removed; its content now flows -->
+    <!-- to .symframe-substrate which sits BEHIND the foreground cards via -->
+    <!-- a single CSS grid cell + z-index. The agent's reasoning becomes -->
+    <!-- the ambient texture of the panel rather than one card among three. -->
     <aside class="metrics-col metrics-right symframe" id="symframe">
       <div class="symframe-header">
         <div class="symframe-header-row">
           <span class="symframe-title">SYMFRAME</span>
-          <span class="symframe-count" id="symframe-count">3 cards</span>
+          <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
+          <span class="symframe-count" id="symframe-count">2 cards</span>
         </div>
         <div class="symframe-sub">window into the agent's mind</div>
       </div>
-      <div class="symframe-cards" id="symframe-cards">
-      <!-- Subagents Panel -->
-      <div class="glass-panel symframe-card subagents-panel" id="subagents-panel">
-        <div class="panel-label">
-          SUBAGENTS
-          <span class="subagents-count" id="subagents-count"></span>
-        </div>
-        <!-- Quick Deploy Section -->
-        <div class="quick-deploy-section">
-          <div class="quick-deploy-label">QUICK DEPLOY</div>
-          <div class="quick-deploy-grid">
-            <button class="quick-deploy-btn" data-agent="research" title="Research Agent">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="11" cy="11" r="8" />
-                <path d="M21 21l-4.35-4.35" />
-              </svg>
-              <span>Research</span>
-            </button>
-            <button class="quick-deploy-btn" data-agent="review" title="Code Review Agent">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="16 18 22 12 16 6" />
-                <polyline points="8 6 2 12 8 18" />
-              </svg>
-              <span>Review</span>
-            </button>
-            <button class="quick-deploy-btn" data-agent="writer" title="Writer Agent">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M12 19l7-7 3 3-7 7-3-3z" />
-                <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
-              </svg>
-              <span>Writer</span>
-            </button>
-            <button class="quick-deploy-btn" data-agent="analyst" title="Analyst Agent">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="18" y1="20" x2="18" y2="10" />
-                <line x1="12" y1="20" x2="12" y2="4" />
-                <line x1="6" y1="20" x2="6" y2="14" />
-              </svg>
-              <span>Analyst</span>
-            </button>
-          </div>
-        </div>
-        <!-- Staging Prompt Box -->
-        <div class="staging-box" id="staging-box">
-          <div class="staging-chips" id="staging-chips">
-            <span class="staging-empty">Select agents above</span>
-          </div>
-          <button class="staging-deploy-btn" id="staging-deploy-btn" disabled>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-            </svg>
-            Deploy
-          </button>
-        </div>
-        <!-- Active Subagents list -->
-        <div class="subagents-active-label">ACTIVE</div>
-        <div class="subagents-list" id="subagents-list">
-          <div class="subagents-empty" id="subagents-empty">
-            <div class="subagents-empty-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"
-                />
-              </svg>
-            </div>
-            <div class="subagents-empty-text">No active subagents</div>
-          </div>
-        </div>
-        <!-- Custom Spawn button -->
-        <button class="subagent-spawn-btn" id="subagent-spawn-btn" title="Spawn a custom subagent">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 8v8M8 12h8" />
-          </svg>
-          <span>Custom Subagent</span>
-        </button>
-      </div>
-      <!-- Reasoning Panel -->
-      <div class="glass-panel symframe-card reasoning-panel" id="reasoning-panel">
-        <div class="panel-label">
-          REASONING
-          <span class="reasoning-live-dot" id="reasoning-live-dot"></span>
-        </div>
-        <div class="reasoning-feed" id="reasoning-feed">
-          <div class="reasoning-empty" id="reasoning-empty">
-            <div class="reasoning-empty-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
-                />
-              </svg>
-            </div>
-            <div class="reasoning-empty-text">No reasoning yet</div>
-          </div>
-        </div>
+      <div class="symframe-stack">
+        <div class="symframe-substrate" id="symframe-substrate"></div>
+        <div class="symframe-cards" id="symframe-cards">
+          <!-- Stage C (3.5.21): SUBAGENTS + SCHEDULING panel blocks removed. -->
+          <!-- Their content is now rendered in the AWAITING footer below; -->
+          <!-- modals (subagent-modal-overlay, schedule-modal-overlay) remain -->
+          <!-- in their original positions further down in this file. -->
+          <!-- The cards container is now exclusively for foreground -->
+          <!-- intent-typed artifact cards pushed via display_artifact / RPC. -->
+        </div>
+        <!-- /.symframe-cards -->
       </div>
-      <!-- Scheduling Panel -->
-      <div class="glass-panel symframe-card scheduling-panel" id="scheduling-panel">
-        <div class="panel-label">
-          SCHEDULING
-          <span class="schedule-count" id="schedule-count"></span>
-        </div>
-        <div class="schedule-list" id="schedule-list">
-          <div class="schedule-empty" id="schedule-empty">
-            <div class="schedule-empty-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <circle cx="12" cy="12" r="10" />
-                <polyline points="12 6 12 12 16 14" />
-              </svg>
-            </div>
-            <div class="schedule-empty-text">No scheduled tasks</div>
-          </div>
-        </div>
-        <button class="schedule-add-btn" id="schedule-add-btn" title="Add a scheduled task">
+      <!-- /.symframe-stack -->
+      <!-- AWAITING surface (Stage C): always-present footer that merges -->
+      <!-- in-flight sub-agents + scheduled cron jobs into a single -->
+      <!-- "things that aren't done yet" list, sorted by in-flight-first -->
+      <!-- then ETA. Click a sub-agent → existing subagent modal; click -->
+      <!-- a schedule → existing schedule modal; [+ Add] opens an add menu. -->
+      <div class="symframe-awaiting" id="symframe-awaiting" hidden>
+        <div class="awaiting-header">
+          <span class="awaiting-title">AWAITING</span>
+          <span class="awaiting-count" id="awaiting-count"></span>
+        </div>
+        <div class="awaiting-list" id="awaiting-list"></div>
+        <button
+          class="awaiting-add-btn"
+          id="awaiting-add-btn"
+          title="Spawn subagent or add scheduled task"
+          aria-haspopup="menu"
+          aria-expanded="false"
+        >
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="10" />
             <path d="M12 8v8M8 12h8" />
           </svg>
-          <span>Add Schedule</span>
+          <span>Add</span>
         </button>
+        <div class="awaiting-add-menu" id="awaiting-add-menu" hidden role="menu">
+          <button type="button" class="awaiting-add-item" data-add="subagent" role="menuitem">
+            <span class="awaiting-add-glyph">◆</span>
+            <span>Spawn subagent</span>
+          </button>
+          <button type="button" class="awaiting-add-item" data-add="schedule" role="menuitem">
+            <span class="awaiting-add-glyph">⏱</span>
+            <span>Add scheduled task</span>
+          </button>
+        </div>
       </div>
-      </div>
     </aside>
     <!-- Response waterfall area -->
@@ -797,7 +719,9 @@
           autocomplete="off"
           spellcheck="false"
         />
-        <button class="history-search-clear" id="history-search-clear" title="Clear" hidden>✕</button>
+        <button class="history-search-clear" id="history-search-clear" title="Clear" hidden>
+          ✕
+        </button>
       </div>
       <div class="history-drawer-body" id="history-drawer-body">
         <div class="history-loading">Loading sessions…</div>
@@ -1059,6 +983,9 @@
     <script src="js/scheduling.js"></script>
     <script src="js/models.js"></script>
     <script src="js/slash-autocomplete.js"></script>
+    <script src="js/symframe-pin-store.js"></script>
     <script src="js/symframe.js"></script>
+    <script src="js/symframe-substrate.js"></script>
+    <script src="js/symframe-awaiting.js"></script>
   </body>
 </html>

package/dist/control-ui/js/render.js CHANGED Viewed

@@ -535,233 +535,17 @@ function formatTime(ts) {
 // Expose renderBlock for use in app.js streaming finalization
 window.renderBlock = renderBlock;
-// ── Reasoning Panel — append a block ─────────────────────────────────
-window.appendToReasoningPanel = function (block) {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  // Remove empty-state placeholder on first real entry
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-  const entry = document.createElement("div");
-  entry.className = "reasoning-entry";
-  switch (block.type) {
-    // ── Narration text (agent step descriptions routed here) ────────
-    case "text": {
-      const text = (block.text ?? "").trim();
-      if (!text) {
-        return;
-      }
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-narration">✦ NOTE</span>
-          <span class="reasoning-entry-name">${escHtml(String(text).split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
-        </div>
-      `;
-      break;
-    }
-    // ── Thinking block ──────────────────────────────────────────────
-    case "thinking": {
-      const text = (block.thinking ?? "").trim();
-      if (!text) {
-        return;
-      }
-      entry.innerHTML = `
-        <div class="reasoning-entry-header">
-          <span class="reasoning-entry-badge badge-think">◈ THINK</span>
-          <span class="reasoning-entry-name">${escHtml(String(text).split("\n")[0].slice(0, 60))}${text.length > 60 ? "…" : ""}</span>
-        </div>
-        <div class="reasoning-think-body">${escHtml(text)}</div>
-      `;
-      break;
-    }
-    // ── Tool call (Anthropic: tool_use, Ollama/OpenAI: toolCall) ────
-    case "tool_use":
-    case "toolCall": {
-      const name = block.name ?? "tool";
-      const inputData = block.input ?? block.arguments ?? {};
-      const inputJson = inputData ? JSON.stringify(inputData, null, 2) : "{}";
-      // One-line preview: first key=value pair
-      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">${escHtml(toolIcon(name))} TOOL</span>
-          <span class="reasoning-entry-name">${escHtml(formatToolName(name))}</span>
-        </div>
-        ${preview ? `<div class="reasoning-tool-preview">${escHtml(preview)}</div>` : ""}
-        <div class="reasoning-tool-detail">${escHtml(inputJson)}</div>
-      `;
-      // Toggle expand on click
-      entry.style.cursor = "pointer";
-      entry.addEventListener("click", () => entry.classList.toggle("expanded"));
-      break;
-    }
-    // ── Tool result ─────────────────────────────────────────────────
-    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>
-      `;
-      break;
-    }
-    default:
-      return; // unknown block — skip
-  }
-  feed.appendChild(entry);
-  feed.scrollTop = feed.scrollHeight;
-};
-// ── Reasoning Panel — run separator ──────────────────────────────────
-window.injectReasoningRunSeparator = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-  const now = new Date();
-  const hhmm = now.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  });
-  const sep = document.createElement("div");
-  sep.className = "reasoning-run-sep";
-  sep.innerHTML = `<span class="reasoning-run-sep-label">RUN · ${hhmm}</span>`;
-  feed.appendChild(sep);
-  feed.scrollTop = feed.scrollHeight;
-};
-// ── Reasoning Panel — clear ───────────────────────────────────────────
-window.clearReasoningPanel = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  feed.innerHTML = `
-    <div class="reasoning-empty" id="reasoning-empty">
-      <div class="reasoning-empty-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-          <circle cx="12" cy="12" r="3"/>
-          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
-        </svg>
-      </div>
-      <div class="reasoning-empty-text">No reasoning yet</div>
-    </div>`;
-};
-// ── Reasoning Panel — live thinking update (streaming) ───────────────
-// Called repeatedly during a run to accumulate thinking text in real-time.
-// Creates a single "live" entry and updates it in-place until finalized.
-let _liveThinkEntry = null;
-let _liveThinkBody = null;
-let _liveThinkBuffer = "";
-window.openLiveThinking = function () {
-  const feed = document.getElementById("reasoning-feed");
-  if (!feed) {
-    return;
-  }
-  const empty = document.getElementById("reasoning-empty");
-  if (empty) {
-    empty.remove();
-  }
-  _liveThinkBuffer = "";
-  const entry = document.createElement("div");
-  entry.className = "reasoning-entry";
-  entry.id = "reasoning-live-think";
-  entry.innerHTML = `
-    <div class="reasoning-entry-header">
-      <span class="reasoning-entry-badge badge-think">◈ THINK</span>
-      <span class="reasoning-entry-name" id="reasoning-live-name">…</span>
-    </div>
-    <div class="reasoning-think-body" id="reasoning-live-body"></div>
-  `;
-  feed.appendChild(entry);
-  _liveThinkEntry = entry;
-  _liveThinkBody = entry.querySelector("#reasoning-live-body");
-  feed.scrollTop = feed.scrollHeight;
-};
-window.updateLiveThinking = function (text) {
-  if (!_liveThinkBody) {
-    window.openLiveThinking();
-  }
-  _liveThinkBuffer += text;
-  if (_liveThinkBody) {
-    _liveThinkBody.textContent = _liveThinkBuffer;
-    const feed = document.getElementById("reasoning-feed");
-    if (feed) {
-      feed.scrollTop = feed.scrollHeight;
-    }
-  }
-  // Update name preview
-  const nameEl = _liveThinkEntry?.querySelector("#reasoning-live-name");
-  if (nameEl) {
-    const firstLine = _liveThinkBuffer.split("\n")[0].slice(0, 60);
-    nameEl.textContent = firstLine + (_liveThinkBuffer.length > 60 ? "…" : "");
-  }
-};
-window.closeLiveThinking = function () {
-  if (_liveThinkEntry) {
-    _liveThinkEntry.removeAttribute("id");
-    _liveThinkEntry = null;
-    _liveThinkBody = null;
-    _liveThinkBuffer = "";
-  }
-};
-// ── Extract thinking text from a content array (for streaming deltas) ─
-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 "";
-};
+// ── Reasoning helpers moved to glass-ui/js/symframe-substrate.js ──────
+// Stage B of the Dynamic Glass Panel arc (3.5.20): the six window
+// globals previously defined here — appendToReasoningPanel,
+// injectReasoningRunSeparator, clearReasoningPanel, openLiveThinking,
+// updateLiveThinking, closeLiveThinking, extractThinkingText — now
+// live in symframe-substrate.js, which routes them to the ambient
+// substrate behind the foreground cards instead of the now-removed
+// reasoning panel card. app.js call sites are unchanged; they bind to
+// the same names. See ~/Documents/dynamic-glass-panel.md §5 Stage B.
+//
+// Original implementations preserved in git history at b80e4fa4e^.
 // ── Main render function — builds a full message element ──────────────
 window.renderMessage = function (message) {