overmux 0.0.9 → 0.0.11

package/src/internal/client/push-service-worker.ts

@@ -0,0 +1,118 @@
+import { notificationLinkSchema } from "@overmux/shared";
+import { notificationEventSchema } from "../shared/protocol";
+import {
+  pushNotificationBadgePath,
+  pushNotificationIconPath,
+} from "../shared/routes";
+
+// Only the worker APIs this push-only entry uses. No fetch handler or offline shell.
+type WorkerClient = {
+  url: string;
+  focus: () => Promise<WorkerClient>;
+  navigate: (url: string) => Promise<WorkerClient | null>;
+};
+type LifetimeEvent = { waitUntil: (work: Promise<unknown>) => void };
+type WorkerEvents = {
+  install: LifetimeEvent;
+  push: LifetimeEvent & { data?: { json: () => unknown } };
+  notificationclick: LifetimeEvent & {
+    notification: { close: () => void; data?: { link?: unknown } };
+  };
+};
+const worker = globalThis as unknown as {
+  addEventListener: <Type extends keyof WorkerEvents>(
+    type: Type,
+    listener: (event: WorkerEvents[Type]) => void,
+  ) => void;
+  clients: {
+    matchAll: (options: {
+      includeUncontrolled: boolean;
+      type: "window";
+    }) => Promise<WorkerClient[]>;
+    openWindow: (url: string) => Promise<WorkerClient | null>;
+  };
+  location: Location;
+  registration: {
+    showNotification: (
+      title: string,
+      options: NotificationOptions,
+    ) => Promise<void>;
+  };
+  skipWaiting: () => Promise<void>;
+};
+
+const notificationDestination = (link: unknown) => {
+  const parsed = notificationLinkSchema.safeParse(link);
+  if (!parsed.success) {
+    return undefined;
+  }
+  const destination = new URL(parsed.data, worker.location.origin);
+  // Notification links support relative paths and HTTP URLs, but background clicks
+  // must never send an authenticated PWA window to another origin.
+  return destination.origin === worker.location.origin
+    ? destination.href
+    : undefined;
+};
+
+const focusOrOpen = async (link: unknown) => {
+  const destination = notificationDestination(link);
+  const clients = await worker.clients.matchAll({
+    includeUncontrolled: true,
+    type: "window",
+  });
+  const client =
+    clients.find((candidate) => candidate.url === destination) ??
+    clients.find(
+      (candidate) => new URL(candidate.url).origin === worker.location.origin,
+    );
+  if (!client) {
+    await worker.clients.openWindow(
+      destination ?? new URL("/", worker.location.origin).href,
+    );
+    return;
+  }
+  // Without a safe link, preserve the user's current route. A disappearing client
+  // can return null from navigate; open a fresh window rather than lose the click.
+  const navigated =
+    destination && client.url !== destination
+      ? await client.navigate(destination)
+      : client;
+  if (navigated) {
+    await navigated.focus();
+  } else {
+    await worker.clients.openWindow(destination!);
+  }
+};
+
+worker.addEventListener("install", (event) => {
+  // This worker owns no caches or page traffic, so replacing it need not wait for tabs.
+  event.waitUntil(worker.skipWaiting());
+});
+
+worker.addEventListener("push", (event) => {
+  let input: unknown;
+  try {
+    input = event.data?.json();
+  } catch {
+    return;
+  }
+  const payload = notificationEventSchema.safeParse(input);
+  if (!payload.success) {
+    return;
+  }
+  const { notification } = payload.data;
+  event.waitUntil(
+    worker.registration.showNotification(notification.title, {
+      body: notification.body,
+      // Bypass cached transparent icons after adding the light background.
+      icon: `${pushNotificationIconPath}?v=2`,
+      badge: pushNotificationBadgePath,
+      data: { link: notification.open?.link },
+    }),
+  );
+});
+
+worker.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  event.waitUntil(focusOrOpen(event.notification.data?.link));
+});

package/src/internal/client/register-push-worker.ts

@@ -0,0 +1,63 @@
+// Bound registration as well as activation: serviceWorker.ready can wait forever
+// when no worker exists, and an installing worker can fail or stall indefinitely.
+export const registerPushWorker = () =>
+  new Promise<ServiceWorkerRegistration>((resolve, reject) => {
+    let watched: ServiceWorker | null = null;
+    let settled = false;
+    const finish = (
+      error?: Error,
+      registration?: ServiceWorkerRegistration,
+    ) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      clearTimeout(timeout);
+      watched?.removeEventListener("statechange", onStateChange);
+      if (error) {
+        reject(error);
+      } else {
+        resolve(registration!);
+      }
+    };
+    let registered: ServiceWorkerRegistration | undefined;
+    const onStateChange = () => {
+      if (watched?.state === "activated") {
+        finish(undefined, registered);
+      } else if (watched?.state === "redundant") {
+        finish(
+          new Error("The background notification worker failed to activate"),
+        );
+      }
+    };
+    const timeout = setTimeout(() => {
+      finish(
+        new Error("Timed out starting the background notification worker"),
+      );
+    }, 10_000);
+    void navigator.serviceWorker
+      .register("/sw.js", { scope: "/", updateViaCache: "none" })
+      .then(
+        (registration) => {
+          // The browser registration itself cannot be cancelled; ignore late results.
+          if (settled) {
+            return;
+          }
+          registered = registration;
+          watched =
+            registration.active ??
+            registration.installing ??
+            registration.waiting;
+          if (!watched) {
+            finish(
+              new Error("No background notification worker was installed"),
+            );
+            return;
+          }
+          watched.addEventListener("statechange", onStateChange);
+          onStateChange();
+        },
+        (error: unknown) =>
+          finish(error instanceof Error ? error : new Error(String(error))),
+      );
+  });

package/src/internal/client/shortcuts.tsx

@@ -8,9 +8,12 @@ import {
   type RefObject,
 } from "react";
 import {
+  keyBindingSequence,
   matchesKeyBinding,
-  platformBinding,
+  matchesShortcutBindingPrefix,
+  normalizedShortcutBinding,
   type KeyBinding,
+  type ShortcutBinding,
 } from "@overmux/keybindings";
 
 import {
@@ -19,7 +22,6 @@ import {
   shortcutMediaQueries,
   type ClientAppDefinition,
   type CommandHandle,
-  type ShortcutBinding,
 } from "./client-definition";
 import {
   CommandsContext,
@@ -29,25 +31,6 @@ import {
   type RegisteredCommand,
 } from "./commands";
 
-const bindingSequence = (binding: ShortcutBinding): KeyBinding[] =>
-  typeof binding === "string" ? [binding] : [...binding];
-
-const normalizedBinding = (binding: ShortcutBinding): string[] =>
-  bindingSequence(binding).map((key) => platformBinding(key));
-
-const sequenceMatches = (
-  binding: ShortcutBinding,
-  pending: string[],
-  event: KeyboardEvent,
-) => {
-  const sequence = normalizedBinding(binding);
-  return (
-    sequence.length > pending.length &&
-    pending.every((key, index) => sequence[index] === key) &&
-    matchesKeyBinding(sequence[pending.length] as KeyBinding, event)
-  );
-};
-
 const isTextInput = (element: Element | null) =>
   element instanceof HTMLInputElement ||
   element instanceof HTMLSelectElement ||
@@ -67,7 +50,7 @@ const acceptsTextInput = (bindings: readonly ShortcutBinding[]) => {
     return true;
   }
   return bindings.some((binding) => {
-    const sequence = bindingSequence(binding);
+    const sequence = keyBindingSequence(binding);
     return (
       sequence.length > 1 ||
       sequence[0]?.startsWith("F") ||
@@ -260,12 +243,12 @@ export const ShortcutHost = ({
     window.addEventListener("focusin", refreshFocus);
     return () => window.removeEventListener("focusin", refreshFocus);
   }, []);
+  const shortcuts = flattenShortcuts(
+    definition,
+    (media) => window.matchMedia(media).matches,
+  );
   useEffect(() => {
-    const shortcuts = flattenShortcuts(
-      definition,
-      (media) => window.matchMedia(media).matches,
-    );
-    let pending: string[] = [];
+    let pending: KeyBinding[] = [];
     let pendingEvents: KeyboardEvent[] = [];
     let pendingTarget: ShortcutInputTarget | undefined;
     let timeout: number | undefined;
@@ -302,8 +285,11 @@ export const ShortcutHost = ({
         shortcut.bindings
           .filter(
             (binding) =>
-              sequenceMatches(binding, pending, event) &&
-              canRunShortcut(shortcut, event, registrations),
+              matchesShortcutBindingPrefix({
+                binding,
+                input: event,
+                pending,
+              }) && canRunShortcut(shortcut, event, registrations),
           )
           .map((binding) => ({ binding, shortcut })),
       );
@@ -317,7 +303,7 @@ export const ShortcutHost = ({
       }
       const complete = matches.find(
         ({ binding }) =>
-          normalizedBinding(binding).length === pending.length + 1,
+          normalizedShortcutBinding(binding).length === pending.length + 1,
       );
       if (complete) {
         clearPending();
@@ -336,7 +322,7 @@ export const ShortcutHost = ({
       }
       pending = [
         ...pending,
-        normalizedBinding(matches[0]!.binding)[pending.length]!,
+        normalizedShortcutBinding(matches[0]!.binding)[pending.length]!,
       ];
       pendingEvents = [...pendingEvents, event];
       event.preventDefault();

package/src/internal/server/http/routes.ts

@@ -1,6 +1,8 @@
 import { serveStatic } from "@hono/node-server/serve-static";
 import type { Handler, Hono, MiddlewareHandler } from "hono";
-import { join } from "node:path";
+import { readFile } from "node:fs/promises";
+import { basename, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import {
   createHttpAuthenticationHandlers,
@@ -21,7 +23,11 @@ import { createOperationHandler } from "./operation-handler";
 import { createRequestLoggingMiddleware } from "./request-logging";
 import { createRuntimeManifestHandler } from "./runtime-manifest-handler";
 import { overmuxLogoutPath, overmuxSettingsPath } from "@overmux/shared";
-import { viteInfrastructurePath } from "../../shared/routes";
+import {
+  pushNotificationBadgePath,
+  pushNotificationIconPath,
+  viteInfrastructurePath,
+} from "../../shared/routes";
 
 // Registration order is the public/protected boundary. Authentication state,
 // login, and health are registered before the session gate; runtime APIs and
@@ -105,6 +111,28 @@ export const registerHttpRoutes = ({
       handler: createRequestLoggingMiddleware({ serverLogger }),
     },
     // BEGIN: UNAUTHENTICATED
+    // Public branding must remain fetchable when a push wakes the worker after
+    // session expiry. Serve only these packaged PNGs, never userland assets.
+    ...[pushNotificationIconPath, pushNotificationBadgePath].map(
+      (path): RouteDescriptor => ({
+        method: "GET",
+        path,
+        handler: async (context) => {
+          const asset = await readFile(
+            fileURLToPath(
+              new URL(
+                `../push/${basename(path)}`,
+                import.meta.resolve("overmux"),
+              ),
+            ),
+          );
+          context.header("Cache-Control", "public, max-age=86400");
+          context.header("Content-Type", "image/png");
+          context.header("X-Content-Type-Options", "nosniff");
+          return context.body(new Uint8Array(asset));
+        },
+      }),
+    ),
     {
       method: "GET",
       path: "/_overmux/auth-shell/*",
@@ -138,6 +166,23 @@ export const registerHttpRoutes = ({
       handler: authentication.authenticate,
     },
     // BEGIN: AUTHENTICATED
+    // Runtime-owned in both Vite development and production; never the SPA fallback.
+    {
+      method: "GET",
+      path: "/sw.js",
+      handler: async (context) => {
+        const script = await readFile(
+          fileURLToPath(
+            new URL("../push/sw.js", import.meta.resolve("overmux")),
+          ),
+          "utf8",
+        );
+        context.header("Cache-Control", "no-cache");
+        context.header("Content-Type", "text/javascript; charset=UTF-8");
+        context.header("X-Content-Type-Options", "nosniff");
+        return context.body(script);
+      },
+    },
     {
       method: "POST",
       path: "/api/auth/logout",

package/src/internal/shared/routes.ts

@@ -1,3 +1,5 @@
+export const pushNotificationIconPath = "/_overmux/push/icon.png";
+export const pushNotificationBadgePath = "/_overmux/push/badge.png";
 export const runtimeWebSocketPath = "/api/socket";
 export const viteHmrPath = "/_overmux/vite/hmr";
 export const viteInfrastructurePath = "/_overmux/vite/*";

package/src/public/client.ts

@@ -14,6 +14,11 @@ export {
   type StreamResult,
 } from "../internal/client/overmux-react";
 export { OvermuxHost } from "../internal/client/host/overmux-host";
+export { NativeWebView } from "../internal/client/native-web-view";
+export type {
+  NativeWebViewProps,
+  NativeWebViewLoadError,
+} from "../internal/client/native-web-view";
 export {
   OvermuxPortal,
   OvermuxThemeScope,