oysterun 0.1.1-beta.5 → 0.1.1

package/dev/client/web/index.html

@@ -286,6 +286,17 @@
         color: var(--ink);
       }
 
+      .browser-titlebar-icon {
+        width: 20px;
+        height: 20px;
+        display: block;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
       .row,
       .toolbar,
       .modal-actions,
@@ -6754,7 +6765,11 @@
 
         function TopBar() {
           return html`
-            <header class="topbar" id="topbar">
+            <header
+              class="topbar"
+              id="topbar"
+              data-oysterun-browser-real-topbar-owner="true"
+            >
               <div class="topbar-left">
                 <button
                   class="icon-btn"
@@ -6774,6 +6789,44 @@
                 >
                   ←
                 </button>
+                <button
+                  class="icon-btn hidden"
+                  id="browser-site-previous-btn"
+                  type="button"
+                  aria-label="Previous browser page"
+                  title="Previous browser page"
+                  data-oysterun-browser-real-topbar-action="previous"
+                  data-oysterun-browser-title-action="previous"
+                  onClick=${call("goBrowserSitePrevious")}
+                >
+                  <svg
+                    class="browser-titlebar-icon"
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M15 18l-6-6 6-6" />
+                  </svg>
+                </button>
+                <button
+                  class="icon-btn hidden"
+                  id="browser-site-next-btn"
+                  type="button"
+                  aria-label="Next browser page"
+                  title="Next browser page"
+                  data-oysterun-browser-real-topbar-action="next"
+                  data-oysterun-browser-title-action="next"
+                  onClick=${call("goBrowserSiteNext")}
+                >
+                  <svg
+                    class="browser-titlebar-icon"
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M9 18l6-6-6-6" />
+                  </svg>
+                </button>
                 <div class="topbar-title" id="topbar-title-block">
                   <button
                     class="brand-link"
@@ -6986,6 +7039,53 @@
                     aria-hidden="true"
                   ></span>
                 </button>
+                <button
+                  class="icon-btn hidden"
+                  id="browser-site-share-btn"
+                  type="button"
+                  aria-label="Copy browser link"
+                  title="Copy browser link"
+                  data-oysterun-browser-real-topbar-action="share"
+                  data-oysterun-browser-title-action="share"
+                  data-oysterun-browser-title-share="copy-link"
+                  data-oysterun-browser-share-target=""
+                  onClick=${call("copyBrowserSurfaceLink")}
+                  disabled
+                >
+                  <svg
+                    class="browser-titlebar-icon"
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07l-1.21 1.21"
+                    />
+                    <path
+                      d="M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 0 0 7.07 7.07l1.21-1.21"
+                    />
+                  </svg>
+                </button>
+                <button
+                  class="icon-btn hidden"
+                  id="browser-site-exit-btn"
+                  type="button"
+                  aria-label="Close browser"
+                  title="Close browser"
+                  data-oysterun-browser-real-topbar-action="close"
+                  data-oysterun-browser-title-action="close"
+                  onClick=${call("exitBrowserSurface")}
+                >
+                  <svg
+                    class="browser-titlebar-icon"
+                    aria-hidden="true"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M18 6 6 18" />
+                    <path d="M6 6l12 12" />
+                  </svg>
+                </button>
               </div>
             </header>
           `;
@@ -7254,6 +7354,29 @@
                             the running session only.
                           </div>
                         </div>
+                        <div
+                          id="create-website-password-row"
+                          class="field hidden"
+                          data-oysterun-p71-session-setup-web-password="local_config_password_mode"
+                        >
+                          <label for="create-website-password"
+                            >Website Password</label
+                          >
+                          <input
+                            id="create-website-password"
+                            type="password"
+                            autocomplete="off"
+                            data-session-setup-web-local="web.password"
+                          />
+                          <div
+                            id="create-website-password-status"
+                            class="field-hint"
+                          >
+                            Password mode stays locked until this Host-local
+                            password is saved to
+                            <code>.oysterun/local.json</code>.
+                          </div>
+                        </div>
                         <label
                           class="toggle-row"
                           data-oysterun-p56postfix1-session-setup-notifications="notifications.enabled"
@@ -7592,7 +7715,9 @@
                         <div class="table-title-main">
                           <strong>Oysterun Update</strong>
                           <div class="table-title-copy">
-                            Check and update the installed Host package.
+                            Check and update the installed Host package. Update
+                            & Restart prepares restore state before the service
+                            restarts.
                           </div>
                         </div>
                       </div>
@@ -7637,7 +7762,7 @@
                               id="host-update-run-btn"
                               onClick=${call("runOysterunUpdate")}
                             >
-                              Update now
+                              Update & Restart
                             </button>
                           </div>
                         </div>
@@ -7847,24 +7972,6 @@
                             ></div>
                           </div>
                         </div>
-                        <div class="kv-label">Website Access</div>
-                        <div class="kv-value">
-                          <div
-                            class="value-stack"
-                            data-oysterun-p56postfix1-host-default-web-access="web.access"
-                          >
-                            <select id="host-default-website-access">
-                              <option value="owner_only">Owner Only</option>
-                              <option value="password">Password</option>
-                              <option value="public">Public</option>
-                            </select>
-                            <div class="field-hint">
-                              Fresh Session Setup uses this shared
-                              <code>web.access</code> default before a folder
-                              config overrides it.
-                            </div>
-                          </div>
-                        </div>
                         <div class="kv-label">Notifications</div>
                         <div class="kv-value">
                           <label
@@ -8541,68 +8648,9 @@ Terminal output will appear here.</pre
               <div class="page-screen">
                 <section
                   class="panel browser-surface-panel"
-                  data-oysterun-browser-title-bar-surface="true"
+                  data-oysterun-browser-surface="true"
                   style="display:flex; flex-direction:column; min-height:calc(100vh - 120px); overflow:hidden"
                 >
-                  <div
-                    class="browser-surface-title-bar"
-                    data-oysterun-browser-title-bar="true"
-                    style="display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border)"
-                  >
-                    <div
-                      class="browser-surface-title-bar-left"
-                      data-oysterun-browser-title-bar-side="left"
-                      style="display:flex; align-items:center; gap:8px"
-                    >
-                      <button
-                        class="btn-soft"
-                        id="browser-site-previous-btn"
-                        type="button"
-                        aria-label="Previous browser page"
-                        title="Previous browser page"
-                        data-oysterun-browser-title-action="previous"
-                        onClick=${call("goBrowserSitePrevious")}
-                        style="width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center"
-                      >
-                        <span aria-hidden="true">&lt;</span>
-                      </button>
-                      <button
-                        class="btn-soft"
-                        id="browser-site-next-btn"
-                        type="button"
-                        aria-label="Next browser page"
-                        title="Next browser page"
-                        data-oysterun-browser-title-action="next"
-                        onClick=${call("goBrowserSiteNext")}
-                        style="width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center"
-                      >
-                        <span aria-hidden="true">&gt;</span>
-                      </button>
-                    </div>
-                    <div
-                      class="browser-surface-title-copy"
-                      data-oysterun-browser-title-bar-center="true"
-                      style="min-width:0"
-                    >
-                      <span class="eyebrow">Website</span>
-                      <h2 id="browser-site-title" style="margin:0">Website</h2>
-                      <div class="meta-text" id="browser-site-context">
-                        Product websites open inside Oysterun.
-                      </div>
-                    </div>
-                    <button
-                      class="btn-primary"
-                      id="browser-site-exit-btn"
-                      type="button"
-                      aria-label="Close browser"
-                      title="Close browser"
-                      data-oysterun-browser-title-action="close"
-                      onClick=${call("exitBrowserSurface")}
-                      style="width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center"
-                    >
-                      <span aria-hidden="true">X</span>
-                    </button>
-                  </div>
                   <div id="browser-site-error" class="error-box hidden"></div>
                   <div
                     id="browser-site-unavailable"
@@ -8620,7 +8668,7 @@ Terminal output will appear here.</pre
                     </div>
                   </div>
                   <div
-                    class="field-hint"
+                    class="field-hint hidden"
                     id="browser-site-status"
                     data-oysterun-browser-status="idle"
                   >
@@ -10041,6 +10089,12 @@ Waiting for Claude login output…</pre
       function createHostSchedulerDraft(row = null, overrides = {}) {
         const editableRule = row?.editable_rule || {};
         const editableTarget = row?.editable_target_binding || {};
+        const setupSnapshot =
+          editableTarget.setup_snapshot &&
+          typeof editableTarget.setup_snapshot === "object" &&
+          !Array.isArray(editableTarget.setup_snapshot)
+            ? editableTarget.setup_snapshot
+            : null;
         const weekdaySource = Array.isArray(editableRule.weekdays)
           ? editableRule.weekdays[0] ?? "tuesday"
           : editableRule.weekday || "tuesday";
@@ -10057,22 +10111,30 @@ Waiting for Claude login output…</pre
           monthDay: Number(editableRule.day_of_month || editableRule.day || 1),
           onceAt: editableRule.at || "",
           timezone: editableRule.timezone || getHostSchedulerTimezone(),
-          targetKind: editableTarget.kind || "session_setup_record",
+          targetKind: editableTarget.kind || "setup_snapshot",
           hostSessionId: editableTarget.host_session_id || "",
           savedSessionId: editableTarget.saved_session_id || "",
           sessionSetupRecordId: editableTarget.session_setup_record_id || "",
           agentId: editableTarget.agent_id || "",
-          sessionSetupPayload: editableTarget.session_setup_payload || null,
+          sessionSetupPayload:
+            setupSnapshot || editableTarget.session_setup_payload || null,
           provider:
+            setupSnapshot?.provider ||
             editableTarget.session_setup_payload?.provider ||
             editableTarget.session_setup_fields?.provider ||
             "",
           model:
+            setupSnapshot?.model ||
             editableTarget.session_setup_payload?.model ||
             editableTarget.session_setup_fields?.model ||
             "",
-          agentFolder: editableTarget.session_setup_fields?.agent_folder || "",
+          agentFolder:
+            setupSnapshot?.agent_folder ||
+            editableTarget.session_setup_fields?.agent_folder ||
+            "",
           permissionMode:
+            setupSnapshot?.permission_mode ||
+            setupSnapshot?.approval_policy ||
             editableTarget.session_setup_payload?.permission_mode ||
             editableTarget.session_setup_payload?.approval_policy ||
             editableTarget.session_setup_fields?.permission_mode ||
@@ -11237,6 +11299,8 @@ Waiting for Claude login output…</pre
           returnPath: "",
           routeTarget: "",
           currentTarget: "",
+          launchUrl: "",
+          launchTarget: "",
           history: [],
           index: -1,
           historyNavigation: false,
@@ -11321,6 +11385,7 @@ Waiting for Claude login output…</pre
           loginQrError: "",
           restartLoading: false,
           restartStatus: "",
+          restartRestore: null,
           update: null,
           updateChecking: false,
           updateRunning: false,
@@ -11378,6 +11443,7 @@ Waiting for Claude login output…</pre
       let terminalViewState = createTerminalViewState();
       let terminalPollTimer = null;
       let browserSurfaceState = createBrowserSurfaceState();
+      let browserSurfaceLaunchRequestId = 0;
       let hostPreferencesState = createHostPreferencesState();
       function getRequestedHostDefaultProvider() {
         const selectedProvider =
@@ -11406,10 +11472,7 @@ Waiting for Claude login output…</pre
             $("host-notification-web-sound-toggle")?.checked !== false,
           notificationSoundAppEnabled:
             $("host-notification-app-sound-toggle")?.checked !== false,
-          defaultWebsiteAccess: normalizeAgentWebAccess(
-            $("host-default-website-access")?.value ||
-              hostPreferencesState.defaultWebsiteAccess
-          ),
+          defaultWebsiteAccess: hostPreferencesState.defaultWebsiteAccess,
           defaultNotificationsEnabled:
             $("host-default-notifications-enabled")?.checked !== false,
           defaultRuntimeCapabilities: readHostDefaultRuntimeCapabilityState(),
@@ -21064,6 +21127,9 @@ Waiting for Claude login output…</pre
         const website = getLiveSessionWebsite(liveSession);
         const access = normalizeAgentWebAccess(website?.access);
         const root = sanitizeRouteText(website?.root);
+        const passwordConfigured = website?.password_configured === true;
+        const passwordModeLocked =
+          access === "password" && passwordConfigured !== true;
         const saving =
           agentProfileWebsiteAccessState.sessionId === liveSession?.sessionId &&
           agentProfileWebsiteAccessState.saving === true;
@@ -21086,13 +21152,43 @@ Waiting for Claude login output…</pre
               <select
                 id="agent-profile-website-access"
                 data-session-profile-web-access="web.access"
+                onchange="window.syncAgentProfileWebsitePasswordMode && window.syncAgentProfileWebsitePasswordMode()"
                 ${saving ? "disabled" : ""}
               >${renderAgentWebAccessOptions(access)}</select>
             </label>
+            <label
+              id="agent-profile-website-password-row"
+              class="field compact-field ${
+                access === "password" ? "" : "hidden"
+              }"
+              for="agent-profile-website-password"
+              data-oysterun-p71-session-profile-web-password="local_config_password_mode"
+              aria-hidden="${access === "password" ? "false" : "true"}"
+            >
+              <span>Website Password</span>
+              <input
+                id="agent-profile-website-password"
+                type="password"
+                autocomplete="off"
+                placeholder="${passwordConfigured ? "Configured" : ""}"
+                data-session-profile-web-local="web.password"
+                ${access === "password" && !saving ? "" : "disabled"}
+              />
+              <div
+                id="agent-profile-website-password-status"
+                class="field-hint"
+              >${esc(
+                passwordModeLocked
+                  ? "Locked: password mode needs a Host-local password saved in .oysterun/local.json."
+                  : passwordConfigured
+                  ? "A Host-local password is configured. Enter a new value only to replace it."
+                  : "Shown only for password mode."
+              )}</div>
+            </label>
             <label class="toggle-row" data-session-profile-update-config-row="web.access">
               <span>
                 <strong>Update .oysterun/config.json</strong>
-                <div class="field-hint">Unchecked saves only this running session. Checked also persists shared web.access.</div>
+                <div class="field-hint">Unchecked saves only this running session. Checked persists shared web.access and any entered Host-local website password.</div>
               </span>
               <input
                 id="agent-profile-website-update-config"
@@ -21137,6 +21233,23 @@ Waiting for Claude login output…</pre
         );
       }
 
+      function syncAgentProfileWebsitePasswordMode() {
+        const access = normalizeAgentWebAccess(
+          $("agent-profile-website-access")?.value
+        );
+        const row = $("agent-profile-website-password-row");
+        const input = $("agent-profile-website-password");
+        const passwordMode = access === "password";
+        if (row) {
+          row.classList.toggle("hidden", !passwordMode);
+          row.setAttribute("aria-hidden", passwordMode ? "false" : "true");
+        }
+        if (input) {
+          input.disabled = !passwordMode;
+          if (!passwordMode) input.value = "";
+        }
+      }
+
       async function saveAgentProfileWebsiteAccess() {
         const liveSession = getSelectedLiveSession();
         if (!liveSession?.sessionId) return;
@@ -21146,12 +21259,20 @@ Waiting for Claude login output…</pre
         const updateConfig =
           $("agent-profile-website-update-config")?.checked === true;
         const nextAccess = normalizeAgentWebAccess(select?.value);
+        const nextWebsitePassword =
+          nextAccess === "password" && updateConfig === true
+            ? String($("agent-profile-website-password")?.value || "").trim()
+            : "";
         const previousWebsite = getLiveSessionWebsite(liveSession);
         const optimisticWebsite = {
           ...(previousWebsite || {}),
           access: nextAccess,
           current_session_only: updateConfig !== true,
           live_session_access_override: updateConfig !== true,
+          password_configured:
+            nextWebsitePassword || previousWebsite?.password_configured === true
+              ? true
+              : previousWebsite?.password_configured === true,
         };
         agentProfileWebsiteAccessState = {
           ...agentProfileWebsiteAccessState,
@@ -21170,6 +21291,9 @@ Waiting for Claude login output…</pre
             {
               session_id: liveSession.sessionId,
               web_access: nextAccess,
+              ...(nextWebsitePassword
+                ? { web_password: nextWebsitePassword }
+                : {}),
               update_config: updateConfig,
             }
           );
@@ -23029,7 +23153,7 @@ Waiting for Claude login output…</pre
         if (screen === "browser") {
           return {
             title: "Browser",
-            subtitle: "View Host websites inside Oysterun.",
+            subtitle: "",
           };
         }
         return { title: "Oysterun", subtitle: "" };
@@ -23040,6 +23164,7 @@ Waiting for Claude login output…</pre
         const root = isRootScreen();
         const isChat = screen === "chat";
         const isAgentProfile = screen === "agent-profile";
+        const isBrowser = screen === "browser";
         const currentRoute = normalizeClientRoute(getCurrentRoute());
         const isExplorer = screen === "explorer";
         const isSchedulerList =
@@ -23055,8 +23180,18 @@ Waiting for Claude login output…</pre
         const activeRouteSessionId = getActiveSessionId();
         const hasSelectedLiveSession = Boolean(selectedLiveSession);
         const hasActiveRouteSession = Boolean(activeRouteSessionId);
-        setVisible("topbar-menu-btn", root && !isSchedulerSubpage);
-        setVisible("topbar-back-btn", !root || isSchedulerSubpage);
+        setVisible(
+          "topbar-menu-btn",
+          root && !isSchedulerSubpage && !isBrowser
+        );
+        setVisible(
+          "topbar-back-btn",
+          (!root || isSchedulerSubpage) && !isBrowser
+        );
+        setVisible("browser-site-previous-btn", isBrowser);
+        setVisible("browser-site-next-btn", isBrowser);
+        setVisible("browser-site-share-btn", isBrowser);
+        setVisible("browser-site-exit-btn", isBrowser);
         setVisible("entry-start-session-btn", screen === "sessions");
         setVisible("topbar-scheduler-new-btn", isSchedulerList);
         setVisible("topbar-session-loop-new-btn", isSessionLoop);
@@ -23156,7 +23291,10 @@ Waiting for Claude login output…</pre
             !isChat &&
             !isAgentProfile
         );
-        setVisible("topbar-chat-center", isChat || isAgentProfile);
+        setVisible(
+          "topbar-chat-center",
+          (isChat || isAgentProfile) && !isBrowser
+        );
         setVisible("stream-state", isChat);
         setVisible(
           "btn-agent-site",
@@ -23222,11 +23360,13 @@ Waiting for Claude login output…</pre
         );
         setText("topbar-page-title", meta.title);
         setText("topbar-page-subtitle", meta.subtitle);
+        setVisible("topbar-page-subtitle", Boolean(meta.subtitle));
         $("topbar")?.classList.toggle("chat-mode", isChat);
         $("topbar")?.classList.toggle("sessions-mode", screen === "sessions");
         $("topbar")?.classList.toggle("scheduler-mode", isSchedulerList);
         $("topbar")?.classList.toggle("explorer-mode", isExplorer);
         $("topbar")?.classList.toggle("session-loop-mode", isSessionLoop);
+        $("topbar")?.classList.toggle("browser-mode", isBrowser);
         $("topbar")?.classList.toggle(
           "scheduler-setup-mode",
           isSchedulerSubpage
@@ -25207,12 +25347,39 @@ Waiting for Claude login output…</pre
           showBanner("Website entry path is unavailable.", true);
           return;
         }
-        void navigateToRoute(
-          buildBrowserRoute({
-            target,
-            source: "web",
-            returnPath: serializeClientRoute(buildWebRoute()),
-          })
+        openWebsiteTargetByRuntime({
+          target,
+          source: "web",
+          returnPath: serializeClientRoute(buildWebRoute()),
+        });
+      }
+
+      function openWebsiteTargetByRuntime({
+        target = "",
+        sessionId = "",
+        source = "",
+        returnPath = "",
+      } = {}) {
+        const normalizedTarget = normalizeBrowserSiteTarget(target);
+        if (!normalizedTarget) {
+          showToast("Website target is unavailable.", true, 3200);
+          return;
+        }
+        if (isOysterunCapacitorIOSRuntime()) {
+          void navigateToRoute(
+            buildBrowserRoute({
+              target: normalizedTarget,
+              sessionId,
+              source,
+              returnPath,
+            })
+          );
+          return;
+        }
+        window.open(
+          new URL(normalizedTarget, BASE).toString(),
+          "_blank",
+          "noopener,noreferrer"
         );
       }
 
@@ -25509,7 +25676,11 @@ Waiting for Claude login output…</pre
       function getInteractiveRichHrefRouteSurface(rawHref) {
         const parsed = parseInteractiveRichHref(rawHref);
         if (!parsed) return "";
-        if (parsed.kind === "host-site") return "app_browser";
+        if (parsed.kind === "host-site") {
+          return isOysterunCapacitorIOSRuntime()
+            ? "app_browser"
+            : "browser_new_tab";
+        }
         if (parsed.kind === "file-preview") return "file_preview";
         if (parsed.kind === "explorer") return "explorer";
         if (parsed.kind === "unsupported-local-path") return "unsupported";
@@ -26576,6 +26747,10 @@ Waiting for Claude login output…</pre
           loginQrLoading: false,
           loginQrError: "",
           restartLoading: false,
+          restartRestore:
+            data.restart_restore && typeof data.restart_restore === "object"
+              ? data.restart_restore
+              : hostPreferencesState.restartRestore,
           update:
             data.update && typeof data.update === "object"
               ? data.update
@@ -28000,15 +28175,6 @@ Waiting for Claude login output…</pre
         if ($("host-default-provider")) {
           renderHostDefaultProviderOptions();
         }
-        const hostDefaultWebsiteAccess = $("host-default-website-access");
-        if (
-          hostDefaultWebsiteAccess &&
-          document.activeElement !== hostDefaultWebsiteAccess
-        ) {
-          hostDefaultWebsiteAccess.value = normalizeAgentWebAccess(
-            hostPreferencesState.defaultWebsiteAccess
-          );
-        }
         const hostDefaultNotifications = $(
           "host-default-notifications-enabled"
         );
@@ -28163,9 +28329,9 @@ Waiting for Claude login output…</pre
             disabled ||
             hostPreferencesState.restartLoading ||
             !hostPreferencesState.hostRestartSupported ||
-            !hostPreferencesState.directHostUrlRestartRequired;
+            hasDirectAccessDraftChanges;
           restartButton.textContent = hostPreferencesState.restartLoading
-            ? "Restarting..."
+            ? "Preparing restore..."
             : "Restart Host";
         }
         const update = hostPreferencesState.update || {};
@@ -28184,7 +28350,7 @@ Waiting for Claude login output…</pre
             updateStatus = "Oysterun is up to date for this channel.";
           } else if (update.update_supported === false) {
             updateStatus =
-              "Update now is only available on the production npm Host stack.";
+              "Update & Restart is only available on the production npm Host stack.";
           } else {
             updateStatus = "Click Check for updates to query npm.";
           }
@@ -28209,8 +28375,8 @@ Waiting for Claude login output…</pre
             update.update_supported !== true ||
             update.update_available !== true;
           updateRunButton.textContent = hostPreferencesState.updateRunning
-            ? "Updating..."
-            : "Update now";
+            ? "Preparing restore..."
+            : "Update & Restart";
         }
         const qrPanel = $("host-login-qr-panel");
         const qr = hostPreferencesState.loginQr;
@@ -28279,7 +28445,6 @@ Waiting for Claude login output…</pre
           "disabled",
           defaultProviderDisabled
         );
-        $("host-default-website-access")?.toggleAttribute("disabled", disabled);
         $("host-default-notifications-enabled")?.toggleAttribute(
           "disabled",
           disabled
@@ -28385,11 +28550,28 @@ Waiting for Claude login output…</pre
 
       async function restartHostFromPreferences() {
         if (hostPreferencesState.restartLoading) return;
-        if (!hostPreferencesState.directHostUrlRestartRequired) return;
+        if (
+          hostPreferencesState.loading ||
+          hostPreferencesState.saving ||
+          !hostPreferencesState.hostRestartSupported
+        ) {
+          return;
+        }
+        if (hasUnsavedHostPreferencesChanges()) {
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            restartStatus:
+              "Save Host Preferences changes before restarting Host.",
+            loginQrError: "",
+          };
+          renderHostPreferences();
+          return;
+        }
         hostPreferencesState = {
           ...hostPreferencesState,
           restartLoading: true,
-          restartStatus: "Scheduling Host restart...",
+          restartStatus:
+            "Preparing restore state for existing sessions and enabled loops...",
           loginQrError: "",
         };
         renderHostPreferences();
@@ -28400,8 +28582,10 @@ Waiting for Claude login output…</pre
           hostPreferencesState = {
             ...hostPreferencesState,
             restartLoading: false,
+            restartRestore:
+              data.restart_restore || hostPreferencesState.restartRestore,
             restartStatus:
-              "Host restart scheduled. Reconnect after the service comes back.",
+              "Host restart scheduled. Existing sessions and enabled loops will be restored after reconnect; active work may show interrupted status.",
           };
           renderHostPreferences();
           if (redirectUrl) {
@@ -28482,13 +28666,14 @@ Waiting for Claude login output…</pre
           return;
         }
         const confirmed = window.confirm(
-          "Updating Oysterun restarts the Host. Existing live runtime sessions and running loops will close; chat history remains and supported sessions can be resumed from Sessions after restart. Continue?"
+          "Updating Oysterun restarts the Host. Oysterun will prepare restore state for existing sessions and enabled in-session loops; active provider, terminal, loop, or scheduler work may be marked interrupted and will not be replayed. Continue?"
         );
         if (!confirmed) return;
         hostPreferencesState = {
           ...hostPreferencesState,
           updateRunning: true,
-          updateStatus: "Scheduling Oysterun update...",
+          updateStatus:
+            "Resolving exact package version and preparing restore state...",
           updateError: "",
         };
         renderHostPreferences();
@@ -28499,9 +28684,11 @@ Waiting for Claude login output…</pre
           hostPreferencesState = {
             ...hostPreferencesState,
             update: data,
+            restartRestore:
+              data.restart_restore || hostPreferencesState.restartRestore,
             updateRunning: false,
             updateStatus:
-              "Oysterun update scheduled. Reconnect after the service comes back.",
+              "Oysterun update and restore-aware restart scheduled. Reconnect after the service comes back.",
             updateError: "",
           };
           renderHostPreferences();
@@ -28565,9 +28752,6 @@ Waiting for Claude login output…</pre
           ? codexCommandInput.value.trim()
           : "";
         const nextDefaultProvider = getRequestedHostDefaultProvider();
-        const nextDefaultWebsiteAccess = normalizeAgentWebAccess(
-          $("host-default-website-access")?.value
-        );
         const nextDefaultNotificationsEnabled =
           $("host-default-notifications-enabled")?.checked !== false;
         const nextDefaultRuntimeCapabilities =
@@ -28577,9 +28761,6 @@ Waiting for Claude login output…</pre
           interface_type: normalizeFirstPartyInterfaceType(
             HOST_DEFAULT_SESSION_DEFAULTS.interfaceType
           ),
-          web: {
-            access: nextDefaultWebsiteAccess,
-          },
           notifications: {
             enabled: nextDefaultNotificationsEnabled,
           },
@@ -28616,7 +28797,6 @@ Waiting for Claude login output…</pre
           publicBaseUrl: requestedPublicBaseUrl,
           defaultBrowsePath: requestedPath,
           defaultProvider: nextDefaultProvider,
-          defaultWebsiteAccess: nextDefaultWebsiteAccess,
           defaultNotificationsEnabled: nextDefaultNotificationsEnabled,
           defaultRuntimeCapabilities: nextDefaultRuntimeCapabilities,
           effectiveDefaultProvider:
@@ -29231,12 +29411,43 @@ Waiting for Claude login output…</pre
         const select = $("create-website-access");
         if (!select) return;
         select.value = normalizeAgentWebAccess(value);
+        syncCreateWebsitePasswordMode();
       }
 
       function getCreateWebsiteAccessValue() {
         return normalizeAgentWebAccess($("create-website-access")?.value);
       }
 
+      function getCreateWebsitePasswordValue() {
+        return String($("create-website-password")?.value || "").trim();
+      }
+
+      function setCreateWebsitePasswordValue(value = "") {
+        const input = $("create-website-password");
+        if (!input) return;
+        input.value = String(value || "");
+      }
+
+      function syncCreateWebsitePasswordMode() {
+        const row = $("create-website-password-row");
+        const input = $("create-website-password");
+        const status = $("create-website-password-status");
+        const passwordMode = getCreateWebsiteAccessValue() === "password";
+        if (row) {
+          row.classList.toggle("hidden", !passwordMode);
+          row.setAttribute("aria-hidden", passwordMode ? "false" : "true");
+        }
+        if (input) {
+          input.disabled = !passwordMode;
+          if (!passwordMode) input.value = "";
+        }
+        if (status) {
+          status.textContent = passwordMode
+            ? "Password mode stays locked until this Host-local password is saved to .oysterun/local.json."
+            : "";
+        }
+      }
+
       function setCreateNotificationsEnabledValue(value) {
         const input = $("create-notifications-enabled");
         if (!input) return;
@@ -29840,6 +30051,8 @@ Waiting for Claude login output…</pre
           returnPath: normalizeBrowserReturnPath(returnPath),
           routeTarget: normalizedTarget,
           currentTarget: normalizedTarget,
+          launchUrl: "",
+          launchTarget: "",
           history: normalizedTarget ? [normalizedTarget] : [],
           index: normalizedTarget ? 0 : -1,
           loading: Boolean(normalizedTarget),
@@ -29864,7 +30077,49 @@ Waiting for Claude login output…</pre
         }
       }
 
-      function syncBrowserSurfaceFrame(force = false) {
+      async function createBrowserSurfaceHandoffLaunch(target) {
+        const normalizedTarget = normalizeBrowserSiteTarget(target);
+        if (!normalizedTarget) {
+          throw new Error(
+            "Only /sites/<agent_id>/ targets open in this surface."
+          );
+        }
+        const data = await apiWithAuthRetry("POST", "/api/browser/handoff", {
+          target: normalizedTarget,
+        });
+        const rawLaunchUrl =
+          typeof data?.launch_url === "string" ? data.launch_url.trim() : "";
+        if (!rawLaunchUrl) {
+          throw new Error("Browser handoff response missing launch_url.");
+        }
+        const launchUrl = new URL(rawLaunchUrl, BASE);
+        if (
+          launchUrl.origin !== BASE ||
+          !launchUrl.pathname.startsWith("/browser-handoff/")
+        ) {
+          throw new Error(
+            "Browser handoff response returned an invalid launch_url."
+          );
+        }
+        const normalizedTargetPath =
+          normalizeBrowserSiteTarget(data?.target_path || normalizedTarget) ||
+          normalizedTarget;
+        return {
+          launchUrl: `${launchUrl.pathname}${launchUrl.search}${launchUrl.hash}`,
+          targetPath: normalizedTargetPath,
+        };
+      }
+
+      function getBrowserSurfaceHandoffErrorMessage(err) {
+        if (isUnauthorizedError(err)) {
+          return "Website unavailable. Browser handoff requires Host dashboard authentication.";
+        }
+        return err?.message
+          ? `Website unavailable. Browser handoff failed: ${err.message}`
+          : "Website unavailable. Browser handoff failed.";
+      }
+
+      async function syncBrowserSurfaceFrame(force = false) {
         const frame = $("browser-site-frame");
         if (!frame) return;
         const target = browserSurfaceState.currentTarget || "";
@@ -29875,17 +30130,67 @@ Waiting for Claude login output…</pre
           }
           return;
         }
-        const frameAttributeTarget = normalizeBrowserSiteTarget(
-          frame.getAttribute("src") || ""
-        );
         const frameLocationTarget = getBrowserSurfaceFrameLocationTarget(frame);
+        if (!force && frameLocationTarget === target) return;
+
+        let launchUrl = browserSurfaceState.launchUrl || "";
         if (
           force ||
-          frameAttributeTarget !== target ||
-          frameLocationTarget !== target
+          !launchUrl ||
+          browserSurfaceState.launchTarget !== target
         ) {
-          frame.setAttribute("data-oysterun-browser-expected-target", target);
-          frame.src = new URL(target, BASE).href;
+          const requestId = ++browserSurfaceLaunchRequestId;
+          browserSurfaceState = {
+            ...browserSurfaceState,
+            loading: true,
+            unavailable: false,
+            error: "",
+            status: "Opening website...",
+          };
+          renderBrowserSurfaceView();
+          let handoff;
+          try {
+            handoff = await createBrowserSurfaceHandoffLaunch(target);
+          } catch (err) {
+            if (requestId !== browserSurfaceLaunchRequestId) return;
+            markBrowserSurfaceUnavailable(
+              target,
+              getBrowserSurfaceHandoffErrorMessage(err)
+            );
+            renderBrowserSurfaceView();
+            return;
+          }
+          if (
+            requestId !== browserSurfaceLaunchRequestId ||
+            browserSurfaceState.currentTarget !== target
+          ) {
+            return;
+          }
+          launchUrl = handoff.launchUrl;
+          browserSurfaceState = {
+            ...browserSurfaceState,
+            currentTarget: handoff.targetPath,
+            launchUrl: handoff.launchUrl,
+            launchTarget: handoff.targetPath,
+            loading: true,
+            unavailable: false,
+            error: "",
+            status: "Opening website...",
+          };
+          renderBrowserSurfaceView();
+        }
+
+        const expectedSrc = new URL(launchUrl, BASE).href;
+        if (force || frame.getAttribute("src") !== expectedSrc) {
+          frame.setAttribute(
+            "data-oysterun-browser-expected-target",
+            browserSurfaceState.currentTarget || target
+          );
+          frame.setAttribute(
+            "data-oysterun-browser-launch-surface",
+            "browser_handoff"
+          );
+          frame.src = expectedSrc;
         }
       }
 
@@ -29910,11 +30215,35 @@ Waiting for Claude login output…</pre
         return "ready";
       }
 
+      function getBrowserSurfaceShareTarget() {
+        if (browserSurfaceState.loading || browserSurfaceState.unavailable) {
+          return "";
+        }
+        return normalizeBrowserSiteTarget(
+          browserSurfaceState.currentTarget || browserSurfaceState.routeTarget
+        );
+      }
+
+      async function copyBrowserSurfaceLink() {
+        const target = getBrowserSurfaceShareTarget();
+        if (!target) {
+          showToast("Website link is unavailable.", true, 3200);
+          return;
+        }
+        try {
+          await writeTextToClipboard(new URL(target, BASE).toString());
+          showToast("Copied browser link.");
+        } catch (err) {
+          showToast(err.message || "Could not copy browser link.", true, 4200);
+        }
+      }
+
       function renderBrowserSurfaceView() {
         const previousBtn = $("browser-site-previous-btn");
         const nextBtn = $("browser-site-next-btn");
+        const shareBtn = $("browser-site-share-btn");
         const frame = $("browser-site-frame");
-        const target = browserSurfaceState.currentTarget || "";
+        const shareTarget = getBrowserSurfaceShareTarget();
         const stateLabel = getBrowserSurfaceStateLabel();
         if (previousBtn) {
           previousBtn.disabled =
@@ -29929,20 +30258,16 @@ Waiting for Claude login output…</pre
             browserSurfaceState.index < 0 ||
             browserSurfaceState.index >= browserSurfaceState.history.length - 1;
         }
+        if (shareBtn) {
+          shareBtn.disabled = !shareTarget;
+          shareBtn.setAttribute(
+            "data-oysterun-browser-share-target",
+            shareTarget
+          );
+        }
         if (frame) {
           frame.classList.toggle("hidden", browserSurfaceState.unavailable);
         }
-        setText("browser-site-title", target || "Website unavailable");
-        setText(
-          "browser-site-context",
-          browserSurfaceState.source === "chat" || browserSurfaceState.sessionId
-            ? "Opened from Chat. Close returns to the source chat."
-            : browserSurfaceState.source === "mail"
-            ? "Opened from Mail. Close returns to the source Mail item."
-            : browserSurfaceState.source === "preview"
-            ? "Opened from Preview. Close returns to the source preview."
-            : "Opened from Web. Close returns to the Web tab."
-        );
         setText(
           "browser-site-status",
           browserSurfaceState.status || stateLabel
@@ -29984,6 +30309,8 @@ Waiting for Claude login output…</pre
           currentTarget: normalizedTarget || browserSurfaceState.currentTarget,
           loading: false,
           unavailable: true,
+          launchUrl: "",
+          launchTarget: "",
           historyNavigation: false,
           error:
             message ||
@@ -30055,6 +30382,8 @@ Waiting for Claude login output…</pre
           currentTarget: normalizedTarget,
           history,
           index,
+          launchUrl: "",
+          launchTarget: "",
           loading: false,
           unavailable: false,
           historyNavigation: false,
@@ -31630,8 +31959,14 @@ Waiting for Claude login output…</pre
       function getHostSchedulerSourceSetupSnapshot(row) {
         const target =
           row?.editable_target_binding || row?.target_binding || {};
+        const setupSnapshot =
+          target.setup_snapshot &&
+          typeof target.setup_snapshot === "object" &&
+          !Array.isArray(target.setup_snapshot)
+            ? target.setup_snapshot
+            : null;
         const payload = sanitizeSchedulerSessionSetupPayload(
-          target.session_setup_payload
+          setupSnapshot || target.session_setup_payload
         );
         const fields =
           target.session_setup_fields &&
@@ -31640,7 +31975,11 @@ Waiting for Claude login output…</pre
             ? target.session_setup_fields
             : {};
         const provider =
-          payload.provider || fields.provider || target.provider || "";
+          setupSnapshot?.provider ||
+          payload.provider ||
+          fields.provider ||
+          target.provider ||
+          "";
         const model = payload.model || fields.model || target.model || "";
         const permissionMode =
           payload.permission_mode ||
@@ -31648,10 +31987,14 @@ Waiting for Claude login output…</pre
           fields.permission_mode ||
           fields.approval_policy ||
           "";
-        const agentFolder = fields.agent_folder || target.agent_folder || "";
+        const agentFolder =
+          setupSnapshot?.agent_folder ||
+          fields.agent_folder ||
+          target.agent_folder ||
+          "";
         const agentId = target.agent_id || row?.agent_id || "";
         if (
-          target.kind !== "session_setup_record" ||
+          !["setup_snapshot", "session_setup_record"].includes(target.kind) ||
           (!provider && !model && !agentFolder && !agentId)
         ) {
           return null;
@@ -31672,7 +32015,7 @@ Waiting for Claude login output…</pre
         return createHostSchedulerDraft(row, {
           id: "__new__",
           enabled: true,
-          targetKind: "session_setup_record",
+          targetKind: "setup_snapshot",
           hostSessionId: "",
           savedSessionId: "",
           sessionSetupRecordId: "",
@@ -31845,7 +32188,7 @@ Waiting for Claude login output…</pre
             "Once at"
           ),
           timezone: baseDraft.timezone || getHostSchedulerTimezone(),
-          targetKind: "session_setup_record",
+          targetKind: "setup_snapshot",
           hostSessionId: "",
           savedSessionId: "",
           sessionSetupRecordId: "",
@@ -32120,7 +32463,7 @@ Waiting for Claude login output…</pre
         const currentDraft = getCurrentHostSchedulerSetupDraftForReturn();
         const baseDraft = {
           ...currentDraft,
-          targetKind: "session_setup_record",
+          targetKind: "setup_snapshot",
           hostSessionId: "",
           savedSessionId: "",
           sessionSetupRecordId: "",
@@ -33091,7 +33434,7 @@ Waiting for Claude login output…</pre
         const targetKind =
           existingDraft.targetKind === "saved_session"
             ? "saved_session"
-            : "session_setup_record";
+            : "setup_snapshot";
         return {
           id: editorEl.getAttribute("data-scheduler-editor-id") || "__new__",
           commandText,
@@ -33187,32 +33530,35 @@ Waiting for Claude login output…</pre
             (record) => record.session_id === draft.savedSessionId
           );
           if (!historyRecord) throw new Error("Choose a saved session target");
+          const snapshot = buildHostSchedulerSessionSetupPayload(draft);
+          snapshot.agent_folder =
+            snapshot.agent_folder || historyRecord.agent_folder || "";
+          if (!snapshot.agent_folder) {
+            throw new Error("Saved session target is missing an agent folder");
+          }
           return {
-            kind: "saved_session",
-            saved_session_id: historyRecord.session_id,
+            kind: "setup_snapshot",
             agent_id: draft.agentId || historyRecord.agent_id,
-            session_setup_payload: draft.sessionSetupPayload || undefined,
+            setup_snapshot: snapshot,
           };
         }
-        const sessionSetupRecordId =
-          draft.sessionSetupRecordId ||
-          `setup-scheduler-${Date.now().toString(36)}`;
         if (!draft.agentId) {
           throw new Error(
             "Session Setup scheduler targets require an Agent ID"
           );
         }
+        const setupSnapshot = buildHostSchedulerSessionSetupPayload(draft);
+        setupSnapshot.agent_folder =
+          draft.agentFolder || setupSnapshot.agent_folder || "";
+        if (!setupSnapshot.agent_folder) {
+          throw new Error(
+            "Session Setup scheduler targets require a start folder"
+          );
+        }
         return {
-          kind: "session_setup_record",
-          session_setup_record_id: sessionSetupRecordId,
+          kind: "setup_snapshot",
           agent_id: draft.agentId,
-          session_setup_payload: buildHostSchedulerSessionSetupPayload(draft),
-          session_setup_fields: {
-            provider: draft.provider,
-            model: draft.model,
-            agent_folder: draft.agentFolder,
-            permission_mode: draft.permissionMode,
-          },
+          setup_snapshot: setupSnapshot,
         };
       }
 
@@ -34039,16 +34385,14 @@ Waiting for Claude login output…</pre
         }
         const liveSession = getSelectedLiveSession();
         const sessionId = liveSession?.sessionId || getActiveSessionId() || "";
-        void navigateToRoute(
-          buildBrowserRoute({
-            target: entryPath,
-            sessionId,
-            source: "chat",
-            returnPath: sessionId
-              ? serializeClientRoute(buildChatRoute(sessionId))
-              : "",
-          })
-        );
+        openWebsiteTargetByRuntime({
+          target: entryPath,
+          sessionId,
+          source: "chat",
+          returnPath: sessionId
+            ? serializeClientRoute(buildChatRoute(sessionId))
+            : "",
+        });
       }
 
       function resetStats() {
@@ -39286,15 +39630,18 @@ Waiting for Claude login output…</pre
           return true;
         }
         if (parsed.kind === "host-site") {
+          const siteTarget = `${parsed.targetPath}${parsed.hash || ""}`;
+          if (!isOysterunCapacitorIOSRuntime()) {
+            window.location.assign(siteTarget);
+            return true;
+          }
           const context = getInteractiveLinkRouteContext();
           const sourceContext = getBrowserRouteSourceContext();
-          await navigateToRoute(
-            buildBrowserRoute({
-              target: `${parsed.targetPath}${parsed.hash || ""}`,
-              ...sourceContext,
-              sessionId: context.sessionId || sourceContext.sessionId || "",
-            })
-          );
+          openWebsiteTargetByRuntime({
+            target: `${parsed.targetPath}${parsed.hash || ""}`,
+            ...sourceContext,
+            sessionId: context.sessionId || sourceContext.sessionId || "",
+          });
           return true;
         }
         return false;
@@ -39443,8 +39790,11 @@ Waiting for Claude login output…</pre
         const allowedPaths = parseAllowedPathsInput(
           $("create-allowed-paths").value
         );
+        const webAccess = getCreateWebsiteAccessValue();
+        const webPassword =
+          webAccess === "password" ? getCreateWebsitePasswordValue() : "";
 
-        return {
+        const payload = {
           provider: createRuntime,
           session_name: getCreateSessionNameValue() || undefined,
           interface_type: normalizeFirstPartyInterfaceType(
@@ -39463,12 +39813,16 @@ Waiting for Claude login output…</pre
               : undefined,
           allow_dangerously_skip_permissions: allowDanger,
           dangerous_mode: allowDanger,
-          web_access: getCreateWebsiteAccessValue(),
+          web_access: webAccess,
           notifications_enabled: getCreateNotificationsEnabledValue(),
           ...readTelegramFieldsPayload("create"),
           allowed_paths: allowedPaths,
           runtime_capabilities: readCreateRuntimeCapabilityState(),
         };
+        if (webPassword) {
+          payload.web_password = webPassword;
+        }
+        return payload;
       }
 
       function readCreateFormRequest() {
@@ -40976,6 +41330,23 @@ Waiting for Claude login output…</pre
                   data.website?.access ||
                   data.rawConfig?.web?.access
               );
+              const websitePasswordInput = $("create-website-password");
+              if (websitePasswordInput) {
+                websitePasswordInput.placeholder =
+                  data.website?.password_configured === true
+                    ? "Configured"
+                    : "";
+              }
+              const websitePasswordStatus = $("create-website-password-status");
+              if (
+                websitePasswordStatus &&
+                getCreateWebsiteAccessValue() === "password"
+              ) {
+                websitePasswordStatus.textContent =
+                  data.website?.password_configured === true
+                    ? "A Host-local website password is already configured. Enter a new value only to replace it."
+                    : "Password mode is locked until this Host-local password is saved to .oysterun/local.json.";
+              }
               setCreateNotificationsEnabledValue(
                 data.notifications?.notifications_enabled ??
                   data.rawConfig?.notifications?.enabled
@@ -41445,8 +41816,12 @@ Waiting for Claude login output…</pre
         "change",
         markCreatePreferencesEdited
       );
-      $("create-website-access").addEventListener(
-        "change",
+      $("create-website-access").addEventListener("change", () => {
+        syncCreateWebsitePasswordMode();
+        markCreatePreferencesEdited();
+      });
+      $("create-website-password").addEventListener(
+        "input",
         markCreatePreferencesEdited
       );
       $("create-notifications-enabled").addEventListener(
@@ -41518,7 +41893,6 @@ Waiting for Claude login output…</pre
         "host-notification-web-sound-toggle",
         "host-notification-app-sound-toggle",
         "host-default-provider",
-        "host-default-website-access",
         "host-default-notifications-enabled",
         "host-claude-command",
         "host-codex-command",
@@ -41603,6 +41977,8 @@ Waiting for Claude login output…</pre
       window.loadHostSchedulerSchedules = loadHostSchedulerSchedules;
       window.openCurrentAgentProfile = openCurrentAgentProfile;
       window.saveAgentProfileWebsiteAccess = saveAgentProfileWebsiteAccess;
+      window.syncAgentProfileWebsitePasswordMode =
+        syncAgentProfileWebsitePasswordMode;
       window.updateAgentProfileTelegramSettingsDraft =
         updateAgentProfileTelegramSettingsDraft;
       window.saveAgentProfileTelegramSettings =