@portel/photon 1.18.0 → 1.20.0

package/dist/beam.bundle.js

@@ -19402,7 +19402,7 @@ ConfirmDialog.styles = [
       }
 
       .btn-cancel:hover {
-        background: var(--bg-glass-strong, rgba(255, 255, 255, 0.08));
+        background: var(--bg-glass-strong);
       }
 
       .btn-confirm {
@@ -19442,10 +19442,12 @@ ConfirmDialog = __decorateClass([
   t4("confirm-dialog")
 ], ConfirmDialog);
 async function confirmDialog(message, options) {
-  let dialog = document.querySelector("confirm-dialog");
+  const beamApp = document.querySelector("beam-app");
+  const root = beamApp?.shadowRoot ?? document.body;
+  let dialog = root.querySelector("confirm-dialog");
   if (!dialog) {
     dialog = document.createElement("confirm-dialog");
-    document.body.appendChild(dialog);
+    root.appendChild(dialog);
   }
   return dialog.show(message, options);
 }
@@ -21738,8 +21740,13 @@ var MCPClientService = class {
             id: tool["x-photon-id"] || serverName,
             // Use hash ID, fallback to name
             name: serverName,
+            shortName: tool["x-photon-short-name"],
+            namespace: tool["x-photon-namespace"],
+            qualifiedName: tool["x-photon-qualified-name"],
             path: tool["x-photon-path"],
             // File path for View Source
+            editable: tool["x-photon-editable"] ?? false,
+            // User-owned (at baseDir root)
             description: tool["x-photon-description"],
             icon: tool["x-photon-icon"],
             internal: tool["x-photon-internal"],
@@ -22433,6 +22440,62 @@ var ViewportManager = class {
   }
 };
 
+// src/auto-ui/frontend/utils/beam-route.ts
+function decodeBeamPathSegments(pathname) {
+  return pathname.split("/").filter(Boolean).map((segment) => {
+    try {
+      return decodeURIComponent(segment);
+    } catch {
+      return segment;
+    }
+  });
+}
+function matchesNamespacedPhoton(photon, namespace, shortName) {
+  return photon.namespace === namespace && (photon.shortName || photon.name) === shortName;
+}
+function parseBeamRoutePath(pathname, photons, externalMCPs = []) {
+  const segments = decodeBeamPathSegments(pathname);
+  if (segments.length === 0) {
+    return { photonName: null, methodNames: [] };
+  }
+  if (segments.length === 1) {
+    return { photonName: segments[0], methodNames: [] };
+  }
+  if (segments.length === 2) {
+    const [first, second] = segments;
+    const namespacedPhoton2 = photons.find(
+      (photon) => matchesNamespacedPhoton(photon, first, second)
+    );
+    if (namespacedPhoton2) {
+      return { photonName: namespacedPhoton2.name, methodNames: [] };
+    }
+    return { photonName: first, methodNames: second.split("+").filter(Boolean) };
+  }
+  const namespace = segments[segments.length - 3];
+  const shortName = segments[segments.length - 2];
+  const methodSegment = segments[segments.length - 1];
+  const namespacedPhoton = photons.find((photon) => matchesNamespacedPhoton(photon, namespace, shortName)) || externalMCPs.find((photon) => matchesNamespacedPhoton(photon, namespace, shortName));
+  if (namespacedPhoton) {
+    return {
+      photonName: namespacedPhoton.name,
+      methodNames: methodSegment.split("+").filter(Boolean)
+    };
+  }
+  const photonName = segments[segments.length - 2];
+  return { photonName, methodNames: methodSegment.split("+").filter(Boolean) };
+}
+function buildBeamRoutePath(photon, methodName, splitPanelMethodNames = []) {
+  if (!photon) return "/";
+  const baseSegments = photon.namespace && photon.shortName ? [photon.namespace, photon.shortName] : [photon.name];
+  if (!methodName) {
+    return "/" + baseSegments.map((segment) => encodeURIComponent(segment)).join("/");
+  }
+  const methodSegments = [methodName, ...splitPanelMethodNames].map(
+    (name2) => encodeURIComponent(name2)
+  );
+  return "/" + baseSegments.map((segment) => encodeURIComponent(segment)).join("/") + "/" + methodSegments.join("+");
+}
+
 // src/auto-ui/frontend/components/beam-app.ts
 var THEME_STORAGE_KEY = "beam-theme";
 var PROTOCOL_STORAGE_KEY = "beam-protocol";
@@ -22447,6 +22510,10 @@ var BeamApp = class extends i4 {
     this._reconnectAttempt = 0;
     this._connectRetries = 0;
     this._sidebarVisible = false;
+    this._sidebarWidth = parseInt(
+      localStorage.getItem("beam-sidebar-width") || "300",
+      10
+    );
     this._focusMode = false;
     this._viewMode = "full";
     this._photons = [];
@@ -22501,7 +22568,11 @@ var BeamApp = class extends i4 {
     this._splitPanels = [];
     this._methodPickerOpen = false;
     this._methodPickerPanelId = null;
+    this._splitPrimaryWidth = null;
+    this._mainTab = "methods";
     this._nextPanelId = 0;
+    // Maps progressToken → panelId so progress events route to the correct split pane
+    this._panelProgressTokens = /* @__PURE__ */ new Map();
     // Collection auto-subscription for ReactiveArray/Map/Set events
     this._collectionUnsubscribes = [];
     this._currentCollectionName = null;
@@ -22536,9 +22607,13 @@ var BeamApp = class extends i4 {
     this._initialConnectDone = false;
     this._handleRouteChange = () => {
       void (async () => {
-        const fullPath = window.location.pathname.slice(1);
         const queryPart = window.location.search.slice(1);
-        const [photonName, methodName] = fullPath.split("/");
+        const { photonName, methodNames } = parseBeamRoutePath(
+          window.location.pathname,
+          this._photons,
+          this._externalMCPs
+        );
+        const methodName = methodNames[0];
         this._sharedFormParams = null;
         let sharedParams = {};
         if (queryPart) {
@@ -22601,10 +22676,11 @@ var BeamApp = class extends i4 {
             if (photon.isExternalMCP && photon.hasMcpApp) {
               this._selectedMethod = null;
               this._view = "mcp-app";
+              this._mainTab = "app";
               return;
             }
             if (methodName && photon.methods) {
-              const [firstMethodName, secondMethodName] = methodName.split("+");
+              const [firstMethodName, secondMethodName] = methodNames;
               const method = photon.methods.find((m3) => m3.name === firstMethodName);
               if (method) {
                 if (Object.keys(sharedParams).length > 0) {
@@ -22615,11 +22691,13 @@ var BeamApp = class extends i4 {
                 }
                 this._selectedMethod = method;
                 this._view = "form";
+                if (photon.isApp && photon.appEntry?.name === method.name) {
+                  this._mainTab = "app";
+                } else if (!photon.isApp) {
+                  this._mainTab = "methods";
+                }
                 this._maybeAutoInvoke(method);
                 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") {
@@ -22642,10 +22720,12 @@ var BeamApp = class extends i4 {
               }
               this._selectedMethod = photon.appEntry;
               this._view = "form";
+              this._mainTab = "app";
               this._maybeAutoInvoke(photon.appEntry);
             } else {
               this._selectedMethod = null;
               this._view = "list";
+              this._mainTab = "methods";
             }
           }
         }
@@ -22845,7 +22925,7 @@ var BeamApp = class extends i4 {
       try {
         const res = await fetch("/api/marketplace/add", {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", "X-Photon-Request": "1" },
           body: JSON.stringify({ name: name2 }),
           signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
         });
@@ -22874,15 +22954,19 @@ var BeamApp = class extends i4 {
     this._showForkDialog = false;
     this._forkPhotonName = "";
     this._forkOriginRepo = "";
+    this._forkRequireNewName = false;
+    this._forkSuggestedName = "";
     this._forkTargets = [];
     this._handleFork = async () => {
       if (!this._selectedPhoton) return;
-      this._forkPhotonName = this._selectedPhoton.name;
+      this._forkPhotonName = this._selectedPhoton.qualifiedName || this._selectedPhoton.name;
       this._forkOriginRepo = this._selectedPhoton.installSource?.marketplace || "";
+      this._forkRequireNewName = !this._selectedPhoton.installSource;
+      this._forkSuggestedName = `${this._selectedPhoton.shortName || this._selectedPhoton.name}-copy`;
       await this._openForkDialog();
     };
     this._handleForkConfirm = async (e8) => {
-      const { target: target2 } = e8.detail;
+      const { target: target2, newName } = e8.detail;
       const name2 = this._forkPhotonName;
       if (!name2) return;
       this._showForkDialog = false;
@@ -22890,8 +22974,8 @@ var BeamApp = class extends i4 {
       try {
         const res = await fetch("/api/marketplace/fork", {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name: name2, target: target2 }),
+          headers: { "Content-Type": "application/json", "X-Photon-Request": "1" },
+          body: JSON.stringify({ name: name2, target: target2, newName }),
           signal: AbortSignal.timeout(3e4)
         });
         const result = await res.json();
@@ -22918,6 +23002,8 @@ var BeamApp = class extends i4 {
       const { name: name2 } = e8.detail;
       this._forkPhotonName = name2;
       this._forkOriginRepo = "";
+      this._forkRequireNewName = false;
+      this._forkSuggestedName = `${name2}-copy`;
       await this._openForkDialog();
     };
     this._handleContribute = async () => {
@@ -22927,7 +23013,7 @@ var BeamApp = class extends i4 {
       try {
         const res = await fetch("/api/marketplace/contribute", {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", "X-Photon-Request": "1" },
           body: JSON.stringify({ name: name2 }),
           signal: AbortSignal.timeout(6e4)
         });
@@ -23021,7 +23107,8 @@ var BeamApp = class extends i4 {
             const data = mcpClient.parseToolResult(result);
             if (data && data.code) {
               this._sourceData = data;
-              this._showSourceModal = true;
+              this._mainTab = "source";
+              this._view = "source";
             } else {
               showToast("No source code returned", "error");
             }
@@ -23033,14 +23120,17 @@ var BeamApp = class extends i4 {
     };
     /** Navigate to inline source view (Phase 2) */
     this._handleViewSourceInline = async () => {
-      if (this._view === "source") {
-        this._view = "studio";
+      if (this._view === "source" || this._view === "studio") {
         return;
       }
-      await this._handleViewSource();
-      if (this._sourceData) {
-        this._showSourceModal = false;
-        this._view = "source";
+      const isEditable = this._selectedPhoton?.editable && !this._selectedPhoton?.isExternalMCP;
+      if (isEditable) {
+        this._view = "studio";
+      } else {
+        await this._handleViewSource();
+        if (this._sourceData) {
+          this._view = "source";
+        }
       }
     };
     /** Open settings for the current photon (Phase 3) */
@@ -23110,12 +23200,15 @@ var BeamApp = class extends i4 {
           const newName = detail.cloneName;
           if (!newName) return;
           try {
-            const res = await fetch(`/api/instances/${photonName}/${detail.instance}/clone`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ newName }),
-              signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
-            });
+            const res = await fetch(
+              `/api/instances/${encodeURIComponent(photonName)}/${encodeURIComponent(detail.instance)}/clone`,
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ newName }),
+                signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+              }
+            );
             if (res.ok) {
               await this._fetchInstances(photonName);
               showToast(`Cloned as: ${newName}`, "success");
@@ -23132,12 +23225,15 @@ var BeamApp = class extends i4 {
           const newName = detail.newName;
           if (!newName) return;
           try {
-            const res = await fetch(`/api/instances/${photonName}/${detail.instance}/rename`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ newName }),
-              signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
-            });
+            const res = await fetch(
+              `/api/instances/${encodeURIComponent(photonName)}/${encodeURIComponent(detail.instance)}/rename`,
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ newName }),
+                signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+              }
+            );
             if (res.ok) {
               await mcpClient.callTool(`${photonName}/_use`, { name: newName });
               this._setCurrentInstance(photonName, newName);
@@ -23159,10 +23255,13 @@ var BeamApp = class extends i4 {
             return;
           }
           try {
-            const res = await fetch(`/api/instances/${photonName}/${instanceToDelete}`, {
-              method: "DELETE",
-              signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
-            });
+            const res = await fetch(
+              `/api/instances/${encodeURIComponent(photonName)}/${encodeURIComponent(instanceToDelete)}`,
+              {
+                method: "DELETE",
+                signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+              }
+            );
             if (res.ok) {
               await mcpClient.callTool(`${photonName}/_use`, { name: "default" });
               this._setCurrentInstance(photonName, "default");
@@ -23181,11 +23280,19 @@ var BeamApp = class extends i4 {
     };
     this._handleDeletePhoton = async () => {
       this._closeSettingsMenu();
-      if (await confirmDialog(
-        `Are you sure you want to delete "${this._selectedPhoton?.name}"? This cannot be undone.`,
-        { confirm: "Delete", destructive: true }
-      )) {
-        void this._invokeMakerMethod("delete");
+      if (await confirmDialog(`Remove "${this._selectedPhoton?.name}"? It will be moved to trash.`, {
+        confirm: "Remove",
+        destructive: true
+      })) {
+        const deletedName = this._selectedPhoton?.name;
+        await this._invokeMakerMethod("delete");
+        if (deletedName) {
+          this._photons = this._photons.filter((p5) => p5.name !== deletedName);
+          this._selectedPhoton = this._photons[0] || null;
+          this._selectedMethod = null;
+          this._lastResult = null;
+          this.requestUpdate();
+        }
       }
     };
     /**
@@ -23469,16 +23576,9 @@ var BeamApp = class extends i4 {
           this._showHelp = false;
           return;
         }
-        if (this._showPhotonHelp) {
-          this._showPhotonHelp = false;
-          return;
-        }
-        if (this._view === "source") {
-          this._view = "list";
-          return;
-        }
-        if (this._showSourceModal) {
-          this._closeSourceModal();
+        if (this._mainTab === "help" || this._mainTab === "source") {
+          this._mainTab = "methods";
+          if (this._view === "source") this._view = "list";
           return;
         }
         if (this._view === "form" && this._selectedMethod) {
@@ -23593,6 +23693,26 @@ var BeamApp = class extends i4 {
         this._photonHelpLoading = false;
       }
     };
+    /** Load help content for inline help tab view */
+    this._loadPhotonHelp = async () => {
+      if (!this._selectedPhoton) return;
+      this._photonHelpMarkdown = "";
+      this._photonHelpLoading = true;
+      const markdown = await mcpClient.getPhotonHelp(this._selectedPhoton.name);
+      if (markdown) {
+        this._photonHelpMarkdown = markdown;
+      } else {
+        this._photonHelpMarkdown = this._generatePhotonHelpMarkdown();
+      }
+      this._photonHelpLoading = false;
+      if (this._view === "source" || this._view === "studio") {
+        if (this._selectedMethod) {
+          this._view = "form";
+        } else {
+          this._view = "list";
+        }
+      }
+    };
     this._toggleFocusMode = () => {
       this._focusMode = !this._focusMode;
       if (this._focusMode) {
@@ -23696,7 +23816,8 @@ var BeamApp = class extends i4 {
               void this._handleRemove();
               break;
             case "help":
-              void this._showPhotonHelpModal();
+              this._mainTab = "help";
+              void this._loadPhotonHelp();
               break;
             case "fullscreen":
               this._handleFullscreen();
@@ -24230,8 +24351,12 @@ var BeamApp = class extends i4 {
             }
           }
           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;
+            const { photonName: pathPhotonName } = parseBeamRoutePath(
+              window.location.pathname,
+              this._photons,
+              this._externalMCPs
+            );
+            const routePhoton = pathPhotonName ? this._photons.find((p5) => p5.name === pathPhotonName) || this._externalMCPs.find((p5) => p5.name === pathPhotonName) : null;
             if (routePhoton) {
               void this._handleRouteChange();
             } else {
@@ -24253,18 +24378,15 @@ var BeamApp = class extends i4 {
       });
       mcpClient.on("progress", (data) => {
         this._log("info", data.message || "Processing...");
-        if (typeof data.progress === "number") {
-          if (data.progress > 0) {
-            this._progress = {
-              value: data.total ? data.progress / data.total : data.progress,
-              message: data.message || "Processing..."
-            };
-          } else {
-            this._progress = {
-              value: -1,
-              message: data.message || "Processing..."
-            };
-          }
+        const panelId = data.progressToken != null ? this._panelProgressTokens.get(data.progressToken) : void 0;
+        const progressValue = typeof data.progress === "number" ? data.progress > 0 ? {
+          value: data.total ? data.progress / data.total : data.progress,
+          message: data.message || "Processing..."
+        } : { value: -1, message: data.message || "Processing..." } : null;
+        if (panelId && progressValue) {
+          this._updatePanel(panelId, { progress: progressValue });
+        } else if (progressValue) {
+          this._progress = progressValue;
         }
       });
       mcpClient.on("toast", (data) => {
@@ -24335,6 +24457,7 @@ var BeamApp = class extends i4 {
               "stack",
               "columns",
               "qr",
+              "guide",
               "slides",
               "presentation"
             ]);
@@ -24565,17 +24688,16 @@ var BeamApp = class extends i4 {
     } else if (!this._selectedPhoton) {
       path = "/";
     } else {
-      path = "/" + this._selectedPhoton.name;
-      if (this._selectedMethod) {
-        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`;
-          }
-        }
-      }
+      const splitPanelMethodNames = this._selectedMethod ? this._splitPanels.map((panel) => {
+        if (panel.type === "method" && panel.method) return panel.method.name;
+        if (panel.type === "source") return "source";
+        return null;
+      }).filter((name2) => !!name2) : [];
+      path = buildBeamRoutePath(
+        this._selectedPhoton,
+        this._selectedMethod?.name,
+        splitPanelMethodNames
+      );
     }
     if (replace2) {
       history.replaceState(null, "", path);
@@ -24964,7 +25086,7 @@ var BeamApp = class extends i4 {
 
       <nav
         class="sidebar-area glass-panel ${this._sidebarVisible ? "visible" : ""}"
-        style="margin: var(--space-sm); border-radius: var(--radius-md);"
+        style="margin: var(--space-sm); border-radius: var(--radius-md); --sidebar-width: ${this._sidebarWidth}px;"
         aria-label="Photon navigation"
       >
         <beam-sidebar
@@ -24975,6 +25097,57 @@ var BeamApp = class extends i4 {
           .connected=${this._connected}
           .reconnecting=${this._reconnecting}
           .updatesAvailable=${this._updatesAvailable.length}
+          .mainTab=${this._mainTab}
+          .isApp=${!!(this._selectedPhoton?.isApp || this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp)}
+          .hasSettings=${!!(this._selectedPhoton?.hasSettings && !this._selectedPhoton?.isExternalMCP)}
+          .isExternalMCP=${!!this._selectedPhoton?.isExternalMCP}
+          .hasPath=${!!this._selectedPhoton?.path}
+          @tab-change=${(e8) => {
+      const tab = e8.detail.tab;
+      this._mainTab = tab;
+      if (tab === "methods") {
+        this._closeSecondPanel();
+        this._selectedMethod = null;
+        this._view = "list";
+        this._updateRoute();
+        return;
+      }
+      if (tab === "source") {
+        void this._handleViewSourceInline();
+        return;
+      }
+      if (tab === "help") {
+        void this._loadPhotonHelp();
+        return;
+      }
+      if (this._view === "source" || this._view === "studio") {
+        if (this._selectedMethod) {
+          this._view = "form";
+        } else {
+          this._view = "list";
+        }
+      }
+      if (tab === "settings" && this._selectedPhoton) {
+        const settingsMethod = this._selectedPhoton.methods?.find(
+          (m3) => m3.name === "settings"
+        );
+        if (settingsMethod) {
+          this._selectedMethod = settingsMethod;
+          this._view = "form";
+          this._maybeAutoInvoke(settingsMethod);
+        }
+        return;
+      }
+      if (tab === "app" && this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp) {
+        this._view = "mcp-app";
+      }
+      if (tab === "app" && this._selectedPhoton?.isApp && this._selectedPhoton?.appEntry) {
+        this._selectedMethod = this._selectedPhoton.appEntry;
+        this._view = "form";
+        this._maybeAutoInvoke(this._selectedPhoton.appEntry);
+      }
+    }}
+          @toggle-focus=${() => this._toggleFocusMode()}
           @home=${this._goHome}
           @select=${(e8) => this._handlePhotonSelectMobile(e8)}
           @marketplace=${() => this._handleMarketplaceMobile()}
@@ -24990,7 +25163,7 @@ var BeamApp = class extends i4 {
     }}
           @open-studio=${(e8) => {
       const photon = this._photons.find((p5) => p5.name === e8.detail.photonName);
-      if (photon) {
+      if (photon?.editable && !photon?.isExternalMCP) {
         this._selectedPhoton = photon;
         this._view = "studio";
       }
@@ -25004,61 +25177,20 @@ var BeamApp = class extends i4 {
       }
     }}
         ></beam-sidebar>
+        <div
+          class="sidebar-resize-handle"
+          @pointerdown=${(e8) => this._handleSidebarResizeStart(e8)}
+        ></div>
       </nav>
 
-      <main
-        class="main-area"
-        id="main-content"
-        tabindex="-1"
-        aria-label="Main content"
-        style="${this._splitViewEnabled ? "overflow: hidden !important;" : ""}"
-      >
-        ${this._focusMode && this._selectedPhoton ? b2`<div class="focus-toolbar">
-              ${this._selectedMethod && !this._selectedPhoton.isApp ? b2`<button
-                    class="focus-toolbar-back"
-                    @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>` : ""}
-              <button
-                @click=${this._toggleFocusMode}
-                @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="Exit focus mode"
-              >
-                ${collapse}
-              </button>
-            </div>` : ""}
-        ${this._selectedPhoton ? b2`<div class="main-toolbar">
-              <div>
+      <main class="main-area" id="main-content" tabindex="-1" aria-label="Main content">
+        <div
+          class="main-content-scroll"
+          style="${this._splitViewEnabled ? "overflow: hidden !important; padding: 0;" : this._mainTab === "app" && (this._selectedPhoton?.isApp || this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp) ? "overflow: hidden; padding: 0;" : this._mainTab === "source" ? "padding: 0; overflow: hidden;" : this._view === "studio" ? "padding: 0; overflow: hidden;" : ""}"
+        >
+          ${this._focusMode && this._selectedPhoton ? b2`<div class="focus-toolbar">
                 ${this._selectedMethod && !this._selectedPhoton.isApp ? b2`<button
-                      class="beam-back-btn"
+                      class="focus-toolbar-back"
                       @click=${() => this._handleBackFromMethod()}
                       @mouseenter=${(e8) => {
       e8.target.style.color = "var(--t-primary)";
@@ -25083,31 +25215,7 @@ var BeamApp = class extends i4 {
                         <path d="m15 18-6-6 6-6" />
                       </svg>
                     </button>` : ""}
-              </div>
-              <div style="display: flex; gap: 4px; align-items: center;">
-                ${this._selectedPhoton.isApp ? b2`<div style="position: relative;">
-                      <button
-                        class="beam-fullscreen-btn"
-                        @click=${() => {
-      this._methodPickerOpen = !this._methodPickerOpen;
-      this._methodPickerPanelId = null;
-    }}
-                        @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>` : ""}
                 <button
-                  class="beam-fullscreen-btn"
                   @click=${this._toggleFocusMode}
                   @mouseenter=${(e8) => {
       e8.target.style.color = "var(--t-primary)";
@@ -25117,18 +25225,21 @@ var BeamApp = class extends i4 {
       e8.target.style.color = "var(--t-muted)";
       e8.target.style.borderColor = "var(--border-glass)";
     }}
-                  title=${this._focusMode ? "Exit focus mode" : "Focus mode"}
+                  title="Exit focus mode"
                 >
-                  ${this._focusMode ? collapse : expand}
+                  ${collapse}
                 </button>
-              </div>
-            </div>` : ""}
-        ${this._renderContent()}
-        <activity-log
-          .items=${this._activityLog}
-          .filter=${this._selectedPhoton?.name}
-          @clear=${() => this._activityLog = []}
-        ></activity-log>
+              </div>` : ""}
+          ${this._selectedPhoton && !this._selectedMethod && this._mainTab === "methods" ? b2`<div class="main-toolbar">
+                <div style="flex: 1; min-width: 0;">${this._renderPhotonToolbar()}</div>
+              </div>` : ""}
+          ${this._mainTab === "log" ? b2`<activity-log
+                .items=${this._activityLog}
+                .filter=${this._selectedPhoton?.name}
+                .fullscreen=${true}
+                @clear=${() => this._activityLog = []}
+              ></activity-log>` : this._mainTab === "help" && this._selectedPhoton ? this._renderPhotonHelpView() : this._mainTab === "settings" && this._selectedPhoton ? this._renderSettingsView() : this._mainTab === "methods" && !this._selectedMethod && (this._selectedPhoton?.isApp || this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp) ? this._renderMethodsBentoOnly() : this._renderContent()}
+        </div>
       </main>
 
       <toast-manager></toast-manager>
@@ -25149,13 +25260,13 @@ var BeamApp = class extends i4 {
             </div>
           ` : ""}
       ${this._showHelp ? this._renderHelpModal() : ""}
-      ${this._showPhotonHelp ? this._renderPhotonHelpModal() : ""}
-      ${this._showSourceModal ? this._renderSourceModal() : ""}
       ${this._selectedPrompt?.content ? this._renderPromptModal() : ""}
       ${this._selectedResource?.content ? this._renderResourceModal() : ""}
       ${this._showForkDialog ? b2`<fork-dialog
             .photonName=${this._forkPhotonName}
             .originRepo=${this._forkOriginRepo}
+            .requireNewName=${this._forkRequireNewName}
+            .suggestedName=${this._forkSuggestedName}
             .targets=${this._forkTargets}
             @fork-confirm=${this._handleForkConfirm}
             @fork-cancel=${() => {
@@ -25172,6 +25283,43 @@ var BeamApp = class extends i4 {
       ></elicitation-modal>
     `;
   }
+  _renderMethodsBentoOnly() {
+    if (!this._selectedPhoton) return b2``;
+    const methods = this._getVisibleMethods();
+    if (methods.length === 0)
+      return b2`<p style="color: var(--t-muted); padding: var(--space-md);">
+        No methods available.
+      </p>`;
+    const hasTools = methods.some((m3) => !m3.isTemplate);
+    const hasPrompts = methods.some((m3) => m3.isTemplate);
+    const title = hasTools && hasPrompts ? "Methods & Prompts" : hasPrompts ? "Prompts" : "Methods";
+    return b2`
+      ${this._renderAnchorNav()}
+      <div id="photon-methods" class="bento-methods">
+        <h3 class="bento-section-title">${title}</h3>
+        <div class="cards-grid">
+          ${methods.map(
+      (method) => b2`
+              <method-card
+                .method=${method}
+                .photonName=${this._selectedPhoton.name}
+                .selected=${this._selectedMethod?.name === method.name}
+                @select=${(e8) => {
+        this._selectedMethod = e8.detail.method;
+        this._view = "form";
+        this._mainTab = "methods";
+        this._updateRoute();
+      }}
+              ></method-card>
+            `
+    )}
+        </div>
+      </div>
+      <div id="photon-prompts" class="bento-bottom-grid">
+        ${this._renderPromptsSection()} ${this._renderResourcesSection()}
+      </div>
+    `;
+  }
   _renderContent() {
     if (this._view === "source") {
       return this._renderSourceView();
@@ -25729,62 +25877,72 @@ ${photon.errorMessage || "Unknown error"}</pre
             ` : ""}
         <div
           class="glass-panel"
-          style="padding: 0; overflow: hidden; min-height: calc(100vh - 80px); position: relative; ${hasMultipleUIs ? "border-radius: 0 0 var(--radius-md) var(--radius-md);" : ""}"
+          style="padding: 0; overflow: hidden; ${this._mainTab === "app" ? "flex: 1; display: flex; flex-direction: column;" : "min-height: calc(100vh - 80px);"} position: relative; ${hasMultipleUIs ? "border-radius: 0 0 var(--radius-md) var(--radius-md);" : ""}"
         >
           <mcp-app-renderer
             .mcpName=${this._selectedPhoton.name}
             .appUri=${currentUri}
             .linkedTool=${linkedMethod?.name || ""}
             .theme=${this._theme}
-            style="height: calc(100vh - ${hasMultipleUIs ? "120px" : "80px"});"
+            style="${this._mainTab === "app" ? "flex: 1; height: 100%;" : `height: calc(100vh - ${hasMultipleUIs ? "120px" : "80px"});`}"
           ></mcp-app-renderer>
         </div>
 
-        ${this._renderPhotonToolbar()} ${this._renderAnchorNav()}
-        <div id="photon-methods" class="bento-methods">
-          <h3 class="bento-section-title">
-            ${(() => {
+        ${this._mainTab !== "app" ? b2`
+              ${this._renderAnchorNav()}
+              <div id="photon-methods" class="bento-methods">
+                <h3 class="bento-section-title">
+                  ${(() => {
         const visible = this._getVisibleMethods();
         const hasTools = visible.some((m3) => !m3.isTemplate);
         const hasPrompts = visible.some((m3) => m3.isTemplate);
         return hasTools && hasPrompts ? "Methods & Prompts" : hasPrompts ? "Prompts" : "Methods";
       })()}
-          </h3>
-          ${this._getVisibleMethods().length > 0 ? b2`
-                <div class="cards-grid">
-                  ${this._getVisibleMethods().map(
+                </h3>
+                ${this._getVisibleMethods().length > 0 ? b2`
+                      <div class="cards-grid">
+                        ${this._getVisibleMethods().map(
         (method) => b2`
-                      <method-card
-                        .method=${method}
-                        .photonName=${this._selectedPhoton.name}
-                        .selected=${this._selectedMethod?.name === method.name}
-                        @select=${(e8) => {
+                            <method-card
+                              .method=${method}
+                              .photonName=${this._selectedPhoton.name}
+                              .selected=${this._selectedMethod?.name === method.name}
+                              @select=${(e8) => {
           this._selectedMethod = e8.detail.method;
           this._view = "form";
           this._updateRoute();
         }}
-                      ></method-card>
-                    `
+                            ></method-card>
+                          `
       )}
-                </div>
-              ` : ""}
-        </div>
-        <div id="photon-prompts" class="bento-bottom-grid">
-          ${this._renderPromptsSection()} ${this._renderResourcesSection()}
-        </div>
+                      </div>
+                    ` : ""}
+              </div>
+              <div id="photon-prompts" class="bento-bottom-grid">
+                ${this._renderPromptsSection()} ${this._renderResourcesSection()}
+              </div>
+            ` : ""}
       `;
     }
     if (this._view === "form" && this._selectedMethod) {
       const isAppMain = this._selectedPhoton.isApp && this._selectedMethod.name === "main";
       if (isAppMain && !this._selectedMethod.linkedUi) {
         const otherMethods = this._getVisibleMethods().filter((m3) => m3.name !== "main");
+        const appTabActive = this._mainTab === "app";
         return b2`
           <app-layout
             .photonName=${this._selectedPhoton.name}
             .photonIcon=${this._selectedPhoton.appEntry?.icon || "\u{1F4F1}"}
+            .hideBelow=${appTabActive}
           >
-            <div slot="app" style="min-height: calc(100vh - 140px);">
-              <div class="glass-panel" style="min-height: calc(100vh - 140px); overflow: hidden;">
+            <div
+              slot="app"
+              style="${appTabActive ? "height: calc(100vh - 80px);" : "min-height: calc(100vh - 140px);"}"
+            >
+              <div
+                class="glass-panel"
+                style="${appTabActive ? "height: calc(100vh - 80px);" : "min-height: calc(100vh - 140px);"} overflow: hidden;"
+              >
                 ${this._renderMethodBody({
           photon: this._selectedPhoton,
           method: this._selectedMethod,
@@ -25799,44 +25957,45 @@ ${photon.errorMessage || "Unknown error"}</pre
               </div>
             </div>
             <div slot="popout" style="height: 100%;"></div>
-            <div slot="below-fold">
-              ${this._renderPhotonToolbar()} ${this._renderAnchorNav()}
-              ${otherMethods.length > 0 ? b2`
-                    <div id="photon-methods" class="bento-methods">
-                      <h3 class="bento-section-title">
-                        ${(() => {
+            ${appTabActive ? b2`<div slot="below-fold"></div>` : b2`<div slot="below-fold">
+                  ${this._renderAnchorNav()}
+                  ${otherMethods.length > 0 ? b2`
+                        <div id="photon-methods" class="bento-methods">
+                          <h3 class="bento-section-title">
+                            ${(() => {
           const hasTools = otherMethods.some((m3) => !m3.isTemplate);
           const hasPrompts = otherMethods.some((m3) => m3.isTemplate);
           return hasTools && hasPrompts ? "Methods & Prompts" : hasPrompts ? "Prompts" : "Methods";
         })()}
-                      </h3>
-                      <div class="cards-grid">
-                        ${otherMethods.map(
+                          </h3>
+                          <div class="cards-grid">
+                            ${otherMethods.map(
           (method) => b2`
-                            <method-card
-                              .method=${method}
-                              .photonName=${this._selectedPhoton.name}
-                              @select=${(e8) => this._handleMethodSelect(e8)}
-                              @update-metadata=${this._handleMethodMetadataUpdate}
-                            ></method-card>
-                          `
+                                <method-card
+                                  .method=${method}
+                                  .photonName=${this._selectedPhoton.name}
+                                  @select=${(e8) => this._handleMethodSelect(e8)}
+                                  @update-metadata=${this._handleMethodMetadataUpdate}
+                                ></method-card>
+                              `
         )}
-                      </div>
-                    </div>
-                  ` : ""}
-              <div id="photon-prompts" class="bento-bottom-grid">
-                ${this._renderPromptsSection()} ${this._renderResourcesSection()}
-              </div>
-            </div>
+                          </div>
+                        </div>
+                      ` : ""}
+                  <div id="photon-prompts" class="bento-bottom-grid">
+                    ${this._renderPromptsSection()} ${this._renderResourcesSection()}
+                  </div>
+                </div>`}
           </app-layout>
         `;
       }
       if (this._selectedMethod.linkedUi) {
         const otherMethods = isAppMain ? this._getVisibleMethods().filter((m3) => m3.name !== "main") : [];
         const isExternalMCP = this._selectedPhoton.isExternalMCP;
+        const appFillStyle = this._mainTab === "app" && isAppMain ? "height: 100%; min-height: 0;" : "height: calc(100vh - 140px);";
         const appRenderer = this._isExecuting ? b2`
               <div
-                style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: calc(100vh - 140px);"
+                style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; ${appFillStyle}"
               >
                 <span class="spinner"></span>
                 <span style="color: var(--t-muted); font-size: 13px;">
@@ -25849,7 +26008,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                   .appUri=${`ui://${this._selectedPhoton.name}/${this._selectedMethod.linkedUi}`}
                   .linkedTool=${this._selectedMethod.name}
                   .theme=${this._theme}
-                  style="height: calc(100vh - 140px);"
+                  style="${appFillStyle}"
                 ></mcp-app-renderer>
               ` : b2`
                 <custom-ui-renderer
@@ -25859,7 +26018,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                   .theme=${this._theme}
                   .initialResult=${this._lastResult}
                   .revision=${this._customUiRevision}
-                  style="height: calc(100vh - 140px);"
+                  style="${appFillStyle}"
                 ></custom-ui-renderer>
               `;
         if (isAppMain) {
@@ -25877,7 +26036,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                 ${this._splitPanels.map(
               (panel) => b2`
                     <div
-                      style="flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg-panel);"
+                      style="flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-panel);"
                     >
                       ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
                     </div>
@@ -25886,46 +26045,54 @@ ${photon.errorMessage || "Unknown error"}</pre
               </div>
             `;
           }
+          const appTabActive2 = this._mainTab === "app";
           return b2`
             <app-layout
               .photonName=${this._selectedPhoton.name}
               .photonIcon=${this._selectedPhoton.appEntry?.icon || "\u{1F4F1}"}
+              .hideBelow=${appTabActive2}
             >
-              <div slot="app" style="min-height: calc(100vh - 140px);">${appRenderer}</div>
+              <div
+                slot="app"
+                style="${appTabActive2 ? "height: 100%; min-height: 0; display: flex; flex-direction: column;" : "min-height: calc(100vh - 140px);"}"
+              >
+                ${appRenderer}
+              </div>
               <!-- Popout slot is lazily populated when app-layout toggles popout mode.
                    Eagerly creating a second renderer causes Safari to load two
                    iframes simultaneously (one with zero dimensions), leading to
                    blank screens. -->
               <div slot="popout" style="height: 100%;"></div>
-              <div slot="below-fold">
-                ${this._renderPhotonToolbar()} ${this._renderAnchorNav()}
-                ${otherMethods.length > 0 ? b2`
-                      <div id="photon-methods" class="bento-methods">
-                        <h3 class="bento-section-title">
-                          ${(() => {
+              ${appTabActive2 ? b2`<div slot="below-fold"></div>` : b2`<div slot="below-fold">
+                    ${this._renderAnchorNav()}
+                    ${otherMethods.length > 0 ? b2`
+                          <div id="photon-methods" class="bento-methods">
+                            <h3 class="bento-section-title">
+                              ${(() => {
             const hasTools = otherMethods.some((m3) => !m3.isTemplate);
             const hasPrompts = otherMethods.some((m3) => m3.isTemplate);
             return hasTools && hasPrompts ? "Methods & Prompts" : hasPrompts ? "Prompts" : "Methods";
           })()}
-                        </h3>
-                        <div class="cards-grid">
-                          ${otherMethods.map(
+                            </h3>
+                            <div class="cards-grid">
+                              ${otherMethods.map(
             (method) => b2`
-                              <method-card
-                                .method=${method}
-                                .photonName=${this._selectedPhoton.name}
-                                @select=${(e8) => this._handleMethodSelect(e8)}
-                                @update-metadata=${this._handleMethodMetadataUpdate}
-                              ></method-card>
-                            `
+                                  <method-card
+                                    .method=${method}
+                                    .photonName=${this._selectedPhoton.name}
+                                    .editable=${!!this._selectedPhoton.editable && !this._selectedPhoton.isExternalMCP}
+                                    @select=${(e8) => this._handleMethodSelect(e8)}
+                                    @update-metadata=${this._handleMethodMetadataUpdate}
+                                  ></method-card>
+                                `
           )}
-                        </div>
-                      </div>
-                    ` : ""}
-                <div id="photon-prompts" class="bento-bottom-grid">
-                  ${this._renderPromptsSection()} ${this._renderResourcesSection()}
-                </div>
-              </div>
+                            </div>
+                          </div>
+                        ` : ""}
+                    <div id="photon-prompts" class="bento-bottom-grid">
+                      ${this._renderPromptsSection()} ${this._renderResourcesSection()}
+                    </div>
+                  </div>`}
             </app-layout>
           `;
         }
@@ -25965,7 +26132,7 @@ ${photon.errorMessage || "Unknown error"}</pre
               ${this._splitPanels.map(
             (panel) => b2`
                   <div
-                    style="flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg-panel);"
+                    style="flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-panel);"
                   >
                     ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
                   </div>
@@ -26001,8 +26168,7 @@ ${photon.errorMessage || "Unknown error"}</pre
       return b2` ${this._renderMethodContent()} `;
     }
     return b2`
-      ${this._renderPhotonToolbar()} ${this._editingIcon ? this._renderEmojiPicker() : ""}
-      ${this._renderAnchorNav()}
+      ${this._editingIcon ? this._renderEmojiPicker() : ""} ${this._renderAnchorNav()}
 
       <div id="photon-methods" class="bento-methods">
         <h3 class="bento-section-title">
@@ -26075,6 +26241,50 @@ ${photon.errorMessage || "Unknown error"}</pre
   _closeSidebar() {
     this._sidebarVisible = false;
   }
+  _handleSplitResizeStart(e8) {
+    e8.preventDefault();
+    const divider = e8.currentTarget;
+    divider.setPointerCapture(e8.pointerId);
+    divider.classList.add("dragging");
+    const container = divider.parentElement;
+    const containerRect = container.getBoundingClientRect();
+    const startX = e8.clientX;
+    const primaryPanel = divider.previousElementSibling;
+    const startWidth = primaryPanel.getBoundingClientRect().width;
+    const onMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startX;
+      const minWidth = 200;
+      const maxWidth = containerRect.width - 200 - 5;
+      this._splitPrimaryWidth = Math.min(maxWidth, Math.max(minWidth, startWidth + delta));
+    };
+    const onUp = () => {
+      divider.classList.remove("dragging");
+      divider.removeEventListener("pointermove", onMove);
+      divider.removeEventListener("pointerup", onUp);
+    };
+    divider.addEventListener("pointermove", onMove);
+    divider.addEventListener("pointerup", onUp);
+  }
+  _handleSidebarResizeStart(e8) {
+    e8.preventDefault();
+    const handle = e8.currentTarget;
+    handle.setPointerCapture(e8.pointerId);
+    handle.classList.add("dragging");
+    const startX = e8.clientX;
+    const startWidth = this._sidebarWidth;
+    const onMove = (moveEvent) => {
+      const newWidth = Math.min(500, Math.max(200, startWidth + moveEvent.clientX - startX));
+      this._sidebarWidth = newWidth;
+    };
+    const onUp = () => {
+      handle.classList.remove("dragging");
+      localStorage.setItem("beam-sidebar-width", String(this._sidebarWidth));
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onUp);
+    };
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onUp);
+  }
   _handlePhotonSelectMobile(e8) {
     this._closeSidebar();
     void this._handlePhotonSelect(e8);
@@ -26141,6 +26351,7 @@ ${photon.errorMessage || "Unknown error"}</pre
     }
     if (this._selectedPhoton.isExternalMCP && this._selectedPhoton.hasMcpApp) {
       this._view = "mcp-app";
+      this._mainTab = "app";
       this._updateRoute();
       return;
     }
@@ -26168,18 +26379,20 @@ ${photon.errorMessage || "Unknown error"}</pre
       }
       this._selectedMethod = this._selectedPhoton.appEntry;
       this._view = "form";
+      this._mainTab = "app";
       this._updateRoute();
       this._maybeAutoInvoke(this._selectedPhoton.appEntry);
       return;
     } else {
       this._view = "list";
+      this._mainTab = "methods";
     }
     this._updateRoute();
   }
   /** Fetch available instances for a stateful photon from the server */
   async _fetchInstances(photonName) {
     try {
-      const res = await fetch(`/api/instances/${photonName}`, {
+      const res = await fetch(`/api/instances/${encodeURIComponent(photonName)}`, {
         signal: AbortSignal.timeout(1e4)
       });
       if (res.ok) {
@@ -26305,6 +26518,7 @@ ${photon.errorMessage || "Unknown error"}</pre
     return b2`<p>${cleaned}</p>`;
   }
   _renderMethodContent() {
+    const showBackButton = this._mainTab === "methods" || !this._selectedPhoton?.isApp;
     if (this._isHtmlUiMode()) {
       return b2`
         <div class="glass-panel html-ui-panel" style="padding: 0; overflow: hidden;">
@@ -26325,10 +26539,10 @@ ${photon.errorMessage || "Unknown error"}</pre
     }
     if (this._splitPanels.length > 0) {
       return b2`
-        <div style="display: flex; gap: 1px; height: 100%; overflow: hidden; width: 100%;">
+        <div style="display: flex; height: 100%; overflow: hidden; width: 100%;">
           <!-- Primary Panel -->
           <div
-            style="flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg-panel);"
+            style="${this._splitPrimaryWidth != null ? `width: ${this._splitPrimaryWidth}px; flex-shrink: 0;` : "flex: 1;"} min-width: 0; min-height: 0; overflow: auto; background: var(--bg-panel);"
           >
             ${this._renderSinglePanel({
         photon: this._selectedPhoton,
@@ -26357,7 +26571,9 @@ ${photon.errorMessage || "Unknown error"}</pre
           showDelete: false,
           showHelp: !this._selectedPhoton?.isExternalMCP
         }),
-        onOverflowSelect: (id2) => this._handleOverflowAction(id2)
+        onOverflowSelect: (id2) => this._handleOverflowAction(id2),
+        onBack: showBackButton ? () => void this._handleBackFromMethod() : void 0,
+        backLabel: this._selectedPhoton?.name
       })}
           </div>
 
@@ -26365,7 +26581,11 @@ ${photon.errorMessage || "Unknown error"}</pre
           ${this._splitPanels.map(
         (panel) => b2`
               <div
-                style="flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg-panel);"
+                class="split-divider"
+                @pointerdown=${(e8) => this._handleSplitResizeStart(e8)}
+              ></div>
+              <div
+                style="flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-panel);"
               >
                 ${panel.type === "method" ? this._renderSinglePanel(this._buildAdditionalPanelOpts(panel)) : this._renderSourcePanel(panel.id)}
               </div>
@@ -26410,7 +26630,9 @@ ${photon.errorMessage || "Unknown error"}</pre
         showDelete: false,
         showHelp: !this._selectedPhoton?.isExternalMCP
       }),
-      onOverflowSelect: (id2) => this._handleOverflowAction(id2)
+      onOverflowSelect: (id2) => this._handleOverflowAction(id2),
+      onBack: showBackButton ? () => void this._handleBackFromMethod() : void 0,
+      backLabel: this._selectedPhoton?.name
     });
   }
   /** Render a single panel with self-contained header */
@@ -26426,6 +26648,33 @@ ${photon.errorMessage || "Unknown error"}</pre
           class="panel-header"
           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;"
         >
+          <!-- Back button -->
+          ${opts.onBack ? b2`<button
+                @click=${() => opts.onBack()}
+                style="padding: 0; width: 24px; height: 24px; background: none; border: 1px solid var(--border-glass); border-radius: var(--radius-xs, 4px); color: var(--t-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s ease;"
+                @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 ${opts.backLabel || "methods"}"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  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>` : ""}
           <!-- 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"};"
@@ -26506,9 +26755,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   _renderMethodBody(opts) {
     const hasParams = !!opts.method?.params?.properties && Object.keys(opts.method.params.properties).length > 0;
     return b2`
-      <div
-        style="display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;"
-      >
+      <div style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
         ${opts.appSurface ? "" : this._renderDescription(opts.method.description)}
         ${opts.appSurface && !hasParams ? "" : b2`
               <invoke-form
@@ -26618,6 +26865,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   /** Close all split panels and return to single-panel mode */
   _closeSecondPanel() {
     this._splitPanels = [];
+    this._splitPrimaryWidth = null;
     this._methodPickerOpen = false;
     this._methodPickerPanelId = null;
     this._updateRoute();
@@ -26665,17 +26913,11 @@ ${photon.errorMessage || "Unknown error"}</pre
     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 });
+    const progressToken = `panel_${panelId}_${Date.now()}`;
+    this._panelProgressTokens.set(progressToken, panelId);
     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 });
-        }
-      );
+      const result = await mcpClient.callTool(toolName, args, progressToken);
       this._updatePanel(panelId, {
         result: mcpClient.parseToolResult(result),
         executing: false,
@@ -26688,6 +26930,8 @@ ${photon.errorMessage || "Unknown error"}</pre
         executing: false,
         progress: null
       });
+    } finally {
+      this._panelProgressTokens.delete(progressToken);
     }
   }
   /** Change the method in a split panel */
@@ -26794,7 +27038,8 @@ ${photon.errorMessage || "Unknown error"}</pre
         void this._runTests();
         break;
       case "help":
-        this._showPhotonHelp = true;
+        this._mainTab = "help";
+        void this._loadPhotonHelp();
         break;
       default:
         this._handleContextAction(new CustomEvent("context-action", { detail: { action: id2 } }));
@@ -27463,6 +27708,61 @@ ${photon.errorMessage || "Unknown error"}</pre
   _closePhotonHelp() {
     this._showPhotonHelp = false;
   }
+  /** Render the inline help view (used as a tab, not a modal) */
+  _renderPhotonHelpView() {
+    const markdown = this._photonHelpLoading ? this._generatePhotonHelpMarkdown() : this._photonHelpMarkdown || this._generatePhotonHelpMarkdown();
+    let htmlContent = markdown;
+    if (window.marked) {
+      const mermaidBlocks = [];
+      let processed = markdown.replace(
+        /```mermaid\s*\n([\s\S]*?)```/g,
+        (_match, code) => {
+          const id2 = `help-mermaid-${Math.random().toString(36).substr(2, 9)}`;
+          mermaidBlocks.push({ id: id2, code: code.trim() });
+          return `<div data-mermaid-id="${id2}" style="min-height: 80px; display: flex; align-items: center; justify-content: center; color: var(--t-muted);">Loading diagram...</div>`;
+        }
+      );
+      htmlContent = window.marked.parse(processed);
+      if (mermaidBlocks.length > 0 && window.mermaid) {
+        const mermaid = window.mermaid;
+        const isDark = this.getAttribute("data-theme") !== "light";
+        mermaid.initialize({ startOnLoad: false, theme: isDark ? "dark" : "default" });
+        requestAnimationFrame(() => {
+          for (const { id: id2, code } of mermaidBlocks) {
+            const el2 = this.shadowRoot?.querySelector(`[data-mermaid-id="${id2}"]`);
+            if (el2) {
+              mermaid.render(id2 + "-svg", code).then(({ svg: svg2 }) => {
+                el2.innerHTML = svg2;
+                el2.style.minHeight = "";
+                el2.style.background = isDark ? "hsla(220, 15%, 18%, 0.8)" : "hsla(0, 0%, 97%, 0.8)";
+                el2.style.borderRadius = "8px";
+                el2.style.padding = "12px";
+              }).catch(() => {
+                el2.textContent = "Diagram rendering failed";
+              });
+            }
+          }
+        });
+      }
+    }
+    return b2`
+      <div
+        style="display: flex; flex-direction: column; height: 100%; overflow: auto; padding: var(--space-lg);"
+      >
+        <div style="max-width: 700px; width: 100%;">
+          <h2 class="text-gradient" style="margin: 0 0 var(--space-md) 0;">
+            Help
+            ${this._photonHelpLoading ? b2`<span style="font-size: 0.7em; opacity: 0.6; margin-left: 8px;"
+                  >Loading...</span
+                >` : ""}
+          </h2>
+          <div class="markdown-body" style="color: var(--t-default);">
+            ${window.marked ? b2`${o5(htmlContent)}` : b2`<pre style="white-space: pre-wrap;">${markdown}</pre>`}
+          </div>
+        </div>
+      </div>
+    `;
+  }
   _generatePhotonHelpMarkdown() {
     if (!this._selectedPhoton) return "";
     const photon = this._selectedPhoton;
@@ -27596,7 +27896,8 @@ ${photon.errorMessage || "Unknown error"}</pre
     const hasInstallSource = !!this._selectedPhoton?.installSource;
     const isStateful = !!this._selectedPhoton?.stateful;
     const hasSettings = !!this._selectedPhoton?.hasSettings;
-    const sourceMode = isExternalMCP ? "hidden" : this._view === "source" ? "edit" : hasPath && !this._selectedPhoton?.internal ? "source" : "hidden";
+    const isEditable = !!this._selectedPhoton?.editable && !isExternalMCP;
+    const sourceMode = isExternalMCP ? "hidden" : this._view === "source" ? "edit" : hasPath && !this._selectedPhoton?.internal && isEditable ? "source" : "hidden";
     return b2`
       <context-bar
         .photon=${this._selectedPhoton}
@@ -27608,17 +27909,17 @@ ${photon.errorMessage || "Unknown error"}</pre
         .instances=${this._instances}
         .instanceSelectorMode=${this._instanceSelectorMode}
         .autoInstance=${this._autoInstance}
-        .sourceMode=${sourceMode}
-        .hasSettings=${hasSettings && !isExternalMCP}
+        .sourceMode=${"hidden"}
+        .hasSettings=${false}
         .overflowItems=${this._buildOverflowItems({
       showRefresh: !isExternalMCP,
       showEdit: false,
       showUpgrade: !!this._selectedPhoton?.hasUpdate,
-      showRename: !isExternalMCP,
+      showRename: isEditable,
       showViewSource: false,
-      showFork: hasInstallSource && !isExternalMCP,
+      showFork: !isEditable && !isExternalMCP,
       showContribute: hasInstallSource && !isExternalMCP,
-      showDelete: !isExternalMCP,
+      showDelete: isEditable,
       showHelp: !isExternalMCP
     })}
         @context-action=${this._handleContextAction}
@@ -27762,6 +28063,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   _renderPhotonHeader() {
     if (!this._selectedPhoton) return "";
     const isApp = this._selectedPhoton.isApp;
+    const isEditable = !!this._selectedPhoton.editable && !this._selectedPhoton.isExternalMCP;
     const methods = this._selectedPhoton.methods || [];
     const templateCount = methods.filter((m3) => m3.isTemplate).length;
     const toolCount = methods.filter((m3) => !m3.isTemplate).length;
@@ -27774,42 +28076,42 @@ ${photon.errorMessage || "Unknown error"}</pre
     const displayIcon = customIcon || defaultIcon;
     return b2`
       <header class="photon-header">
-        <button
-          type="button"
-          class="photon-icon-large editable ${isApp ? "" : "mcp-icon"}"
-          @click=${this._startEditingIcon}
-          title="Click to change icon"
-          aria-label="Change icon"
-        >
-          ${displayIcon}
-        </button>
+        ${isEditable ? b2`<button
+              type="button"
+              class="photon-icon-large editable ${isApp ? "" : "mcp-icon"}"
+              @click=${this._startEditingIcon}
+              title="Click to change icon"
+              aria-label="Change icon"
+            >
+              ${displayIcon}
+            </button>` : b2`<span class="photon-icon-large ${isApp ? "" : "mcp-icon"}">${displayIcon}</span>`}
         ${this._editingIcon ? this._renderEmojiPicker() : ""}
         <div class="photon-header-info">
           <h1 class="photon-header-name">${this._selectedPhoton.name}</h1>
-          ${this._editingDescription ? b2`
-                <p class="photon-header-desc editable editing">
-                  <input
-                    class="editable-input"
-                    type="text"
-                    .value=${this._editedDescription}
-                    placeholder="Add a description..."
-                    @input=${(e8) => this._editedDescription = e8.target.value}
-                    @blur=${this._saveDescription}
-                    @keydown=${this._handleDescriptionKeydown}
-                    autofocus
-                  />
-                </p>
-              ` : b2`
-                <button
-                  type="button"
-                  class="photon-header-desc editable ${isGenericDesc ? "placeholder" : ""}"
-                  @click=${this._startEditingDescription}
-                  title="Click to edit description"
-                  aria-label="Edit description"
-                >
-                  ${isGenericDesc ? "Click to add a description..." : description}
-                </button>
-              `}
+          ${isEditable ? this._editingDescription ? b2`
+                  <p class="photon-header-desc editable editing">
+                    <input
+                      class="editable-input"
+                      type="text"
+                      .value=${this._editedDescription}
+                      placeholder="Add a description..."
+                      @input=${(e8) => this._editedDescription = e8.target.value}
+                      @blur=${this._saveDescription}
+                      @keydown=${this._handleDescriptionKeydown}
+                      autofocus
+                    />
+                  </p>
+                ` : b2`
+                  <button
+                    type="button"
+                    class="photon-header-desc editable ${isGenericDesc ? "placeholder" : ""}"
+                    @click=${this._startEditingDescription}
+                    title="Click to edit description"
+                    aria-label="Edit description"
+                  >
+                    ${isGenericDesc ? "Click to add a description..." : description}
+                  </button>
+                ` : b2`<p class="photon-header-desc">${description}</p>`}
           <div class="photon-header-meta">
             ${isApp ? b2`<span class="photon-badge app">App</span>` : b2`<span class="photon-badge">MCP</span>`}
             ${templateCount > 0 && toolCount === 0 ? b2`<span class="photon-badge"
@@ -28275,14 +28577,133 @@ ${photon.errorMessage || "Unknown error"}</pre
       </div>
     `;
   }
+  /** Render the settings view — a professional two-column settings panel */
+  _renderSettingsView() {
+    const photon = this._selectedPhoton;
+    if (!photon) return "";
+    const settingsMethod = photon.methods?.find((m3) => m3.name === "settings");
+    if (!settingsMethod)
+      return b2`<div style="padding: var(--space-xl); color: var(--t-muted); text-align: center;">
+        No settings available for this photon.
+      </div>`;
+    const params = settingsMethod.params;
+    const properties = params?.properties || {};
+    const propEntries = Object.entries(properties);
+    const hasResult = this._lastResult !== null;
+    let statusEntries = [];
+    if (hasResult) {
+      try {
+        const resultData = typeof this._lastResult === "string" ? JSON.parse(this._lastResult) : Array.isArray(this._lastResult) ? this._lastResult.find((c5) => c5.type === "text")?.text ? JSON.parse(this._lastResult.find((c5) => c5.type === "text").text) : this._lastResult : this._lastResult;
+        if (resultData && typeof resultData === "object" && !Array.isArray(resultData)) {
+          statusEntries = Object.entries(resultData).filter(([, v2]) => v2 !== null && v2 !== void 0).map(([k3, v2]) => [k3, String(v2)]);
+        }
+      } catch {
+      }
+    }
+    return b2`
+      <div style="padding: var(--space-lg); max-width: 900px; margin: 0 auto; width: 100%;">
+        <!-- Settings Header -->
+        <div style="margin-bottom: var(--space-xl);">
+          <h2
+            style="font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--t-primary); margin: 0 0 4px 0;"
+          >
+            ${photon.name} Settings
+          </h2>
+          ${settingsMethod.description ? b2`<p
+                style="color: var(--t-muted); font-size: var(--text-sm); margin: 0; line-height: 1.5;"
+              >
+                View or update photon configuration. Changes are applied immediately.
+              </p>` : ""}
+        </div>
+
+        <!-- Configuration Section -->
+        ${propEntries.length > 0 ? b2`
+              <div class="glass-panel" style="margin-bottom: var(--space-lg); overflow: hidden;">
+                <div
+                  style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
+                >
+                  <span
+                    style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
+                    >Configuration</span
+                  >
+                </div>
+                <div class="method-detail" style="padding: 0;">
+                  <invoke-form
+                    .params=${params}
+                    .loading=${this._isExecuting}
+                    .photonName=${photon.name}
+                    .methodName=${"settings"}
+                    .rememberValues=${this._rememberFormValues}
+                    .sharedValues=${this._sharedFormParams ?? this._lastFormParams}
+                    .settingsLayout=${true}
+                    @submit=${(e8) => void this._handleExecute(e8)}
+                    @cancel=${() => {
+    }}
+                  ></invoke-form>
+                  <div
+                    style="display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-glass);"
+                  >
+                    <button
+                      class="btn-primary"
+                      style="font-size: var(--text-sm); padding: 6px 20px;"
+                      @click=${(e8) => {
+      const panel = e8.target.closest(".glass-panel");
+      const form = panel?.querySelector("invoke-form");
+      form?.handleSubmit();
+    }}
+                      ?disabled=${this._isExecuting}
+                    >
+                      ${this._isExecuting ? b2`<span class="btn-loading"
+                            ><span class="spinner"></span>Saving...</span
+                          >` : "Save Settings"}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ` : ""}
+
+        <!-- Status Section (from last result) -->
+        ${statusEntries.length > 0 ? b2`
+              <div class="glass-panel" style="overflow: hidden;">
+                <div
+                  style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
+                >
+                  <span
+                    style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
+                    >Status</span
+                  >
+                </div>
+                <div style="padding: 0;">
+                  ${statusEntries.map(
+      ([key, value], i7) => b2`
+                      <div
+                        style="display: grid; grid-template-columns: 200px 1fr; border-bottom: ${i7 < statusEntries.length - 1 ? "1px solid var(--border-glass)" : "none"};"
+                      >
+                        <div
+                          style="padding: 10px var(--space-md); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); background: var(--bg-glass);"
+                        >
+                          ${key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim()}
+                        </div>
+                        <div
+                          style="padding: 10px var(--space-md); font-size: var(--text-sm); color: var(--t-primary); word-break: break-word;"
+                        >
+                          ${value}
+                        </div>
+                      </div>
+                    `
+    )}
+                </div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
   /** Render source code as an inline view (not a modal) — Phase 2 */
   _renderSourceView() {
     if (!this._sourceData) {
       return b2`
-        ${this._renderPhotonToolbar({ showConfigure: false, showCopyConfig: false })}
         <div
-          class="glass-panel"
-          style="padding: var(--space-xl); text-align: center; color: var(--t-muted);"
+          style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--t-muted);"
         >
           Loading source...
         </div>
@@ -28313,26 +28734,56 @@ ${photon.errorMessage || "Unknown error"}</pre
     if (Prism && Prism.languages[language2]) {
       highlightedCode = Prism.highlight(this._sourceData.code, Prism.languages[language2], language2);
     }
+    const isProtected = !this._selectedPhoton?.editable;
     return b2`
-      ${this._renderPhotonToolbar({ showConfigure: false, showCopyConfig: false })}
-      <div
-        class="glass-panel"
-        style="margin-top: var(--space-md); display: flex; flex-direction: column; max-height: calc(100vh - 120px);"
-      >
+      <div style="display: flex; flex-direction: column; height: 100%;">
         <div
-          style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); flex-shrink: 0;"
+          style="display: flex; justify-content: space-between; align-items: center; padding: 6px var(--space-md); border-bottom: 1px solid var(--border-glass); flex-shrink: 0; background: var(--bg-panel);"
         >
-          <div style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--t-muted);">
-            ${filename}
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--t-muted);">
+              ${filename}
+            </div>
+            ${isProtected ? b2`<span
+                  style="font-size: var(--text-2xs); padding: 2px 6px; background: var(--bg-glass-strong); border: 1px solid var(--border-glass); border-radius: var(--radius-xs); color: var(--t-muted); text-transform: uppercase; letter-spacing: 0.05em;"
+                  >Protected</span
+                >` : ""}
+          </div>
+          <div style="display: flex; gap: 6px; align-items: center;">
+            ${isProtected ? b2`<button
+                  class="action-btn"
+                  style="display: inline-flex; align-items: center; background: var(--bg-glass); border: 1px solid var(--accent-secondary); color: var(--accent-secondary); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-xs);"
+                  @click=${this._handleFork}
+                  title="Fork to create an editable local copy"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="margin-right: 3px;"
+                  >
+                    <circle cx="12" cy="18" r="3" />
+                    <circle cx="6" cy="6" r="3" />
+                    <circle cx="18" cy="6" r="3" />
+                    <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
+                    <path d="M12 12v3" />
+                  </svg>
+                  Fork
+                </button>` : ""}
+            <button
+              class="action-btn"
+              style="display: inline-flex; align-items: center; background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--t-muted); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-xs);"
+              @click=${this._copySourceCode}
+              title="Copy source code"
+            >
+              ${clipboard} Copy
+            </button>
           </div>
-          <button
-            class="action-btn"
-            style="background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--t-muted); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-xs);"
-            @click=${this._copySourceCode}
-            title="Copy source code"
-          >
-            ${clipboard} Copy
-          </button>
         </div>
         <pre
           class="language-${language2}"
@@ -28347,7 +28798,6 @@ ${photon.errorMessage || "Unknown error"}</pre
           font-size: 0.85rem;
           line-height: 1.6;
           tab-size: 2;
-          border-radius: 0 0 var(--radius-md) var(--radius-md);
         "
         ><code class="language-${language2}" style="display: block; overflow-x: visible;">${Prism ? o5(highlightedCode) : this._sourceData.code}</code></pre>
       </div>
@@ -28406,7 +28856,7 @@ ${photon.errorMessage || "Unknown error"}</pre
               </div>
             </div>
             <div style="display: flex; gap: var(--space-sm);">
-              ${this._selectedPhoton?.path && !this._selectedPhoton?.isExternalMCP ? b2`
+              ${this._selectedPhoton?.editable && !this._selectedPhoton?.isExternalMCP ? b2`
                     <button
                       class="toolbar-btn"
                       style="padding: 6px 12px; font-size: 0.85rem; background: var(--accent-primary); border-color: var(--accent-primary); color: white;"
@@ -28601,11 +29051,31 @@ BeamApp.styles = [
       }
 
       .sidebar-area {
-        width: 300px;
+        width: var(--sidebar-width, 300px);
         flex-shrink: 0;
         z-index: 10;
         display: flex;
         flex-direction: column;
+        position: relative;
+        overflow: visible;
+      }
+
+      .sidebar-resize-handle {
+        position: absolute;
+        right: -3px;
+        top: 0;
+        bottom: 0;
+        width: 6px;
+        cursor: col-resize;
+        z-index: 20;
+        background: transparent;
+        transition: background 0.15s;
+      }
+
+      .sidebar-resize-handle:hover,
+      .sidebar-resize-handle.dragging {
+        background: var(--accent-primary);
+        opacity: 0.5;
       }
 
       :host(.focus-mode) .sidebar-area {
@@ -28831,10 +29301,20 @@ BeamApp.styles = [
         flex: 1;
         min-width: 0;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .main-content-scroll {
+        flex: 1;
+        min-height: 0;
         overflow-y: auto;
         overflow-x: hidden;
         padding: var(--space-lg);
         scrollbar-gutter: stable;
+        display: flex;
+        flex-direction: column;
       }
 
       /* Page transition when switching photons */
@@ -28855,9 +29335,9 @@ BeamApp.styles = [
 
       .main-toolbar {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin: calc(-1 * var(--space-lg) + 4px) calc(-1 * var(--space-lg) + 4px) 4px;
+        gap: var(--space-sm);
+        margin-bottom: 8px;
         flex-shrink: 0;
       }
 
@@ -28886,9 +29366,22 @@ BeamApp.styles = [
         margin-left: auto;
       }
 
+      .beam-tab-btn.active {
+        color: var(--accent-secondary);
+        border-color: var(--accent-secondary);
+      }
+
+      .tab-group-divider {
+        width: 1px;
+        height: 16px;
+        background: var(--border-glass);
+        margin: 0 2px;
+        align-self: center;
+      }
+
       .cards-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(280px, min(100%, 380px)));
         gap: var(--space-md);
         align-items: stretch;
       }
@@ -28940,7 +29433,7 @@ BeamApp.styles = [
       .anchor-nav {
         display: flex;
         gap: var(--space-md);
-        margin: var(--space-md) 0 var(--space-lg);
+        margin: 0 0 var(--space-md);
       }
 
       .anchor-link {
@@ -28986,7 +29479,7 @@ BeamApp.styles = [
         display: flex;
         align-items: flex-start;
         gap: var(--space-lg);
-        margin-bottom: var(--space-xl);
+        margin-bottom: var(--space-md);
       }
 
       .photon-icon-large {
@@ -30148,6 +30641,34 @@ BeamApp.styles = [
         margin-top: var(--space-md);
       }
 
+      .split-divider {
+        width: 5px;
+        flex-shrink: 0;
+        cursor: col-resize;
+        background: var(--border-glass);
+        position: relative;
+        transition: background 0.15s;
+      }
+
+      .split-divider::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1px;
+        height: 32px;
+        background: var(--t-muted);
+        border-radius: 2px;
+        opacity: 0.4;
+      }
+
+      .split-divider:hover,
+      .split-divider.dragging {
+        background: var(--accent-primary);
+        opacity: 0.6;
+      }
+
       .method-detail h2 {
         margin-top: 0;
       }
@@ -30383,6 +30904,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_sidebarVisible", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_sidebarWidth", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_focusMode", 2);
@@ -30542,6 +31066,12 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_methodPickerPanelId", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_splitPrimaryWidth", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_mainTab", 2);
 __decorateClass([
   e7("beam-sidebar")
 ], BeamApp.prototype, "_sidebar", 2);
@@ -30557,6 +31087,12 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_forkOriginRepo", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_forkRequireNewName", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_forkSuggestedName", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_forkTargets", 2);
@@ -30576,6 +31112,11 @@ var BeamSidebar = class extends i4 {
     this.reconnecting = false;
     this.updatesAvailable = 0;
     this.pendingApprovals = 0;
+    this.mainTab = "methods";
+    this.isApp = false;
+    this.hasSettings = false;
+    this.isExternalMCP = false;
+    this.hasPath = false;
     this._searchQuery = "";
     this._showFavoritesOnly = false;
     this._favorites = /* @__PURE__ */ new Set();
@@ -30665,6 +31206,11 @@ var BeamSidebar = class extends i4 {
     super.updated(changedProps);
     if (changedProps.has("selectedPhoton")) {
       this._ensureActiveSectionOpen();
+      if (this.selectedPhoton) {
+        this._scrollPhotonIntoView(this.selectedPhoton, false);
+      } else {
+        this._scrollSidebarToTop();
+      }
     }
   }
   get _filteredPhotons() {
@@ -30740,6 +31286,25 @@ var BeamSidebar = class extends i4 {
                 title="${this.connected ? "Connected" : this.reconnecting ? "Reconnecting..." : "Disconnected"}"
               ></span>
             </button>
+            <button
+              class="sidebar-minimize-btn"
+              @click=${() => this.dispatchEvent(new CustomEvent("toggle-focus"))}
+              title="Minimize sidebar"
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" />
+                <polyline points="13 15 9 12 13 9" />
+              </svg>
+            </button>
           </div>
           <div class="search-box" role="search">
             <input
@@ -30772,29 +31337,30 @@ var BeamSidebar = class extends i4 {
           </div>
         </div>
 
-        ${(() => {
+        <div class="sidebar-scroll">
+          ${(() => {
       const apps = this._sortByRecency(this._apps);
       const configured = this._sortByRecency(this._configured);
       return b2`
-            ${apps.length > 0 ? this._renderSection(
+              ${apps.length > 0 ? this._renderSection(
         "apps",
         "APPS",
         apps,
         (p5) => p5.isExternalMCP ? this._renderExternalMCPItem(p5) : this._renderPhotonItem(p5, "app")
       ) : ""}
-            ${configured.length > 0 ? this._renderSection(
+              ${configured.length > 0 ? this._renderSection(
         "photons",
         "PHOTONS",
         configured,
         (p5) => this._renderPhotonItem(p5, "configured")
       ) : ""}
-          `;
+            `;
     })()}
-        ${(() => {
+          ${(() => {
       const needsConfig = this._needsSetup.filter((p5) => p5.errorReason !== "load-error");
       const loadErrors = this._needsSetup.filter((p5) => p5.errorReason === "load-error");
       return b2`
-            ${needsConfig.length > 0 ? this._renderSection(
+              ${needsConfig.length > 0 ? this._renderSection(
         "config",
         "NEEDS CONFIGURATION",
         needsConfig,
@@ -30802,7 +31368,7 @@ var BeamSidebar = class extends i4 {
         "attention",
         warning
       ) : ""}
-            ${loadErrors.length > 0 ? this._renderSection(
+              ${loadErrors.length > 0 ? this._renderSection(
         "errors",
         "LOAD ERRORS",
         loadErrors,
@@ -30810,35 +31376,36 @@ var BeamSidebar = class extends i4 {
         "attention",
         xMark
       ) : ""}
-          `;
+            `;
     })()}
-        ${this._nonAppExternalMCPs.length > 0 ? this._renderSection(
+          ${this._nonAppExternalMCPs.length > 0 ? this._renderSection(
       "mcps",
       "MCPS",
       this._sortByRecency(this._nonAppExternalMCPs),
       (mcp) => this._renderExternalMCPItem(mcp)
     ) : ""}
-        ${this._apps.length === 0 && this._configured.length === 0 && this._needsSetup.length === 0 && this._nonAppExternalMCPs.length === 0 ? b2`
-              <div class="empty-state">
-                ${this._searchQuery.trim() ? b2`
-                      <div class="empty-icon">${search}</div>
-                      <div class="empty-title">No results</div>
-                      <div class="empty-hint">No photons match "${this._searchQuery}"</div>
-                    ` : b2`
-                      <div class="empty-icon">${packageBox}</div>
-                      <div class="empty-title">No photons yet</div>
-                      <div class="empty-hint">
-                        Add photons from the marketplace or create your own
-                      </div>
-                      <button
-                        class="empty-action"
-                        @click=${() => this.dispatchEvent(new CustomEvent("marketplace"))}
-                      >
-                        ${marketplace} Browse Marketplace
-                      </button>
-                    `}
-              </div>
-            ` : ""}
+          ${this._apps.length === 0 && this._configured.length === 0 && this._needsSetup.length === 0 && this._nonAppExternalMCPs.length === 0 ? b2`
+                <div class="empty-state">
+                  ${this._searchQuery.trim() ? b2`
+                        <div class="empty-icon">${search}</div>
+                        <div class="empty-title">No results</div>
+                        <div class="empty-hint">No photons match "${this._searchQuery}"</div>
+                      ` : b2`
+                        <div class="empty-icon">${packageBox}</div>
+                        <div class="empty-title">No photons yet</div>
+                        <div class="empty-hint">
+                          Add photons from the marketplace or create your own
+                        </div>
+                        <button
+                          class="empty-action"
+                          @click=${() => this.dispatchEvent(new CustomEvent("marketplace"))}
+                        >
+                          ${marketplace} Browse Marketplace
+                        </button>
+                      `}
+                </div>
+              ` : ""}
+        </div>
       </nav>
 
       <div class="sidebar-footer">
@@ -30855,14 +31422,6 @@ var BeamSidebar = class extends i4 {
                 <span class="approval-badge">${this.pendingApprovals}</span>
               </button>
             ` : ""}
-        <button
-          class="footer-link"
-          @click=${() => this.dispatchEvent(new CustomEvent("diagnostics", { bubbles: true, composed: true }))}
-          title="Server diagnostics"
-          aria-label="Show diagnostics"
-        >
-          ${activity}
-        </button>
         <button
           class="footer-link"
           @click=${() => this._showShortcuts()}
@@ -30939,7 +31498,7 @@ var BeamSidebar = class extends i4 {
         class="photon-list motion-stagger ${collapsed ? "collapsed" : ""}"
         role="listbox"
         aria-labelledby=${headerId}
-        style="max-height: ${collapsed ? "0" : items.length * 52 + "px"}"
+        style="max-height: ${collapsed ? "0" : this._estimateSectionHeight(items) + "px"}"
       >
         ${items.map(renderItem)}
       </ul>
@@ -30963,41 +31522,46 @@ var BeamSidebar = class extends i4 {
       const isLight = this.theme === "light";
       initialsStyle = isLight ? `background: hsl(${hue2}, 30%, 90%); color: hsl(${hue2}, 50%, 35%);` : `background: hsl(${hue2}, 35%, 22%); color: hsl(${hue2}, 60%, 75%);`;
     }
+    const isSelected = this.selectedPhoton === photon.name;
     return b2`
       <li
-        class="photon-item ${this.selectedPhoton === photon.name ? "active" : ""} ${photon.internal ? "internal" : ""} ${this._isPhotonWarm(photon.name) ? "warmth" : ""}"
+        class="photon-item ${isSelected ? "active" : ""} ${photon.internal ? "internal" : ""} ${this._isPhotonWarm(photon.name) ? "warmth" : ""}"
         role="option"
-        aria-selected="${this.selectedPhoton === photon.name}"
+        aria-selected="${isSelected}"
         tabindex="0"
         @click=${() => this._selectPhoton(photon)}
         @keydown=${(e8) => e8.key === "Enter" && this._selectPhoton(photon)}
         title="${photon.description || photon.name}${photon.path ? `
 ${photon.path}` : ""}"
       >
-        <div
-          class="photon-icon ${isEmoji ? "emoji-icon" : ""}"
-          style="${initialsStyle}"
-          aria-hidden="true"
-        >
-          ${displayIcon}
-        </div>
-        <div class="photon-info">
-          <div class="photon-name">${photon.name}</div>
-          ${photon.internal ? b2`<span class="internal-badge">System</span>` : ""}
+        <div class="photon-item-body">
+          <div class="photon-main-row">
+            <div
+              class="photon-icon ${isEmoji ? "emoji-icon" : ""}"
+              style="${initialsStyle}"
+              aria-hidden="true"
+            >
+              ${displayIcon}
+            </div>
+            <div class="photon-info">
+              <div class="photon-name">${photon.name}</div>
+              ${photon.internal ? b2`<span class="internal-badge">System</span>` : ""}
+            </div>
+            <button
+              class="star-btn ${isFavorited ? "favorited" : ""}"
+              @click=${(e8) => this._toggleFavorite(e8, photon.name)}
+              title="${isFavorited ? "Remove from favorites" : "Add to favorites"}"
+              aria-label="${isFavorited ? `Remove ${photon.name} from favorites` : `Add ${photon.name} to favorites`}"
+              aria-pressed="${isFavorited}"
+            >
+              ${isFavorited ? starFilled : starOutline}
+            </button>
+            ${isUnconfigured ? photon.errorReason === "load-error" ? b2`<span class="method-count error" aria-label="Error loading">×</span>` : b2`<span class="method-count unconfigured" aria-label="Needs configuration"
+                    >?</span
+                  >` : this._renderCountsPill(photon, methodCount)}
+          </div>
+          ${isSelected ? this._renderInlineViewTabs() : ""}
         </div>
-        ${""}
-        <button
-          class="star-btn ${isFavorited ? "favorited" : ""}"
-          @click=${(e8) => this._toggleFavorite(e8, photon.name)}
-          title="${isFavorited ? "Remove from favorites" : "Add to favorites"}"
-          aria-label="${isFavorited ? `Remove ${photon.name} from favorites` : `Add ${photon.name} to favorites`}"
-          aria-pressed="${isFavorited}"
-        >
-          ${isFavorited ? starFilled : starOutline}
-        </button>
-        ${isUnconfigured ? photon.errorReason === "load-error" ? b2`<span class="method-count error" aria-label="Error loading">×</span>` : b2`<span class="method-count unconfigured" aria-label="Needs configuration"
-                >?</span
-              >` : this._renderCountsPill(photon, methodCount)}
       </li>
     `;
   }
@@ -31006,46 +31570,120 @@ ${photon.path}` : ""}"
     const isConnected = mcp.connected !== false;
     const displayIcon = mcp.icon || plug;
     const isFavorited = this._favorites.has(mcp.name);
+    const isSelected = this.selectedPhoton === mcp.name;
     return b2`
       <li
-        class="photon-item ${this.selectedPhoton === mcp.name ? "active" : ""} ${!isConnected ? "disconnected" : ""}"
+        class="photon-item ${isSelected ? "active" : ""} ${!isConnected ? "disconnected" : ""}"
         role="option"
-        aria-selected="${this.selectedPhoton === mcp.name}"
+        aria-selected="${isSelected}"
         tabindex="0"
         @click=${() => this._selectPhoton(mcp)}
         @keydown=${(e8) => e8.key === "Enter" && this._selectPhoton(mcp)}
         title="${mcp.description || "External MCP server"}${mcp.errorMessage ? `
 \u26A0\uFE0F ${mcp.errorMessage}` : ""}"
       >
-        <div class="photon-icon external-mcp-icon" aria-hidden="true">${displayIcon}</div>
-        <div class="photon-info">
-          <div class="photon-name">${mcp.name}</div>
+        <div class="photon-item-body">
+          <div class="photon-main-row">
+            <div class="photon-icon external-mcp-icon" aria-hidden="true">${displayIcon}</div>
+            <div class="photon-info">
+              <div class="photon-name">${mcp.name}</div>
+            </div>
+            <button
+              class="star-btn ${isFavorited ? "favorited" : ""}"
+              @click=${(e8) => this._toggleFavorite(e8, mcp.name)}
+              title="${isFavorited ? "Remove from favorites" : "Add to favorites"}"
+              aria-label="${isFavorited ? `Remove ${mcp.name} from favorites` : `Add ${mcp.name} to favorites`}"
+              aria-pressed="${isFavorited}"
+            >
+              ${isFavorited ? starFilled : starOutline}
+            </button>
+            ${!isConnected ? b2`
+                  <span class="disconnect-badge" title="${mcp.errorMessage || "Disconnected"}"
+                    >Offline</span
+                  >
+                  <button
+                    class="reconnect-btn"
+                    @click=${(e8) => this._reconnectMCP(e8, mcp.name)}
+                    title="Reconnect"
+                    aria-label="Reconnect ${mcp.name}"
+                  >
+                    ↻
+                  </button>
+                ` : this._renderCountsPill(mcp, methodCount)}
+          </div>
+          ${isSelected ? this._renderInlineViewTabs() : ""}
         </div>
-        <button
-          class="star-btn ${isFavorited ? "favorited" : ""}"
-          @click=${(e8) => this._toggleFavorite(e8, mcp.name)}
-          title="${isFavorited ? "Remove from favorites" : "Add to favorites"}"
-          aria-label="${isFavorited ? `Remove ${mcp.name} from favorites` : `Add ${mcp.name} to favorites`}"
-          aria-pressed="${isFavorited}"
-        >
-          ${isFavorited ? starFilled : starOutline}
-        </button>
-        ${!isConnected ? b2`
-              <span class="disconnect-badge" title="${mcp.errorMessage || "Disconnected"}"
-                >Offline</span
-              >
-              <button
-                class="reconnect-btn"
-                @click=${(e8) => this._reconnectMCP(e8, mcp.name)}
-                title="Reconnect"
-                aria-label="Reconnect ${mcp.name}"
-              >
-                ↻
-              </button>
-            ` : this._renderCountsPill(mcp, methodCount)}
       </li>
     `;
   }
+  _renderInlineViewTabs() {
+    const appTabIcon = b2`<svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18" />
+      <path d="M9 21V9" />
+    </svg>`;
+    const methodsTabIcon = b2`<svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+    </svg>`;
+    const tabs = [
+      ...this.isApp ? [{ id: "app", label: "App", icon: appTabIcon }] : [],
+      { id: "methods", label: "Methods", icon: methodsTabIcon },
+      { id: "log", label: "Activity", icon: activity },
+      ...this.hasSettings ? [{ id: "settings", label: "Settings", icon: settings }] : [],
+      ...this.hasPath && !this.isExternalMCP ? [{ id: "source", label: "Source", icon: source }] : [],
+      { id: "help", label: "Help", icon: docs }
+    ];
+    return b2`
+      <div class="photon-view-tabs" role="tablist" aria-label="Selected photon views">
+        ${tabs.map(
+      (tab) => b2`
+            <button
+              class="photon-view-tab ${this.mainTab === tab.id ? "active" : ""}"
+              role="tab"
+              aria-selected=${String(this.mainTab === tab.id)}
+              title=${tab.label}
+              aria-label=${tab.label}
+              @click=${(e8) => {
+        e8.stopPropagation();
+        this._emitTabChange(tab.id);
+      }}
+            >
+              ${tab.icon}
+            </button>
+          `
+    )}
+      </div>
+    `;
+  }
+  _estimateSectionHeight(items) {
+    return items.reduce((height, item) => {
+      const isSelected = item.name === this.selectedPhoton;
+      return height + (isSelected ? 92 : 52);
+    }, 0);
+  }
   _reconnectMCP(e8, mcpName) {
     e8.stopPropagation();
     this.dispatchEvent(
@@ -31091,6 +31729,9 @@ ${photon.path}` : ""}"
       })
     );
   }
+  _emitTabChange(tab) {
+    this.dispatchEvent(new CustomEvent("tab-change", { detail: { tab } }));
+  }
   _handleSearch(e8) {
     this._searchQuery = e8.target.value;
   }
@@ -31148,6 +31789,9 @@ ${photon.path}` : ""}"
     return this._showFavoritesOnly;
   }
   scrollPhotonIntoView(name2) {
+    this._scrollPhotonIntoView(name2, true);
+  }
+  _scrollPhotonIntoView(name2, flashHighlight) {
     void this.updateComplete.then(() => {
       const items = this.shadowRoot?.querySelectorAll(".photon-item");
       if (!items) return;
@@ -31155,13 +31799,23 @@ ${photon.path}` : ""}"
         const nameEl = item.querySelector(".photon-name");
         if (nameEl?.textContent?.trim() === name2) {
           item.scrollIntoView({ behavior: "smooth", block: "nearest" });
-          item.classList.add("flash-highlight");
-          setTimeout(() => item.classList.remove("flash-highlight"), 600);
+          if (flashHighlight) {
+            item.classList.add("flash-highlight");
+            setTimeout(() => item.classList.remove("flash-highlight"), 600);
+          }
           break;
         }
       }
     });
   }
+  _scrollSidebarToTop() {
+    void this.updateComplete.then(() => {
+      const scrollEl = this.shadowRoot?.querySelector(".sidebar-scroll");
+      if (scrollEl) {
+        scrollEl.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    });
+  }
   /**
    * Check if a photon currently has a warmth indicator (notification received within last 5 seconds)
    */
@@ -31195,9 +31849,17 @@ BeamSidebar.styles = [
         flex-direction: column;
         height: 100%;
         color: var(--t-primary);
+        overflow: visible;
       }
 
       .sidebar-content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar-scroll {
         flex: 1;
         overflow-y: auto;
         padding-right: 4px;
@@ -31289,6 +31951,7 @@ BeamSidebar.styles = [
       .header {
         padding: var(--space-md);
         border-bottom: 1px solid var(--border-glass);
+        flex-shrink: 0;
       }
 
       .header-row {
@@ -31398,6 +32061,27 @@ BeamSidebar.styles = [
         position: relative;
       }
 
+      .sidebar-minimize-btn {
+        width: 28px;
+        height: 28px;
+        border-radius: var(--radius-sm);
+        background: transparent;
+        border: none;
+        color: var(--t-muted);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.15s ease;
+        padding: 0;
+        flex-shrink: 0;
+      }
+
+      .sidebar-minimize-btn:hover {
+        color: var(--t-primary);
+        background: var(--bg-glass);
+      }
+
       input {
         padding: var(--space-sm) var(--space-md);
       }
@@ -31491,6 +32175,9 @@ BeamSidebar.styles = [
         border-left: 2px solid var(--accent-primary);
         color: var(--accent-primary);
         font-weight: 500;
+        align-items: stretch;
+        padding-top: calc(var(--space-sm) + 2px);
+        padding-bottom: calc(var(--space-sm) + 2px);
       }
 
       .photon-item.flash-highlight {
@@ -31560,6 +32247,25 @@ BeamSidebar.styles = [
         flex: 1;
       }
 
+      .photon-item-body {
+        min-width: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .photon-main-row {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        min-width: 0;
+      }
+
+      .photon-main-row .photon-info {
+        min-width: 0;
+      }
+
       .photon-name {
         font-family: var(--font-display);
         font-weight: 600;
@@ -31576,6 +32282,45 @@ BeamSidebar.styles = [
         text-overflow: ellipsis;
       }
 
+      .photon-view-tabs {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: calc(28px + var(--space-sm));
+      }
+
+      .photon-view-tab {
+        width: 26px;
+        height: 26px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--border-glass);
+        background: color-mix(in srgb, var(--bg-glass-strong) 82%, transparent);
+        color: var(--t-muted);
+        border-radius: var(--radius-sm);
+        padding: 0;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .photon-view-tab svg {
+        width: 13px;
+        height: 13px;
+      }
+
+      .photon-view-tab:hover {
+        color: var(--t-primary);
+        border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-glass));
+        background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-glass-strong));
+      }
+
+      .photon-view-tab.active {
+        color: white;
+        border-color: var(--accent-primary);
+        background: color-mix(in srgb, var(--accent-primary) 78%, black 22%);
+      }
+
       .method-count {
         font-size: var(--text-2xs);
         padding: 2px 6px;
@@ -31876,6 +32621,10 @@ BeamSidebar.styles = [
           min-height: 44px;
         }
 
+        .photon-view-tabs {
+          margin-left: 0;
+        }
+
         .photon-item .star-btn {
           padding: var(--space-sm);
           opacity: 0.4;
@@ -31930,6 +32679,21 @@ __decorateClass([
 __decorateClass([
   n4({ type: Number })
 ], BeamSidebar.prototype, "pendingApprovals", 2);
+__decorateClass([
+  n4({ type: String })
+], BeamSidebar.prototype, "mainTab", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], BeamSidebar.prototype, "isApp", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], BeamSidebar.prototype, "hasSettings", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], BeamSidebar.prototype, "isExternalMCP", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], BeamSidebar.prototype, "hasPath", 2);
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_searchQuery", 2);
@@ -31960,6 +32724,7 @@ var MethodCard = class extends i4 {
   constructor() {
     super(...arguments);
     this.photonName = "";
+    this.editable = false;
     this._editingDescription = false;
     this._editingIcon = false;
     this._editedDescription = "";
@@ -32023,20 +32788,20 @@ var MethodCard = class extends i4 {
                       ${this.method.icon}
                     </div>
                   ` : ""}
-              <span class="editable">
+              <span class="${this.editable ? "editable" : ""}">
                 <h3 class="title">
                   <span class="title-name">${this.method.name}</span>${this._renderParamSignature()}
                 </h3>
-                <span
-                  class="edit-pencil"
-                  role="button"
-                  tabindex="0"
-                  @click=${(e8) => this._handleNameEditClick(e8)}
-                  @keydown=${(e8) => (e8.key === "Enter" || e8.key === " ") && (e8.preventDefault(), this._handleNameEditClick(e8))}
-                  title="Rename method"
-                  aria-label="Rename method"
-                  >${pencil}</span
-                >
+                ${this.editable ? b2`<span
+                      class="edit-pencil"
+                      role="button"
+                      tabindex="0"
+                      @click=${(e8) => this._handleNameEditClick(e8)}
+                      @keydown=${(e8) => (e8.key === "Enter" || e8.key === " ") && (e8.preventDefault(), this._handleNameEditClick(e8))}
+                      title="Rename method"
+                      aria-label="Rename method"
+                      >${pencil}</span
+                    >` : ""}
               </span>
             </div>
             ${this.method.isTemplate ? b2`<span class="badge prompt">Prompt</span>` : ""}
@@ -32076,21 +32841,24 @@ var MethodCard = class extends i4 {
                   <span class="char-counter">${this._editedDescription.length}/500</span>
                 </div>
               ` : b2`
-                <div class="editable" style="flex:1; align-items: flex-start;">
+                <div
+                  class="${this.editable ? "editable" : ""}"
+                  style="flex:1; align-items: flex-start;"
+                >
                   <div class="description ${hasDescription ? "" : "placeholder"}" style="flex:1;">
-                    ${hasDescription ? this._renderDescription(this.method.description) : "Add description..."}
+                    ${hasDescription ? this._renderDescription(this.method.description) : this.editable ? "Add description..." : ""}
                   </div>
-                  <span
-                    class="edit-pencil"
-                    role="button"
-                    tabindex="0"
-                    @click=${(e8) => this._handleDescriptionEditClick(e8)}
-                    @keydown=${(e8) => (e8.key === "Enter" || e8.key === " ") && (e8.preventDefault(), this._handleDescriptionEditClick(e8))}
-                    title="Edit description"
-                    aria-label="Edit description"
-                    style="margin-top: 2px;"
-                    >${pencil}</span
-                  >
+                  ${this.editable ? b2`<span
+                        class="edit-pencil"
+                        role="button"
+                        tabindex="0"
+                        @click=${(e8) => this._handleDescriptionEditClick(e8)}
+                        @keydown=${(e8) => (e8.key === "Enter" || e8.key === " ") && (e8.preventDefault(), this._handleDescriptionEditClick(e8))}
+                        title="Edit description"
+                        aria-label="Edit description"
+                        style="margin-top: 2px;"
+                        >${pencil}</span
+                      >` : ""}
                 </div>
               `}
         </div>
@@ -32687,6 +33455,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: String })
 ], MethodCard.prototype, "photonName", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], MethodCard.prototype, "editable", 2);
 __decorateClass([
   r5()
 ], MethodCard.prototype, "_editingDescription", 2);
@@ -32801,6 +33572,7 @@ var InvokeForm = class extends i4 {
     this.methodName = "";
     this.rememberValues = false;
     this.sharedValues = null;
+    this.settingsLayout = false;
     this._values = {};
     this._initialValues = {};
     this._passwordVisible = {};
@@ -32906,12 +33678,13 @@ var InvokeForm = class extends i4 {
         const result = await mcpClient.callTool(`${this.photonName}/${toolName}`, {});
         let values = [];
         let data = result;
-        if (result && Array.isArray(result.content)) {
-          if (result.isError) {
+        const mcpResult = result;
+        if (result && Array.isArray(mcpResult.content)) {
+          if (mcpResult.isError) {
             hasUnresolved = true;
             continue;
           }
-          const textBlock = result.content.find((c5) => c5.type === "text");
+          const textBlock = mcpResult.content.find((c5) => c5.type === "text");
           if (textBlock?.text) {
             try {
               data = JSON.parse(textBlock.text);
@@ -33011,6 +33784,42 @@ var InvokeForm = class extends i4 {
       const isRequired = Array.isArray(requiredList) ? requiredList.includes(key) : !!schema.required;
       const error2 = this._errors[key];
       const inputId = `field-${key}`;
+      if (this.settingsLayout) {
+        const isBoolean = schema.type === "boolean" || schema.type === '"boolean"';
+        return b2`
+          <div
+            style="display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--border-glass); min-height: 48px;"
+          >
+            <div
+              style="padding: 12px var(--space-md); display: flex; flex-direction: column; justify-content: center; background: var(--bg-glass);"
+            >
+              <label
+                for=${inputId}
+                style="font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); margin: 0;"
+              >
+                ${formatLabel(key)}
+              </label>
+              ${schema.description ? b2`<span
+                    style="font-size: var(--text-2xs); color: var(--t-muted); margin-top: 2px; line-height: 1.3;"
+                    >${this._cleanDescription(schema.description, schema)}</span
+                  >` : ""}
+            </div>
+            <div
+              style="padding: ${isBoolean ? "8px" : "6px"} var(--space-md); display: flex; align-items: center;"
+            >
+              ${this._renderInput(key, schema, !!error2, inputId)}
+              ${error2 ? b2`<div
+                    class="error-text"
+                    style="margin-left: 8px;"
+                    id="${inputId}-error"
+                    role="alert"
+                  >
+                    ${error2}
+                  </div>` : ""}
+            </div>
+          </div>
+        `;
+      }
       return b2`
         <div class="form-group">
           <label for=${inputId}>
@@ -34815,6 +35624,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: Object })
 ], InvokeForm.prototype, "sharedValues", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], InvokeForm.prototype, "settingsLayout", 2);
 __decorateClass([
   r5()
 ], InvokeForm.prototype, "_values", 2);
@@ -34842,6 +35654,7 @@ var ActivityLog = class extends i4 {
   constructor() {
     super(...arguments);
     this.items = [];
+    this.fullscreen = false;
     this._filterActive = false;
     this._collapsed = false;
     this._lastFilter = void 0;
@@ -35009,6 +35822,24 @@ ActivityLog.styles = [
         list-style: none;
         margin: 0;
         padding: 0;
+        max-height: 180px;
+        overflow-y: auto;
+      }
+
+      :host([fullscreen]) {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        margin-top: 0;
+        border-top: none;
+        padding-top: 0;
+      }
+
+      :host([fullscreen]) .log-list {
+        max-height: none;
+        flex: 1;
+        min-height: 0;
       }
 
       .log-item {
@@ -35148,6 +35979,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: String })
 ], ActivityLog.prototype, "filter", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ActivityLog.prototype, "fullscreen", 2);
 __decorateClass([
   r5()
 ], ActivityLog.prototype, "_filterActive", 2);
@@ -35462,6 +36296,12 @@ var ResultViewer = class extends i4 {
     // per-slide bg (color, url, gradient)
     this._slidesEffects = /* @__PURE__ */ new Map();
     // per-slide element effect
+    this._slidesMoods = /* @__PURE__ */ new Map();
+    // per-slide mood (dramatic, techy, etc.)
+    this._slidesGlobalMood = "";
+    // frontmatter mood default
+    this._slidesBgEffects = /* @__PURE__ */ new Map();
+    // per-slide bg effect (gradient-mesh, etc.)
     this._slidesCols = /* @__PURE__ */ new Map();
     // per-slide column count
     this._slidesBuilds = /* @__PURE__ */ new Map();
@@ -36423,6 +37263,7 @@ var ResultViewer = class extends i4 {
       case "slides":
         return typeof data === "string";
       case "checklist":
+      case "guide":
         return Array.isArray(data);
       case "magazine":
       case "article":
@@ -36495,6 +37336,8 @@ var ResultViewer = class extends i4 {
         return this._renderSlides(filteredData);
       case "checklist":
         return this._renderChecklist(filteredData);
+      case "guide":
+        return this._renderGuide(filteredData);
       case "magazine":
       case "article":
         return this._renderMagazine(filteredData);
@@ -37427,6 +38270,8 @@ ${code}</pre>`;
     this._slidesTransitions.clear();
     this._slidesBackgrounds.clear();
     this._slidesEffects.clear();
+    this._slidesMoods.clear();
+    this._slidesBgEffects.clear();
     this._slidesCols.clear();
     this._slidesBuilds.clear();
     slides.forEach((slide, i7) => {
@@ -37436,10 +38281,15 @@ ${code}</pre>`;
       if (bgMatch) this._slidesBackgrounds.set(i7, bgMatch[1].trim());
       const fxMatch = slide.match(/<!--\s*effect:\s*(\S+)\s*-->/);
       if (fxMatch) this._slidesEffects.set(i7, fxMatch[1].trim());
+      const moodMatch = slide.match(/<!--\s*mood:\s*(\w+)\s*-->/);
+      if (moodMatch) this._slidesMoods.set(i7, moodMatch[1].trim());
+      const bgFxMatch = slide.match(/<!--\s*background:\s*(\S+)\s*-->/);
+      if (bgFxMatch) this._slidesBgEffects.set(i7, bgFxMatch[1].trim());
       const colMatch = slide.match(/<!--\s*cols:\s*(\d+)\s*-->/);
       if (colMatch) this._slidesCols.set(i7, Math.min(Math.max(parseInt(colMatch[1], 10), 2), 4));
       if (/<!--\s*build\s*-->/.test(slide)) this._slidesBuilds.set(i7, true);
     });
+    this._slidesGlobalMood = config3.mood || "";
     const defaultTheme2 = "auto";
     return { slides, theme: config3.theme || defaultTheme2, config: config3 };
   }
@@ -37491,7 +38341,7 @@ ${code}</pre>`;
     return this._slidesBridgeScript || "";
   }
   /** Build an iframe srcdoc for a slide with the bridge loaded */
-  _buildSlideSrcdoc(slideHtml, codeBlocks, headerText, footerText, pageNum, slideBg, slideEffect) {
+  _buildSlideSrcdoc(slideHtml, codeBlocks, headerText, footerText, pageNum, slideBg, slideEffect, slideBgEffect) {
     const bridge = this._slidesBridgeScript || "";
     const photonPrefix = this.photonName ? this.photonName + "/" : "";
     let html = slideHtml;
@@ -37516,11 +38366,15 @@ ${code}</pre>`;
       }
     }
     const themeClass = this._slidesThemeClass || "slides-theme-default";
+    const themeName = themeClass.replace("slides-theme-", "");
+    const fontSpec = ResultViewer._THEME_FONTS[themeName];
+    const fontLink = fontSpec ? `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${fontSpec}&display=swap">` : "";
     return `<!doctype html>
 <html lang="en" class="${themeClass}">
 <head>
 <meta charset="UTF-8">
 <meta name="photon-template" content="true">
+${fontLink}
 ${bridge}
 <style>
   /* reveal.js-style scaling: fixed design canvas + transform:scale() */
@@ -37578,6 +38432,20 @@ ${bridge}
   [data-enter="flip-in"] { animation: motion-flip-in 0.5s cubic-bezier(0.16,1,0.3,1) both; }
   [data-enter="fade-in"] { animation: motion-fade-in 0.3s cubic-bezier(0.16,1,0.3,1) both; }
   [data-enter="drop-in"] { animation: motion-drop-in 0.5s cubic-bezier(0.16,1,0.3,1) both; }
+  [data-enter="mood-dramatic"] { animation: mood-dramatic 0.6s ease both; }
+  [data-enter="mood-techy"] { animation: mood-techy 0.3s ease-out both; }
+  [data-enter="mood-playful"] { animation: mood-playful 0.4s ease both; }
+  [data-enter="mood-calm"] { animation: mood-calm 0.8s ease-in-out both; }
+  /* Hide slide children initially, auto-reveal after 1.5s fallback if stagger doesn't fire */
+  .slide-body > :not(.slide-content-area):not([data-enter]) {
+    opacity: 0;
+    animation: stagger-fallback 0.3s ease 1.5s both;
+  }
+  .slide-content-area > :not([data-enter]) {
+    opacity: 0;
+    animation: stagger-fallback 0.3s ease 1.5s both;
+  }
+  @keyframes stagger-fallback { to { opacity: 1; } }
   @media (prefers-reduced-motion: reduce) {
     [data-enter] { animation: none !important; opacity: 1 !important; }
   }
@@ -37708,6 +38576,8 @@ ${bridge}
   /* Full-bleed image */
   .hero { width: 100%; border-radius: var(--radius-lg, 14px);
     box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,0.28)); }
+  /* Theme presets (shared with outer shadow DOM) */
+  ${ResultViewer._BRIDGE_THEME_CSS}
 </style>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"><\/script>
@@ -37726,7 +38596,8 @@ ${bridge}
 </head>
 <body>
 ${this._buildSlideBgHtml(slideBg || "")}
-<div class="slide-canvas"${slideEffect ? ` data-effect="${slideEffect}"` : ""}>
+${slideBgEffect ? `<div style="position:absolute;inset:0;pointer-events:none;z-index:0;${slideBgEffect === "gradient-mesh" ? "background:radial-gradient(ellipse at 20% 50%,rgba(120,80,255,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,100,80,0.12) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(80,200,255,0.1) 0%,transparent 50%);animation:bgdrift 12s ease-in-out infinite alternate;" : slideBgEffect === "noise" ? "opacity:0.06;background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.75%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E&quot;);" : slideBgEffect === "grid" ? "background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:32px 32px;" : slideBgEffect === "particles" ? "overflow:hidden;" : ""}"></div>` : ""}
+<div class="slide-canvas"${slideEffect ? ` data-effect="${slideEffect}"` : ""} style="position:relative;z-index:1;">
 ${headerText ? `<div class="slide-header">${headerText}</div>` : ""}
 <div class="slide-body">${html}</div>
 ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</span><span>${pageNum || ""}</span></div>` : ""}
@@ -37779,6 +38650,74 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     return document.querySelectorAll('.slide-fragment:not(.visible)').length === 0;
   };
 <\/script>
+<script>
+  // Text effects for bridge slides
+  (function() {
+    var canvas = document.querySelector('.slide-canvas');
+    var effect = canvas ? canvas.getAttribute('data-effect') : '';
+    if (!effect) return;
+    var heading = document.querySelector('.slide-body h1, .slide-body h2');
+    if (!heading) return;
+    var text = heading.textContent || '';
+    if (!text) return;
+
+    if (effect === 'typing') {
+      heading.textContent = '';
+      heading.style.borderRight = '2px solid currentColor';
+      var i = 0;
+      function typeChar() {
+        if (i < text.length) {
+          heading.textContent += text[i]; i++;
+          requestAnimationFrame(function() { setTimeout(typeChar, 40 + Math.random() * 30); });
+        } else { setTimeout(function() { heading.style.borderRight = 'none'; }, 800); }
+      }
+      setTimeout(typeChar, 300);
+    } else if (effect === 'scramble') {
+      var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      var revealed = new Array(text.length).fill(false);
+      var iter = 0;
+      function scrambleStep() {
+        var d = '';
+        for (var j = 0; j < text.length; j++) {
+          d += (revealed[j] || text[j] === ' ') ? text[j] : chars[Math.floor(Math.random() * chars.length)];
+        }
+        heading.textContent = d;
+        if (iter > 5) {
+          var ur = []; for (var k = 0; k < revealed.length; k++) { if (!revealed[k] && text[k] !== ' ') ur.push(k); }
+          if (ur.length > 0) revealed[ur[Math.floor(Math.random() * ur.length)]] = true;
+        }
+        iter++;
+        if (ur && ur.length > 0) requestAnimationFrame(scrambleStep);
+        else heading.textContent = text;
+      }
+      setTimeout(scrambleStep, 300);
+    } else if (effect === 'wave') {
+      heading.innerHTML = '';
+      text.split('').forEach(function(ch, idx) {
+        var s = document.createElement('span');
+        s.textContent = ch === ' ' ? '\\u00A0' : ch;
+        s.style.display = 'inline-block';
+        s.style.opacity = '0';
+        s.style.transform = 'translateY(20px)';
+        s.style.transition = 'all 0.4s ease ' + (idx * 30) + 'ms';
+        heading.appendChild(s);
+        requestAnimationFrame(function() { s.style.opacity = '1'; s.style.transform = 'none'; });
+      });
+    } else if (effect === 'fly-in') {
+      heading.innerHTML = '';
+      text.split(' ').forEach(function(word, idx) {
+        var s = document.createElement('span');
+        s.textContent = word + ' ';
+        s.style.display = 'inline-block';
+        s.style.opacity = '0';
+        s.style.transform = 'translate(' + ((Math.random()-0.5)*200) + 'px,' + ((Math.random()-0.5)*100) + 'px)';
+        s.style.transition = 'all 0.6s cubic-bezier(0.16,1,0.3,1) ' + (idx * 80) + 'ms';
+        heading.appendChild(s);
+        requestAnimationFrame(function() { s.style.opacity = '1'; s.style.transform = 'none'; });
+      });
+    }
+  })();
+<\/script>
 </body>
 </html>`;
   }
@@ -37855,6 +38794,17 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const resolvedTheme = rawTheme === "auto" || rawTheme === "default" ? this.theme === "light" ? "uncover" : "default" : rawTheme;
     const themeClass = `slides-theme-${resolvedTheme}`;
     this._slidesThemeClass = themeClass;
+    const fontSpec = ResultViewer._THEME_FONTS[resolvedTheme];
+    if (fontSpec) {
+      const linkId = `photon-font-${resolvedTheme}`;
+      if (!document.getElementById(linkId)) {
+        const link2 = document.createElement("link");
+        link2.id = linkId;
+        link2.rel = "stylesheet";
+        link2.href = `https://fonts.googleapis.com/css2?family=${fontSpec}&display=swap`;
+        document.head.appendChild(link2);
+      }
+    }
     const bgOverride = config3.backgroundColor ? `background:${config3.backgroundColor};` : "";
     const colorOverride = config3.color ? `color:${config3.color};` : "";
     const viewportStyle = bgOverride + colorOverride;
@@ -37864,6 +38814,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const currentTransition = this._getSlideTransition(idx);
     const slideBg = this._slidesBackgrounds.get(idx) || "";
     const slideEffect = this._slidesEffects.get(idx) || "";
+    const slideBgEffect = this._slidesBgEffects.get(idx) || "";
     const slideBgStyle = this._buildSlideBgStyle(slideBg);
     const isVideoBg = /\.(mp4|webm|mov)(\?|$)/i.test(slideBg) || slideBg.startsWith("video:");
     return b2`
@@ -37886,6 +38837,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
                   loop
                   playsinline
                 ></video>` : b2`<div class="slides-bg-layer" style="${slideBgStyle}"></div>` : ""}
+          ${slideBgEffect ? b2`<div class="slides-bgfx slides-bgfx-${slideBgEffect}"></div>` : ""}
           <div class="slides-content">
             ${this._slidesBridgeScript ? b2`<iframe
                   class="slide-bridge-frame"
@@ -37896,7 +38848,8 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       footerText,
       showPaginate ? `${idx + 1} / ${total}` : "",
       slideBg,
-      slideEffect
+      slideEffect,
+      slideBgEffect
     )}
                   sandbox="allow-scripts allow-same-origin allow-popups"
                   frameborder="0"
@@ -37974,8 +38927,6 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           position: relative;
           border-radius: var(--radius-md, 8px);
           outline: none;
-          background: #1a1a2e;
-          color: #e5e5e5;
           font-family:
             system-ui,
             -apple-system,
@@ -37990,14 +38941,14 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           display: flex;
           align-items: center;
           justify-content: center;
-          padding: 48px 64px;
+          padding: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 64px);
           overflow: hidden;
           position: relative;
         }
         .slides-container:fullscreen .slides-viewport {
           flex: 1;
           aspect-ratio: auto;
-          padding: 64px 120px;
+          padding: clamp(32px, 5vh, 64px) clamp(48px, 8vw, 120px);
         }
         .slides-container:fullscreen .slides-viewport:has(.slide-bridge-frame) {
           padding: 0;
@@ -38052,26 +39003,26 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           z-index: -1;
         }
         .slides-content h1 {
-          font-size: 2.4em;
+          font-size: clamp(1.8rem, 5vw, 3.5rem);
           margin: 0 0 0.4em;
           font-weight: 800;
           letter-spacing: -0.02em;
           line-height: 1.15;
         }
         .slides-content h2 {
-          font-size: 1.8em;
+          font-size: clamp(1.4rem, 3.5vw, 2.4rem);
           margin: 0 0 0.4em;
           font-weight: 700;
           letter-spacing: -0.01em;
         }
         .slides-content h3 {
-          font-size: 1.3em;
+          font-size: clamp(1.1rem, 2.5vw, 1.6rem);
           margin: 0 0 0.3em;
           font-weight: 600;
         }
         .slides-content p {
           margin: 0.5em 0;
-          font-size: 1.15em;
+          font-size: clamp(0.95rem, 1.8vw, 1.25rem);
           line-height: 1.65;
         }
         .slides-content ul,
@@ -38376,6 +39327,300 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           background: #191a21;
         }
 
+        /* ═══ AUTO THEME — inherits MCP client colors ═══ */
+        .slides-theme-auto {
+          background: var(--bg-panel, #1a1a2e);
+          color: var(--t-primary, #e0e0e0);
+        }
+        .slides-theme-auto .slides-content h1,
+        .slides-theme-auto .slides-content h2 {
+          color: var(--accent, #6366f1);
+        }
+        .slides-theme-auto .slides-controls {
+          background: var(--bg-glass, rgba(0, 0, 0, 0.4));
+        }
+
+        /* ═══ NEON THEME ═══ */
+        .slides-theme-neon {
+          background: #0a0a1a;
+          color: #e0e0ff;
+          font-family: 'JetBrains Mono', var(--font-mono), monospace;
+        }
+        .slides-theme-neon .slides-content h1,
+        .slides-theme-neon .slides-content h2 {
+          color: #00f0ff;
+          text-shadow:
+            0 0 10px rgba(0, 240, 255, 0.5),
+            0 0 40px rgba(0, 240, 255, 0.2);
+        }
+        .slides-theme-neon .slides-content blockquote {
+          border-left: 3px solid #00f0ff;
+          box-shadow: -4px 0 20px rgba(0, 240, 255, 0.15);
+        }
+        .slides-theme-neon .slides-content pre {
+          border: 1px solid rgba(0, 240, 255, 0.2);
+          box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
+        }
+        .slides-theme-neon .slides-viewport::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 240, 255, 0.015) 2px,
+            rgba(0, 240, 255, 0.015) 4px
+          );
+          z-index: 2;
+        }
+        .slides-theme-neon .slides-controls {
+          background: #050510;
+        }
+
+        /* ═══ EDITORIAL THEME ═══ */
+        .slides-theme-editorial,
+        .slides-theme-editorial .slides-viewport {
+          background: #faf8f5;
+          color: #2c2c2c;
+          font-family: Georgia, 'Times New Roman', serif;
+        }
+        .slides-theme-editorial .slides-content h1,
+        .slides-theme-editorial .slides-content h2 {
+          font-family: 'Cormorant Garamond', Georgia, serif;
+          color: #1a1a1a;
+          font-weight: 600;
+        }
+        .slides-theme-editorial .slides-content h1 {
+          letter-spacing: -0.03em;
+        }
+        .slides-theme-editorial .slides-content p:first-of-type::first-letter {
+          float: left;
+          font-size: 3.4em;
+          line-height: 0.8;
+          padding-right: 8px;
+          padding-top: 4px;
+          font-weight: 700;
+          color: #c0392b;
+          font-family: 'Cormorant Garamond', Georgia, serif;
+        }
+        .slides-theme-editorial .slides-content blockquote {
+          border-left: 2px solid #c0392b;
+          font-style: italic;
+          font-size: 1.15em;
+          color: #555;
+        }
+        .slides-theme-editorial .slides-content hr {
+          border: none;
+          height: 1px;
+          background: linear-gradient(to right, transparent, #ccc, transparent);
+          margin: 1.5em 0;
+        }
+        .slides-theme-editorial .slides-controls {
+          background: #f0ece6;
+          color: #666;
+        }
+
+        /* ═══ BOLD-SIGNAL THEME ═══ */
+        .slides-theme-bold-signal {
+          background: linear-gradient(135deg, #0f0c29, #1a1a3e, #24243e);
+          color: #e8e8f0;
+          font-family: 'Space Grotesk', var(--font-sans), sans-serif;
+        }
+        .slides-theme-bold-signal .slides-content h1 {
+          color: #ff6b35;
+          font-weight: 700;
+        }
+        .slides-theme-bold-signal .slides-content h2 {
+          color: #ffd166;
+        }
+        .slides-theme-bold-signal .slides-content blockquote {
+          background: rgba(255, 107, 53, 0.1);
+          border-left: 4px solid #ff6b35;
+          border-radius: 0 8px 8px 0;
+          padding: 16px 20px;
+        }
+        .slides-theme-bold-signal .slides-controls {
+          background: #0a0820;
+        }
+
+        /* ═══ SWISS THEME ═══ */
+        .slides-theme-swiss,
+        .slides-theme-swiss .slides-viewport {
+          background: #ffffff;
+          color: #1a1a1a;
+          font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif;
+        }
+        .slides-theme-swiss .slides-viewport::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background-image:
+            linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+          background-size: 40px 40px;
+          z-index: 0;
+        }
+        .slides-theme-swiss .slides-content {
+          position: relative;
+          z-index: 1;
+        }
+        .slides-theme-swiss .slides-content h1 {
+          color: #e63946;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          font-weight: 900;
+        }
+        .slides-theme-swiss .slides-content h2 {
+          color: #1d3557;
+          font-weight: 700;
+        }
+        .slides-theme-swiss .slides-controls {
+          background: #f1f1f1;
+          color: #333;
+        }
+
+        /* ═══ NOTEBOOK THEME ═══ */
+        .slides-theme-notebook {
+          background: #1a1a2e;
+          color: #3c3c3c;
+        }
+        .slides-theme-notebook .slides-viewport {
+          background: #fdf6e3;
+          border-radius: 8px;
+          margin: 12px;
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+          border-left: 5px solid #e74c3c;
+        }
+        .slides-theme-notebook .slides-content h1,
+        .slides-theme-notebook .slides-content h2 {
+          font-family: 'Caveat', cursive, sans-serif;
+          color: #2c3e50;
+        }
+        .slides-theme-notebook .slides-content h1 {
+          font-size: clamp(2rem, 6vw, 4rem);
+        }
+        .slides-theme-notebook .slides-controls {
+          background: #f5edd6;
+          color: #666;
+        }
+
+        /* ═══ MOOD KEYFRAMES ═══ */
+        @keyframes mood-dramatic {
+          from {
+            opacity: 0;
+            transform: scale(0.95) translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: none;
+          }
+        }
+        @keyframes mood-techy {
+          0% {
+            opacity: 0;
+            transform: translateY(8px);
+            filter: blur(4px);
+          }
+          50% {
+            opacity: 1;
+            filter: blur(0);
+          }
+          100% {
+            transform: none;
+          }
+        }
+        @keyframes mood-playful {
+          0% {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          60% {
+            transform: translateY(-4px);
+          }
+          80% {
+            transform: translateY(2px);
+          }
+          100% {
+            opacity: 1;
+            transform: none;
+          }
+        }
+        @keyframes mood-calm {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        /* ═══ BACKGROUND EFFECTS ═══ */
+        .slides-bgfx {
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          z-index: 0;
+        }
+        .slides-bgfx-gradient-mesh {
+          background:
+            radial-gradient(ellipse at 20% 50%, rgba(120, 80, 255, 0.15) 0%, transparent 50%),
+            radial-gradient(ellipse at 80% 20%, rgba(255, 100, 80, 0.12) 0%, transparent 50%),
+            radial-gradient(ellipse at 50% 80%, rgba(80, 200, 255, 0.1) 0%, transparent 50%);
+          animation: bgfx-drift 12s ease-in-out infinite alternate;
+        }
+        @keyframes bgfx-drift {
+          0% {
+            transform: translate(0, 0) scale(1);
+          }
+          50% {
+            transform: translate(5%, -3%) scale(1.05);
+          }
+          100% {
+            transform: translate(-3%, 4%) scale(1.02);
+          }
+        }
+        .slides-bgfx-noise {
+          opacity: 0.06;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+        }
+        .slides-bgfx-grid {
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+          background-size: 32px 32px;
+        }
+        .slides-bgfx-particles::before,
+        .slides-bgfx-particles::after {
+          content: '';
+          position: absolute;
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          box-shadow:
+            40px 80px 0 rgba(255, 255, 255, 0.15),
+            120px 40px 0 rgba(255, 255, 255, 0.1),
+            200px 120px 0 rgba(255, 255, 255, 0.12),
+            300px 60px 0 rgba(255, 255, 255, 0.08),
+            400px 140px 0 rgba(255, 255, 255, 0.15);
+          animation: bgfx-float 8s ease-in-out infinite alternate;
+        }
+        .slides-bgfx-particles::after {
+          animation-delay: -4s;
+          animation-direction: alternate-reverse;
+        }
+        @keyframes bgfx-float {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(-15px);
+          }
+        }
+
         /* ═══ VIEW TRANSITIONS ═══ */
         .slides-content {
           view-transition-name: slide-content;
@@ -38691,11 +39936,14 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       { once: true }
     );
   }
-  /** Trigger stagger-in animation on slide content children after transition.
-   *  Uses the universal data-enter attribute from the motion system. */
   _slidesStaggerIn() {
-    const slideEffect = this._slidesEffects.get(this._slidesCurrentIndex) || "";
-    const enterValue = ResultViewer._EFFECT_MAP[slideEffect] || (slideEffect ? slideEffect : "slide-up");
+    const idx = this._slidesCurrentIndex;
+    const mood = this._slidesMoods.get(idx) || this._slidesGlobalMood;
+    const moodCfg = ResultViewer._MOOD_CONFIG[mood];
+    const slideEffect = this._slidesEffects.get(idx) || "";
+    const enterValue = moodCfg ? moodCfg.enter : ResultViewer._EFFECT_MAP[slideEffect] || (slideEffect ? slideEffect : "slide-up");
+    const delayMs = moodCfg?.delayMs ?? 60;
+    const durationMs = moodCfg?.durationMs ?? 300;
     const CHILD_SELECTOR = ":scope > h1, :scope > h2, :scope > h3, :scope > p, :scope > ul, :scope > ol, :scope > table, :scope > blockquote, :scope > pre, :scope > div:not(.slide-header):not(.slide-footer), :scope > figure, :scope > img, :scope > .slide-content-area";
     const applyToChildren = (container) => {
       const children = container.querySelectorAll(CHILD_SELECTOR);
@@ -38704,7 +39952,8 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
         htmlEl.removeAttribute("data-enter");
         void htmlEl.offsetWidth;
         htmlEl.setAttribute("data-enter", enterValue);
-        htmlEl.style.animationDelay = `${i7 * 60}ms`;
+        htmlEl.style.animationDelay = `${i7 * delayMs}ms`;
+        htmlEl.style.animationDuration = `${durationMs}ms`;
       });
     };
     const iframe = this.shadowRoot?.querySelector(".slide-bridge-frame");
@@ -38724,6 +39973,97 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const content2 = this.shadowRoot?.querySelector(".slides-content");
     if (content2) applyToChildren(content2);
   }
+  _slidesApplyTextEffect() {
+    const effect = this._slidesEffects.get(this._slidesCurrentIndex) || "";
+    if (!ResultViewer._PRETEXT_EFFECTS.has(effect)) return;
+    const content2 = this.shadowRoot?.querySelector(".slides-content");
+    if (!content2) return;
+    const heading2 = content2.querySelector("h1, h2");
+    if (!heading2) return;
+    const text = heading2.textContent || "";
+    if (!text) return;
+    switch (effect) {
+      case "typing": {
+        heading2.textContent = "";
+        heading2.style.borderRight = "2px solid currentColor";
+        let i7 = 0;
+        const type = () => {
+          if (i7 < text.length) {
+            heading2.textContent += text[i7];
+            i7++;
+            requestAnimationFrame(() => setTimeout(type, 40 + Math.random() * 30));
+          } else {
+            setTimeout(() => {
+              heading2.style.borderRight = "none";
+            }, 800);
+          }
+        };
+        setTimeout(type, 200);
+        break;
+      }
+      case "scramble": {
+        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&";
+        const revealed = new Array(text.length).fill(false);
+        let iterations = 0;
+        const scramble = () => {
+          let display = "";
+          for (let j2 = 0; j2 < text.length; j2++) {
+            if (revealed[j2] || text[j2] === " ") {
+              display += text[j2];
+            } else {
+              display += chars[Math.floor(Math.random() * chars.length)];
+            }
+          }
+          heading2.textContent = display;
+          if (iterations > 5) {
+            const unrevealed = revealed.map((r7, idx) => !r7 && text[idx] !== " " ? idx : -1).filter((x3) => x3 >= 0);
+            if (unrevealed.length > 0) {
+              const pick2 = unrevealed[Math.floor(Math.random() * unrevealed.length)];
+              revealed[pick2] = true;
+            }
+          }
+          iterations++;
+          if (revealed.some((r7) => !r7) && revealed.filter((r7) => r7).length < text.length) {
+            requestAnimationFrame(scramble);
+          } else {
+            heading2.textContent = text;
+          }
+        };
+        setTimeout(scramble, 200);
+        break;
+      }
+      case "wave": {
+        heading2.innerHTML = "";
+        const chars = text.split("");
+        chars.forEach((char, i7) => {
+          const span = document.createElement("span");
+          span.textContent = char === " " ? "\xA0" : char;
+          span.style.display = "inline-block";
+          span.style.animation = `mood-playful 0.5s ease ${i7 * 30}ms both`;
+          heading2.appendChild(span);
+        });
+        break;
+      }
+      case "fly-in": {
+        heading2.innerHTML = "";
+        const words = text.split(" ");
+        words.forEach((word, i7) => {
+          const span = document.createElement("span");
+          span.textContent = word + " ";
+          span.style.display = "inline-block";
+          span.style.opacity = "0";
+          span.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 100}px)`;
+          span.style.transition = `all 0.6s cubic-bezier(0.16, 1, 0.3, 1) ${i7 * 80}ms`;
+          heading2.appendChild(span);
+          requestAnimationFrame(() => {
+            span.style.opacity = "1";
+            span.style.transform = "none";
+          });
+        });
+        break;
+      }
+    }
+  }
   /** Advance the next hidden build fragment. Returns true if a fragment was revealed. */
   _slidesAdvanceBuild() {
     const hasBuild = this._slidesBuilds.get(this._slidesCurrentIndex);
@@ -38788,6 +40128,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
         this._afterSlideRender();
       }
       this._slidesStaggerIn();
+      this._slidesApplyTextEffect();
     };
     if (transition === "none" || !("startViewTransition" in document) || this._slidesBridgeScript) {
       this._slidesCurrentIndex = newIndex;
@@ -39200,33 +40541,32 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     }
   }
   _renderSlideFormat(target2, data, format) {
-    const win = window;
     const doRender = () => {
-      if (win._photonRenderers?.render) {
-        win._photonRenderers.render(target2, data, format);
+      if (window._photonRenderers?.render) {
+        window._photonRenderers.render(target2, data, format);
       } else {
         target2.textContent = typeof data === "object" ? JSON.stringify(data, null, 2) : String(data ?? "");
       }
     };
-    if (win._photonRenderers) {
+    if (window._photonRenderers) {
       doRender();
-    } else if (win._photonRenderersLoading) {
-      win._photonRenderersQueue = win._photonRenderersQueue || [];
-      win._photonRenderersQueue.push(doRender);
+    } else if (window._photonRenderersLoading) {
+      window._photonRenderersQueue = window._photonRenderersQueue || [];
+      window._photonRenderersQueue.push(doRender);
     } else {
-      win._photonRenderersLoading = true;
-      win._photonRenderersQueue = [doRender];
+      window._photonRenderersLoading = true;
+      window._photonRenderersQueue = [doRender];
       fetch("/api/photon-renderers.js").then((r7) => r7.text()).then((code) => {
         try {
           (0, eval)(code);
         } catch {
         }
-        const queue = win._photonRenderersQueue || [];
-        win._photonRenderersQueue = [];
+        const queue = window._photonRenderersQueue || [];
+        window._photonRenderersQueue = [];
         queue.forEach((fn2) => fn2());
       }).catch(() => {
-        const queue = win._photonRenderersQueue || [];
-        win._photonRenderersQueue = [];
+        const queue = window._photonRenderersQueue || [];
+        window._photonRenderersQueue = [];
         queue.forEach((fn2) => fn2());
       });
     }
@@ -39663,6 +41003,77 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       </div>
     `;
   }
+  // ── Guide Renderer — horizontal stepper for multi-step flows ──
+  _renderGuide(data) {
+    const steps2 = Array.isArray(data) ? data : [];
+    if (steps2.length === 0) {
+      return b2`<div class="empty-state">No steps</div>`;
+    }
+    return b2`
+      <div
+        style="display: flex; align-items: flex-start; gap: 0; padding: 16px 8px; overflow-x: auto;"
+      >
+        ${steps2.map((step, i7) => {
+      const status = step.status || "pending";
+      const isDone = status === "done";
+      const isActive = status === "active";
+      const circleColor = isDone ? "var(--accent-primary, #3b82f6)" : isActive ? "var(--accent-primary, #3b82f6)" : "var(--bg-tertiary, #374151)";
+      const circleBorder = isActive ? "2px solid var(--accent-primary, #3b82f6)" : "none";
+      const circleText = isDone ? "#fff" : isActive ? "var(--accent-primary, #3b82f6)" : "var(--t-muted, #9ca3af)";
+      const circleBg = isDone ? circleColor : isActive ? "transparent" : circleColor;
+      const labelColor = isDone || isActive ? "var(--t-primary, #f5f5f5)" : "var(--t-muted, #9ca3af)";
+      const lineColor = isDone ? "var(--accent-primary, #3b82f6)" : "var(--bg-tertiary, #374151)";
+      return b2`
+            <div style="display: flex; align-items: flex-start; flex: 1; min-width: 0;">
+              <div
+                style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 100%;"
+              >
+                <div
+                  style="
+                  width: 28px; height: 28px; border-radius: 50%;
+                  background: ${circleBg}; border: ${circleBorder};
+                  display: flex; align-items: center; justify-content: center;
+                  font-size: 12px; font-weight: 600; color: ${circleText};
+                  transition: all 0.2s ease;
+                "
+                >
+                  ${isDone ? b2`<svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                      >
+                        <path d="M2.5 6l2.5 2.5 4.5-5" />
+                      </svg>` : i7 + 1}
+                </div>
+                <div
+                  style="margin-top: 6px; font-size: 12px; font-weight: ${isActive ? "600" : "500"}; color: ${labelColor}; text-align: center; line-height: 1.3; padding: 0 4px;"
+                >
+                  ${step.label}
+                </div>
+                ${step.detail ? b2`<div
+                      style="margin-top: 2px; font-size: 11px; color: var(--t-muted, #9ca3af); text-align: center; padding: 0 4px;"
+                    >
+                      ${step.detail}
+                    </div>` : ""}
+              </div>
+              ${i7 < steps2.length - 1 ? b2`<div
+                    style="
+                    position: relative; top: 14px;
+                    flex: 1; height: 2px; min-width: 20px;
+                    background: ${lineColor};
+                    transition: background 0.2s ease;
+                  "
+                  ></div>` : ""}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
   // ── Magazine Renderer — markdown-powered multi-column layout ──
   _renderMagazine(data) {
     const text = typeof data === "string" ? data : data?.text || "";
@@ -43525,6 +44936,52 @@ ResultViewer._TIMESTAMP_FIELDS = [
   // ReactiveArray auto-stamp (fallback for creation)
 ];
 // Map slide effect directives to universal motion data-enter values
+// Shared theme CSS injected into both shadow DOM styles and bridge srcdoc
+ResultViewer._BRIDGE_THEME_CSS = `
+    .slides-theme-default { background: #1a1a2e; color: #e6e6e6; }
+    .slides-theme-default h1, .slides-theme-default h2 { color: #a5b4fc; }
+    .slides-theme-uncover { background: #f8f8f8; color: #333; }
+    .slides-theme-uncover h1, .slides-theme-uncover h2 { color: #1a1a1a; }
+    .slides-theme-gaia { background: #1a472a; color: #e0f0e0; }
+    .slides-theme-gaia h1, .slides-theme-gaia h2 { color: #66bb6a; }
+    .slides-theme-rose { background: #2d1b2e; color: #f0e0e8; }
+    .slides-theme-rose h1, .slides-theme-rose h2 { color: #f48fb1; }
+    .slides-theme-dracula { background: #282a36; color: #f8f8f2; }
+    .slides-theme-dracula h1, .slides-theme-dracula h2 { color: #bd93f9; }
+    .slides-theme-auto { background: var(--bg-panel, #1a1a2e); color: var(--t-primary, #e0e0e0); }
+    .slides-theme-auto h1, .slides-theme-auto h2 { color: var(--accent, #6366f1); }
+    .slides-theme-neon { background: #0a0a1a; color: #e0e0ff; font-family: 'JetBrains Mono', monospace; }
+    .slides-theme-neon h1, .slides-theme-neon h2 { color: #00f0ff; text-shadow: 0 0 10px rgba(0,240,255,0.5), 0 0 40px rgba(0,240,255,0.2); }
+    .slides-theme-editorial { background: #faf8f5; color: #2c2c2c; font-family: Georgia, 'Times New Roman', serif; }
+    .slides-theme-editorial h1, .slides-theme-editorial h2 { font-family: 'Cormorant Garamond', Georgia, serif; color: #1a1a1a; }
+    .slides-theme-bold-signal { background: linear-gradient(135deg, #0f0c29, #1a1a3e, #24243e); color: #e8e8f0; font-family: 'Space Grotesk', sans-serif; }
+    .slides-theme-bold-signal h1 { color: #ff6b35; }
+    .slides-theme-bold-signal h2 { color: #ffd166; }
+    .slides-theme-swiss { background: #ffffff; color: #1a1a1a; font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif; }
+    .slides-theme-swiss h1 { color: #e63946; text-transform: uppercase; letter-spacing: 0.05em; }
+    .slides-theme-swiss h2 { color: #1d3557; }
+    .slides-theme-notebook { background: #1a1a2e; color: #3c3c3c; }
+    .slides-theme-notebook .slide-canvas { background: #fdf6e3; border-left: 5px solid #e74c3c; border-radius: 8px; }
+    .slides-theme-notebook h1, .slides-theme-notebook h2 { font-family: 'Caveat', cursive; color: #2c3e50; }
+    @keyframes mood-dramatic { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: none; } }
+    @keyframes mood-techy { 0% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 50% { opacity: 1; filter: blur(0); } 100% { transform: none; } }
+    @keyframes mood-playful { 0% { opacity: 0; transform: translateY(20px); } 60% { transform: translateY(-4px); } 80% { transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
+    @keyframes mood-calm { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes bgdrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(5%,-3%) scale(1.05); } 100% { transform: translate(-3%,4%) scale(1.02); } }
+    .slides-theme-neon body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,240,255,0.015) 2px, rgba(0,240,255,0.015) 4px); z-index: 100; }
+    .slides-theme-neon .slide-body blockquote { border-left: 3px solid #00f0ff; box-shadow: -4px 0 20px rgba(0,240,255,0.15); }
+    .slides-theme-neon .slide-body pre { border: 1px solid rgba(0,240,255,0.2); box-shadow: 0 0 15px rgba(0,240,255,0.1); }
+    .slides-theme-editorial .slide-body p:first-of-type::first-letter { float: left; font-size: 3.4em; line-height: 0.8; padding-right: 8px; padding-top: 4px; font-weight: 700; color: #c0392b; font-family: 'Cormorant Garamond', Georgia, serif; }
+    .slides-theme-editorial .slide-body blockquote { border-left: 2px solid #c0392b; font-style: italic; color: #555; }
+    .slides-theme-bold-signal .slide-body blockquote { background: rgba(255,107,53,0.1); border-left: 4px solid #ff6b35; border-radius: 0 8px 8px 0; padding: 16px 20px; }
+    .slides-theme-swiss body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; }
+  `;
+// Google Fonts per theme
+ResultViewer._THEME_FONTS = {
+  editorial: "Cormorant+Garamond:wght@400;600;700",
+  "bold-signal": "Space+Grotesk:wght@500;700",
+  notebook: "Caveat:wght@400;700"
+};
 ResultViewer._EFFECT_MAP = {
   "fade-up": "slide-up",
   "fade-down": "slide-down",
@@ -43543,6 +45000,18 @@ ResultViewer._EFFECT_MAP = {
   "scale-up": "scale-up",
   "flip-in": "flip-in"
 };
+/** Trigger stagger-in animation on slide content children after transition.
+ *  Uses the universal data-enter attribute from the motion system. */
+// Mood → animation config
+ResultViewer._MOOD_CONFIG = {
+  dramatic: { enter: "mood-dramatic", delayMs: 100, durationMs: 600 },
+  techy: { enter: "mood-techy", delayMs: 40, durationMs: 300 },
+  playful: { enter: "mood-playful", delayMs: 80, durationMs: 400 },
+  professional: { enter: "fade-in", delayMs: 30, durationMs: 200 },
+  calm: { enter: "mood-calm", delayMs: 120, durationMs: 800 }
+};
+// Pretext-powered text effects: typing, scramble, wave, fly-in
+ResultViewer._PRETEXT_EFFECTS = /* @__PURE__ */ new Set(["typing", "scramble", "wave", "fly-in"]);
 __decorateClass([
   n4({ type: Object })
 ], ResultViewer.prototype, "result", 2);
@@ -44963,7 +46432,7 @@ var MarketplaceView = class extends i4 {
     try {
       const res = await fetch("/api/marketplace/sources/remove", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", "X-Photon-Request": "1" },
         body: JSON.stringify({ name: name2 }),
         signal: AbortSignal.timeout(1e4)
       });
@@ -44994,6 +46463,7 @@ var MarketplaceView = class extends i4 {
     try {
       const res = await fetch("/api/marketplace/add", {
         method: "POST",
+        headers: { "X-Photon-Request": "1" },
         body: JSON.stringify({ name: item.name }),
         signal: AbortSignal.timeout(3e4)
         // 30s for installation
@@ -45029,6 +46499,7 @@ var MarketplaceView = class extends i4 {
     try {
       const res = await fetch("/api/marketplace/remove", {
         method: "POST",
+        headers: { "X-Photon-Request": "1" },
         body: JSON.stringify({ name: item.name }),
         signal: AbortSignal.timeout(1e4)
       });
@@ -45058,6 +46529,7 @@ var MarketplaceView = class extends i4 {
     try {
       const res = await fetch("/api/marketplace/add", {
         method: "POST",
+        headers: { "X-Photon-Request": "1" },
         body: JSON.stringify({ name: item.name }),
         signal: AbortSignal.timeout(3e4)
       });
@@ -45137,7 +46609,7 @@ var MarketplaceView = class extends i4 {
     try {
       const res = await fetch("/api/marketplace/sources/add", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", "X-Photon-Request": "1" },
         body: JSON.stringify({ source: source3 }),
         signal: AbortSignal.timeout(3e4)
         // 30s for adding repo
@@ -46090,6 +47562,23 @@ var beamTypographyTokens = {
 };
 
 // src/auto-ui/frontend/components/custom-ui-renderer.ts
+function getBeamThemeTokens(themeMode) {
+  const tokens = getThemeTokens(themeMode);
+  if (themeMode === "dark") {
+    tokens["--color-surface"] = "hsl(220, 15%, 10%)";
+    tokens["--color-surface-container"] = "hsl(220, 15%, 12%)";
+    tokens["--color-surface-container-high"] = "hsl(220, 15%, 14%)";
+    tokens["--color-surface-container-highest"] = "hsl(220, 15%, 16%)";
+    tokens["--bg"] = "hsl(220, 15%, 10%)";
+  } else {
+    tokens["--color-surface"] = "#eae4dd";
+    tokens["--color-surface-container"] = "#f8f5f1";
+    tokens["--color-surface-container-high"] = "#f0ebe5";
+    tokens["--color-surface-container-highest"] = "#e8e2db";
+    tokens["--bg"] = "#eae4dd";
+  }
+  return tokens;
+}
 var CustomUiRenderer = class extends i4 {
   constructor() {
     super(...arguments);
@@ -46134,7 +47623,7 @@ var CustomUiRenderer = class extends i4 {
     }
     if (changedProperties.has("theme")) {
       if (this._iframeRef?.contentWindow) {
-        const themeTokens = getThemeTokens(this.theme);
+        const themeTokens = getBeamThemeTokens(this.theme);
         this._iframeRef.contentWindow.postMessage(
           {
             jsonrpc: "2.0",
@@ -46179,6 +47668,7 @@ var CustomUiRenderer = class extends i4 {
       "sandbox",
       "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
     );
+    iframe.setAttribute("allowtransparency", "true");
     iframe.addEventListener("load", (e8) => this._handleIframeLoad(e8));
     iframe.src = this._blobUrl;
     container.appendChild(iframe);
@@ -46417,7 +47907,7 @@ var CustomUiRenderer = class extends i4 {
   _handleIframeLoad(e8) {
     const iframe = e8.target;
     this._iframeRef = iframe;
-    const themeTokens = getThemeTokens(this.theme);
+    const themeTokens = getBeamThemeTokens(this.theme);
     this._iframeRef?.contentWindow?.postMessage(
       {
         jsonrpc: "2.0",
@@ -46455,16 +47945,20 @@ var CustomUiRenderer = class extends i4 {
     this._contentResizeObserver?.disconnect();
     const body = iframe.contentDocument?.body;
     if (body) {
-      this._contentResizeObserver = new ResizeObserver(() => {
-        const scrollH = iframe.contentDocument?.body.scrollHeight ?? 0;
-        const containerH = this.offsetHeight || 500;
-        if (scrollH > containerH) {
-          iframe.style.height = scrollH + "px";
-        } else {
-          iframe.style.height = "";
-        }
-      });
-      this._contentResizeObserver.observe(body);
+      const bodyOverflow = iframe.contentDocument?.defaultView ? getComputedStyle(iframe.contentDocument.body).overflow : "";
+      const isFullHeightApp = bodyOverflow === "hidden";
+      if (!isFullHeightApp) {
+        this._contentResizeObserver = new ResizeObserver(() => {
+          const scrollH = iframe.contentDocument?.body.scrollHeight ?? 0;
+          const containerH = this.offsetHeight || 500;
+          if (scrollH > containerH) {
+            iframe.style.height = scrollH + "px";
+          } else {
+            iframe.style.height = "";
+          }
+        });
+        this._contentResizeObserver.observe(body);
+      }
     }
   }
   disconnectedCallback() {
@@ -46488,7 +47982,7 @@ CustomUiRenderer.styles = [
         width: 100%;
         height: 100%;
         min-height: 500px;
-        background: var(--bg-panel, #0d0d0d);
+        background: transparent;
         border-radius: var(--radius-md);
         overflow: visible;
       }
@@ -66468,6 +67962,23 @@ function X_(r7, i7) {
 }
 
 // src/auto-ui/frontend/components/mcp-app-renderer.ts
+function getBeamThemeTokens2(themeMode) {
+  const tokens = getThemeTokens(themeMode);
+  if (themeMode === "dark") {
+    tokens["--color-surface"] = "hsl(220, 15%, 10%)";
+    tokens["--color-surface-container"] = "hsl(220, 15%, 12%)";
+    tokens["--color-surface-container-high"] = "hsl(220, 15%, 14%)";
+    tokens["--color-surface-container-highest"] = "hsl(220, 15%, 16%)";
+    tokens["--bg"] = "hsl(220, 15%, 10%)";
+  } else {
+    tokens["--color-surface"] = "#eae4dd";
+    tokens["--color-surface-container"] = "#f8f5f1";
+    tokens["--color-surface-container-high"] = "#f0ebe5";
+    tokens["--color-surface-container-highest"] = "#e8e2db";
+    tokens["--bg"] = "#eae4dd";
+  }
+  return tokens;
+}
 var VALID_STYLE_KEYS = /* @__PURE__ */ new Set([
   // Background colors
   "--color-background-primary",
@@ -66596,14 +68107,14 @@ var McpAppRenderer = class extends i4 {
   willUpdate(changedProperties) {
     if (changedProperties.has("theme")) {
       if (this._bridge) {
-        const specTokens = filterSpecVariables(getThemeTokens(this.theme));
+        const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
         this._bridge.setHostContext({
           theme: this.theme,
           styles: { variables: specTokens }
         });
       }
       if (this._iframeRef?.contentWindow) {
-        const themeTokens = getThemeTokens(this.theme);
+        const themeTokens = getBeamThemeTokens2(this.theme);
         this._iframeRef.contentWindow.postMessage(
           {
             jsonrpc: "2.0",
@@ -66659,6 +68170,7 @@ var McpAppRenderer = class extends i4 {
       "sandbox",
       "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
     );
+    iframe.setAttribute("allowtransparency", "true");
     iframe.addEventListener("load", (e8) => this._handleIframeLoad(e8));
     iframe.src = this._blobUrl;
     container.appendChild(iframe);
@@ -66716,7 +68228,7 @@ var McpAppRenderer = class extends i4 {
     const iframe = e8.target;
     this._iframeRef = iframe;
     if (!iframe.contentWindow) return;
-    const themeTokens = getThemeTokens(this.theme);
+    const themeTokens = getBeamThemeTokens2(this.theme);
     iframe.contentWindow.postMessage(
       {
         jsonrpc: "2.0",
@@ -66760,7 +68272,7 @@ var McpAppRenderer = class extends i4 {
       const msg = event.data;
       if (!msg || typeof msg !== "object") return;
       if (msg.jsonrpc === "2.0" && msg.method === "ui/initialize" && msg.id != null) {
-        const themeTokens2 = getThemeTokens(this.theme);
+        const themeTokens2 = getBeamThemeTokens2(this.theme);
         iframe.contentWindow?.postMessage(
           {
             jsonrpc: "2.0",
@@ -66829,7 +68341,7 @@ var McpAppRenderer = class extends i4 {
       void asyncMessageHandler(event);
     };
     window.addEventListener("message", this._messageHandler);
-    const specTokens = filterSpecVariables(getThemeTokens(this.theme));
+    const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
     this._bridge = new W_(
       null,
       { name: "Photon Beam", version: "1.0.0" },
@@ -66968,7 +68480,7 @@ McpAppRenderer.styles = [
         width: 100%;
         height: 100%;
         min-height: 500px;
-        background: var(--bg-panel, #0d0d0d);
+        background: transparent;
         border-radius: var(--radius-md);
         overflow: visible;
       }
@@ -92284,6 +93796,12 @@ function buildPhotonDocblockTagCatalog(runtimeVersion) {
       apply: "@stateful true",
       type: "keyword"
     },
+    {
+      label: "@channel",
+      detail: "Channel support \u2014 sends messages into client conversations (e.g. @channel claude)",
+      apply: "@channel claude",
+      type: "keyword"
+    },
     {
       label: "@idleTimeout",
       detail: "Idle timeout in ms",
@@ -96283,6 +97801,7 @@ var ElicitationModal = class extends i4 {
       case "confirm":
         return this._renderConfirm();
       case "oauth":
+      case "url":
         return this._renderOAuth();
       case "form":
         return this._renderForm();
@@ -96467,17 +97986,19 @@ var ElicitationModal = class extends i4 {
     };
     const provider = this.data?.provider || "OAuth";
     const icon2 = providerIcons[provider.toLowerCase()] || providerIcons.default;
-    const scopes = (this.data?.scopes || []).join(", ") || "basic access";
+    const scopes = (this.data?.scopes || []).join(", ");
+    const customMessage = this.data?.message;
+    const buttonLabel = customMessage ? "Open" : `Authorize ${provider}`;
     return b2`
       <div class="oauth-content">
         <div class="oauth-icon">${icon2}</div>
-        <p class="oauth-message">Authorization is required to access ${provider}.</p>
-        <p class="oauth-scopes">Requested permissions: ${scopes}</p>
+        <p class="oauth-message">
+          ${customMessage || `Authorization is required to access ${provider}.`}
+        </p>
+        ${scopes ? b2`<p class="oauth-scopes">Requested permissions: ${scopes}</p>` : ""}
         <div class="actions" style="justify-content: center;">
           <button class="btn-secondary" @click=${() => this._cancel()}>Cancel</button>
-          <button class="btn-primary" @click=${() => this._startOAuth()}>
-            Authorize ${provider}
-          </button>
+          <button class="btn-primary" @click=${() => this._startOAuth()}>${buttonLabel}</button>
         </div>
       </div>
     `;
@@ -98952,15 +100473,21 @@ var ForkDialog = class extends i4 {
     super(...arguments);
     this.photonName = "";
     this.originRepo = "";
+    this.requireNewName = false;
+    this.suggestedName = "";
     this.targets = [];
     this._selectedTarget = "local";
     this._newRepoName = "";
+    this._newPhotonName = "";
   }
   render() {
     return b2`
       <div class="modal-content" @click=${(e8) => e8.stopPropagation()}>
         <h3>Fork ${this.photonName}</h3>
         ${this.originRepo ? b2`<div class="origin-info">From ${this.originRepo}</div>` : ""}
+        <div class="origin-info">
+          ${this.requireNewName ? "This photon is already local, so the fork needs a new local name." : "Marketplace forks keep the same local name unless you choose another one."}
+        </div>
 
         <div class="target-list">
           ${this.targets.map(
@@ -99012,16 +100539,26 @@ var ForkDialog = class extends i4 {
             <div class="target-radio"></div>
             <div class="target-info">
               <div class="target-name">Local only</div>
-              <div class="target-repo">Remove marketplace tracking, keep file as-is</div>
+              <div class="target-repo">Create or keep a local editable copy</div>
             </div>
           </div>
         </div>
 
+        <input
+          class="create-repo-input"
+          type="text"
+          placeholder=${this.suggestedName || (this.requireNewName ? "new-local-name" : "Optional local name")}
+          .value=${this._newPhotonName}
+          @input=${(e8) => {
+      this._newPhotonName = e8.target.value;
+    }}
+        />
+
         <div class="actions">
           <button class="btn" @click=${() => this._cancel()}>Cancel</button>
           <button
             class="btn btn-primary"
-            ?disabled=${this._selectedTarget === "create" && !this._newRepoName.trim()}
+            ?disabled=${this._selectedTarget === "create" && !this._newRepoName.trim() || this.requireNewName && !this._newPhotonName.trim()}
             @click=${() => this._confirm()}
           >
             Fork
@@ -99039,7 +100576,7 @@ var ForkDialog = class extends i4 {
     }
     this.dispatchEvent(
       new CustomEvent("fork-confirm", {
-        detail: { target: target2 },
+        detail: { target: target2, newName: this._newPhotonName.trim() || void 0 },
         bubbles: true,
         composed: true
       })
@@ -99223,6 +100760,12 @@ __decorateClass([
 __decorateClass([
   n4()
 ], ForkDialog.prototype, "originRepo", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ForkDialog.prototype, "requireNewName", 2);
+__decorateClass([
+  n4()
+], ForkDialog.prototype, "suggestedName", 2);
 __decorateClass([
   n4({ type: Array })
 ], ForkDialog.prototype, "targets", 2);
@@ -99232,6 +100775,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ForkDialog.prototype, "_newRepoName", 2);
+__decorateClass([
+  r5()
+], ForkDialog.prototype, "_newPhotonName", 2);
 ForkDialog = __decorateClass([
   t4("fork-dialog")
 ], ForkDialog);
@@ -99242,6 +100788,7 @@ var AppLayout = class extends i4 {
     super(...arguments);
     this.photonName = "";
     this.photonIcon = "";
+    this.hideBelow = false;
     this._poppedOut = false;
     this._handleKeydown = (e8) => {
       if (e8.key === "Escape" && this._poppedOut) {
@@ -99299,6 +100846,34 @@ AppLayout.styles = [
         display: block;
       }
 
+      :host([hide-below]) .scroll-divider,
+      :host([hide-below]) .below-fold {
+        display: none;
+      }
+
+      /* App tab mode: fill the available flex height instead of using min-height */
+      :host([hide-below]) {
+        flex: 1;
+        min-height: 0;
+        height: 100%;
+      }
+
+      :host([hide-below]) .app-viewport {
+        min-height: unset;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        /* Remove rounded corners and clipping — we fill the full viewport */
+        border-radius: 0;
+        overflow: visible;
+      }
+
+      :host([hide-below]) .app-content {
+        overflow: hidden;
+        flex: 1;
+        min-height: 0;
+      }
+
       .app-viewport {
         min-height: calc(100vh - 140px);
         border-radius: var(--radius-md);
@@ -99408,6 +100983,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: String })
 ], AppLayout.prototype, "photonIcon", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true, attribute: "hide-below" })
+], AppLayout.prototype, "hideBelow", 2);
 __decorateClass([
   r5()
 ], AppLayout.prototype, "_poppedOut", 2);