@portel/photon 1.10.0 → 1.12.0

package/dist/beam.bundle.js

@@ -15357,10 +15357,14 @@ var theme = i`
     bottom: 0;
     background-color: var(--bg-glass);
     border: 1px solid var(--border-glass);
-    transition: 0.4s;
+    transition: 0.2s;
     border-radius: var(--radius-full);
   }
 
+  .slider:hover {
+    border-color: var(--accent-secondary);
+  }
+
   .slider:before {
     position: absolute;
     content: '';
@@ -15369,7 +15373,7 @@ var theme = i`
     left: 2px;
     bottom: 2px;
     background-color: var(--t-muted);
-    transition: 0.4s;
+    transition: 0.2s;
     border-radius: 50%;
   }
 
@@ -15544,7 +15548,7 @@ ToastManager.styles = [
         pointer-events: auto;
         animation: slideIn 0.3s ease-out;
         max-width: 350px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        box-shadow: var(--shadow-lg);
       }
 
       .toast.exiting {
@@ -15622,7 +15626,7 @@ ToastManager.styles = [
 
       .close:hover {
         color: var(--t-primary);
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
       }
 
       .toast-action {
@@ -15822,45 +15826,10 @@ var iconPaths = {
   docs: `<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>`,
   expand: `<path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/>`,
   plus: `<path d="M5 12h14"/><path d="M12 5v14"/>`,
-  clone: `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`
+  clone: `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`,
+  installApp: `<path d="M12 3v12"/><path d="m17 11-5 5-5-5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>`
 };
 
-// src/auto-ui/frontend/utils/format-label.ts
-function formatLabel(name2) {
-  if (!name2) return name2;
-  let cleaned = name2.replace(/^_+/, "");
-  let spaced = cleaned.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
-  spaced = spaced.replace(/[_-]+/g, " ");
-  let result = spaced.split(/\s+/).map((word) => {
-    if (!word) return "";
-    const upper = word.toUpperCase();
-    if ([
-      "AI",
-      "ID",
-      "IDS",
-      "URL",
-      "API",
-      "UI",
-      "IP",
-      "HTTP",
-      "HTTPS",
-      "JSON",
-      "XML",
-      "HTML",
-      "CSS",
-      "SQL",
-      "MCP",
-      "SSH",
-      "CLI"
-    ].includes(upper)) {
-      if (upper === "IDS") return "IDs";
-      return upper;
-    }
-    return word.charAt(0).toUpperCase() + word.slice(1);
-  }).join(" ");
-  return result;
-}
-
 // node_modules/@portel/photon-core/dist/design-system/oklch.js
 function oklchToSRGB(L3, C3, H3) {
   const hRad = H3 * Math.PI / 180;
@@ -16545,7 +16514,8 @@ var buttons = i`
     color: var(--t-primary);
   }
 
-  .btn-primary:disabled {
+  .btn-primary:disabled,
+  .btn-secondary:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
@@ -16585,7 +16555,21 @@ var forms = i`
     padding: var(--space-sm);
     border-radius: var(--radius-sm);
     font-family: var(--font-sans);
+    font-size: var(--text-md);
     box-sizing: border-box;
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  input:hover,
+  textarea:hover,
+  select:hover {
+    border-color: var(--accent-secondary);
+  }
+
+  textarea {
+    resize: vertical;
   }
 
   ::placeholder {
@@ -16601,12 +16585,12 @@ var forms = i`
     display: block;
     margin-bottom: var(--space-xs);
     font-weight: 500;
-    font-size: 0.9rem;
+    font-size: var(--text-md);
   }
 
   .error-text {
     color: var(--color-error);
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
     margin-top: var(--space-xs);
   }
 
@@ -16626,7 +16610,7 @@ var forms = i`
 var badges = i`
   .type-badge {
     display: inline-block;
-    font-size: 0.65rem;
+    font-size: var(--text-2xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -16660,7 +16644,7 @@ var badges = i`
   }
 
   .param-tag {
-    font-size: 0.65rem;
+    font-size: var(--text-2xs);
     padding: 1px 6px;
     border-radius: var(--radius-xs);
     background: var(--param-tag-bg, hsla(220, 10%, 80%, 0.08));
@@ -17236,6 +17220,307 @@ function loadSavedThemeConfig() {
   return null;
 }
 
+// src/auto-ui/frontend/services/photon-instance-manager.ts
+var SimpleEventEmitter = class {
+  constructor() {
+    this._listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, callback2) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this._listeners.get(event).add(callback2);
+  }
+  off(event, callback2) {
+    const listeners = this._listeners.get(event);
+    if (listeners) {
+      listeners.delete(callback2);
+    }
+  }
+  emit(event, ...args) {
+    const listeners = this._listeners.get(event);
+    if (listeners) {
+      for (const callback2 of listeners) {
+        callback2(...args);
+      }
+    }
+  }
+};
+var PhotonSessionProxy = class extends SimpleEventEmitter {
+  constructor(options) {
+    super();
+    this._paginationState = /* @__PURE__ */ new Map();
+    this._pendingPatches = [];
+    this._isApplyingPatches = false;
+    this._name = options.name;
+    this._state = { ...options.initialState };
+  }
+  /**
+   * Get the photon name
+   */
+  get name() {
+    return this._name;
+  }
+  /**
+   * Get current state
+   */
+  get state() {
+    return this._state;
+  }
+  /**
+   * Apply JSON Patch array to instance state
+   * Patches from: https://tools.ietf.org/html/rfc6902
+   */
+  applyPatches(patches) {
+    if (!Array.isArray(patches) || patches.length === 0) {
+      return;
+    }
+    this._pendingPatches.push(...patches);
+    if (!this._isApplyingPatches) {
+      this._isApplyingPatches = true;
+      queueMicrotask(() => this._processPendingPatches());
+    }
+  }
+  /**
+   * Update pagination state for a property (e.g., 'items')
+   */
+  setPaginationState(property2, state) {
+    const current = this._paginationState.get(property2) || {
+      pageSize: 20,
+      currentPage: 0,
+      hasMore: true,
+      isLoading: false
+    };
+    this._paginationState.set(property2, { ...current, ...state });
+  }
+  /**
+   * Get pagination state for a property
+   */
+  getPaginationState(property2) {
+    return this._paginationState.get(property2) || {
+      pageSize: 20,
+      currentPage: 0,
+      hasMore: true,
+      isLoading: false
+    };
+  }
+  /**
+   * Create a getter/setter for property access
+   */
+  _createPropertyDescriptor(key) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get: () => this._state[key],
+      set: (value) => {
+        this._state[key] = value;
+        this.emit("propertyChanged", { property: key, value });
+      }
+    };
+  }
+  /**
+   * Make a property accessible on the proxy
+   */
+  makeProperty(key) {
+    Object.defineProperty(this, key, this._createPropertyDescriptor(key));
+  }
+  /**
+   * Get all top-level properties (useful for initialization)
+   */
+  getProperties() {
+    return Object.keys(this._state);
+  }
+  /**
+   * Process pending patches
+   */
+  _processPendingPatches() {
+    const patches = this._pendingPatches.splice(0);
+    try {
+      for (const patch of patches) {
+        this._applyPatch(patch);
+      }
+      this.emit("state-changed", patches);
+    } finally {
+      this._isApplyingPatches = false;
+      if (this._pendingPatches.length > 0) {
+        queueMicrotask(() => this._processPendingPatches());
+      }
+    }
+  }
+  /**
+   * Apply a single JSON Patch operation
+   */
+  _applyPatch(patch) {
+    const { op, path, value } = patch;
+    if (!path || typeof path !== "string") {
+      console.warn("Invalid patch: missing or invalid path", patch);
+      return;
+    }
+    const parts = path.split("/").filter((p5) => p5 !== "");
+    let current = this._state;
+    try {
+      for (let i7 = 0; i7 < parts.length - 1; i7++) {
+        const part = this._unescapePath(parts[i7]);
+        if (!(part in current)) {
+          current[part] = {};
+        }
+        current = current[part];
+      }
+      const lastPart = this._unescapePath(parts[parts.length - 1]);
+      switch (op) {
+        case "add":
+          if (Array.isArray(current) && !isNaN(Number(lastPart))) {
+            const index2 = Number(lastPart);
+            current.splice(index2, 0, value);
+          } else {
+            current[lastPart] = value;
+          }
+          break;
+        case "remove":
+          if (Array.isArray(current) && !isNaN(Number(lastPart))) {
+            const index2 = Number(lastPart);
+            current.splice(index2, 1);
+          } else {
+            delete current[lastPart];
+          }
+          break;
+        case "replace":
+          current[lastPart] = value;
+          break;
+        case "move":
+          const fromParts = patch.from.split("/").filter((p5) => p5 !== "");
+          let fromCurrent = this._state;
+          for (let i7 = 0; i7 < fromParts.length - 1; i7++) {
+            fromCurrent = fromCurrent[this._unescapePath(fromParts[i7])];
+          }
+          const fromLast = this._unescapePath(fromParts[fromParts.length - 1]);
+          const movedValue = fromCurrent[fromLast];
+          if (Array.isArray(fromCurrent)) {
+            fromCurrent.splice(Number(fromLast), 1);
+          } else {
+            delete fromCurrent[fromLast];
+          }
+          if (Array.isArray(current)) {
+            current.splice(Number(lastPart), 0, movedValue);
+          } else {
+            current[lastPart] = movedValue;
+          }
+          break;
+        case "copy":
+          const copyFromParts = patch.from.split("/").filter((p5) => p5 !== "");
+          let copyCurrent = this._state;
+          for (let i7 = 0; i7 < copyFromParts.length - 1; i7++) {
+            copyCurrent = copyCurrent[this._unescapePath(copyFromParts[i7])];
+          }
+          const copyFromLast = this._unescapePath(copyFromParts[copyFromParts.length - 1]);
+          const copiedValue = JSON.parse(JSON.stringify(copyCurrent[copyFromLast]));
+          current[lastPart] = copiedValue;
+          break;
+        case "test":
+          if (current[lastPart] !== value) {
+            throw new Error(`Test failed at ${path}: expected ${value}, got ${current[lastPart]}`);
+          }
+          break;
+        default:
+          console.warn(`Unknown patch operation: ${op}`);
+      }
+    } catch (error2) {
+      console.error("Failed to apply patch", { patch, error: error2 });
+      throw error2;
+    }
+  }
+  /**
+   * Unescape JSON Pointer path component
+   * See: https://tools.ietf.org/html/rfc6901
+   */
+  _unescapePath(part) {
+    return part.replace(/~1/g, "/").replace(/~0/g, "~");
+  }
+  /**
+   * Clear all state
+   */
+  reset(newState) {
+    this._state = { ...newState };
+    this._paginationState.clear();
+    this.emit("reset");
+  }
+};
+var GlobalSessionManager = class {
+  constructor() {
+    this._sessions = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Create or get a photon session
+   */
+  createOrGetSession(name2, initialState) {
+    if (this._sessions.has(name2)) {
+      return this._sessions.get(name2);
+    }
+    const session = new PhotonSessionProxy({
+      name: name2,
+      initialState
+    });
+    Object.keys(initialState).forEach((key) => {
+      session.makeProperty(key);
+    });
+    this._sessions.set(name2, session);
+    return session;
+  }
+  /**
+   * Get existing session
+   */
+  getSession(name2) {
+    return this._sessions.get(name2);
+  }
+  /**
+   * Apply patches to a session
+   */
+  applyPatches(name2, patches) {
+    const session = this._sessions.get(name2);
+    if (!session) {
+      console.warn(`No session found for: ${name2}`);
+      return false;
+    }
+    session.applyPatches(patches);
+    return true;
+  }
+  /**
+   * Remove session
+   */
+  removeSession(name2) {
+    this._sessions.delete(name2);
+  }
+  /**
+   * Get all session names
+   */
+  getSessionNames() {
+    return Array.from(this._sessions.keys());
+  }
+};
+var globalSessionManager = null;
+function getGlobalSessionManager() {
+  if (!globalSessionManager) {
+    globalSessionManager = new GlobalSessionManager();
+    if (typeof window !== "undefined") {
+      window.__photonSessionManager = globalSessionManager;
+    }
+  }
+  return globalSessionManager;
+}
+function initializeGlobalPhotonSession(photonName, initialState) {
+  const manager = getGlobalSessionManager();
+  const session = manager.createOrGetSession(photonName, initialState);
+  if (typeof window !== "undefined") {
+    const varName = photonName.charAt(0).toLocaleLowerCase() + photonName.slice(1);
+    window[varName] = session;
+    if (photonName === "Boards") {
+      window.boards = session;
+      window.boardsSession = session;
+    }
+  }
+  return session;
+}
+
 // src/auto-ui/frontend/services/mcp-client.ts
 var MCPClientService = class {
   // Discard operations older than 30s
@@ -17940,9 +18225,21 @@ var MCPClientService = class {
       case "photon/refresh-needed":
         this.emit("refresh-needed", notification.params);
         break;
-      case "photon/state-changed":
+      case "state-changed":
+        const params = notification.params;
+        if (params?.instance && params?.patches) {
+          try {
+            const manager = getGlobalSessionManager();
+            manager.applyPatches(params.instance, params.patches);
+          } catch (error2) {
+            console.error("Failed to apply patches to session", error2);
+          }
+        }
         this.emit("state-changed", notification.params);
         break;
+      case "photon/notification":
+        this.emit("photon-notification", notification.params);
+        break;
       // MCP Apps standard notifications
       case "ui/notifications/tool-result":
         this.emit("ui-tool-result", notification.params);
@@ -17967,6 +18264,439 @@ var MCPClientService = class {
 };
 var mcpClient = new MCPClientService();
 
+// src/auto-ui/frontend/services/viewport-aware-proxy.ts
+var ViewportAwareProxy = class {
+  constructor(photonName, methodName, mcpClient2, options = {}) {
+    // Cache management
+    this._cache = /* @__PURE__ */ new Map();
+    this._viewport = { start: 0, end: 20 };
+    this._pendingRanges = /* @__PURE__ */ new Set();
+    this._pagination = {
+      totalCount: 0,
+      start: 0,
+      end: 0,
+      hasMore: false
+    };
+    // Event listeners
+    this._listeners = /* @__PURE__ */ new Map();
+    this._photonName = photonName;
+    this._methodName = methodName;
+    this._mcpClient = mcpClient2;
+    this._fetchOptions = {
+      pageSize: options.pageSize ?? 20,
+      bufferSize: options.bufferSize ?? 5,
+      maxCacheSize: options.maxCacheSize ?? 1e3
+    };
+  }
+  /**
+   * Initialize with paginated response from server
+   * Server should return: { items: [...], _pagination: {...} }
+   */
+  initializeWithResponse(response) {
+    if (!response || typeof response !== "object") {
+      return;
+    }
+    const { items = [], _pagination } = response;
+    if (_pagination) {
+      this._pagination = _pagination;
+      items.forEach((item, offset) => {
+        this._cache.set(_pagination.start + offset, item);
+      });
+      this._emit("initialized", { pagination: this._pagination });
+    }
+  }
+  /**
+   * Set visible viewport (what user sees on screen)
+   * Automatically fetches data for this range + buffer
+   */
+  async setViewport(start, end) {
+    this._viewport = { start, end };
+    const bufferedStart = Math.max(0, start - this._fetchOptions.bufferSize);
+    const bufferedEnd = Math.min(this._pagination.totalCount, end + this._fetchOptions.bufferSize);
+    const missingRanges = this._findMissingRanges(bufferedStart, bufferedEnd);
+    await Promise.all(
+      missingRanges.map(
+        (range) => this._fetchRange(range.start, range.end).catch((err) => {
+          console.error(`Failed to fetch range [${range.start}, ${range.end}]`, err);
+        })
+      )
+    );
+  }
+  /**
+   * Get items in current viewport (array-like interface)
+   */
+  get items() {
+    const items = [];
+    for (let i7 = this._viewport.start; i7 < this._viewport.end; i7++) {
+      if (this._cache.has(i7)) {
+        items.push(this._cache.get(i7));
+      }
+    }
+    return items;
+  }
+  /**
+   * Get item by index
+   */
+  getItem(index2) {
+    return this._cache.get(index2);
+  }
+  /**
+   * Get total count of items (if available)
+   */
+  get totalCount() {
+    return this._pagination.totalCount;
+  }
+  /**
+   * Get current pagination state
+   */
+  get pagination() {
+    return { ...this._pagination };
+  }
+  /**
+   * Get current viewport
+   */
+  get viewport() {
+    return { ...this._viewport };
+  }
+  /**
+   * Get cache size (for debugging)
+   */
+  get cacheSize() {
+    return this._cache.size;
+  }
+  /**
+   * Check if a range is cached
+   */
+  isCached(start, end) {
+    for (let i7 = start; i7 < end; i7++) {
+      if (!this._cache.has(i7)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Subscribe to events
+   */
+  on(event, callback2) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this._listeners.get(event).add(callback2);
+  }
+  /**
+   * Unsubscribe from events
+   */
+  off(event, callback2) {
+    const listeners = this._listeners.get(event);
+    if (listeners) {
+      listeners.delete(callback2);
+    }
+  }
+  /**
+   * Clear cache
+   */
+  clearCache() {
+    this._cache.clear();
+    this._emit("cache-cleared");
+  }
+  /**
+   * Apply patches from state-changed events
+   * Updates cache with new/modified items
+   */
+  applyPatches(patches) {
+    for (const patch of patches) {
+      this._applyPatch(patch);
+    }
+    this._emit("patched", { patches });
+  }
+  /**
+   * Find which ranges need to be fetched
+   */
+  _findMissingRanges(start, end) {
+    const missing = [];
+    for (let i7 = start; i7 < end; i7++) {
+      if (!this._cache.has(i7)) {
+        missing.push(i7);
+      }
+    }
+    const ranges = [];
+    if (missing.length === 0) return ranges;
+    let rangeStart = missing[0];
+    let rangeEnd2 = missing[0];
+    for (let i7 = 1; i7 < missing.length; i7++) {
+      if (missing[i7] === rangeEnd2 + 1) {
+        rangeEnd2 = missing[i7];
+      } else {
+        ranges.push({ start: rangeStart, end: rangeEnd2 + 1 });
+        rangeStart = missing[i7];
+        rangeEnd2 = missing[i7];
+      }
+    }
+    ranges.push({ start: rangeStart, end: rangeEnd2 + 1 });
+    return ranges;
+  }
+  /**
+   * Fetch a range of items via MCP
+   */
+  async _fetchRange(start, end) {
+    const rangeKey = `${start}-${end}`;
+    if (this._pendingRanges.has(rangeKey)) {
+      return;
+    }
+    this._pendingRanges.add(rangeKey);
+    try {
+      const toolName = `${this._photonName}/${this._methodName}`;
+      const result = await this._mcpClient.callTool(toolName, {
+        start,
+        limit: Math.min(end - start, this._fetchOptions.pageSize)
+      });
+      if (result.isError) {
+        console.error(`Failed to fetch ${toolName}[${start}:${end}]`, result);
+        return;
+      }
+      const parsed = this._mcpClient.parseToolResult(result);
+      if (parsed && typeof parsed === "object") {
+        const { items = [], _pagination } = parsed;
+        if (_pagination) {
+          this._pagination = _pagination;
+        }
+        items.forEach((item, offset) => {
+          this._cache.set(start + offset, item);
+        });
+        if (this._cache.size > this._fetchOptions.maxCacheSize) {
+          this._pruneCache();
+        }
+        this._emit("fetched", { start, end, itemCount: items.length });
+      }
+    } finally {
+      this._pendingRanges.delete(rangeKey);
+    }
+  }
+  /**
+   * Apply a single JSON Patch to cache
+   */
+  _applyPatch(patch) {
+    const { op, path } = patch;
+    const match = path.match(/\/items\/(\d+)/);
+    if (!match) return;
+    const index2 = parseInt(match[1], 10);
+    switch (op) {
+      case "add": {
+        const newCache = /* @__PURE__ */ new Map();
+        for (const [key, value] of this._cache) {
+          if (key >= index2) {
+            newCache.set(key + 1, value);
+          } else {
+            newCache.set(key, value);
+          }
+        }
+        newCache.set(index2, patch.value);
+        this._cache = newCache;
+        this._pagination.totalCount++;
+        break;
+      }
+      case "remove": {
+        const newCache = /* @__PURE__ */ new Map();
+        for (const [key, value] of this._cache) {
+          if (key > index2) {
+            newCache.set(key - 1, value);
+          } else if (key < index2) {
+            newCache.set(key, value);
+          }
+        }
+        this._cache = newCache;
+        this._pagination.totalCount--;
+        break;
+      }
+      case "replace": {
+        this._cache.set(index2, patch.value);
+        break;
+      }
+    }
+  }
+  /**
+   * Remove least-recently-used items from cache when it gets too large
+   */
+  _pruneCache() {
+    const toRemove = this._cache.size - this._fetchOptions.maxCacheSize;
+    if (toRemove <= 0) return;
+    const viewportCenter = this._viewport.start + (this._viewport.end - this._viewport.start) / 2;
+    const sortedKeys = Array.from(this._cache.keys()).sort(
+      (a5, b3) => Math.abs(a5 - viewportCenter) - Math.abs(b3 - viewportCenter)
+    );
+    for (let i7 = 0; i7 < toRemove && i7 < sortedKeys.length; i7++) {
+      this._cache.delete(sortedKeys[i7]);
+    }
+  }
+  /**
+   * Emit event to listeners
+   */
+  _emit(event, data) {
+    const listeners = this._listeners.get(event);
+    if (listeners) {
+      for (const callback2 of listeners) {
+        try {
+          callback2(data);
+        } catch (err) {
+          console.error(`Error in ${event} listener:`, err);
+        }
+      }
+    }
+  }
+};
+
+// src/auto-ui/frontend/services/viewport-manager.ts
+function getPageSizeForClient() {
+  if (typeof window !== "undefined" && window.innerWidth < 600) {
+    return 10;
+  }
+  if (typeof window !== "undefined" && window.innerWidth < 1024) {
+    return 25;
+  }
+  return 50;
+}
+var ViewportManager = class {
+  constructor(config3) {
+    this.observer = null;
+    this.visibleSentinels = /* @__PURE__ */ new Set();
+    this.lastVisibleRange = { start: 0, end: 0 };
+    this.lastScrollDirection = "none";
+    this.changeCallbacks = [];
+    this.element = config3.element;
+    this.pageSize = config3.pageSize;
+    this.paddingAbove = config3.paddingAbove ?? this.pageSize;
+    this.paddingBelow = config3.paddingBelow ?? this.pageSize * 2;
+    this.debug = config3.debug ?? false;
+    this.log("ViewportManager initialized", {
+      pageSize: this.pageSize,
+      paddingAbove: this.paddingAbove,
+      paddingBelow: this.paddingBelow
+    });
+    this.initializeObserver();
+  }
+  initializeObserver() {
+    const options = {
+      root: null,
+      rootMargin: "100px",
+      threshold: 0
+    };
+    this.observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const index2 = this.getSentinelIndex(entry.target);
+        if (index2 !== null) {
+          if (entry.isIntersecting) {
+            this.visibleSentinels.add(index2);
+          } else {
+            this.visibleSentinels.delete(index2);
+          }
+        }
+      }
+      this.updateVisibleRange();
+    }, options);
+  }
+  createSentinel(index2) {
+    const sentinel = document.createElement("div");
+    sentinel.setAttribute("data-viewport-sentinel", String(index2));
+    sentinel.style.height = "0px";
+    sentinel.style.overflow = "hidden";
+    return sentinel;
+  }
+  observeSentinel(sentinel) {
+    if (this.observer) {
+      this.observer.observe(sentinel);
+    }
+  }
+  unobserveSentinel(sentinel) {
+    if (this.observer) {
+      this.observer.unobserve(sentinel);
+    }
+  }
+  getSentinelIndex(element) {
+    const attr = element.getAttribute("data-viewport-sentinel");
+    return attr !== null ? parseInt(attr, 10) : null;
+  }
+  updateVisibleRange() {
+    if (this.visibleSentinels.size === 0) {
+      return;
+    }
+    const indices = Array.from(this.visibleSentinels).sort((a5, b3) => a5 - b3);
+    const visibleStart = indices[0];
+    const visibleEnd = indices[indices.length - 1] + 1;
+    const direction = this.determineScrollDirection(visibleStart);
+    const bufferStart = Math.max(
+      0,
+      visibleStart - Math.ceil(this.paddingAbove / this.pageSize) * this.pageSize
+    );
+    const bufferEnd = visibleEnd + Math.ceil(this.paddingBelow / this.pageSize) * this.pageSize;
+    const rangeChanged = visibleStart !== this.lastVisibleRange.start || visibleEnd !== this.lastVisibleRange.end;
+    if (rangeChanged) {
+      this.lastVisibleRange = { start: visibleStart, end: visibleEnd };
+      this.lastScrollDirection = direction;
+      const event = {
+        visibleRange: { start: visibleStart, end: visibleEnd },
+        bufferRange: { start: bufferStart, end: bufferEnd },
+        scrollDirection: direction,
+        timestamp: Date.now()
+      };
+      this.log("Viewport changed", event);
+      for (const callback2 of this.changeCallbacks) {
+        callback2(event);
+      }
+    }
+  }
+  determineScrollDirection(newStart) {
+    if (newStart < this.lastVisibleRange.start) {
+      return "up";
+    } else if (newStart > this.lastVisibleRange.start) {
+      return "down";
+    }
+    return "none";
+  }
+  getVisibleRange() {
+    return this.lastVisibleRange;
+  }
+  getBufferRange(totalItems) {
+    const { start, end } = this.lastVisibleRange;
+    const bufferStart = Math.max(0, start - this.paddingAbove);
+    const bufferEnd = Math.min(totalItems, end + this.paddingBelow);
+    return { start: bufferStart, end: bufferEnd };
+  }
+  getScrollDirection() {
+    return this.lastScrollDirection;
+  }
+  getPageSize() {
+    return this.pageSize;
+  }
+  onChange(callback2) {
+    this.changeCallbacks.push(callback2);
+  }
+  offChange(callback2) {
+    this.changeCallbacks = this.changeCallbacks.filter((cb) => cb !== callback2);
+  }
+  setPageSize(newPageSize) {
+    if (newPageSize !== this.pageSize) {
+      this.pageSize = newPageSize;
+      this.log("Page size updated", { newPageSize });
+      this.updateVisibleRange();
+    }
+  }
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    this.changeCallbacks = [];
+    this.visibleSentinels.clear();
+    this.log("ViewportManager destroyed");
+  }
+  log(message, data) {
+    if (this.debug) {
+      console.log(`[ViewportManager] ${message}`, data);
+    }
+  }
+};
+
 // src/auto-ui/frontend/components/beam-app.ts
 var THEME_STORAGE_KEY = "beam-theme";
 var PROTOCOL_STORAGE_KEY = "beam-protocol";
@@ -18030,6 +18760,10 @@ var BeamApp = class extends i4 {
     this._promptArguments = {};
     this._renderedPrompt = "";
     this._resourceContent = "";
+    this._splitPanels = [];
+    this._methodPickerOpen = false;
+    this._methodPickerPanelId = null;
+    this._nextPanelId = 0;
     // Collection auto-subscription for ReactiveArray/Map/Set events
     this._collectionUnsubscribes = [];
     this._currentCollectionName = null;
@@ -18040,6 +18774,10 @@ var BeamApp = class extends i4 {
     this._fileIdCounter = 0;
     // Deep link URL for setOpenInAppUrl
     this._openInAppUrl = null;
+    // PWA install state
+    this._pwaInstallPrompt = null;
+    this._pwaIsStandalone = false;
+    this._pwaCurrentPhoton = null;
     this._handleDocumentClick = (e8) => {
       const path = e8.composedPath();
       if (this._showSettingsMenu) {
@@ -18057,11 +18795,11 @@ var BeamApp = class extends i4 {
       }
     };
     this._initialConnectDone = false;
-    this._handleHashChange = () => {
+    this._handleRouteChange = () => {
       void (async () => {
-        const fullHash = window.location.hash.slice(1);
-        const [pathPart, queryPart] = fullHash.split("?");
-        const [photonName, methodName] = pathPart.split("/");
+        const fullPath = window.location.pathname.slice(1);
+        const queryPart = window.location.search.slice(1);
+        const [photonName, methodName] = fullPath.split("/");
         let sharedParams = {};
         if (queryPart) {
           const params = new URLSearchParams(queryPart);
@@ -18078,6 +18816,9 @@ var BeamApp = class extends i4 {
             }
           }
         }
+        this._methodPickerOpen = false;
+        this._methodPickerPanelId = null;
+        this._splitPanels = [];
         if (!photonName || photonName === "home") {
           this._selectedPhoton = null;
           this._selectedMethod = null;
@@ -18104,7 +18845,8 @@ var BeamApp = class extends i4 {
               return;
             }
             if (methodName && photon.methods) {
-              const method = photon.methods.find((m3) => m3.name === methodName);
+              const [firstMethodName, secondMethodName] = methodName.split("+");
+              const method = photon.methods.find((m3) => m3.name === firstMethodName);
               if (method) {
                 if (Object.keys(sharedParams).length > 0) {
                   this._sharedFormParams = sharedParams;
@@ -18115,6 +18857,22 @@ var BeamApp = class extends i4 {
                 }
                 this._selectedMethod = method;
                 this._view = "form";
+                if (secondMethodName) {
+                  const urlPath = location.pathname;
+                  const methodPart = urlPath.split("/").pop() || "";
+                  const methodNames = methodPart.split("+");
+                  for (let i7 = 1; i7 < methodNames.length; i7++) {
+                    const name2 = methodNames[i7];
+                    if (name2 === "source") {
+                      this._addPanel("source");
+                    } else {
+                      const panelMethod = photon.methods.find((m3) => m3.name === name2);
+                      if (panelMethod) {
+                        this._addPanel("method", panelMethod);
+                      }
+                    }
+                  }
+                }
                 if (Object.keys(sharedParams).length === 0) {
                   this._maybeAutoInvoke(method);
                 }
@@ -18134,18 +18892,15 @@ var BeamApp = class extends i4 {
         }
       })();
     };
-    this._handlePopState = () => {
-      void this._handleHashChange();
-    };
     this._goHome = () => {
       this._selectedPhoton = null;
       this._selectedMethod = null;
       this._lastResult = null;
-      this._updateHash();
+      this._updateRoute();
     };
     this._runTests = async () => {
       if (!this._selectedPhoton || this._runningTests) return;
-      const testMethods = this._getTestMethods();
+      const testMethods = await this._fetchTestList(this._selectedPhoton.name);
       if (testMethods.length === 0) return;
       this._runningTests = true;
       this._testResults = [];
@@ -18231,6 +18986,7 @@ var BeamApp = class extends i4 {
         `All photon tests: ${passed}/${total} passed`
       );
     };
+    this._pickerDismissHandler = null;
     this._toggleSettingsMenu = () => {
       this._showSettingsMenu = !this._showSettingsMenu;
     };
@@ -18249,8 +19005,45 @@ var BeamApp = class extends i4 {
     };
     this._launchAsApp = () => {
       this._closeSettingsMenu();
-      if (this._selectedPhoton) {
-        window.open(`/api/pwa/app?photon=${encodeURIComponent(this._selectedPhoton.name)}`, "_blank");
+      if (!this._selectedPhoton) return;
+      if (this._pwaInstallPrompt) {
+        void (async () => {
+          try {
+            await fetch("/api/pwa/configure", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                photon: this._selectedPhoton.name,
+                port: location.port || "4100"
+              }),
+              signal: AbortSignal.timeout(5e3)
+            });
+          } catch {
+          }
+          const photonName = this._selectedPhoton.name;
+          const onInstalled = () => {
+            window.open(`/app/${encodeURIComponent(photonName)}`, "_blank");
+          };
+          window.addEventListener("appinstalled", onInstalled, { once: true });
+          const result = await this._pwaInstallPrompt.prompt();
+          this._log("info", `PWA install prompt result: ${result?.outcome}`);
+          if (result?.outcome !== "accepted") {
+            window.removeEventListener("appinstalled", onInstalled);
+          }
+          this._pwaInstallPrompt = null;
+        })();
+      } else {
+        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+        if (isSafari || isIOS) {
+          const hint = isIOS ? 'Tap the Share button, then "Add to Home Screen"' : "Use File > Add to Dock to install this app";
+          showToast(hint, "info");
+        } else {
+          showToast(
+            "Install not ready yet \u2014 the service worker needs a moment to generate icons. Try again in a few seconds.",
+            "info"
+          );
+        }
       }
     };
     this._handleRemove = async () => {
@@ -18416,7 +19209,7 @@ var BeamApp = class extends i4 {
         }
       }
       this._view = "config";
-      this._updateHash();
+      this._updateRoute();
     };
     this._toggleRememberValues = () => {
       this._rememberFormValues = !this._rememberFormValues;
@@ -19001,7 +19794,7 @@ var BeamApp = class extends i4 {
       }
       if (e8.key === "Enter" && this._selectedMethod && this._view === "list") {
         this._view = "form";
-        this._updateHash();
+        this._updateRoute();
         return;
       }
       if (e8.key === "r") {
@@ -19037,12 +19830,12 @@ var BeamApp = class extends i4 {
       this._focusMode = !this._focusMode;
       if (this._focusMode) {
         this.classList.add("focus-mode");
-        const hash2 = window.location.hash.replace(/\?focus=1/, "");
-        history.replaceState(null, "", hash2 + "?focus=1");
+        const path = window.location.pathname;
+        history.replaceState(null, "", path + "?focus=1");
       } else {
         this.classList.remove("focus-mode");
-        const hash2 = window.location.hash.replace(/\?focus=1/, "");
-        history.replaceState(null, "", hash2 || "#");
+        const path = window.location.pathname;
+        history.replaceState(null, "", path);
       }
     };
     this._handleFullscreen = () => {
@@ -19141,9 +19934,25 @@ var BeamApp = class extends i4 {
             case "fullscreen":
               this._handleFullscreen();
               break;
+            case "install-app":
+              this._launchAsApp();
+              break;
+          }
+          break;
+        }
+        case "split-view:add":
+          this._showMethodPicker();
+          break;
+        case "split-view:change": {
+          const method = this._selectedPhoton?.methods?.find((m3) => m3.name === e8.detail.method);
+          if (method && this._splitPanels.length > 0) {
+            this._changePanelMethod(this._splitPanels[0].id, method);
           }
           break;
         }
+        case "split-view:remove":
+          this._closeSecondPanel();
+          break;
       }
     };
     this._startEditingDescription = () => {
@@ -19343,7 +20152,7 @@ var BeamApp = class extends i4 {
     if (method) {
       this._selectedMethod = method;
       this._view = "form";
-      this._updateHash();
+      this._updateRoute();
       this._log("info", `Starting ${targetName}/${action}...`);
       showToast(`Starting ${action}...`, "info");
     } else {
@@ -19370,15 +20179,21 @@ var BeamApp = class extends i4 {
    */
   _handleGlobalMethodSelect(photon, method) {
     this._teardownActiveCustomUI();
+    if (this._selectedPhoton?.name !== photon.name) {
+      this._closeSecondPanel();
+    }
     this._selectedPhoton = photon;
     if (this._willAutoInvoke(method)) {
       this._isExecuting = true;
     }
     this._selectedMethod = method;
     this._view = "form";
-    this._updateHash();
+    this._updateRoute();
     this._maybeAutoInvoke(method);
   }
+  get _splitViewEnabled() {
+    return this._splitPanels.length > 0;
+  }
   connectedCallback() {
     super.connectedCallback();
     const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
@@ -19410,20 +20225,114 @@ var BeamApp = class extends i4 {
     }
     document.addEventListener("click", this._handleDocumentClick);
     void this._connectMCP();
-    window.addEventListener("hashchange", this._handleHashChange);
-    window.addEventListener("popstate", this._handlePopState);
+    this._setupNotificationHandlers();
+    window.addEventListener("popstate", this._handleRouteChange);
     window.addEventListener("message", this._handleBridgeMessage);
     window.addEventListener("keydown", this._handleKeydown);
+    this._initPWA();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("hashchange", this._handleHashChange);
-    window.removeEventListener("popstate", this._handlePopState);
+    window.removeEventListener("popstate", this._handleRouteChange);
     window.removeEventListener("message", this._handleBridgeMessage);
     window.removeEventListener("keydown", this._handleKeydown);
     document.removeEventListener("click", this._handleDocumentClick);
     this._cleanupCollectionSubscriptions();
   }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("_selectedPhoton")) {
+      const name2 = this._selectedPhoton?.name || null;
+      if (name2 !== this._pwaCurrentPhoton) {
+        this._pwaCurrentPhoton = name2;
+        if (name2) {
+          this._setupPWAManifest(name2);
+        }
+      }
+    }
+  }
+  // ---------------------------------------------------------------------------
+  // PWA — Progressive Web App support
+  // ---------------------------------------------------------------------------
+  _initPWA() {
+    this._pwaIsStandalone = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/sw.js", { scope: "/" }).then((reg) => this._log("info", `PWA SW registered: ${reg.scope}`, true)).catch((err) => this._log("warn", `PWA SW registration failed: ${err}`, true));
+    }
+    window.addEventListener("beforeinstallprompt", (e8) => {
+      this._pwaInstallPrompt = e8;
+    });
+    window.addEventListener("appinstalled", () => {
+      this._pwaInstallPrompt = null;
+      this._log("info", "PWA app installed");
+    });
+  }
+  /**
+   * Set up notification handlers for photon notifications.
+   * When a notification arrives for a photon that cares about that event type,
+   * bring the window to focus (especially important for PWAs/background tabs).
+   */
+  _setupNotificationHandlers() {
+    mcpClient.on("photon-notification", (notification) => {
+      const { photon, type, priority } = notification;
+      if (!photon || !type) return;
+      const sidebarElement = this.querySelector("beam-sidebar");
+      if (sidebarElement && sidebarElement.isNotificationWatched) {
+        const isWatched = sidebarElement.isNotificationWatched(photon, type);
+        if (isWatched) {
+          window.focus();
+          console.log(`\u{1F4E1} Window focused for ${photon} notification: ${type}`);
+          sidebarElement.updatePhotonWarmth?.(photon);
+        }
+      }
+    });
+  }
+  /**
+   * Set up the PWA manifest & icons for the currently selected photon.
+   * Called whenever the selected photon changes. The manifest points to
+   * /api/pwa/icon-png URLs which the service worker intercepts and renders
+   * as real PNGs via OffscreenCanvas — no client-side blob URL needed.
+   */
+  _setupPWAManifest(photonName) {
+    let manifestLink = document.head.querySelector('link[rel="manifest"]');
+    if (!manifestLink) {
+      manifestLink = document.createElement("link");
+      manifestLink.rel = "manifest";
+      document.head.appendChild(manifestLink);
+    }
+    manifestLink.href = `/api/pwa/manifest.json?photon=${encodeURIComponent(photonName)}`;
+    let appleIcon = document.head.querySelector('link[rel="apple-touch-icon"]');
+    if (!appleIcon) {
+      appleIcon = document.createElement("link");
+      appleIcon.rel = "apple-touch-icon";
+      document.head.appendChild(appleIcon);
+    }
+    appleIcon.href = `/api/pwa/icon?photon=${encodeURIComponent(photonName)}`;
+    let appleTitleMeta = document.head.querySelector(
+      'meta[name="apple-mobile-web-app-title"]'
+    );
+    if (!appleTitleMeta) {
+      appleTitleMeta = document.createElement("meta");
+      appleTitleMeta.name = "apple-mobile-web-app-title";
+      document.head.appendChild(appleTitleMeta);
+    }
+    appleTitleMeta.content = photonName;
+    this._prewarmIconCache(photonName);
+    this._log("info", `PWA manifest set for "${photonName}"`, true);
+  }
+  /**
+   * Pre-warm the service worker icon cache by fetching the PNG icon URLs.
+   * This ensures the rendered emoji icons are cached before the user
+   * attempts to install the PWA, improving the install dialog appearance.
+   */
+  _prewarmIconCache(photonName) {
+    const sizes = [192, 512];
+    sizes.forEach((size) => {
+      const url2 = `/api/pwa/icon-png?photon=${encodeURIComponent(photonName)}&size=${size}`;
+      fetch(url2, { mode: "no-cors" }).catch(() => {
+      });
+    });
+  }
   async _connectMCP() {
     try {
       mcpClient.on("connect", () => {
@@ -19451,12 +20360,24 @@ var BeamApp = class extends i4 {
           }
           this._initialConnectDone = true;
           void this._checkForUpdates();
-          if (window.location.hash) {
-            void this._handleHashChange();
+          if (window.location.pathname !== "/") {
+            void this._handleRouteChange();
           } else if (!this._selectedPhoton && this._photons.length > 0) {
             const firstUserPhoton = this._photons.find((p5) => !p5.internal);
-            if (firstUserPhoton) this._selectedPhoton = firstUserPhoton;
-            this._updateHash(true);
+            if (firstUserPhoton) {
+              this._selectedPhoton = firstUserPhoton;
+              if (firstUserPhoton.isApp && firstUserPhoton.appEntry) {
+                if (this._willAutoInvoke(firstUserPhoton.appEntry)) {
+                  this._isExecuting = true;
+                }
+                this._selectedMethod = firstUserPhoton.appEntry;
+                this._view = "form";
+                this._maybeAutoInvoke(firstUserPhoton.appEntry);
+              } else {
+                this._view = "list";
+              }
+            }
+            this._updateRoute(true);
           }
         })();
       });
@@ -19475,15 +20396,37 @@ var BeamApp = class extends i4 {
           this._photons = photons;
           this._externalMCPs = externalMCPs;
           this._addUnconfiguredPhotons();
-          if (!this._selectedPhoton && window.location.hash !== "#home") {
-            const newUserPhoton = this._photons.find(
-              (p5) => !p5.internal && p5.configured && !prevNames.has(p5.name)
-            );
-            if (newUserPhoton) {
-              this._selectedPhoton = newUserPhoton;
-              this._welcomePhase = "welcome";
-              this._view = "list";
-              this._updateHash(true);
+          if (this._selectedPhoton) {
+            const updated = this._photons.find((p5) => p5.name === this._selectedPhoton?.name);
+            if (updated) {
+              const wasApp = this._selectedPhoton.isApp;
+              this._selectedPhoton = updated;
+              if (!wasApp && updated.isApp && updated.appEntry && this._view === "list") {
+                if (this._willAutoInvoke(updated.appEntry)) {
+                  this._isExecuting = true;
+                }
+                this._selectedMethod = updated.appEntry;
+                this._view = "form";
+                this._updateRoute(true);
+                this._maybeAutoInvoke(updated.appEntry);
+              }
+            }
+          }
+          if (!this._selectedPhoton && window.location.pathname !== "/") {
+            const pathPhotonName = window.location.pathname.slice(1).split("/")[0];
+            const routePhoton = pathPhotonName ? this._photons.find((p5) => p5.name === pathPhotonName) : null;
+            if (routePhoton) {
+              void this._handleRouteChange();
+            } else {
+              const newUserPhoton = this._photons.find(
+                (p5) => !p5.internal && p5.configured && !prevNames.has(p5.name)
+              );
+              if (newUserPhoton) {
+                this._selectedPhoton = newUserPhoton;
+                this._welcomePhase = "welcome";
+                this._view = "list";
+                this._updateRoute(true);
+              }
             }
           }
         })();
@@ -19547,7 +20490,7 @@ var BeamApp = class extends i4 {
               this._selectedPhoton = updated;
             }
           } else {
-            if (window.location.hash === "#home") return;
+            if (window.location.pathname === "/") return;
             const newUserPhoton = this._photons.find(
               (p5) => !p5.internal && p5.configured && !prevNames.has(p5.name)
             );
@@ -19576,7 +20519,7 @@ var BeamApp = class extends i4 {
               } else {
                 this._view = "list";
               }
-              this._updateHash(true);
+              this._updateRoute(true);
             }
           }
         }
@@ -19628,7 +20571,7 @@ var BeamApp = class extends i4 {
             } else {
               this._view = "list";
             }
-            this._updateHash(true);
+            this._updateRoute(true);
           }
         }
       });
@@ -19739,20 +20682,27 @@ var BeamApp = class extends i4 {
       }
     }
   }
-  _updateHash(replace2 = false) {
-    let hash2;
+  _updateRoute(replace2 = false) {
+    let path;
     if (!this._selectedPhoton) {
-      hash2 = "home";
+      path = "/";
     } else {
-      hash2 = this._selectedPhoton.name;
+      path = "/" + this._selectedPhoton.name;
       if (this._selectedMethod) {
-        hash2 += `/${this._selectedMethod.name}`;
+        path += `/${this._selectedMethod.name}`;
+        for (const panel of this._splitPanels) {
+          if (panel.type === "method" && panel.method) {
+            path += `+${panel.method.name}`;
+          } else if (panel.type === "source") {
+            path += `+source`;
+          }
+        }
       }
     }
     if (replace2) {
-      history.replaceState(null, "", `#${hash2}`);
+      history.replaceState(null, "", path);
     } else {
-      history.pushState(null, "", `#${hash2}`);
+      history.pushState(null, "", path);
     }
   }
   /**
@@ -19803,6 +20753,21 @@ var BeamApp = class extends i4 {
     if (!this._selectedPhoton?.methods) return [];
     return this._selectedPhoton.methods.filter((m3) => m3.name.startsWith("test_") || m3.name.startsWith("test")).map((m3) => m3.name);
   }
+  /** Fetch all tests (external .test.ts + inline) from the server */
+  async _fetchTestList(photonName) {
+    try {
+      const res = await fetch(`/api/test/list?photon=${encodeURIComponent(photonName)}`, {
+        signal: AbortSignal.timeout(5e3)
+      });
+      if (!res.ok) return this._getTestMethods();
+      const data = await res.json();
+      if (data.tests && data.tests.length > 0) {
+        return data.tests.map((t8) => t8.name);
+      }
+    } catch {
+    }
+    return this._getTestMethods();
+  }
   _getAllTestMethods() {
     const results = [];
     for (const p5 of this._photons) {
@@ -20126,7 +21091,7 @@ var BeamApp = class extends i4 {
     }}
           @diagnostics=${() => {
       this._view = "diagnostics";
-      this._updateHash();
+      this._updateRoute();
     }}
           @open-studio=${(e8) => {
       const photon = this._photons.find((p5) => p5.name === e8.detail.photonName);
@@ -20146,7 +21111,39 @@ var BeamApp = class extends i4 {
         ></beam-sidebar>
       </nav>
 
-      <main class="main-area" id="main-content" tabindex="-1" aria-label="Main content">
+      <main
+        class="main-area"
+        id="main-content"
+        tabindex="-1"
+        aria-label="Main content"
+        style="${this._splitViewEnabled ? "overflow: hidden !important;" : ""}"
+      >
+        ${this._selectedPhoton && this._selectedMethod ? b2`<button
+              class="beam-back-btn"
+              @click=${() => this._handleBackFromMethod()}
+              @mouseenter=${(e8) => {
+      e8.target.style.color = "var(--t-primary)";
+      e8.target.style.borderColor = "var(--accent-primary)";
+    }}
+              @mouseleave=${(e8) => {
+      e8.target.style.color = "var(--t-muted)";
+      e8.target.style.borderColor = "var(--border-glass)";
+    }}
+              title="Back to ${this._selectedPhoton.name}"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+            </button>` : ""}
         ${this._selectedPhoton ? b2`<button
               class="beam-fullscreen-btn"
               @click=${this._toggleFocusMode}
@@ -20582,7 +21579,7 @@ var BeamApp = class extends i4 {
       }}
                   @click=${() => {
         this._view = "diagnostics";
-        this._updateHash();
+        this._updateRoute();
       }}
                 >
                   <span style="font-size: 1rem; width: 20px; text-align: center;">🔍</span>
@@ -20791,7 +21788,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                         @select=${(e8) => {
           this._selectedMethod = e8.detail.method;
           this._view = "form";
-          this._updateHash();
+          this._updateRoute();
         }}
                       ></method-card>
                     `
@@ -20808,7 +21805,7 @@ ${photon.errorMessage || "Unknown error"}</pre
       if (this._selectedMethod.linkedUi) {
         const isAppMain = this._selectedPhoton.isApp && this._selectedMethod.name === "main";
         const otherMethods = isAppMain ? this._getVisibleMethods().filter((m3) => m3.name !== "main") : [];
-        const isExternalMCP2 = this._selectedPhoton.isExternalMCP;
+        const isExternalMCP = this._selectedPhoton.isExternalMCP;
         const appRenderer = this._isExecuting ? b2`
               <div
                 style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: calc(100vh - 140px);"
@@ -20818,7 +21815,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                   ${this._progress?.message || "Starting up\u2026"}
                 </span>
               </div>
-            ` : isExternalMCP2 ? b2`
+            ` : isExternalMCP ? b2`
                 <mcp-app-renderer
                   .mcpName=${this._selectedPhoton.name}
                   .appUri=${`ui://${this._selectedPhoton.name}/${this._selectedMethod.linkedUi}`}
@@ -20837,7 +21834,48 @@ ${photon.errorMessage || "Unknown error"}</pre
                 ></custom-ui-renderer>
               `;
         if (isAppMain) {
+          if (this._splitPanels.length > 0) {
+            return b2`
+              <div style="display: flex; gap: 1px; height: calc(100vh - 60px); overflow: hidden;">
+                <!-- App Panel (primary) — no title bar, app has its own chrome -->
+                <div style="flex: 1; min-height: 0; overflow: hidden;">${appRenderer}</div>
+
+                <!-- Additional Panels -->
+                ${this._splitPanels.map(
+              (panel) => b2`
+                    <div style="flex: 1; min-height: 0; background: var(--bg-panel);">
+                      ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
+                    </div>
+                  `
+            )}
+              </div>
+            `;
+          }
           return b2`
+            <!-- Floating add-panel button for app view — sits next to focus button -->
+            <div
+              style="position: sticky; top: calc(-1 * var(--space-lg)); float: right; z-index: 100; margin-top: calc(-1 * var(--space-lg)); margin-right: 6px;"
+            >
+              <button
+                @click=${() => {
+            this._methodPickerOpen = !this._methodPickerOpen;
+            this._methodPickerPanelId = null;
+          }}
+                style="width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--t-muted); cursor: pointer; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; backdrop-filter: blur(8px);"
+                @mouseenter=${(e8) => {
+            e8.target.style.color = "var(--accent-secondary)";
+            e8.target.style.borderColor = "var(--accent-secondary)";
+          }}
+                @mouseleave=${(e8) => {
+            e8.target.style.color = "var(--t-muted)";
+            e8.target.style.borderColor = "var(--border-glass)";
+          }}
+                title="Add panel"
+              >
+                +
+              </button>
+              ${this._methodPickerOpen && this._methodPickerPanelId === null ? this._renderMethodPickerPopover() : ""}
+            </div>
             <app-layout
               .photonName=${this._selectedPhoton.name}
               .photonIcon=${this._selectedPhoton.appEntry?.icon || "\u{1F4F1}"}
@@ -20880,61 +21918,72 @@ ${photon.errorMessage || "Unknown error"}</pre
             </app-layout>
           `;
         }
+        if (this._splitPanels.length > 0) {
+          return b2`
+            <div style="display: flex; gap: 1px; height: calc(100vh - 60px); overflow: hidden;">
+              <!-- Linked UI Panel (primary) -->
+              <div
+                style="flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative;"
+              >
+                <div
+                  style="display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border-glass); background: var(--bg-glass); flex-shrink: 0;"
+                >
+                  <span style="font-size: 12px; font-weight: 500; color: var(--t-primary);"
+                    >${this._selectedMethod.name}</span
+                  >
+                  <div style="position: relative; flex-shrink: 0;">
+                    <button
+                      @click=${() => {
+            this._methodPickerOpen = !this._methodPickerOpen;
+            this._methodPickerPanelId = null;
+          }}
+                      style="padding: 4px 8px; background: none; color: var(--accent-secondary); border: 1px solid var(--accent-secondary); border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 700; transition: all 0.2s ease;"
+                      title="Add panel"
+                    >
+                      +
+                    </button>
+                    ${this._methodPickerOpen && this._methodPickerPanelId === null ? this._renderMethodPickerPopover() : ""}
+                  </div>
+                </div>
+                <div style="flex: 1; min-height: 0; overflow: hidden;">${appRenderer}</div>
+              </div>
+
+              <!-- Additional Panels -->
+              ${this._splitPanels.map(
+            (panel) => b2`
+                  <div style="flex: 1; min-height: 0; background: var(--bg-panel);">
+                    ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
+                  </div>
+                `
+          )}
+            </div>
+          `;
+        }
         return b2`
-          <context-bar
-            .photon=${this._selectedPhoton}
-            .breadcrumbs=${[
-          {
-            label: this._currentInstance !== "default" ? `${this._selectedPhoton.name}:${this._currentInstance}` : this._selectedPhoton.name,
-            action: "back"
-          },
-          { label: formatLabel(this._selectedMethod.name) }
-        ]}
-            .live=${this._currentCollectionName !== null}
-            .showEdit=${false}
-            .showConfigure=${false}
-            .showCopyConfig=${false}
-            .overflowItems=${[]}
-            .instanceSelectorMode=${this._instanceSelectorMode}
-            .autoInstance=${this._autoInstance}
-            @context-action=${this._handleContextAction}
-          ></context-bar>
-          <div
-            class="glass-panel"
-            style="padding: 0; overflow: hidden; min-height: calc(100vh - 80px); margin-top: var(--space-md);"
-          >
-            ${appRenderer}
+          <div style="position: relative;">
+            <div style="position: absolute; top: 16px; right: 16px; z-index: 50;">
+              <button
+                @click=${() => {
+          this._methodPickerOpen = !this._methodPickerOpen;
+          this._methodPickerPanelId = null;
+        }}
+                style="padding: 4px 8px; background: var(--bg-glass); color: var(--accent-secondary); border: 1px solid var(--accent-secondary); border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 700; transition: all 0.2s ease; backdrop-filter: blur(8px);"
+                title="Add panel"
+              >
+                +
+              </button>
+              ${this._methodPickerOpen && this._methodPickerPanelId === null ? this._renderMethodPickerPopover() : ""}
+            </div>
+            <div
+              class="glass-panel"
+              style="padding: 0; overflow: hidden; min-height: calc(100vh - 80px); margin-top: var(--space-md);"
+            >
+              ${appRenderer}
+            </div>
           </div>
         `;
       }
-      const isExternalMCP = this._selectedPhoton.isExternalMCP;
-      return b2`
-        <context-bar
-          .photon=${this._selectedPhoton}
-          .breadcrumbs=${[
-        {
-          label: this._currentInstance !== "default" ? `${this._selectedPhoton.name}:${this._currentInstance}` : this._selectedPhoton.name,
-          action: "back"
-        },
-        { label: formatLabel(this._selectedMethod.name) }
-      ]}
-          .live=${this._currentCollectionName !== null}
-          .showEdit=${false}
-          .showConfigure=${false}
-          .showCopyConfig=${false}
-          .overflowItems=${this._buildOverflowItems({
-        showRefresh: !isExternalMCP,
-        showRename: false,
-        showViewSource: false,
-        showDelete: false,
-        showHelp: !isExternalMCP
-      })}
-          .instanceSelectorMode=${this._instanceSelectorMode}
-          .autoInstance=${this._autoInstance}
-          @context-action=${this._handleContextAction}
-        ></context-bar>
-        ${this._renderMethodContent()}
-      `;
+      return b2` ${this._renderMethodContent()} `;
     }
     return b2`
       ${this._renderPhotonToolbar()} ${this._editingIcon ? this._renderEmojiPicker() : ""}
@@ -21062,6 +22111,7 @@ ${photon.errorMessage || "Unknown error"}</pre
     }
   }
   async _handlePhotonSelect(e8) {
+    this._closeSecondPanel();
     this._selectedPhoton = e8.detail.photon;
     this._selectedMethod = null;
     this._lastResult = null;
@@ -21069,12 +22119,12 @@ ${photon.errorMessage || "Unknown error"}</pre
     this._currentInstance = "default";
     if (this._selectedPhoton.configured === false) {
       this._view = "config";
-      this._updateHash();
+      this._updateRoute();
       return;
     }
     if (this._selectedPhoton.isExternalMCP && this._selectedPhoton.hasMcpApp) {
       this._view = "mcp-app";
-      this._updateHash();
+      this._updateRoute();
       return;
     }
     if (this._selectedPhoton.stateful && this._selectedPhoton.configured) {
@@ -21101,13 +22151,13 @@ ${photon.errorMessage || "Unknown error"}</pre
       }
       this._selectedMethod = this._selectedPhoton.appEntry;
       this._view = "form";
-      this._updateHash();
+      this._updateRoute();
       this._maybeAutoInvoke(this._selectedPhoton.appEntry);
       return;
     } else {
       this._view = "list";
     }
-    this._updateHash();
+    this._updateRoute();
   }
   /** Fetch available instances for a stateful photon from the server */
   async _fetchInstances(photonName) {
@@ -21150,7 +22200,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   /**
    * Trigger instance switch via MCP elicitation (calls _use without name).
    * The transport layer shows an elicitation modal with available instances.
-   * After _use succeeds, the transport broadcasts photon/state-changed which
+   * After _use succeeds, the transport broadcasts state-changed which
    * triggers _silentRefresh() to update the result and notifies custom UIs.
    */
   async _switchInstance() {
@@ -21186,7 +22236,7 @@ ${photon.errorMessage || "Unknown error"}</pre
     this._selectedMethod = e8.detail.method;
     this._lastResult = null;
     this._view = "form";
-    this._updateHash();
+    this._updateRoute();
     this._maybeAutoInvoke(e8.detail.method);
   }
   /**
@@ -21248,57 +22298,507 @@ ${photon.errorMessage || "Unknown error"}</pre
         </div>
       `;
     }
+    if (this._splitPanels.length > 0) {
+      return b2`
+        <div style="display: flex; gap: 1px; height: 100%; overflow: hidden;">
+          <!-- Primary Panel -->
+          <div style="flex: 1; min-height: 0; background: var(--bg-panel);">
+            ${this._renderSinglePanel({
+        photon: this._selectedPhoton,
+        method: this._selectedMethod,
+        result: this._lastResult,
+        executing: this._isExecuting,
+        progress: this._progress,
+        formParams: this._lastFormParams,
+        onSubmit: (e8) => void this._handleExecute(e8),
+        onCancel: () => this._handleBackFromMethod(),
+        panelLabel: "Primary",
+        instance: this._currentInstance,
+        instances: this._instances,
+        onInstanceChange: (instance) => this._handleLeftPanelInstanceChange(instance),
+        allMethods: this._selectedPhoton?.methods || [],
+        onMethodChange: (method) => this._handleLeftPanelMethodChange(method),
+        panelSide: "primary",
+        onPanelAction: (action) => this._handlePrimaryPanelAction(action),
+        onInstanceAction: (detail) => void this._handleInstanceAction(detail),
+        isStateful: !!this._selectedPhoton?.stateful,
+        isLive: this._currentCollectionName !== null,
+        overflowItems: this._buildOverflowItems({
+          showRefresh: !this._selectedPhoton?.isExternalMCP,
+          showRename: false,
+          showViewSource: false,
+          showDelete: false,
+          showHelp: !this._selectedPhoton?.isExternalMCP
+        }),
+        onOverflowSelect: (id2) => this._handleOverflowAction(id2)
+      })}
+          </div>
+
+          <!-- Additional Panels -->
+          ${this._splitPanels.map(
+        (panel) => b2`
+              <div style="flex: 1; min-height: 0; background: var(--bg-panel);">
+                ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
+              </div>
+            `
+      )}
+        </div>
+      `;
+    }
+    return this._renderSinglePanel({
+      photon: this._selectedPhoton,
+      method: this._selectedMethod,
+      result: this._lastResult,
+      executing: this._isExecuting,
+      progress: this._progress,
+      formParams: this._lastFormParams,
+      onSubmit: (e8) => void this._handleExecute(e8),
+      onCancel: () => this._handleBackFromMethod(),
+      panelLabel: "Primary",
+      instance: this._currentInstance,
+      instances: this._instances,
+      allMethods: this._selectedPhoton?.methods || [],
+      onMethodChange: (method) => {
+        this._selectedMethod = method;
+        this._lastResult = null;
+        this._lastFormParams = {};
+        if (this._willAutoInvoke(method)) {
+          void this._handleExecute(new CustomEvent("execute", { detail: { args: {} } }));
+        }
+        this._updateRoute();
+      },
+      panelSide: "primary",
+      onPanelAction: (action) => this._handlePrimaryPanelAction(action),
+      onInstanceAction: (detail) => void this._handleInstanceAction(detail),
+      isStateful: !!this._selectedPhoton?.stateful,
+      isLive: this._currentCollectionName !== null,
+      overflowItems: this._buildOverflowItems({
+        showRefresh: !this._selectedPhoton?.isExternalMCP,
+        showRename: false,
+        showViewSource: false,
+        showDelete: false,
+        showHelp: !this._selectedPhoton?.isExternalMCP
+      }),
+      onOverflowSelect: (id2) => this._handleOverflowAction(id2)
+    });
+  }
+  /** Render a single panel with self-contained header */
+  _renderSinglePanel(opts) {
+    const isSplit = this._splitPanels.length > 0;
     return b2`
-      <div class="glass-panel method-detail">
-        <h2>${formatLabel(this._selectedMethod.name)}</h2>
-        ${this._renderDescription(this._selectedMethod.description)}
-        <invoke-form
-          .params=${this._selectedMethod.params}
-          .loading=${this._isExecuting}
-          .photonName=${this._selectedPhoton.name}
-          .methodName=${this._selectedMethod.name}
-          .rememberValues=${this._rememberFormValues}
-          .sharedValues=${this._sharedFormParams}
-          @submit=${(e8) => {
-      void this._handleExecute(e8);
+      <div
+        class="glass-panel method-detail"
+        style="${isSplit ? "border-radius: 0; height: 100%;" : ""} display: flex; flex-direction: column;"
+      >
+        <!-- Panel Header: LED + Method ▼ + instance-panel + [+] + [⋯] + [×] -->
+        <div
+          style="display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-glass); flex-shrink: 0; position: relative;"
+        >
+          <!-- LED dot (stateful/live indicator) -->
+          ${opts.isStateful ? b2`<span
+                style="width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: ${opts.isLive ? "var(--color-success, #22c55e)" : "var(--t-tertiary, #666)"}; box-shadow: ${opts.isLive ? "0 0 6px var(--color-success, #22c55e)" : "none"};"
+                title="${opts.isLive ? "Live \u2014 stateful photon with active subscription" : "Stateful photon"}"
+              ></span>` : ""}
+
+          <!-- Method Selector (name as dropdown) -->
+          <select
+            .value=${opts.method.name}
+            @change=${(e8) => {
+      const methodName = e8.target.value;
+      const method = opts.allMethods?.find((m3) => m3.name === methodName);
+      if (method && opts.onMethodChange) {
+        opts.onMethodChange(method);
+      }
     }}
-          @cancel=${() => this._handleBackFromMethod()}
-        ></invoke-form>
+            style="padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border-glass); background: var(--bg-glass); color: var(--t-primary); font-size: 13px; font-weight: 600; flex-shrink: 0;"
+          >
+            ${opts.allMethods?.map(
+      (m3) => b2`<option .selected=${m3.name === opts.method.name} value=${m3.name}>
+                  ${m3.name}
+                </option>`
+    ) || b2`<option value=${opts.method.name}>${opts.method.name}</option>`}
+          </select>
 
-        ${this._progress ? b2`
-              <div class="progress-container">
-                <div class="progress-bar-wrapper">
-                  <div
-                    class="progress-bar ${this._progress.value < 0 ? "indeterminate" : ""}"
-                    style="width: ${this._progress.value < 0 ? "30%" : Math.round(this._progress.value * 100) + "%"}"
-                  ></div>
+          <div style="flex: 1;"></div>
+
+          <!-- Rich Instance Selector -->
+          ${opts.isStateful && opts.instances && opts.instances.length > 0 && opts.onInstanceAction ? b2`
+                <instance-panel
+                  .instanceName=${opts.instance || "default"}
+                  .instances=${opts.instances}
+                  .photonName=${opts.photon.name}
+                  .selectorMode=${this._instanceSelectorMode}
+                  .autoInstance=${this._autoInstance}
+                  @instance-action=${(e8) => opts.onInstanceAction?.(e8.detail)}
+                ></instance-panel>
+              ` : ""}
+
+          <!-- Add panel button (primary only) -->
+          ${opts.panelSide === "primary" ? b2`
+                <div style="position: relative; flex-shrink: 0;">
+                  <button
+                    @click=${() => opts.onPanelAction?.("toggle-picker")}
+                    style="padding: 4px 8px; background: none; color: var(--accent-secondary); border: 1px solid var(--accent-secondary); border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 700; transition: all 0.2s ease;"
+                    title="Add panel"
+                  >
+                    +
+                  </button>
+                  ${this._methodPickerOpen && this._methodPickerPanelId === null ? this._renderMethodPickerPopover() : ""}
                 </div>
-                <div class="progress-text">
-                  <span>${this._progress.message}</span>
-                  ${this._progress.value >= 0 ? b2`
-                        <span class="progress-percentage"
-                          >${Math.round(this._progress.value * 100)}%</span
-                        >
-                      ` : ""}
+              ` : ""}
+
+          <!-- Overflow menu -->
+          ${opts.overflowItems && opts.overflowItems.length > 0 ? b2`
+                <overflow-menu
+                  .items=${opts.overflowItems}
+                  @menu-select=${(e8) => opts.onOverflowSelect?.(e8.detail.id)}
+                ></overflow-menu>
+              ` : ""}
+
+          <!-- Close button (additional panels only) -->
+          ${opts.panelSide === "additional" ? b2`
+                <button
+                  @click=${() => opts.onPanelAction?.("close")}
+                  style="padding: 4px 8px; background: none; color: var(--color-error); border: 1px solid var(--color-error); border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 700; flex-shrink: 0; transition: all 0.2s ease;"
+                  title="Close panel"
+                >
+                  ×
+                </button>
+              ` : ""}
+        </div>
+        <!-- Panel Content (scrollable) -->
+        <div
+          style="display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;"
+        >
+          ${this._renderDescription(opts.method.description)}
+          <invoke-form
+            .params=${opts.method.params}
+            .loading=${opts.executing}
+            .photonName=${opts.photon.name}
+            .methodName=${opts.method.name}
+            .rememberValues=${this._rememberFormValues}
+            .sharedValues=${opts.formParams}
+            @submit=${opts.onSubmit}
+            @cancel=${opts.onCancel}
+          ></invoke-form>
+
+          ${opts.progress ? b2`
+                <div class="progress-container">
+                  <div class="progress-bar-wrapper">
+                    <div
+                      class="progress-bar ${opts.progress.value < 0 ? "indeterminate" : ""}"
+                      style="width: ${opts.progress.value < 0 ? "30%" : Math.round(opts.progress.value * 100) + "%"}"
+                    ></div>
+                  </div>
+                  <div class="progress-text">
+                    <span>${opts.progress.message}</span>
+                  </div>
+                </div>
+              ` : ""}
+          ${opts.result !== null ? b2`
+                <result-viewer
+                  .result=${opts.result}
+                  .outputFormat=${opts.method?.outputFormat}
+                  .layoutHints=${opts.method?.layoutHints}
+                  .theme=${this._theme}
+                  .live=${this._currentCollectionName !== null}
+                  .resultKey=${opts.photon && opts.method ? `${opts.photon.name}/${opts.method.name}` : void 0}
+                  @share=${() => this._handleShareResult()}
+                ></result-viewer>
+              ` : b2`
+                <div class="empty-state-inline result-empty">
+                  <span class="empty-state-icon">${play}</span>
+                  <span>Run the method to see results here</span>
+                </div>
+              `}
+        </div>
+      </div>
+    `;
+  }
+  /** Close all split panels and return to single-panel mode */
+  _closeSecondPanel() {
+    this._splitPanels = [];
+    this._methodPickerOpen = false;
+    this._methodPickerPanelId = null;
+    this._updateRoute();
+  }
+  /** Handle instance change for primary panel */
+  _handleLeftPanelInstanceChange(instance) {
+    this._currentInstance = instance;
+    sessionStorage.setItem(`photon-instance:${this._selectedPhoton.name}`, instance);
+    this._lastResult = null;
+  }
+  /** Add a new split panel */
+  _addPanel(type, method) {
+    if (this._splitPanels.length >= 2) return;
+    const panel = {
+      id: `panel-${++this._nextPanelId}`,
+      type,
+      method,
+      result: null,
+      executing: false,
+      progress: null,
+      formParams: {},
+      instance: this._currentInstance || "default"
+    };
+    this._splitPanels = [...this._splitPanels, panel];
+    if (type === "method" && method && this._willAutoInvoke(method)) {
+      void this._executePanelMethod(panel.id, {});
+    }
+    this._methodPickerOpen = false;
+    this._methodPickerPanelId = null;
+    this._cleanupPickerDismiss();
+    this._updateRoute();
+  }
+  /** Remove a split panel by id */
+  _removePanel(panelId) {
+    this._splitPanels = this._splitPanels.filter((p5) => p5.id !== panelId);
+    this._updateRoute();
+  }
+  /** Update a split panel's state */
+  _updatePanel(panelId, updates) {
+    this._splitPanels = this._splitPanels.map((p5) => p5.id === panelId ? { ...p5, ...updates } : p5);
+  }
+  /** Execute a method in a split panel */
+  async _executePanelMethod(panelId, args) {
+    const panel = this._splitPanels.find((p5) => p5.id === panelId);
+    if (!panel || panel.type !== "method" || !panel.method) return;
+    this._updatePanel(panelId, { executing: true, result: null, progress: null, formParams: args });
+    try {
+      const toolName = `${this._selectedPhoton.name}/${panel.method.name}`;
+      const result = await mcpClient.callTool(
+        toolName,
+        args,
+        void 0,
+        panel.instance || this._currentInstance,
+        (progress) => {
+          this._updatePanel(panelId, { progress });
+        }
+      );
+      this._updatePanel(panelId, {
+        result: mcpClient.parseToolResult(result),
+        executing: false,
+        progress: null
+      });
+    } catch (error2) {
+      showToast(`Error: ${error2.message}`, { type: "error" });
+      this._updatePanel(panelId, {
+        result: { error: error2.message },
+        executing: false,
+        progress: null
+      });
+    }
+  }
+  /** Change the method in a split panel */
+  _changePanelMethod(panelId, method) {
+    this._updatePanel(panelId, { method, result: null, formParams: {} });
+    if (this._willAutoInvoke(method)) {
+      void this._executePanelMethod(panelId, {});
+    }
+    this._updateRoute();
+  }
+  /** Change the instance in a split panel */
+  _changePanelInstance(panelId, instance) {
+    this._updatePanel(panelId, { instance, result: null });
+  }
+  /** Open a method in a new split panel (backwards-compatible entry point) */
+  _openInSecondPanel(photon, method) {
+    this._addPanel("method", method);
+  }
+  /** Show method picker popover */
+  _showMethodPicker() {
+    this._methodPickerOpen = !this._methodPickerOpen;
+    this._methodPickerPanelId = null;
+  }
+  /** Clean up picker dismiss listener */
+  _cleanupPickerDismiss() {
+    if (this._pickerDismissHandler) {
+      window.removeEventListener("mousedown", this._pickerDismissHandler, true);
+      this._pickerDismissHandler = null;
+    }
+  }
+  /** Handle method change in primary panel */
+  _handleLeftPanelMethodChange(method) {
+    this._selectedMethod = method;
+    this._lastResult = null;
+    this._lastFormParams = {};
+    this._updateRoute();
+  }
+  /** Handle panel action for primary panel */
+  _handlePrimaryPanelAction(action) {
+    if (action === "toggle-picker") {
+      this._methodPickerOpen = !this._methodPickerOpen;
+      this._methodPickerPanelId = null;
+    }
+  }
+  /** Build opts for an additional (non-primary) split panel */
+  _buildAdditionalPanelOpts(panel) {
+    return {
+      photon: this._selectedPhoton,
+      method: panel.method,
+      result: panel.result,
+      executing: panel.executing || false,
+      progress: panel.progress,
+      formParams: panel.formParams || {},
+      onSubmit: (e8) => {
+        const args = e8.detail?.args || {};
+        void this._executePanelMethod(panel.id, args);
+      },
+      onCancel: () => this._removePanel(panel.id),
+      panelLabel: panel.id,
+      instance: panel.instance,
+      instances: this._instances,
+      onInstanceChange: (inst) => this._changePanelInstance(panel.id, inst),
+      allMethods: this._selectedPhoton?.methods || [],
+      onMethodChange: (m3) => this._changePanelMethod(panel.id, m3),
+      panelSide: "additional",
+      onPanelAction: (action) => {
+        if (action === "close") this._removePanel(panel.id);
+      },
+      onInstanceAction: (detail) => {
+        if (detail.action === "switch") {
+          this._changePanelInstance(panel.id, detail.instance);
+        }
+      },
+      isStateful: !!this._selectedPhoton?.stateful,
+      isLive: this._currentCollectionName !== null,
+      overflowItems: this._buildOverflowItems({
+        showRefresh: false,
+        showRename: false,
+        showViewSource: false,
+        showDelete: false,
+        showHelp: false,
+        showRunTests: false
+      }),
+      onOverflowSelect: (id2) => this._handleOverflowAction(id2)
+    };
+  }
+  /** Handle overflow menu actions from panel headers */
+  _handleOverflowAction(id2) {
+    switch (id2) {
+      case "refresh":
+        if (this._selectedMethod && this._willAutoInvoke(this._selectedMethod)) {
+          void this._handleExecute(new CustomEvent("execute", { detail: { args: {} } }));
+        }
+        break;
+      case "remember-values":
+        this._rememberFormValues = !this._rememberFormValues;
+        break;
+      case "verbose-logging":
+        this._verboseLogging = !this._verboseLogging;
+        break;
+      case "run-tests":
+        void this._runTests();
+        break;
+      case "help":
+        this._showPhotonHelp = true;
+        break;
+      default:
+        this._handleContextAction(new CustomEvent("context-action", { detail: { action: id2 } }));
+        break;
+    }
+  }
+  /** Render source panel for split view */
+  _renderSourcePanel(panelId) {
+    return b2`
+      <div style="height: 100%; overflow: hidden;">
+        <photon-studio
+          .photonName=${this._selectedPhoton?.name}
+          .theme=${this._theme}
+          @studio-saved=${() => this._handleStudioSaved?.()}
+          @studio-close=${() => this._removePanel(panelId)}
+        ></photon-studio>
+      </div>
+    `;
+  }
+  /** Render the method picker popover for adding new panels */
+  _renderMethodPickerPopover() {
+    const methods = this._getVisibleMethods();
+    const openMethodNames = /* @__PURE__ */ new Set();
+    if (this._selectedMethod) openMethodNames.add(this._selectedMethod.name);
+    for (const p5 of this._splitPanels) {
+      if (p5.type === "method" && p5.method) openMethodNames.add(p5.method.name);
+    }
+    const availableMethods = methods.filter((m3) => !openMethodNames.has(m3.name));
+    const hasSourcePanel = this._splitPanels.some((p5) => p5.type === "source");
+    const canAddMore = this._splitPanels.length < 2;
+    if (!canAddMore) return "";
+    if (!this._pickerDismissHandler) {
+      const handler = (e8) => {
+        const path = e8.composedPath();
+        const popover = this.renderRoot.querySelector(".method-picker-popover");
+        if (popover && path.includes(popover)) return;
+        this._methodPickerOpen = false;
+        this._pickerDismissHandler = null;
+        window.removeEventListener("mousedown", handler, true);
+      };
+      this._pickerDismissHandler = handler;
+      setTimeout(() => window.addEventListener("mousedown", handler, true), 0);
+    }
+    return b2`
+      <div
+        class="method-picker-popover"
+        @click=${(e8) => e8.stopPropagation()}
+        style="position: absolute; top: 100%; right: 0; z-index: 9999; min-width: 200px; max-height: 360px; overflow-y: auto; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); backdrop-filter: blur(20px); margin-top: 4px;"
+      >
+        <!-- Header -->
+        <div style="padding: 10px 12px 8px; border-bottom: 1px solid var(--border-glass);">
+          <div
+            style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-tertiary);"
+          >
+            Split Pane
+          </div>
+        </div>
+
+        <!-- Methods section -->
+        ${availableMethods.length > 0 ? b2`
+              <div style="padding: 4px 0;">
+                <div
+                  style="padding: 4px 12px 2px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-tertiary);"
+                >
+                  Methods
                 </div>
+                ${availableMethods.map(
+      (m3) => b2`
+                    <div
+                      @click=${() => this._addPanel("method", m3)}
+                      style="padding: 6px 12px 6px 16px; cursor: pointer; font-size: 12px; color: var(--t-primary); transition: background 0.15s ease; display: flex; align-items: center; gap: 6px;"
+                      @mouseenter=${(e8) => e8.target.style.background = "var(--bg-hover)"}
+                      @mouseleave=${(e8) => e8.target.style.background = "transparent"}
+                    >
+                      <span style="color: var(--t-tertiary); font-size: 10px;">&#9656;</span>
+                      ${m3.name}
+                    </div>
+                  `
+    )}
               </div>
-            ` : ""}
-        ${this._lastResult !== null ? b2`
-              <result-viewer
-                .result=${this._lastResult}
-                .outputFormat=${this._selectedMethod?.outputFormat}
-                .layoutHints=${this._selectedMethod?.layoutHints}
-                .theme=${this._theme}
-                .live=${this._currentCollectionName !== null}
-                .resultKey=${this._selectedPhoton && this._selectedMethod ? `${this._selectedPhoton.name}/${this._selectedMethod.name}` : void 0}
-                @share=${() => this._handleShareResult()}
-              ></result-viewer>
             ` : b2`
-              <div class="empty-state-inline result-empty">
-                <span class="empty-state-icon">${play}</span>
-                <span>Run the method to see results here</span>
+              <div
+                style="padding: 8px 12px; font-size: 11px; color: var(--t-tertiary); font-style: italic;"
+              >
+                All methods already open
               </div>
             `}
+
+        <!-- Tools section -->
+        ${!hasSourcePanel ? b2`
+              <div style="border-top: 1px solid var(--border-glass); padding: 4px 0;">
+                <div
+                  style="padding: 4px 12px 2px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-tertiary);"
+                >
+                  Tools
+                </div>
+                <div
+                  @click=${() => this._addPanel("source")}
+                  style="padding: 6px 12px 6px 16px; cursor: pointer; font-size: 12px; color: var(--t-primary); transition: background 0.15s ease; display: flex; align-items: center; gap: 6px;"
+                  @mouseenter=${(e8) => e8.target.style.background = "var(--bg-hover)"}
+                  @mouseleave=${(e8) => e8.target.style.background = "transparent"}
+                >
+                  <span style="font-size: 11px; color: var(--accent-primary);">&lt;/&gt;</span>
+                  Source Editor
+                </div>
+              </div>
+            ` : ""}
       </div>
     `;
   }
@@ -21327,10 +22827,11 @@ ${photon.errorMessage || "Unknown error"}</pre
     if (form?.isDirty && !confirm("You have unsaved changes. Discard them?")) {
       return;
     }
+    this._closeSecondPanel();
     if (this._selectedPhoton.isApp && this._selectedPhoton.appEntry) {
       this._selectedMethod = this._selectedPhoton.appEntry;
       this._view = "form";
-      this._updateHash(true);
+      this._updateRoute(true);
       void this.updateComplete.then(() => {
         setTimeout(() => {
           const mainArea = this.shadowRoot?.querySelector(".main-area");
@@ -21344,11 +22845,11 @@ ${photon.errorMessage || "Unknown error"}</pre
       this._selectedPhoton = null;
       this._welcomePhase = "welcome";
       this._view = "list";
-      this._updateHash(true);
+      this._updateRoute(true);
     } else {
       this._view = "list";
       this._selectedMethod = null;
-      this._updateHash(true);
+      this._updateRoute(true);
     }
   }
   async _openForkDialog() {
@@ -21422,7 +22923,17 @@ ${photon.errorMessage || "Unknown error"}</pre
           }
         } else {
           this._lastResult = mcpClient.parseToolResult(result);
+          if (this._selectedPhoton?.stateful && Array.isArray(this._lastResult) && this._selectedMethod) {
+            this._lastResult = this._autoWrapPaginationIfNeeded(
+              this._lastResult,
+              this._selectedPhoton.name,
+              this._selectedMethod
+            );
+          }
           this._log("success", "Execution completed", false, execDuration);
+          if (this._selectedPhoton?.stateful && this._lastResult != null && typeof this._lastResult === "object") {
+            this._initializeGlobalInstance(this._selectedPhoton.name, this._lastResult);
+          }
           void this.updateComplete.then(() => {
             const rv2 = this.shadowRoot?.querySelector("result-viewer");
             if (rv2 && window.innerWidth <= 768) {
@@ -21457,6 +22968,16 @@ ${photon.errorMessage || "Unknown error"}</pre
       const result = await mcpClient.callTool(toolName, this._lastFormParams || {});
       if (!result.isError) {
         this._lastResult = mcpClient.parseToolResult(result);
+        if (this._selectedPhoton.stateful && Array.isArray(this._lastResult) && this._selectedMethod) {
+          this._lastResult = this._autoWrapPaginationIfNeeded(
+            this._lastResult,
+            this._selectedPhoton.name,
+            this._selectedMethod
+          );
+        }
+        if (this._selectedPhoton.stateful && this._lastResult != null && typeof this._lastResult === "object") {
+          this._initializeGlobalInstance(this._selectedPhoton.name, this._lastResult);
+        }
       }
     } catch {
     } finally {
@@ -21507,6 +23028,162 @@ ${photon.errorMessage || "Unknown error"}</pre
     this._collectionUnsubscribes = [];
     this._currentCollectionName = null;
   }
+  /**
+   * Initialize global photon instance for @stateful photons
+   * Makes the photon instance available as window.{photonName}
+   * and keeps it in sync with server state via state-changed patches
+   * Wraps paginated array properties with ViewportAwareProxy for smart fetching
+   */
+  /**
+   * Auto-wrap array results with pagination metadata for @stateful photons
+   * If method has (start, limit) parameters, detect them and use global instance
+   * to calculate pagination metadata from the full array
+   */
+  _autoWrapPaginationIfNeeded(items, photonName, method) {
+    const hasStartLimitParams = method.parameters?.some(
+      (p5) => (p5.name === "start" || p5.name === "limit") && p5.required !== true
+    );
+    if (!hasStartLimitParams || items.length === 0) {
+      return items;
+    }
+    try {
+      const manager = getGlobalInstanceManager();
+      const instance = manager.getInstance(photonName);
+      if (!instance) {
+        return items;
+      }
+      const arrayProp = Object.keys(instance).find((key) => {
+        const value = instance[key];
+        return Array.isArray(value) && value.length > 0;
+      });
+      if (!arrayProp) {
+        return items;
+      }
+      const fullArray = instance[arrayProp];
+      const totalCount = fullArray.length;
+      const start = 0;
+      const end = items.length;
+      return {
+        items,
+        _pagination: {
+          totalCount,
+          start,
+          end,
+          hasMore: end < totalCount
+        }
+      };
+    } catch (error2) {
+      if (this._verboseLogging) {
+        const msg = error2 instanceof Error ? error2.message : "Unknown error";
+        this._log("warn", `Could not auto-wrap pagination: ${msg}`);
+      }
+      return items;
+    }
+  }
+  _initializeGlobalInstance(photonName, initialState) {
+    try {
+      const paginatedProps = this._detectPaginatedProperties(initialState);
+      const instance = initializeGlobalPhotonSession(photonName, initialState);
+      for (const [propName, paginationMeta] of Object.entries(paginatedProps)) {
+        this._wrapWithViewportProxy(instance, propName, paginationMeta);
+      }
+      if (this._verboseLogging) {
+        const message = paginatedProps.size > 0 ? `\u{1F4E1} Global instance initialized with ${paginatedProps.size} paginated array(s): window.${photonName.toLowerCase()}` : `\u{1F4E1} Global instance initialized: window.${photonName.toLowerCase()}`;
+        this._log("info", message);
+      }
+    } catch (error2) {
+      console.error("Failed to initialize global photon instance", error2);
+    }
+  }
+  /**
+   * Detect which properties have pagination metadata
+   */
+  _detectPaginatedProperties(initialState) {
+    const paginated = /* @__PURE__ */ new Map();
+    if (!initialState || typeof initialState !== "object") {
+      return paginated;
+    }
+    for (const [key, value] of Object.entries(initialState)) {
+      if (value && typeof value === "object" && value._pagination) {
+        paginated.set(key, value._pagination);
+      }
+    }
+    return paginated;
+  }
+  /**
+   * Wrap a property with ViewportAwareProxy for smart pagination
+   */
+  _wrapWithViewportProxy(instance, propertyName2, paginationMeta) {
+    try {
+      const pageSize = getPageSizeForClient();
+      const proxy = new ViewportAwareProxy(
+        this._selectedPhoton?.name || "unknown",
+        this._selectedMethod?.name || propertyName2,
+        mcpClient,
+        {
+          pageSize,
+          bufferSize: 5,
+          // Items to buffer above/below viewport
+          maxCacheSize: 500
+          // Max items to keep in cache
+        }
+      );
+      proxy.initializeWithResponse({
+        items: instance[propertyName2] || [],
+        _pagination: paginationMeta
+      });
+      instance.makeProperty(propertyName2);
+      Object.defineProperty(instance, propertyName2, {
+        configurable: true,
+        enumerable: true,
+        get: () => proxy.items,
+        set: (value) => {
+          proxy.clearCache();
+          proxy.initializeWithResponse({
+            items: value || [],
+            _pagination: paginationMeta
+          });
+        }
+      });
+      const patchHandler = (data) => {
+        if (data?.patches) {
+          proxy.applyPatches(data.patches);
+        }
+      };
+      instance.on("state-changed", patchHandler);
+      queueMicrotask(() => {
+        try {
+          const resultViewer = this._resultViewer;
+          if (resultViewer?.shadowRoot) {
+            const scrollContainer = resultViewer.shadowRoot.querySelector(
+              ".result-content"
+            );
+            if (scrollContainer) {
+              const manager = new ViewportManager(proxy, {
+                container: scrollContainer,
+                itemSelector: "[data-index]",
+                pageSize,
+                bufferSize: 5
+              });
+              manager.start();
+            }
+          }
+        } catch (error2) {
+          if (this._verboseLogging) {
+            this._log("warn", `Could not set up automatic viewport tracking for ${propertyName2}`);
+          }
+        }
+      });
+      if (this._verboseLogging) {
+        this._log(
+          "info",
+          `\u2728 Paginated proxy enabled for ${propertyName2} (page size: ${pageSize})`
+        );
+      }
+    } catch (error2) {
+      console.error(`Failed to wrap ${propertyName2} with ViewportAwareProxy`, error2);
+    }
+  }
   async _handleConfigure(e8) {
     const { photon, config: config3 } = e8.detail;
     this._log("info", `Configuring ${photon}...`);
@@ -21541,8 +23218,7 @@ ${photon.errorMessage || "Unknown error"}</pre
       showToast("No method selected to share", "error");
       return;
     }
-    const baseUrl = window.location.origin + window.location.pathname;
-    const hash2 = `${this._selectedPhoton.name}/${this._selectedMethod.name}`;
+    const pathSegment2 = `${this._selectedPhoton.name}/${this._selectedMethod.name}`;
     const params = new URLSearchParams();
     for (const [key, value] of Object.entries(this._lastFormParams)) {
       if (value !== void 0 && value !== null && value !== "") {
@@ -21553,7 +23229,7 @@ ${photon.errorMessage || "Unknown error"}</pre
         }
       }
     }
-    let shareUrl = `${baseUrl}#${hash2}`;
+    let shareUrl = `${window.location.origin}/${pathSegment2}`;
     if (params.toString()) {
       shareUrl += `?${params.toString()}`;
     }
@@ -21787,7 +23463,8 @@ ${photon.errorMessage || "Unknown error"}</pre
       showHelp = true,
       showRunTests = this._getTestMethods().length > 0,
       showRemove = false,
-      showFullscreen = false
+      showFullscreen = false,
+      showInstallApp = !this._pwaIsStandalone && !!this._selectedPhoton?.isApp
     } = opts;
     const items = [];
     if (showFullscreen) {
@@ -21833,6 +23510,13 @@ ${photon.errorMessage || "Unknown error"}</pre
       toggle: true,
       toggleActive: this._verboseLogging
     });
+    if (showInstallApp) {
+      items.push({
+        id: "install-app",
+        label: "Install as App",
+        iconSvg: iconSvgString(iconPaths.installApp)
+      });
+    }
     if (showRename || showViewSource || showFork || showContribute || showDelete || showRemove) {
       const first = [
         showRename,
@@ -22758,6 +24442,10 @@ BeamApp.styles = [
         display: none;
       }
 
+      :host(.focus-mode) .main-area {
+        padding: var(--space-sm);
+      }
+
       .main-area {
         flex: 1;
         position: relative;
@@ -22766,10 +24454,10 @@ BeamApp.styles = [
         padding: var(--space-lg);
       }
 
+      .beam-back-btn,
       .beam-fullscreen-btn {
         position: sticky;
         top: calc(-1 * var(--space-lg));
-        float: right;
         z-index: 100;
         width: 28px;
         height: 28px;
@@ -22783,6 +24471,18 @@ BeamApp.styles = [
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease;
+        backdrop-filter: blur(8px);
+      }
+
+      .beam-back-btn {
+        float: left;
+        margin-top: calc(-1 * var(--space-lg));
+        margin-left: calc(-1 * var(--space-lg) + 1px);
+        margin-bottom: calc(-28px + var(--space-lg));
+      }
+
+      .beam-fullscreen-btn {
+        float: right;
         margin-top: calc(-1 * var(--space-lg));
         margin-right: calc(-1 * var(--space-lg) + 1px);
         margin-bottom: calc(-28px + var(--space-lg));
@@ -23813,7 +25513,7 @@ BeamApp.styles = [
         min-width: 120px;
         font-family: var(--font-mono);
         font-size: var(--text-md);
-        color: hsl(45, 80%, 60%);
+        color: var(--color-warning);
       }
 
       .variable-input input {
@@ -24002,7 +25702,7 @@ BeamApp.styles = [
 
       .progress-bar-wrapper {
         height: 8px;
-        background: rgba(0, 0, 0, 0.2);
+        background: var(--bg-glass);
         border-radius: var(--radius-xs);
         overflow: hidden;
       }
@@ -24120,6 +25820,25 @@ BeamApp.styles = [
           padding-top: calc(var(--space-md) + 60px); /* Space for mobile menu button */
         }
 
+        .beam-back-btn,
+        .beam-fullscreen-btn {
+          position: fixed;
+          top: var(--space-md);
+          float: none;
+          margin: 0;
+          width: 44px;
+          height: 44px;
+          box-shadow: var(--shadow-md);
+        }
+
+        .beam-back-btn {
+          left: calc(var(--space-md) + 44px + var(--space-sm));
+        }
+
+        .beam-fullscreen-btn {
+          right: var(--space-md);
+        }
+
         .photon-header {
           flex-direction: column;
           align-items: flex-start;
@@ -24134,10 +25853,9 @@ BeamApp.styles = [
           grid-template-columns: 1fr;
         }
 
-        /* Touch-friendly targets - min 44px */
+        /* Touch-friendly targets - min 44px (exclude small inline buttons) */
         .asset-card,
         .method-card,
-        button,
         .filter-btn {
           min-height: 44px;
         }
@@ -24418,6 +26136,15 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_resourceContent", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_splitPanels", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_methodPickerOpen", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_methodPickerPanelId", 2);
 __decorateClass([
   e7("beam-sidebar")
 ], BeamApp.prototype, "_sidebar", 2);
@@ -24456,6 +26183,7 @@ var BeamSidebar = class extends i4 {
     this._favorites = /* @__PURE__ */ new Set();
     this._collapsedSections = /* @__PURE__ */ new Set();
     this._recentPhotons = [];
+    this._notificationWarmth = /* @__PURE__ */ new Map();
   }
   connectedCallback() {
     super.connectedCallback();
@@ -24826,7 +26554,7 @@ var BeamSidebar = class extends i4 {
     }
     return b2`
       <li
-        class="photon-item ${this.selectedPhoton === photon.name ? "active" : ""} ${photon.internal ? "internal" : ""}"
+        class="photon-item ${this.selectedPhoton === photon.name ? "active" : ""} ${photon.internal ? "internal" : ""} ${this._isPhotonWarm(photon.name) ? "warmth" : ""}"
         role="option"
         aria-selected="${this.selectedPhoton === photon.name}"
         tabindex="0"
@@ -25023,6 +26751,28 @@ ${photon.path}` : ""}"
       }
     });
   }
+  /**
+   * Check if a photon currently has a warmth indicator (notification received within last 5 seconds)
+   */
+  _isPhotonWarm(photonName) {
+    const lastNotificationTime = this._notificationWarmth.get(photonName);
+    if (!lastNotificationTime) return false;
+    return Date.now() - lastNotificationTime < 5e3;
+  }
+  /**
+   * Update the warmth indicator for a photon when a notification arrives
+   */
+  updatePhotonWarmth(photonName) {
+    this._notificationWarmth.set(photonName, Date.now());
+    this.requestUpdate();
+  }
+  /**
+   * Check if a notification type is watched by a photon
+   * This will be called by beam-app to determine if window.focus() should be triggered
+   */
+  isNotificationWatched(photonName, notificationType) {
+    return true;
+  }
 };
 BeamSidebar.styles = [
   theme,
@@ -25257,7 +27007,7 @@ BeamSidebar.styles = [
       }
 
       .section-header:hover {
-        color: var(--t-secondary);
+        color: var(--t-primary);
         background: var(--bg-panel);
       }
 
@@ -25319,7 +27069,7 @@ BeamSidebar.styles = [
       }
 
       .photon-item:hover {
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
       }
 
       .photon-item.active {
@@ -25333,13 +27083,28 @@ BeamSidebar.styles = [
 
       @keyframes flash-highlight {
         0% {
-          background: hsla(260, 100%, 65%, 0.2);
+          background: var(--glow-primary);
         }
         100% {
           background: transparent;
         }
       }
 
+      .photon-item.warmth {
+        animation: warmth-fade 5s ease-out forwards;
+      }
+
+      @keyframes warmth-fade {
+        0% {
+          background: var(--color-warning);
+          opacity: 0.15;
+        }
+        100% {
+          background: var(--color-warning);
+          opacity: 0;
+        }
+      }
+
       .photon-icon {
         width: 28px;
         height: 28px;
@@ -25430,7 +27195,7 @@ BeamSidebar.styles = [
         gap: 3px;
         font-size: var(--text-2xs);
         padding: 2px 5px;
-        background: rgba(255, 255, 255, 0.05);
+        background: var(--bg-glass);
         border: 1px solid var(--border-glass);
         border-radius: var(--radius-full);
         font-weight: 500;
@@ -25513,7 +27278,7 @@ BeamSidebar.styles = [
       .marketplace-btn:hover {
         background: var(--bg-panel);
         border-color: var(--accent-secondary);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--shadow-sm);
         transform: translateY(-1px);
       }
 
@@ -25745,6 +27510,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_recentPhotons", 2);
+__decorateClass([
+  r5()
+], BeamSidebar.prototype, "_notificationWarmth", 2);
 BeamSidebar = __decorateClass([
   t4("beam-sidebar")
 ], BeamSidebar);
@@ -25791,6 +27559,7 @@ var MethodCard = class extends i4 {
     const isThrottled = !!this.method.throttled;
     const isDebounced = !!this.method.debounced;
     const isQueued = !!this.method.queued;
+    const emitsEvent = !!this.method.emitsEvent;
     const isTyped = isAutorun || isWebhook || isCron || isLocked || isDeprecated;
     const typeAccent = isDeprecated ? "hsl(0, 0%, 50%)" : isWebhook ? "hsl(45, 80%, 50%)" : isCron ? "hsl(215, 80%, 60%)" : isLocked ? "hsl(0, 65%, 55%)" : isAutorun ? "hsl(160, 60%, 45%)" : "";
     return b2`
@@ -25817,8 +27586,7 @@ var MethodCard = class extends i4 {
                   ` : ""}
               <span class="editable">
                 <h3 class="title">
-                  <span class="title-name">${formatLabel(this.method.name)}</span
-                  >${this._renderParamSignature()}
+                  <span class="title-name">${this.method.name}</span>${this._renderParamSignature()}
                 </h3>
                 <span
                   class="edit-pencil"
@@ -25834,30 +27602,18 @@ var MethodCard = class extends i4 {
             </div>
             ${this.method.isTemplate ? b2`<span class="badge prompt">Prompt</span>` : ""}
             ${isCron ? b2`<span
-                  class="badge"
-                  style="background:hsla(215,80%,60%,0.15);color:hsl(215,80%,65%)"
+                  class="badge scheduled"
                   title="Runs automatically on schedule: ${this.method.scheduled}"
                   >⏱ Scheduled</span
                 >` : ""}
-            ${isDeprecated ? b2`<span
-                  class="badge"
-                  style="background:hsla(0,0%,50%,0.15);color:hsl(0,0%,60%);text-decoration:line-through"
-                  >Deprecated</span
-                >` : ""}
-            ${isCached ? b2`<span
-                  class="badge"
-                  style="background:hsla(280,60%,50%,0.15);color:hsl(280,60%,65%)"
-                  >Cached</span
-                >` : ""}
-            ${isThrottled ? b2`<span
-                  class="badge"
-                  style="background:hsla(30,80%,50%,0.15);color:hsl(30,80%,60%)"
-                  >Throttled</span
-                >` : ""}
-            ${isQueued ? b2`<span
-                  class="badge"
-                  style="background:hsla(200,70%,50%,0.15);color:hsl(200,70%,60%)"
-                  >Queued</span
+            ${isDeprecated ? b2`<span class="badge deprecated">Deprecated</span>` : ""}
+            ${isCached ? b2`<span class="badge cached">Cached</span>` : ""}
+            ${isThrottled ? b2`<span class="badge throttled">Throttled</span>` : ""}
+            ${isQueued ? b2`<span class="badge queued">Queued</span>` : ""}
+            ${emitsEvent ? b2`<span
+                  class="badge event"
+                  title="Automatically emits event: ${this.method.eventName}"
+                  >📡 Event</span
                 >` : ""}
           </div>
           ${this._editingDescription ? b2`
@@ -26101,7 +27857,7 @@ MethodCard.styles = [
 
       .card:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.3);
+        box-shadow: var(--shadow-lg);
         border-left-color: var(--accent-primary);
       }
 
@@ -26279,7 +28035,7 @@ MethodCard.styles = [
         font-size: var(--text-xs);
         padding: 2px 8px;
         border-radius: var(--radius-md);
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
         color: var(--t-muted);
         flex-shrink: 0;
       }
@@ -26289,6 +28045,37 @@ MethodCard.styles = [
         color: hsl(45, 80%, 60%);
       }
 
+      .badge.scheduled {
+        background: hsla(215, 80%, 60%, 0.15);
+        color: hsl(215, 80%, 65%);
+      }
+
+      .badge.deprecated {
+        background: hsla(0, 0%, 50%, 0.15);
+        color: hsl(0, 0%, 60%);
+        text-decoration: line-through;
+      }
+
+      .badge.cached {
+        background: hsla(280, 60%, 50%, 0.15);
+        color: hsl(280, 60%, 65%);
+      }
+
+      .badge.throttled {
+        background: hsla(30, 80%, 50%, 0.15);
+        color: hsl(30, 80%, 60%);
+      }
+
+      .badge.queued {
+        background: hsla(200, 70%, 50%, 0.15);
+        color: hsl(200, 70%, 60%);
+      }
+
+      .badge.event {
+        background: hsla(100, 70%, 50%, 0.15);
+        color: hsl(100, 70%, 60%);
+      }
+
       .param-tags {
         display: flex;
         flex-wrap: wrap;
@@ -26302,9 +28089,9 @@ MethodCard.styles = [
         font-size: var(--text-xs);
         padding: 4px 10px;
         border-radius: var(--radius-xs);
-        background: hsla(260, 60%, 50%, 0.12);
-        color: var(--t-primary);
-        border: 1px solid hsla(260, 60%, 50%, 0.2);
+        background: var(--param-tag-bg, hsla(260, 60%, 50%, 0.12));
+        color: var(--param-tag-color, var(--t-primary));
+        border: 1px solid var(--param-tag-border, hsla(260, 60%, 50%, 0.2));
         font-weight: 500;
       }
 
@@ -26313,8 +28100,8 @@ MethodCard.styles = [
         min-width: 20px;
         height: 20px;
         border-radius: var(--radius-sm);
-        background: hsla(45, 80%, 50%, 0.2);
-        color: hsl(45, 80%, 60%);
+        background: var(--color-warning-bg, hsla(45, 80%, 50%, 0.2));
+        color: var(--color-warning, hsl(45, 80%, 60%));
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -26344,7 +28131,7 @@ MethodCard.styles = [
         align-items: center;
         justify-content: center;
         border-radius: var(--radius-sm);
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
       }
 
       .card:hover .action-icon {
@@ -26359,7 +28146,7 @@ MethodCard.styles = [
         border: 1px solid var(--border-glass);
         border-radius: var(--radius-md);
         padding: var(--space-sm);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        box-shadow: var(--shadow-lg);
         z-index: 100;
         display: grid;
         grid-template-columns: repeat(6, 1fr);
@@ -26466,6 +28253,42 @@ MethodCard = __decorateClass([
 // node_modules/lit-html/directives/if-defined.js
 var o8 = (o9) => o9 ?? A;
 
+// src/auto-ui/frontend/utils/format-label.ts
+function formatLabel(name2) {
+  if (!name2) return name2;
+  let cleaned = name2.replace(/^_+/, "");
+  let spaced = cleaned.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2");
+  spaced = spaced.replace(/[_-]+/g, " ");
+  let result = spaced.split(/\s+/).map((word) => {
+    if (!word) return "";
+    const upper = word.toUpperCase();
+    if ([
+      "AI",
+      "ID",
+      "IDS",
+      "URL",
+      "API",
+      "UI",
+      "IP",
+      "HTTP",
+      "HTTPS",
+      "JSON",
+      "XML",
+      "HTML",
+      "CSS",
+      "SQL",
+      "MCP",
+      "SSH",
+      "CLI"
+    ].includes(upper)) {
+      if (upper === "IDS") return "IDs";
+      return upper;
+    }
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(" ");
+  return result;
+}
+
 // src/auto-ui/frontend/components/invoke-form.ts
 function capitalizeEnumValue(val) {
   return formatLabel(val);
@@ -26492,6 +28315,30 @@ function singularize(word) {
   if (lower.endsWith("s") && !lower.endsWith("ss")) return word.slice(0, -1);
   return word;
 }
+function isValidCharForFormat(char, format, position) {
+  if (!format) return true;
+  switch (format.toLowerCase()) {
+    case "email":
+      return /[a-zA-Z0-9@.\-_+]/.test(char);
+    case "url":
+    case "uri":
+      return /[a-zA-Z0-9:\/\-_.?=&#%@+~;,!]/.test(char);
+    case "uuid":
+      return /[0-9a-fA-F\-]/.test(char);
+    case "ipv4":
+      return /[0-9.]/.test(char);
+    case "ipv6":
+      return /[0-9a-fA-F:]/.test(char);
+    case "slug":
+      return /[a-z0-9\-]/.test(char);
+    case "hex":
+      return position === 0 && char === "#" ? true : /[0-9a-fA-F]/.test(char);
+    case "phone":
+      return /[0-9+\-() ]/.test(char);
+    default:
+      return true;
+  }
+}
 var InvokeForm = class extends i4 {
   constructor() {
     super(...arguments);
@@ -26746,9 +28593,7 @@ var InvokeForm = class extends i4 {
         this._handleChange(key, arr.length > 0 ? arr : raw);
       }}
           />
-          <div class="hint" style="font-size:0.75rem;color:var(--t-muted);margin-top:2px;">
-            Comma-separated values
-          </div>
+          <div class="hint">Comma-separated values</div>
         </div>
       `;
     }
@@ -26799,9 +28644,12 @@ var InvokeForm = class extends i4 {
                 min="${min}"
                 max="${max}"
                 step="${step2}"
+                style="${this._sliderFillStyle(Number(currentValue2), min, max)}"
                 .value=${String(currentValue2)}
                 @input=${(e8) => {
-          const v2 = Number(e8.target.value);
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.style.cssText = this._sliderFillStyle(v2, min, max);
           this._handleChange(key, v2);
         }}
               />
@@ -26814,7 +28662,14 @@ var InvokeForm = class extends i4 {
                 step="${step2}"
                 .value=${displayValue2}
                 @input=${(e8) => {
-          const v2 = Number(e8.target.value);
+          const raw = e8.target.value;
+          if (raw === "" || raw === "-") return;
+          this._handleChange(key, Number(raw));
+        }}
+                @change=${(e8) => {
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.value = String(v2);
           this._handleChange(key, v2);
         }}
               />
@@ -26833,14 +28688,31 @@ var InvokeForm = class extends i4 {
       return b2`
         <input
           id=${o8(inputId)}
-          type="number"
-          class="${errorClass}"
+          type="text"
+          class="number-input-clean ${errorClass}"
+          inputmode=${isInteger ? "numeric" : "decimal"}
           ${hasMin ? `min="${schema.minimum}"` : ""}
-          step="${step}"
           placeholder="${defaultVal2}"
           .value=${displayValue}
+          @keypress=${(e8) => {
+        const char = e8.key;
+        const isDigit = /\d/.test(char);
+        const isMinus = char === "-";
+        const isDecimal = char === "." && !isInteger;
+        if (!isDigit && !isMinus && !isDecimal) {
+          e8.preventDefault();
+        }
+      }}
           @input=${(e8) => {
-        const v2 = Number(e8.target.value);
+        let text = e8.target.value;
+        if (isInteger) {
+          const cleaned = text.replace(/[^\d-]/g, "");
+          text = cleaned.match(/-.*-/) ? cleaned.replace(/-/g, "").replace(/^/, "-") : cleaned;
+        }
+        let v2 = text === "" || text === "-" ? defaultVal2 : Number(text);
+        if (isNaN(v2)) {
+          v2 = defaultVal2;
+        }
         this._handleChange(key, v2);
       }}
         />
@@ -26928,6 +28800,8 @@ var InvokeForm = class extends i4 {
     }
     const defaultVal = schema.default;
     const placeholder = defaultVal != null ? String(defaultVal) : "";
+    const format = schema.format;
+    const pattern = schema.pattern;
     return b2`
       <input
         id=${o8(inputId)}
@@ -26935,6 +28809,23 @@ var InvokeForm = class extends i4 {
         class="${errorClass}"
         placeholder="${placeholder}"
         .value=${this._values[key] || ""}
+        @keypress=${(e8) => {
+      if (!isValidCharForFormat(e8.key, format)) {
+        e8.preventDefault();
+        return;
+      }
+      if (pattern) {
+        try {
+          const currentValue = e8.target.value;
+          const newValue = currentValue + e8.key;
+          const regex = new RegExp(pattern);
+          if (!regex.test(newValue)) {
+            e8.preventDefault();
+          }
+        } catch (err) {
+        }
+      }
+    }}
         @input=${(e8) => this._handleChange(key, e8.target.value)}
       />
     `;
@@ -27059,7 +28950,11 @@ var InvokeForm = class extends i4 {
    */
   _cleanDescription(desc, schema) {
     if (!desc) return desc;
-    let cleaned = desc.replace(
+    let cleaned = desc;
+    const lines = cleaned.split("\n").filter((line) => !line.trim().startsWith("@"));
+    cleaned = lines.join("\n").trim();
+    cleaned = cleaned.replace(/\s*@\w+[\s\S]*?(?=[.!?\n]|$)/g, "").trim();
+    cleaned = cleaned.replace(
       /['"][\w-]+['"]\s*(?:\([^)]*\)\s*)?(?:\|\s*['"][\w-]+['"]\s*(?:\([^)]*\)\s*)?)+/g,
       ""
     );
@@ -27095,6 +28990,23 @@ var InvokeForm = class extends i4 {
       this._savePersistedValues();
     }
   }
+  _sliderFillStyle(value, min, max) {
+    const pct = max > min ? (value - min) / (max - min) * 100 : 0;
+    return `background: linear-gradient(to right, var(--accent-primary) ${pct}%, var(--border-glass) ${pct}%)`;
+  }
+  /** Clamp to [min, max] and round to nearest step (integer-safe). */
+  _sanitizeSliderValue(raw, min, max, step) {
+    let v2 = Number.isFinite(raw) ? raw : min;
+    v2 = Math.min(max, Math.max(min, v2));
+    if (step > 0) {
+      v2 = min + Math.round((v2 - min) / step) * step;
+      if (v2 > max) v2 = max;
+    }
+    if (Number.isInteger(step) && step >= 1) {
+      v2 = Math.round(v2);
+    }
+    return v2;
+  }
   _handleChange(key, value) {
     this._values = { ...this._values, [key]: value };
     if (this.rememberValues) {
@@ -27102,7 +29014,7 @@ var InvokeForm = class extends i4 {
     }
   }
   _buildCliCommand() {
-    const parts = ["photon", "cli", this.photonName, this.methodName];
+    const parts = [this.photonName, this.methodName];
     for (const [key, value] of Object.entries(this._values)) {
       if (value === void 0 || value === null || value === "") continue;
       const strVal = typeof value === "object" ? JSON.stringify(value) : String(value);
@@ -27226,7 +29138,9 @@ var InvokeForm = class extends i4 {
         >
           <option value="">Select...</option>
           ${schema.enum.map(
-        (opt) => b2` <option value=${opt} ?selected=${opt === value}>${opt}</option> `
+        (opt) => b2`
+              <option value=${opt} ?selected=${opt === value}>${capitalizeEnumValue(opt)}</option>
+            `
       )}
         </select>
       `;
@@ -27262,8 +29176,14 @@ var InvokeForm = class extends i4 {
                 min="${min}"
                 max="${max}"
                 step="${step2}"
+                style="${this._sliderFillStyle(Number(currentVal2), min, max)}"
                 .value=${String(currentVal2)}
-                @input=${(e8) => onChange(propKey, Number(e8.target.value))}
+                @input=${(e8) => {
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.style.cssText = this._sliderFillStyle(v2, min, max);
+          onChange(propKey, v2);
+        }}
               />
               <input
                 type="number"
@@ -27272,7 +29192,17 @@ var InvokeForm = class extends i4 {
                 max="${max}"
                 step="${step2}"
                 .value=${displayVal2}
-                @input=${(e8) => onChange(propKey, Number(e8.target.value))}
+                @input=${(e8) => {
+          const raw = e8.target.value;
+          if (raw === "" || raw === "-") return;
+          onChange(propKey, Number(raw));
+        }}
+                @change=${(e8) => {
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.value = String(v2);
+          onChange(propKey, v2);
+        }}
               />
             </div>
             <div class="range-labels">
@@ -27439,18 +29369,23 @@ var InvokeForm = class extends i4 {
         >
           <option value="">Select...</option>
           ${schema.enum.map(
-        (opt) => b2` <option value=${opt} ?selected=${opt === value}>${opt}</option> `
+        (opt) => b2`
+              <option value=${opt} ?selected=${opt === value}>${capitalizeEnumValue(opt)}</option>
+            `
       )}
         </select>
       `;
     }
     if (schema.type === "boolean") {
       return b2`
-        <input
-          type="checkbox"
-          .checked=${!!value}
-          @change=${(e8) => handleNestedChange(e8.target.checked)}
-        />
+        <label class="switch">
+          <input
+            type="checkbox"
+            .checked=${!!value}
+            @change=${(e8) => handleNestedChange(e8.target.checked)}
+          />
+          <span class="slider"></span>
+        </label>
       `;
     }
     if (schema.type === "number" || schema.type === "integer") {
@@ -27472,8 +29407,14 @@ var InvokeForm = class extends i4 {
                 min="${min}"
                 max="${max}"
                 step="${step2}"
+                style="${this._sliderFillStyle(Number(currentVal2), min, max)}"
                 .value=${String(currentVal2)}
-                @input=${(e8) => handleNestedChange(Number(e8.target.value))}
+                @input=${(e8) => {
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.style.cssText = this._sliderFillStyle(v2, min, max);
+          handleNestedChange(v2);
+        }}
               />
               <input
                 type="number"
@@ -27482,7 +29423,17 @@ var InvokeForm = class extends i4 {
                 max="${max}"
                 step="${step2}"
                 .value=${displayVal2}
-                @input=${(e8) => handleNestedChange(Number(e8.target.value))}
+                @input=${(e8) => {
+          const raw = e8.target.value;
+          if (raw === "" || raw === "-") return;
+          handleNestedChange(Number(raw));
+        }}
+                @change=${(e8) => {
+          const el2 = e8.target;
+          const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step2);
+          el2.value = String(v2);
+          handleNestedChange(v2);
+        }}
               />
             </div>
             <div class="range-labels">
@@ -27833,6 +29784,7 @@ InvokeForm.styles = [
         font-size: var(--text-xs);
         padding: 2px 6px;
         border-radius: var(--radius-xs);
+        transition: background 0.15s ease;
       }
 
       .array-item-remove:hover {
@@ -27909,11 +29861,17 @@ InvokeForm.styles = [
         margin-top: var(--space-xs);
       }
 
+      .hint {
+        font-size: var(--text-xs);
+        color: var(--t-muted);
+        margin-top: 2px;
+      }
+
       /* Slider-First Numeric Input */
       .slider-group {
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 4px;
       }
 
       .slider-row {
@@ -27924,56 +29882,140 @@ InvokeForm.styles = [
 
       .slider-row input[type='range'] {
         flex: 1;
-        height: 6px;
-        background: rgba(255, 255, 255, 0.12);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 3px;
+        height: 4px;
+        border-radius: var(--radius-full, 9999px);
         -webkit-appearance: none;
         cursor: pointer;
         margin: 8px 0;
+        border: none;
+        outline: none;
+        /* Default unfilled track — overridden by inline style for fill effect */
+        background: var(--border-glass);
       }
 
       .slider-row input[type='range']::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 20px;
-        height: 20px;
+        width: 16px;
+        height: 16px;
         background: var(--accent-primary);
+        border: 2px solid var(--bg-panel, var(--bg-glass));
         border-radius: 50%;
         cursor: pointer;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        box-shadow:
+          0 0 0 2px var(--accent-primary),
+          0 1px 4px rgba(0, 0, 0, 0.3);
+        transition:
+          box-shadow 0.15s ease,
+          transform 0.15s ease;
+      }
+
+      .slider-row input[type='range']::-webkit-slider-thumb:hover {
+        box-shadow:
+          0 0 0 3px var(--accent-primary),
+          0 0 8px var(--glow-primary);
+        transform: scale(1.1);
+      }
+
+      .slider-row input[type='range']:active::-webkit-slider-thumb {
+        transform: scale(0.95);
       }
 
       .slider-row input[type='range']::-moz-range-track {
-        height: 6px;
-        background: rgba(255, 255, 255, 0.12);
-        border-radius: 3px;
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        height: 4px;
+        background: var(--border-glass);
+        border-radius: var(--radius-full, 9999px);
+        border: none;
+      }
+
+      .slider-row input[type='range']::-moz-range-progress {
+        height: 4px;
+        background: var(--accent-primary);
+        border-radius: var(--radius-full, 9999px);
       }
 
       .slider-row input[type='range']::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
+        width: 12px;
+        height: 12px;
         background: var(--accent-primary);
+        border: 2px solid var(--bg-panel, var(--bg-glass));
         border-radius: 50%;
         cursor: pointer;
-        border: none;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        box-shadow:
+          0 0 0 2px var(--accent-primary),
+          0 1px 4px rgba(0, 0, 0, 0.3);
+        transition:
+          box-shadow 0.15s ease,
+          transform 0.15s ease;
       }
 
-      .slider-value {
-        min-width: 60px;
+      .slider-row input[type='range']::-moz-range-thumb:hover {
+        box-shadow:
+          0 0 0 3px var(--accent-primary),
+          0 0 8px var(--glow-primary);
+      }
+
+      .slider-number-input {
+        width: 64px;
         text-align: center;
+        font-size: var(--text-sm);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        padding: 4px 6px;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass) !important;
+        border-radius: var(--radius-sm);
+        color: var(--t-primary);
+        -moz-appearance: textfield;
+        transition:
+          border-color 0.15s ease,
+          box-shadow 0.15s ease;
+      }
+
+      .slider-number-input::-webkit-outer-spin-button,
+      .slider-number-input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .slider-number-input:focus-visible {
+        outline: none;
+        border-color: var(--accent-primary) !important;
+        box-shadow: 0 0 0 2px var(--glow-primary);
+      }
+
+      /* Clean numeric input — no spinner, mouse wheel support */
+      .number-input-clean {
+        width: 100%;
+        padding: 8px 12px;
         font-size: var(--text-md);
-        font-weight: 600;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-sm);
         color: var(--t-primary);
-        font-variant-numeric: tabular-nums;
+        appearance: none;
+        -moz-appearance: textfield;
+        -webkit-appearance: none;
+        transition:
+          border-color 0.15s ease,
+          box-shadow 0.15s ease;
       }
 
-      .slider-number-input {
-        width: 80px;
-        text-align: right;
-        font-size: var(--text-sm);
-        padding: 4px 8px;
+      .number-input-clean::-webkit-outer-spin-button,
+      .number-input-clean::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        display: none;
+        margin: 0;
+      }
+
+      .number-input-clean:hover {
+        border-color: var(--accent-primary);
+      }
+
+      .number-input-clean:focus-visible {
+        outline: none;
+        border-color: var(--accent-primary);
+        box-shadow: 0 0 0 2px var(--glow-primary);
       }
 
       .range-labels {
@@ -28022,6 +30064,15 @@ InvokeForm.styles = [
         flex-shrink: 0;
       }
 
+      select {
+        appearance: none;
+        -webkit-appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 12px center;
+        padding-right: 32px;
+      }
+
       /* ===== Responsive Design ===== */
       @media (max-width: 768px) {
         .form-container {
@@ -28224,7 +30275,7 @@ ActivityLog.styles = [
         font-size: var(--text-sm);
         text-transform: uppercase;
         letter-spacing: 0.1em;
-        color: var(--t-secondary); /* Brighter */
+        color: var(--t-primary);
         font-weight: 600;
       }
 
@@ -28239,7 +30290,7 @@ ActivityLog.styles = [
       }
 
       .clear-btn:hover {
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
         color: var(--t-primary);
       }
 
@@ -28258,14 +30309,14 @@ ActivityLog.styles = [
       }
 
       .filter-btn:hover {
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
         color: var(--t-primary);
       }
 
       .filter-btn.active {
         border-color: var(--accent-secondary);
         color: var(--accent-secondary);
-        background: hsla(210, 80%, 65%, 0.08);
+        background: var(--bg-glass);
       }
 
       .visually-hidden {
@@ -28325,7 +30376,7 @@ ActivityLog.styles = [
         display: inline-block;
         font-size: var(--text-xs);
         color: var(--t-muted);
-        background: hsla(220, 10%, 80%, 0.08);
+        background: var(--bg-glass);
         padding: 1px 6px;
         border-radius: var(--radius-full);
         margin-left: var(--space-sm);
@@ -28484,6 +30535,8 @@ var ResultViewer = class extends i4 {
     this._previousResult = null;
     // Recency heat: track when items were last added/updated
     this._itemHeatTimestamps = /* @__PURE__ */ new Map();
+    // Audit trail expansion state: track which items have expanded audit trails
+    this._expandedAuditTrails = /* @__PURE__ */ new Set();
     // The detected ID field for the current result (shared across diff, animation, warmth)
     this._activeIdField = "id";
     // Chart.js instance for reactive updates
@@ -28786,19 +30839,32 @@ var ResultViewer = class extends i4 {
   /**
    * Get the warmth class based on recency heat.
    * Reads timestamp from item data first (survives refresh), falls back to in-memory map.
+   * Prioritizes __meta timestamps (most recent), then standard timestamp fields.
    */
   _getItemWarmthClass(item) {
     const idField = this._activeIdField;
     let timestamp;
     if (item && typeof item === "object") {
       const rec = item;
-      for (const field of ResultViewer._TIMESTAMP_FIELDS) {
-        const val = rec[field];
-        if (val !== void 0 && val !== null) {
-          const parsed = typeof val === "number" ? val : new Date(typeof val === "string" ? val : String(val)).getTime();
-          if (!isNaN(parsed)) {
-            timestamp = parsed;
-            break;
+      const meta4 = rec.__meta;
+      if (meta4 && typeof meta4 === "object") {
+        if (meta4.modifiedAt) {
+          const parsed = new Date(meta4.modifiedAt).getTime();
+          if (!isNaN(parsed)) timestamp = parsed;
+        } else if (meta4.createdAt) {
+          const parsed = new Date(meta4.createdAt).getTime();
+          if (!isNaN(parsed)) timestamp = parsed;
+        }
+      }
+      if (timestamp === void 0) {
+        for (const field of ResultViewer._TIMESTAMP_FIELDS) {
+          const val = rec[field];
+          if (val !== void 0 && val !== null) {
+            const parsed = typeof val === "number" ? val : new Date(typeof val === "string" ? val : String(val)).getTime();
+            if (!isNaN(parsed)) {
+              timestamp = parsed;
+              break;
+            }
           }
         }
       }
@@ -29307,7 +31373,8 @@ var ResultViewer = class extends i4 {
         "tabs",
         "accordion",
         "stack",
-        "columns"
+        "columns",
+        "qr"
       ].includes(format)) {
         return format;
       }
@@ -29474,6 +31541,8 @@ var ResultViewer = class extends i4 {
         return this._renderStack(filteredData);
       case "columns":
         return this._renderColumns(filteredData);
+      case "qr":
+        return this._renderQR(filteredData);
       case "mermaid":
         return this._renderMermaid(filteredData);
       case "json":
@@ -29716,6 +31785,136 @@ var ResultViewer = class extends i4 {
           </div>
         `
     )}
+      ${this._renderAuditTrail(data)}
+    `;
+  }
+  /**
+   * Render audit trail from __meta object if present
+   */
+  _renderAuditTrail(data) {
+    if (!data || typeof data !== "object") return "";
+    const meta4 = data.__meta;
+    if (!meta4 || typeof meta4 !== "object") return "";
+    const idField = this._activeIdField;
+    const itemId = data[idField] ? String(data[idField]) : Math.random().toString(36);
+    const auditKey = `audit-${itemId}`;
+    const isExpanded = this._expandedAuditTrails.has(auditKey);
+    const formatTime = (isoString) => {
+      if (!isoString) return "N/A";
+      const date4 = new Date(isoString);
+      return date4.toLocaleString();
+    };
+    const createdAt = formatTime(meta4.createdAt);
+    const modifiedAt = meta4.modifiedAt ? formatTime(meta4.modifiedAt) : null;
+    return b2`
+      <div
+        style="margin-top: var(--space-md); border-top: 1px solid var(--border-glass); padding-top: var(--space-md);"
+      >
+        <details
+          ?open="${isExpanded}"
+          @toggle="${(e8) => {
+      const detail = e8.target;
+      if (detail.open) {
+        this._expandedAuditTrails.add(auditKey);
+      } else {
+        this._expandedAuditTrails.delete(auditKey);
+      }
+    }}"
+        >
+          <summary
+            style="cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: var(--space-sm);"
+          >
+            <span
+              style="display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--text-secondary); margin-right: var(--space-xs);"
+            ></span>
+            Audit Trail
+            ${meta4.modifications?.length ? b2`<span style="font-size: 0.85em; color: var(--text-secondary);"
+                  >(${meta4.modifications.length} changes)</span
+                >` : ""}
+          </summary>
+
+          <div
+            style="margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--bg-secondary); border-radius: var(--radius-sm);"
+          >
+            <table style="width: 100%; font-size: 0.9em;">
+              <tbody>
+                <tr style="border-bottom: 1px solid var(--border-subtle);">
+                  <td
+                    style="padding: var(--space-xs); color: var(--text-secondary); font-weight: 500;"
+                  >
+                    Created
+                  </td>
+                  <td style="padding: var(--space-xs);">${createdAt}</td>
+                  ${meta4.createdBy ? b2`<td
+                        style="padding: var(--space-xs); color: var(--text-secondary); font-size: 0.85em;"
+                      >
+                        (by: ${meta4.createdBy})
+                      </td>` : ""}
+                </tr>
+                ${modifiedAt ? b2`
+                      <tr style="border-bottom: 1px solid var(--border-subtle);">
+                        <td
+                          style="padding: var(--space-xs); color: var(--text-secondary); font-weight: 500;"
+                        >
+                          Modified
+                        </td>
+                        <td style="padding: var(--space-xs);">${modifiedAt}</td>
+                        ${meta4.modifiedBy ? b2`<td
+                              style="padding: var(--space-xs); color: var(--text-secondary); font-size: 0.85em;"
+                            >
+                              (by: ${meta4.modifiedBy})
+                            </td>` : ""}
+                      </tr>
+                    ` : ""}
+              </tbody>
+            </table>
+
+            ${meta4.modifications && Array.isArray(meta4.modifications) && meta4.modifications.length > 0 ? b2`
+                  <div style="margin-top: var(--space-md);">
+                    <div
+                      style="font-weight: 500; margin-bottom: var(--space-sm); color: var(--text-secondary);"
+                    >
+                      Changes
+                    </div>
+                    <ul style="list-style: none; padding: 0; margin: 0;">
+                      ${meta4.modifications.map(
+      (mod, idx) => b2`
+                          <li
+                            key="${idx}"
+                            style="padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-xs); background: var(--bg-hover); border-left: 3px solid var(--primary); border-radius: 2px; font-size: 0.9em;"
+                          >
+                            <div style="margin-bottom: 2px;">
+                              <span style="font-weight: 500; color: var(--text-primary);"
+                                >${mod.field}</span
+                              >
+                              <span style="color: var(--text-secondary); margin: 0 var(--space-xs);"
+                                >→</span
+                              >
+                              <span style="color: var(--text-secondary); font-size: 0.85em;"
+                                >${formatTime(mod.timestamp || (/* @__PURE__ */ new Date()).toISOString())}</span
+                              >
+                            </div>
+                            <div
+                              style="font-family: monospace; font-size: 0.85em; color: var(--text-secondary); margin-left: var(--space-sm);"
+                            >
+                              <span style="color: #d87070;">${JSON.stringify(mod.oldValue)}</span>
+                              <span style="margin: 0 4px;">→</span>
+                              <span style="color: #7cb342;">${JSON.stringify(mod.newValue)}</span>
+                            </div>
+                            ${mod.modifiedBy ? b2`<div
+                                  style="font-size: 0.8em; color: var(--text-secondary); margin-top: 2px;"
+                                >
+                                  <em>by: ${mod.modifiedBy}</em>
+                                </div>` : ""}
+                          </li>
+                        `
+    )}
+                    </ul>
+                  </div>
+                ` : ""}
+          </div>
+        </details>
+      </div>
     `;
   }
   /** Returns true for arrays of objects or large nested objects that deserve their own section */
@@ -30174,6 +32373,163 @@ ${code}</pre>`;
       style="position: relative; background: ${bgColor}; border-radius: var(--radius-sm); padding: 16px; margin: 16px 0; min-height: 120px;"
     ></div>`;
   }
+  _renderQR(data) {
+    const text = typeof data === "object" && data !== null ? String(data.url || data.link || data.value || JSON.stringify(data)) : String(data);
+    const isUrl = /^https?:\/\//i.test(text);
+    const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text);
+    const isPhone = /^[+]?[\d\s\-().]{7,}$/.test(text.trim());
+    let href = "";
+    let linkLabel = text;
+    if (isUrl) {
+      href = text;
+      try {
+        linkLabel = new URL(text).hostname + new URL(text).pathname;
+      } catch {
+      }
+    } else if (isEmail) {
+      href = `mailto:${text}`;
+    } else if (isPhone) {
+      href = `tel:${text.replace(/[\s\-().]/g, "")}`;
+    }
+    setTimeout(() => {
+      if (this._qrContainer) {
+        this._qrContainer.innerHTML = "";
+        try {
+          const containerWidth = this._qrContainer.clientWidth;
+          const qrSize = Math.max(200, Math.min(containerWidth - 48, 400));
+          new window.QRCode(this._qrContainer, {
+            text,
+            width: qrSize,
+            height: qrSize,
+            correctLevel: window.QRCode?.CorrectLevel?.H,
+            colorDark: "#000000",
+            colorLight: "#ffffff"
+          });
+        } catch (error2) {
+          console.error("Failed to generate QR code:", error2);
+        }
+      }
+    }, 0);
+    const message = typeof data === "object" && data !== null ? data.message : void 0;
+    const extraFields = [];
+    if (typeof data === "object" && data !== null) {
+      for (const [k3, v2] of Object.entries(data)) {
+        if (["url", "link", "value", "message", "port"].includes(k3) || v2 == null || typeof v2 === "object")
+          continue;
+        extraFields.push({ label: k3, value: `${v2}` });
+      }
+    }
+    return b2`<div
+      style="
+      display: flex; flex-direction: column; align-items: center; gap: 0;
+      padding: 0; border-radius: var(--radius-md);
+      border: 1px solid var(--border-glass);
+      background: var(--bg-subtle); overflow: hidden;
+      width: 40%; min-width: 280px; max-width: 480px;
+      margin: 16px auto;
+    "
+    >
+      <div
+        id="qr-container"
+        style="
+        width: 100%; padding: 24px;
+        display: flex; justify-content: center; align-items: center;
+        background: #ffffff; border-radius: var(--radius-md) var(--radius-md) 0 0;
+      "
+      ></div>
+
+      <div
+        style="
+        width: 100%; padding: 16px 20px;
+        display: flex; flex-direction: column; gap: 10px;
+        border-top: 1px solid var(--border-glass);
+      "
+      >
+        ${message ? b2`<div
+              style="
+              font-size: 0.8rem; color: var(--t-secondary, #a0a0a0);
+              text-align: center; font-weight: 500;
+            "
+            >
+              ${message}
+            </div>` : ""}
+        ${href ? b2`<div
+              style="display: flex; align-items: center; gap: 10px; justify-content: center;"
+            >
+              <a
+                href="${href}"
+                target="_blank"
+                rel="noopener noreferrer"
+                style="
+                  font-size: 0.85rem; color: var(--accent, #3b82f6);
+                  text-decoration: none; font-weight: 500;
+                  text-align: center; word-break: break-word;
+                "
+                @mouseenter=${(e8) => e8.target.style.textDecoration = "underline"}
+                @mouseleave=${(e8) => e8.target.style.textDecoration = "none"}
+                >${linkLabel}</a
+              >
+              <button
+                title="Copy to clipboard"
+                style="
+                  background: var(--bg-subtle, rgba(255,255,255,0.06));
+                  border: 1px solid var(--border-glass);
+                  border-radius: 6px; padding: 6px 10px; cursor: pointer;
+                  color: var(--t-muted); font-size: 0.85rem; flex-shrink: 0;
+                  transition: all 0.15s; line-height: 1;
+                "
+                @mouseenter=${(e8) => {
+      e8.target.style.color = "var(--accent, #3b82f6)";
+      e8.target.style.borderColor = "var(--accent, #3b82f6)";
+    }}
+                @mouseleave=${(e8) => {
+      e8.target.style.color = "var(--t-muted)";
+      e8.target.style.borderColor = "var(--border-glass)";
+    }}
+                @click=${(e8) => {
+      void navigator.clipboard.writeText(text);
+      const btn = e8.target;
+      const orig = btn.textContent;
+      btn.textContent = "\u2713 Copied";
+      btn.style.color = "var(--accent, #3b82f6)";
+      setTimeout(() => {
+        btn.textContent = orig;
+        btn.style.color = "var(--t-muted)";
+      }, 1500);
+    }}
+              >
+                Copy
+              </button>
+            </div>` : b2`<div
+              style="
+              font-size: 0.875rem; color: var(--t-muted);
+              text-align: center; word-break: break-all;
+            "
+            >
+              ${text}
+            </div>`}
+        ${extraFields.length > 0 ? b2`<div
+              style="
+              display: flex; flex-direction: column; gap: 6px;
+              padding-top: 10px; border-top: 1px solid var(--border-glass);
+              font-size: 0.8rem;
+            "
+            >
+              ${extraFields.map(
+      (f5) => b2`<div style="display: flex; justify-content: space-between; gap: 12px;">
+                    <span style="color: var(--t-muted); text-transform: capitalize;"
+                      >${f5.label}</span
+                    >
+                    <span
+                      style="color: var(--t-primary); font-family: var(--font-mono, monospace); word-break: break-all; text-align: right;"
+                      >${f5.value}</span
+                    >
+                  </div>`
+    )}
+            </div>` : ""}
+      </div>
+    </div>`;
+  }
   _renderText(data) {
     const text = String(data);
     if (this._isMermaidString(text)) {
@@ -31433,7 +33789,7 @@ ResultViewer.styles = [
       }
 
       button:hover {
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
         color: var(--t-primary);
       }
 
@@ -31584,7 +33940,7 @@ ResultViewer.styles = [
       }
 
       .smart-table tr:hover td {
-        background: hsla(220, 10%, 80%, 0.05);
+        background: var(--bg-glass);
       }
 
       /* Key-Value Table (single object) */
@@ -32271,7 +34627,7 @@ ResultViewer.styles = [
       }
 
       .tree-item:hover {
-        background: hsla(220, 10%, 80%, 0.1);
+        background: var(--bg-glass);
       }
 
       .tree-toggle {
@@ -32300,16 +34656,16 @@ ResultViewer.styles = [
       }
 
       .tree-value.string {
-        color: #a5d6ff;
+        color: var(--syntax-string);
       }
       .tree-value.number {
-        color: #ff9e64;
+        color: var(--syntax-number);
       }
       .tree-value.boolean {
-        color: #ff007c;
+        color: var(--syntax-boolean);
       }
       .tree-value.null {
-        color: #79c0ff;
+        color: var(--syntax-null);
       }
 
       .tree-type {
@@ -32571,9 +34927,9 @@ ResultViewer.styles = [
       }
 
       .expand-btn:hover {
-        background: var(--primary);
+        background: var(--accent-primary);
         color: white;
-        border-color: var(--primary);
+        border-color: var(--accent-primary);
       }
 
       /* Markdown items (array rendering with filter transitions) */
@@ -32811,13 +35167,13 @@ ResultViewer.styles = [
       }
 
       .metric-delta.up {
-        color: #16a34a;
-        background: rgba(22, 163, 74, 0.12);
+        color: var(--color-success);
+        background: var(--color-success-bg);
       }
 
       .metric-delta.down {
-        color: #dc2626;
-        background: rgba(220, 38, 38, 0.12);
+        color: var(--color-error);
+        background: var(--color-error-bg);
       }
 
       .metric-delta.neutral {
@@ -32952,7 +35308,7 @@ ResultViewer.styles = [
 
       .timeline-description {
         font-size: var(--text-md);
-        color: var(--t-secondary);
+        color: var(--t-muted);
         margin-top: 2px;
         line-height: 1.4;
       }
@@ -33099,7 +35455,7 @@ ResultViewer.styles = [
         justify-content: space-between;
         padding: 4px 0;
         font-size: var(--text-md);
-        color: var(--t-secondary);
+        color: var(--t-muted);
       }
 
       .cart-summary-row.total {
@@ -33377,6 +35733,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ResultViewer.prototype, "_internalResult", 2);
+__decorateClass([
+  e7("#qr-container")
+], ResultViewer.prototype, "_qrContainer", 2);
 __decorateClass([
   n4({ type: String })
 ], ResultViewer.prototype, "collectionProperty", 2);
@@ -83446,9 +85805,13 @@ var ElicitationModal = class extends i4 {
               min="${min}"
               max="${max}"
               step="${step}"
+              style="${this._sliderFillStyle(Number(currentValue), min, max)}"
               .value=${String(currentValue)}
               @input=${(e8) => {
-      this._inputValue = Number(e8.target.value);
+      const el2 = e8.target;
+      const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step);
+      el2.style.cssText = this._sliderFillStyle(v2, min, max);
+      this._inputValue = v2;
     }}
             />
             <input
@@ -83459,7 +85822,15 @@ var ElicitationModal = class extends i4 {
               step="${step}"
               .value=${String(currentValue)}
               @input=${(e8) => {
-      this._inputValue = Number(e8.target.value);
+      const raw = e8.target.value;
+      if (raw === "" || raw === "-") return;
+      this._inputValue = Number(raw);
+    }}
+              @change=${(e8) => {
+      const el2 = e8.target;
+      const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step);
+      el2.value = String(v2);
+      this._inputValue = v2;
     }}
               @keydown=${(e8) => this._handleKeydown(e8)}
               autofocus
@@ -83703,9 +86074,13 @@ var ElicitationModal = class extends i4 {
               min="${min}"
               max="${max}"
               step="${step}"
+              style="${this._sliderFillStyle(Number(currentValue), min, max)}"
               .value=${String(currentValue)}
               @input=${(e8) => {
-        this._updateFormValue(field.name, Number(e8.target.value));
+        const el2 = e8.target;
+        const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step);
+        el2.style.cssText = this._sliderFillStyle(v2, min, max);
+        this._updateFormValue(field.name, v2);
       }}
             />
             <input
@@ -83716,7 +86091,15 @@ var ElicitationModal = class extends i4 {
               step="${step}"
               .value=${String(currentValue)}
               @input=${(e8) => {
-        this._updateFormValue(field.name, Number(e8.target.value));
+        const raw = e8.target.value;
+        if (raw === "" || raw === "-") return;
+        this._updateFormValue(field.name, Number(raw));
+      }}
+              @change=${(e8) => {
+        const el2 = e8.target;
+        const v2 = this._sanitizeSliderValue(Number(el2.value), min, max, step);
+        el2.value = String(v2);
+        this._updateFormValue(field.name, v2);
       }}
             />
           </div>
@@ -83737,6 +86120,23 @@ var ElicitationModal = class extends i4 {
       />
     `;
   }
+  _sliderFillStyle(value, min, max) {
+    const pct = max > min ? (value - min) / (max - min) * 100 : 0;
+    return `background: linear-gradient(to right, var(--accent-primary) ${pct}%, var(--border-glass) ${pct}%)`;
+  }
+  /** Clamp to [min, max] and round to nearest step (integer-safe). */
+  _sanitizeSliderValue(raw, min, max, step) {
+    let v2 = Number.isFinite(raw) ? raw : min;
+    v2 = Math.min(max, Math.max(min, v2));
+    if (step > 0) {
+      v2 = min + Math.round((v2 - min) / step) * step;
+      if (v2 > max) v2 = max;
+    }
+    if (Number.isInteger(step) && step >= 1) {
+      v2 = Math.round(v2);
+    }
+    return v2;
+  }
   _updateFormValue(name2, value) {
     this._formValues = { ...this._formValues, [name2]: value };
   }
@@ -83861,11 +86261,19 @@ ElicitationModal.styles = [
         color: white;
       }
 
+      .btn-success:hover {
+        filter: brightness(1.1);
+      }
+
       .btn-danger {
         background: var(--color-error);
         color: white;
       }
 
+      .btn-danger:hover {
+        filter: brightness(1.1);
+      }
+
       /* Confirm buttons */
       .confirm-actions {
         display: flex;
@@ -83975,7 +86383,7 @@ ElicitationModal.styles = [
       .slider-group {
         display: flex;
         flex-direction: column;
-        gap: 6px;
+        gap: 4px;
       }
 
       .slider-row {
@@ -83986,47 +86394,104 @@ ElicitationModal.styles = [
 
       .slider-row input[type='range'] {
         flex: 1;
-        height: 6px;
-        background: rgba(255, 255, 255, 0.12);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 3px;
+        height: 4px;
+        border-radius: var(--radius-full, 9999px);
         -webkit-appearance: none;
         cursor: pointer;
         margin: 8px 0;
+        border: none;
+        outline: none;
+        background: var(--border-glass);
       }
 
       .slider-row input[type='range']::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 20px;
-        height: 20px;
+        width: 16px;
+        height: 16px;
         background: var(--accent-primary);
+        border: 2px solid var(--bg-panel, var(--bg-glass));
         border-radius: 50%;
         cursor: pointer;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        box-shadow:
+          0 0 0 2px var(--accent-primary),
+          0 1px 4px rgba(0, 0, 0, 0.3);
+        transition:
+          box-shadow 0.15s ease,
+          transform 0.15s ease;
+      }
+
+      .slider-row input[type='range']::-webkit-slider-thumb:hover {
+        box-shadow:
+          0 0 0 3px var(--accent-primary),
+          0 0 8px var(--glow-primary);
+        transform: scale(1.1);
+      }
+
+      .slider-row input[type='range']:active::-webkit-slider-thumb {
+        transform: scale(0.95);
       }
 
       .slider-row input[type='range']::-moz-range-track {
-        height: 6px;
-        background: rgba(255, 255, 255, 0.12);
-        border-radius: 3px;
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        height: 4px;
+        background: var(--border-glass);
+        border-radius: var(--radius-full, 9999px);
+        border: none;
+      }
+
+      .slider-row input[type='range']::-moz-range-progress {
+        height: 4px;
+        background: var(--accent-primary);
+        border-radius: var(--radius-full, 9999px);
       }
 
       .slider-row input[type='range']::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
+        width: 12px;
+        height: 12px;
         background: var(--accent-primary);
+        border: 2px solid var(--bg-panel, var(--bg-glass));
         border-radius: 50%;
         cursor: pointer;
-        border: none;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        box-shadow:
+          0 0 0 2px var(--accent-primary),
+          0 1px 4px rgba(0, 0, 0, 0.3);
+        transition:
+          box-shadow 0.15s ease,
+          transform 0.15s ease;
+      }
+
+      .slider-row input[type='range']::-moz-range-thumb:hover {
+        box-shadow:
+          0 0 0 3px var(--accent-primary),
+          0 0 8px var(--glow-primary);
       }
 
       .slider-number-input {
-        width: 80px;
-        text-align: right;
+        width: 64px;
+        text-align: center;
         font-size: var(--text-sm);
-        padding: 4px 8px;
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        padding: 4px 6px;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass) !important;
+        border-radius: var(--radius-sm);
+        color: var(--t-primary);
+        -moz-appearance: textfield;
+        transition:
+          border-color 0.15s ease,
+          box-shadow 0.15s ease;
+      }
+
+      .slider-number-input::-webkit-outer-spin-button,
+      .slider-number-input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      .slider-number-input:focus-visible {
+        outline: none;
+        border-color: var(--accent-primary) !important;
+        box-shadow: 0 0 0 2px var(--glow-primary);
       }
 
       .range-labels {
@@ -84085,7 +86550,13 @@ ElicitationModal.styles = [
         background: var(--bg-glass-strong);
         border-radius: 12px;
         cursor: pointer;
-        transition: background 0.2s;
+        transition:
+          background 0.2s,
+          box-shadow 0.2s;
+      }
+
+      .toggle-track:hover {
+        background: var(--bg-glass);
       }
 
       .toggle-track::after {
@@ -84104,6 +86575,14 @@ ElicitationModal.styles = [
         background: var(--accent-primary);
       }
 
+      .toggle-switch input:checked + .toggle-track:hover {
+        background: var(--accent-secondary);
+      }
+
+      .toggle-switch input:focus-visible + .toggle-track {
+        box-shadow: 0 0 0 2px var(--glow-primary);
+      }
+
       .toggle-switch input:checked + .toggle-track::after {
         transform: translateX(20px);
       }
@@ -84239,7 +86718,7 @@ var OverflowMenu = class extends i4 {
     return b2`
       <button
         class="trigger"
-        @click=${() => this._toggle()}
+        @click=${(e8) => this._toggle(e8)}
         title="More actions"
         aria-label="More actions"
       >
@@ -84519,7 +86998,7 @@ var InstancePanel = class extends i4 {
     return b2`
       <button
         class="instance-pill"
-        @click=${() => this._toggle()}
+        @click=${(e8) => this._toggle(e8)}
         title="Instances are separate data containers — like multiple accounts in the same app. Click to switch."
         aria-label="Current instance: ${display}"
         aria-haspopup="true"
@@ -85746,7 +88225,7 @@ ContextBar.styles = [
         backdrop-filter: blur(20px);
         border: 1px solid var(--border-glass);
         border-radius: var(--radius-md);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+        box-shadow: var(--shadow-lg);
         padding: 4px;
         z-index: 100;
       }
@@ -85757,7 +88236,7 @@ ContextBar.styles = [
         padding: 6px 10px;
         border: none;
         background: none;
-        color: var(--t-secondary);
+        color: var(--t-muted);
         font-size: var(--text-sm);
         font-family: inherit;
         text-align: left;
@@ -85783,7 +88262,7 @@ ContextBar.styles = [
         font-size: var(--text-2xs);
         font-weight: 700;
         letter-spacing: 0.08em;
-        color: #4ade80;
+        color: var(--color-success);
         text-transform: uppercase;
         margin-left: auto;
       }
@@ -85792,8 +88271,8 @@ ContextBar.styles = [
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: #4ade80;
-        box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.6);
+        background: var(--color-success);
+        box-shadow: 0 0 6px 2px var(--color-success-glow);
         animation: live-pulse 2s ease-in-out infinite;
       }
 
@@ -85801,11 +88280,11 @@ ContextBar.styles = [
         0%,
         100% {
           opacity: 1;
-          box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.6);
+          box-shadow: 0 0 6px 2px var(--color-success-glow);
         }
         50% {
           opacity: 0.5;
-          box-shadow: 0 0 3px 1px rgba(74, 222, 128, 0.3);
+          box-shadow: 0 0 3px 1px var(--color-success-glow);
         }
       }