@portel/photon 1.22.1 → 1.23.1

package/dist/beam.bundle.js

@@ -21876,6 +21876,7 @@ var MCPClientService = class {
             internal: tool["x-photon-internal"],
             stateful: tool["x-photon-stateful"] || false,
             hasSettings: tool["x-photon-has-settings"] || false,
+            requiredParams: tool["x-photon-required-params"] || [],
             installSource: tool["x-photon-install-source"],
             promptCount: tool["x-photon-prompt-count"] || 0,
             resourceCount: tool["x-photon-resource-count"] || 0,
@@ -22655,6 +22656,7 @@ var BeamApp = class extends i4 {
     this._view = "list";
     this._welcomePhase = "welcome";
     this._configMode = "initial";
+    this._settingsTab = "configuration";
     this._pendingStudioOpen = false;
     this._diagnosticsData = null;
     this._testResults = [];
@@ -22787,6 +22789,13 @@ var BeamApp = class extends i4 {
           this._view = "marketplace";
           return;
         }
+        if (photonName === "daemon") {
+          this._selectedPhoton = null;
+          this._selectedMethod = null;
+          this._lastResult = null;
+          this._view = "daemon";
+          return;
+        }
         if (!photonName || photonName === "home") {
           this._selectedPhoton = null;
           this._selectedMethod = null;
@@ -24946,6 +24955,8 @@ var BeamApp = class extends i4 {
     let path;
     if (this._view === "marketplace") {
       path = "/marketplace";
+    } else if (this._view === "daemon") {
+      path = "/daemon";
     } else if (!this._selectedPhoton) {
       path = "/";
     } else {
@@ -25360,6 +25371,7 @@ var BeamApp = class extends i4 {
           .mainTab=${this._mainTab}
           .isApp=${!!(this._selectedPhoton?.isApp || this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp)}
           .hasSettings=${!!(this._selectedPhoton?.hasSettings && !this._selectedPhoton?.isExternalMCP)}
+          .hasSetup=${!!(this._selectedPhoton?.requiredParams?.length && !this._selectedPhoton?.isExternalMCP)}
           .isExternalMCP=${!!this._selectedPhoton?.isExternalMCP}
           .hasPath=${!!this._selectedPhoton?.path}
           @tab-change=${(e8) => {
@@ -25394,7 +25406,19 @@ var BeamApp = class extends i4 {
         if (settingsMethod) {
           this._selectedMethod = settingsMethod;
           this._view = "form";
-          this._maybeAutoInvoke(settingsMethod);
+        } else {
+          this._selectedMethod = null;
+          this._lastResult = null;
+        }
+        const hasSetup = Array.isArray(this._selectedPhoton?.requiredParams) && this._selectedPhoton.requiredParams.length > 0;
+        const hasConfig = !!settingsMethod;
+        const configured = this._selectedPhoton?.configured !== false;
+        if (hasSetup && hasConfig) {
+          this._settingsTab = configured ? "configuration" : "setup";
+        } else if (hasSetup) {
+          this._settingsTab = "setup";
+        } else {
+          this._settingsTab = "configuration";
         }
         return;
       }
@@ -25411,6 +25435,13 @@ var BeamApp = class extends i4 {
           @home=${this._goHome}
           @select=${(e8) => this._handlePhotonSelectMobile(e8)}
           @marketplace=${() => this._handleMarketplaceMobile()}
+          @daemon=${() => {
+      this._selectedPhoton = null;
+      this._selectedMethod = null;
+      this._lastResult = null;
+      this._view = "daemon";
+      this._updateRoute();
+    }}
           @theme-change=${this._handleThemeChange}
           @open-theme-settings=${() => this._showThemeSettings = true}
           @show-shortcuts=${this._showHelpModal}
@@ -25636,6 +25667,22 @@ var BeamApp = class extends i4 {
         ${this._renderDiagnostics()}
       `;
     }
+    if (this._view === "daemon") {
+      return b2`
+        <div style="margin-bottom: var(--space-md);">
+          <button
+            style="background:none; border:none; color:var(--accent-secondary); cursor:pointer;"
+            @click=${() => {
+        this._view = "list";
+        this._updateRoute();
+      }}
+          >
+            ← Back to Dashboard
+          </button>
+        </div>
+        <daemon-panel></daemon-panel>
+      `;
+    }
     if (this._view === "marketplace") {
       const globalMethods = this._globalStaticMethods;
       return b2`
@@ -28898,120 +28945,159 @@ ${photon.errorMessage || "Unknown error"}</pre
     const photon = this._selectedPhoton;
     if (!photon) return "";
     const settingsMethod = photon.methods?.find((m3) => m3.name === "settings");
-    if (!settingsMethod)
+    const hasSetup = Array.isArray(photon.requiredParams) && photon.requiredParams.length > 0;
+    const hasConfiguration = !!settingsMethod;
+    if (!hasSetup && !hasConfiguration) {
       return b2`<div style="padding: var(--space-xl); color: var(--t-muted); text-align: center;">
         No settings available for this photon.
       </div>`;
-    const params = settingsMethod.params;
-    const properties = params?.properties || {};
-    const propEntries = Object.entries(properties);
-    const hasResult = this._lastResult !== null;
-    let statusEntries = [];
-    if (hasResult) {
-      try {
-        const resultData = typeof this._lastResult === "string" ? JSON.parse(this._lastResult) : Array.isArray(this._lastResult) ? this._lastResult.find((c5) => c5.type === "text")?.text ? JSON.parse(this._lastResult.find((c5) => c5.type === "text").text) : this._lastResult : this._lastResult;
-        if (resultData && typeof resultData === "object" && !Array.isArray(resultData)) {
-          statusEntries = Object.entries(resultData).filter(([, v2]) => v2 !== null && v2 !== void 0).map(([k3, v2]) => [k3, String(v2)]);
-        }
-      } catch {
-      }
     }
+    const showTabs = hasSetup && hasConfiguration;
+    const activeTab = hasConfiguration && this._settingsTab === "configuration" ? "configuration" : hasSetup && this._settingsTab === "setup" ? "setup" : hasConfiguration ? "configuration" : "setup";
     return b2`
       <div style="padding: var(--space-lg); max-width: 900px; margin: 0 auto; width: 100%;">
-        <!-- Settings Header -->
-        <div style="margin-bottom: var(--space-xl);">
+        <div style="margin-bottom: var(--space-lg);">
           <h2
             style="font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--t-primary); margin: 0 0 4px 0;"
           >
             ${photon.name} Settings
           </h2>
-          ${settingsMethod.description ? b2`<p
-                style="color: var(--t-muted); font-size: var(--text-sm); margin: 0; line-height: 1.5;"
-              >
-                View or update photon configuration. Changes are applied immediately.
-              </p>` : ""}
+          <p style="color: var(--t-muted); font-size: var(--text-sm); margin: 0; line-height: 1.5;">
+            ${activeTab === "setup" ? "What this photon needs to run. Applies to every instance; changes take effect on next load." : "How this photon behaves. Applies to the current instance only; changes are saved immediately."}
+          </p>
         </div>
 
-        <!-- Configuration Section -->
-        ${propEntries.length > 0 ? b2`
-              <div class="glass-panel" style="margin-bottom: var(--space-lg); overflow: hidden;">
-                <div
-                  style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
+        ${showTabs ? this._renderSettingsTabStrip(activeTab) : ""}
+        ${activeTab === "setup" ? this._renderSettingsSetup(photon) : this._renderSettingsConfiguration(photon, settingsMethod)}
+      </div>
+    `;
+  }
+  _renderSettingsTabStrip(active) {
+    const tab = (id2, label) => b2`
+      <button
+        type="button"
+        @click=${() => {
+      this._settingsTab = id2;
+    }}
+        style="
+          padding: 8px 16px;
+          background: ${active === id2 ? "var(--bg-glass-strong)" : "transparent"};
+          color: ${active === id2 ? "var(--t-primary)" : "var(--t-muted)"};
+          border: none;
+          border-bottom: 2px solid ${active === id2 ? "var(--accent-primary)" : "transparent"};
+          cursor: pointer;
+          font-size: var(--text-sm);
+          font-weight: ${active === id2 ? "600" : "500"};
+          transition: all 0.15s;
+        "
+      >
+        ${label}
+      </button>
+    `;
+    return b2`
+      <div
+        role="tablist"
+        style="display: flex; gap: 4px; border-bottom: 1px solid var(--border-glass); margin-bottom: var(--space-lg);"
+      >
+        ${tab("setup", "Setup")} ${tab("configuration", "Configuration")}
+      </div>
+    `;
+  }
+  _renderSettingsSetup(photon) {
+    const isInitial = photon.configured === false;
+    return b2`
+      <div class="glass-panel" style="overflow: hidden;">
+        <div
+          style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
+        >
+          <span
+            style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
+            >Setup</span
+          >
+        </div>
+        <div style="padding: var(--space-lg);">
+          <photon-config
+            embedded
+            .photon=${{
+      ...photon,
+      // photon-config expects an UnconfiguredPhoton-shape with a
+      // requiredParams field. Pass the existing data through.
+      requiredParams: photon.requiredParams || []
+    }}
+            .mode=${isInitial ? "initial" : "edit"}
+            @configure=${(e8) => {
+      void this._handleConfigure(e8);
+    }}
+          ></photon-config>
+        </div>
+      </div>
+    `;
+  }
+  _renderSettingsConfiguration(photon, settingsMethod) {
+    const params = settingsMethod.params;
+    const properties = params?.properties || {};
+    const propEntries = Object.entries(properties);
+    const showInstanceLabel = !!photon?.stateful || Array.isArray(this._instances) && this._instances.length > 1;
+    const instanceName = this._currentInstance || "default";
+    return b2`
+      ${showInstanceLabel ? b2`
+            <div
+              style="display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--t-muted);"
+            >
+              <span>Instance:</span>
+              <span
+                style="font-family: var(--font-mono); color: var(--t-primary); background: var(--bg-glass); padding: 2px 8px; border-radius: var(--radius-xs);"
+                >${instanceName}</span
+              >
+              <span style="font-size: var(--text-xs);">
+                — switch via the picker in the header above
+              </span>
+            </div>
+          ` : ""}
+      ${propEntries.length > 0 ? b2`
+            <div class="glass-panel" style="margin-bottom: var(--space-lg); overflow: hidden;">
+              <div
+                style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
+              >
+                <span
+                  style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
+                  >Configuration</span
                 >
-                  <span
-                    style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
-                    >Configuration</span
-                  >
-                </div>
-                <div class="method-detail" style="padding: 0;">
-                  <invoke-form
-                    .params=${params}
-                    .loading=${this._isExecuting}
-                    .photonName=${photon.name}
-                    .methodName=${"settings"}
-                    .rememberValues=${this._rememberFormValues}
-                    .sharedValues=${this._sharedFormParams ?? this._lastFormParams}
-                    .settingsLayout=${true}
-                    @submit=${(e8) => void this._handleExecute(e8)}
-                    @cancel=${() => {
+              </div>
+              <div class="method-detail" style="padding: 0;">
+                <invoke-form
+                  .params=${params}
+                  .loading=${this._isExecuting}
+                  .photonName=${photon.name}
+                  .methodName=${"settings"}
+                  .rememberValues=${this._rememberFormValues}
+                  .sharedValues=${this._sharedFormParams ?? this._lastFormParams}
+                  .settingsLayout=${true}
+                  @submit=${(e8) => void this._handleExecute(e8)}
+                  @cancel=${() => {
     }}
-                  ></invoke-form>
-                  <div
-                    style="display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-glass);"
-                  >
-                    <button
-                      class="btn-primary"
-                      style="font-size: var(--text-sm); padding: 6px 20px;"
-                      @click=${(e8) => {
+                ></invoke-form>
+                <div
+                  style="display: flex; justify-content: flex-end; padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-glass);"
+                >
+                  <button
+                    class="btn-primary"
+                    style="font-size: var(--text-sm); padding: 6px 20px;"
+                    @click=${(e8) => {
       const panel = e8.target.closest(".glass-panel");
       const form = panel?.querySelector("invoke-form");
       form?.handleSubmit();
     }}
-                      ?disabled=${this._isExecuting}
-                    >
-                      ${this._isExecuting ? b2`<span class="btn-loading"
-                            ><span class="spinner"></span>Saving...</span
-                          >` : "Save Settings"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ` : ""}
-
-        <!-- Status Section (from last result) -->
-        ${statusEntries.length > 0 ? b2`
-              <div class="glass-panel" style="overflow: hidden;">
-                <div
-                  style="padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-glass); background: var(--bg-glass);"
-                >
-                  <span
-                    style="font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); text-transform: uppercase; letter-spacing: 0.05em;"
-                    >Status</span
+                    ?disabled=${this._isExecuting}
                   >
-                </div>
-                <div style="padding: 0;">
-                  ${statusEntries.map(
-      ([key, value], i7) => b2`
-                      <div
-                        style="display: grid; grid-template-columns: 200px 1fr; border-bottom: ${i7 < statusEntries.length - 1 ? "1px solid var(--border-glass)" : "none"};"
-                      >
-                        <div
-                          style="padding: 10px var(--space-md); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--t-muted); background: var(--bg-glass);"
-                        >
-                          ${key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim()}
-                        </div>
-                        <div
-                          style="padding: 10px var(--space-md); font-size: var(--text-sm); color: var(--t-primary); word-break: break-word;"
-                        >
-                          ${value}
-                        </div>
-                      </div>
-                    `
-    )}
+                    ${this._isExecuting ? b2`<span class="btn-loading"
+                          ><span class="spinner"></span>Saving...</span
+                        >` : "Save Settings"}
+                  </button>
                 </div>
               </div>
-            ` : ""}
-      </div>
+            </div>
+          ` : ""}
     `;
   }
   /** Render source code as an inline view (not a modal) — Phase 2 */
@@ -31259,6 +31345,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_configMode", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_settingsTab", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_diagnosticsData", 2);
@@ -31452,6 +31541,7 @@ var BeamSidebar = class extends i4 {
     this.mainTab = "methods";
     this.isApp = false;
     this.hasSettings = false;
+    this.hasSetup = false;
     this.isExternalMCP = false;
     this.hasPath = false;
     this._searchQuery = "";
@@ -31691,6 +31781,14 @@ var BeamSidebar = class extends i4 {
               ${marketplace} Marketplace
               ${this.updatesAvailable > 0 ? b2`<span class="update-badge">${this.updatesAvailable}</span>` : ""}
             </button>
+            <button
+              class="filter-btn"
+              @click=${() => this.dispatchEvent(new CustomEvent("daemon"))}
+              aria-label="Open daemon panel"
+              title="View scheduled jobs, webhooks, and sessions"
+            >
+              ${activity} Daemon
+            </button>
           </div>
         </div>
 
@@ -32043,7 +32141,7 @@ ${photon.path}` : ""}"
       ...this.isApp ? [{ id: "app", label: "App", icon: appTabIcon }] : [],
       { id: "methods", label: "Methods", icon: methodsTabIcon },
       { id: "log", label: "Activity", icon: activity },
-      ...this.hasSettings ? [{ id: "settings", label: "Settings", icon: settings }] : [],
+      ...this.hasSettings || this.hasSetup ? [{ id: "settings", label: "Settings", icon: settings }] : [],
       ...this.hasPath && !this.isExternalMCP ? [{ id: "source", label: "Source", icon: source }] : [],
       { id: "help", label: "Help", icon: docs }
     ];
@@ -33116,6 +33214,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean })
 ], BeamSidebar.prototype, "hasSettings", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], BeamSidebar.prototype, "hasSetup", 2);
 __decorateClass([
   n4({ type: Boolean })
 ], BeamSidebar.prototype, "isExternalMCP", 2);
@@ -36701,6 +36802,11 @@ var ResultViewer = class extends i4 {
     this._handlePanEnd = () => {
       this._isPanning = false;
     };
+    this._handleA2UIAction = (ev2) => {
+      ev2.preventDefault();
+      const detail = ev2.detail;
+      void this._invokeA2UIAction(detail.name, detail.context ?? {});
+    };
     // Non-reactive property to avoid infinite update loops
     this._pendingMermaidBlocks = [];
     // Store code blocks for Prism highlighting after DOM update
@@ -37543,7 +37649,8 @@ var ResultViewer = class extends i4 {
         "slides",
         "checklist",
         "article",
-        "magazine"
+        "magazine",
+        "a2ui"
       ].includes(format)) {
         return format;
       }
@@ -37782,11 +37889,51 @@ var ResultViewer = class extends i4 {
       case "magazine":
       case "article":
         return this._renderMagazine(filteredData);
+      case "a2ui":
+        return this._renderA2UI(filteredData);
       case "json":
       default:
         return this._renderJson(filteredData);
     }
   }
+  /**
+   * Render an A2UI v0.9 surface by handing the result off to the shared
+   * photon-renderers.js runtime. The renderer walks the component tree
+   * (auto-mapped from the raw result) and produces the final DOM, then
+   * dispatches `a2ui:action` events when buttons fire — we route those to
+   * `<photonName>/<actionName>` per the convention documented in
+   * docs/formats.md (button name == method name on the same photon).
+   */
+  _renderA2UI(filteredData) {
+    const data = filteredData;
+    const slotId = `a2ui-${Math.random().toString(36).slice(2)}`;
+    queueMicrotask(() => {
+      const target2 = this.shadowRoot?.getElementById(slotId);
+      if (target2) this._renderSlideFormat(target2, data, "a2ui");
+    });
+    return b2`<div
+      id=${slotId}
+      class="a2ui-host"
+      style="padding: 4px"
+      @a2ui:action=${this._handleA2UIAction}
+    ></div>`;
+  }
+  /**
+   * Invoke a photon method that an A2UI button asked for and re-render the
+   * surface with the new result. Action name comes from the button's
+   * `event.name`; context is the local data-model snapshot (TextField edits
+   * captured by the renderer).
+   */
+  async _invokeA2UIAction(actionName, context) {
+    if (!this.photonName || !actionName) return;
+    try {
+      const result = await mcpClient.callTool(`${this.photonName}/${actionName}`, context);
+      const next = mcpClient.parseToolResult(result);
+      this.result = next;
+    } catch (err) {
+      console.error("[a2ui] action failed:", actionName, err);
+    }
+  }
   _renderTable(data) {
     if (!Array.isArray(data) && data && typeof data === "object") {
       const arrayEntries = Object.entries(data).filter(([, v2]) => Array.isArray(v2) && v2.length > 0);
@@ -48404,6 +48551,494 @@ MarketplaceView = __decorateClass([
   t4("marketplace-view")
 ], MarketplaceView);
 
+// src/auto-ui/frontend/components/daemon-panel.ts
+var POLL_INTERVAL_MS = 3e3;
+function formatWhen(ts) {
+  if (!ts) return "-";
+  const delta = ts - Date.now();
+  const abs = Math.abs(delta);
+  const mins = Math.round(abs / 6e4);
+  const hrs = Math.round(mins / 60);
+  if (abs < 6e4) return delta < 0 ? "just now" : "in <1m";
+  if (mins < 90) return delta < 0 ? `${mins}m ago` : `in ${mins}m`;
+  if (hrs < 48) return delta < 0 ? `${hrs}h ago` : `in ${hrs}h`;
+  return new Date(ts).toISOString().replace("T", " ").slice(0, 16);
+}
+function tilde(p5) {
+  if (!p5) return "-";
+  const parts = p5.split("/").filter(Boolean);
+  if (parts.length <= 2) return p5;
+  return "\u2026/" + parts.slice(-2).join("/");
+}
+var DaemonPanel = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this._snap = null;
+    this._error = null;
+    this._loading = false;
+    this._history = null;
+    this._historyLoading = false;
+    this._pollTimer = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this._refresh();
+    this._pollTimer = setInterval(() => void this._refresh(true), POLL_INTERVAL_MS);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._pollTimer) {
+      clearInterval(this._pollTimer);
+      this._pollTimer = null;
+    }
+  }
+  async _refresh(silent = false) {
+    if (!silent) this._loading = true;
+    try {
+      const res = await fetch("/api/daemon/ps", {
+        signal: AbortSignal.timeout(1e4)
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+        this._error = err.error || `HTTP ${res.status}`;
+        return;
+      }
+      this._snap = await res.json();
+      this._error = null;
+    } catch (err) {
+      this._error = err instanceof Error ? err.message : String(err);
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _scheduleAction(action, photon, method) {
+    try {
+      const res = await fetch(`/api/daemon/schedules/${action}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Photon-Request": "1"
+        },
+        body: JSON.stringify({ photon, method }),
+        signal: AbortSignal.timeout(1e4)
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        showToast(body.error || `Action "${action}" failed`, "error");
+        return;
+      }
+      showToast(`${action}d ${photon}:${method}`, "success");
+      await this._refresh(true);
+    } catch (err) {
+      showToast(err instanceof Error ? err.message : String(err), "error");
+    }
+  }
+  async _openHistory(photon, method) {
+    this._history = { photon, method, entries: [] };
+    this._historyLoading = true;
+    try {
+      const res = await fetch(
+        `/api/daemon/history?photon=${encodeURIComponent(photon)}&method=${encodeURIComponent(
+          method
+        )}&limit=50`,
+        { signal: AbortSignal.timeout(1e4) }
+      );
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+        showToast(err.error || `History load failed`, "error");
+        this._history = null;
+        return;
+      }
+      this._history = await res.json();
+    } catch (err) {
+      showToast(err instanceof Error ? err.message : String(err), "error");
+      this._history = null;
+    } finally {
+      this._historyLoading = false;
+    }
+  }
+  _closeHistory() {
+    this._history = null;
+  }
+  _renderActive() {
+    const rows = this._snap?.active ?? [];
+    return b2`
+      <h2>Active schedules (${rows.length})</h2>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>PHOTON_DIR</th>
+              <th>Photon</th>
+              <th>Method</th>
+              <th>Cron</th>
+              <th>Next run</th>
+              <th>Last run</th>
+              <th>Runs</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows.length === 0 ? b2`<tr class="empty">
+                  <td colspan="8">no active schedules</td>
+                </tr>` : rows.map(
+      (r7) => b2`
+                    <tr>
+                      <td>${tilde(r7.workingDir)}</td>
+                      <td>${r7.photon}</td>
+                      <td>${r7.method}</td>
+                      <td><code>${r7.cron}</code></td>
+                      <td>${formatWhen(r7.nextRun)}</td>
+                      <td>${formatWhen(r7.lastRun)}</td>
+                      <td>${r7.runCount}</td>
+                      <td class="actions">
+                        <button @click=${() => this._openHistory(r7.photon, r7.method)}>
+                          History
+                        </button>
+                        <button @click=${() => this._scheduleAction("pause", r7.photon, r7.method)}>
+                          Pause
+                        </button>
+                        <button @click=${() => this._scheduleAction("disable", r7.photon, r7.method)}>
+                          Disable
+                        </button>
+                      </td>
+                    </tr>
+                  `
+    )}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _renderDeclared() {
+    const rows = (this._snap?.declared ?? []).filter((d5) => !d5.active);
+    return b2`
+      <h2>Declared but not enrolled (${rows.length})</h2>
+      <p class="hint">
+        These photons declare <code>@scheduled</code> methods that haven't been enrolled yet.
+      </p>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>PHOTON_DIR</th>
+              <th>Photon</th>
+              <th>Method</th>
+              <th>Cron</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows.length === 0 ? b2`<tr class="empty">
+                  <td colspan="5">no dormant declarations</td>
+                </tr>` : rows.map(
+      (r7) => b2`
+                    <tr>
+                      <td>${tilde(r7.workingDir)}</td>
+                      <td>${r7.photon}</td>
+                      <td>${r7.method}</td>
+                      <td><code>${r7.cron}</code></td>
+                      <td class="actions">
+                        <button @click=${() => this._scheduleAction("enable", r7.photon, r7.method)}>
+                          Enable
+                        </button>
+                      </td>
+                    </tr>
+                  `
+    )}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _renderWebhooks() {
+    const rows = this._snap?.webhooks ?? [];
+    return b2`
+      <h2>Webhooks (${rows.length})</h2>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>PHOTON_DIR</th>
+              <th>Photon</th>
+              <th>Route</th>
+              <th>Method</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows.length === 0 ? b2`<tr class="empty">
+                  <td colspan="4">no webhook routes</td>
+                </tr>` : rows.map(
+      (r7) => b2`
+                    <tr>
+                      <td>${tilde(r7.workingDir)}</td>
+                      <td>${r7.photon}</td>
+                      <td><code>${r7.route}</code></td>
+                      <td>${r7.method}</td>
+                    </tr>
+                  `
+    )}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _renderSessions() {
+    const rows = this._snap?.sessions ?? [];
+    return b2`
+      <h2>Active sessions (${rows.length})</h2>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>PHOTON_DIR</th>
+              <th>Photon</th>
+              <th>Instances</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows.length === 0 ? b2`<tr class="empty">
+                  <td colspan="3">no loaded sessions</td>
+                </tr>` : rows.map(
+      (r7) => b2`
+                    <tr>
+                      <td>${tilde(r7.workingDir)}</td>
+                      <td>${r7.photon}</td>
+                      <td>${r7.instanceCount}</td>
+                    </tr>
+                  `
+    )}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+  _renderHistoryDrawer() {
+    if (!this._history) return "";
+    const { photon, method, entries } = this._history;
+    return b2`
+      <div class="drawer">
+        <div class="drawer-header">
+          <h2>History for ${photon}:${method}</h2>
+          <button @click=${() => this._closeHistory()}>Close</button>
+        </div>
+        ${this._historyLoading ? b2`<p class="hint">Loading…</p>` : entries.length === 0 ? b2`<p class="hint">No firings recorded.</p>` : b2`
+                <div class="table-wrap">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>When</th>
+                        <th>Status</th>
+                        <th>Duration</th>
+                        <th>Detail</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${entries.map(
+      (e8) => b2`
+                          <tr>
+                            <td>${formatWhen(e8.ts)}</td>
+                            <td class="status-${e8.status}">${e8.status.toUpperCase()}</td>
+                            <td>${e8.durationMs}ms</td>
+                            <td>
+                              ${e8.status === "success" ? (e8.outputPreview ?? "").slice(0, 120) : (e8.errorMessage ?? "").slice(0, 120)}
+                            </td>
+                          </tr>
+                        `
+    )}
+                    </tbody>
+                  </table>
+                </div>
+              `}
+      </div>
+    `;
+  }
+  render() {
+    return b2`
+      <h1>Daemon</h1>
+      <p class="hint">
+        Observability for scheduled work, webhook routes, and loaded sessions. Mirrors
+        <code>photon ps</code>.
+      </p>
+
+      <div class="refresh-bar">
+        <button class="refresh" @click=${() => this._refresh()} ?disabled=${this._loading}>
+          ${this._loading ? "Refreshing\u2026" : "Refresh"}
+        </button>
+        <span class="hint">auto-refresh every ${POLL_INTERVAL_MS / 1e3}s</span>
+      </div>
+
+      ${this._error ? b2`<div class="error">${this._error}</div>` : ""} ${this._renderActive()}
+      ${this._renderDeclared()} ${this._renderWebhooks()} ${this._renderSessions()}
+      ${this._renderHistoryDrawer()}
+    `;
+  }
+};
+DaemonPanel.styles = [
+  theme,
+  forms,
+  i`
+      :host {
+        display: block;
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+        margin: 0 0 var(--space-sm) 0;
+      }
+
+      h2 {
+        font-size: 1rem;
+        margin: var(--space-lg) 0 var(--space-xs) 0;
+        color: var(--t-primary);
+      }
+
+      p.hint {
+        color: var(--t-muted);
+        font-size: 0.85rem;
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .refresh-bar {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        margin-bottom: var(--space-md);
+      }
+
+      button.refresh {
+        background: var(--surface-secondary, #222);
+        color: var(--t-primary);
+        border: 1px solid var(--border, #333);
+        padding: 4px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      button.refresh:hover {
+        background: var(--surface-hover, #2a2a2a);
+      }
+
+      .table-wrap {
+        overflow-x: auto;
+        border: 1px solid var(--border, #333);
+        border-radius: 4px;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.85rem;
+      }
+
+      th,
+      td {
+        padding: 6px 10px;
+        text-align: left;
+        border-bottom: 1px solid var(--border, #2a2a2a);
+      }
+
+      th {
+        background: var(--surface-secondary, #1a1a1a);
+        font-weight: 600;
+        color: var(--t-muted);
+      }
+
+      tr.empty td {
+        text-align: center;
+        color: var(--t-muted);
+        padding: var(--space-md);
+      }
+
+      .actions {
+        display: flex;
+        gap: 4px;
+      }
+
+      .actions button {
+        font-size: 0.75rem;
+        padding: 2px 8px;
+        border: 1px solid var(--border, #333);
+        background: transparent;
+        color: var(--t-primary);
+        cursor: pointer;
+        border-radius: 3px;
+      }
+
+      .actions button:hover {
+        background: var(--surface-hover, #2a2a2a);
+      }
+
+      .status-success {
+        color: var(--success, #4ade80);
+      }
+      .status-error {
+        color: var(--danger, #f87171);
+      }
+      .status-timeout {
+        color: var(--warning, #fbbf24);
+      }
+
+      .error {
+        background: var(--danger-bg, #3a1b1b);
+        color: var(--danger, #f87171);
+        padding: var(--space-sm);
+        border-radius: 4px;
+        font-size: 0.85rem;
+        margin-bottom: var(--space-md);
+      }
+
+      .drawer {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: min(520px, 100vw);
+        background: var(--surface-primary, #111);
+        border-left: 1px solid var(--border, #333);
+        padding: var(--space-md);
+        overflow-y: auto;
+        z-index: 9999;
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.4);
+      }
+
+      .drawer-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: var(--space-md);
+      }
+
+      .drawer-header button {
+        background: transparent;
+        border: 1px solid var(--border, #333);
+        color: var(--t-primary);
+        padding: 4px 10px;
+        cursor: pointer;
+        border-radius: 3px;
+      }
+    `
+];
+__decorateClass([
+  r5()
+], DaemonPanel.prototype, "_snap", 2);
+__decorateClass([
+  r5()
+], DaemonPanel.prototype, "_error", 2);
+__decorateClass([
+  r5()
+], DaemonPanel.prototype, "_loading", 2);
+__decorateClass([
+  r5()
+], DaemonPanel.prototype, "_history", 2);
+__decorateClass([
+  r5()
+], DaemonPanel.prototype, "_historyLoading", 2);
+DaemonPanel = __decorateClass([
+  t4("daemon-panel")
+], DaemonPanel);
+
 // src/auto-ui/frontend/styles/beam-tokens.ts
 var beamTypographyTokens = {
   "--font-display": "'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif",
@@ -98447,18 +99082,20 @@ var PhotonConfig = class extends i4 {
     this.mode = "initial";
     this._loading = false;
     this._formData = {};
+    this.embedded = false;
   }
   render() {
     if (!this.photon) return b2``;
     const params = this.photon.requiredParams || [];
     return b2`
-      <div class="config-header">
-        <h2 class="config-title text-gradient">${this.photon.name}</h2>
-        <p class="config-description">
-          ${this.mode === "edit" ? "Edit configuration values. Only changed fields will be updated." : this.photon.errorMessage || "Configure this photon to enable its features"}
-        </p>
-      </div>
-
+      ${!this.embedded ? b2`
+            <div class="config-header">
+              <h2 class="config-title text-gradient">${this.photon.name}</h2>
+              <p class="config-description">
+                ${this.mode === "edit" ? "Edit configuration values. Only changed fields will be updated." : this.photon.errorMessage || "Configure this photon to enable its features"}
+              </p>
+            </div>
+          ` : ""}
       ${this.mode === "initial" && this.photon.errorMessage ? b2` <div class="error-banner">${this.photon.errorMessage}</div> ` : ""}
 
       <div class="config-form" role="presentation">
@@ -98482,18 +99119,25 @@ var PhotonConfig = class extends i4 {
   }
   _renderField(param) {
     const isRequired = !param.isOptional && !param.hasDefault;
-    const isSecret = this._isSecretField(param.name);
+    const isSecret = param.isSecret ?? this._isSecretField(param.name);
     const isBoolean = param.type === "boolean";
     const isNumber2 = param.type === "number";
     const defaultValue = param.hasDefault ? String(param.defaultValue ?? "") : "";
+    const seedValue = param.currentValue ?? defaultValue;
     return b2`
       <div class="form-group">
         <label>
           ${formatLabel(param.name)}${isRequired ? b2`<span class="required">*</span>` : ""}
           <span class="hint">${param.envVar}</span>
+          ${isSecret ? b2`<span class="hint" style="color: var(--accent-secondary);">secret</span>` : ""}
         </label>
 
-        ${isBoolean ? this._renderToggle(param, defaultValue) : isNumber2 ? this._renderNumberInput(param, defaultValue, isRequired) : this._renderTextInput(param, defaultValue, isRequired, isSecret)}
+        ${param.description ? b2`<p
+              style="margin: 0; color: var(--t-muted); font-size: var(--text-xs); line-height: 1.4;"
+            >
+              ${param.description}
+            </p>` : ""}
+        ${isBoolean ? this._renderToggle(param, seedValue) : isNumber2 ? this._renderNumberInput(param, seedValue, isRequired) : this._renderTextInput(param, seedValue, isRequired, isSecret, !!param.currentValue)}
       </div>
     `;
   }
@@ -98530,15 +99174,18 @@ var PhotonConfig = class extends i4 {
       />
     `;
   }
-  _renderTextInput(param, defaultValue, isRequired, isSecret) {
+  _renderTextInput(param, seedValue, isRequired, isSecret, hasCurrentValue) {
+    const masked = isSecret && hasCurrentValue;
+    const placeholder = masked ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022 (configured \u2014 type to replace)" : `Enter ${param.name}...`;
+    const value = masked ? this._formData[param.envVar] ?? "" : this._formData[param.envVar] ?? seedValue;
     return b2`
       <input
         type="text"
         id="photon-${param.envVar}"
         name="${param.envVar}"
         class="${isSecret ? "secret-field" : ""}"
-        .value=${this._formData[param.envVar] ?? defaultValue}
-        placeholder="Enter ${param.name}..."
+        .value=${value}
+        placeholder="${placeholder}"
         @input=${(e8) => this._updateField(param.envVar, e8.target.value)}
       />
     `;
@@ -98775,6 +99422,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], PhotonConfig.prototype, "_formData", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "embedded" })
+], PhotonConfig.prototype, "embedded", 2);
 PhotonConfig = __decorateClass([
   t4("photon-config")
 ], PhotonConfig);