@hienlh/ppm 0.18.12 → 0.18.14

package/src/web/components/tunnels/named-tunnel/use-named-tunnel-setup.ts

@@ -0,0 +1,212 @@
+/**
+ * State + side effects for the named-tunnel setup flow. Wraps the pure
+ * `reduceStep` machine with the actual API calls and the `tunnel:*` window
+ * events re-dispatched by `use-global-events.ts`. Both the first-run popup and
+ * the Tunnel Manager section call this hook — each gets its own instance, but
+ * both react to the same window events, so they stay in sync without a shared
+ * store.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { namedTunnelApi, type LoginState, type NamedTunnelStatus } from "@/lib/api-named-tunnel";
+import { reduceStep, ZONE_EXPECTING_STEPS, type Step } from "./named-tunnel-step-reducer";
+import { validateHostname, buildHostname } from "./hostname-validation";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+
+/**
+ * Last hostname confirmed live, cached in memory only (never localStorage —
+ * see connection-lost-overlay.tsx for why). Read while the API is
+ * unreachable, so it must survive without another fetch.
+ */
+let cachedNamedHostname: string | null = null;
+export function getCachedNamedHostname(): string | null {
+  return cachedNamedHostname;
+}
+
+const TUNNEL_EVENT_TYPES = [
+  "tunnel:login_url",
+  "tunnel:login_state",
+  "tunnel:setup_step",
+  "tunnel:setup_done",
+  "tunnel:setup_pending",
+  "tunnel:setup_error",
+] as const;
+
+function errorMessage(e: unknown): string {
+  return e instanceof Error ? e.message : namedTunnelCopy.error.title;
+}
+
+export interface UseNamedTunnelSetup {
+  step: Step;
+  status: NamedTunnelStatus | null;
+  answerYes: () => void;
+  answerNo: () => void;
+  cancelLogin: () => void;
+  retryLogin: () => void;
+  confirmZone: () => void;
+  startOver: () => void;
+  setHostnamePrefix: (prefix: string) => void;
+  submitHostname: () => void;
+  requestRelogin: () => void;
+  close: () => void;
+  refreshStatus: () => Promise<void>;
+}
+
+export function useNamedTunnelSetup(): UseNamedTunnelSetup {
+  const [step, setStep] = useState<Step>({ k: "hidden" });
+  const [status, setStatus] = useState<NamedTunnelStatus | null>(null);
+  const zoneInFlight = useRef(false);
+  // Mirrors `step` for reads inside callbacks that must not sit in a setState
+  // updater — React (Strict Mode) can invoke an updater twice, which would
+  // fire the setup/zone POST twice.
+  const stepRef = useRef(step);
+  stepRef.current = step;
+  const dispatch = useCallback((action: Parameters<typeof reduceStep>[1]) => {
+    setStep((prev) => reduceStep(prev, action));
+  }, []);
+
+  const loadZone = useCallback(() => {
+    if (zoneInFlight.current) return;
+    zoneInFlight.current = true;
+    namedTunnelApi.zone()
+      .then((info) => dispatch({ type: "zone-loaded", zone: info.zone }))
+      .catch((e) => dispatch({ type: "zone-error", message: errorMessage(e) }))
+      .finally(() => { zoneInFlight.current = false; });
+  }, [dispatch]);
+
+  /**
+   * Only chase a zone lookup while the user is actually mid-setup
+   * (login-wait/needs-relogin). A login session's `state` reads "success"
+   * long after that moment — it is not reset — so reacting to it from just
+   * any step reopened a finished "done" card into confirm-zone on the
+   * post-setup refetch, and reopened the hidden popup of an
+   * already-configured install into confirm-zone on mount. The reducer also
+   * guards `zone-loaded`/`zone-error` the same way; this skips the redundant
+   * network call at the source.
+   */
+  const maybeLoadZone = useCallback(() => {
+    if (ZONE_EXPECTING_STEPS.has(stepRef.current.k)) loadZone();
+  }, [loadZone]);
+
+  const refreshStatus = useCallback(async () => {
+    try {
+      const s = await namedTunnelApi.status();
+      setStatus(s);
+      if (s.mode === "named" && s.hostname) cachedNamedHostname = s.hostname;
+      dispatch({ type: "status", status: s });
+      if (s.mode === "quick" && s.login.state === "success") maybeLoadZone();
+    } catch {
+      // Offline at mount — popup/section just stay on their last known state.
+    }
+  }, [dispatch, maybeLoadZone]);
+
+  useEffect(() => { void refreshStatus(); }, [refreshStatus]);
+
+  useEffect(() => {
+    function handle(e: Event) {
+      const detail = (e as CustomEvent).detail as Record<string, unknown> & { type: string };
+      switch (detail.type) {
+        case "tunnel:login_url":
+          dispatch({ type: "login-url", url: detail.url as string });
+          break;
+        case "tunnel:login_state": {
+          const state = detail.state as LoginState;
+          dispatch({ type: "login-state", state, message: (detail.message as string | null) ?? null });
+          // Success can mean "cert renewed" (re-login on an already-named
+          // install) as much as "first-time login" — refresh so certState
+          // and mode never sit stale behind the step machine. The zone
+          // lookup only fires while a step actually expects it (see
+          // maybeLoadZone).
+          if (state === "success") { maybeLoadZone(); void refreshStatus(); }
+          break;
+        }
+        case "tunnel:setup_step":
+          dispatch({ type: "setup-step", message: detail.message as string });
+          break;
+        case "tunnel:setup_done":
+          cachedNamedHostname = detail.hostname as string;
+          dispatch({ type: "setup-done", hostname: detail.hostname as string });
+          void refreshStatus();
+          break;
+        case "tunnel:setup_pending":
+          dispatch({ type: "setup-pending", hostname: detail.hostname as string, message: detail.message as string });
+          void refreshStatus();
+          break;
+        case "tunnel:setup_error":
+          dispatch({ type: "setup-error", message: detail.message as string });
+          break;
+      }
+    }
+    TUNNEL_EVENT_TYPES.forEach((t) => window.addEventListener(t, handle));
+    return () => TUNNEL_EVENT_TYPES.forEach((t) => window.removeEventListener(t, handle));
+  }, [dispatch, maybeLoadZone, refreshStatus]);
+
+  const startLogin = useCallback((relogin: boolean) => {
+    dispatch({ type: "answer-yes" });
+    namedTunnelApi.login(relogin)
+      .then((snap) => {
+        if (snap.url) dispatch({ type: "login-url", url: snap.url });
+        dispatch({ type: "login-state", state: snap.state, message: snap.message });
+        if (snap.state === "success") { maybeLoadZone(); void refreshStatus(); }
+      })
+      .catch((e) => dispatch({ type: "login-state", state: "error", message: errorMessage(e) }));
+  }, [dispatch, maybeLoadZone, refreshStatus]);
+
+  const answerYes = useCallback(() => startLogin(false), [startLogin]);
+  const retryLogin = useCallback(() => startLogin(false), [startLogin]);
+  const requestRelogin = useCallback(() => startLogin(true), [startLogin]);
+
+  const answerNo = useCallback(() => {
+    dispatch({ type: "answer-no" });
+    // Best-effort: the popup already stopped nagging locally even if this fails.
+    void namedTunnelApi.dismiss().catch(() => {});
+  }, [dispatch]);
+
+  const cancelLogin = useCallback(() => {
+    dispatch({ type: "cancel" });
+    void namedTunnelApi.cancelLogin().catch(() => {});
+  }, [dispatch]);
+
+  const confirmZone = useCallback(() => dispatch({ type: "confirm-zone" }), [dispatch]);
+  const startOver = useCallback(() => dispatch({ type: "start-over" }), [dispatch]);
+  const close = useCallback(() => dispatch({ type: "close" }), [dispatch]);
+
+  const setHostnamePrefix = useCallback((prefix: string) => {
+    const prev = stepRef.current;
+    if (prev.k !== "choose-hostname") return;
+    const check = validateHostname(buildHostname(prefix, prev.zone), prev.zone);
+    dispatch({ type: "hostname-prefix", prefix, error: check.ok ? undefined : check.reason });
+  }, [dispatch]);
+
+  const submitHostname = useCallback(() => {
+    const prev = stepRef.current;
+    if (prev.k !== "choose-hostname") return;
+    const hostname = buildHostname(prev.prefix, prev.zone);
+    const check = validateHostname(hostname, prev.zone);
+    if (!check.ok) {
+      dispatch({ type: "hostname-prefix", prefix: prev.prefix, error: check.reason });
+      return;
+    }
+
+    dispatch({ type: "submit" });
+    namedTunnelApi.setup(hostname)
+      .then((result) => {
+        cachedNamedHostname = result.hostname;
+        if (result.pending) {
+          dispatch({ type: "setup-pending", hostname: result.hostname, message: result.message ?? namedTunnelCopy.pending.title });
+        } else {
+          dispatch({ type: "setup-done", hostname: result.hostname });
+        }
+        // The done/pending cards are terminal (not in STATUS_RESETTABLE), so
+        // this only ever refreshes the separate `status` snapshot — never
+        // clobbers the card the user is looking at.
+        void refreshStatus();
+      })
+      .catch((e) => dispatch({ type: "setup-error", message: errorMessage(e) }));
+  }, [dispatch, refreshStatus]);
+
+  return {
+    step, status, answerYes, answerNo, cancelLogin, retryLogin,
+    confirmZone, startOver, setHostnamePrefix, submitHostname,
+    requestRelogin, close, refreshStatus,
+  };
+}

package/src/web/components/tunnels/tunnel-manager-tab.tsx

@@ -3,6 +3,7 @@ import { Check, Copy, ExternalLink, Globe, Loader2, Lock, RefreshCw, Square } fr
 import { tunnelsApi, type TunnelEntry } from "@/lib/api-tunnels";
 import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
+import { NamedTunnelSection } from "@/components/tunnels/named-tunnel/named-tunnel-section";
 
 /** Badge label + style per tunnel source. */
 const SOURCE_META: Record<TunnelEntry["source"], { label: string; cls: string }> = {
@@ -91,6 +92,9 @@ export function TunnelManagerTab() {
 
   return (
     <div className="flex flex-col h-full w-full bg-background">
+      {/* Named tunnel status + setup entry point, above the quick-forward form */}
+      <NamedTunnelSection />
+
       {/* Compact start form (sidebar section is already labelled in the rail) */}
       <div className="p-3 border-b border-border bg-surface">
         <form onSubmit={handleSubmit} className="flex items-center gap-2">

package/src/web/hooks/use-global-events.ts

@@ -23,6 +23,8 @@ import { syncRunningSessions } from "@/lib/sync-running-sessions";
  *   registry, since a phase change that happened while this socket was down was
  *   never delivered and would otherwise stick until a full reload.
  * - `jira:*` → re-dispatched as window events.
+ * - `tunnel:*` → re-dispatched as window events (named-tunnel setup flow —
+ *   login URL/state, setup progress/done/pending/error).
  *
  * Also tells the server which project to watch, so file watching follows the
  * active project instead of depending on a chat socket existing.
@@ -83,7 +85,7 @@ export function useGlobalEvents(enabled: boolean, projectName?: string): void {
         return;
       }
 
-      if (type.startsWith("jira:")) {
+      if (type.startsWith("jira:") || type.startsWith("tunnel:")) {
         window.dispatchEvent(new CustomEvent(type, { detail: data }));
       }
     });

package/src/web/lib/api-named-tunnel.ts

@@ -0,0 +1,54 @@
+import { api } from "./api-client";
+
+export type LoginState = "idle" | "waiting" | "slow" | "success" | "timeout" | "cancelled" | "error";
+export interface LoginSnapshot { state: LoginState; url: string | null; message: string | null }
+
+// "mismatch" = a valid, parseable cert whose pinned account/zone no longer
+// matches this setup's pin — same recovery path as "invalid" (re-login), but
+// a different reason to show the user.
+export type CertState = "none" | "invalid" | "ok" | "mismatch";
+
+export interface NamedTunnelStatus {
+  mode: "quick" | "named";
+  hostname: string | null;
+  tunnelName: string | null;
+  tokenMasked: string | null;
+  certState: CertState;
+  dismissed: boolean;
+  login: LoginSnapshot;
+  /** What the supervisor is actually running (from status.json); null when no supervisor. */
+  liveMode?: "quick" | "named" | null;
+  /** Supervisor-side downgrade warning (e.g. named tunnel failed → running quick). */
+  tunnelWarning?: string | null;
+  /**
+   * PPM auth toggle — a named tunnel must never be reachable from an
+   * auth-disabled install, so the client hides the popup when this is false.
+   * Optional so older servers (no field) keep the previous "don't nag"
+   * behaviour: the reducer treats a missing value as `true`.
+   */
+  authEnabled?: boolean;
+}
+
+export interface ZoneInfo {
+  zone: string;
+  proposedHostname: string;
+}
+
+export interface SetupResult {
+  hostname: string;
+  tunnelName: string;
+  pending?: boolean;
+  message?: string;
+}
+
+/** Typed client for the named-tunnel setup API (/api/tunnel/named). */
+export const namedTunnelApi = {
+  status: () => api.get<NamedTunnelStatus>("/api/tunnel/named/status"),
+  dismiss: () => api.post<{ dismissed: true }>("/api/tunnel/named/dismiss"),
+  zone: () => api.get<ZoneInfo>("/api/tunnel/named/zone"),
+  login: (relogin = false) =>
+    api.post<LoginSnapshot>(`/api/tunnel/named/login${relogin ? "?relogin=1" : ""}`),
+  cancelLogin: () => api.post<{ state: "cancelled" }>("/api/tunnel/named/login/cancel"),
+  setup: (hostname: string) => api.post<SetupResult>("/api/tunnel/named/setup", { hostname }),
+  disable: () => api.post<{ mode: "quick" }>("/api/tunnel/named/disable"),
+};

package/src/web/lib/last-known-local-url.ts

@@ -0,0 +1,23 @@
+const KEY = "ppm-last-local-url";
+
+/**
+ * The LAN URL of this PPM server, remembered from the last time the API
+ * answered. When the public hostname stops responding, the API is exactly what
+ * we cannot ask any more — so the offline overlay reads this to offer a way
+ * back in. Persisted (not just in-memory) so it survives the reload a user
+ * naturally tries first.
+ */
+export function rememberLocalUrl(url: string | null): void {
+  try {
+    if (url) localStorage.setItem(KEY, url);
+  } catch { /* private mode / storage full — the overlay just omits the link */ }
+}
+
+export function getLastKnownLocalUrl(): string | null {
+  try {
+    const v = localStorage.getItem(KEY);
+    return v && /^https?:\/\//.test(v) ? v : null;
+  } catch {
+    return null;
+  }
+}

package/src/web/stores/notification-store.ts

@@ -106,7 +106,26 @@ export const useNotificationStore = create<NotificationStore>()((set) => ({
     }
   },
 
-  clearAll: () => set({ notifications: new Map() }),
+  clearAll: () => {
+    // Read the entries out before the wipe: the request needs their ids, and state no
+    // longer holds them once it is cleared.
+    const entries = [...useNotificationStore.getState().notifications];
+    if (entries.length === 0) return;
+    set({ notifications: new Map() });
+    // One request for the lot, on a route that takes no project. The per-session route is
+    // mounted under /api/project/:projectName, so its middleware 404s for exactly the
+    // entries that most need clearing — a session whose project was renamed or deleted, or
+    // one PPM recorded no project for. Those are the ones that came back on every reload.
+    api.post("/api/chat/sessions/read", { sessionIds: entries.map(([id]) => id) }).catch(() => {
+      // The server still holds them, so a reload would bring them back regardless. Putting
+      // them back now means the button does not quietly claim to have done something.
+      set((s) => {
+        const restored = new Map(s.notifications);
+        for (const [id, entry] of entries) if (!restored.has(id)) restored.set(id, entry);
+        return { notifications: restored };
+      });
+    });
+  },
 
   loadFromServer: async (projectName: string) => {
     try {

package/dist/web/assets/api-client-DTZEgjBQ.js

@@ -1 +0,0 @@
-import"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import{i as e,n as t}from"./api-client-aQb5hHE5.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-kd1j4iR8.js

@@ -1 +0,0 @@
-import"./vendor-markdown-Ls5AcU91.js";import"./vendor-ui-CaeeFO0B.js";import"./api-client-aQb5hHE5.js";import{v as e}from"./api-settings-Bd3M4YpI.js";export{e as updateDeviceName};

package/dist/web/assets/architecture-PBZL5I3N-8dCMT9r7.js

@@ -1 +0,0 @@
-import{K as e}from"./vendor-mermaid-By4AVvJY.js";export{e as createArchitectureServices};