@portel/photon 1.26.1 → 1.28.0

package/dist/beam.bundle.js

@@ -32944,6 +32944,21 @@ function formatLabel(name2) {
   spaced = spaced.replace(/[_-]+/g, " ");
   let result = spaced.split(/\s+/).map((word) => {
     if (!word) return "";
+    const lower = word.toLowerCase();
+    const mixedCase = {
+      oauth: "OAuth",
+      whatsapp: "WhatsApp",
+      github: "GitHub",
+      gitlab: "GitLab",
+      bitbucket: "Bitbucket",
+      macos: "macOS",
+      ios: "iOS",
+      ipad: "iPad",
+      iphone: "iPhone",
+      npm: "npm",
+      npx: "npx"
+    };
+    if (lower in mixedCase) return mixedCase[lower];
     const upper = word.toUpperCase();
     if ([
       "AI",
@@ -32972,7 +32987,32 @@ function formatLabel(name2) {
       "OS",
       "DB",
       "IO",
-      "GIT"
+      "GIT",
+      "CPU",
+      "GPU",
+      "RAM",
+      "RPC",
+      "TCP",
+      "UDP",
+      "DNS",
+      "JWT",
+      "TLS",
+      "SSL",
+      "CDN",
+      "SVG",
+      "PNG",
+      "JPG",
+      "PDF",
+      "YAML",
+      "TOML",
+      "CSV",
+      "TSV",
+      "UUID",
+      "CRUD",
+      "REST",
+      "GRPC",
+      "MIME",
+      "PATH"
     ].includes(upper)) {
       if (upper === "IDS") return "IDs";
       return upper;
@@ -35738,11 +35778,15 @@ var BeamApp = class extends i4 {
           .hasPath=${!!this._selectedPhoton?.path}
           @tab-change=${(e8) => {
       const tab = e8.detail.tab;
+      const prevTab = this._mainTab;
       this._mainTab = tab;
       if (tab === "methods") {
-        this._closeSecondPanel();
-        this._selectedMethod = null;
-        this._view = "list";
+        const fromOverlay = prevTab === "log" || prevTab === "help";
+        if (!fromOverlay) {
+          this._closeSecondPanel();
+          this._selectedMethod = null;
+          this._view = "list";
+        }
         this._updateRoute();
         return;
       }
@@ -35788,9 +35832,13 @@ var BeamApp = class extends i4 {
         this._view = "mcp-app";
       }
       if (tab === "app" && this._selectedPhoton?.isApp && this._selectedPhoton?.appEntry) {
-        this._selectedMethod = this._selectedPhoton.appEntry;
-        this._view = "form";
-        this._maybeAutoInvoke(this._selectedPhoton.appEntry);
+        const appEntry = this._selectedPhoton.appEntry;
+        const alreadyMounted = this._selectedMethod?.name === appEntry.name && this._view === "form" && this._lastResult != null;
+        if (!alreadyMounted) {
+          this._selectedMethod = appEntry;
+          this._view = "form";
+          this._maybeAutoInvoke(appEntry);
+        }
       }
     }}
           @toggle-focus=${() => this._toggleFocusMode()}
@@ -35893,12 +35941,35 @@ var BeamApp = class extends i4 {
           ${this._selectedPhoton && !this._selectedMethod && this._mainTab === "methods" && this._view !== "studio" ? b2`<div class="main-toolbar">
                 <div style="flex: 1; min-width: 0;">${this._renderPhotonToolbar()}</div>
               </div>` : ""}
-          ${this._mainTab === "log" ? b2`<activity-log
-                .items=${this._activityLog}
-                .filter=${this._selectedPhoton?.name}
-                .fullscreen=${true}
-                @clear=${() => this._activityLog = []}
-              ></activity-log>` : this._mainTab === "help" && this._selectedPhoton ? this._renderPhotonHelpView() : this._mainTab === "settings" && this._selectedPhoton ? this._renderSettingsView() : this._mainTab === "methods" && !this._selectedMethod && (this._selectedPhoton?.isApp || this._selectedPhoton?.isExternalMCP && this._selectedPhoton?.hasMcpApp) ? this._renderMethodsBentoOnly() : this._renderContent()}
+          ${(() => {
+      const sel = this._selectedPhoton;
+      if (!sel) return this._renderContent();
+      if (this._mainTab === "settings") {
+        return this._renderSettingsView();
+      }
+      const isOverlay = this._mainTab === "log" || this._mainTab === "help";
+      const isAppPhoton = !!sel.isApp || !!(sel.isExternalMCP && sel.hasMcpApp);
+      const showsAppBento = this._mainTab === "methods" && !this._selectedMethod && isAppPhoton;
+      return b2`
+              <div class="tab-pane" ?hidden=${isOverlay || showsAppBento}>
+                ${this._renderContent()}
+              </div>
+              ${isAppPhoton ? b2`<div class="tab-pane" ?hidden=${!showsAppBento}>
+                    ${this._renderMethodsBentoOnly()}
+                  </div>` : ""}
+              <div class="tab-pane" ?hidden=${this._mainTab !== "log"}>
+                <photon-pulse
+                  .photonName=${sel.name}
+                  .availableMethods=${(sel.methods || []).map((m3) => m3.name)}
+                  .activity=${this._activityLog}
+                  @clear-activity=${() => this._activityLog = []}
+                ></photon-pulse>
+              </div>
+              <div class="tab-pane" ?hidden=${this._mainTab !== "help"}>
+                ${this._renderPhotonHelpView()}
+              </div>
+            `;
+    })()}
         </div>
       </main>
 
@@ -37531,6 +37602,21 @@ ${photon.errorMessage || "Unknown error"}</pre
                           ↓ Export
                         </button>
                         <button @click=${() => this._handleShareResult()}>Share</button>
+                        <button
+                          @click=${() => {
+      const rv2 = this.shadowRoot?.querySelector("result-viewer");
+      const el2 = rv2?.shadowRoot?.querySelector(".container") || rv2;
+      if (!el2) return;
+      if (document.fullscreenElement) {
+        void document.exitFullscreen?.();
+      } else {
+        void el2.requestFullscreen?.();
+      }
+    }}
+                          title="Toggle fullscreen"
+                        >
+                          ⛶ Fullscreen
+                        </button>
                       </div>
                     </div>` : ""}
                 ${this._canvasActive ? b2`<canvas-renderer
@@ -38538,10 +38624,16 @@ ${photon.errorMessage || "Unknown error"}</pre
           lines.push(method.description);
           lines.push("");
         }
-        if (method.params && method.params.length > 0) {
+        const paramList = Array.isArray(method.params) ? method.params : method.params && typeof method.params === "object" && method.params.properties ? Object.entries(method.params.properties).map(([n5, prop]) => ({
+          name: n5,
+          type: prop?.type,
+          description: prop?.description,
+          required: Array.isArray(method.params.required) ? method.params.required.includes(n5) : false
+        })) : [];
+        if (paramList.length > 0) {
           lines.push("| Name | Type | Required | Description |");
           lines.push("|------|------|----------|-------------|");
-          for (const param of method.params) {
+          for (const param of paramList) {
             const required2 = param.required ? "\u2713" : "";
             const desc = param.description || "-";
             lines.push(`| \`${param.name}\` | ${param.type || "any"} | ${required2} | ${desc} |`);
@@ -38549,7 +38641,7 @@ ${photon.errorMessage || "Unknown error"}</pre
           lines.push("");
         }
         if (!photon.internal) {
-          const paramHints = (method.params || []).filter((p5) => p5.required).map((p5) => `--${p5.name} <${p5.type || "value"}>`).join(" ");
+          const paramHints = paramList.filter((p5) => p5.required).map((p5) => `--${p5.name} <${p5.type || "value"}>`).join(" ");
           const cliPfx = window.__PHOTON_SHELL_INIT ? name2 : `photon cli ${name2}`;
           lines.push(`CLI: \`${cliPfx} ${method.name}${paramHints ? " " + paramHints : ""}\``);
           lines.push("");
@@ -39324,7 +39416,7 @@ ${photon.errorMessage || "Unknown error"}</pre
           <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
+            ${formatLabel(photon.name)} Settings
           </h2>
           <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."}
@@ -40082,6 +40174,21 @@ BeamApp.styles = [
         flex-direction: column;
       }
 
+      /* Tab panes — siblings inside .main-content-scroll. The active pane
+         is visible; non-active siblings stay mounted (DOM + component
+         state) but are hidden via display: none, so an iframe survives a
+         quick Pulse/Help peek and a half-typed form is still there when
+         you return. */
+      .tab-pane {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      }
+      .tab-pane[hidden] {
+        display: none !important;
+      }
+
       /* Page transition when switching photons */
       @keyframes page-enter {
         from {
@@ -42083,7 +42190,7 @@ var BeamSidebar = class extends i4 {
               @click=${() => this.dispatchEvent(new CustomEvent("home", { bubbles: true, composed: true }))}
               title="Go home"
             >
-              Photon Beam
+              <span class="logo-prefix">Photon </span>Beam
               <span
                 class="status-indicator ${this.connected ? "connected" : this.reconnecting ? "reconnecting" : "disconnected"}"
                 title="${this.connected ? "Connected" : this.reconnecting ? "Reconnecting..." : "Disconnected"}"
@@ -42136,25 +42243,32 @@ var BeamSidebar = class extends i4 {
               @click=${() => this._toggleFavoritesFilter()}
               title="Show favorites only (f)"
               aria-pressed="${this._showFavoritesOnly}"
-              aria-label="Filter by favorites"
+              aria-label="Filter by favorites${this._favorites.size > 0 ? ` (${this._favorites.size})` : ""}"
             >
-              ${starFilled} Favorites ${this._favorites.size > 0 ? `(${this._favorites.size})` : ""}
+              <span class="filter-icon-wrap">
+                ${starFilled}
+                ${this._favorites.size > 0 ? b2`<span class="filter-count-in-star" aria-hidden="true"
+                      >${this._favorites.size}</span
+                    >` : ""}
+              </span>
+              <span class="filter-btn-label">Favorites</span>
             </button>
             <button
               class="filter-btn"
               @click=${() => this.dispatchEvent(new CustomEvent("marketplace"))}
               aria-label="Open marketplace"
+              title="Marketplace"
             >
-              ${marketplace} Marketplace
+              ${marketplace}<span class="filter-btn-label">Marketplace</span>
               ${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"
+              aria-label="Open Pulse panel"
+              title="Pulse: scheduled jobs, webhooks, and sessions"
             >
-              ${activity} Daemon
+              ${activity}<span class="filter-btn-label">Pulse</span>
             </button>
           </div>
         </div>
@@ -42507,7 +42621,7 @@ ${photon.path}` : ""}"
     const tabs = [
       ...this.isApp ? [{ id: "app", label: "App", icon: appTabIcon }] : [],
       { id: "methods", label: "Methods", icon: methodsTabIcon },
-      { id: "log", label: "Activity", icon: activity },
+      { id: "log", label: "Pulse", icon: activity },
       ...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 }
@@ -42706,6 +42820,8 @@ BeamSidebar.styles = [
         height: 100%;
         color: var(--t-primary);
         overflow: visible;
+        container-type: inline-size;
+        container-name: sidebar;
       }
 
       .sidebar-content {
@@ -42829,6 +42945,8 @@ BeamSidebar.styles = [
         cursor: pointer;
         user-select: none;
         transition: opacity 0.15s;
+        white-space: nowrap;
+        min-width: 0;
       }
 
       .logo:hover {
@@ -43025,7 +43143,10 @@ BeamSidebar.styles = [
       }
 
       .photon-item {
-        padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
+        /* Right padding intentionally tight (4px) — the counts pill is the
+           visual end of the row. Anything more reads as wasted space and
+           steals room from the photon name. */
+        padding: var(--space-sm) 4px var(--space-sm) var(--space-md);
         margin-bottom: var(--space-xs);
         border-radius: var(--radius-sm);
         cursor: pointer;
@@ -43413,10 +43534,12 @@ BeamSidebar.styles = [
         display: flex;
         gap: var(--space-sm);
         margin-top: var(--space-sm);
+        min-width: 0;
       }
 
       .filter-btn {
-        flex: 1;
+        flex: 1 1 0;
+        min-width: 0;
         padding: var(--space-xs) var(--space-sm);
         background: var(--bg-glass);
         border: 1px solid var(--border-glass);
@@ -43428,9 +43551,16 @@ BeamSidebar.styles = [
         justify-content: center;
         gap: 4px;
         font-size: var(--text-sm);
+        white-space: nowrap;
+        overflow: hidden;
         transition: all 0.2s;
       }
 
+      .filter-btn-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       .filter-btn:hover {
         background: var(--bg-glass-strong);
       }
@@ -43441,6 +43571,77 @@ BeamSidebar.styles = [
         color: white;
       }
 
+      /* Favorites count is rendered centered inside the star itself —
+         no separate badge, no horizontal space stolen from the label. */
+      .filter-icon-wrap {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        color: var(--color-warning, #f59e0b);
+      }
+
+      .filter-icon-wrap svg {
+        width: 22px;
+        height: 22px;
+      }
+
+      .filter-count-in-star {
+        position: absolute;
+        top: 56%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 10px;
+        font-weight: 800;
+        line-height: 1;
+        color: var(--bg-elevated, #0b1018);
+        font-variant-numeric: tabular-nums;
+        letter-spacing: -0.04em;
+        pointer-events: none;
+      }
+
+      .filter-btn.active .filter-icon-wrap {
+        color: white;
+      }
+      .filter-btn.active .filter-count-in-star {
+        color: var(--accent-primary);
+      }
+
+      /* Responsive narrow mode: shrink the title to "Beam" and switch
+         the three filter buttons to icon-only when the sidebar itself
+         (not the viewport) is narrow. Container query watches :host's
+         inline-size, so it fires whenever the user drags the sidebar
+         below the threshold regardless of window width. */
+      @container sidebar (max-width: 280px) {
+        .logo-prefix {
+          display: none;
+        }
+        .filter-btn {
+          position: relative;
+          padding: var(--space-xs);
+          gap: 0;
+        }
+        .filter-btn .filter-btn-label {
+          display: none;
+        }
+        .filter-btn .update-badge {
+          position: absolute;
+          top: 2px;
+          right: 4px;
+          min-width: 14px;
+          height: 14px;
+          padding: 0 4px;
+          font-size: 9px;
+          line-height: 1;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          border: 1.5px solid var(--bg-elevated, #0b1018);
+          border-radius: 999px;
+        }
+      }
+
       .settings-btn {
         background: none;
         border: none;
@@ -43778,7 +43979,7 @@ var MethodCard = class extends i4 {
   _renderParamSignature() {
     if (this.method.isTemplate) return "";
     const props = this.method.params?.properties || {};
-    const paramNames = Object.keys(props);
+    const paramNames = Object.keys(props).map((p5) => formatLabel(p5));
     if (paramNames.length === 0) return "";
     if (paramNames.length <= 4) {
       return b2`<span class="method-params method-params-trunc">(${paramNames.join(", ")}</span
@@ -46541,7 +46742,7 @@ var ActivityLog = class extends i4 {
   }
   render() {
     const visible = this._filterActive && this.filter ? this.items.filter((i7) => i7.photonName === this.filter) : this.items;
-    if (this.items.length === 0) return b2``;
+    if (this.items.length === 0 && !this.fullscreen) return b2``;
     const hasFilterableEntries = this.filter && this.items.some((i7) => i7.photonName === this.filter);
     const typeIcon = (type) => {
       switch (type) {
@@ -46579,22 +46780,24 @@ var ActivityLog = class extends i4 {
         </div>
       </div>
 
-      ${this._collapsed ? "" : b2`
-            <ul class="log-list" role="log" aria-live="polite" aria-label="Activity log entries">
-              ${visible.map(
+      ${this._collapsed ? "" : visible.length === 0 ? b2`<div class="empty-hint" role="status">
+              ${this.items.length === 0 ? this.filter ? `No activity yet for ${this.filter}. Method calls and tool fires will appear here in real time.` : "No activity yet. Method calls and tool fires will appear here in real time." : `No activity yet for ${this.filter}. Toggle the filter off to see all photons.`}
+            </div>` : b2`
+              <ul class="log-list" role="log" aria-live="polite" aria-label="Activity log entries">
+                ${visible.map(
       (item) => b2`
-                  <li class="log-item type-${item.type}">
-                    <span class="type-icon" aria-hidden="true">${typeIcon(item.type)}</span>
-                    <span class="meta">${new Date(item.timestamp).toLocaleTimeString()}</span>
-                    <span class="content"
-                      ><span class="visually-hidden">${item.type}: </span
-                      >${item.message}${item.durationMs != null ? b2`<span class="duration">${item.durationMs}ms</span>` : ""}${item.count && item.count > 1 ? b2`<span class="count">(×${item.count})</span>` : ""}</span
-                    >
-                  </li>
-                `
+                    <li class="log-item type-${item.type}">
+                      <span class="type-icon" aria-hidden="true">${typeIcon(item.type)}</span>
+                      <span class="meta">${new Date(item.timestamp).toLocaleTimeString()}</span>
+                      <span class="content"
+                        ><span class="visually-hidden">${item.type}: </span
+                        >${item.message}${item.durationMs != null ? b2`<span class="duration">${item.durationMs}ms</span>` : ""}${item.count && item.count > 1 ? b2`<span class="count">(×${item.count})</span>` : ""}</span
+                      >
+                    </li>
+                  `
     )}
-            </ul>
-          `}
+              </ul>
+            `}
     `;
   }
   _clear() {
@@ -46814,6 +47017,24 @@ ActivityLog.styles = [
         transform: rotate(-90deg);
       }
 
+      .empty-hint {
+        color: var(--t-muted);
+        font-size: var(--text-sm);
+        padding: var(--space-lg) var(--space-md);
+        text-align: center;
+        border: 1px dashed var(--border-glass);
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--bg-glass) 50%, transparent);
+      }
+
+      :host([fullscreen]) .empty-hint {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 120px;
+      }
+
       /* ===== Responsive Design ===== */
       @media (max-width: 768px) {
         .log-item {
@@ -52288,7 +52509,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     return this._columnPipes;
   }
   _applyPipe(value, pipe2, arg) {
-    if (value === null || value === void 0) return "\u2014";
+    if (value === null || value === void 0) return "\xB7";
     switch (pipe2) {
       case "currency":
         return typeof value === "number" ? value.toLocaleString(void 0, { style: "currency", currency: arg || "USD" }) : String(value);
@@ -52323,9 +52544,9 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     }
   }
   _formatCellValue(value, key, highlight = false) {
-    if (value === null || value === void 0) return "\u2014";
+    if (value === null || value === void 0) return "\xB7";
     if (value === "" || typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0)
-      return "\u2014";
+      return "\xB7";
     if (typeof value === "boolean") return value ? "\u2713" : "\u2717";
     const pipes = this._getColumnPipes();
     if (pipes.size > 0) {
@@ -52372,7 +52593,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       >`;
     }
     if (Array.isArray(value)) {
-      if (value.length === 0) return "\u2014";
+      if (value.length === 0) return "\xB7";
       if (value.every((v2) => typeof v2 !== "object" || v2 === null)) {
         return b2`<span style="display:flex;flex-wrap:wrap;gap:3px;"
           >${value.map(
@@ -54026,9 +54247,7 @@ ResultViewer.styles = [
         width: 140px;
         font-weight: 600;
         color: var(--t-muted);
-        text-transform: uppercase;
         font-size: var(--text-xs);
-        letter-spacing: 0.05em;
       }
 
       /* List Styles */
@@ -57355,7 +57574,7 @@ var MarketplaceView = class extends i4 {
           All
           <span class="count">${this._allItems.length}</span>
         </button>
-        ${this._sources.filter((s5) => s5.enabled).map(
+        ${this._sources.filter((s5) => s5.enabled && !s5.name.endsWith(".photon.ts")).map(
       (source3) => b2`
               <button
                 class="filter-pill ${this._activeFilter === source3.name ? "active" : ""}"
@@ -58945,6 +59164,70 @@ function tilde(p5) {
   if (parts.length <= 2) return p5;
   return "\u2026/" + parts.slice(-2).join("/");
 }
+function isImminent(ts) {
+  if (!ts) return false;
+  const delta = ts - Date.now();
+  return delta >= 0 && delta < 6e4;
+}
+function groupByLocation(rows) {
+  const map4 = /* @__PURE__ */ new Map();
+  for (const r7 of rows) {
+    const key = r7.workingDir ?? "";
+    const list = map4.get(key);
+    if (list) list.push(r7);
+    else map4.set(key, [r7]);
+  }
+  return [...map4.entries()].sort(([a5], [b3]) => a5.localeCompare(b3));
+}
+var WEEKDAY_NAMES = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
+];
+function formatHour(h5) {
+  return h5 === 0 ? "12am" : h5 < 12 ? `${h5}am` : h5 === 12 ? "12pm" : `${h5 - 12}pm`;
+}
+function describeWeekdays(spec) {
+  if (spec === "*") return "every day";
+  if (spec === "1-5") return "weekdays";
+  if (spec === "0,6" || spec === "6,0") return "weekends";
+  if (/^\d$/.test(spec)) {
+    const n5 = parseInt(spec, 10);
+    if (n5 >= 0 && n5 <= 6) return WEEKDAY_NAMES[n5];
+  }
+  return null;
+}
+function humanizeCron(cron) {
+  const trimmed = cron.trim();
+  if (trimmed === "* * * * *") return "Every minute";
+  if (trimmed === "0 * * * *") return "Hourly";
+  if (trimmed === "0 0 * * *") return "Daily at midnight";
+  if (trimmed === "0 12 * * *") return "Daily at noon";
+  if (trimmed === "0 0 1 * *") return "Monthly";
+  let m3 = trimmed.match(/^(?:\*|0)\/(\d+) \* \* \* \*$/);
+  if (m3) return `Every ${m3[1]} minutes`;
+  m3 = trimmed.match(/^0 (?:\*|0)\/(\d+) \* \* \*$/);
+  if (m3) return `Every ${m3[1]} hours`;
+  m3 = trimmed.match(/^0 (\d{1,2}) \* \* \*$/);
+  if (m3) {
+    const h5 = parseInt(m3[1], 10);
+    if (h5 >= 0 && h5 <= 23) return `Daily at ${formatHour(h5)}`;
+  }
+  m3 = trimmed.match(/^0 (\d{1,2}) \* \* ([0-9,-]+)$/);
+  if (m3) {
+    const h5 = parseInt(m3[1], 10);
+    const dayLabel = describeWeekdays(m3[2]);
+    if (h5 >= 0 && h5 <= 23 && dayLabel) {
+      const cap = dayLabel[0].toUpperCase() + dayLabel.slice(1);
+      return `${cap} at ${formatHour(h5)}`;
+    }
+  }
+  return trimmed;
+}
 var DaemonPanel = class extends i4 {
   constructor() {
     super(...arguments);
@@ -59035,157 +59318,267 @@ var DaemonPanel = class extends i4 {
   _closeHistory() {
     this._history = null;
   }
+  _sectionHead(title, count, sub) {
+    return b2`
+      <div class="section-head">
+        <h2 class="section-title">
+          ${title} ${count > 0 ? b2`<span class="section-count">· ${count}</span>` : ""}
+        </h2>
+        ${sub ? b2`<span class="section-sub">${sub}</span>` : ""}
+      </div>
+    `;
+  }
+  _entity(photon, method, dormant = false) {
+    return b2`
+      <span class="entity-row">
+        <span class="status-dot ${dormant ? "dormant" : ""}"></span>
+        <span class="entity"
+          ><span class="photon-part">${photon}</span><span class="sep">.</span
+          ><span class="method-part">${method}</span></span
+        >
+      </span>
+    `;
+  }
+  _timingLine(cron, nextRun, lastRun) {
+    const imminent = isImminent(nextRun);
+    return b2`
+      <span class="schedule" title="${cron}">${humanizeCron(cron)}</span>
+      ${nextRun ? b2`<span class="timing-sep">·</span>
+            <span class="${imminent ? "imminent" : ""}">next ${formatWhen(nextRun)}</span>` : ""}
+      ${lastRun ? b2`<span class="timing-sep">·</span> <span>last ${formatWhen(lastRun)}</span>` : ""}
+    `;
+  }
+  _groupHeader(loc, count, label) {
+    return b2`
+      <tr class="group-header">
+        <td colspan="4">
+          <span class="location-path" title="${loc || "(no working dir)"}">${tilde(loc)}</span>
+          <span class="location-meta">${count} ${count === 1 ? label : label + "s"}</span>
+        </td>
+      </tr>
+    `;
+  }
+  _iconBtn(opts) {
+    const cls = opts.variant ? `icon-btn ${opts.variant}` : "icon-btn";
+    return b2`
+      <button
+        class="${cls}"
+        title="${opts.title}"
+        aria-label="${opts.title}"
+        @click=${opts.onClick}
+      >
+        ${opts.icon === "history" ? b2`<svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
+              <path d="M3 3v5h5" />
+              <path d="M12 7v5l3 2" />
+            </svg>` : opts.icon === "pause" ? b2`<svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <rect x="6" y="4" width="4" height="16" />
+                <rect x="14" y="4" width="4" height="16" />
+              </svg>` : opts.icon === "disable" ? b2`<svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
+                  <line x1="12" y1="2" x2="12" y2="12" />
+                </svg>` : b2`<svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <polygon points="6 3 20 12 6 21" />
+                </svg>`}
+      </button>
+    `;
+  }
+  _renderLoaded() {
+    const rows = this._snap?.sessions ?? [];
+    if (rows.length === 0) return "";
+    const sorted = [...rows].sort((a5, b3) => a5.photon.localeCompare(b3.photon));
+    const totalConn = sorted.reduce((acc, r7) => acc + r7.instanceCount, 0);
+    const sub = `${totalConn} ${totalConn === 1 ? "connection" : "connections"}`;
+    return b2`
+      <section class="card">
+        ${this._sectionHead("Loaded photons", rows.length, sub)}
+        <div class="chip-strip">
+          ${sorted.map(
+      (r7) => b2`
+              <span
+                class="chip ${r7.instanceCount === 0 ? "idle" : ""}"
+                title="${r7.workingDir ?? ""}"
+              >
+                <span class="chip-dot"></span>
+                <span>${r7.photon}</span>
+                ${r7.instanceCount > 0 ? b2`<span class="conn-badge">${r7.instanceCount}</span>` : ""}
+              </span>
+            `
+    )}
+        </div>
+      </section>
+    `;
+  }
   _renderActive() {
     const rows = this._snap?.active ?? [];
+    const groups = groupByLocation(rows);
+    for (const [, list] of groups) {
+      list.sort((a5, b3) => (a5.nextRun ?? Infinity) - (b3.nextRun ?? Infinity));
+    }
     return b2`
-      <h2>Active schedules (${rows.length})</h2>
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>Location</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>${formatLabel(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>
+      <section class="card">
+        ${this._sectionHead("Schedules", rows.length)}
+        ${rows.length === 0 ? b2`<p class="empty-line">No active schedules.</p>` : b2`<div class="table-wrap">
+              <table class="grouped">
+                ${groups.map(
+      ([loc, items]) => b2`
+                    <tbody>
+                      ${this._groupHeader(loc, items.length, "schedule")}
+                      ${items.map(
+        (r7) => b2`
+                          <tr>
+                            <td class="entity-cell">${this._entity(r7.photon, r7.method)}</td>
+                            <td class="timing">
+                              ${this._timingLine(r7.cron, r7.nextRun, r7.lastRun)}
+                            </td>
+                            <td class="runs">
+                              ${r7.runCount.toLocaleString()}<span class="runs-label"
+                                >${r7.runCount === 1 ? "run" : "runs"}</span
+                              >
+                            </td>
+                            <td class="actions">
+                              <span class="icon-bar">
+                                ${this._iconBtn({
+          icon: "history",
+          title: "History",
+          onClick: () => this._openHistory(r7.photon, r7.method)
+        })}
+                                ${this._iconBtn({
+          icon: "pause",
+          title: "Pause",
+          onClick: () => this._scheduleAction("pause", r7.photon, r7.method)
+        })}
+                                ${this._iconBtn({
+          icon: "disable",
+          title: "Disable",
+          onClick: () => this._scheduleAction("disable", r7.photon, r7.method),
+          variant: "danger"
+        })}
+                              </span>
+                            </td>
+                          </tr>
+                        `
+      )}
+                    </tbody>
                   `
     )}
-          </tbody>
-        </table>
-      </div>
+              </table>
+            </div>`}
+      </section>
     `;
   }
   _renderDeclared() {
     const rows = (this._snap?.declared ?? []).filter((d5) => !d5.active);
+    if (rows.length === 0) return "";
+    const groups = groupByLocation(rows);
     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>Location</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>${formatLabel(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>
-                  `
+      <section class="card">
+        ${this._sectionHead("Pending", rows.length)}
+        <p class="section-hint"><code>@scheduled</code> methods discovered but not yet enrolled.</p>
+        <div class="table-wrap">
+          <table class="grouped">
+            ${groups.map(
+      ([loc, items]) => b2`
+                <tbody>
+                  ${this._groupHeader(loc, items.length, "pending")}
+                  ${items.map(
+        (r7) => b2`
+                      <tr>
+                        <td class="entity-cell">${this._entity(r7.photon, r7.method, true)}</td>
+                        <td class="timing">
+                          <span class="schedule" title="${r7.cron}">${humanizeCron(r7.cron)}</span>
+                        </td>
+                        <td></td>
+                        <td class="actions">
+                          <span class="icon-bar">
+                            ${this._iconBtn({
+          icon: "play",
+          title: "Enable",
+          onClick: () => this._scheduleAction("enable", r7.photon, r7.method),
+          variant: "primary"
+        })}
+                          </span>
+                        </td>
+                      </tr>
+                    `
+      )}
+                </tbody>
+              `
     )}
-          </tbody>
-        </table>
-      </div>
+          </table>
+        </div>
+      </section>
     `;
   }
   _renderWebhooks() {
     const rows = this._snap?.webhooks ?? [];
+    if (rows.length === 0) return "";
+    const groups = groupByLocation(rows);
     return b2`
-      <h2>Webhooks (${rows.length})</h2>
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>Location</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>${formatLabel(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>Location</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>
-                  `
+      <section class="card">
+        ${this._sectionHead("Webhooks", rows.length)}
+        <div class="table-wrap">
+          <table class="grouped">
+            ${groups.map(
+      ([loc, items]) => b2`
+                <tbody>
+                  ${this._groupHeader(loc, items.length, "route")}
+                  ${items.map((r7) => {
+        const m3 = r7.route.match(/^([A-Z]+)\s+(.+)$/);
+        const verb = m3?.[1] ?? "";
+        const path = m3?.[2] ?? r7.route;
+        return b2`
+                      <tr>
+                        <td>
+                          <span class="route-cell">
+                            <span class="route-photon">${r7.photon}</span>
+                            ${verb ? b2`<span class="route-verb">${verb}</span>` : ""}
+                            <span class="route-path">${path}</span>
+                            <span class="route-arrow">→</span>
+                            <span class="route-handler">${r7.method}</span>
+                          </span>
+                        </td>
+                      </tr>
+                    `;
+      })}
+                </tbody>
+              `
     )}
-          </tbody>
-        </table>
-      </div>
+          </table>
+        </div>
+      </section>
     `;
   }
   _renderHistoryDrawer() {
@@ -59230,21 +59623,19 @@ var DaemonPanel = class extends i4 {
   }
   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">
+      <div class="pulse-header">
+        <h1>Pulse</h1>
         <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>
+      <p class="hint">
+        Heartbeat of the daemon: loaded photons, schedules, and webhooks. Mirrors
+        <code>photon ps</code>. Auto-refresh every ${POLL_INTERVAL_MS / 1e3}s.
+      </p>
 
-      ${this._error ? b2`<div class="error">${this._error}</div>` : ""} ${this._renderActive()}
-      ${this._renderDeclared()} ${this._renderWebhooks()} ${this._renderSessions()}
+      ${this._error ? b2`<div class="error">${this._error}</div>` : ""} ${this._renderLoaded()}
+      ${this._renderActive()} ${this._renderWebhooks()} ${this._renderDeclared()}
       ${this._renderHistoryDrawer()}
     `;
   }
@@ -59259,139 +59650,423 @@ DaemonPanel.styles = [
         overflow-y: auto;
       }
 
+      .pulse-header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--space-md);
+        margin-bottom: var(--space-xs);
+      }
+
       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);
+        margin: 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);
+        margin: 0 0 var(--space-lg) 0;
       }
 
       button.refresh {
-        background: var(--surface-secondary, #222);
+        background: var(--bg-glass);
         color: var(--t-primary);
-        border: 1px solid var(--border, #333);
+        border: 1px solid var(--border-glass);
         padding: 4px 12px;
-        border-radius: 4px;
+        border-radius: var(--radius-sm);
         cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.15s ease;
       }
       button.refresh:hover {
-        background: var(--surface-hover, #2a2a2a);
+        background: var(--bg-glass-strong);
+        border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-glass));
+      }
+      button.refresh:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      /* Section card */
+      section.card {
+        background: color-mix(in srgb, var(--bg-glass) 60%, transparent);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-md);
+        padding: var(--space-md);
+        margin-bottom: var(--space-md);
+      }
+
+      .section-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--space-md);
+        margin-bottom: var(--space-sm);
+      }
+
+      .section-title {
+        margin: 0;
+        font-family: 'Azeret Mono', var(--font-mono);
+        font-size: 0.72rem;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        color: var(--t-primary);
+        font-weight: 600;
+        display: flex;
+        align-items: baseline;
+        gap: var(--space-xs);
+      }
+
+      .section-count {
+        color: var(--t-muted);
+        font-size: 0.7rem;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+      }
+
+      .section-sub {
+        color: var(--t-muted);
+        font-size: 0.7rem;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+      }
+
+      .section-hint {
+        color: var(--t-muted);
+        font-size: 0.78rem;
+        margin: 0 0 var(--space-sm) 0;
+      }
+
+      .empty-line {
+        color: var(--t-muted);
+        font-size: 0.85rem;
+        font-style: italic;
+        margin: var(--space-xs) 0 0 0;
       }
 
+      /* Tables */
       .table-wrap {
         overflow-x: auto;
-        border: 1px solid var(--border, #333);
-        border-radius: 4px;
       }
 
-      table {
+      table.grouped {
         width: 100%;
-        border-collapse: collapse;
+        border-collapse: separate;
+        border-spacing: 0;
+      }
+
+      table.grouped td {
+        padding: 6px 8px;
+        border-bottom: 1px solid color-mix(in srgb, var(--border-glass) 50%, transparent);
+        vertical-align: middle;
         font-size: 0.85rem;
       }
 
-      th,
-      td {
-        padding: 6px 10px;
-        text-align: left;
-        border-bottom: 1px solid var(--border, #2a2a2a);
+      table.grouped tbody:last-child tr:last-child td {
+        border-bottom: none;
       }
 
-      th {
-        background: var(--surface-secondary, #1a1a1a);
+      table.grouped tbody tr:not(.group-header):hover td {
+        background: color-mix(in srgb, var(--bg-glass) 60%, transparent);
+      }
+
+      /* Group header row (location) — separated by spacing + thin top rule */
+      tr.group-header td {
+        padding: var(--space-xl) 8px var(--space-xs) 8px;
+        background: transparent;
+        border-bottom: none;
+        border-top: 1px solid var(--border-glass);
+      }
+      table.grouped tbody:first-child tr.group-header td {
+        padding-top: var(--space-2xs);
+        border-top: none;
+      }
+      .location-path {
+        font-family: 'Azeret Mono', var(--font-mono);
+        font-size: 0.72rem;
+        color: var(--t-primary);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
         font-weight: 600;
+      }
+      .location-meta {
         color: var(--t-muted);
+        font-size: 0.7rem;
+        margin-left: var(--space-sm);
+        opacity: 0.7;
+        text-transform: lowercase;
+        font-weight: 400;
+        letter-spacing: 0.02em;
       }
 
-      tr.empty td {
-        text-align: center;
+      /* Entity cell — status dot + photon.method */
+      td.entity-cell {
+        white-space: nowrap;
+        width: 1%;
+      }
+      .entity-row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+      .status-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: var(--color-success);
+        box-shadow: 0 0 5px color-mix(in srgb, var(--color-success) 50%, transparent);
+        flex-shrink: 0;
+      }
+      .status-dot.dormant {
+        background: var(--t-muted);
+        box-shadow: none;
+        opacity: 0.45;
+      }
+      .entity {
+        font-family: 'Azeret Mono', var(--font-mono);
+        font-size: 0.85rem;
+        white-space: nowrap;
+      }
+      .entity .photon-part {
         color: var(--t-muted);
-        padding: var(--space-md);
+      }
+      .entity .sep {
+        color: var(--t-muted);
+      }
+      .entity .method-part {
+        color: var(--t-primary);
+        font-weight: 600;
       }
 
-      .actions {
-        display: flex;
-        gap: 4px;
+      /* Timing line */
+      td.timing {
+        color: var(--t-muted);
+        font-size: 0.8rem;
+        font-variant-numeric: tabular-nums;
+      }
+      .timing .schedule {
+        color: var(--t-primary);
+      }
+      .timing .timing-sep {
+        margin: 0 var(--space-xs);
+        opacity: 0.4;
+      }
+      .timing .imminent {
+        color: var(--accent-primary);
       }
 
-      .actions button {
-        font-size: 0.75rem;
-        padding: 2px 8px;
-        border: 1px solid var(--border, #333);
-        background: transparent;
+      /* Runs */
+      td.runs {
+        text-align: right;
+        font-variant-numeric: tabular-nums;
         color: var(--t-primary);
-        cursor: pointer;
-        border-radius: 3px;
+        font-size: 0.82rem;
+        white-space: nowrap;
+        width: 1%;
+      }
+      .runs-label {
+        color: var(--t-muted);
+        margin-left: 4px;
+        font-size: 0.72rem;
+      }
+
+      /* Webhook route cell */
+      .route-cell {
+        font-family: 'Azeret Mono', var(--font-mono);
+        font-size: 0.83rem;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+        white-space: nowrap;
+      }
+      .route-photon {
+        color: var(--t-muted);
+      }
+      .route-verb {
+        color: var(--accent-secondary);
+        font-weight: 600;
+        font-size: 0.7rem;
+        padding: 1px 5px;
+        border-radius: var(--radius-xs);
+        background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
+        letter-spacing: 0.04em;
+      }
+      .route-path {
+        color: var(--t-primary);
+      }
+      .route-arrow {
+        color: var(--t-muted);
+        opacity: 0.5;
+        margin: 0 4px;
+      }
+      .route-handler {
+        color: var(--t-primary);
+        font-weight: 600;
       }
 
-      .actions button:hover {
-        background: var(--surface-hover, #2a2a2a);
+      /* Action icons */
+      td.actions {
+        text-align: right;
+        white-space: nowrap;
+        width: 1%;
+      }
+      .icon-bar {
+        display: inline-flex;
+        gap: 2px;
+        justify-content: flex-end;
+        opacity: 0.65;
+        transition: opacity 0.15s ease;
+      }
+      tr:hover .icon-bar,
+      .icon-bar:focus-within {
+        opacity: 1;
+      }
+      .icon-btn svg {
+        width: 14px;
+        height: 14px;
+      }
+      .icon-btn {
+        width: 26px;
+        height: 26px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--t-muted);
+        border-radius: var(--radius-xs);
+        cursor: pointer;
+        padding: 0;
+        transition: all 0.15s ease;
+      }
+      .icon-btn:hover {
+        background: var(--bg-glass-strong);
+        color: var(--t-primary);
+        border-color: var(--border-glass);
+      }
+      .icon-btn.danger:hover {
+        color: var(--color-error);
+      }
+      .icon-btn.primary {
+        background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+        color: var(--accent-primary);
+        border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-glass));
+      }
+      .icon-btn.primary:hover {
+        background: color-mix(in srgb, var(--accent-primary) 24%, transparent);
+      }
+      /* Loaded photons chip strip */
+      .chip-strip {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-xs);
+      }
+      .chip {
+        font-family: 'Azeret Mono', var(--font-mono);
+        font-size: 0.78rem;
+        background: color-mix(in srgb, var(--bg-glass) 70%, transparent);
+        color: var(--t-primary);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-full);
+        padding: 3px 10px 3px 8px;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .chip.idle {
+        color: var(--t-muted);
+      }
+      .chip-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--color-success);
+        box-shadow: 0 0 4px color-mix(in srgb, var(--color-success) 40%, transparent);
+      }
+      .chip.idle .chip-dot {
+        background: var(--t-muted);
+        opacity: 0.4;
+        box-shadow: none;
+      }
+      .conn-badge {
+        background: var(--accent-primary);
+        color: var(--bg-app);
+        font-weight: 700;
+        font-size: 0.66rem;
+        padding: 1px 7px;
+        border-radius: var(--radius-full);
+        letter-spacing: 0.02em;
       }
 
+      /* Status colors (history drawer) */
       .status-success {
-        color: var(--success, #4ade80);
+        color: var(--color-success);
       }
       .status-error {
-        color: var(--danger, #f87171);
+        color: var(--color-error);
       }
       .status-timeout {
-        color: var(--warning, #fbbf24);
+        color: var(--color-warning);
       }
 
       .error {
-        background: var(--danger-bg, #3a1b1b);
-        color: var(--danger, #f87171);
-        padding: var(--space-sm);
-        border-radius: 4px;
+        background: color-mix(in srgb, var(--color-error) 12%, transparent);
+        color: var(--color-error);
+        border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
+        padding: var(--space-sm) var(--space-md);
+        border-radius: var(--radius-sm);
         font-size: 0.85rem;
         margin-bottom: var(--space-md);
       }
 
+      /* History drawer */
       .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);
+        background: var(--bg-elevated, #111);
+        border-left: 1px solid var(--border-glass);
         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);
+        border: 1px solid var(--border-glass);
         color: var(--t-primary);
         padding: 4px 10px;
         cursor: pointer;
-        border-radius: 3px;
+        border-radius: var(--radius-xs);
+      }
+      .drawer table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        font-size: 0.85rem;
+      }
+      .drawer th,
+      .drawer td {
+        padding: 8px 10px;
+        text-align: left;
+        border-bottom: 1px solid var(--border-glass);
+      }
+      .drawer th {
+        font-weight: 600;
+        color: var(--t-muted);
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
       }
     `
 ];
@@ -59414,6 +60089,740 @@ DaemonPanel = __decorateClass([
   t4("daemon-panel")
 ], DaemonPanel);
 
+// src/auto-ui/frontend/components/photon-pulse.ts
+init_lit();
+init_decorators();
+init_theme();
+var POLL_INTERVAL_MS2 = 5e3;
+var WEEKDAY_NAMES2 = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
+];
+function formatHour2(h5) {
+  return h5 === 0 ? "12am" : h5 < 12 ? `${h5}am` : h5 === 12 ? "12pm" : `${h5 - 12}pm`;
+}
+function describeWeekdays2(spec) {
+  if (spec === "*") return "every day";
+  if (spec === "1-5") return "weekdays";
+  if (spec === "0,6" || spec === "6,0") return "weekends";
+  if (/^\d$/.test(spec)) {
+    const n5 = parseInt(spec, 10);
+    if (n5 >= 0 && n5 <= 6) return WEEKDAY_NAMES2[n5];
+  }
+  return null;
+}
+function humanizeCron2(cron) {
+  const trimmed = cron.trim();
+  if (trimmed === "* * * * *") return "Every minute";
+  if (trimmed === "0 * * * *") return "Hourly";
+  if (trimmed === "0 0 * * *") return "Daily at midnight";
+  if (trimmed === "0 12 * * *") return "Daily at noon";
+  if (trimmed === "0 0 1 * *") return "Monthly";
+  let m3 = trimmed.match(/^(?:\*|0)\/(\d+) \* \* \* \*$/);
+  if (m3) return `Every ${m3[1]} minutes`;
+  m3 = trimmed.match(/^0 (?:\*|0)\/(\d+) \* \* \*$/);
+  if (m3) return `Every ${m3[1]} hours`;
+  m3 = trimmed.match(/^0 (\d{1,2}) \* \* \*$/);
+  if (m3) {
+    const h5 = parseInt(m3[1], 10);
+    if (h5 >= 0 && h5 <= 23) return `Daily at ${formatHour2(h5)}`;
+  }
+  m3 = trimmed.match(/^0 (\d{1,2}) \* \* ([0-9,-]+)$/);
+  if (m3) {
+    const h5 = parseInt(m3[1], 10);
+    const dayLabel = describeWeekdays2(m3[2]);
+    if (h5 >= 0 && h5 <= 23 && dayLabel) {
+      const cap = dayLabel[0].toUpperCase() + dayLabel.slice(1);
+      return `${cap} at ${formatHour2(h5)}`;
+    }
+  }
+  return trimmed;
+}
+var CRON_PRESETS = [
+  { label: "Every minute", cron: "* * * * *" },
+  { label: "Every 5 min", cron: "*/5 * * * *" },
+  { label: "Hourly", cron: "0 * * * *" },
+  { label: "Daily 9am", cron: "0 9 * * *" },
+  { label: "Weekday mornings", cron: "0 9 * * 1-5" },
+  { label: "Weekly Mon", cron: "0 9 * * 1" },
+  { label: "Monthly 1st", cron: "0 0 1 * *" }
+];
+function isCronShapeValid(cron) {
+  const trimmed = cron.trim();
+  if (!trimmed) return false;
+  const parts = trimmed.split(/\s+/);
+  if (parts.length !== 5) return false;
+  return parts.every((p5) => /^[0-9*/,-]+$/.test(p5));
+}
+function formatWhen2(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);
+}
+var PhotonPulse = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.photonName = "";
+    this.availableMethods = [];
+    this.activity = [];
+    this._active = [];
+    this._declared = [];
+    this._error = null;
+    this._showAddForm = false;
+    this._formMethod = "";
+    this._formCron = "0 9 * * *";
+    this._formSubmitting = false;
+    this._pollTimer = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this._refresh();
+    this._pollTimer = setInterval(() => void this._refresh(), POLL_INTERVAL_MS2);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._pollTimer) {
+      clearInterval(this._pollTimer);
+      this._pollTimer = null;
+    }
+  }
+  updated(changed) {
+    if (changed.has("photonName")) {
+      void this._refresh();
+    }
+  }
+  async _refresh() {
+    if (!this.photonName) return;
+    try {
+      const res = await fetch("/api/daemon/ps", { signal: AbortSignal.timeout(1e4) });
+      if (!res.ok) {
+        this._error = `HTTP ${res.status}`;
+        return;
+      }
+      const snap = await res.json();
+      this._active = (snap.active ?? []).filter((r7) => r7.photon === this.photonName);
+      this._declared = (snap.declared ?? []).filter(
+        (r7) => r7.photon === this.photonName && !r7.active
+      );
+      this._error = null;
+    } catch (err) {
+      this._error = err instanceof Error ? err.message : String(err);
+    }
+  }
+  async _addManual() {
+    const method = this._formMethod.trim();
+    const cron = this._formCron.trim();
+    if (!method) {
+      showToast("Pick a method first", "error");
+      return;
+    }
+    if (!cron) {
+      showToast("Cron expression is required", "error");
+      return;
+    }
+    this._formSubmitting = true;
+    try {
+      const res = await fetch("/api/daemon/schedules/add", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Photon-Request": "1"
+        },
+        body: JSON.stringify({ photon: this.photonName, method, cron }),
+        signal: AbortSignal.timeout(1e4)
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        showToast(body.error || "Failed to add schedule", "error");
+        return;
+      }
+      showToast(`Scheduled ${this.photonName}:${method}`, "success");
+      this._showAddForm = false;
+      this._formMethod = "";
+      this._formCron = "0 9 * * *";
+      await this._refresh();
+    } catch (err) {
+      showToast(err instanceof Error ? err.message : String(err), "error");
+    } finally {
+      this._formSubmitting = false;
+    }
+  }
+  async _action(op, photon, method) {
+    try {
+      const res = await fetch(`/api/daemon/schedules/${op}`, {
+        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 "${op}" failed`, "error");
+        return;
+      }
+      showToast(`${op}d ${photon}:${method}`, "success");
+      await this._refresh();
+    } catch (err) {
+      showToast(err instanceof Error ? err.message : String(err), "error");
+    }
+  }
+  _renderAddForm() {
+    const usedNames = /* @__PURE__ */ new Set([
+      ...this._active.map((r7) => r7.method),
+      ...this._declared.map((r7) => r7.method)
+    ]);
+    const candidates = this.availableMethods.filter((m3) => !usedNames.has(m3));
+    if (this._formMethod && !candidates.includes(this._formMethod)) {
+      candidates.unshift(this._formMethod);
+    }
+    const trimmedCron = this._formCron.trim();
+    const cronShapeValid = isCronShapeValid(trimmedCron);
+    const humanized = cronShapeValid ? humanizeCron2(trimmedCron) : "";
+    const cronHasFriendlyName = humanized && humanized !== trimmedCron;
+    const canSubmit = !!this._formMethod && cronShapeValid && !this._formSubmitting;
+    return b2`
+      <div class="add-form" role="group" aria-label="Add schedule">
+        <div class="field">
+          <span class="field-label">Method</span>
+          <select
+            aria-label="Method"
+            .value=${this._formMethod}
+            @change=${(e8) => this._formMethod = e8.target.value}
+          >
+            <option value="" disabled ?selected=${!this._formMethod}>Pick a method…</option>
+            ${candidates.map(
+      (m3) => b2`<option value=${m3} ?selected=${m3 === this._formMethod}>${m3}</option>`
+    )}
+          </select>
+        </div>
+
+        <div class="field">
+          <span class="field-label">Preset</span>
+          <div class="preset-row" role="group" aria-label="Cron presets">
+            ${CRON_PRESETS.map(
+      (p5) => b2`
+                <button
+                  type="button"
+                  class="preset-chip ${trimmedCron === p5.cron ? "active" : ""}"
+                  title="${p5.cron}"
+                  @click=${() => this._formCron = p5.cron}
+                >
+                  ${p5.label}
+                </button>
+              `
+    )}
+          </div>
+        </div>
+
+        <div class="field">
+          <span class="field-label">Cron</span>
+          <input
+            aria-label="Cron expression"
+            type="text"
+            placeholder="0 9 * * *"
+            class=${trimmedCron && !cronShapeValid ? "invalid" : ""}
+            spellcheck="false"
+            autocomplete="off"
+            .value=${this._formCron}
+            @input=${(e8) => this._formCron = e8.target.value}
+            @keydown=${(e8) => {
+      if (e8.key === "Enter" && canSubmit) void this._addManual();
+      if (e8.key === "Escape") this._showAddForm = false;
+    }}
+          />
+        </div>
+
+        <div
+          class="preview-line ${trimmedCron && !cronShapeValid ? "error" : ""}"
+          role="status"
+          aria-live="polite"
+        >
+          ${!trimmedCron ? b2`<span>Pick a preset or type a cron expression.</span>` : !cronShapeValid ? b2`<span>Cron must have 5 fields: minute hour day month weekday.</span>` : cronHasFriendlyName ? b2`<span class="preview-arrow">→</span>
+                    <span class="preview-text">${humanized}</span>` : b2`<span class="preview-arrow">→</span>
+                    <span class="preview-text">${trimmedCron}</span>
+                    <span>(custom schedule)</span>`}
+        </div>
+
+        <div class="add-actions">
+          <span class="add-hint">
+            Need help?
+            <a href="https://crontab.guru/" target="_blank" rel="noopener">crontab.guru</a>
+          </span>
+          <span style="display: flex; gap: 6px;">
+            <button
+              ?disabled=${this._formSubmitting}
+              @click=${() => {
+      this._showAddForm = false;
+    }}
+            >
+              Cancel
+            </button>
+            <button class="primary" ?disabled=${!canSubmit} @click=${() => this._addManual()}>
+              ${this._formSubmitting ? "Saving\u2026" : "Save"}
+            </button>
+          </span>
+        </div>
+      </div>
+    `;
+  }
+  _renderSchedules() {
+    const total = this._active.length + this._declared.length;
+    return b2`
+      <div class="section">
+        <div class="section-header">
+          <h3 class="section-title">
+            Schedules ${total > 0 ? b2`<span class="section-count">${total}</span>` : ""}
+          </h3>
+          ${this._showAddForm ? "" : b2`<button
+                class="add-btn"
+                title="Add a manual cron schedule for any method"
+                @click=${() => {
+      this._showAddForm = true;
+      if (!this._formMethod) {
+        const used = /* @__PURE__ */ new Set([
+          ...this._active.map((r7) => r7.method),
+          ...this._declared.map((r7) => r7.method)
+        ]);
+        this._formMethod = this.availableMethods.find((m3) => !used.has(m3)) ?? this.availableMethods[0] ?? "";
+      }
+    }}
+              >
+                + Add schedule
+              </button>`}
+        </div>
+        ${this._showAddForm ? this._renderAddForm() : ""}
+        ${total === 0 && !this._showAddForm ? b2`<div class="empty-hint" role="status">
+              No scheduled work for ${this.photonName}. Add a
+              <code>@scheduled &lt;cron&gt;</code> JSDoc tag to a method, or use the "+ Add
+              schedule" button above to set one up manually.
+            </div>` : total === 0 ? "" : b2`<div class="schedule-list">
+                ${this._active.map(
+      (r7) => b2`
+                    <div class="schedule-row" role="listitem">
+                      <span class="schedule-method" title="${r7.method}">
+                        ${formatLabel(r7.method)}
+                        ${r7.createdBy === "manual" ? b2`<span class="manual-badge" title="Added manually via Pulse"
+                              >manual</span
+                            >` : ""}
+                      </span>
+                      <span class="schedule-cron" title="${r7.cron}">${humanizeCron2(r7.cron)}</span>
+                      <span class="schedule-next">next: ${formatWhen2(r7.nextRun)}</span>
+                      <span class="schedule-actions">
+                        <button @click=${() => this._action("pause", r7.photon, r7.method)}>
+                          Pause
+                        </button>
+                        <button @click=${() => this._action("disable", r7.photon, r7.method)}>
+                          Disable
+                        </button>
+                      </span>
+                    </div>
+                  `
+    )}
+                ${this._declared.map(
+      (r7) => b2`
+                    <div class="schedule-row dormant" role="listitem">
+                      <span class="schedule-method" title="${r7.method}"
+                        >${formatLabel(r7.method)}</span
+                      >
+                      <span class="schedule-cron" title="${r7.cron}">${humanizeCron2(r7.cron)}</span>
+                      <span class="schedule-next">declared, not enrolled</span>
+                      <span class="schedule-actions">
+                        <button
+                          class="primary"
+                          @click=${() => this._action("enable", r7.photon, r7.method)}
+                        >
+                          Enable
+                        </button>
+                      </span>
+                    </div>
+                  `
+    )}
+              </div>`}
+      </div>
+    `;
+  }
+  render() {
+    return b2`
+      ${this._renderSchedules()}
+      <div class="section activity">
+        <activity-log
+          .items=${this.activity}
+          .filter=${this.photonName}
+          .fullscreen=${true}
+          @clear=${() => this.dispatchEvent(
+      new CustomEvent("clear-activity", { bubbles: true, composed: true })
+    )}
+        ></activity-log>
+      </div>
+    `;
+  }
+};
+PhotonPulse.styles = [
+  theme,
+  i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        gap: var(--space-lg);
+      }
+
+      .section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        min-height: 0;
+      }
+
+      .section.activity {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-sm);
+        padding: 0 var(--space-xs);
+      }
+
+      .section-title {
+        margin: 0;
+        font-size: var(--text-sm);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        color: var(--t-primary);
+        font-weight: 600;
+      }
+
+      .section-count {
+        color: var(--t-muted);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        letter-spacing: normal;
+        text-transform: none;
+      }
+
+      .schedule-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .schedule-row {
+        display: grid;
+        grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, auto) auto;
+        align-items: center;
+        gap: var(--space-md);
+        padding: var(--space-sm) var(--space-md);
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-sm);
+      }
+
+      .schedule-row.dormant {
+        opacity: 0.7;
+      }
+
+      .schedule-method {
+        color: var(--t-primary);
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .manual-badge {
+        font-size: 9px;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        padding: 1px 6px;
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
+        border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, var(--border-glass));
+        color: var(--t-primary);
+        font-weight: 600;
+      }
+
+      .schedule-cron {
+        color: var(--t-muted);
+        font-size: var(--text-sm);
+        font-family: var(--font-mono);
+      }
+
+      .schedule-next {
+        color: var(--t-muted);
+        font-size: var(--text-sm);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .schedule-actions {
+        display: flex;
+        gap: 4px;
+        justify-self: end;
+      }
+
+      .schedule-actions button {
+        font-size: var(--text-xs);
+        padding: 3px 10px;
+        border: 1px solid var(--border-glass);
+        background: transparent;
+        color: var(--t-primary);
+        cursor: pointer;
+        border-radius: var(--radius-xs);
+        transition: all 0.15s ease;
+      }
+
+      .schedule-actions button:hover {
+        background: var(--bg-glass-strong);
+        border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-glass));
+      }
+
+      .schedule-actions button.primary {
+        background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-glass));
+        border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-glass));
+      }
+
+      .empty-hint {
+        color: var(--t-muted);
+        font-size: var(--text-sm);
+        padding: var(--space-md) var(--space-md);
+        text-align: center;
+        border: 1px dashed var(--border-glass);
+        border-radius: var(--radius-sm);
+        background: color-mix(in srgb, var(--bg-glass) 50%, transparent);
+      }
+
+      .add-btn {
+        font-size: var(--text-xs);
+        padding: 3px 10px;
+        border: 1px solid var(--border-glass);
+        background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-glass));
+        color: var(--t-primary);
+        cursor: pointer;
+        border-radius: var(--radius-xs);
+        transition: all 0.15s ease;
+      }
+
+      .add-btn:hover {
+        background: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-glass));
+        border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-glass));
+      }
+
+      .add-form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        padding: var(--space-md);
+        background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-glass));
+        border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-glass));
+        border-radius: var(--radius-sm);
+      }
+
+      .field {
+        display: grid;
+        grid-template-columns: 90px 1fr;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .field-label {
+        font-size: var(--text-xs);
+        color: var(--t-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      .add-form select,
+      .add-form input {
+        font: inherit;
+        font-size: var(--text-sm);
+        color: var(--t-primary);
+        background: var(--bg-elevated, #0b1018);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-xs);
+        padding: 5px 8px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .add-form input {
+        font-family: var(--font-mono);
+      }
+
+      .add-form select:focus,
+      .add-form input:focus {
+        outline: none;
+        border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-glass));
+      }
+
+      .add-form input.invalid {
+        border-color: color-mix(in srgb, var(--color-warning, #ef4444) 60%, var(--border-glass));
+      }
+
+      .preset-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+
+      .preset-chip {
+        font-size: var(--text-xs);
+        padding: 3px 10px;
+        border: 1px solid var(--border-glass);
+        background: var(--bg-elevated, #0b1018);
+        color: var(--t-primary);
+        cursor: pointer;
+        border-radius: 999px;
+        transition: all 0.15s ease;
+        font-family: var(--font-mono);
+      }
+
+      .preset-chip:hover {
+        background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-elevated));
+        border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-glass));
+      }
+
+      .preset-chip.active {
+        background: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-elevated));
+        border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-glass));
+        color: var(--accent-primary);
+      }
+
+      .preview-line {
+        font-size: var(--text-xs);
+        color: var(--t-muted);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding-left: calc(90px + var(--space-sm));
+        min-height: 18px;
+      }
+
+      .preview-line.error {
+        color: var(--color-warning, #ef4444);
+      }
+
+      .preview-arrow {
+        opacity: 0.5;
+      }
+
+      .preview-text {
+        color: var(--t-primary);
+        font-weight: 500;
+      }
+
+      .add-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--space-sm);
+      }
+
+      .add-form button {
+        font-size: var(--text-xs);
+        padding: 5px 14px;
+        border: 1px solid var(--border-glass);
+        background: transparent;
+        color: var(--t-primary);
+        cursor: pointer;
+        border-radius: var(--radius-xs);
+        transition: all 0.15s ease;
+      }
+
+      .add-form button.primary {
+        background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-glass));
+        border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-glass));
+      }
+
+      .add-form button:hover:not([disabled]) {
+        background: var(--bg-glass-strong);
+      }
+
+      .add-form button[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .add-hint {
+        font-size: var(--text-xs);
+        color: var(--t-muted);
+      }
+
+      .add-hint a {
+        color: var(--accent-primary);
+        text-decoration: none;
+      }
+
+      .add-hint a:hover {
+        text-decoration: underline;
+      }
+
+      @media (max-width: 640px) {
+        .schedule-row {
+          grid-template-columns: 1fr;
+          gap: var(--space-xs);
+        }
+
+        .schedule-actions {
+          justify-self: start;
+        }
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], PhotonPulse.prototype, "photonName", 2);
+__decorateClass([
+  n4({ type: Array })
+], PhotonPulse.prototype, "availableMethods", 2);
+__decorateClass([
+  n4({ type: Array })
+], PhotonPulse.prototype, "activity", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_active", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_declared", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_error", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_showAddForm", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_formMethod", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_formCron", 2);
+__decorateClass([
+  r5()
+], PhotonPulse.prototype, "_formSubmitting", 2);
+PhotonPulse = __decorateClass([
+  t4("photon-pulse")
+], PhotonPulse);
+
 // src/auto-ui/frontend/components/custom-ui-renderer.ts
 init_lit();
 init_decorators();