@symerian/symi 2.6.32 → 2.6.34

package/dist/build-info.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.6.32",
-  "commit": "3a921a700c69af2a281df5a5a26dcc8986d3f4ba",
-  "builtAt": "2026-04-16T05:32:53.293Z"
+  "version": "2.6.34",
+  "commit": "f46835b55f8963f8de356d69966945daaf0f7ea2",
+  "builtAt": "2026-04-16T22:42:16.219Z"
 }

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

@@ -1 +1 @@
-1ef8a03d7981447f100886739cfbd52d6f44f70d5011a568566426cb868978f6
+986b5c29886821b4a3935537080cee76d6618b127cff49e89ebc8e80212cd10e

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

@@ -3143,9 +3143,449 @@ body {
 }
 
 /* ══════════════════════════════════════════════════════════════════════════
-   CONNECTIONS PANEL
+   NATIVE SETTINGS PANELS (Config, Debug, Logs)
    ══════════════════════════════════════════════════════════════════════════ */
 
+#native-settings-container {
+  display: none;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────────── */
+.settings-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(10, 12, 20, 0.6);
+  flex-shrink: 0;
+  min-height: 44px;
+}
+
+.settings-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.settings-toolbar-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  color: rgba(255, 255, 255, 0.45);
+}
+
+.settings-toolbar-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: rgba(139, 92, 246, 0.6);
+  letter-spacing: 0.04em;
+}
+
+.settings-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────── */
+.settings-btn {
+  padding: 4px 12px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.settings-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+}
+.settings-btn--primary {
+  background: rgba(139, 92, 246, 0.1);
+  border-color: rgba(139, 92, 246, 0.25);
+  color: rgba(139, 92, 246, 0.9);
+}
+.settings-btn--primary:hover {
+  background: rgba(139, 92, 246, 0.2);
+  border-color: rgba(139, 92, 246, 0.45);
+}
+.settings-btn--active {
+  background: rgba(139, 92, 246, 0.2);
+  border-color: rgba(139, 92, 246, 0.4);
+}
+.settings-btn--danger {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.25);
+  color: rgba(239, 68, 68, 0.9);
+}
+.settings-btn--danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: rgba(239, 68, 68, 0.45);
+}
+
+/* ── Search / filter input ──────────────────────────────────────────── */
+.settings-search {
+  padding: 4px 10px;
+  height: 28px;
+  width: 140px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.settings-search:focus {
+  border-color: rgba(139, 92, 246, 0.4);
+}
+.settings-search::placeholder {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Checkbox label ─────────────────────────────────────────────────── */
+.settings-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.settings-checkbox-label input[type="checkbox"] {
+  accent-color: var(--accent-purple);
+  width: 12px;
+  height: 12px;
+}
+
+/* ── Content area ───────────────────────────────────────────────────── */
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
+}
+.settings-content::-webkit-scrollbar {
+  width: 5px;
+}
+.settings-content::-webkit-scrollbar-thumb {
+  background: rgba(139, 92, 246, 0.3);
+  border-radius: 3px;
+}
+
+/* ── State messages ─────────────────────────────────────────────────── */
+.settings-loading,
+.settings-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.3);
+  letter-spacing: 0.05em;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   CONFIG PANEL — tree view
+   ══════════════════════════════════════════════════════════════════════ */
+
+.settings-section {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+.settings-section:hover {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.settings-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.02);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+.settings-section-header:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.settings-section-arrow {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+  transition: transform 0.15s;
+  width: 10px;
+  text-align: center;
+}
+.settings-section.collapsed .settings-section-arrow {
+  transform: rotate(-90deg);
+}
+
+.settings-section-key {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-cyan);
+  letter-spacing: 0.03em;
+}
+
+.settings-section-body {
+  padding: 8px 14px 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.7;
+  overflow-x: auto;
+}
+.settings-section.collapsed .settings-section-body {
+  display: none;
+}
+
+.cfg-key {
+  color: rgba(0, 212, 255, 0.8);
+}
+.cfg-colon {
+  color: rgba(255, 255, 255, 0.3);
+}
+.cfg-str {
+  color: rgba(52, 211, 153, 0.9);
+  word-break: break-all;
+}
+.cfg-num {
+  color: rgba(244, 114, 182, 0.9);
+}
+.cfg-bool {
+  color: rgba(139, 92, 246, 0.9);
+}
+.cfg-null {
+  color: rgba(255, 255, 255, 0.3);
+  font-style: italic;
+}
+.cfg-bracket {
+  color: rgba(255, 255, 255, 0.25);
+}
+.cfg-row {
+  padding-left: 1em;
+}
+.cfg-redacted {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(239, 68, 68, 0.12);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  color: rgba(239, 68, 68, 0.7);
+  letter-spacing: 0.08em;
+  margin-left: 8px;
+}
+
+/* ── Config editor ──────────────────────────────────────────────────── */
+.config-editor-wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 12px;
+  height: 100%;
+}
+.config-editor {
+  flex: 1;
+  min-height: 300px;
+  padding: 14px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  resize: none;
+  outline: none;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
+  tab-size: 2;
+}
+.config-editor:focus {
+  border-color: rgba(139, 92, 246, 0.35);
+}
+.config-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.config-editor-hint {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   DEBUG PANEL
+   ══════════════════════════════════════════════════════════════════════ */
+
+.debug-scroll {
+  padding: 0 !important;
+}
+
+.debug-entry-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 5px 16px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.5;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  transition: background 0.1s;
+}
+.debug-entry-row:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.debug-time {
+  color: rgba(255, 255, 255, 0.25);
+  flex-shrink: 0;
+  width: 65px;
+}
+
+.debug-type {
+  flex-shrink: 0;
+  width: 60px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.debug-type--chat { color: var(--accent-cyan); }
+.debug-type--agent { color: var(--accent-purple); }
+.debug-type--error { color: #ef4444; }
+.debug-type--other { color: rgba(255, 255, 255, 0.4); }
+
+.debug-summary {
+  color: rgba(255, 255, 255, 0.55);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   LOGS PANEL
+   ══════════════════════════════════════════════════════════════════════ */
+
+.logs-scroll {
+  padding: 0 !important;
+}
+
+.logs-level-filters {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.logs-level-chip {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  transition: all 0.15s;
+}
+.logs-level-chip:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+.logs-level-chip input[type="checkbox"] {
+  display: none;
+}
+.logs-level-chip:has(input:not(:checked)) {
+  opacity: 0.35;
+}
+
+.log-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 3px 16px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  line-height: 1.5;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+}
+.log-row:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.log-time {
+  color: rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+  width: 65px;
+}
+
+.log-level {
+  flex-shrink: 0;
+  width: 45px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.log-sub {
+  color: rgba(0, 212, 255, 0.5);
+  flex-shrink: 0;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-msg {
+  color: rgba(255, 255, 255, 0.6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   CONNECTIONS PANEL
+   ══════════════════════════════════════════════════════════════════════ */
+
 .connections-panel {
   display: flex;
   flex-direction: column;

package/dist/control-ui/index.html

@@ -989,6 +989,7 @@
     <script src="js/render.js"></script>
     <script src="js/symipulse.js"></script>
     <script src="js/app.js"></script>
+    <script src="js/settings.js"></script>
     <script src="js/menu.js"></script>
     <script src="js/history.js"></script>
     <script src="js/connections.js"></script>

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

@@ -1210,6 +1210,10 @@ gateway.addEventListener("disconnect", () => {
 
 gateway.addEventListener("event", (e) => {
   handleGatewayEvent(e.detail);
+  // Forward to native debug panel if open
+  if (window.__debugPanelCapture) {
+    window.__debugPanelCapture(e.detail?.event ?? "unknown", e.detail?.payload);
+  }
 });
 
 // Start connecting

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

@@ -108,8 +108,15 @@ function openPageOverlay(name, standardUrl) {
 
 function closePageOverlay() {
   overlayIsOpen = false;
+  // Clean up native settings panel if open
+  if (window.closeNativeSettings) {
+    window.closeNativeSettings();
+  }
   getPageOverlay().classList.remove("open");
   getPageOverlay().setAttribute("aria-hidden", "true");
+  // Restore iframe + popout button for next use
+  getPageFrame().style.display = "";
+  getPagePopoutBtn().style.display = "";
   // Delay clearing src so the close animation plays cleanly
   setTimeout(() => {
     if (!overlayIsOpen) {
@@ -146,6 +153,13 @@ const PAGE_NAMES = {
   "/logs": "Logs",
 };
 
+// Settings pages rendered natively (no iframe)
+const NATIVE_SETTINGS = {
+  "/config": "config",
+  "/debug": "debug",
+  "/logs": "logs",
+};
+
 document.querySelectorAll(".cmd-item[data-href]").forEach((item) => {
   item.addEventListener("click", (e) => {
     e.preventDefault();
@@ -153,12 +167,38 @@ document.querySelectorAll(".cmd-item[data-href]").forEach((item) => {
 
     if (href === "#chat") {
       closeMenu();
+      // Close native settings if open
+      if (window.closeNativeSettings) {
+        window.closeNativeSettings();
+      }
       closePageOverlay();
       return;
     }
 
-    // Standard UI pages → open natively in the page overlay
+    // Check if this is a native settings page
     if (href.includes("127.0.0.1:18789")) {
+      let pathname = "/";
+      try {
+        pathname = new URL(href).pathname;
+      } catch {}
+
+      const nativePage = NATIVE_SETTINGS[pathname];
+      if (nativePage && window.openNativeSettings) {
+        const pageName = PAGE_NAMES[pathname] ?? "Settings";
+        closeMenu();
+        // Use the page overlay shell (header with back/title) but native content
+        getPageTitle().textContent = pageName.toUpperCase();
+        getPagePopoutBtn().style.display = "none";
+        getPageFrame().style.display = "none";
+        overlayIsOpen = true;
+        getPageOverlay().classList.add("open");
+        getPageOverlay().setAttribute("aria-hidden", "false");
+        document.addEventListener("keydown", onOverlayKey);
+        window.openNativeSettings(nativePage);
+        return;
+      }
+
+      // Other standard UI pages → open in the page overlay iframe
       let pageName = item.querySelector(".cmd-item-name")?.textContent ?? "Page";
       try {
         const parsed = new URL(href);