@portel/photon 1.20.0 → 1.21.0

package/dist/beam.bundle.js

@@ -18105,9 +18105,9 @@ var theme = i`
     --radius-full: 9999px;
 
     /* Typography - same for all themes */
-    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-mono: 'JetBrains Mono', monospace;
+    --font-display: 'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'Fira Code', monospace;
 
     /* Type scale */
     --text-3xl: 2rem;
@@ -18134,17 +18134,17 @@ var theme = i`
   /* Shared Utility Classes */
   .glass {
     background: var(--bg-glass);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--border-glass);
+    border-top-color: color-mix(in srgb, var(--border-glass) 100%, white 8%);
+    border-left-color: color-mix(in srgb, var(--border-glass) 100%, white 5%);
     box-shadow: var(--shadow-md);
   }
 
   .glass-panel {
     background: var(--bg-glass-strong);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--border-glass);
+    border-top-color: color-mix(in srgb, var(--border-glass) 100%, white 8%);
+    border-left-color: color-mix(in srgb, var(--border-glass) 100%, white 5%);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
     color: inherit;
@@ -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
@@ -19682,10 +19528,10 @@ function oklchToRgba(L3, C3, H3, alpha2) {
   return `rgba(${Math.round(clamp01(r7) * 255)}, ${Math.round(clamp01(g3) * 255)}, ${Math.round(clamp01(b3) * 255)}, ${alpha2})`;
 }
 var themePresets = [
-  { name: "Default Violet", config: { hue: 260, chroma: 0.15, lightness: 0.65 } },
+  { name: "Amber", config: { hue: 75, chroma: 0.14, lightness: 0.7 } },
   { name: "Ocean Blue", config: { hue: 220, chroma: 0.12, lightness: 0.6 } },
   { name: "Emerald", config: { hue: 155, chroma: 0.14, lightness: 0.6 } },
-  { name: "Amber", config: { hue: 75, chroma: 0.14, lightness: 0.7 } },
+  { name: "Violet", config: { hue: 260, chroma: 0.15, lightness: 0.65 } },
   { name: "Rose", config: { hue: 350, chroma: 0.14, lightness: 0.62 } },
   { name: "Monochrome", config: { hue: 0, chroma: 0, lightness: 0.65 } }
 ];
@@ -19898,20 +19744,20 @@ var colorPalette = {
     95: "#f2f2f2",
     100: "#ffffff"
   },
-  // Light-theme neutrals (warm cream/beige undertone)
+  // Light-theme neutrals (cool mineral paper)
   neutralLight: {
-    85: "#C8C0B8",
+    85: "#B0BCCC",
     // heavy borders / dividers
-    88: "#D0C9C1",
+    88: "#D8E0EA",
     // surface-container-highest
-    91: "#DDD7CF",
+    91: "#E4EAF1",
     // surface-container-high
-    94: "#EAE4DD",
-    // bg-app — warm cream structure
-    96: "#F0EBE5",
+    94: "#EEF1F5",
+    // bg-app — mineral paper
+    96: "#F5F7FA",
     // surface-container
-    98: "#F8F5F1"
-    // surface — warm off-white panels
+    98: "#FFFFFF"
+    // surface — white panels
   },
   // Primary (blue - trust, action)
   primary: {
@@ -20004,24 +19850,24 @@ var colorsDark = {
   scrim: "rgba(0, 0, 0, 0.5)"
 };
 var colorsLight = {
-  // Surfaces (cool blue-gray, higher contrast between levels)
+  // Surfaces (cool mineral paper)
   surface: colorPalette.neutralLight[98],
-  // #F6F7F9 — panels
+  // #FFFFFF — panels
   surfaceContainer: colorPalette.neutralLight[96],
-  // #EBEEF2 — containers
+  // #F5F7FA — containers
   surfaceContainerHigh: colorPalette.neutralLight[91],
-  // #D5DBE1
+  // #E4EAF1
   surfaceContainerHighest: colorPalette.neutralLight[88],
-  // #C4CDD5
+  // #D8E0EA
   surfaceBright: colorPalette.neutral[100],
   // #FFFFFF — overlays/modals
-  // Text on surfaces (warm charcoal, high contrast)
-  onSurface: "#2C2420",
-  // warm brown-charcoal — WCAG AAA
-  onSurfaceVariant: "#4A3F38",
-  // warm dark brown for readability
-  onSurfaceMuted: "#6B5E54",
-  // warm muted brown — WCAG AA
+  // Text on surfaces (cool ink, high contrast)
+  onSurface: "#0D1420",
+  // dark ink — WCAG AAA
+  onSurfaceVariant: "#3A4A5C",
+  // cool dark for readability
+  onSurfaceMuted: "#5F6B7A",
+  // steel muted — WCAG AA
   // Primary (darker for light theme)
   primary: colorPalette.primary[40],
   primaryContainer: colorPalette.primary[90],
@@ -20046,11 +19892,11 @@ var colorsLight = {
   onError: colorPalette.neutral[100],
   // white text
   onErrorContainer: colorPalette.error[10],
-  // Outline (warm, visible but not harsh)
-  outline: "#9B9088",
-  // warm gray-brown for visibility
-  outlineVariant: "#D5CFC8",
-  // warm border, not washed out
+  // Outline (cool, visible but not harsh)
+  outline: "#8893A0",
+  // cool steel for visibility
+  outlineVariant: "#C8D2DE",
+  // cool border, not washed out
   // Scrim (overlay — lighter than dark theme's 0.5)
   scrim: "rgba(0, 0, 0, 0.2)"
 };
@@ -20297,10 +20143,10 @@ var ThemeSettings = class extends i4 {
   constructor() {
     super(...arguments);
     this.currentTheme = "dark";
-    this._hue = 260;
-    this._chroma = 0.15;
-    this._lightness = 0.65;
-    this._presetName = "Default Violet";
+    this._hue = 75;
+    this._chroma = 0.14;
+    this._lightness = 0.7;
+    this._presetName = "Amber";
     this._previousConfig = null;
   }
   connectedCallback() {
@@ -20387,10 +20233,10 @@ var ThemeSettings = class extends i4 {
   }
   _reset() {
     localStorage.removeItem(THEME_CONFIG_KEY);
-    this._hue = 260;
-    this._chroma = 0.15;
-    this._lightness = 0.65;
-    this._presetName = "Default Violet";
+    this._hue = 75;
+    this._chroma = 0.14;
+    this._lightness = 0.7;
+    this._presetName = "Amber";
     this.dispatchEvent(new CustomEvent("oklch-theme-reset", { bubbles: true, composed: true }));
   }
   _revert() {
@@ -20715,16 +20561,16 @@ ThemeSettings.styles = [
       .chroma-slider {
         background: linear-gradient(
           to right,
-          oklch(0.65 0 var(--hue-val, 260)),
-          oklch(0.65 0.3 var(--hue-val, 260))
+          oklch(0.65 0 var(--hue-val, 75)),
+          oklch(0.65 0.3 var(--hue-val, 75))
         );
       }
 
       .lightness-slider {
         background: linear-gradient(
           to right,
-          oklch(0.2 0.1 var(--hue-val, 260)),
-          oklch(0.9 0.1 var(--hue-val, 260))
+          oklch(0.2 0.1 var(--hue-val, 75)),
+          oklch(0.9 0.1 var(--hue-val, 75))
         );
       }
 
@@ -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;
@@ -21959,6 +22089,9 @@ var MCPClientService = class {
       case "beam/render":
         this.emit("render", notification.params);
         break;
+      case "beam/canvas":
+        this.emit("canvas", notification.params);
+        break;
       case "photon/board-update":
         this.emit("board-update", notification.params);
         break;
@@ -22528,6 +22661,7 @@ var BeamApp = class extends i4 {
     this._runningTests = false;
     this._selectedMethod = null;
     this._lastResult = null;
+    this._canvasActive = false;
     this._customUiRevision = 0;
     this._customFormatUri = null;
     this._lastFormParams = {};
@@ -22542,6 +22676,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 +23025,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 +23036,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 +23280,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 +23437,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
       })) {
@@ -23381,6 +23538,11 @@ var BeamApp = class extends i4 {
             }
           }
         }
+        if (msg.type === "photon:toast") {
+          const validTypes = ["success", "error", "info", "warning"];
+          const toastType = validTypes.includes(msg.toastType) ? msg.toastType : "info";
+          showToast(msg.message || "Notification", toastType, msg.duration || 3e3);
+        }
         if (msg.type === "photon:viewing") {
           const photonId = this._selectedPhoton?.id;
           const itemId = msg.itemId || msg.board;
@@ -23466,22 +23628,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 defaultAmber = { hue: 75, chroma: 0.14, lightness: 0.7, theme: theme3 };
+      this._oklchEnabled = true;
+      this._applyOklchTheme(defaultAmber);
       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 +23683,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 +23703,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 +23947,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 +24239,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 +24344,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 +24389,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 +24513,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 +24540,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", () => {
@@ -24471,6 +24689,25 @@ var BeamApp = class extends i4 {
           this.requestUpdate();
         }
       });
+      mcpClient.on("canvas", (data) => {
+        if (!data?.photon || !data?.method) return;
+        const currentPhoton = this._selectedPhoton?.name;
+        const currentMethod = this._selectedMethod?.name;
+        if (data.photon !== currentPhoton || data.method !== currentMethod) return;
+        if (!this._canvasActive) {
+          this._canvasActive = true;
+          this.requestUpdate();
+        }
+        void this.updateComplete.then(() => {
+          const canvas = this.shadowRoot?.querySelector("canvas-renderer");
+          if (!canvas) return;
+          if (data.type === "ui") {
+            canvas.pushUI(data.html);
+          } else if (data.type === "data") {
+            canvas.pushData(data.slot, data.data);
+          }
+        });
+      });
       mcpClient.on("photons", (data) => {
         if (data?.photons) {
           const prevNames = new Set(this._photons.filter((p5) => !p5.internal).map((p5) => p5.name));
@@ -24481,6 +24718,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 +24756,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 +24825,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",
@@ -25049,8 +25310,6 @@ var BeamApp = class extends i4 {
             </div>
           ` : ""}
 
-      <div class="background-glow" aria-hidden="true"></div>
-
       <!-- Mobile Menu Button: shows back arrow when in method detail, hamburger otherwise -->
       <button
         class="mobile-menu-btn ${this._sidebarVisible ? "open" : ""}"
@@ -25097,6 +25356,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 +25414,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 +25497,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 +25548,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 +25606,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();
@@ -26460,6 +26739,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   }
   _handleMethodSelect(e8) {
     this._teardownActiveCustomUI();
+    this._canvasActive = false;
     this._lastFormParams = {};
     if (this._viewMode === "full") {
       this._sharedFormParams = null;
@@ -26810,7 +27090,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                 </div>
               </div>
             ` : ""}
-        ${opts.result !== null ? this._customFormatUri ? b2`
+        ${opts.result !== null || this._canvasActive ? this._customFormatUri ? b2`
                 <custom-ui-renderer
                   .photon=${opts.photon?.name || ""}
                   .method=${opts.method?.name || ""}
@@ -26842,17 +27122,21 @@ ${photon.errorMessage || "Unknown error"}</pre
                         <button @click=${() => this._handleShareResult()}>Share</button>
                       </div>
                     </div>` : ""}
-                <result-viewer
-                  .result=${opts.result}
-                  .outputFormat=${opts.method?.outputFormat}
-                  .layoutHints=${opts.method?.layoutHints}
-                  .photonName=${opts.photon?.name}
-                  .theme=${this._theme}
-                  .live=${this._currentCollectionName !== null}
-                  .resultKey=${opts.photon && opts.method ? `${opts.photon.name}/${opts.method.name}` : void 0}
-                  @share=${() => this._handleShareResult()}
-                  @checklist-action=${(e8) => this._handleChecklistAction(e8)}
-                ></result-viewer>
+                ${this._canvasActive ? b2`<canvas-renderer
+                      .photon=${opts.photon?.name || ""}
+                      .method=${opts.method?.name || ""}
+                      .theme=${this._theme}
+                    ></canvas-renderer>` : b2`<result-viewer
+                      .result=${opts.result}
+                      .outputFormat=${opts.method?.outputFormat}
+                      .layoutHints=${opts.method?.layoutHints}
+                      .photonName=${opts.photon?.name}
+                      .theme=${this._theme}
+                      .live=${this._currentCollectionName !== null}
+                      .resultKey=${opts.photon && opts.method ? `${opts.photon.name}/${opts.method.name}` : void 0}
+                      @share=${() => this._handleShareResult()}
+                      @checklist-action=${(e8) => this._handleChecklistAction(e8)}
+                    ></result-viewer>`}
               ` : b2`
               <div class="empty-state-inline result-empty">
                 <span class="empty-state-icon">${play}</span>
@@ -27037,6 +27321,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 +27465,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
     })) {
@@ -27569,7 +27859,7 @@ ${photon.errorMessage || "Unknown error"}</pre
    */
   _forwardToIframes(message) {
     const iframes = [];
-    this.shadowRoot?.querySelectorAll("custom-ui-renderer").forEach((renderer) => {
+    this.shadowRoot?.querySelectorAll("custom-ui-renderer, canvas-renderer").forEach((renderer) => {
       const iframe = renderer.shadowRoot?.querySelector("iframe");
       if (iframe) iframes.push(iframe);
     });
@@ -27622,6 +27912,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 +28294,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",
@@ -28913,47 +29229,47 @@ BeamApp.styles = [
   theme,
   i`
       :host {
-        /* ===== Dark Theme (Default) ===== */
-        --bg-app: hsl(220, 15%, 10%);
-        --bg-glass: hsla(220, 15%, 14%, 0.6);
-        --bg-glass-strong: hsla(220, 15%, 14%, 0.85);
-        --bg-panel: hsl(220, 15%, 12%);
-        --t-primary: hsl(220, 10%, 95%);
-        --t-muted: hsl(220, 10%, 65%);
-        --border-glass: hsla(220, 10%, 80%, 0.1);
-        --accent-primary: hsl(260, 100%, 65%);
-        --accent-secondary: hsl(190, 100%, 50%);
-        --glow-primary: hsla(260, 100%, 65%, 0.3);
+        /* ===== Dark Theme (Default) — Precision Optics ===== */
+        --bg-app: #0b1018;
+        --bg-glass: hsla(215, 25%, 12%, 0.6);
+        --bg-glass-strong: hsla(215, 25%, 12%, 0.85);
+        --bg-panel: #131b28;
+        --t-primary: #f0ede6;
+        --t-muted: #6b8a8a;
+        --border-glass: hsla(210, 20%, 50%, 0.12);
+        --accent-primary: #ffb000;
+        --accent-secondary: #78e6ff;
+        --glow-primary: rgba(255, 176, 0, 0.3);
 
         /* Semantic status colors */
-        --color-error: #ff4444;
-        --color-error-glow: rgba(255, 68, 68, 0.6);
-        --color-error-bg: rgba(255, 68, 68, 0.1);
-        --color-success: #00e676;
-        --color-success-glow: rgba(0, 230, 118, 0.6);
-        --color-success-bg: rgba(0, 230, 118, 0.15);
-        --color-warning: #ffab00;
-        --color-warning-bg: rgba(255, 171, 0, 0.15);
-        --color-warning-glow: rgba(255, 171, 0, 0.6);
+        --color-error: #ff6b6b;
+        --color-error-glow: rgba(255, 107, 107, 0.6);
+        --color-error-bg: rgba(255, 107, 107, 0.1);
+        --color-success: #58d68d;
+        --color-success-glow: rgba(88, 214, 141, 0.6);
+        --color-success-bg: rgba(88, 214, 141, 0.15);
+        --color-warning: #ffb347;
+        --color-warning-bg: rgba(255, 179, 71, 0.15);
+        --color-warning-glow: rgba(255, 179, 71, 0.6);
         --color-info: var(--accent-secondary);
 
         /* CLI preview */
-        --cli-bg: hsl(220, 15%, 6%);
-        --cli-border: hsl(220, 10%, 20%);
-        --cli-text: hsl(142, 76%, 57%);
-        --cli-muted: hsl(220, 10%, 40%);
-        --cli-hover-bg: hsl(220, 15%, 10%);
+        --cli-bg: #080c12;
+        --cli-border: #1e2d3d;
+        --cli-text: #58d68d;
+        --cli-muted: #4a6565;
+        --cli-hover-bg: #0b1018;
 
         /* Initials icon (marketplace cards) */
-        --initials-bg-sat: 35%;
-        --initials-bg-lum: 22%;
-        --initials-fg-sat: 60%;
-        --initials-fg-lum: 75%;
+        --initials-bg-sat: 25%;
+        --initials-bg-lum: 18%;
+        --initials-fg-sat: 50%;
+        --initials-fg-lum: 70%;
 
         /* Shadow tokens (dark defaults) */
-        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-        --shadow-md: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
-        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
+        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+        --shadow-md: 0 4px 24px -1px rgba(0, 0, 0, 0.3);
+        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
 
         display: flex;
         height: 100vh;
@@ -28964,52 +29280,52 @@ BeamApp.styles = [
         overflow: visible; /* Allow focus rings and shadows to display */
       }
 
-      /* ===== Light Theme - "Warm, Soft, Professional" ===== */
+      /* ===== Light Theme — Mineral Paper ===== */
       :host([data-theme='light']) {
-        --bg-app: #eae4dd;
-        --bg-glass: rgba(255, 253, 250, 0.75);
-        --bg-glass-strong: rgba(255, 253, 250, 0.9);
-        --bg-panel: #f8f5f1;
-        --t-primary: #2c2420;
-        --t-muted: #6b5e54;
-        --border-glass: rgba(120, 90, 60, 0.2);
-        --accent-primary: hsl(215, 55%, 45%);
-        --accent-secondary: hsl(165, 45%, 35%);
-        --glow-primary: hsla(215, 55%, 45%, 0.15);
-
-        /* Semantic status colors — light theme (same vivid LED colors) */
-        --color-error: #e53935;
-        --color-error-glow: rgba(229, 57, 53, 0.5);
-        --color-error-bg: rgba(229, 57, 53, 0.08);
-        --color-success: #00c853;
-        --color-success-glow: rgba(0, 200, 83, 0.55);
-        --color-success-bg: rgba(0, 200, 83, 0.1);
-        --color-warning: #ff8f00;
-        --color-warning-bg: rgba(255, 143, 0, 0.1);
-        --color-warning-glow: rgba(255, 143, 0, 0.5);
+        --bg-app: #eef1f5;
+        --bg-glass: rgba(255, 255, 255, 0.75);
+        --bg-glass-strong: rgba(255, 255, 255, 0.9);
+        --bg-panel: #ffffff;
+        --t-primary: #0d1420;
+        --t-muted: #5f6b7a;
+        --border-glass: rgba(100, 120, 150, 0.15);
+        --accent-primary: #d98a00;
+        --accent-secondary: #0ea5c6;
+        --glow-primary: rgba(217, 138, 0, 0.15);
+
+        /* Semantic status colors — light theme */
+        --color-error: #d64545;
+        --color-error-glow: rgba(214, 69, 69, 0.5);
+        --color-error-bg: rgba(214, 69, 69, 0.08);
+        --color-success: #1f9d68;
+        --color-success-glow: rgba(31, 157, 104, 0.55);
+        --color-success-bg: rgba(31, 157, 104, 0.1);
+        --color-warning: #d98a00;
+        --color-warning-bg: rgba(217, 138, 0, 0.1);
+        --color-warning-glow: rgba(217, 138, 0, 0.5);
         --color-info: var(--accent-secondary);
 
         /* CLI preview — light theme */
-        --cli-bg: hsl(30, 15%, 95%);
+        --cli-bg: #f5f7fa;
         --cli-border: var(--border-glass);
-        --cli-text: hsl(142, 45%, 32%);
+        --cli-text: #1f9d68;
         --cli-muted: var(--t-muted);
-        --cli-hover-bg: hsl(30, 15%, 91%);
+        --cli-hover-bg: #e8ecf2;
 
-        /* Light-mode shadows — warm, visible but not harsh */
-        --shadow-sm: 0px 1px 3px rgba(80, 60, 40, 0.1), 0px 1px 2px rgba(80, 60, 40, 0.08);
-        --shadow-md: 0px 2px 6px rgba(80, 60, 40, 0.1), 0px 4px 8px rgba(80, 60, 40, 0.06);
-        --shadow-lg: 0px 4px 8px rgba(80, 60, 40, 0.1), 0px 10px 20px rgba(80, 60, 40, 0.06);
+        /* Light-mode shadows — cool, clean */
+        --shadow-sm: 0px 1px 3px rgba(0, 20, 50, 0.06), 0px 1px 2px rgba(0, 20, 50, 0.04);
+        --shadow-md: 0px 2px 6px rgba(0, 20, 50, 0.06), 0px 4px 8px rgba(0, 20, 50, 0.04);
+        --shadow-lg: 0px 4px 8px rgba(0, 20, 50, 0.06), 0px 10px 20px rgba(0, 20, 50, 0.04);
 
         /* Initials icon (marketplace cards) */
-        --initials-bg-sat: 30%;
-        --initials-bg-lum: 90%;
-        --initials-fg-sat: 50%;
+        --initials-bg-sat: 20%;
+        --initials-bg-lum: 92%;
+        --initials-fg-sat: 40%;
         --initials-fg-lum: 35%;
 
-        /* Parameter tags — warm chip style for light backgrounds */
-        --param-tag-bg: hsla(25, 20%, 55%, 0.12);
-        --param-tag-color: hsl(20, 15%, 40%);
+        /* Parameter tags — cool chip style for light backgrounds */
+        --param-tag-bg: rgba(100, 120, 150, 0.1);
+        --param-tag-color: #3a4a5c;
       }
 
       /* Skip to main content link — WCAG 2.4.1 */
@@ -29106,12 +29422,12 @@ BeamApp.styles = [
       :host(.view-result) .result-empty,
       :host(.view-form) result-viewer,
       :host(.view-form) custom-ui-renderer,
+      :host(.view-form) canvas-renderer,
       :host(.view-form) .result-empty {
         display: none !important;
       }
 
       :host(.view-result) .mobile-menu-btn,
-      :host(.view-result) .background-glow,
       :host(.view-result) .focus-toolbar,
       :host(.view-result) .main-toolbar,
       :host(.view-result) .method-toolbar,
@@ -29122,7 +29438,6 @@ BeamApp.styles = [
       :host(.view-result) app-layout,
       :host(.view-result) .result-chrome,
       :host(.view-form) .mobile-menu-btn,
-      :host(.view-form) .background-glow,
       :host(.view-form) .focus-toolbar,
       :host(.view-form) .main-toolbar,
       :host(.view-form) .method-toolbar,
@@ -29566,9 +29881,9 @@ BeamApp.styles = [
       }
 
       .photon-badge.app {
-        background: hsla(260, 100%, 65%, 0.15);
-        border-color: hsla(260, 100%, 65%, 0.3);
-        color: hsl(260, 100%, 75%);
+        background: rgba(255, 176, 0, 0.15);
+        border-color: rgba(255, 176, 0, 0.3);
+        color: #ffca4d;
       }
 
       .photon-badge.update {
@@ -29909,17 +30224,6 @@ BeamApp.styles = [
         font-weight: 500;
       }
 
-      .background-glow {
-        position: absolute;
-        top: -20%;
-        left: -10%;
-        width: 50%;
-        height: 50%;
-        background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
-        pointer-events: none;
-        z-index: 0;
-      }
-
       .connection-banner {
         position: fixed;
         top: 0;
@@ -30540,7 +30844,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 +30864,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);
@@ -30946,6 +31274,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_lastResult", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_canvasActive", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_customUiRevision", 2);
@@ -30988,6 +31319,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 +31458,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 +31486,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 +31596,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 +31635,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 +31647,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 +31766,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 +31812,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 +31925,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 +31973,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 +32371,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 +32447,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 +32482,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 +32492,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 +32510,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 +32579,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 +32597,7 @@ BeamSidebar.styles = [
         }
       }
 
-      .photon-item.warmth {
+      .photon-item.warmth:not(.active) {
         animation: warmth-fade 5s ease-out forwards;
       }
 
@@ -32219,6 +32623,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 +32635,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 +32705,6 @@ BeamSidebar.styles = [
         display: flex;
         align-items: center;
         gap: 4px;
-        margin-left: calc(28px + var(--space-sm));
       }
 
       .photon-view-tab {
@@ -32422,6 +32840,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 +33137,6 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_collapsedSections", 2);
-__decorateClass([
-  r5()
-], BeamSidebar.prototype, "_recentPhotons", 2);
 __decorateClass([
   r5()
 ], BeamSidebar.prototype, "_notificationWarmth", 2);
@@ -35056,7 +35481,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
     })) {
@@ -36185,6 +36610,9 @@ var ResultViewer = class extends i4 {
     this._expandedAuditTrails = /* @__PURE__ */ new Set();
     // The detected ID field for the current result (shared across diff, animation, warmth)
     this._activeIdField = "id";
+    // Column format pipe cache (invalidated when layoutHints changes)
+    this._columnPipes = null;
+    this._expandedRows = /* @__PURE__ */ new Set();
     // Chart.js instance for reactive updates
     this._chartInstance = null;
     this._chartInstances = /* @__PURE__ */ new Map();
@@ -36354,6 +36782,15 @@ var ResultViewer = class extends i4 {
     }
     this._chartInstances.forEach((chart) => chart.destroy());
     this._chartInstances.clear();
+    for (const timer of this._slidesRefreshTimers) clearInterval(timer);
+    this._slidesRefreshTimers = [];
+    this._slidesBoundElements.forEach((el2) => {
+      const cleanup = el2._renderCleanup;
+      if (typeof cleanup === "function") cleanup();
+    });
+    this._slidesBoundElements.clear();
+    this._slidesResizeObserver?.disconnect();
+    this._slidesResizeObserver = null;
   }
   _closeFullscreen() {
     this._fullscreenImage = null;
@@ -37254,6 +37691,8 @@ var ResultViewer = class extends i4 {
       case "metric":
       case "gauge":
         return typeof data === "object" && !Array.isArray(data) && (data.value !== void 0 || data.count !== void 0 || data.total !== void 0 || data.current !== void 0);
+      case "ring":
+        return typeof data === "number" || typeof data === "object" && !Array.isArray(data) && (data.value !== void 0 || data.progress !== void 0);
       case "chart":
         return typeof data !== "string";
       case "mermaid":
@@ -37312,6 +37751,8 @@ var ResultViewer = class extends i4 {
         return this._renderMetric(filteredData);
       case "gauge":
         return this._renderGauge(filteredData);
+      case "ring":
+        return this._renderRing(filteredData);
       case "timeline":
         return this._renderTimeline(filteredData);
       case "dashboard":
@@ -37393,10 +37834,12 @@ var ResultViewer = class extends i4 {
     const startIndex = this._currentPage * this._pageSize;
     const endIndex = Math.min(startIndex + this._pageSize, totalItems);
     const pageData = sortedData.slice(startIndex, endIndex);
+    const idField = this._detectIdField(originalData);
     return b2`
       <table class="smart-table">
         <thead>
           <tr>
+            <th class="row-expand-th"></th>
             ${columns.map(
       (col) => b2`<th
                   class="sortable ${this._sortColumn === col ? "sorted" : ""}"
@@ -37410,15 +37853,42 @@ var ResultViewer = class extends i4 {
           </tr>
         </thead>
         <tbody class="motion-stagger">
-          ${pageData.map(
-      (row) => b2`
-              <tr class="${this._getItemAnimationClass(row)} ${this._getItemWarmthClass(row)}">
+          ${pageData.map((row, idx) => {
+      const rowId = String(row[idField] ?? `__idx_${startIndex + idx}`);
+      const isExpanded = this._expandedRows.has(rowId);
+      return b2`
+              <tr
+                class="${this._getItemAnimationClass(row)} ${this._getItemWarmthClass(
+        row
+      )} ${isExpanded ? "row-expanded" : ""}"
+                @click=${() => this._toggleRowExpansion(rowId)}
+                style="cursor: pointer;"
+              >
+                <td class="row-expand-td">
+                  <span class="row-expand-chevron ${isExpanded ? "open" : ""}">▶</span>
+                </td>
                 ${columns.map(
         (col) => b2`<td>${this._formatCellValue(row[col], col, true)}</td>`
       )}
               </tr>
-            `
-    )}
+              ${isExpanded ? b2`<tr class="detail-row">
+                    <td colspan="${columns.length + 1}">
+                      <div class="detail-panel">
+                        ${Object.entries(row).filter(([k3]) => k3 !== "__meta").map(
+        ([k3, v2]) => b2`
+                              <div class="detail-field">
+                                <span class="detail-key">${this._formatColumnName(k3)}</span>
+                                <span class="detail-value"
+                                  >${this._formatCellValue(v2, k3, true)}</span
+                                >
+                              </div>
+                            `
+      )}
+                      </div>
+                    </td>
+                  </tr>` : ""}
+            `;
+    })}
         </tbody>
       </table>
       ${totalItems > this._pageSize ? this._renderPagination(totalItems, totalPages) : ""}
@@ -37433,6 +37903,15 @@ var ResultViewer = class extends i4 {
     }
     this._currentPage = 0;
   }
+  _toggleRowExpansion(rowId) {
+    const next = new Set(this._expandedRows);
+    if (next.has(rowId)) {
+      next.delete(rowId);
+    } else {
+      next.add(rowId);
+    }
+    this._expandedRows = next;
+  }
   _renderPagination(totalItems, totalPages) {
     const startItem = this._currentPage * this._pageSize + 1;
     const endItem = Math.min((this._currentPage + 1) * this._pageSize, totalItems);
@@ -37977,6 +38456,9 @@ ${rows}`);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
+    if (changedProperties.has("layoutHints")) {
+      this._columnPipes = null;
+    }
     if (changedProperties.has("result") && this.result && typeof this.result === "object" && !Array.isArray(this.result) && typeof this.result._photonType === "string") {
       const data = this.result;
       const photonType = data._photonType;
@@ -41281,9 +41763,70 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
   _formatColumnName(name2) {
     return formatLabel(name2);
   }
+  _getColumnPipes() {
+    if (this._columnPipes) return this._columnPipes;
+    this._columnPipes = /* @__PURE__ */ new Map();
+    const raw = this.layoutHints?.columnFormats;
+    if (!raw) return this._columnPipes;
+    for (const part of raw.split(",")) {
+      const trimmed = part.trim();
+      const colonIdx = trimmed.indexOf(":");
+      if (colonIdx <= 0) continue;
+      const col = trimmed.slice(0, colonIdx).trim();
+      const pipeSpec = trimmed.slice(colonIdx + 1).trim();
+      const pipeMatch = pipeSpec.match(/^(\w+)(?:\((\d+)\))?$/);
+      if (col && pipeMatch) {
+        this._columnPipes.set(col, { pipe: pipeMatch[1], arg: pipeMatch[2] });
+      }
+    }
+    return this._columnPipes;
+  }
+  _applyPipe(value, pipe2, arg) {
+    if (value === null || value === void 0) return "\u2014";
+    switch (pipe2) {
+      case "currency":
+        return typeof value === "number" ? value.toLocaleString(void 0, { style: "currency", currency: arg || "USD" }) : String(value);
+      case "percent": {
+        if (typeof value === "number") {
+          const pct = Math.abs(value) <= 1 ? value * 100 : value;
+          const digits = arg ? parseInt(arg, 10) : 1;
+          return `${pct.toFixed(digits)}%`;
+        }
+        return String(value);
+      }
+      case "date": {
+        const d5 = new Date(value);
+        return isNaN(d5.getTime()) ? String(value) : d5.toLocaleDateString();
+      }
+      case "truncate": {
+        const max = parseInt(arg || "30", 10);
+        const str = String(value);
+        return str.length > max ? str.slice(0, max) + "\u2026" : str;
+      }
+      case "number":
+        return typeof value === "number" ? value.toLocaleString() : String(value);
+      case "compact": {
+        if (typeof value !== "number") return String(value);
+        if (Math.abs(value) >= 1e9) return (value / 1e9).toFixed(1) + "B";
+        if (Math.abs(value) >= 1e6) return (value / 1e6).toFixed(1) + "M";
+        if (Math.abs(value) >= 1e3) return (value / 1e3).toFixed(1) + "K";
+        return value.toLocaleString();
+      }
+      default:
+        return String(value);
+    }
+  }
   _formatCellValue(value, key, highlight = false) {
     if (value === null || value === void 0) return "\u2014";
     if (typeof value === "boolean") return value ? "\u2713" : "\u2717";
+    const pipes = this._getColumnPipes();
+    if (pipes.size > 0) {
+      const pipe2 = pipes.get(key);
+      if (pipe2) {
+        const formatted = this._applyPipe(value, pipe2.pipe, pipe2.arg);
+        return highlight ? this._highlightText(formatted) : formatted;
+      }
+    }
     if (this._isImageUrl(value)) {
       return b2`
         <div>
@@ -41709,9 +42252,157 @@ ${str}</pre
     const dateKeys = keys2.filter(
       (k3) => /^(date|time|createdAt|updatedAt|created|updated|timestamp|.*At|.*Date|.*Time)$/i.test(k3) || typeof sample2[k3] === "string" && /^\d{4}-\d{2}-\d{2}/.test(sample2[k3])
     );
+    if (chartType === "histogram") {
+      const field = this.layoutHints?.x || numericKeys[0];
+      if (!field) return null;
+      const values = items.map((i7) => i7[field]).filter((v2) => typeof v2 === "number");
+      if (values.length === 0) return null;
+      const binCount = Math.min(20, Math.max(5, Math.ceil(Math.sqrt(values.length))));
+      const minVal = Math.min(...values);
+      const maxVal = Math.max(...values);
+      const binWidth = (maxVal - minVal) / binCount || 1;
+      const bins = Array(binCount).fill(0);
+      for (const v2 of values) {
+        const idx = Math.min(binCount - 1, Math.floor((v2 - minVal) / binWidth));
+        bins[idx]++;
+      }
+      const labels2 = bins.map((_3, i7) => `${(minVal + i7 * binWidth).toFixed(1)}`);
+      return {
+        type: "bar",
+        data: {
+          labels: labels2,
+          datasets: [
+            {
+              label: this._formatColumnName(field),
+              data: bins,
+              backgroundColor: this._hexToRgba(palette2[0], 0.7),
+              borderColor: palette2[0],
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            x: { grid: { color: gridColor }, ticks: { color: textColor, maxRotation: 45 } },
+            y: { grid: { color: gridColor }, ticks: { color: textColor }, beginAtZero: true }
+          }
+        }
+      };
+    }
+    if (chartType === "scatter") {
+      const xField = this.layoutHints?.x || numericKeys[0];
+      const yField = this.layoutHints?.y || numericKeys[1];
+      if (!xField || !yField) return null;
+      return {
+        type: "scatter",
+        data: {
+          datasets: [
+            {
+              label: `${this._formatColumnName(xField)} vs ${this._formatColumnName(yField)}`,
+              data: items.map((item) => ({ x: item[xField], y: item[yField] })),
+              backgroundColor: this._hexToRgba(palette2[0], 0.7),
+              borderColor: palette2[0],
+              pointRadius: 5,
+              pointHoverRadius: 8
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            x: {
+              type: "linear",
+              title: { display: true, text: this._formatColumnName(xField), color: textColor },
+              grid: { color: gridColor },
+              ticks: { color: textColor }
+            },
+            y: {
+              type: "linear",
+              title: { display: true, text: this._formatColumnName(yField), color: textColor },
+              grid: { color: gridColor },
+              ticks: { color: textColor }
+            }
+          }
+        }
+      };
+    }
     const labelField = this.layoutHints?.label || this.layoutHints?.x || dateKeys[0] || stringKeys[0];
     const valueFields = this.layoutHints?.y ? [this.layoutHints.y] : this.layoutHints?.value ? [this.layoutHints.value] : numericKeys;
     if (!labelField || valueFields.length === 0) return null;
+    if (chartType === "radar" && items.length === 1) {
+      const labels2 = valueFields.map((f5) => this._formatColumnName(f5));
+      return {
+        type: "radar",
+        data: {
+          labels: labels2,
+          datasets: [
+            {
+              label: items[0][stringKeys[0]] || "Values",
+              data: valueFields.map((f5) => items[0][f5] ?? 0),
+              backgroundColor: this._hexToRgba(palette2[0], 0.2),
+              borderColor: palette2[0],
+              borderWidth: 2,
+              pointRadius: 4,
+              pointHoverRadius: 6,
+              fill: true
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            r: {
+              grid: { color: gridColor },
+              pointLabels: { color: textColor },
+              ticks: { color: textColor, backdropColor: "transparent" }
+            }
+          }
+        }
+      };
+    }
     const labels = items.map((item) => {
       const val = item[labelField];
       if (dateKeys.includes(labelField) && typeof val === "string") {
@@ -41733,9 +42424,10 @@ ${str}</pre
       borderColor: palette2[i7 % palette2.length],
       borderWidth: chartType === "pie" || chartType === "doughnut" ? 0 : 2,
       tension: 0.3,
-      fill: chartType === "line" && valueFields.length === 1 ? "origin" : false,
-      pointRadius: chartType === "scatter" ? 5 : 3,
-      pointHoverRadius: chartType === "scatter" ? 8 : 5
+      fill: chartType === "radar" ? true : chartType === "line" && valueFields.length === 1 ? "origin" : false,
+      pointRadius: 3,
+      pointHoverRadius: 5,
+      ...chartType === "radar" ? { backgroundColor: this._hexToRgba(palette2[i7 % palette2.length], 0.2) } : {}
     }));
     const isPolar = chartType === "pie" || chartType === "doughnut" || chartType === "radar";
     return {
@@ -41767,7 +42459,13 @@ ${str}</pre
             padding: 10
           }
         },
-        scales: isPolar ? {} : {
+        scales: chartType === "radar" ? {
+          r: {
+            grid: { color: gridColor },
+            pointLabels: { color: textColor },
+            ticks: { color: textColor, backdropColor: "transparent" }
+          }
+        } : isPolar ? {} : {
           x: {
             grid: { color: gridColor },
             ticks: { color: textColor, maxRotation: 45 }
@@ -41801,8 +42499,12 @@ ${str}</pre
     const keys2 = Object.keys(sample2);
     const numericKeys = keys2.filter((k3) => typeof sample2[k3] === "number");
     const hasDate = this._hasDateLikeFields(sample2);
+    const stringKeys = keys2.filter((k3) => typeof sample2[k3] === "string");
     if (hasDate && numericKeys.length >= 1) return "line";
+    if (numericKeys.length >= 2 && stringKeys.length === 0 && items.length > 1) return "scatter";
     if (keys2.length === 2 && numericKeys.length === 1 && items.length <= 8) return "pie";
+    if (items.length === 1 && numericKeys.length >= 5) return "radar";
+    if (items.length <= 5 && numericKeys.length >= 4 && stringKeys.length === 1) return "radar";
     return "bar";
   }
   _hexToRgba(hex4, alpha2) {
@@ -41946,6 +42648,74 @@ ${str}</pre
     }
   }
   // ═══════════════════════════════════════════════════════════════════════════
+  // Ring (Circular Progress) Rendering
+  // ═══════════════════════════════════════════════════════════════════════════
+  _renderRing(data) {
+    let value;
+    let max = 100;
+    let label;
+    if (typeof data === "number") {
+      value = data;
+    } else if (data && typeof data === "object") {
+      if ("progress" in data && typeof data.progress === "number") {
+        value = data.progress * 100;
+      } else {
+        value = data.value ?? 0;
+      }
+      max = parseFloat(this.layoutHints?.max ?? String(data.max ?? 100));
+      label = data.label || this.layoutHints?.title;
+    } else {
+      return b2`<div class="empty-state">No ring data</div>`;
+    }
+    const normalized = Math.max(0, Math.min(1, value / max));
+    const cx = 60;
+    const cy = 60;
+    const r7 = 50;
+    const circumference = 2 * Math.PI * r7;
+    const dashOffset = circumference * (1 - normalized);
+    const color2 = this._getGaugeColor(normalized);
+    const displayValue = data?.progress !== void 0 ? `${Math.round(value)}%` : String(Math.round(value));
+    return b2`
+      <div class="ring-container ${this._objectJustChanged ? "value-flash" : ""}">
+        <svg viewBox="0 0 120 120" width="120" height="120">
+          <circle
+            cx="${cx}"
+            cy="${cy}"
+            r="${r7}"
+            fill="none"
+            stroke="${this.theme === "light" ? "#e2e8f0" : "#334155"}"
+            stroke-width="8"
+          />
+          <circle
+            cx="${cx}"
+            cy="${cy}"
+            r="${r7}"
+            fill="none"
+            stroke="${color2}"
+            stroke-width="8"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${dashOffset}"
+            stroke-linecap="round"
+            transform="rotate(-90 ${cx} ${cy})"
+          />
+          <text
+            x="${cx}"
+            y="${cy}"
+            text-anchor="middle"
+            dominant-baseline="central"
+            font-size="20"
+            font-weight="700"
+            font-variant-numeric="tabular-nums"
+            fill="${this.theme === "light" ? "#1e293b" : "#e2e8f0"}"
+          >
+            ${displayValue}
+          </text>
+        </svg>
+        ${label ? b2`<div class="ring-label">${label}</div>` : ""}
+      </div>
+    `;
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
   // Timeline Rendering
   // ═══════════════════════════════════════════════════════════════════════════
   _renderTimeline(data) {
@@ -42674,6 +43444,67 @@ ResultViewer.styles = [
         background: var(--bg-glass);
       }
 
+      /* Row expansion */
+      .row-expand-th {
+        width: 32px;
+        padding: 0 !important;
+      }
+      .row-expand-td {
+        width: 32px;
+        padding: 4px 6px !important;
+        text-align: center;
+      }
+      .row-expand-chevron {
+        display: inline-block;
+        font-size: 0.6em;
+        color: var(--t-muted);
+        transition: transform 0.2s ease;
+      }
+      .row-expand-chevron.open {
+        transform: rotate(90deg);
+      }
+      .row-expanded td {
+        border-bottom: none;
+      }
+      .detail-row td {
+        padding: 0 !important;
+        border-bottom: 1px solid var(--border-glass);
+      }
+      .detail-panel {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: var(--space-xs) var(--space-md);
+        padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
+        background: var(--bg-glass);
+        animation: detail-slide-down 0.2s ease-out;
+      }
+      .detail-field {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .detail-key {
+        font-size: var(--text-xs);
+        font-weight: 600;
+        color: var(--t-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .detail-value {
+        font-size: var(--text-md);
+        color: var(--t-primary);
+      }
+      @keyframes detail-slide-down {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
       /* Key-Value Table (single object) */
       .kv-table {
         max-width: 600px;
@@ -44465,6 +45296,28 @@ ResultViewer.styles = [
           stroke 0.3s ease-out;
       }
 
+      /* ═══════════════════════════════════════════════════════════════
+         Ring (Circular Progress)
+         ═══════════════════════════════════════════════════════════════ */
+      .ring-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px;
+      }
+      .ring-container svg circle {
+        transition:
+          stroke-dashoffset 0.6s ease-out,
+          stroke 0.3s ease-out;
+      }
+      .ring-label {
+        font-size: var(--text-md);
+        color: var(--t-muted);
+        margin-top: var(--space-xs);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+
       /* ═══════════════════════════════════════════════════════════════
          Timeline Component
          ═══════════════════════════════════════════════════════════════ */
@@ -45093,6 +45946,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ResultViewer.prototype, "_checklistToggledDone", 2);
+__decorateClass([
+  r5()
+], ResultViewer.prototype, "_expandedRows", 2);
 __decorateClass([
   n4({ type: String })
 ], ResultViewer.prototype, "collectionProperty", 2);
@@ -46423,7 +47279,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 +47346,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
     }))
@@ -47550,7 +48406,7 @@ MarketplaceView = __decorateClass([
 
 // src/auto-ui/frontend/styles/beam-tokens.ts
 var beamTypographyTokens = {
-  "--font-display": "'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  "--font-display": "'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif",
   "--text-3xl": "2rem",
   "--text-2xl": "1.5rem",
   "--text-xl": "1.25rem",
@@ -47565,17 +48421,17 @@ var beamTypographyTokens = {
 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%)";
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
   } 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";
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
   }
   return tokens;
 }
@@ -47947,7 +48803,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;
@@ -48154,6 +49011,273 @@ CustomUiRenderer = __decorateClass([
   t4("custom-ui-renderer")
 ], CustomUiRenderer);
 
+// src/auto-ui/frontend/components/canvas-renderer.ts
+function getBeamThemeTokens2(themeMode) {
+  const tokens = getThemeTokens(themeMode);
+  if (themeMode === "dark") {
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
+  } else {
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
+  }
+  return tokens;
+}
+var CanvasRenderer = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.photon = "";
+    this.method = "";
+    this.theme = "dark";
+    this._loading = true;
+    this._iframeRef = null;
+    this._blobUrl = null;
+    this._iframeReady = false;
+    this._messageBuffer = [];
+    this._resizeObserver = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this._buildAndMount();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._blobUrl) {
+      URL.revokeObjectURL(this._blobUrl);
+      this._blobUrl = null;
+    }
+  }
+  /**
+   * Push a canvas/ui message to the iframe (HTML layout with data-slot placeholders)
+   */
+  pushUI(htmlContent) {
+    this._postOrBuffer({
+      jsonrpc: "2.0",
+      method: "canvas/ui",
+      params: { html: htmlContent }
+    });
+  }
+  /**
+   * Push a canvas/data message to the iframe (JSON data targeting a named slot)
+   */
+  pushData(slot, data) {
+    this._postOrBuffer({
+      jsonrpc: "2.0",
+      method: "canvas/data",
+      params: { slot, data }
+    });
+  }
+  _postOrBuffer(message) {
+    if (this._iframeReady && this._iframeRef?.contentWindow) {
+      this._iframeRef.contentWindow.postMessage(message, "*");
+    } else {
+      this._messageBuffer.push(message);
+    }
+  }
+  _flushBuffer() {
+    if (!this._iframeRef?.contentWindow) return;
+    for (const msg of this._messageBuffer) {
+      this._iframeRef.contentWindow.postMessage(msg, "*");
+    }
+    this._messageBuffer = [];
+  }
+  async _buildAndMount() {
+    this._loading = true;
+    try {
+      const bridgeRes = await fetch(
+        `/api/platform-bridge?photon=${encodeURIComponent(this.photon)}&method=${encodeURIComponent(this.method)}&theme=${encodeURIComponent(this.theme)}`,
+        { signal: AbortSignal.timeout(1e4) }
+      );
+      if (!bridgeRes.ok) throw new Error("Failed to load platform bridge");
+      const bridgeScript = await bridgeRes.text();
+      const baseCSS = `<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    background: var(--color-surface);
+    color: var(--color-on-surface);
+    font-size: var(--font-size-sm, 14px);
+    line-height: 1.5;
+    padding: var(--space-4, 16px);
+  }
+  a { color: var(--color-primary); }
+  [data-slot] {
+    min-height: 40px;
+    transition: opacity 0.2s ease;
+  }
+  [data-slot].photon-loading {
+    opacity: 0.4;
+  }
+  [data-slot][data-rendered] {
+    opacity: 1;
+  }
+</style>`;
+      const renderersScript = `<script src="/api/photon-renderers.js"><\/script>`;
+      const shellHtml = `<html>
+<head>
+  <meta name="photon-canvas" content="true">
+  ${bridgeScript}
+  ${baseCSS}
+  ${renderersScript}
+</head>
+<body></body>
+</html>`;
+      const blob = new Blob([shellHtml], { type: "text/html" });
+      this._blobUrl = URL.createObjectURL(blob);
+      await this.updateComplete;
+      const container = this.shadowRoot?.querySelector(".iframe-host");
+      if (!container) return;
+      const old = container.querySelector("iframe");
+      if (old) old.remove();
+      const iframe = document.createElement("iframe");
+      iframe.setAttribute(
+        "sandbox",
+        "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+      );
+      iframe.setAttribute("allowtransparency", "true");
+      iframe.addEventListener("load", () => this._handleIframeLoad(iframe));
+      iframe.src = this._blobUrl;
+      container.appendChild(iframe);
+    } catch (e8) {
+      console.error("[canvas-renderer] Failed to build:", e8);
+      this._loading = false;
+    }
+  }
+  _handleIframeLoad(iframe) {
+    this._iframeRef = iframe;
+    this._loading = false;
+    const themeTokens = getBeamThemeTokens2(this.theme);
+    iframe.contentWindow?.postMessage(
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/host-context-changed",
+        params: {
+          theme: this.theme,
+          styles: { variables: themeTokens }
+        }
+      },
+      "*"
+    );
+    iframe.contentWindow?.postMessage(
+      {
+        type: "photon:theme-change",
+        theme: this.theme,
+        themeTokens: { ...themeTokens, ...beamTypographyTokens }
+      },
+      "*"
+    );
+    this._iframeReady = true;
+    this._flushBuffer();
+    this._startAutoResize(iframe);
+  }
+  _startAutoResize(iframe) {
+    const resize = () => {
+      try {
+        const height = iframe.contentDocument?.body?.scrollHeight;
+        if (height && height > 0) {
+          iframe.style.height = `${height + 16}px`;
+          this.style.minHeight = `${height + 16}px`;
+        }
+      } catch (_3) {
+      }
+    };
+    try {
+      const body = iframe.contentDocument?.body;
+      if (body) {
+        this._resizeObserver = new MutationObserver(resize);
+        this._resizeObserver.observe(body, { childList: true, subtree: true, attributes: true });
+      }
+    } catch (_3) {
+    }
+    const interval = setInterval(resize, 500);
+    setTimeout(() => clearInterval(interval), 1e4);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("theme") && this._iframeRef?.contentWindow) {
+      const themeTokens = getBeamThemeTokens2(this.theme);
+      this._iframeRef.contentWindow.postMessage(
+        {
+          jsonrpc: "2.0",
+          method: "ui/notifications/host-context-changed",
+          params: {
+            theme: this.theme,
+            styles: { variables: themeTokens }
+          }
+        },
+        "*"
+      );
+    }
+  }
+  render() {
+    return b2`
+      <div class="iframe-host"></div>
+      ${this._loading ? b2`<div class="loading"><span>Preparing canvas…</span></div>` : ""}
+    `;
+  }
+};
+CanvasRenderer.styles = [
+  theme,
+  i`
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        background: transparent;
+        border-radius: var(--radius-md);
+        overflow: visible;
+      }
+
+      .iframe-host {
+        width: 100%;
+        height: 100%;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        display: block;
+        will-change: transform;
+      }
+
+      .loading {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        color: var(--t-muted);
+        font-size: 13px;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "photon", 2);
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "method", 2);
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "theme", 2);
+__decorateClass([
+  r5()
+], CanvasRenderer.prototype, "_loading", 2);
+CanvasRenderer = __decorateClass([
+  t4("canvas-renderer")
+], CanvasRenderer);
+
 // node_modules/zod/v4/core/core.js
 var NEVER = Object.freeze({
   status: "aborted"
@@ -67962,20 +69086,20 @@ function X_(r7, i7) {
 }
 
 // src/auto-ui/frontend/components/mcp-app-renderer.ts
-function getBeamThemeTokens2(themeMode) {
+function getBeamThemeTokens3(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%)";
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
   } 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";
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
   }
   return tokens;
 }
@@ -68107,14 +69231,14 @@ var McpAppRenderer = class extends i4 {
   willUpdate(changedProperties) {
     if (changedProperties.has("theme")) {
       if (this._bridge) {
-        const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
+        const specTokens = filterSpecVariables(getBeamThemeTokens3(this.theme));
         this._bridge.setHostContext({
           theme: this.theme,
           styles: { variables: specTokens }
         });
       }
       if (this._iframeRef?.contentWindow) {
-        const themeTokens = getBeamThemeTokens2(this.theme);
+        const themeTokens = getBeamThemeTokens3(this.theme);
         this._iframeRef.contentWindow.postMessage(
           {
             jsonrpc: "2.0",
@@ -68228,7 +69352,7 @@ var McpAppRenderer = class extends i4 {
     const iframe = e8.target;
     this._iframeRef = iframe;
     if (!iframe.contentWindow) return;
-    const themeTokens = getBeamThemeTokens2(this.theme);
+    const themeTokens = getBeamThemeTokens3(this.theme);
     iframe.contentWindow.postMessage(
       {
         jsonrpc: "2.0",
@@ -68272,7 +69396,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 = getBeamThemeTokens2(this.theme);
+        const themeTokens2 = getBeamThemeTokens3(this.theme);
         iframe.contentWindow?.postMessage(
           {
             jsonrpc: "2.0",
@@ -68341,7 +69465,7 @@ var McpAppRenderer = class extends i4 {
       void asyncMessageHandler(event);
     };
     window.addEventListener("message", this._messageHandler);
-    const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
+    const specTokens = filterSpecVariables(getBeamThemeTokens3(this.theme));
     this._bridge = new W_(
       null,
       { name: "Photon Beam", version: "1.0.0" },
@@ -95191,6 +96315,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 +96807,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 +97223,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 +97236,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 +97244,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 +97320,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 +98366,9 @@ __decorateClass([
 __decorateClass([
   n4()
 ], PhotonStudio.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], PhotonStudio.prototype, "hideCloseButton", 2);
 __decorateClass([
   r5()
 ], PhotonStudio.prototype, "_source", 2);
@@ -97783,7 +98911,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 +98955,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 +99457,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);
@@ -98866,7 +100020,7 @@ var OverflowMenu = class extends i4 {
       border: 1px solid ${borderGlass};
       border-radius: ${radiusMd};
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-      font-family: 'Inter', sans-serif;
+      font-family: 'DM Sans', sans-serif;
       padding: 4px 0;
     `;
     this.items.forEach((item) => {
@@ -99184,7 +100338,7 @@ var InstancePanel = class extends i4 {
       border: 1px solid ${borderGlass};
       border-radius: ${radiusMd};
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-      font-family: 'Inter', sans-serif;
+      font-family: 'DM Sans', sans-serif;
       padding: 8px;
     `;
     const addFocusGlow = (el2) => {
@@ -99939,9 +101093,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)}