@hienlh/ppm 0.18.12 → 0.18.13

package/src/web/components/tunnels/named-tunnel/named-tunnel-section.tsx

@@ -0,0 +1,159 @@
+/**
+ * Permanent Tunnel Manager entry point for the named tunnel: status display
+ * plus the actions that survive after the first-run popup is gone or was
+ * closed early. Uses its own `useNamedTunnelSetup()` instance — see that
+ * hook's docstring for why two instances stay in sync without a shared store.
+ */
+import { useState } from "react";
+import { ExternalLink, Copy, Check, ShieldAlert, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+import { namedTunnelApi } from "@/lib/api-named-tunnel";
+import { copyToClipboard } from "@/lib/clipboard";
+import { useNamedTunnelSetup } from "./use-named-tunnel-setup";
+import { NamedTunnelSetupContent } from "./named-tunnel-setup-content";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+
+export function NamedTunnelSection() {
+  const t = useNamedTunnelSetup();
+  const [confirmDisable, setConfirmDisable] = useState(false);
+  const [disabling, setDisabling] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const c = namedTunnelCopy.section;
+  const status = t.status;
+
+  if (!status) return null; // still loading — avoid flashing empty controls
+
+  // Disabling the domain kills the connector that is serving this page, so the
+  // temporary URL that replaces it can never reach whoever pressed the button.
+  const servedByOwnHostname =
+    !!status.hostname && typeof window !== "undefined" && window.location.hostname === status.hostname;
+
+  // "ask-domain" is the popup's own opening question; the section skips it and
+  // shows a plain "Set up" button instead, since clicking that button already
+  // means "yes".
+  const inFlow = t.step.k !== "hidden" && t.step.k !== "ask-domain";
+  // Optional until the server route lands it — default to "on" so this never
+  // hides real functionality on a build that predates the field, but never
+  // reopens it for a genuine `false`.
+  const authEnabled = status.authEnabled ?? true;
+  // What is actually serving traffic, not just what was asked for — a failed
+  // named spawn falls back to quick while `mode` (the persisted request)
+  // still says "named".
+  const displayMode = status.liveMode ?? status.mode;
+  const certNeedsRelogin = status.certState === "invalid" || status.certState === "mismatch";
+
+  async function handleDisable() {
+    if (!confirmDisable) {
+      setConfirmDisable(true);
+      setTimeout(() => setConfirmDisable(false), 4000);
+      return;
+    }
+    setConfirmDisable(false);
+    setDisabling(true);
+    try {
+      await namedTunnelApi.disable();
+      toast.success("Đã chuyển về quick tunnel");
+      await t.refreshStatus();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Không chuyển được về quick tunnel");
+    } finally {
+      setDisabling(false);
+    }
+  }
+
+  async function copyHostname(hostname: string) {
+    const ok = await copyToClipboard(`https://${hostname}`);
+    if (!ok) { toast.error("Failed to copy URL"); return; }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <div className="p-3 border-b border-border bg-surface space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-text-primary">{c.title}</span>
+        <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium uppercase tracking-wide ${
+          displayMode === "named" ? "bg-success/10 text-success" : "bg-surface-elevated text-text-secondary"
+        }`}>
+          {displayMode === "named" ? c.modeNamed : c.modeQuick}
+        </span>
+        {status.mode !== displayMode && (
+          <span className="text-[10px] text-text-subtle">({c.configuredAs(status.mode)})</span>
+        )}
+      </div>
+
+      {status.mode === "named" && status.hostname && (
+        <div className="flex items-center gap-1 text-xs">
+          <a href={`https://${status.hostname}`} target="_blank" rel="noopener noreferrer" className="flex-1 min-w-0 truncate text-primary hover:underline">
+            {status.hostname}
+          </a>
+          <button
+            onClick={() => copyHostname(status.hostname!)}
+            aria-label="Copy URL"
+            className="shrink-0 size-11 flex items-center justify-center rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            {copied ? <Check className="size-3.5 text-success" /> : <Copy className="size-3.5 text-text-secondary" />}
+          </button>
+          <a
+            href={`https://${status.hostname}`} target="_blank" rel="noopener noreferrer"
+            className="shrink-0 size-11 flex items-center justify-center rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            <ExternalLink className="size-3.5 text-text-secondary" />
+          </a>
+        </div>
+      )}
+
+      {status.tokenMasked && (
+        <p className="text-[10px] font-mono text-text-subtle">{c.tokenLabel}: {status.tokenMasked}</p>
+      )}
+
+      {status.tunnelWarning && (
+        <div className="flex items-center gap-2 rounded-md border border-warning/30 bg-warning/10 px-2.5 py-2 text-xs text-foreground">
+          <AlertTriangle className="size-3.5 text-warning shrink-0" />
+          {status.tunnelWarning}
+        </div>
+      )}
+
+      {certNeedsRelogin && !inFlow && (
+        <div className="flex items-center gap-2 rounded-md border border-warning/30 bg-warning/10 px-2.5 py-2 text-xs text-foreground">
+          <ShieldAlert className="size-3.5 text-warning shrink-0" />
+          {status.certState === "mismatch" ? c.certMismatch : c.certInvalid}
+        </div>
+      )}
+
+      {inFlow ? (
+        <NamedTunnelSetupContent step={t.step} t={t} />
+      ) : !authEnabled ? (
+        <p className="text-xs text-text-secondary">{c.authDisabled}</p>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {status.mode === "quick" && (
+            <button
+              onClick={t.answerYes}
+              className="min-h-11 px-3 py-2 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
+            >
+              {c.setup}
+            </button>
+          )}
+          {status.mode === "named" && (
+            <button
+              onClick={handleDisable}
+              disabled={disabling || servedByOwnHostname}
+              title={servedByOwnHostname ? c.disableSelfCut : undefined}
+              className={`min-h-11 px-3 py-2 rounded-md text-xs transition-colors disabled:opacity-50 ${
+                confirmDisable ? "bg-destructive/15 text-destructive" : "border border-border text-text-secondary hover:bg-surface-elevated"
+              }`}
+            >
+              {confirmDisable ? c.disableConfirm : c.disable}
+            </button>
+          )}
+        </div>
+      )}
+      {/* Turning the domain off kills the connector serving this very page, so
+          the replacement link would never reach the user who pressed it. */}
+      {status.mode === "named" && servedByOwnHostname && (
+        <p className="text-[11px] text-text-secondary leading-relaxed">{c.disableSelfCut}</p>
+      )}
+    </div>
+  );
+}

package/src/web/components/tunnels/named-tunnel/named-tunnel-setup-content.tsx

@@ -0,0 +1,197 @@
+/**
+ * Step content switch — one card per step. Both the popup shell and the
+ * Tunnel Manager section render this, so it never assumes it is inside a
+ * dialog or a sheet (no close button of its own; the shell owns dismissal).
+ */
+import { Loader2, AlertCircle } from "lucide-react";
+import type { Step } from "./named-tunnel-step-reducer";
+import type { UseNamedTunnelSetup } from "./use-named-tunnel-setup";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+import { NamedTunnelLoginStep } from "./named-tunnel-login-step";
+import { NamedTunnelHostnameField } from "./named-tunnel-hostname-field";
+
+const primaryBtn = "w-full min-h-11 py-3 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:pointer-events-none";
+const secondaryBtn = "w-full min-h-11 py-3 rounded-lg border border-border text-sm text-text-secondary hover:bg-surface-elevated transition-colors";
+
+interface Props {
+  step: Step;
+  t: UseNamedTunnelSetup;
+}
+
+export function NamedTunnelSetupContent({ step, t }: Props) {
+  switch (step.k) {
+    case "hidden":
+      return null;
+
+    case "ask-domain": {
+      const c = namedTunnelCopy.askDomain;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{c.body}</p>
+          </div>
+          <div className="flex gap-2">
+            <button type="button" onClick={t.answerNo} className={secondaryBtn}>{c.no}</button>
+            <button type="button" onClick={t.answerYes} className={primaryBtn}>{c.yes}</button>
+          </div>
+        </div>
+      );
+    }
+
+    case "no-domain": {
+      const c = namedTunnelCopy.noDomain;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{c.body}</p>
+          </div>
+          <button type="button" onClick={t.close} className={primaryBtn}>{c.close}</button>
+        </div>
+      );
+    }
+
+    case "login-wait":
+      return <NamedTunnelLoginStep url={step.url} slow={step.slow} onCancel={t.cancelLogin} />;
+
+    case "login-timeout": {
+      const c = namedTunnelCopy.timeout;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{c.body}</p>
+          </div>
+          <button type="button" onClick={t.retryLogin} className={primaryBtn}>{c.retry}</button>
+        </div>
+      );
+    }
+
+    case "login-cancelled": {
+      const c = namedTunnelCopy.cancelled;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{c.body}</p>
+          </div>
+          <button type="button" onClick={t.retryLogin} className={primaryBtn}>{c.retry}</button>
+        </div>
+      );
+    }
+
+    case "confirm-zone": {
+      const c = namedTunnelCopy.confirmZone;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{c.body(step.zone)}</p>
+          </div>
+          <div className="flex gap-2">
+            <button type="button" onClick={t.startOver} className={secondaryBtn}>{c.startOver}</button>
+            <button type="button" onClick={t.confirmZone} className={primaryBtn}>{c.confirm}</button>
+          </div>
+        </div>
+      );
+    }
+
+    case "needs-relogin": {
+      const c = namedTunnelCopy.needsRelogin;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{step.message}</p>
+          </div>
+          <button type="button" onClick={t.requestRelogin} className={primaryBtn}>{c.action}</button>
+        </div>
+      );
+    }
+
+    case "choose-hostname": {
+      const c = namedTunnelCopy.hostname;
+      return (
+        <div className="space-y-4">
+          <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+          <NamedTunnelHostnameField
+            zone={step.zone}
+            prefix={step.prefix}
+            error={step.error}
+            onChange={t.setHostnamePrefix}
+          />
+          <button
+            type="button"
+            onClick={t.submitHostname}
+            disabled={!step.prefix || !!step.error}
+            className={primaryBtn}
+          >
+            {c.submit}
+          </button>
+        </div>
+      );
+    }
+
+    case "applying":
+      return (
+        <div className="space-y-4 py-4">
+          <div className="flex items-center gap-2 text-sm text-foreground">
+            <Loader2 className="size-4 animate-spin text-primary" />
+            {step.message}
+          </div>
+        </div>
+      );
+
+    case "done": {
+      const c = namedTunnelCopy.done;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary break-all">{c.body(step.hostname)}</p>
+          </div>
+          <button type="button" onClick={t.close} className={primaryBtn}>{c.close}</button>
+        </div>
+      );
+    }
+
+    case "pending": {
+      const c = namedTunnelCopy.pending;
+      return (
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+            <p className="mt-1 text-sm text-text-secondary leading-relaxed">{step.message}</p>
+            <p className="mt-2 text-xs font-mono text-text-subtle bg-surface-elevated rounded px-2 py-1.5 inline-block">
+              ppm restart
+            </p>
+          </div>
+          <button type="button" onClick={t.close} className={primaryBtn}>{c.close}</button>
+        </div>
+      );
+    }
+
+    case "error": {
+      const c = namedTunnelCopy.error;
+      return (
+        <div className="space-y-4">
+          <div className="flex items-start gap-2">
+            <AlertCircle className="size-4 text-destructive shrink-0 mt-0.5" />
+            <div>
+              <h2 className="text-base font-semibold text-foreground">{c.title}</h2>
+              <p className="mt-1 text-sm text-text-secondary leading-relaxed">{step.message}</p>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <button type="button" onClick={t.close} className={secondaryBtn}>{c.close}</button>
+            <button type="button" onClick={t.retryLogin} className={primaryBtn}>{c.retry}</button>
+          </div>
+        </div>
+      );
+    }
+
+    default:
+      return null;
+  }
+}

package/src/web/components/tunnels/named-tunnel/named-tunnel-setup-popup.tsx

@@ -0,0 +1,57 @@
+/**
+ * Mount point for the first-run named-tunnel flow: a centred dialog on
+ * desktop, a bottom sheet on mobile (`docs/design-guidelines.md` — dialogs
+ * must never be desktop-only). Closing (backdrop, swipe, X) only hides this
+ * popup instance — it does not call `dismiss()` and does not cancel an
+ * in-progress login; the Tunnel Manager section is the permanent re-entry
+ * point, so nothing is lost.
+ */
+import { useState } from "react";
+import { X } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useNamedTunnelSetup } from "./use-named-tunnel-setup";
+import { NamedTunnelSetupContent } from "./named-tunnel-setup-content";
+
+export function NamedTunnelSetupPopup() {
+  const t = useNamedTunnelSetup();
+  const isMobile = useIsMobile();
+  const [closedByUser, setClosedByUser] = useState(false);
+
+  const visible = t.step.k !== "hidden" && !closedByUser;
+  if (!visible) return null;
+
+  const handleClose = () => setClosedByUser(true);
+
+  if (isMobile) {
+    return (
+      <BottomSheet open={visible} onClose={handleClose} zIndex={45}>
+        <div className="px-4 pb-4">
+          <NamedTunnelSetupContent step={t.step} t={t} />
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <>
+      <div className="fixed inset-0 z-[45] bg-black/40" onClick={handleClose} />
+      <div
+        className="fixed z-[45] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md max-h-[85vh] overflow-y-auto rounded-xl bg-popover text-popover-foreground border border-border shadow-2xl p-5"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={handleClose}
+          aria-label="Close"
+          className="absolute right-3 top-3 size-11 flex items-center justify-center rounded-md hover:bg-surface-elevated transition-colors"
+        >
+          <X className="size-4" />
+        </button>
+        <div className="pr-8">
+          <NamedTunnelSetupContent step={t.step} t={t} />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/web/components/tunnels/named-tunnel/named-tunnel-step-reducer.ts

@@ -0,0 +1,191 @@
+/**
+ * Pure step machine for the named-tunnel first-run flow. No side effects here
+ * (no fetch, no window events) — `use-named-tunnel-setup.ts` owns those and
+ * dispatches actions into `reduceStep`. Kept side-effect-free so the whole
+ * transition table is unit-testable without mocking the network or WS.
+ */
+import type { LoginState, NamedTunnelStatus } from "@/lib/api-named-tunnel";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+import { DEFAULT_HOSTNAME_PREFIX } from "./hostname-validation";
+
+export type Step =
+  | { k: "hidden" }
+  | { k: "ask-domain" }
+  | { k: "no-domain" }
+  | { k: "login-wait"; url: string | null; slow: boolean }
+  | { k: "login-timeout" }
+  | { k: "login-cancelled" }
+  | { k: "confirm-zone"; zone: string }
+  | { k: "needs-relogin"; message: string }
+  | { k: "choose-hostname"; zone: string; prefix: string; error?: string }
+  | { k: "applying"; zone: string; prefix: string; message: string }
+  | { k: "done"; hostname: string }
+  | { k: "pending"; hostname: string; message: string }
+  | { k: "error"; message: string };
+
+export type Action =
+  | { type: "status"; status: NamedTunnelStatus }
+  | { type: "answer-yes" }
+  | { type: "answer-no" }
+  | { type: "login-url"; url: string }
+  | { type: "login-state"; state: LoginState; message?: string | null }
+  | { type: "cancel" }
+  | { type: "retry" }
+  | { type: "zone-loaded"; zone: string }
+  | { type: "zone-error"; message: string }
+  | { type: "confirm-zone" }
+  | { type: "start-over" }
+  | { type: "hostname-prefix"; prefix: string; error?: string }
+  | { type: "submit" }
+  | { type: "setup-step"; message: string }
+  | { type: "setup-done"; hostname: string }
+  | { type: "setup-pending"; hostname: string; message: string }
+  | { type: "setup-error"; message: string }
+  | { type: "needs-relogin"; message: string }
+  | { type: "close" };
+
+/** First step to render once `/status` has been read on mount. */
+export function initialStepFromStatus(status: NamedTunnelStatus): Step {
+  // `authEnabled` is optional until the server route lands it — a missing
+  // value must not silently reopen the popup on an auth-disabled install, so
+  // default to "on" only for backward compatibility, never to hide a real
+  // `false`.
+  const authEnabled = status.authEnabled ?? true;
+  if (!authEnabled) {
+    return { k: "hidden" };
+  }
+  if (status.certState === "invalid" || status.certState === "mismatch") {
+    return {
+      k: "needs-relogin",
+      message: status.certState === "mismatch"
+        ? namedTunnelCopy.needsRelogin.certMismatch
+        : namedTunnelCopy.needsRelogin.certInvalid,
+    };
+  }
+  if (status.mode !== "quick" || status.dismissed) {
+    return { k: "hidden" };
+  }
+  return stepFromLoginState(status.login.state, status.login.url, status.login.message);
+}
+
+/**
+ * Steps a later `/status` refresh is allowed to recompute. Once the user has
+ * committed past login (confirm-zone, choose-hostname, applying) or reached a
+ * terminal card (done, pending, no-domain), a stale or lagging status
+ * snapshot must not silently reset that progress — only these "not yet
+ * committed" steps re-derive from a fresh fetch.
+ */
+const STATUS_RESETTABLE: ReadonlySet<Step["k"]> = new Set([
+  "hidden", "ask-domain", "login-wait", "login-timeout", "login-cancelled", "needs-relogin", "error",
+]);
+
+/**
+ * Steps that are actually waiting on a zone lookup. A login session's
+ * `state` stays "success" long after the moment it fired — it is not reset
+ * to "idle" — so a later, unrelated `/status` refresh (after setup-done, or
+ * on mount of an already-configured install) can still read "success" and
+ * ask for the zone again. Without this gate that stray `zone-loaded` would
+ * silently replace a "done" card with "confirm-zone", or reopen the hidden
+ * popup of a finished install straight into it. Exported so the hook can
+ * skip the redundant `/zone` call at the source instead of only discarding
+ * its result here.
+ */
+export const ZONE_EXPECTING_STEPS: ReadonlySet<Step["k"]> = new Set(["login-wait", "needs-relogin"]);
+
+function stepFromLoginState(state: LoginState, url: string | null, message: string | null): Step {
+  switch (state) {
+    case "waiting":
+      return { k: "login-wait", url, slow: false };
+    case "slow":
+      return { k: "login-wait", url, slow: true };
+    case "timeout":
+      return { k: "login-timeout" };
+    case "cancelled":
+      return { k: "login-cancelled" };
+    case "error":
+      return { k: "error", message: message ?? namedTunnelCopy.error.title };
+    case "success":
+      // Zone lookup is a hook-level side effect triggered right after this;
+      // the spinner stays on the login step until `zone-loaded` arrives.
+      return { k: "login-wait", url, slow: false };
+    case "idle":
+    default:
+      return { k: "ask-domain" };
+  }
+}
+
+export function reduceStep(step: Step, action: Action): Step {
+  switch (action.type) {
+    case "status":
+      return STATUS_RESETTABLE.has(step.k) ? initialStepFromStatus(action.status) : step;
+
+    case "answer-yes":
+      return { k: "login-wait", url: null, slow: false };
+
+    case "answer-no":
+      return { k: "no-domain" };
+
+    case "login-url":
+      return step.k === "login-wait"
+        ? { ...step, url: action.url }
+        : { k: "login-wait", url: action.url, slow: false };
+
+    case "login-state":
+      return stepFromLoginState(action.state, step.k === "login-wait" ? step.url : null, action.message ?? null);
+
+    case "cancel":
+      return { k: "login-cancelled" };
+
+    case "retry":
+      return { k: "login-wait", url: null, slow: false };
+
+    case "zone-loaded":
+      return ZONE_EXPECTING_STEPS.has(step.k) ? { k: "confirm-zone", zone: action.zone } : step;
+
+    case "zone-error":
+      return ZONE_EXPECTING_STEPS.has(step.k) ? { k: "error", message: action.message } : step;
+
+    case "confirm-zone":
+      return step.k === "confirm-zone"
+        ? { k: "choose-hostname", zone: step.zone, prefix: DEFAULT_HOSTNAME_PREFIX }
+        : step;
+
+    case "start-over":
+      return { k: "ask-domain" };
+
+    case "hostname-prefix":
+      return step.k === "choose-hostname"
+        ? { ...step, prefix: action.prefix, error: action.error }
+        : step;
+
+    case "submit":
+      return step.k === "choose-hostname"
+        ? { k: "applying", zone: step.zone, prefix: step.prefix, message: namedTunnelCopy.applying.title }
+        : step;
+
+    case "setup-step":
+      return step.k === "applying" ? { ...step, message: action.message } : step;
+
+    case "setup-done":
+      return { k: "done", hostname: action.hostname };
+
+    case "setup-pending":
+      return { k: "pending", hostname: action.hostname, message: action.message };
+
+    case "setup-error":
+      // Route back to the hostname field with the reason inline — losing the
+      // typed prefix here would make the user re-type it for a typo-sized fix.
+      return step.k === "applying"
+        ? { k: "choose-hostname", zone: step.zone, prefix: step.prefix, error: action.message }
+        : { k: "error", message: action.message };
+
+    case "needs-relogin":
+      return { k: "needs-relogin", message: action.message };
+
+    case "close":
+      return { k: "hidden" };
+
+    default:
+      return step;
+  }
+}