oysterun 1.4.6 → 1.4.8

package/dev/client/web/index.html

@@ -1160,7 +1160,8 @@
       .topbar.sessions-mode,
       .topbar.scheduler-mode,
       .topbar.explorer-mode,
-      .topbar.session-loop-mode {
+      .topbar.session-loop-mode,
+      .topbar.mail-detail-mode {
         display: grid;
         grid-template-columns: 58px minmax(0, 1fr) 58px;
         gap: 0;
@@ -1175,7 +1176,8 @@
       .topbar.sessions-mode .topbar-left,
       .topbar.scheduler-mode .topbar-left,
       .topbar.explorer-mode .topbar-left,
-      .topbar.session-loop-mode .topbar-left {
+      .topbar.session-loop-mode .topbar-left,
+      .topbar.mail-detail-mode .topbar-left {
         display: contents;
       }
 
@@ -1192,7 +1194,8 @@
 
       .topbar.scheduler-setup-mode #topbar-back-btn,
       .topbar.explorer-mode #topbar-back-btn,
-      .topbar.session-loop-mode #topbar-back-btn {
+      .topbar.session-loop-mode #topbar-back-btn,
+      .topbar.mail-detail-mode #topbar-back-btn {
         grid-column: 1;
         justify-self: start;
         color: var(--accent);
@@ -1201,7 +1204,8 @@
       .topbar.sessions-mode .topbar-title,
       .topbar.scheduler-mode .topbar-title,
       .topbar.explorer-mode .topbar-title,
-      .topbar.session-loop-mode .topbar-title {
+      .topbar.session-loop-mode .topbar-title,
+      .topbar.mail-detail-mode .topbar-title {
         grid-column: 2;
         justify-self: center;
         text-align: center;
@@ -1223,7 +1227,8 @@
       .topbar.sessions-mode .topbar-title strong,
       .topbar.scheduler-mode .topbar-title strong,
       .topbar.explorer-mode .page-title strong,
-      .topbar.session-loop-mode .page-title strong {
+      .topbar.session-loop-mode .page-title strong,
+      .topbar.mail-detail-mode .page-title strong {
         font-family: var(--font-ui);
         font-size: 20px;
         font-weight: 700;
@@ -1244,14 +1249,16 @@
       }
 
       .topbar.explorer-mode .page-title span,
-      .topbar.session-loop-mode .page-title span {
+      .topbar.session-loop-mode .page-title span,
+      .topbar.mail-detail-mode .page-title span {
         display: none;
       }
 
       .topbar.sessions-mode .topbar-right,
       .topbar.scheduler-mode .topbar-right,
       .topbar.explorer-mode .topbar-right,
-      .topbar.session-loop-mode .topbar-right {
+      .topbar.session-loop-mode .topbar-right,
+      .topbar.mail-detail-mode .topbar-right {
         grid-column: 3;
         justify-self: end;
       }
@@ -4430,6 +4437,181 @@
         outline: none;
       }
 
+      .mail-row-actions {
+        display: grid;
+        place-items: start center;
+        padding: 10px 10px 0 0;
+      }
+
+      .mail-row-menu-button {
+        width: 36px;
+        height: 36px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: transparent;
+        color: #7f715f;
+        cursor: pointer;
+      }
+
+      .mail-row-menu-button:hover,
+      .mail-row-menu-button:focus-visible {
+        transform: none;
+        background: rgba(39, 28, 18, 0.08);
+        outline: none;
+      }
+
+      .mail-row-menu-button span::before {
+        content: "\2022\2022\2022";
+        display: block;
+        font-size: 13px;
+        letter-spacing: 2px;
+        line-height: 1;
+      }
+
+      .topbar-mail-actions {
+        align-self: center;
+        justify-self: end;
+      }
+
+      .mail-detail {
+        display: grid;
+        gap: 14px;
+        width: 100%;
+        min-width: 0;
+      }
+
+      .mail-detail-header {
+        display: grid;
+        gap: 6px;
+        min-width: 0;
+        padding: 0 2px;
+      }
+
+      .mail-detail-title {
+        margin: 0;
+        min-width: 0;
+        color: var(--ink);
+        font-family: var(--font-ui);
+        font-size: clamp(22px, 5vw, 30px);
+        font-weight: 750;
+        line-height: 1.15;
+        letter-spacing: 0;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+      }
+
+      .mail-detail-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 8px;
+        min-width: 0;
+        color: var(--ink-soft);
+        font-size: 12px;
+        line-height: 1.45;
+      }
+
+      .mail-detail-meta span {
+        min-width: 0;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+      }
+
+      .mail-detail-meta span + span::before {
+        content: "\00b7";
+        margin-right: 8px;
+        color: rgba(101, 76, 51, 0.45);
+      }
+
+      .mail-detail-body {
+        width: 100%;
+        min-width: 0;
+      }
+
+      .mail-html-frame-shell {
+        width: 100%;
+        min-width: 0;
+        background: transparent;
+      }
+
+      .mail-html-frame {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        min-height: min(640px, calc(100vh - var(--topbar-height) - 148px));
+        border: 0;
+        background: transparent;
+      }
+
+      .mail-row-menu-layer {
+        position: fixed;
+        inset: 0;
+        z-index: 10000;
+        background: transparent;
+        pointer-events: auto;
+      }
+
+      .mail-row-menu-panel {
+        position: fixed;
+        width: 190px;
+        padding: 6px;
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: rgba(255, 253, 250, 0.98);
+        box-shadow: var(--shadow);
+        pointer-events: auto;
+      }
+
+      .mail-row-menu-action {
+        width: 100%;
+        min-height: 36px;
+        display: grid;
+        grid-template-columns: 22px minmax(0, 1fr);
+        gap: 8px;
+        align-items: center;
+        padding: 8px 10px;
+        border-radius: 10px;
+        background: transparent;
+        color: var(--ink);
+        font-size: 13px;
+        font-weight: 700;
+        text-align: left;
+      }
+
+      .mail-row-menu-action-icon {
+        width: 22px;
+        height: 22px;
+        display: grid;
+        place-items: center;
+        color: #7f715f;
+      }
+
+      .mail-row-menu-action-icon svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 1.8;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .mail-row-menu-action:hover,
+      .mail-row-menu-action:focus-visible {
+        transform: none;
+        background: rgba(39, 28, 18, 0.08);
+        outline: none;
+      }
+
+      .mail-row-menu-action.danger {
+        color: var(--red);
+      }
+
+      .mail-row-menu-action.danger .mail-row-menu-action-icon {
+        color: var(--red);
+      }
+
       .session-row-menu {
         position: relative;
         align-self: start;
@@ -7197,11 +7379,46 @@
         white-space: nowrap;
       }
 
+      .bottom-nav-item .bottom-nav-icon {
+        position: relative;
+        width: 28px;
+        height: 22px;
+        display: grid;
+        place-items: center;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
       .bottom-nav-item svg {
         width: 18px;
         height: 18px;
       }
 
+      .bottom-nav-item .bottom-nav-mail-badge {
+        position: absolute;
+        top: -7px;
+        right: -9px;
+        min-width: 17px;
+        height: 17px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 4px;
+        border-radius: 999px;
+        border: 1.5px solid rgba(248, 242, 233, 0.96);
+        background: #ff3b30;
+        color: #fff;
+        box-shadow: 0 2px 7px rgba(165, 34, 27, 0.28);
+        font-size: 10px;
+        font-weight: 500;
+        line-height: 1;
+        letter-spacing: 0;
+        pointer-events: none;
+        overflow: visible;
+        text-overflow: clip;
+        white-space: nowrap;
+      }
+
       .bottom-nav-item.active {
         background: rgba(185, 99, 53, 0.12);
         color: var(--ink);
@@ -7593,6 +7810,18 @@
                 >
                   Save
                 </button>
+                <button
+                  class="mail-row-menu-button topbar-mail-actions hidden"
+                  id="topbar-mail-actions-btn"
+                  type="button"
+                  title="Mail actions"
+                  aria-label="Mail actions"
+                  data-mail-menu-action="open"
+                  data-mail-id=""
+                  data-oysterun-mail-detail-actions="topbar_overflow_menu"
+                >
+                  <span aria-hidden="true"></span>
+                </button>
                 <button
                   class="topbar-circle-btn hidden"
                   id="btn-agent-site"
@@ -9863,6 +10092,11 @@ Terminal output will appear here.</pre
                       class="hidden"
                       data-oysterun-mail-detail="host_owned_mail_item"
                     ></div>
+                    <div
+                      class="mail-row-menu-layer hidden"
+                      id="mail-row-menu-layer"
+                      data-oysterun-mail-row-menu-layer="true"
+                    ></div>
                   </section>
                 </div>
               </div>
@@ -10785,35 +11019,39 @@ Waiting for Claude login output…</pre
                     data-oysterun-mail-tab="true"
                     onClick=${call("switchTab", "mail")}
                   >
-                    <svg
-                      viewBox="0 0 24 24"
+                    <span
+                      class="bottom-nav-icon bottom-nav-mail-icon"
                       aria-hidden="true"
-                      focusable="false"
-                      data-oysterun-bottom-tab-icon="mail"
                     >
-                      <path
-                        d="M4.8 6h14.4c1 0 1.8.8 1.8 1.8v8.4c0 1-.8 1.8-1.8 1.8H4.8c-1 0-1.8-.8-1.8-1.8V7.8C3 6.8 3.8 6 4.8 6Z"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.7"
-                        stroke-linejoin="round"
-                      ></path>
-                      <path
-                        d="m4.5 7.5 7.5 5.25 7.5-5.25"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="1.7"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      ></path>
-                    </svg>
+                      <svg
+                        viewBox="0 0 24 24"
+                        focusable="false"
+                        data-oysterun-bottom-tab-icon="mail"
+                      >
+                        <path
+                          d="M4.8 6h14.4c1 0 1.8.8 1.8 1.8v8.4c0 1-.8 1.8-1.8 1.8H4.8c-1 0-1.8-.8-1.8-1.8V7.8C3 6.8 3.8 6 4.8 6Z"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.7"
+                          stroke-linejoin="round"
+                        ></path>
+                        <path
+                          d="m4.5 7.5 7.5 5.25 7.5-5.25"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.7"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></path>
+                      </svg>
+                      <span
+                        class="bottom-nav-mail-badge hidden"
+                        id="mail-unread-badge"
+                        data-oysterun-mail-unread-badge="true"
+                        aria-label="Unread mail count"
+                      ></span>
+                    </span>
                     <span>Mail</span>
-                    <span
-                      class="pill hidden"
-                      id="mail-unread-badge"
-                      data-oysterun-mail-unread-badge="true"
-                      aria-label="Unread mail count"
-                    ></span>
                   </button>
                 </nav>
               </div>
@@ -11347,6 +11585,7 @@ Waiting for Claude login output…</pre
           loaded: false,
           loading: false,
           saving: false,
+          pendingTargets: {},
           editingId: null,
           error: "",
         };
@@ -12546,6 +12785,7 @@ Waiting for Claude login output…</pre
       let sessionLoopState = createSessionLoopState();
       let hostSchedulerState = createHostSchedulerState();
       let mailState = createMailState();
+      let mailRowActionMenuState = null;
       let schedulerSetupCopyState = createSchedulerSetupCopyState();
       let hostSchedulerActionMenuState = null;
       let sessionLoopActionMenuState = null;
@@ -27749,8 +27989,8 @@ Waiting for Claude login output…</pre
         if (screen === "mail") {
           if (normalized.mailId) {
             return {
-              title: "Mail",
-              subtitle: "Host-owned Mail item detail.",
+              title: "Email",
+              subtitle: "",
             };
           }
           return {
@@ -27839,6 +28079,7 @@ Waiting for Claude login output…</pre
         const isAgentProfile = screen === "agent-profile";
         const isBrowser = screen === "browser";
         const currentRoute = normalizeClientRoute(getCurrentRoute());
+        const isMailDetail = screen === "mail" && Boolean(currentRoute.mailId);
         const isExplorer = screen === "explorer";
         const isSessionSetupFolderPicker =
           screen === "folder-picker" &&
@@ -27873,6 +28114,30 @@ Waiting for Claude login output…</pre
         setVisible("topbar-scheduler-new-btn", isSchedulerList);
         setVisible("topbar-session-loop-new-btn", isSessionLoop);
         setVisible("topbar-explorer-add-folder-btn", showTopbarAddFolder);
+        setVisible("topbar-mail-actions-btn", isMailDetail);
+        const topbarMailActionsButton = $("topbar-mail-actions-btn");
+        if (topbarMailActionsButton) {
+          if (isMailDetail) {
+            topbarMailActionsButton.setAttribute(
+              "data-mail-id",
+              currentRoute.mailId
+            );
+            const item =
+              mailState.selectedItem ||
+              mailState.itemById.get(currentRoute.mailId) ||
+              null;
+            topbarMailActionsButton.setAttribute(
+              "aria-label",
+              `Mail actions${item?.title ? ` for ${item.title}` : ""}`
+            );
+            topbarMailActionsButton.disabled =
+              mailState.actionBusyId === currentRoute.mailId;
+          } else {
+            topbarMailActionsButton.removeAttribute("data-mail-id");
+            topbarMailActionsButton.disabled = false;
+            topbarMailActionsButton.setAttribute("aria-label", "Mail actions");
+          }
+        }
         const topbarExplorerAddFolderButton = $(
           "topbar-explorer-add-folder-btn"
         );
@@ -28060,6 +28325,7 @@ Waiting for Claude login output…</pre
         $("topbar")?.classList.toggle("scheduler-mode", isSchedulerList);
         $("topbar")?.classList.toggle("explorer-mode", isExplorer);
         $("topbar")?.classList.toggle("session-loop-mode", isSessionLoop);
+        $("topbar")?.classList.toggle("mail-detail-mode", isMailDetail);
         $("topbar")?.classList.toggle("browser-mode", isBrowser);
         $("topbar")?.classList.toggle(
           "scheduler-setup-mode",
@@ -30521,6 +30787,10 @@ Waiting for Claude login output…</pre
         badge.textContent = count > 99 ? "99+" : String(count);
         badge.classList.toggle("hidden", count <= 0);
         badge.setAttribute("data-oysterun-mail-unread-count", String(count));
+        badge.setAttribute(
+          "aria-label",
+          count === 1 ? "1 unread mail" : `${count} unread mail`
+        );
       }
 
       function renderMailFilterBar() {
@@ -30588,6 +30858,122 @@ Waiting for Claude login output…</pre
         `;
       }
 
+      function renderMailActionIcon(name) {
+        if (name === "read") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M4.5 7h15v10h-15z" />
+              <path d="m5 8 7 5 7-5" />
+              <path d="m8 12 2.4 2.4L16 9" />
+            </svg>
+          `;
+        }
+        if (name === "unread") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M4.5 7h15v10h-15z" />
+              <path d="m5 8 7 5 7-5" />
+              <circle cx="18" cy="6" r="2.2" />
+            </svg>
+          `;
+        }
+        if (name === "archive") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M4.5 6.5h15v3h-15z" />
+              <path d="M6 9.5v8h12v-8" />
+              <path d="M9.5 13h5" />
+            </svg>
+          `;
+        }
+        if (name === "unarchive") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M4.5 6.5h15v3h-15z" />
+              <path d="M6 9.5v8h12v-8" />
+              <path d="M12 16v-4" />
+              <path d="m9.5 14.5 2.5-2.5 2.5 2.5" />
+            </svg>
+          `;
+        }
+        if (name === "copy") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M8 7.5V5.8c0-1 .8-1.8 1.8-1.8h6.4c1 0 1.8.8 1.8 1.8v8.4c0 1-.8 1.8-1.8 1.8h-1.7" />
+              <path d="M5.8 8h6.4c1 0 1.8.8 1.8 1.8v8.4c0 1-.8 1.8-1.8 1.8H5.8c-1 0-1.8-.8-1.8-1.8V9.8C4 8.8 4.8 8 5.8 8Z" />
+            </svg>
+          `;
+        }
+        if (name === "trash") {
+          return `
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path d="M5 7h14" />
+              <path d="M9 7V5.8c0-1 .8-1.8 1.8-1.8h2.4c1 0 1.8.8 1.8 1.8V7" />
+              <path d="m7 7 1 12c.1 1 1 1.8 2 1.8h4c1 0 1.9-.8 2-1.8l1-12" />
+              <path d="M10.5 11v6M13.5 11v6" />
+            </svg>
+          `;
+        }
+        return "";
+      }
+
+      function getMailRowActionMenuItems(item) {
+        if (!item?.id) return [];
+        const unread = !item.read_at;
+        const archived = Boolean(item.archived_at);
+        const busy = mailState.actionBusyId === item.id;
+        return [
+          {
+            action: unread ? "read" : "unread",
+            label: unread ? "Mark read" : "Mark unread",
+            icon: unread ? "read" : "unread",
+            disabled: busy,
+          },
+          {
+            action: archived ? "unarchive" : "archive",
+            label: archived ? "Unarchive" : "Archive",
+            icon: archived ? "unarchive" : "archive",
+            disabled: busy,
+          },
+          {
+            action: "copy",
+            label: "Copy mail link",
+            icon: "copy",
+          },
+          {
+            action: "delete",
+            label: "Delete",
+            icon: "trash",
+            danger: true,
+            disabled: busy,
+          },
+        ];
+      }
+
+      function renderMailRowMenuActionButton({
+        action,
+        label,
+        icon,
+        danger = false,
+        disabled = false,
+      }) {
+        return `
+          <button
+            class="mail-row-menu-action${danger ? " danger" : ""}"
+            type="button"
+            data-mail-menu-item-action="${esc(action)}"
+            role="menuitem"
+            aria-disabled="${String(disabled)}"
+            ${disabled ? "disabled" : ""}
+          >
+            <span class="mail-row-menu-action-icon">
+              ${renderMailActionIcon(icon)}
+            </span>
+            <span>${esc(label)}</span>
+          </button>
+        `;
+      }
+
       function renderMailRow(item) {
         const mailId = item.id;
         const unread = !item.read_at;
@@ -30629,55 +31015,148 @@ Waiting for Claude login output…</pre
                 </span>
               </span>
             </button>
-            <div class="web-site-row-actions" data-oysterun-mail-row-actions="true">
+            <div class="mail-row-actions" data-oysterun-mail-row-actions="true">
               <button
-                class="web-site-row-action"
+                class="mail-row-menu-button"
                 type="button"
-                title="${unread ? "Mark read" : "Mark unread"}"
-                aria-label="${unread ? "Mark read" : "Mark unread"}"
-                data-mail-action="${unread ? "read" : "unread"}"
+                title="Mail actions"
+                aria-label="Mail actions for ${esc(item.title)}"
+                data-mail-menu-action="open"
                 data-mail-id="${esc(mailId)}"
                 ${getMailActionBusyAttr(mailId)}
               >
-                ${unread ? "Read" : "Unread"}
-              </button>
-              <button
-                class="web-site-row-action"
-                type="button"
-                title="${archived ? "Unarchive" : "Archive"}"
-                aria-label="${archived ? "Unarchive" : "Archive"}"
-                data-mail-action="${archived ? "unarchive" : "archive"}"
-                data-mail-id="${esc(mailId)}"
-                ${getMailActionBusyAttr(mailId)}
-              >
-                ${archived ? "Inbox" : "Archive"}
-              </button>
-              <button
-                class="web-site-row-action"
-                type="button"
-                title="Copy mail link"
-                aria-label="Copy mail link"
-                data-mail-action="copy"
-                data-mail-id="${esc(mailId)}"
-              >
-                Copy
-              </button>
-              <button
-                class="web-site-row-action"
-                type="button"
-                title="Delete"
-                aria-label="Delete"
-                data-mail-action="delete"
-                data-mail-id="${esc(mailId)}"
-                ${getMailActionBusyAttr(mailId)}
-              >
-                Delete
+                <span aria-hidden="true"></span>
               </button>
             </div>
           </article>
         `;
       }
 
+      function getMailRowItem(mailId) {
+        const normalizedId = sanitizeRouteText(mailId);
+        if (!normalizedId) return null;
+        return (
+          mailState.itemById.get(normalizedId) ||
+          mailState.items.find((item) => item.id === normalizedId) ||
+          (mailState.selectedItem?.id === normalizedId
+            ? mailState.selectedItem
+            : null)
+        );
+      }
+
+      function closeMailRowActionMenu() {
+        const layer = $("mail-row-menu-layer");
+        if (layer) {
+          layer.classList.add("hidden");
+          layer.innerHTML = "";
+        }
+        mailRowActionMenuState = null;
+        document.removeEventListener(
+          "click",
+          handleMailRowActionMenuDocumentClick,
+          true
+        );
+        document.removeEventListener("keydown", handleMailRowActionMenuKeydown);
+      }
+
+      function handleMailRowActionMenuDocumentClick(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+          closeMailRowActionMenu();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (
+          target.closest(".mail-row-menu-panel") ||
+          target.closest("[data-mail-menu-action='open']")
+        ) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        closeMailRowActionMenu();
+      }
+
+      function handleMailRowActionMenuKeydown(event) {
+        if (event.key === "Escape") {
+          closeMailRowActionMenu();
+        }
+      }
+
+      function positionMailRowActionMenu(anchorButton) {
+        const layer = $("mail-row-menu-layer");
+        const panel = layer?.querySelector(".mail-row-menu-panel");
+        if (!layer || !panel || !anchorButton) return;
+        const rect = anchorButton.getBoundingClientRect();
+        const panelWidth = panel.offsetWidth || 190;
+        const panelHeight = panel.offsetHeight || 160;
+        const edgeInset = 12;
+        let left = rect.right - panelWidth;
+        left = Math.max(
+          edgeInset,
+          Math.min(left, window.innerWidth - panelWidth - edgeInset)
+        );
+        let top = rect.bottom + 6;
+        if (top + panelHeight > window.innerHeight - edgeInset) {
+          top = rect.top - panelHeight - 6;
+        }
+        top = Math.max(
+          edgeInset,
+          Math.min(top, window.innerHeight - panelHeight - edgeInset)
+        );
+        panel.style.left = `${Math.round(left)}px`;
+        panel.style.top = `${Math.round(top)}px`;
+      }
+
+      function openMailRowActionMenu(anchorButton, mailId) {
+        const normalizedId = sanitizeRouteText(mailId);
+        if (!normalizedId) return;
+        const item = getMailRowItem(normalizedId);
+        if (!item) return;
+        const layer = $("mail-row-menu-layer");
+        if (!layer) return;
+        const alreadyOpen =
+          mailRowActionMenuState?.mailId === normalizedId &&
+          !layer.classList.contains("hidden");
+        closeMailRowActionMenu();
+        if (alreadyOpen) return;
+        mailRowActionMenuState = { mailId: normalizedId };
+        const menuItems = getMailRowActionMenuItems(item);
+        layer.innerHTML = `
+          <div
+            class="mail-row-menu-panel"
+            role="menu"
+            data-oysterun-mail-row-menu="${esc(normalizedId)}"
+          >
+            ${menuItems.map(renderMailRowMenuActionButton).join("")}
+          </div>
+        `;
+        layer.classList.remove("hidden");
+        positionMailRowActionMenu(anchorButton);
+        for (const actionButton of layer.querySelectorAll(
+          "[data-mail-menu-item-action]"
+        )) {
+          actionButton.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const action = actionButton.getAttribute(
+              "data-mail-menu-item-action"
+            );
+            closeMailRowActionMenu();
+            void performMailAction(normalizedId, action || "");
+          });
+        }
+        window.setTimeout(() => {
+          document.addEventListener(
+            "click",
+            handleMailRowActionMenuDocumentClick,
+            true
+          );
+          document.addEventListener("keydown", handleMailRowActionMenuKeydown);
+        }, 0);
+      }
+
       function normalizeTrustedMailHref(rawHref) {
         const href = String(rawHref || "").trim();
         if (!href || href.startsWith("#")) return href;
@@ -30890,15 +31369,57 @@ Waiting for Claude login output…</pre
         return doc.body.innerHTML;
       }
 
+      function buildMailHtmlSrcdoc(value) {
+        const html = String(value || "");
+        if (/<(?:!doctype|html|head|body)\b/i.test(html)) return html;
+        return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+        overflow-wrap: anywhere;
+        word-break: normal;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
+        color: #271c12;
+        background: transparent;
+      }
+      img,
+      video,
+      canvas,
+      svg {
+        max-width: 100%;
+        height: auto;
+      }
+      table {
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>${html}</body>
+</html>`;
+      }
+
       function renderMailBody(item) {
         if (item.body_format === "html") {
           return `
             <div
-              class="markdown-doc rich-text"
-              data-oysterun-mail-body-format="trusted_html"
-              data-oysterun-mail-html-sanitized="true"
+              class="mail-html-frame-shell"
+              data-oysterun-mail-body-format="html"
+              data-oysterun-mail-html-sandboxed="true"
             >
-              ${sanitizeTrustedMailHtml(item.body_html)}
+              <iframe
+                class="mail-html-frame"
+                title="Mail HTML body"
+                sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+                data-oysterun-mail-html-frame="true"
+                srcdoc="${esc(buildMailHtmlSrcdoc(item.body_html))}"
+              ></iframe>
             </div>
           `;
         }
@@ -30936,51 +31457,28 @@ Waiting for Claude login output…</pre
         const unread = !item.read_at;
         const createdLabel = formatMailTimestamp(item.created_at);
         const tags = item.tags.length ? item.tags.join(", ") : "";
+        const metaParts = [
+          getMailSourceLabel(item),
+          createdLabel,
+          item.severity,
+          unread ? "Unread" : "Read",
+          archived ? "Archived" : "",
+          tags,
+        ].filter(Boolean);
         return `
           <article
             class="mail-detail"
             data-oysterun-mail-detail-id="${esc(item.id)}"
             data-oysterun-mail-detail-read="${unread ? "false" : "true"}"
             data-oysterun-mail-detail-archived="${archived ? "true" : "false"}"
+            data-oysterun-mail-detail-layout="title_meta_body"
           >
-            <div class="page-header">
-              <div>
-                <span class="eyebrow">Mail</span>
-                <h2>${esc(item.title)}</h2>
-                <div class="meta-text">
-                  ${esc(getMailSourceLabel(item))}
-                  ${createdLabel ? ` · ${esc(createdLabel)}` : ""}
-                  ${tags ? ` · ${esc(tags)}` : ""}
-                </div>
+            <header class="mail-detail-header">
+              <h1 class="mail-detail-title">${esc(item.title)}</h1>
+              <div class="mail-detail-meta">
+                ${metaParts.map((part) => `<span>${esc(part)}</span>`).join("")}
               </div>
-              <div class="page-header-actions">
-                <span class="pill">${unread ? "Unread" : "Read"}</span>
-                ${archived ? '<span class="pill">Archived</span>' : ""}
-              </div>
-            </div>
-            <div class="toolbar" data-oysterun-mail-detail-actions="true">
-              <button class="btn-soft" type="button" data-mail-action="${
-                unread ? "read" : "unread"
-              }" data-mail-id="${esc(item.id)}">${
-          unread ? "Mark read" : "Mark unread"
-        }</button>
-              <button class="btn-soft" type="button" data-mail-action="${
-                archived ? "unarchive" : "archive"
-              }" data-mail-id="${esc(item.id)}">${
-          archived ? "Unarchive" : "Archive"
-        }</button>
-              <button class="btn-soft" type="button" data-mail-action="copy" data-mail-id="${esc(
-                item.id
-              )}">Copy mail link</button>
-              <button class="btn-ghost" type="button" data-mail-action="delete" data-mail-id="${esc(
-                item.id
-              )}">Delete</button>
-            </div>
-            ${
-              item.summary
-                ? `<p class="field-hint">${esc(item.summary)}</p>`
-                : ""
-            }
+            </header>
             <div
               class="mail-detail-body"
               data-oysterun-mail-detail-renderer="${esc(item.body_format)}"
@@ -31023,6 +31521,7 @@ Waiting for Claude login output…</pre
               null;
             detailRoot.innerHTML = renderMailDetail(item);
             hydrateRichContent(detailRoot);
+            hydrateMailHtmlFrames(detailRoot);
           }
           return;
         }
@@ -31292,11 +31791,25 @@ Waiting for Claude login output…</pre
 
       function handleMailClick(event) {
         const target = event.target instanceof Element ? event.target : null;
-        if (!target || !$("mail-view")?.contains(target)) return false;
+        if (!target) return false;
+        const topbarMenuButton = target.closest(
+          "#topbar-mail-actions-btn[data-mail-menu-action='open']"
+        );
+        if (topbarMenuButton) {
+          event.preventDefault();
+          event.stopPropagation();
+          openMailRowActionMenu(
+            topbarMenuButton,
+            topbarMenuButton.getAttribute("data-mail-id") || ""
+          );
+          return true;
+        }
+        if (!$("mail-view")?.contains(target)) return false;
         const filterButton = target.closest("[data-mail-filter]");
         if (filterButton) {
           event.preventDefault();
           event.stopPropagation();
+          closeMailRowActionMenu();
           void navigateToRoute(
             buildMailRoute({
               filter: filterButton.getAttribute("data-mail-filter") || "inbox",
@@ -31304,10 +31817,21 @@ Waiting for Claude login output…</pre
           );
           return true;
         }
+        const menuButton = target.closest("[data-mail-menu-action='open']");
+        if (menuButton) {
+          event.preventDefault();
+          event.stopPropagation();
+          openMailRowActionMenu(
+            menuButton,
+            menuButton.getAttribute("data-mail-id") || ""
+          );
+          return true;
+        }
         const actionButton = target.closest("[data-mail-action][data-mail-id]");
         if (!actionButton) return false;
         event.preventDefault();
         event.stopPropagation();
+        closeMailRowActionMenu();
         void performMailAction(
           actionButton.getAttribute("data-mail-id") || "",
           actionButton.getAttribute("data-mail-action") || ""
@@ -36412,6 +36936,7 @@ Waiting for Claude login output…</pre
 
       function renderSessionLoopRow(row) {
         const enabled = row.enabled === true;
+        const pending = sessionLoopState.pendingTargets?.[row.id] === true;
         const expanded = sessionLoopState.editingId === row.id;
         const intervalLabel = row.interval_token
           ? formatSessionLoopIntervalToken(row.interval_token)
@@ -36422,6 +36947,7 @@ Waiting for Claude login output…</pre
               data-loop-row-id="${esc(row.id)}"
               data-oysterun-session-loop-row="true"
               data-oysterun-session-loop-enabled="${String(enabled)}"
+              data-oysterun-session-loop-pending="${String(pending)}"
               data-oysterun-session-loop-storage-owner="${esc(
                 row.storage_owner || "agent_folder_oysterun_loops_json"
               )}"
@@ -36465,10 +36991,18 @@ Waiting for Claude login output…</pre
               type="button"
               role="switch"
               aria-checked="${enabled ? "true" : "false"}"
-              title="${enabled ? "Enabled" : "Disabled"}"
+              aria-disabled="${pending ? "true" : "false"}"
+              title="${
+                pending ? "Updating..." : enabled ? "Enabled" : "Disabled"
+              }"
+              ${pending ? "disabled" : ""}
               data-loop-action="toggle-row"
               data-loop-id="${esc(row.id)}"
               data-oysterun-session-loop-row-toggle="${esc(row.id)}"
+              data-oysterun-session-loop-row-toggle-pending="${String(pending)}"
+              data-oysterun-session-loop-row-toggle-desired="${
+                enabled ? "false" : "true"
+              }"
             >
               <span aria-hidden="true"></span>
             </button>
@@ -36635,12 +37169,23 @@ Waiting for Claude login output…</pre
         const liveSession = getSelectedLiveSession();
         const row = findSessionLoopRow(scheduleId);
         if (!liveSession || !row) return;
+        if (sessionLoopState.pendingTargets?.[scheduleId] === true) return;
+        sessionLoopState = {
+          ...sessionLoopState,
+          pendingTargets: {
+            ...(sessionLoopState.pendingTargets || {}),
+            [scheduleId]: true,
+          },
+          error: "",
+        };
+        renderSessionLoopSection(liveSession);
         try {
           await api(
             "PATCH",
             `/session/loops/${encodeURIComponent(scheduleId)}`,
             {
               session_id: liveSession.sessionId,
+              desired_enabled: enabled,
               enabled,
               runtime_only: true,
             }
@@ -36654,6 +37199,16 @@ Waiting for Claude login output…</pre
             error: err.message || String(err),
           };
           renderSessionLoopSection(liveSession);
+        } finally {
+          const nextPendingTargets = {
+            ...(sessionLoopState.pendingTargets || {}),
+          };
+          delete nextPendingTargets[scheduleId];
+          sessionLoopState = {
+            ...sessionLoopState,
+            pendingTargets: nextPendingTargets,
+          };
+          renderSessionLoopSection(getSelectedLiveSession());
         }
       }
 
@@ -36730,6 +37285,8 @@ Waiting for Claude login output…</pre
           return true;
         }
         if (action === "toggle-row") {
+          if (sessionLoopState.pendingTargets?.[scheduleId] === true)
+            return true;
           const row = findSessionLoopRow(scheduleId);
           if (row) {
             void toggleSessionLoop(scheduleId, row.enabled !== true);
@@ -45386,6 +45943,94 @@ Waiting for Claude login output…</pre
         return false;
       }
 
+      function resizeMailHtmlFrame(frame) {
+        if (!frame) return;
+        let doc;
+        try {
+          doc = frame.contentDocument;
+        } catch {
+          return;
+        }
+        if (!doc) return;
+        const bodyHeight = doc.body?.scrollHeight || 0;
+        const documentHeight = doc.documentElement?.scrollHeight || 0;
+        const height = Math.max(360, bodyHeight, documentHeight);
+        frame.style.height = `${Math.ceil(height)}px`;
+      }
+
+      function normalizeMailHtmlFrameLinks(frame) {
+        let doc;
+        try {
+          doc = frame.contentDocument;
+        } catch {
+          return;
+        }
+        if (!doc?.body) return;
+        doc.querySelectorAll("a[href]").forEach((anchor) => {
+          const rawHref = anchor.getAttribute("href") || "";
+          const unsupportedText =
+            getUnsupportedLocalPathFailClosedText(rawHref);
+          if (unsupportedText) {
+            anchor.replaceWith(doc.createTextNode(unsupportedText));
+            return;
+          }
+          const safeHref = normalizeTrustedMailHref(rawHref);
+          if (!safeHref) {
+            anchor.removeAttribute("href");
+            anchor.setAttribute("aria-disabled", "true");
+            return;
+          }
+          anchor.setAttribute("href", safeHref);
+          applyTrustedMailAnchorPolicy(anchor);
+          if (anchor.dataset.boundMailHtmlLink === "true") return;
+          anchor.dataset.boundMailHtmlLink = "true";
+          anchor.addEventListener("click", (event) => {
+            const parsed = parseInteractiveRichHref(
+              anchor.getAttribute("href") || anchor.href || ""
+            );
+            if (!parsed) return;
+            event.preventDefault();
+            event.stopPropagation();
+            void handleInteractiveRichLinkClick(anchor).catch((err) => {
+              showBanner(err.message || "Could not open link.", true);
+            });
+          });
+        });
+      }
+
+      function hydrateMailHtmlFrame(frame) {
+        if (!frame || frame.dataset.boundMailHtmlFrame === "true") return;
+        frame.dataset.boundMailHtmlFrame = "true";
+        const applyFramePolicy = () => {
+          normalizeMailHtmlFrameLinks(frame);
+          resizeMailHtmlFrame(frame);
+          let doc;
+          try {
+            doc = frame.contentDocument;
+          } catch {
+            return;
+          }
+          doc?.querySelectorAll("img,video").forEach((media) => {
+            if (media.dataset.boundMailHtmlResize === "true") return;
+            media.dataset.boundMailHtmlResize = "true";
+            media.addEventListener("load", () => resizeMailHtmlFrame(frame));
+            media.addEventListener("error", () => resizeMailHtmlFrame(frame));
+          });
+          window.setTimeout(() => resizeMailHtmlFrame(frame), 100);
+          window.setTimeout(() => resizeMailHtmlFrame(frame), 600);
+          window.setTimeout(() => resizeMailHtmlFrame(frame), 1600);
+        };
+        frame.addEventListener("load", applyFramePolicy);
+        window.setTimeout(applyFramePolicy, 0);
+      }
+
+      function hydrateMailHtmlFrames(root) {
+        if (!root) return;
+        root
+          .querySelectorAll("iframe[data-oysterun-mail-html-frame='true']")
+          .forEach((frame) => hydrateMailHtmlFrame(frame));
+      }
+
       function hydrateRichContent(root) {
         if (!root) return;
         root