overmux 0.0.1 → 0.0.2

package/src/internal/client/commands.tsx

@@ -0,0 +1,260 @@
+import type { RuntimeManifest } from "../shared/index";
+import {
+  createContext,
+  type RefObject,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { z } from "zod";
+
+import type {
+  ClientAppDefinition,
+  CommandHandle,
+  ShortcutBinding,
+} from "./client-definition";
+import {
+  activeCommandBindings,
+  configuredCommandBindings,
+} from "./client-definition";
+import type { RuntimeOvermuxServerApi } from "./browser-api";
+
+type CommandRunResult = Promise<unknown> | unknown;
+type LocalCommandRun = () => CommandRunResult;
+type ParamsSchema<TCommand> = TCommand extends {
+  params: infer TParams extends z.ZodType;
+}
+  ? TParams
+  : undefined;
+type RegistrationParams<TCommand> =
+  ParamsSchema<TCommand> extends z.ZodType
+    ? { params: z.input<ParamsSchema<TCommand>> }
+    : { params?: never };
+type RegistrationRun<TCommand> = TCommand extends {
+  run: (...args: never[]) => unknown;
+}
+  ? { run?: LocalCommandRun }
+  : { run: LocalCommandRun };
+type CommandRegistration<TCommand> = RegistrationParams<TCommand> &
+  RegistrationRun<TCommand> & {
+    element?: RefObject<HTMLElement | null>;
+    enabled?: boolean;
+  };
+type UseCommandRegistration<TCommand> =
+  ParamsSchema<TCommand> extends z.ZodType
+    ? CommandRegistration<TCommand> | SkipToken
+    : CommandRegistration<TCommand>;
+
+export const skipToken = Symbol("overmux command registration");
+export type SkipToken = typeof skipToken;
+
+export type RegisteredCommand = {
+  command: CommandHandle;
+  element: () => HTMLElement | null | undefined;
+  enabled: () => boolean;
+  execute: () => Promise<void>;
+};
+
+type RuntimeContextValue = {
+  manifest: RuntimeManifest;
+  overmuxServerApi: RuntimeOvermuxServerApi;
+  refreshCommands: () => void;
+  registerCommand: (registration: RegisteredCommand) => () => void;
+};
+
+export const RuntimeContext = createContext<RuntimeContextValue | undefined>(
+  undefined,
+);
+
+export const useRuntime = () => {
+  const runtime = useContext(RuntimeContext);
+  if (!runtime) {
+    throw new Error(
+      "Overmux hooks must be used inside an active Overmux client runtime",
+    );
+  }
+  return runtime;
+};
+
+type RuntimeCommandRegistration = {
+  element?: RefObject<HTMLElement | null>;
+  enabled?: boolean;
+  params?: unknown;
+  run?: LocalCommandRun;
+};
+
+const executeRegistration = async (
+  command: CommandHandle,
+  registration: RuntimeCommandRegistration,
+  overmuxServerApi: RuntimeOvermuxServerApi,
+) => {
+  const params = command.params
+    ? command.params.parse(registration.params)
+    : undefined;
+  if (registration.run) {
+    await registration.run();
+    return;
+  }
+  if (typeof command.run !== "function") {
+    throw new Error(`Command has no implementation: ${command.id}`);
+  }
+  await command.run({ overmuxServerApi, params });
+};
+
+export const createRegisteredCommand = ({
+  command,
+  getRegistration,
+  overmuxServerApi,
+}: {
+  command: CommandHandle;
+  getRegistration: () => RuntimeCommandRegistration | SkipToken;
+  overmuxServerApi: RuntimeOvermuxServerApi;
+}): RegisteredCommand => ({
+  command,
+  element: () => {
+    const registration = getRegistration();
+    return registration === skipToken
+      ? undefined
+      : registration.element?.current;
+  },
+  enabled: () => {
+    const registration = getRegistration();
+    return registration === skipToken ? false : (registration.enabled ?? true);
+  },
+  execute: () => {
+    const registration = getRegistration();
+    return registration === skipToken
+      ? Promise.resolve()
+      : executeRegistration(command, registration, overmuxServerApi);
+  },
+});
+
+export const useCommand = <TCommand extends CommandHandle>(
+  command: TCommand,
+  registration: UseCommandRegistration<TCommand>,
+) => {
+  const { overmuxServerApi, refreshCommands, registerCommand } = useRuntime();
+  const registrationRef = useRef(registration);
+  registrationRef.current = registration;
+  const skipped = registration === skipToken;
+  useEffect(() => {
+    if (skipped) {
+      return;
+    }
+    return registerCommand(
+      createRegisteredCommand({
+        command,
+        getRegistration: () =>
+          registrationRef.current as RuntimeCommandRegistration | SkipToken,
+        overmuxServerApi,
+      }),
+    );
+  }, [command, overmuxServerApi, registerCommand, skipped]);
+  const enabled = skipped ? false : (registration.enabled ?? true);
+  const element = skipped ? undefined : registration.element;
+  useEffect(refreshCommands, [element, enabled, refreshCommands, skipped]);
+};
+
+const elementDepth = (element: HTMLElement) => {
+  let depth = 0;
+  for (
+    let current: HTMLElement | null = element;
+    current;
+    current = current.parentElement
+  ) {
+    depth += 1;
+  }
+  return depth;
+};
+
+export const selectCommandRegistration = (
+  command: CommandHandle,
+  registrations: ReadonlySet<RegisteredCommand>,
+  activeElement: Element | null,
+) => {
+  const candidates = [...registrations].filter(
+    (registration) => registration.command === command,
+  );
+  const focused = candidates.filter((registration) => {
+    const element = registration.element();
+    return Boolean(element && activeElement && element.contains(activeElement));
+  });
+  return (
+    focused.reduce<RegisteredCommand | undefined>((selected, candidate) => {
+      const selectedElement = selected?.element();
+      const candidateElement = candidate.element();
+      if (!selectedElement || !candidateElement) {
+        return candidate;
+      }
+      return elementDepth(candidateElement) >= elementDepth(selectedElement)
+        ? candidate
+        : selected;
+    }, undefined) ?? candidates.at(-1)
+  );
+};
+
+const currentActiveElement = () => document.activeElement;
+
+const selectedRegistration = (
+  command: CommandHandle,
+  registrations: ReadonlySet<RegisteredCommand>,
+  getActiveElement: () => Element | null = currentActiveElement,
+) => selectCommandRegistration(command, registrations, getActiveElement());
+
+export const executeCommand = async (
+  command: CommandHandle,
+  registrations: ReadonlySet<RegisteredCommand>,
+  getActiveElement: () => Element | null = currentActiveElement,
+) => {
+  const selected = selectedRegistration(
+    command,
+    registrations,
+    getActiveElement,
+  );
+  if (selected?.enabled()) {
+    await selected.execute();
+  }
+};
+
+export type CommandEntry = {
+  bindings: readonly ShortcutBinding[];
+  disabledReason?: string;
+  enabled: boolean;
+  execute: () => Promise<void>;
+  id: string;
+  title: string;
+};
+
+export const createCommandEntries = (
+  definition: ClientAppDefinition,
+  registrations: ReadonlySet<RegisteredCommand>,
+  getActiveElement: () => Element | null = currentActiveElement,
+  matchesMedia: (media: string) => boolean = (media) =>
+    typeof window !== "undefined" && window.matchMedia(media).matches,
+): CommandEntry[] =>
+  Object.values(definition.commands).flatMap((command) => {
+    const selected = selectedRegistration(
+      command,
+      registrations,
+      getActiveElement,
+    );
+    return selected
+      ? [
+          {
+            bindings: activeCommandBindings(
+              configuredCommandBindings(definition, command),
+              matchesMedia,
+            ),
+            enabled: selected.enabled(),
+            execute: () =>
+              executeCommand(command, registrations, getActiveElement),
+            id: command.id,
+            title: command.title,
+          },
+        ]
+      : [];
+  });
+
+export const CommandsContext = createContext<readonly CommandEntry[]>([]);
+
+export const useCommands = () => useContext(CommandsContext);

package/src/internal/client/host/browser-log-forwarding.ts

@@ -0,0 +1,149 @@
+import type { ClientDiagnosticEvent } from "../../shared/index";
+
+const maxStringLength = 2_000;
+const truncate = (value: string, length = maxStringLength) =>
+  value.length <= length ? value : `${value.slice(0, length)}…[truncated]`;
+
+const serializeValue = (
+  value: unknown,
+  seen: WeakSet<object>,
+  depth = 0,
+): unknown => {
+  if (typeof value === "string") {
+    return truncate(value);
+  }
+  if (
+    value === null ||
+    typeof value === "boolean" ||
+    typeof value === "number"
+  ) {
+    return value;
+  }
+  if (typeof value === "bigint") {
+    return `${value}n`;
+  }
+  if (typeof value === "undefined" || typeof value === "symbol") {
+    return String(value);
+  }
+  if (typeof value === "function") {
+    return `[Function ${value.name || "anonymous"}]`;
+  }
+  if (depth >= 4) {
+    return "[Max depth]";
+  }
+  if (typeof value !== "object") {
+    return truncate(String(value));
+  }
+  if (seen.has(value)) {
+    return "[Circular]";
+  }
+  seen.add(value);
+  if (value instanceof Error) {
+    return {
+      message: truncate(value.message),
+      name: value.name,
+      ...(value.stack ? { stack: truncate(value.stack, 8_000) } : {}),
+    };
+  }
+  if (Array.isArray(value)) {
+    return value
+      .slice(0, 25)
+      .map((item) => serializeValue(item, seen, depth + 1));
+  }
+  try {
+    return Object.fromEntries(
+      Object.entries(value)
+        .slice(0, 25)
+        .map(([key, item]) => [key, serializeValue(item, seen, depth + 1)]),
+    );
+  } catch {
+    return `[Unserializable ${Object.prototype.toString.call(value)}]`;
+  }
+};
+
+export const serializeBrowserLogArguments = (values: unknown[]) => {
+  const seen = new WeakSet<object>();
+  const serialized = values.map((value) => serializeValue(value, seen));
+  const json = JSON.stringify(serialized);
+  return truncate(json, 16_000);
+};
+
+const diagnosticUrl = () => {
+  try {
+    return `${location.origin}${location.pathname}`;
+  } catch {
+    return undefined;
+  }
+};
+
+const stackOf = (values: unknown[]) => {
+  const error = values.find((value) => value instanceof Error);
+  return error instanceof Error && error.stack
+    ? truncate(error.stack, 8_000)
+    : undefined;
+};
+
+export const installBrowserLogForwarding = (
+  report: (event: ClientDiagnosticEvent) => void,
+) => {
+  const methods = ["log", "info", "warn", "error", "debug"] as const;
+  const originals = Object.fromEntries(
+    methods.map((level) => [level, console[level].bind(console)]),
+  ) as Record<(typeof methods)[number], (...values: unknown[]) => void>;
+  let reporting = false;
+  const emit = (
+    level: ClientDiagnosticEvent["level"],
+    values: unknown[],
+    stack?: string,
+  ) => {
+    if (reporting) {
+      return;
+    }
+    reporting = true;
+    try {
+      const serializedArguments = serializeBrowserLogArguments(values);
+      report({
+        arguments: serializedArguments,
+        level,
+        message: truncate(
+          values
+            .map((value) =>
+              typeof value === "string" ? value : serializedArguments,
+            )
+            .join(" "),
+          4_000,
+        ),
+        ...(stack ? { stack: truncate(stack, 8_000) } : {}),
+        timestamp: new Date().toISOString(),
+        type: "client-diagnostic",
+        ...(diagnosticUrl() ? { url: diagnosticUrl() } : {}),
+      });
+    } finally {
+      reporting = false;
+    }
+  };
+  methods.forEach((level) => {
+    console[level] = (...values: unknown[]) => {
+      originals[level](...values);
+      emit(level, values, stackOf(values));
+    };
+  });
+  const onError = (event: ErrorEvent) =>
+    emit("error", [event.message], event.error?.stack);
+  const onRejection = (event: PromiseRejectionEvent) =>
+    emit(
+      "error",
+      ["Unhandled rejection", event.reason],
+      stackOf([event.reason]),
+    );
+  window.addEventListener("error", onError);
+  window.addEventListener("unhandledrejection", onRejection);
+
+  return () => {
+    methods.forEach((level) => {
+      console[level] = originals[level];
+    });
+    window.removeEventListener("error", onError);
+    window.removeEventListener("unhandledrejection", onRejection);
+  };
+};

package/src/internal/client/host/hosted-pages/browser-notification-settings.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  disableBackgroundNotifications,
+  enableBackgroundNotifications,
+  reconciledStatus,
+  type BackgroundNotificationStatus,
+} from "../../background-notifications";
+
+const statusMessage = (status: BackgroundNotificationStatus) => {
+  const messages: Record<BackgroundNotificationStatus, string> = {
+    checking: "Checking background notification status…",
+    denied:
+      "Background notifications are blocked in this browser's site settings.",
+    disabled: "Background notifications are disabled for this browser.",
+    enabled: "Background notifications are enabled for this browser.",
+    error: "Background notification settings could not be updated. Try again.",
+    "ios-home-screen":
+      "On iPhone or iPad, add Overmux to the Home Screen before enabling background notifications.",
+    unsupported: "Background notifications are not supported in this browser.",
+  };
+  return messages[status];
+};
+
+export const BrowserNotificationSettings = () => {
+  const [status, setStatus] =
+    useState<BackgroundNotificationStatus>("checking");
+
+  useEffect(() => {
+    let active = true;
+    const reconcile = () => {
+      void reconciledStatus()
+        .then((next) => {
+          if (active) {
+            setStatus(next);
+          }
+        })
+        .catch(() => {
+          if (active) {
+            setStatus("error");
+          }
+        });
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        reconcile();
+      }
+    };
+    reconcile();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    navigator.serviceWorker?.addEventListener("controllerchange", reconcile);
+    return () => {
+      active = false;
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+      navigator.serviceWorker?.removeEventListener(
+        "controllerchange",
+        reconcile,
+      );
+    };
+  }, []);
+
+  const enable = useCallback(async () => {
+    try {
+      setStatus("checking");
+      const enabled = await enableBackgroundNotifications();
+      setStatus(
+        enabled
+          ? "enabled"
+          : Notification.permission === "denied"
+            ? "denied"
+            : "disabled",
+      );
+    } catch {
+      setStatus("error");
+    }
+  }, []);
+
+  const disable = useCallback(async () => {
+    try {
+      setStatus("checking");
+      await disableBackgroundNotifications();
+      setStatus("disabled");
+    } catch {
+      setStatus("error");
+    }
+  }, []);
+
+  const canEnable = status === "disabled" || status === "error";
+  const canDisable = status === "enabled" || status === "error";
+  return (
+    <div data-om-browser-notifications="">
+      <h3>Browser notifications</h3>
+      <p aria-live="polite" data-om-background-notifications-status="">
+        {statusMessage(status)}
+      </p>
+      <div data-om-hosted-actions="">
+        {canEnable ? (
+          <button
+            data-om-background-notifications-enable=""
+            onClick={enable}
+            type="button"
+          >
+            Enable
+          </button>
+        ) : null}
+        {canDisable ? (
+          <button
+            data-om-background-notifications-disable=""
+            onClick={disable}
+            type="button"
+          >
+            Disable
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/src/internal/client/host/hosted-pages/hosted-page.css

@@ -0,0 +1,87 @@
+@layer om.components {
+  @scope ([data-om-hosted-page]) {
+    :where(:scope) {
+      position: fixed;
+      inset: 0;
+      box-sizing: border-box;
+      overflow: auto;
+      padding: clamp(1rem, 5vw, 4rem);
+      color: var(--om-color-fg, var(--_om-color-fg));
+      background: var(--om-color-canvas, var(--_om-color-canvas));
+    }
+    :where([data-om-hosted-panel]) {
+      inline-size: min(100%, 44rem);
+      box-sizing: border-box;
+      margin-inline: auto;
+      padding: clamp(1.25rem, 4vw, 2.5rem);
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      background: var(--om-color-surface, var(--_om-color-surface));
+      box-shadow: var(--om-elevation, 0 1rem 2rem rgb(0 0 0 / 20%));
+    }
+    :where(h1, h2, h3, p) {
+      margin-block-start: 0;
+    }
+    :where(h1) {
+      font-size: clamp(1.5rem, 4vw, 2rem);
+    }
+    :where(h2) {
+      font-size: 1.125rem;
+    }
+    :where(h3) {
+      font-size: 1rem;
+    }
+    :where(p) {
+      color: var(--om-color-muted, var(--_om-color-muted));
+      line-height: 1.55;
+    }
+    :where([data-om-hosted-header]) {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+    :where([data-om-hosted-section]) {
+      margin-block-start: 1.5rem;
+      padding-block-start: 1.5rem;
+      border-block-start: 1px solid
+        var(--om-color-border, var(--_om-color-border));
+    }
+    :where([data-om-hosted-actions]) {
+      display: flex;
+      gap: 0.5rem;
+    }
+    :where(
+      [data-om-background-notifications-enable],
+      [data-om-background-notifications-disable],
+      [data-om-hosted-retry],
+      [data-om-hosted-button]
+    ) {
+      display: inline-flex;
+      min-block-size: 2.75rem;
+      box-sizing: border-box;
+      align-items: center;
+      padding-inline: 0.85rem;
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      color: inherit;
+      background: var(--om-color-panel, var(--_om-color-panel));
+      font: inherit;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    :where(a) {
+      color: var(--om-color-accent, var(--_om-color-accent));
+    }
+    :where(a, button):focus-visible {
+      outline: 2px solid var(--om-color-accent, var(--_om-color-accent));
+      outline-offset: 2px;
+    }
+    @media (max-width: 30rem) {
+      :where([data-om-hosted-header]) {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+    }
+  }
+}

package/src/internal/client/host/hosted-pages/hosted-page.tsx

@@ -0,0 +1,9 @@
+import "./hosted-page.css";
+
+import type { ReactNode } from "react";
+
+export const HostedPage = ({ children }: { children: ReactNode }) => (
+  <main data-om-hosted-page="">
+    <article data-om-hosted-panel="">{children}</article>
+  </main>
+);

package/src/internal/client/host/hosted-pages/logout-page.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+
+import { HostedPage } from "./hosted-page";
+
+const logoutRequests = new WeakMap<Document, Promise<void>>();
+const minimumLogoutDuration = 3_000;
+
+const requestLogout = () => {
+  const existing = logoutRequests.get(document);
+  if (existing) {
+    return existing;
+  }
+  const request = fetch("/api/auth/logout", { method: "POST" }).then(
+    (response) => {
+      if (!response.ok) {
+        throw new Error(`Logout failed: ${response.status}`);
+      }
+    },
+  );
+  logoutRequests.set(document, request);
+  return request;
+};
+
+const minimumDelay = () =>
+  new Promise<void>((resolve) => setTimeout(resolve, minimumLogoutDuration));
+
+export const HostedLogoutPage = () => {
+  const [attempt, setAttempt] = useState(0);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    setError(false);
+    void Promise.allSettled([requestLogout(), minimumDelay()]).then(
+      ([logout]) => {
+        if (!active) {
+          return;
+        }
+        if (logout?.status === "fulfilled") {
+          location.replace("/login");
+          return;
+        }
+        setError(true);
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [attempt]);
+
+  return (
+    <HostedPage>
+      <h1>{error ? "Log out failed" : "Logging out…"}</h1>
+      {error ? (
+        <>
+          <p role="alert">
+            Overmux could not log you out. Check your connection and try again.
+          </p>
+          <button
+            data-om-hosted-retry=""
+            onClick={() => {
+              logoutRequests.delete(document);
+              setAttempt((current) => current + 1);
+            }}
+            type="button"
+          >
+            Retry
+          </button>
+        </>
+      ) : (
+        <p>Please wait while Overmux ends your session.</p>
+      )}
+    </HostedPage>
+  );
+};