@portel/photon 1.19.0 → 1.20.0

package/dist/beam.bundle.js

@@ -21740,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"],
@@ -22435,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";
@@ -22449,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 = [];
@@ -22503,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;
@@ -22538,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) {
@@ -22603,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) {
@@ -22617,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") {
@@ -22644,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";
             }
           }
         }
@@ -22847,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)
         });
@@ -22876,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;
@@ -22892,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();
@@ -22920,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 () => {
@@ -22929,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)
         });
@@ -23023,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");
             }
@@ -23035,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) */
@@ -23112,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");
@@ -23134,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);
@@ -23161,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");
@@ -23479,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) {
@@ -23603,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) {
@@ -23706,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();
@@ -24240,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 {
@@ -24263,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) => {
@@ -24576,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);
@@ -24975,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
@@ -24986,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()}
@@ -25001,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";
       }
@@ -25015,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)";
@@ -25094,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)";
@@ -25128,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>
@@ -25160,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=${() => {
@@ -25183,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();
@@ -25740,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,
@@ -25810,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;">
@@ -25860,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
@@ -25870,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) {
@@ -25888,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>
@@ -25897,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>
           `;
         }
@@ -25976,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>
@@ -26012,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">
@@ -26086,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);
@@ -26152,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;
     }
@@ -26179,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) {
@@ -26316,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;">
@@ -26336,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,
@@ -26368,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>
 
@@ -26376,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>
@@ -26421,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 */
@@ -26437,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"};"
@@ -26517,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
@@ -26629,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();
@@ -26676,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,
@@ -26699,6 +26930,8 @@ ${photon.errorMessage || "Unknown error"}</pre
         executing: false,
         progress: null
       });
+    } finally {
+      this._panelProgressTokens.delete(progressToken);
     }
   }
   /** Change the method in a split panel */
@@ -26805,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 } }));
@@ -27474,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;
@@ -27607,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}
@@ -27619,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}
@@ -27773,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;
@@ -27785,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"
@@ -28286,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>
@@ -28324,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}"
@@ -28358,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>
@@ -28417,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;"
@@ -28612,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 {
@@ -28842,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 */
@@ -28866,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;
       }
 
@@ -28897,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;
       }
@@ -28951,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 {
@@ -28997,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 {
@@ -30159,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;
       }
@@ -30394,6 +30904,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_sidebarVisible", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_sidebarWidth", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_focusMode", 2);
@@ -30553,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);
@@ -30568,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);
@@ -30587,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();
@@ -30676,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() {
@@ -30751,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
@@ -30783,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,
@@ -30813,7 +31368,7 @@ var BeamSidebar = class extends i4 {
         "attention",
         warning
       ) : ""}
-            ${loadErrors.length > 0 ? this._renderSection(
+              ${loadErrors.length > 0 ? this._renderSection(
         "errors",
         "LOAD ERRORS",
         loadErrors,
@@ -30821,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">
@@ -30866,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()}
@@ -30950,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>
@@ -30974,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>
     `;
   }
@@ -31017,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(
@@ -31102,6 +31729,9 @@ ${photon.path}` : ""}"
       })
     );
   }
+  _emitTabChange(tab) {
+    this.dispatchEvent(new CustomEvent("tab-change", { detail: { tab } }));
+  }
   _handleSearch(e8) {
     this._searchQuery = e8.target.value;
   }
@@ -31159,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;
@@ -31166,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)
    */
@@ -31206,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;
@@ -31300,6 +31951,7 @@ BeamSidebar.styles = [
       .header {
         padding: var(--space-md);
         border-bottom: 1px solid var(--border-glass);
+        flex-shrink: 0;
       }
 
       .header-row {
@@ -31409,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);
       }
@@ -31502,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 {
@@ -31571,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;
@@ -31587,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;
@@ -31887,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;
@@ -31941,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);
@@ -31971,6 +32724,7 @@ var MethodCard = class extends i4 {
   constructor() {
     super(...arguments);
     this.photonName = "";
+    this.editable = false;
     this._editingDescription = false;
     this._editingIcon = false;
     this._editedDescription = "";
@@ -32034,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>` : ""}
@@ -32087,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>
@@ -32698,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);
@@ -32812,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 = {};
@@ -32917,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);
@@ -33022,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}>
@@ -34826,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);
@@ -34853,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;
@@ -35020,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 {
@@ -35159,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);
@@ -39718,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());
       });
     }
@@ -45610,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)
       });
@@ -45641,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
@@ -45676,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)
       });
@@ -45705,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)
       });
@@ -45784,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
@@ -46737,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);
@@ -46781,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",
@@ -46826,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);
@@ -47064,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",
@@ -47102,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() {
@@ -47135,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;
       }
@@ -67115,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",
@@ -67243,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",
@@ -67306,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);
@@ -67363,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",
@@ -67407,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",
@@ -67476,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" },
@@ -67615,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;
       }
@@ -99608,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(
@@ -99668,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
@@ -99695,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
       })
@@ -99879,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);
@@ -99888,6 +100775,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ForkDialog.prototype, "_newRepoName", 2);
+__decorateClass([
+  r5()
+], ForkDialog.prototype, "_newPhotonName", 2);
 ForkDialog = __decorateClass([
   t4("fork-dialog")
 ], ForkDialog);
@@ -99898,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) {
@@ -99955,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);
@@ -100064,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);