@portel/photon 1.20.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
    */
@@ -21938,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;
@@ -22542,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;
@@ -22889,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
         })) {
@@ -22900,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 () => {
@@ -23124,6 +23276,7 @@ var BeamApp = class extends i4 {
         return;
       }
       const isEditable = this._selectedPhoton?.editable && !this._selectedPhoton?.isExternalMCP;
+      this._mainTab = "source";
       if (isEditable) {
         this._view = "studio";
       } else {
@@ -23280,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
       })) {
@@ -23466,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);
@@ -23508,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);
@@ -23523,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;
@@ -23755,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();
@@ -24047,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
    */
@@ -24130,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);
@@ -24174,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) {
@@ -24297,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) {
@@ -24323,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", () => {
@@ -24481,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) {
@@ -24494,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);
             }
           }
@@ -24584,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",
@@ -25097,6 +25330,7 @@ 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)}
@@ -25154,12 +25388,19 @@ var BeamApp = class extends i4 {
           @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);
@@ -25230,7 +25471,7 @@ var BeamApp = class extends i4 {
                   ${collapse}
                 </button>
               </div>` : ""}
-          ${this._selectedPhoton && !this._selectedMethod && this._mainTab === "methods" ? b2`<div class="main-toolbar">
+          ${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
@@ -25281,6 +25522,17 @@ 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() {
@@ -25328,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();
@@ -27037,6 +27290,12 @@ ${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._mainTab = "help";
         void this._loadPhotonHelp();
@@ -27175,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
     })) {
@@ -27622,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);
   }
@@ -27989,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",
@@ -30540,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);
@@ -30559,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);
@@ -30988,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);
@@ -31121,7 +31436,12 @@ var BeamSidebar = class extends i4 {
     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() {
@@ -31144,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 {
     }
   }
@@ -31251,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);
@@ -31289,11 +31613,11 @@ var BeamSidebar = class extends i4 {
             <button
               class="sidebar-minimize-btn"
               @click=${() => this.dispatchEvent(new CustomEvent("toggle-focus"))}
-              title="Minimize sidebar"
+              title="Hide sidebar"
             >
               <svg
-                width="14"
-                height="14"
+                width="18"
+                height="18"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -31301,20 +31625,31 @@ var BeamSidebar = class extends i4 {
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
-                <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" />
-                <polyline points="13 15 9 12 13 9" />
+                <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
@@ -31409,19 +31744,18 @@ var BeamSidebar = class extends i4 {
       </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>
-            ` : ""}
+          title="${this.pendingApprovals > 0 ? `Pending approvals (${this.pendingApprovals})` : "No pending approvals"}"
+          aria-label="Show pending approvals"
+          ?disabled=${this.pendingApprovals === 0}
+        >
+          ${shieldCheck}
+          <span class="approval-badge">${this.pendingApprovals}</span>
+        </button>
         <button
           class="footer-link"
           @click=${() => this._showShortcuts()}
@@ -31456,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", {
@@ -31534,15 +31903,15 @@ var BeamSidebar = class extends i4 {
         title="${photon.description || photon.name}${photon.path ? `
 ${photon.path}` : ""}"
       >
+        <div
+          class="photon-icon ${isEmoji ? "emoji-icon" : ""}"
+          style="${initialsStyle}"
+          aria-hidden="true"
+        >
+          ${displayIcon}
+        </div>
         <div class="photon-item-body">
           <div class="photon-main-row">
-            <div
-              class="photon-icon ${isEmoji ? "emoji-icon" : ""}"
-              style="${initialsStyle}"
-              aria-hidden="true"
-            >
-              ${displayIcon}
-            </div>
             <div class="photon-info">
               <div class="photon-name">${photon.name}</div>
               ${photon.internal ? b2`<span class="internal-badge">System</span>` : ""}
@@ -31582,9 +31951,9 @@ ${photon.path}` : ""}"
         title="${mcp.description || "External MCP server"}${mcp.errorMessage ? `
 \u26A0\uFE0F ${mcp.errorMessage}` : ""}"
       >
+        <div class="photon-icon external-mcp-icon" aria-hidden="true">${displayIcon}</div>
         <div class="photon-item-body">
           <div class="photon-main-row">
-            <div class="photon-icon external-mcp-icon" aria-hidden="true">${displayIcon}</div>
             <div class="photon-info">
               <div class="photon-name">${mcp.name}</div>
             </div>
@@ -31980,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 {
@@ -32056,17 +32425,29 @@ 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: 28px;
-        height: 28px;
+        width: 32px;
+        height: 32px;
         border-radius: var(--radius-sm);
-        background: transparent;
-        border: none;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
         color: var(--t-muted);
         cursor: pointer;
         display: flex;
@@ -32079,7 +32460,8 @@ BeamSidebar.styles = [
 
       .sidebar-minimize-btn:hover {
         color: var(--t-primary);
-        background: var(--bg-glass);
+        background: var(--bg-glass-strong);
+        border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-glass));
       }
 
       input {
@@ -32088,15 +32470,16 @@ BeamSidebar.styles = [
 
       .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;
@@ -32105,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 {
@@ -32175,12 +32557,12 @@ BeamSidebar.styles = [
         border-left: 2px solid var(--accent-primary);
         color: var(--accent-primary);
         font-weight: 500;
-        align-items: stretch;
+        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;
       }
 
@@ -32193,7 +32575,7 @@ BeamSidebar.styles = [
         }
       }
 
-      .photon-item.warmth {
+      .photon-item.warmth:not(.active) {
         animation: warmth-fade 5s ease-out forwards;
       }
 
@@ -32219,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 {
@@ -32227,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;
       }
@@ -32286,7 +32683,6 @@ BeamSidebar.styles = [
         display: flex;
         align-items: center;
         gap: 4px;
-        margin-left: calc(28px + var(--space-sm));
       }
 
       .photon-view-tab {
@@ -32422,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;
@@ -32709,9 +33115,6 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_collapsedSections", 2);
-__decorateClass([
-  r5()
-], BeamSidebar.prototype, "_recentPhotons", 2);
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_notificationWarmth", 2);
@@ -35056,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
     })) {
@@ -46423,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
     })) {
@@ -46490,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
     }))
@@ -47947,7 +48350,8 @@ var CustomUiRenderer = class extends i4 {
     if (body) {
       const bodyOverflow = iframe.contentDocument?.defaultView ? getComputedStyle(iframe.contentDocument.body).overflow : "";
       const isFullHeightApp = bodyOverflow === "hidden";
-      if (!isFullHeightApp) {
+      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;
@@ -95191,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;
@@ -95682,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");
@@ -96098,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
       }))
@@ -96111,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>
       `;
@@ -96119,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>
@@ -96195,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">
@@ -97241,6 +97646,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], PhotonStudio.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], PhotonStudio.prototype, "hideCloseButton", 2);
 __decorateClass([
   r5()
 ], PhotonStudio.prototype, "_source", 2);
@@ -97783,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>
     `;
@@ -97823,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>
     `;
   }
@@ -98321,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);
@@ -99939,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)}