@portel/photon 1.19.0 → 1.20.1

package/dist/beam.bundle.js

@@ -19269,187 +19269,33 @@ function showToast(message, type = "info", duration4 = 3e3, action) {
   ToastManager.show(message, type, duration4, action);
 }
 
-// src/auto-ui/frontend/components/confirm-dialog.ts
-var ConfirmDialog = class extends i4 {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.message = "";
-    this.confirmLabel = "OK";
-    this.cancelLabel = "Cancel";
-    this.destructive = false;
-  }
-  show(message, options) {
-    this.message = message;
-    this.confirmLabel = options?.confirm ?? "OK";
-    this.cancelLabel = options?.cancel ?? "Cancel";
-    this.destructive = options?.destructive ?? false;
-    this.open = true;
-    return new Promise((resolve2) => {
-      this._resolve = resolve2;
-    });
-  }
-  _handleConfirm() {
-    this.open = false;
-    this._resolve?.(true);
-  }
-  _handleCancel() {
-    this.open = false;
-    this._resolve?.(false);
-  }
-  _handleKeydown(e8) {
-    if (e8.key === "Escape") this._handleCancel();
-    if (e8.key === "Enter") this._handleConfirm();
-  }
-  render() {
-    return b2`
-      <div class="dialog" @keydown=${(e8) => this._handleKeydown(e8)}>
-        <div class="message">${this.message}</div>
-        <div class="actions">
-          <button class="btn-cancel" @click=${() => this._handleCancel()}>
-            ${this.cancelLabel}
-          </button>
-          <button
-            class="btn-confirm ${this.destructive ? "destructive" : ""}"
-            @click=${() => this._handleConfirm()}
-          >
-            ${this.confirmLabel}
-          </button>
-        </div>
-      </div>
-    `;
-  }
-};
-ConfirmDialog.styles = [
-  theme,
-  i`
-      :host {
-        display: none;
-      }
-
-      @keyframes backdrop-in {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes content-in {
-        from {
-          opacity: 0;
-          transform: scale(0.95) translateY(8px);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1) translateY(0);
-        }
-      }
-
-      :host([open]) {
-        display: flex;
-        position: fixed;
-        inset: 0;
-        background: rgba(0, 0, 0, 0.6);
-        backdrop-filter: blur(4px);
-        z-index: 10001;
-        align-items: center;
-        justify-content: center;
-        animation: backdrop-in 0.15s ease-out both;
-      }
-
-      .dialog {
-        background: var(--bg-panel);
-        border: 1px solid var(--border-glass);
-        border-radius: var(--radius-md, 12px);
-        padding: 24px;
-        max-width: 400px;
-        width: 90%;
-        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
-        animation: content-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
-        animation-delay: 0.05s;
-      }
-
-      .message {
-        font-size: 14px;
-        line-height: 1.5;
-        color: var(--t-primary);
-        margin-bottom: 20px;
-      }
-
-      .actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-      }
-
-      button {
-        padding: 8px 16px;
-        border-radius: var(--radius-sm, 6px);
-        font-size: 13px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        font-family: inherit;
-        border: none;
-      }
-
-      .btn-cancel {
-        background: var(--bg-glass);
-        color: var(--t-primary);
-        border: 1px solid var(--border-glass);
-      }
-
-      .btn-cancel:hover {
-        background: var(--bg-glass-strong);
-      }
-
-      .btn-confirm {
-        background: var(--accent);
-        color: #fff;
-      }
-
-      .btn-confirm:hover {
-        opacity: 0.9;
-      }
-
-      .btn-confirm.destructive {
-        background: hsl(0, 60%, 50%);
-      }
-
-      .btn-confirm.destructive:hover {
-        background: hsl(0, 60%, 45%);
-      }
-    `
-];
-__decorateClass([
-  n4({ type: Boolean, reflect: true })
-], ConfirmDialog.prototype, "open", 2);
-__decorateClass([
-  n4({ type: String })
-], ConfirmDialog.prototype, "message", 2);
-__decorateClass([
-  n4({ type: String })
-], ConfirmDialog.prototype, "confirmLabel", 2);
-__decorateClass([
-  n4({ type: String })
-], ConfirmDialog.prototype, "cancelLabel", 2);
-__decorateClass([
-  n4({ type: Boolean })
-], ConfirmDialog.prototype, "destructive", 2);
-ConfirmDialog = __decorateClass([
-  t4("confirm-dialog")
-], ConfirmDialog);
-async function confirmDialog(message, options) {
-  const beamApp = document.querySelector("beam-app");
-  const root = beamApp?.shadowRoot ?? document.body;
-  let dialog = root.querySelector("confirm-dialog");
-  if (!dialog) {
-    dialog = document.createElement("confirm-dialog");
-    root.appendChild(dialog);
-  }
-  return dialog.show(message, options);
+// src/auto-ui/frontend/utils/elicit.ts
+function elicit(data) {
+  return new Promise((resolve2) => {
+    document.dispatchEvent(
+      new CustomEvent("beam:elicit-local", {
+        detail: { data, resolve: resolve2 }
+      })
+    );
+  });
+}
+async function confirmElicit(message, options) {
+  const result = await elicit({
+    ask: "confirm",
+    message,
+    default: false,
+    ...options?.confirm && { placeholder: options.confirm }
+  });
+  return result.action === "accept" && result.value !== false;
+}
+async function promptElicit(message, defaultValue = "") {
+  const result = await elicit({
+    ask: "text",
+    message,
+    default: defaultValue
+  });
+  if (result.action === "cancel") return null;
+  return result.value ?? null;
 }
 
 // node_modules/lit-html/directives/unsafe-svg.js
@@ -20857,6 +20703,258 @@ function loadSavedThemeConfig() {
   return null;
 }
 
+// src/auto-ui/frontend/components/pending-approvals.ts
+var PendingApprovals = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.approvals = [];
+    this._resolving = /* @__PURE__ */ new Set();
+  }
+  render() {
+    return b2`
+      <div class="header">
+        <span class="header-title">${shieldCheck} Pending Approvals</span>
+        <button
+          class="close-btn"
+          @click=${() => this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }))}
+          aria-label="Close"
+        >
+          ${xMark}
+        </button>
+      </div>
+
+      <div class="content">
+        ${this.approvals.length === 0 ? b2`
+              <div class="empty">
+                ${shieldCheck}
+                <div>No pending approvals</div>
+              </div>
+            ` : this.approvals.map((a5) => this._renderApproval(a5))}
+      </div>
+    `;
+  }
+  _renderApproval(approval) {
+    const isResolving = this._resolving.has(approval.id);
+    const timeLeft = this._formatTimeLeft(approval.expiresAt);
+    return b2`
+      <div class="approval-card ${approval.destructive ? "destructive" : ""}">
+        <div class="approval-meta">
+          <span>${approval.photon}.${approval.method}</span>
+          ${approval.destructive ? b2`<span class="destructive-label">${warning} destructive</span>` : A}
+        </div>
+        <div class="approval-message">${approval.message}</div>
+        ${approval.preview ? b2`<div class="preview">
+              ${typeof approval.preview === "string" ? approval.preview : JSON.stringify(approval.preview, null, 2)}
+            </div>` : A}
+        <div class="expiry">Expires ${timeLeft}</div>
+        <div class="actions">
+          <button
+            class="btn btn-reject"
+            ?disabled=${isResolving}
+            @click=${() => this._respond(approval, false)}
+          >
+            ${xMark} Reject
+          </button>
+          <button
+            class="btn btn-approve"
+            ?disabled=${isResolving}
+            @click=${() => this._respond(approval, true)}
+          >
+            ${check} Approve
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  _respond(approval, approved) {
+    this._resolving.add(approval.id);
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent("approval-response", {
+        detail: { approvalId: approval.id, photon: approval.photon, approved },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _formatTimeLeft(expiresAt) {
+    const diff = new Date(expiresAt).getTime() - Date.now();
+    if (diff <= 0) return "expired";
+    const hours = Math.floor(diff / (1e3 * 60 * 60));
+    const minutes = Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60));
+    if (hours > 0) return `in ${hours}h ${minutes}m`;
+    return `in ${minutes}m`;
+  }
+};
+PendingApprovals.styles = [
+  theme,
+  buttons,
+  i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        color: var(--t-primary);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--space-sm) var(--space-md);
+        border-bottom: 1px solid var(--t-border);
+      }
+
+      .header-title {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-weight: 600;
+        font-size: var(--text-sm);
+      }
+
+      .close-btn {
+        background: none;
+        border: none;
+        color: var(--t-secondary);
+        cursor: pointer;
+        padding: var(--space-xs);
+        border-radius: var(--radius-sm);
+        display: flex;
+        align-items: center;
+      }
+
+      .close-btn:hover {
+        background: var(--t-hover);
+      }
+
+      .content {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--space-sm);
+      }
+
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-xl);
+        text-align: center;
+        color: var(--t-secondary);
+      }
+
+      .empty svg {
+        opacity: 0.4;
+        margin-bottom: var(--space-sm);
+        width: 32px;
+        height: 32px;
+      }
+
+      .approval-card {
+        border: 1px solid var(--t-border);
+        border-radius: var(--radius-md);
+        padding: var(--space-sm) var(--space-md);
+        margin-bottom: var(--space-sm);
+        background: var(--t-surface);
+      }
+
+      .approval-card.destructive {
+        border-color: hsl(0, 60%, 50%);
+      }
+
+      .approval-meta {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-size: var(--text-xs);
+        color: var(--t-secondary);
+        margin-bottom: var(--space-xs);
+      }
+
+      .approval-message {
+        font-size: var(--text-sm);
+        margin-bottom: var(--space-sm);
+      }
+
+      .preview {
+        font-size: var(--text-xs);
+        color: var(--t-secondary);
+        background: var(--t-bg);
+        padding: var(--space-xs) var(--space-sm);
+        border-radius: var(--radius-sm);
+        margin-bottom: var(--space-sm);
+        max-height: 80px;
+        overflow-y: auto;
+        font-family: var(--font-mono);
+        white-space: pre-wrap;
+      }
+
+      .expiry {
+        font-size: var(--text-xs);
+        color: var(--t-secondary);
+      }
+
+      .actions {
+        display: flex;
+        gap: var(--space-xs);
+        margin-top: var(--space-sm);
+      }
+
+      .btn {
+        flex: 1;
+        padding: var(--space-xs) var(--space-sm);
+        border: 1px solid var(--t-border);
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        font-size: var(--text-xs);
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-xs);
+        transition: all 0.15s;
+      }
+
+      .btn-approve {
+        background: hsl(142, 60%, 45%);
+        color: white;
+        border-color: hsl(142, 60%, 40%);
+      }
+
+      .btn-approve:hover {
+        background: hsl(142, 60%, 40%);
+      }
+
+      .btn-reject {
+        background: var(--t-surface);
+        color: var(--t-primary);
+      }
+
+      .btn-reject:hover {
+        background: var(--t-hover);
+      }
+
+      .destructive-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        color: hsl(0, 70%, 55%);
+        font-size: var(--text-2xs);
+        font-weight: 600;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: Array })
+], PendingApprovals.prototype, "approvals", 2);
+__decorateClass([
+  r5()
+], PendingApprovals.prototype, "_resolving", 2);
+PendingApprovals = __decorateClass([
+  t4("pending-approvals")
+], PendingApprovals);
+
 // src/auto-ui/frontend/services/photon-instance-manager.ts
 var SimpleEventEmitter = class {
   constructor() {
@@ -21645,6 +21743,32 @@ var MCPClientService = class {
       return { success: false };
     }
   }
+  /**
+   * Send approval response (approve/reject) for a pending approval
+   */
+  async sendApprovalResponse(approvalId, photon, approved) {
+    try {
+      await this.sendRequest("beam/approval-response", {
+        approvalId,
+        photon,
+        approved
+      });
+      return { success: true };
+    } catch {
+      return { success: false };
+    }
+  }
+  /**
+   * Fetch all pending approvals from the server
+   */
+  async fetchPendingApprovals() {
+    try {
+      const result = await this.sendRequest("beam/approvals-list", {});
+      return result?.approvals || [];
+    } catch {
+      return [];
+    }
+  }
   /**
    * Get rich help documentation for a photon via beam/photon-help tool
    */
@@ -21740,8 +21864,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"],
@@ -21933,6 +22062,12 @@ var MCPClientService = class {
       case "beam/elicitation":
         this.emit("elicitation", notification.params);
         break;
+      case "beam/elicitation-deferred":
+        this.emit("elicitation-deferred", notification.params);
+        break;
+      case "beam/approval-resolved":
+        this.emit("approval-resolved", notification.params);
+        break;
       case "beam/result":
         this.emit("result", notification.params);
         break;
@@ -22435,6 +22570,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 +22640,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 = [];
@@ -22477,6 +22672,8 @@ var BeamApp = class extends i4 {
     this._photonHelpLoading = false;
     this._elicitationData = null;
     this._showElicitation = false;
+    this._showApprovals = false;
+    this._pendingApprovalsList = [];
     this._protocolMode = "legacy";
     this._selectedMcpAppUri = null;
     this._mcpReady = false;
@@ -22503,7 +22700,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 +22739,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 +22808,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 +22823,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 +22852,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";
             }
           }
         }
@@ -22811,7 +23021,7 @@ var BeamApp = class extends i4 {
     this._handleRemove = async () => {
       this._closeSettingsMenu();
       if (this._selectedPhoton && this._mcpReady) {
-        if (await confirmDialog(`Remove ${this._selectedPhoton.name} from this workspace?`, {
+        if (await confirmElicit(`Remove ${this._selectedPhoton.name} from this workspace?`, {
           confirm: "Remove",
           destructive: true
         })) {
@@ -22822,22 +23032,42 @@ var BeamApp = class extends i4 {
         }
       }
     };
-    this._handleCopyMCPConfig = async () => {
+    this._copyConfigSnippet = async (transport) => {
       if (!this._selectedPhoton) return;
+      const name2 = this._selectedPhoton.name;
       try {
-        const res = await fetch(
-          `/api/export/mcp-config?photon=${encodeURIComponent(this._selectedPhoton.name)}`,
-          {
-            signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+        let config3;
+        if (transport === "url") {
+          const beamUrl = `${location.protocol}//${location.host}/mcp`;
+          config3 = { mcpServers: { [name2]: { url: beamUrl } } };
+        } else {
+          const res = await fetch("/api/export/mcp-config", {
+            signal: AbortSignal.timeout(3e3)
+          });
+          if (res.ok) {
+            const all = await res.json();
+            const entry = all.mcpServers?.[name2];
+            if (entry) {
+              config3 = { mcpServers: { [name2]: entry } };
+            } else {
+              config3 = {
+                mcpServers: {
+                  [name2]: { command: "npx", args: ["-y", "@portel/photon", "mcp", name2] }
+                }
+              };
+            }
+          } else {
+            config3 = {
+              mcpServers: { [name2]: { command: "npx", args: ["-y", "@portel/photon", "mcp", name2] } }
+            };
           }
-        );
-        if (!res.ok) throw new Error("Failed to fetch config");
-        const config3 = await res.json();
+        }
         await navigator.clipboard.writeText(JSON.stringify(config3, null, 2));
-        showToast("MCP config copied \u2014 paste into Claude Desktop settings", "success");
+        const label = transport === "url" ? "HTTP config" : "Claude Desktop config";
+        showToast(`${label} copied to clipboard`, "success");
       } catch (error2) {
         console.warn("Copy MCP config failed:", error2);
-        showToast("Failed to copy MCP config", "error");
+        showToast("Failed to copy config", "error");
       }
     };
     this._handleUpgrade = async () => {
@@ -22847,7 +23077,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 +23106,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 +23126,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 +23154,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 +23165,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 +23259,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 +23272,18 @@ 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;
+      this._mainTab = "source";
+      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 +23353,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 +23378,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 +23408,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");
@@ -23183,7 +23433,7 @@ var BeamApp = class extends i4 {
     };
     this._handleDeletePhoton = async () => {
       this._closeSettingsMenu();
-      if (await confirmDialog(`Remove "${this._selectedPhoton?.name}"? It will be moved to trash.`, {
+      if (await confirmElicit(`Remove "${this._selectedPhoton?.name}"? It will be moved to trash.`, {
         confirm: "Remove",
         destructive: true
       })) {
@@ -23369,22 +23619,35 @@ var BeamApp = class extends i4 {
       this._broadcastThemeToIframes();
     };
     this._handleOklchThemeReset = () => {
-      this._oklchEnabled = false;
-      const cssVars = beamThemeToCSS(
+      const oldVars = beamThemeToCSS(
         generateBeamThemeColors({ hue: 0, chroma: 0, lightness: 0.5, theme: "dark" })
       );
-      for (const prop of Object.keys(cssVars)) {
+      for (const prop of Object.keys(oldVars)) {
         this.style.removeProperty(prop);
       }
-      this._applyTheme();
+      const theme3 = this._theme || "dark";
+      const defaultViolet = { hue: 260, chroma: 0.15, lightness: 0.65, theme: theme3 };
+      this._oklchEnabled = true;
+      this._applyOklchTheme(defaultViolet);
       this._broadcastThemeToIframes();
       showToast("Theme reset to default", "info");
     };
+    this._handleLocalElicit = (e8) => {
+      const { data, resolve: resolve2 } = e8.detail;
+      this._localElicitResolve = resolve2;
+      this._elicitationData = { ...data };
+      this._showElicitation = true;
+    };
     this._handleElicitationSubmit = async (e8) => {
       const { value } = e8.detail;
       const elicitationId = this._elicitationData?.elicitationId;
       this._showElicitation = false;
       this._elicitationData = null;
+      if (this._localElicitResolve) {
+        this._localElicitResolve({ action: "accept", value });
+        this._localElicitResolve = void 0;
+        return;
+      }
       const pendingWindow = elicitationId ? this._pendingBridgeCalls.get(elicitationId) : null;
       if (pendingWindow) {
         this._pendingBridgeCalls.delete(elicitationId);
@@ -23411,6 +23674,11 @@ var BeamApp = class extends i4 {
       this._showElicitation = false;
       this._elicitationData = null;
       this._isExecuting = false;
+      if (this._localElicitResolve) {
+        this._localElicitResolve({ action: "cancel" });
+        this._localElicitResolve = void 0;
+        return;
+      }
       const pendingWindow = elicitationId ? this._pendingBridgeCalls.get(elicitationId) : null;
       if (pendingWindow) {
         this._pendingBridgeCalls.delete(elicitationId);
@@ -23426,6 +23694,18 @@ var BeamApp = class extends i4 {
       this._log("info", "Input cancelled");
       showToast("Input cancelled", "info");
     };
+    this._handleApprovalResponse = async (e8) => {
+      const { approvalId, photon, approved } = e8.detail;
+      this._pendingApprovalsList = this._pendingApprovalsList.filter((a5) => a5.id !== approvalId);
+      if (this._pendingApprovalsList.length === 0) {
+        this._showApprovals = false;
+      }
+      const result = await mcpClient.sendApprovalResponse(approvalId, photon, approved);
+      if (!result.success) {
+        showToast("Failed to send approval response", "error");
+        void this._fetchPendingApprovals();
+      }
+    };
     this._handleOAuthComplete = async (e8) => {
       const { elicitationId, success: success2 } = e8.detail;
       this._showElicitation = false;
@@ -23479,16 +23759,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 +23876,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) {
@@ -23645,7 +23938,7 @@ var BeamApp = class extends i4 {
           this._handleReconfigure();
           break;
         case "copy-config":
-          void this._handleCopyMCPConfig();
+          void this._copyConfigSnippet("stdio");
           break;
         case "upgrade":
           void this._handleUpgrade();
@@ -23706,7 +23999,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();
@@ -23936,6 +24230,28 @@ var BeamApp = class extends i4 {
       this._showError("Photon not found", `Method '${action}' not found on ${targetName}`);
     }
   }
+  async _handleCreatePhoton(filename, template = "blank") {
+    try {
+      const res = await fetch("/api/create-photon", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ filename, template })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Failed to create photon" }));
+        this._showError("Create failed", err.error);
+        return;
+      }
+      const { name: name2 } = await res.json();
+      showToast(`Created ${filename}`, "success");
+      this._pendingStudioOpen = true;
+      setTimeout(() => {
+        this._sidebar?.scrollPhotonIntoView(name2);
+      }, 1500);
+    } catch (err) {
+      this._showError("Create failed", err.message);
+    }
+  }
   /**
    * Collect static methods from all internal photons for global display
    */
@@ -24019,6 +24335,7 @@ var BeamApp = class extends i4 {
       this._verboseLogging = true;
     }
     document.addEventListener("click", this._handleDocumentClick);
+    document.addEventListener("beam:elicit-local", this._handleLocalElicit);
     void this._connectMCP();
     this._setupNotificationHandlers();
     window.addEventListener("popstate", this._handleRouteChange);
@@ -24063,6 +24380,7 @@ var BeamApp = class extends i4 {
     window.removeEventListener("message", this._handleBridgeMessage);
     window.removeEventListener("keydown", this._handleKeydown);
     document.removeEventListener("click", this._handleDocumentClick);
+    document.removeEventListener("beam:elicit-local", this._handleLocalElicit);
     this._cleanupCollectionSubscriptions();
   }
   willUpdate(changedProperties) {
@@ -24186,6 +24504,7 @@ var BeamApp = class extends i4 {
           }
           this._initialConnectDone = true;
           void this._checkForUpdates();
+          this._startApprovalsPolling();
           if (window.location.pathname !== "/") {
             void this._handleRouteChange();
           } else if (!this._selectedPhoton && this._photons.length > 0) {
@@ -24212,6 +24531,7 @@ var BeamApp = class extends i4 {
         this._connected = false;
         this._reconnecting = true;
         this._reconnectAttempt++;
+        this._stopApprovalsPolling();
         showToast("Connection lost. Reconnecting...", "warning");
       });
       mcpClient.on("tools-changed", () => {
@@ -24240,8 +24560,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 +24587,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) => {
@@ -24369,6 +24690,31 @@ var BeamApp = class extends i4 {
           this._photons = data.photons.map(
             (p5) => updateFlags.has(p5.name) ? { ...p5, hasUpdate: true } : p5
           );
+          if (this._pendingStudioOpen) {
+            const newPhoton = this._photons.find((p5) => !p5.internal && !prevNames.has(p5.name));
+            if (newPhoton) {
+              this._pendingStudioOpen = false;
+              this._selectedPhoton = newPhoton;
+              this._view = "studio";
+              if (this._pendingTemplateSource) {
+                const tpl = this._pendingTemplateSource;
+                this._pendingTemplateSource = void 0;
+                requestAnimationFrame(() => {
+                  const studio = this.shadowRoot?.querySelector("photon-studio");
+                  if (studio?.applyTemplate) {
+                    studio.applyTemplate({
+                      source: tpl,
+                      id: "custom",
+                      name: "",
+                      description: "",
+                      icon: ""
+                    });
+                  }
+                });
+              }
+              this._updateRoute(true);
+            }
+          }
           if (this._selectedPhoton) {
             const updated = this._photons.find((p5) => p5.name === this._selectedPhoton?.name);
             if (updated) {
@@ -24382,28 +24728,7 @@ var BeamApp = class extends i4 {
             if (newUserPhoton) {
               this._selectedPhoton = newUserPhoton;
               this._welcomePhase = "welcome";
-              if (this._pendingStudioOpen) {
-                this._pendingStudioOpen = false;
-                this._view = "studio";
-                if (this._pendingTemplateSource) {
-                  const tpl = this._pendingTemplateSource;
-                  this._pendingTemplateSource = void 0;
-                  requestAnimationFrame(() => {
-                    const studio = this.shadowRoot?.querySelector("photon-studio");
-                    if (studio?.applyTemplate) {
-                      studio.applyTemplate({
-                        source: tpl,
-                        id: "custom",
-                        name: "",
-                        description: "",
-                        icon: ""
-                      });
-                    }
-                  });
-                }
-              } else {
-                this._view = "list";
-              }
+              this._view = "list";
               this._updateRoute(true);
             }
           }
@@ -24472,6 +24797,26 @@ var BeamApp = class extends i4 {
           this._log("info", `Input required: ${data.message || elicitationData.ask}`);
         }
       });
+      mcpClient.on("elicitation-deferred", (data) => {
+        if (data) {
+          if (this._elicitationData && this._elicitationData.elicitationId === data.elicitationId) {
+            this._showElicitation = false;
+            this._elicitationData = null;
+          }
+          void this._fetchPendingApprovals();
+          this._log("info", `Moved to pending approvals: ${data.message || "Approval required"}`);
+        }
+      });
+      mcpClient.on("approval-resolved", (data) => {
+        if (data) {
+          this._pendingApprovalsList = this._pendingApprovalsList.filter(
+            (a5) => a5.id !== data.approvalId
+          );
+          if (this._pendingApprovalsList.length === 0) {
+            this._showApprovals = false;
+          }
+        }
+      });
       mcpClient.on("channel-event", (data) => {
         this._forwardToIframes({
           jsonrpc: "2.0",
@@ -24576,17 +24921,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 +25319,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,22 +25330,81 @@ var BeamApp = class extends i4 {
           .connected=${this._connected}
           .reconnecting=${this._reconnecting}
           .updatesAvailable=${this._updatesAvailable.length}
+          .pendingApprovals=${this._pendingApprovalsList.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()}
           @theme-change=${this._handleThemeChange}
           @open-theme-settings=${() => this._showThemeSettings = true}
           @show-shortcuts=${this._showHelpModal}
+          @show-approvals=${() => {
+      this._showApprovals = true;
+      void this._fetchPendingApprovals();
+    }}
           @reconnect-mcp=${(e8) => {
       void this._handleReconnectMCP(e8);
     }}
           @diagnostics=${() => {
       this._view = "diagnostics";
       this._updateRoute();
+    }}
+          @create-photon=${(e8) => {
+      void this._handleCreatePhoton(e8.detail.name, e8.detail.template);
     }}
           @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 +25418,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 +25456,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 +25466,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" && this._view !== "studio" ? 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 +25501,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=${() => {
@@ -25181,6 +25522,54 @@ var BeamApp = class extends i4 {
         @cancel=${this._handleElicitationCancel}
         @oauth-complete=${this._handleOAuthComplete}
       ></elicitation-modal>
+
+      ${this._showApprovals ? b2`
+            <div class="approvals-overlay" @click=${() => this._showApprovals = false}></div>
+            <div class="approvals-panel glass-panel">
+              <pending-approvals
+                .approvals=${this._pendingApprovalsList}
+                @approval-response=${this._handleApprovalResponse}
+                @close=${() => this._showApprovals = false}
+              ></pending-approvals>
+            </div>
+          ` : ""}
+    `;
+  }
+  _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() {
@@ -25191,6 +25580,7 @@ var BeamApp = class extends i4 {
       return b2`<photon-studio
         .photonName=${this._selectedPhoton?.name || ""}
         .theme=${this._theme}
+        .hideCloseButton=${true}
         @studio-close=${() => this._view = "list"}
         @studio-saved=${async () => {
         const tools = await mcpClient.listTools();
@@ -25740,62 +26130,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 +26210,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 +26261,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 +26271,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 +26289,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 +26298,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 +26385,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 +26421,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 +26494,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 +26604,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 +26632,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 +26771,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 +26792,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 +26824,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 +26834,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 +26883,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 +26901,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 +27008,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 +27118,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 +27166,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 +27183,8 @@ ${photon.errorMessage || "Unknown error"}</pre
         executing: false,
         progress: null
       });
+    } finally {
+      this._panelProgressTokens.delete(progressToken);
     }
   }
   /** Change the method in a split panel */
@@ -26804,8 +27290,15 @@ ${photon.errorMessage || "Unknown error"}</pre
       case "run-tests":
         void this._runTests();
         break;
+      case "copy-config-stdio":
+        void this._copyConfigSnippet("stdio");
+        break;
+      case "copy-config-url":
+        void this._copyConfigSnippet("url");
+        break;
       case "help":
-        this._showPhotonHelp = true;
+        this._mainTab = "help";
+        void this._loadPhotonHelp();
         break;
       default:
         this._handleContextAction(new CustomEvent("context-action", { detail: { action: id2 } }));
@@ -26941,7 +27434,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   }
   async _handleBackFromMethod() {
     const form = this.shadowRoot?.querySelector("invoke-form");
-    if (form?.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+    if (form?.isDirty && !await confirmElicit("You have unsaved changes. Discard them?", {
       confirm: "Discard",
       destructive: true
     })) {
@@ -27388,6 +27881,21 @@ ${photon.errorMessage || "Unknown error"}</pre
       this.style.setProperty(prop, value);
     }
   }
+  async _fetchPendingApprovals() {
+    if (!this._mcpReady) return;
+    this._pendingApprovalsList = await mcpClient.fetchPendingApprovals();
+  }
+  _startApprovalsPolling() {
+    this._stopApprovalsPolling();
+    void this._fetchPendingApprovals();
+    this._approvalsRefreshInterval = setInterval(() => void this._fetchPendingApprovals(), 6e4);
+  }
+  _stopApprovalsPolling() {
+    if (this._approvalsRefreshInterval) {
+      clearInterval(this._approvalsRefreshInterval);
+      this._approvalsRefreshInterval = void 0;
+    }
+  }
   _applyTheme() {
     this.setAttribute("data-theme", this._theme);
   }
@@ -27474,6 +27982,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 +28170,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 +28183,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}
@@ -27699,6 +28263,17 @@ ${photon.errorMessage || "Unknown error"}</pre
       toggle: true,
       toggleActive: this._verboseLogging
     });
+    items.push({
+      id: "copy-config-stdio",
+      label: "Copy Config (Claude Desktop)",
+      iconSvg: iconSvgString(iconPaths.clone),
+      dividerBefore: true
+    });
+    items.push({
+      id: "copy-config-url",
+      label: "Copy Config (HTTP)",
+      iconSvg: iconSvgString(iconPaths.clone)
+    });
     if (showInstallApp) {
       items.push({
         id: "install-app",
@@ -27773,6 +28348,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 +28361,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 +28862,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 +29019,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 +29083,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 +29141,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 +29336,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 +29586,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 +29620,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 +29651,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 +29718,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 +29764,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 {
@@ -30058,7 +30825,8 @@ BeamApp.styles = [
       }
 
       /* ===== Theme Settings Panel ===== */
-      .theme-settings-overlay {
+      .theme-settings-overlay,
+      .approvals-overlay {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, 0.3);
@@ -30077,6 +30845,29 @@ BeamApp.styles = [
         animation: slideInRight 0.2s ease;
       }
 
+      .approvals-panel {
+        position: fixed;
+        bottom: var(--space-xl);
+        left: var(--space-md);
+        width: 340px;
+        max-height: 60vh;
+        z-index: 1001;
+        overflow-y: auto;
+        border-radius: var(--radius-md);
+        animation: slideInUp 0.2s ease;
+      }
+
+      @keyframes slideInUp {
+        from {
+          transform: translateY(20px);
+          opacity: 0;
+        }
+        to {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
       @keyframes slideInRight {
         from {
           transform: translateX(20px);
@@ -30159,6 +30950,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 +31213,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_sidebarVisible", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_sidebarWidth", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_focusMode", 2);
@@ -30475,6 +31297,12 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_showElicitation", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_showApprovals", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_pendingApprovalsList", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_protocolMode", 2);
@@ -30553,6 +31381,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 +31402,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,11 +31427,21 @@ 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();
     this._collapsedSections = /* @__PURE__ */ new Set();
+    /** Live recency list — saved to localStorage but NOT used for rendering.
+     *  Only applied on next page load via _initialRecentOrder. */
     this._recentPhotons = [];
+    /** Snapshot of recency order captured at page load — used for sorting.
+     *  Stays stable during the session so the sidebar doesn't jump around. */
+    this._initialRecentOrder = [];
     this._notificationWarmth = /* @__PURE__ */ new Map();
   }
   connectedCallback() {
@@ -30614,7 +31464,10 @@ var BeamSidebar = class extends i4 {
   _loadRecent() {
     try {
       const stored = localStorage.getItem(BeamSidebar.RECENT_KEY);
-      if (stored) this._recentPhotons = JSON.parse(stored);
+      if (stored) {
+        this._recentPhotons = JSON.parse(stored);
+        this._initialRecentOrder = [...this._recentPhotons];
+      }
     } catch {
     }
   }
@@ -30676,6 +31529,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() {
@@ -30716,9 +31574,10 @@ var BeamSidebar = class extends i4 {
   get _nonAppExternalMCPs() {
     return this._filteredExternalMCPs.filter((m3) => !m3.hasMcpApp);
   }
-  /** Sort items by recency — recently used items float to the top */
+  /** Sort items by recency — uses the order snapshot from page load,
+   *  so the list stays stable during the session and only reorders on refresh. */
   _sortByRecency(items) {
-    const recentIndex = new Map(this._recentPhotons.map((name2, i7) => [name2, i7]));
+    const recentIndex = new Map(this._initialRecentOrder.map((name2, i7) => [name2, i7]));
     return [...items].sort((a5, b3) => {
       const aIdx = recentIndex.get(a5.name);
       const bIdx = recentIndex.get(b3.name);
@@ -30751,16 +31610,46 @@ 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="Hide sidebar"
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <rect width="18" height="18" x="3" y="3" rx="2" />
+                <path d="M9 3v18" />
+                <path d="m16 15-3-3 3-3" />
+              </svg>
+            </button>
           </div>
-          <div class="search-box" role="search">
-            <input
-              type="search"
-              placeholder="Search photons... (⌘K)"
-              .value=${this._searchQuery}
-              @input=${(e8) => this._handleSearch(e8)}
-              @keydown=${(e8) => this._handleSearchKeydown(e8)}
-              aria-label="Search photons"
-            />
+          <div class="search-row">
+            <div class="search-box" role="search">
+              <input
+                type="search"
+                placeholder="Search photons... (⌘K)"
+                .value=${this._searchQuery}
+                @input=${(e8) => this._handleSearch(e8)}
+                @keydown=${(e8) => this._handleSearchKeydown(e8)}
+                aria-label="Search photons"
+              />
+            </div>
+            <button
+              class="sidebar-minimize-btn create-btn"
+              @click=${() => this._createPhoton()}
+              title="Create new photon"
+              aria-label="Create new photon"
+            >
+              ${plus}
+            </button>
           </div>
           <div class="filter-row" role="group" aria-label="Filter options">
             <button
@@ -30783,29 +31672,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 +31703,7 @@ var BeamSidebar = class extends i4 {
         "attention",
         warning
       ) : ""}
-            ${loadErrors.length > 0 ? this._renderSection(
+              ${loadErrors.length > 0 ? this._renderSection(
         "errors",
         "LOAD ERRORS",
         loadErrors,
@@ -30821,58 +31711,50 @@ 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">
-        ${this.pendingApprovals > 0 ? b2`
-              <button
-                class="footer-link approval-badge-btn"
-                @click=${() => this.dispatchEvent(
+        <button
+          class="footer-link approval-badge-btn ${this.pendingApprovals === 0 ? "disabled" : ""}"
+          @click=${() => this.pendingApprovals > 0 && this.dispatchEvent(
       new CustomEvent("show-approvals", { bubbles: true, composed: true })
     )}
-                title="Pending approvals (${this.pendingApprovals})"
-                aria-label="Show pending approvals"
-              >
-                ${shieldCheck}
-                <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"
+          title="${this.pendingApprovals > 0 ? `Pending approvals (${this.pendingApprovals})` : "No pending approvals"}"
+          aria-label="Show pending approvals"
+          ?disabled=${this.pendingApprovals === 0}
         >
-          ${activity}
+          ${shieldCheck}
+          <span class="approval-badge">${this.pendingApprovals}</span>
         </button>
         <button
           class="footer-link"
@@ -30908,6 +31790,41 @@ var BeamSidebar = class extends i4 {
   _showShortcuts() {
     this.dispatchEvent(new CustomEvent("show-shortcuts", { bubbles: true, composed: true }));
   }
+  async _createPhoton() {
+    const result = await elicit({
+      ask: "form",
+      icon: "\u2728",
+      message: "Create a new photon",
+      description: "Give your photon a name and we\u2019ll set up everything for you. Use lowercase letters and hyphens \u2014 like my-api or weather-bot.",
+      submitLabel: "Create",
+      cancelLabel: "Cancel",
+      fields: [
+        { name: "name", label: "Name", placeholder: "e.g. my-api", required: true },
+        {
+          name: "template",
+          label: "Template",
+          type: "text",
+          enum: ["Hello World", "API Tool", "Stateful", "App"],
+          default: "Hello World"
+        }
+      ]
+    });
+    if (result.action === "cancel") return;
+    const form = result.value;
+    if (!form?.name?.trim()) return;
+    let filename = form.name.trim().toLowerCase().replace(/[^a-z0-9.-]/g, "-");
+    if (!filename.endsWith(".photon.ts")) {
+      filename = filename.replace(/\.photon$/, "") + ".photon.ts";
+    }
+    const template = (form.template || "Blank").toLowerCase().replace(/\s+/g, "-");
+    this.dispatchEvent(
+      new CustomEvent("create-photon", {
+        detail: { name: filename, template },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   _openStudio(photonName) {
     this.dispatchEvent(
       new CustomEvent("open-studio", {
@@ -30950,7 +31867,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,11 +31891,12 @@ 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)}
@@ -30992,23 +31910,27 @@ ${photon.path}` : ""}"
         >
           ${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-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,11 +31939,12 @@ ${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)}
@@ -31029,34 +31952,107 @@ ${photon.path}` : ""}"
 \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-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 +32098,9 @@ ${photon.path}` : ""}"
       })
     );
   }
+  _emitTabChange(tab) {
+    this.dispatchEvent(new CustomEvent("tab-change", { detail: { tab } }));
+  }
   _handleSearch(e8) {
     this._searchQuery = e8.target.value;
   }
@@ -31159,6 +32158,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 +32168,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 +32218,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 +32320,7 @@ BeamSidebar.styles = [
       .header {
         padding: var(--space-md);
         border-bottom: 1px solid var(--border-glass);
+        flex-shrink: 0;
       }
 
       .header-row {
@@ -31328,32 +32349,32 @@ BeamSidebar.styles = [
       }
 
       .status-indicator {
-        width: 8px;
-        height: 8px;
+        width: 9px;
+        height: 9px;
         border-radius: 50%;
         flex-shrink: 0;
       }
 
       .status-indicator.connected {
-        background: var(--color-success);
+        background: #22dd44;
         box-shadow:
-          0 0 4px 1px var(--color-success-glow),
-          0 0 8px 2px var(--color-success-glow);
+          0 0 4px 2px rgba(34, 221, 68, 0.6),
+          0 0 10px 4px rgba(34, 221, 68, 0.3);
       }
 
       .status-indicator.reconnecting {
-        background: var(--color-warning);
+        background: #ffbb33;
         box-shadow:
-          0 0 4px 1px var(--color-warning-glow),
-          0 0 8px 2px var(--color-warning-glow);
+          0 0 4px 2px rgba(255, 187, 51, 0.6),
+          0 0 10px 4px rgba(255, 187, 51, 0.3);
         animation: pulse 1s ease-in-out infinite;
       }
 
       .status-indicator.disconnected {
-        background: var(--color-error);
+        background: #ff4444;
         box-shadow:
-          0 0 4px 1px rgba(248, 113, 113, 0.5),
-          0 0 8px 2px rgba(248, 113, 113, 0.3);
+          0 0 4px 2px rgba(255, 68, 68, 0.6),
+          0 0 10px 4px rgba(255, 68, 68, 0.3);
       }
 
       @keyframes pulse {
@@ -31404,26 +32425,61 @@ BeamSidebar.styles = [
         background: var(--bg-glass-strong);
       }
 
-      .search-box {
+      .search-row {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
         margin-top: var(--space-md);
+      }
+
+      .search-box {
+        flex: 1;
         position: relative;
       }
 
+      .create-btn {
+        flex-shrink: 0;
+        margin-top: 0 !important;
+      }
+
+      .sidebar-minimize-btn {
+        width: 32px;
+        height: 32px;
+        border-radius: var(--radius-sm);
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
+        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-strong);
+        border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-glass));
+      }
+
       input {
         padding: var(--space-sm) var(--space-md);
       }
 
       .section-header {
         font-family: var(--font-display);
-        padding: var(--space-sm) var(--space-md);
-        font-size: var(--text-xs);
+        padding: var(--space-xs) var(--space-md);
+        font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
-        letter-spacing: 0.1em;
+        letter-spacing: 0.12em;
         color: var(--t-muted);
-        margin-top: var(--space-sm);
-        border-left: 2px solid var(--accent-primary);
-        background: var(--bg-glass-strong);
+        opacity: 0.75;
+        margin-top: var(--space-md);
+        border-left: none;
+        background: color-mix(in srgb, var(--t-muted) 8%, transparent);
         cursor: pointer;
         user-select: none;
         display: flex;
@@ -31432,18 +32488,17 @@ BeamSidebar.styles = [
       }
 
       .section-header:hover {
+        opacity: 1;
         color: var(--t-primary);
-        background: var(--bg-panel);
       }
 
       .section-header.attention {
         color: var(--color-warning);
-        border-left-color: var(--color-warning);
       }
 
       .section-header.attention:hover {
         color: var(--color-warning);
-        opacity: 0.85;
+        opacity: 1;
       }
 
       .section-label {
@@ -31502,9 +32557,12 @@ BeamSidebar.styles = [
         border-left: 2px solid var(--accent-primary);
         color: var(--accent-primary);
         font-weight: 500;
+        align-items: center;
+        padding-top: calc(var(--space-sm) + 2px);
+        padding-bottom: calc(var(--space-sm) + 2px);
       }
 
-      .photon-item.flash-highlight {
+      .photon-item.flash-highlight:not(.active) {
         animation: flash-highlight 0.6s ease-out;
       }
 
@@ -31517,7 +32575,7 @@ BeamSidebar.styles = [
         }
       }
 
-      .photon-item.warmth {
+      .photon-item.warmth:not(.active) {
         animation: warmth-fade 5s ease-out forwards;
       }
 
@@ -31543,6 +32601,10 @@ BeamSidebar.styles = [
         color: var(--t-primary);
         flex-shrink: 0;
         letter-spacing: 0.5px;
+        transition:
+          width 0.25s ease,
+          height 0.25s ease,
+          font-size 0.25s ease;
       }
 
       .photon-icon.emoji-icon {
@@ -31551,6 +32613,17 @@ BeamSidebar.styles = [
         overflow: hidden;
       }
 
+      /* Scale icon up when the row is expanded with view tabs */
+      .photon-item.active .photon-icon {
+        width: 42px;
+        height: 42px;
+        font-size: 15px;
+      }
+
+      .photon-item.active .photon-icon.emoji-icon {
+        font-size: 30px;
+      }
+
       .photon-item.internal {
         opacity: 0.85;
       }
@@ -31571,6 +32644,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 +32679,44 @@ BeamSidebar.styles = [
         text-overflow: ellipsis;
       }
 
+      .photon-view-tabs {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .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;
@@ -31688,6 +32818,16 @@ BeamSidebar.styles = [
         position: relative;
       }
 
+      .approval-badge-btn.disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+
+      .approval-badge-btn.disabled:hover {
+        color: var(--t-muted);
+        background: none;
+      }
+
       .approval-badge {
         position: absolute;
         top: -2px;
@@ -31887,6 +33027,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 +33085,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);
@@ -31956,9 +33115,6 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_collapsedSections", 2);
-__decorateClass([
-  r5()
-], BeamSidebar.prototype, "_recentPhotons", 2);
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_notificationWarmth", 2);
@@ -31971,6 +33127,7 @@ var MethodCard = class extends i4 {
   constructor() {
     super(...arguments);
     this.photonName = "";
+    this.editable = false;
     this._editingDescription = false;
     this._editingIcon = false;
     this._editedDescription = "";
@@ -32034,20 +33191,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 +33244,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 +33858,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 +33975,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 +34081,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 +34187,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}>
@@ -34258,7 +35459,7 @@ var InvokeForm = class extends i4 {
   }
   /** Cancel with dirty check. Called by parent chrome wrapper. */
   async handleCancel() {
-    if (this.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+    if (this.isDirty && !await confirmElicit("You have unsaved changes. Discard them?", {
       confirm: "Discard",
       destructive: true
     })) {
@@ -34826,6 +36027,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 +36057,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 +36225,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 +36382,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 +40944,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());
       });
     }
@@ -45601,7 +46826,7 @@ var MarketplaceView = class extends i4 {
     this._items = items;
   }
   async _removeSource(name2) {
-    if (!await confirmDialog(`Remove marketplace "${name2}"? This will not uninstall any photons.`, {
+    if (!await confirmElicit(`Remove marketplace "${name2}"? This will not uninstall any photons.`, {
       confirm: "Remove",
       destructive: true
     })) {
@@ -45610,7 +46835,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 +46866,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
@@ -45667,7 +46893,7 @@ var MarketplaceView = class extends i4 {
     }
   }
   async _remove(item) {
-    if (!await confirmDialog(`Remove "${item.name}"? This will delete the photon files.`, {
+    if (!await confirmElicit(`Remove "${item.name}"? This will delete the photon files.`, {
       confirm: "Remove",
       destructive: true
     }))
@@ -45676,6 +46902,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 +46932,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 +47012,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 +47965,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 +48026,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 +48071,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 +48310,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 +48348,21 @@ 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";
+      const hostHasExplicitHeight = this.style.height && this.style.height !== "auto";
+      if (!isFullHeightApp && !hostHasExplicitHeight) {
+        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 +48386,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 +68366,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 +68511,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 +68574,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 +68632,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 +68676,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 +68745,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 +68884,7 @@ McpAppRenderer.styles = [
         width: 100%;
         height: 100%;
         min-height: 500px;
-        background: var(--bg-panel, #0d0d0d);
+        background: transparent;
         border-radius: var(--radius-md);
         overflow: visible;
       }
@@ -94326,6 +95595,7 @@ var PhotonStudio = class extends i4 {
     super(...arguments);
     this.photonName = "";
     this.theme = "dark";
+    this.hideCloseButton = false;
     this._source = "";
     this._originalSource = "";
     this._dirty = false;
@@ -94817,7 +96087,7 @@ ${indent}* ` },
       return;
     }
     const currentName = seedPlan.symbolName.replace(/^\(alias\)\s*/, "").trim();
-    const nextName = window.prompt("Rename symbol to:", currentName);
+    const nextName = await promptElicit("Rename symbol to:", currentName);
     if (!nextName || nextName === currentName) return;
     const renamePlan = await this._tsWorkerClient.rename(this._filePath, this._source, pos, nextName).catch((error2) => {
       showToast(error2 instanceof Error ? error2.message : String(error2), "error");
@@ -95233,7 +96503,7 @@ ${indent}* ` },
   }
   async _close() {
     if (this._dirty) {
-      if (!await confirmDialog("You have unsaved changes. Close anyway?", {
+      if (!await confirmElicit("You have unsaved changes. Close anyway?", {
         confirm: "Close",
         destructive: true
       }))
@@ -95246,7 +96516,7 @@ ${indent}* ` },
       return b2`
         <div class="toolbar">
           <span class="toolbar-title">Studio</span>
-          <button class="close-btn" @click=${() => this._close()}>&times;</button>
+          ${!this.hideCloseButton ? b2`<button class="close-btn" @click=${() => this._close()}>&times;</button>` : ""}
         </div>
         <div class="loading-state">Loading source...</div>
       `;
@@ -95254,8 +96524,8 @@ ${indent}* ` },
     if (this._error) {
       return b2`
         <div class="toolbar">
-          <span class="toolbar-title">Studio</span>
-          <button class="close-btn" @click=${() => this._close()}>&times;</button>
+          <span class="toolbar-title">Studio Error</span>
+          ${!this.hideCloseButton ? b2`<button class="close-btn" @click=${() => this._close()}>&times;</button>` : ""}
         </div>
         <div class="error-state">
           <span>${this._error}</span>
@@ -95330,9 +96600,9 @@ ${indent}* ` },
           ${this._saving ? "Saving..." : "Save"}
         </button>
 
-        <button class="close-btn" @click=${() => this._close()} title="Close Studio">
-          &times;
-        </button>
+        ${!this.hideCloseButton ? b2`<button class="close-btn" @click=${() => this._close()} title="Close Studio">
+              &times;
+            </button>` : ""}
       </div>
 
       <div class="studio-body">
@@ -96376,6 +97646,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], PhotonStudio.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], PhotonStudio.prototype, "hideCloseButton", 2);
 __decorateClass([
   r5()
 ], PhotonStudio.prototype, "_source", 2);
@@ -96918,7 +98191,11 @@ var ElicitationModal = class extends i4 {
         aria-label="${this.data?.message || "Input required"}"
         @click=${(e8) => e8.stopPropagation()}
       >
-        <h3>${this.data.message || "Input Required"}</h3>
+        ${this.data.icon ? b2`<div class="modal-icon">${this.data.icon}</div>` : A}
+        <h3 class="${this.data.description ? "has-description" : ""}">
+          ${this.data.message || "Input Required"}
+        </h3>
+        ${this.data.description ? b2`<p class="modal-description">${this.data.description}</p>` : A}
         ${this._renderContent()}
       </div>
     `;
@@ -96958,8 +98235,12 @@ var ElicitationModal = class extends i4 {
         />
       </div>
       <div class="actions">
-        <button class="btn-secondary" @click=${() => this._cancel()}>Cancel</button>
-        <button class="btn-primary" @click=${() => this._submit()}>Submit</button>
+        <button class="btn-secondary" @click=${() => this._cancel()}>
+          ${this.data?.cancelLabel || "Cancel"}
+        </button>
+        <button class="btn-primary" @click=${() => this._submit()}>
+          ${this.data?.submitLabel || "Submit"}
+        </button>
       </div>
     `;
   }
@@ -97456,13 +98737,31 @@ ElicitationModal.styles = [
         animation-delay: 0.05s;
       }
 
+      .modal-icon {
+        font-size: 2.5rem;
+        text-align: center;
+        margin-bottom: var(--space-sm);
+        line-height: 1;
+      }
+
       h3 {
-        margin: 0 0 var(--space-lg) 0;
+        margin: 0 0 var(--space-sm) 0;
         font-size: var(--text-xl);
         font-weight: 600;
         color: var(--t-primary);
       }
 
+      .modal-description {
+        margin: 0 0 var(--space-lg) 0;
+        font-size: var(--text-md);
+        color: var(--t-muted);
+        line-height: 1.5;
+      }
+
+      h3:not(.has-description) {
+        margin-bottom: var(--space-lg);
+      }
+
       .actions {
         display: flex;
         gap: var(--space-sm);
@@ -99074,9 +100373,7 @@ var ContextBar = class extends i4 {
           ${this.showConfigure && !p5.isExternalMCP ? b2`<button class="action-btn" @click=${() => this._emit("configure")}>
                 Reconfigure
               </button>` : ""}
-          ${this.showCopyConfig ? b2`<button class="action-btn" @click=${() => this._emit("copy-config")}>
-                ${clipboard} Copy MCP Config
-              </button>` : ""}
+          ${""}<!-- Copy MCP Config moved to overflow menu -->
           ${this.overflowItems.length > 0 ? b2`<overflow-menu
                 .items=${this.overflowItems}
                 @menu-select=${(e8) => this._emit("overflow", e8.detail)}
@@ -99608,15 +100905,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 +100971,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 +101008,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 +101192,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 +101207,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ForkDialog.prototype, "_newRepoName", 2);
+__decorateClass([
+  r5()
+], ForkDialog.prototype, "_newPhotonName", 2);
 ForkDialog = __decorateClass([
   t4("fork-dialog")
 ], ForkDialog);
@@ -99898,6 +101220,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 +101278,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 +101415,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);