overmux 0.0.1 → 0.0.2

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

@@ -0,0 +1,45 @@
+import { overmuxLogoutPath, resolveOvermuxReturnTo } from "@overmux/shared";
+import { BrowserNotificationSettings } from "./browser-notification-settings";
+import { HostedPage } from "./hosted-page";
+
+const DesktopNotificationSettings = () => (
+  <div data-om-desktop-notifications="">
+    <h3>Desktop notifications</h3>
+    <p>
+      Notifications are delivered through the Overmux desktop app and managed by
+      the OS. Change notification permissions and preferences in your operating
+      system's settings.
+    </p>
+  </div>
+);
+
+export const HostedSettingsPage = () => {
+  const returnTo = resolveOvermuxReturnTo(
+    new URLSearchParams(location.search).get("returnTo"),
+  );
+  const desktopNotifications = Boolean(window.overmuxHost?.notifications);
+
+  return (
+    <HostedPage>
+      <header data-om-hosted-header="">
+        <h1>Overmux settings</h1>
+        <a href={returnTo}>Back to Overmux</a>
+      </header>
+      <section data-om-hosted-section="">
+        <h2>Notifications</h2>
+        {desktopNotifications ? (
+          <DesktopNotificationSettings />
+        ) : (
+          <BrowserNotificationSettings />
+        )}
+      </section>
+      <section data-om-hosted-section="">
+        <h2>Session</h2>
+        <p>End this Overmux session on this device.</p>
+        <a data-om-hosted-button="" href={overmuxLogoutPath}>
+          Log out
+        </a>
+      </section>
+    </HostedPage>
+  );
+};

package/src/internal/client/host/notification-forwarding.ts

@@ -0,0 +1,22 @@
+import { notificationEventSchema } from "../../shared/index";
+
+import type { WebSocketTransport } from "../transport";
+
+// Forwards server notifications to the optional desktop host injected at window.overmuxHost.
+type NotificationHost = {
+  notifications?: { show: (notification: unknown) => void; version: 1 };
+};
+
+declare global {
+  interface Window {
+    overmuxHost?: NotificationHost;
+  }
+}
+
+export const installNotificationForwarding = (transport: WebSocketTransport) =>
+  transport.subscribeNotification((event) => {
+    const notification = notificationEventSchema.safeParse(event);
+    if (notification.success) {
+      window.overmuxHost?.notifications?.show(notification.data);
+    }
+  });

package/src/internal/client/host/overmux-host.tsx

@@ -0,0 +1,200 @@
+// This file is the overmux owned part of the client
+
+import {
+  runtimeManifestSchema,
+  type RuntimeManifest,
+} from "../../shared/index";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  Component,
+  createElement,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { overmuxLogoutPath, overmuxSettingsPath } from "@overmux/shared";
+import { OvermuxThemeScope } from "../theme-scope";
+import { createOvermuxServerApi } from "../browser-api";
+import { installBrowserLogForwarding } from "./browser-log-forwarding";
+import { installNotificationForwarding } from "./notification-forwarding";
+import type { ClientAppDefinition } from "../client-definition";
+import { type RegisteredCommand, RuntimeContext } from "../commands";
+import { ShortcutHost } from "../shortcuts";
+import { createClientTransport, TransportContext } from "../transport";
+import { HostedLogoutPage } from "./hosted-pages/logout-page";
+import { HostedSettingsPage } from "./hosted-pages/settings-page";
+import { RecoveryScreen } from "./recovery-screen";
+import { UpdatePopover } from "./update-popover";
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback: (error: Error) => ReactNode;
+};
+
+type ErrorBoundaryState = { error?: Error };
+
+class RootErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = {};
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    return this.state.error
+      ? this.props.fallback(this.state.error)
+      : this.props.children;
+  }
+}
+
+class AuthenticationRequiredError extends Error {}
+
+const redirectToLogin = () => location.replace("/login?reason=session-expired");
+
+const loadRuntimeManifest = async () => {
+  const response = await fetch("/api/runtime-manifest", { cache: "no-store" });
+  if (response.status === 401) {
+    throw new AuthenticationRequiredError("Authentication required");
+  }
+  if (!response.ok) {
+    throw new Error(`Runtime manifest request failed: ${response.status}`);
+  }
+  return runtimeManifestSchema.parse(await response.json());
+};
+
+const OvermuxRuntime = ({
+  definition,
+}: {
+  definition: ClientAppDefinition;
+}) => {
+  const safeMode = new URLSearchParams(location.search).get("safe") === "1";
+  const transport = useMemo(createClientTransport, []);
+  const queryClient = useMemo(() => new QueryClient(), []);
+  const logForwardingDisposer = useRef<(() => void) | undefined>(undefined);
+  const [manifest, setManifest] = useState<RuntimeManifest>();
+  const [error, setError] = useState<string>();
+  useEffect(() => {
+    let active = true;
+    void loadRuntimeManifest()
+      .then((next) => {
+        if (!active) {
+          return;
+        }
+        setManifest(next);
+        transport.activate();
+      })
+      .catch((cause: unknown) => {
+        if (cause instanceof AuthenticationRequiredError) {
+          redirectToLogin();
+          return;
+        }
+        if (active) {
+          setError(cause instanceof Error ? cause.message : String(cause));
+        }
+      });
+    return () => {
+      active = false;
+    };
+  }, [transport]);
+  const registrations = useMemo(() => new Set<RegisteredCommand>(), []);
+  const [registrationRevision, setRegistrationRevision] = useState(0);
+  useEffect(() => {
+    if (manifest?.debug && !logForwardingDisposer.current) {
+      logForwardingDisposer.current = installBrowserLogForwarding(
+        transport.reportDiagnostic,
+      );
+    }
+  }, [manifest?.debug, transport]);
+  useEffect(
+    () =>
+      transport.subscribeStatus((status) => {
+        if (status === "authentication-required") {
+          redirectToLogin();
+        }
+      }),
+    [transport],
+  );
+  useEffect(
+    () => () => {
+      logForwardingDisposer.current?.();
+      transport.dispose();
+    },
+    [transport],
+  );
+  useEffect(() => installNotificationForwarding(transport), [transport]);
+  const refreshCommands = useCallback(
+    () => setRegistrationRevision((revision) => revision + 1),
+    [],
+  );
+  const registerCommand = useCallback(
+    (registration: RegisteredCommand) => {
+      registrations.add(registration);
+      refreshCommands();
+      return () => {
+        registrations.delete(registration);
+        refreshCommands();
+      };
+    },
+    [refreshCommands, registrations],
+  );
+  const overmuxServerApi = useMemo(
+    () =>
+      manifest ? createOvermuxServerApi({ manifest, transport }) : undefined,
+    [manifest, transport],
+  );
+  if (safeMode || !manifest || !overmuxServerApi) {
+    return <RecoveryScreen error={error} />;
+  }
+
+  const App = definition.component;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RuntimeContext.Provider
+        value={{
+          manifest,
+          overmuxServerApi,
+          refreshCommands,
+          registerCommand,
+        }}
+      >
+        <TransportContext.Provider value={transport}>
+          <ShortcutHost
+            definition={definition}
+            registrations={registrations}
+            registrationRevision={registrationRevision}
+          >
+            <RootErrorBoundary
+              fallback={(cause) => <RecoveryScreen error={cause.message} />}
+            >
+              {createElement(App)}
+            </RootErrorBoundary>
+            <UpdatePopover transport={transport} />
+          </ShortcutHost>
+        </TransportContext.Provider>
+      </RuntimeContext.Provider>
+    </QueryClientProvider>
+  );
+};
+
+export const OvermuxHost = ({
+  definition,
+}: {
+  definition: ClientAppDefinition;
+}) => (
+  <OvermuxThemeScope {...definition.appearance}>
+    {location.pathname === overmuxSettingsPath ? (
+      <HostedSettingsPage />
+    ) : location.pathname === overmuxLogoutPath ? (
+      <HostedLogoutPage />
+    ) : (
+      <OvermuxRuntime definition={definition} />
+    )}
+  </OvermuxThemeScope>
+);

package/src/internal/client/host/recovery-screen.css

@@ -0,0 +1,75 @@
+@layer om.components {
+  @scope ([data-om-recovery]) {
+    :where([data-om-recovery-reload]) {
+      min-block-size: 2.75rem;
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      color: inherit;
+      background: var(--om-color-surface, var(--_om-color-surface));
+      font: inherit;
+      transition:
+        background-color var(--om-motion-duration, 120ms) ease,
+        border-color var(--om-motion-duration, 120ms) ease;
+    }
+    :where([data-om-recovery-reload]):focus-visible {
+      outline: 2px solid var(--om-color-accent, var(--_om-color-accent));
+      outline-offset: 2px;
+      box-shadow: var(
+        --om-focus-ring,
+        0 0 0 3px color-mix(in srgb, var(--_om-color-accent) 24%, transparent)
+      );
+    }
+    :where(:scope) {
+      position: fixed;
+      inset: 0;
+      display: grid;
+      overflow: auto;
+      place-items: center;
+      padding: calc(var(--om-spacing, 1rem) * 2);
+      color: var(--om-color-fg, var(--_om-color-fg));
+      background: var(--om-color-canvas, var(--_om-color-canvas));
+    }
+    :where([data-om-recovery-panel]) {
+      inline-size: min(100%, 36rem);
+      padding: calc(var(--om-spacing, 0.75rem) * 2);
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      background: var(--om-color-panel, var(--_om-color-panel));
+      box-shadow: var(--om-elevation, 0 1rem 2rem rgb(0 0 0 / 20%));
+    }
+    :where([data-om-recovery-title]) {
+      margin: 0;
+      font-size: 1.125rem;
+    }
+    :where([data-om-recovery-error]) {
+      margin-block: 1rem 0;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+      color: var(--om-color-danger, var(--_om-color-danger));
+      font-family: var(
+        --om-font-mono,
+        ui-monospace,
+        SFMono-Regular,
+        Consolas,
+        monospace
+      );
+      font-size: 0.875rem;
+    }
+    :where([data-om-recovery-reload]) {
+      margin-block-start: 1rem;
+      padding-inline: 0.75rem;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :where([data-om-recovery-reload]) {
+        scroll-behavior: auto;
+        transition-duration: 0.01ms;
+      }
+    }
+    @media (forced-colors: active) {
+      :where([data-om-recovery-reload]):focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+      }
+    }
+  }
+}

package/src/internal/client/host/recovery-screen.tsx

@@ -0,0 +1,17 @@
+import "./recovery-screen.css";
+
+export const RecoveryScreen = ({ error }: { error?: string }) => (
+  <main data-om-recovery="">
+    <section data-om-recovery-panel="">
+      <h1 data-om-recovery-title="">Overmux recovery</h1>
+      {error ? <pre data-om-recovery-error="">{error}</pre> : null}
+      <button
+        data-om-recovery-reload=""
+        onClick={() => location.reload()}
+        type="button"
+      >
+        Reload
+      </button>
+    </section>
+  </main>
+);

package/src/internal/client/host/update-popover.css

@@ -0,0 +1,82 @@
+@layer om.components {
+  @scope (
+    [data-om-reconnecting],
+    [data-om-restarting],
+    [data-om-update]
+  ) {
+    :where(:scope[data-om-reconnecting]) {
+      position: fixed;
+      inset: 0;
+      z-index: 1002;
+      display: grid;
+      place-items: center;
+      padding: calc(var(--om-spacing, 1rem) * 2);
+      color: var(--om-color-fg, var(--_om-color-fg));
+      background: var(--om-color-canvas, var(--_om-color-canvas));
+    }
+    :where([data-om-reconnecting-panel]) {
+      inline-size: min(100%, 24rem);
+      padding: calc(var(--om-spacing, 0.75rem) * 2);
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      background: var(--om-color-panel, var(--_om-color-panel));
+      box-shadow: var(--om-elevation, 0 1rem 2rem rgb(0 0 0 / 20%));
+      text-align: center;
+    }
+    :where([data-om-reconnecting-title]) {
+      margin: 0;
+      font-size: 1.125rem;
+    }
+    :where([data-om-reconnecting-message]) {
+      margin-block: 0.5rem 0;
+      color: var(--om-color-muted, var(--_om-color-muted));
+    }
+    :where(:scope[data-om-update]) {
+      position: fixed;
+      inset-block-end: 0.75rem;
+      inset-inline-end: 0.75rem;
+      z-index: 1001;
+      inline-size: min(calc(100% - 1.5rem), 32rem);
+      padding: var(--om-spacing, 0.75rem);
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      background: var(--om-color-panel, var(--_om-color-panel));
+      box-shadow: var(--om-elevation, 0 0.75rem 2rem rgb(0 0 0 / 30%));
+    }
+    :where([data-om-update] p) {
+      margin: 0 0 0.75rem;
+    }
+    :where([data-om-update-reload]) {
+      min-block-size: 2.75rem;
+      padding-inline: 0.75rem;
+      border: 1px solid var(--om-color-border, var(--_om-color-border));
+      border-radius: var(--om-radius, 0.5rem);
+      color: inherit;
+      background: var(--om-color-surface, var(--_om-color-surface));
+      font: inherit;
+    }
+    :where([data-om-update-error]) {
+      margin-block: 0.75rem 0;
+      color: var(--om-color-danger, var(--_om-color-danger));
+    }
+    :where(:scope[data-om-restarting]) {
+      position: fixed;
+      inset: 0;
+      z-index: 1003;
+      display: grid;
+      place-items: center;
+      color: var(--om-color-fg, var(--_om-color-fg));
+      background: var(--om-color-canvas, var(--_om-color-canvas));
+    }
+    :where([data-om-restarting-panel]) {
+      text-align: center;
+    }
+    :where([data-om-restarting-title]) {
+      margin: 0;
+      font-size: 1.125rem;
+    }
+    :where([data-om-restarting-message]) {
+      color: var(--om-color-muted, var(--_om-color-muted));
+    }
+  }
+}

package/src/internal/client/host/update-popover.tsx

@@ -0,0 +1,166 @@
+// Presents update availability and coordinates browser-side restart recovery.
+// Every browser follows the server broadcast and reloads only after health returns.
+
+import "./update-popover.css";
+
+import { delay } from "@overmux/lib";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+
+import type { ServerLifecycleEvent } from "../../shared/index";
+import type { ClientTransport, TransportStatus } from "../transport";
+
+type UpdateState =
+  | { type: "current" }
+  | { type: "available"; error?: string }
+  | { type: "requesting" }
+  | { type: "restarting" };
+type UpdateAction =
+  | ServerLifecycleEvent
+  | { type: "restart-requested" }
+  | { type: "restart-failed"; error: string };
+type ConnectionState = "initial" | "connected" | "reconnecting";
+
+const reduceUpdateState = (
+  _state: UpdateState,
+  action: UpdateAction,
+): UpdateState => {
+  if (action.type === "update-available") {
+    return { type: "available" };
+  }
+  if (action.type === "restart-requested") {
+    return { type: "requesting" };
+  }
+  if (action.type === "restart-failed") {
+    return { type: "available", error: action.error };
+  }
+  return { type: "restarting" };
+};
+
+const pollUntilHealthy = async (signal: AbortSignal): Promise<void> => {
+  if (signal.aborted) {
+    return;
+  }
+  try {
+    const response = await fetch("/api/health", {
+      cache: "no-store",
+      signal,
+    });
+    if (response.ok) {
+      location.reload();
+      return;
+    }
+  } catch {}
+  await delay(250);
+  return pollUntilHealthy(signal);
+};
+
+const ReconnectingScreen = () => (
+  <main aria-live="polite" data-om-reconnecting="" role="status">
+    <section data-om-reconnecting-panel="">
+      <h1 data-om-reconnecting-title="">Reconnecting</h1>
+      <p data-om-reconnecting-message="">
+        Reconnecting to Overmux. Your workspace will resume shortly.
+      </p>
+    </section>
+  </main>
+);
+
+const useUpdateState = (transport: ClientTransport) => {
+  const [state, dispatch] = useReducer(reduceUpdateState, { type: "current" });
+
+  useEffect(
+    () => transport.subscribeLifecycle((event) => dispatch(event)),
+    [transport],
+  );
+  useEffect(() => {
+    if (state.type !== "restarting") {
+      return;
+    }
+    const controller = new AbortController();
+    void pollUntilHealthy(controller.signal);
+    return () => controller.abort();
+  }, [state.type]);
+
+  const requestRestart = useCallback(async () => {
+    dispatch({ type: "restart-requested" });
+    try {
+      const response = await fetch("/api/restart", { method: "POST" });
+      if (!response.ok) {
+        throw new Error(`Restart request failed: ${response.status}`);
+      }
+      dispatch({ type: "restarting" });
+    } catch (cause) {
+      const error = cause instanceof Error ? cause.message : String(cause);
+      dispatch({ type: "restart-failed", error });
+    }
+  }, []);
+
+  return { requestRestart, state };
+};
+
+const useConnectionState = (transport: ClientTransport) => {
+  const connected = useRef(false);
+  const [connection, setConnection] = useState<ConnectionState>("initial");
+
+  useEffect(
+    () =>
+      transport.subscribeStatus((status: TransportStatus) => {
+        if (status === "connected") {
+          connected.current = true;
+          setConnection("connected");
+          return;
+        }
+        if (!connected.current) {
+          return;
+        }
+        connected.current = false;
+        setConnection("reconnecting");
+      }),
+    [transport],
+  );
+
+  return connection;
+};
+
+export const UpdatePopover = ({
+  transport,
+}: {
+  transport: ClientTransport;
+}) => {
+  const connection = useConnectionState(transport);
+  const { requestRestart, state } = useUpdateState(transport);
+
+  if (state.type === "restarting") {
+    return (
+      <main aria-live="polite" data-om-restarting="" role="status">
+        <section data-om-restarting-panel="">
+          <h1 data-om-restarting-title="">Restarting Overmux</h1>
+          <p data-om-restarting-message="">Waiting for the new version.</p>
+        </section>
+      </main>
+    );
+  }
+  if (connection === "reconnecting") {
+    return <ReconnectingScreen />;
+  }
+  if (state.type === "current") {
+    return null;
+  }
+
+  const error = state.type === "available" ? state.error : undefined;
+
+  return (
+    <aside data-om-update="" role="status">
+      <p>A new version is available. Reload to update.</p>
+      <button
+        data-om-update-reload=""
+        disabled={state.type === "requesting"}
+        onClick={() => void requestRestart()}
+        type="button"
+      >
+        Reload
+      </button>
+      {error ? <p data-om-update-error="">{error}</p> : null}
+    </aside>
+  );
+};

package/src/internal/client/index.ts

@@ -0,0 +1,45 @@
+export {
+  disableBackgroundNotifications,
+  enableBackgroundNotifications,
+} from "./background-notifications";
+export type { OvermuxServerApi } from "./browser-api";
+export {
+  createOvermuxHooks,
+  type ResourceResult,
+  type StreamResult,
+} from "./overmux-react";
+export { OvermuxPortal, OvermuxThemeScope } from "./theme-scope";
+export type {
+  OvermuxContrast,
+  OvermuxExternalPortalContainer,
+  OvermuxPortalProps,
+  OvermuxScheme,
+  OvermuxThemeScopeProps,
+  OvermuxStyle,
+  OvermuxThemeToken,
+} from "./theme-scope";
+export {
+  chordPrefixSchema,
+  commandBindingSchema,
+  defineCommandRegistry,
+  defineOvermuxClient,
+  formatKeyBinding,
+  formatShortcutBinding,
+  keyBindingSchema,
+  matchesKeyBinding,
+  shortcutBindingSchema,
+} from "./client-definition";
+export { skipToken, useCommand, useCommands } from "./commands";
+export { useShortcutInputTarget } from "./shortcuts";
+export type {
+  ChordPrefix,
+  CommandBinding,
+  CommandHandle,
+  ConditionalShortcutBinding,
+  KeyBinding,
+  KeySequence,
+  OvermuxClientAppearance,
+  ShortcutBinding,
+} from "./client-definition";
+export type { CommandEntry, SkipToken } from "./commands";
+export type { ShortcutInputTarget } from "./shortcuts";