@hienlh/ppm 0.18.11 → 0.18.13

package/src/web/components/layout/cloud-share-named-tunnel-row.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useState } from "react";
+import { Globe, Loader2, Plus, Square } from "lucide-react";
+import { api } from "@/lib/api-client";
+import { namedTunnelApi, type NamedTunnelStatus } from "@/lib/api-named-tunnel";
+
+interface Props {
+  /** Called whenever the named-tunnel status is (re)loaded so the parent can adapt its copy. */
+  onStatus: (status: NamedTunnelStatus) => void;
+  /** Port the public URL is served on, so a temporary tunnel can target the same thing. */
+  publicPort: number | null;
+  /** Called when a temporary link appears or goes away. */
+  onTempUrl: (url: string | null) => void;
+}
+
+interface TunnelEntry {
+  pid: number;
+  port: number | null;
+  url: string | null;
+  source: "app" | "ppm" | "external";
+  protected: boolean;
+}
+
+/**
+ * Custom-domain row of the share card.
+ *
+ * Deliberately does NOT offer "switch back to a temporary link": that kills the
+ * connector serving the very page the button lives on, so the user never sees
+ * the replacement URL. A temporary link is offered as an ADDITION instead —
+ * a second quick tunnel onto the same port, for one-off sharing without handing
+ * out the permanent hostname. Turning the domain off entirely stays in the
+ * Tunnel Manager, where it can warn about exactly this.
+ */
+export function CloudShareNamedTunnelRow({ onStatus, publicPort, onTempUrl }: Props) {
+  const [status, setStatus] = useState<NamedTunnelStatus | null>(null);
+  const [temp, setTemp] = useState<TunnelEntry | null>(null);
+  const [busy, setBusy] = useState<"add" | "stop" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const findTemp = useCallback((list: TunnelEntry[], namedUrl: string | null) => {
+    return list.find((t) =>
+      t.source === "ppm" && !t.protected && t.port === publicPort && t.url && t.url !== namedUrl,
+    ) ?? null;
+  }, [publicPort]);
+
+  const load = useCallback(async () => {
+    try {
+      const s = await namedTunnelApi.status();
+      setStatus(s);
+      onStatus(s);
+      const list = await api.get<TunnelEntry[]>("/api/tunnels").catch(() => [] as TunnelEntry[]);
+      const found = findTemp(list, s.hostname ? `https://${s.hostname}` : null);
+      setTemp(found);
+      onTempUrl(found?.url ?? null);
+    } catch { /* share card degrades to the plain view */ }
+  }, [onStatus, onTempUrl, findTemp]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const addTemp = useCallback(async () => {
+    if (!publicPort) return;
+    setBusy("add"); setError(null);
+    try {
+      const res = await api.post<{ port: number; url: string }>("/api/tunnels", { port: publicPort });
+      setTemp({ pid: 0, port: publicPort, url: res.url, source: "ppm", protected: false });
+      onTempUrl(res.url);
+      void load(); // pick up the real pid so Stop works
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not create a temporary link");
+    } finally { setBusy(null); }
+  }, [publicPort, onTempUrl, load]);
+
+  const stopTemp = useCallback(async () => {
+    if (!temp?.pid) return;
+    setBusy("stop"); setError(null);
+    try {
+      await api.del(`/api/tunnels/${temp.pid}`);
+      setTemp(null);
+      onTempUrl(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not stop the temporary link");
+    } finally { setBusy(null); }
+  }, [temp?.pid, onTempUrl]);
+
+  if (!status || status.authEnabled === false || !status.hostname) return null;
+  if ((status.liveMode ?? status.mode) !== "named") return null;
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-2 text-xs">
+        <div className="flex items-center gap-1.5 min-w-0">
+          <Globe className="size-3 text-primary shrink-0" />
+          <span className="text-foreground truncate">Your domain · {status.hostname}</span>
+        </div>
+        <button
+          onClick={temp ? stopTemp : addTemp}
+          disabled={busy !== null || !publicPort}
+          className="shrink-0 min-h-11 px-2.5 flex items-center gap-1 text-xs rounded-md border border-border hover:bg-muted transition-colors disabled:opacity-50"
+          title={temp ? "Stop the temporary link" : "Also expose a temporary link for one-off sharing"}
+        >
+          {busy ? <Loader2 className="size-3.5 animate-spin" />
+            : temp ? <><Square className="size-3" /> Stop temp link</>
+            : <><Plus className="size-3" /> Temp link</>}
+        </button>
+      </div>
+      {status.tunnelWarning && (
+        <p className="text-[11px] text-amber-500 leading-relaxed">{status.tunnelWarning}</p>
+      )}
+      {error && <p className="text-[11px] text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/layout/cloud-share-popover.tsx

@@ -4,6 +4,9 @@ import { QRCodeSVG } from "qrcode.react";
 import { api } from "@/lib/api-client";
 import { copyToClipboard } from "@/lib/clipboard";
 import { CloudAliasRow } from "./cloud-alias-row";
+import { CloudShareNamedTunnelRow } from "./cloud-share-named-tunnel-row";
+import type { NamedTunnelStatus } from "@/lib/api-named-tunnel";
+import { rememberLocalUrl } from "@/lib/last-known-local-url";
 
 interface CloudStatus {
   logged_in: boolean;
@@ -39,22 +42,40 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
   const [copied, setCopied] = useState<string | null>(null);
   const [deviceCode, setDeviceCode] = useState<{ userCode: string; verifyUrl: string } | null>(null);
   const [loginPolling, setLoginPolling] = useState(false);
+  // A live named tunnel means the public URL is already permanent — the
+  // "this link changes on restart" pitch would be false.
+  const [namedLive, setNamedLive] = useState(false);
+  const [tempUrl, setTempUrl] = useState<string | null>(null);
+
+  const reloadStatus = useCallback(async () => {
+    try {
+      const [cloudRes, tunnelRes] = await Promise.all([
+        api.get<CloudStatus>("/api/cloud/status"),
+        api.get<TunnelStatus>("/api/tunnel"),
+      ]);
+      setCloud(cloudRes);
+      setTunnel(tunnelRes);
+      rememberLocalUrl(tunnelRes.localUrl);
+    } catch { /* ignore */ }
+  }, []);
 
   // Load status on mount
   useEffect(() => {
-    (async () => {
-      try {
-        const [cloudRes, tunnelRes] = await Promise.all([
-          api.get<CloudStatus>("/api/cloud/status"),
-          api.get<TunnelStatus>("/api/tunnel"),
-        ]);
-        setCloud(cloudRes);
-        setTunnel(tunnelRes);
-      } catch { /* ignore */ }
-      setLoading(false);
-    })();
+    reloadStatus().finally(() => setLoading(false));
+  }, [reloadStatus]);
+
+  const handleNamedStatus = useCallback((s: NamedTunnelStatus) => {
+    setNamedLive((s.liveMode ?? s.mode) === "named");
   }, []);
 
+  // The port the public URL is served on — a temporary tunnel must target the
+  // same one. `localUrl` is the only place the server reports it to this card.
+  const publicPort = (() => {
+    if (!tunnel?.localUrl) return null;
+    const port = Number(new URL(tunnel.localUrl).port);
+    return Number.isFinite(port) && port > 0 ? port : null;
+  })();
+
   const handleCopy = useCallback((url: string) => {
     void copyToClipboard(url);
     setCopied(url);
@@ -254,8 +275,9 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
               <>
                 {shareUrl && (
                   <p className="text-[11px] text-muted-foreground leading-relaxed">
-                    This link changes every time PPM restarts. Sign in to get a permanent one
-                    that always points here — private to your account.
+                    {namedLive
+                      ? "This link is permanent — it lives on your own domain. Sign in to PPM Cloud to keep your devices in sync."
+                      : "This link changes every time PPM restarts. Sign in to get a permanent one that always points here — private to your account."}
                   </p>
                 )}
                 <button
@@ -263,7 +285,7 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
                   className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium rounded-md border border-border hover:bg-muted transition-colors"
                 >
                   <Cloud className="size-3.5" />
-                  {shareUrl ? "Get a permanent link" : "Sign in to PPM Cloud"}
+                  {shareUrl && !namedLive ? "Get a permanent link" : "Sign in to PPM Cloud"}
                 </button>
               </>
             )}
@@ -309,6 +331,13 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
           {/* Separator */}
           <div className="border-t border-border" />
 
+          {/* Custom domain: status + optional extra temporary link */}
+          <CloudShareNamedTunnelRow
+            onStatus={handleNamedStatus}
+            publicPort={publicPort}
+            onTempUrl={setTempUrl}
+          />
+
           {/* Local Network URL */}
           {tunnel?.localUrl && (
             <div className="space-y-1">
@@ -347,6 +376,19 @@ export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
             </div>
           )}
 
+          {/* Extra one-off link that lives alongside the permanent one */}
+          {tempUrl && tempUrl !== shareUrl && (
+            <div className="space-y-1">
+              <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
+                Temporary link
+              </span>
+              <UrlRow url={tempUrl} copied={copied} onCopy={handleCopy} />
+              <p className="text-[11px] text-muted-foreground leading-relaxed">
+                Stops when you press Stop temp link, or when PPM restarts.
+              </p>
+            </div>
+          )}
+
           {/* Cloud Dashboard Link */}
           {cloud?.logged_in && cloud.linked && (
             <a

package/src/web/components/shared/connection-lost-overlay.tsx

@@ -1,11 +1,28 @@
-import { WifiOff, ServerOff, RefreshCw } from "lucide-react";
+import { WifiOff, ServerOff, RefreshCw, Home } from "lucide-react";
 import { useState } from "react";
 import { useConnectionStore } from "@/stores/connection-store";
+import { getCachedNamedHostname } from "@/components/tunnels/named-tunnel/use-named-tunnel-setup";
+import { getLastKnownLocalUrl } from "@/lib/last-known-local-url";
 
 const CLOUD_URL = "https://cloud.ppm.sh";
 
+/**
+ * True when this page is reached through *some* cloudflared tunnel (quick or
+ * named) rather than directly (localhost/LAN IP) — that distinction decides
+ * whether the "tunnel closed" or the generic "server unreachable" copy shows.
+ * The named hostname is cached in memory by the setup hook the last time
+ * `/status` answered while online; there is nothing else to ask once the API
+ * itself is the thing that is down.
+ */
 function isTunnelDomain(): boolean {
-  return window.location.hostname.endsWith(".trycloudflare.com");
+  const host = window.location.hostname;
+  return host.endsWith(".trycloudflare.com") || host === getCachedNamedHostname();
+}
+
+/** Reached through the user's own permanent hostname, not a temporary one. */
+function isNamedDomain(): boolean {
+  const cached = getCachedNamedHostname();
+  return !!cached && window.location.hostname === cached;
 }
 
 export function ConnectionLostOverlay() {
@@ -15,6 +32,8 @@ export function ConnectionLostOverlay() {
   if (!showOverlay) return null;
 
   const isTunnel = isTunnelDomain();
+  const isNamed = isNamedDomain();
+  const localUrl = getLastKnownLocalUrl();
 
   async function handleRetry() {
     setRetrying(true);
@@ -48,22 +67,42 @@ export function ConnectionLostOverlay() {
 
         <div className="space-y-2">
           <h2 className="text-xl font-semibold text-foreground">
-            {isTunnel ? "Connection Lost" : "Server Unreachable"}
+            {isNamed ? "Domain Not Responding" : isTunnel ? "Connection Lost" : "Server Unreachable"}
           </h2>
           <p className="text-sm text-muted-foreground leading-relaxed">
-            {isTunnel
+            {isNamed
+              // A named hostname never rotates, so "the URL changed" — true for a
+              // quick tunnel — would send the user hunting for a new link that
+              // does not exist. The address is fine; something behind it is not.
+              ? "This address stays the same, so keep it. The machine may be asleep, offline, or restarting — it will answer again on this same URL."
+              : isTunnel
               ? "The tunnel appears to have closed. The server may have restarted with a new URL."
               : "Cannot connect to the PPM server. It may have stopped or is restarting."}
           </p>
         </div>
 
         <div className="flex flex-col gap-3">
+          {/* Same machine, same network: the LAN address bypasses Cloudflare
+              entirely, so it still works when only the hostname is broken. */}
+          {isTunnel && localUrl && (
+            <a
+              href={localUrl}
+              className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+            >
+              <Home className="h-4 w-4" />
+              Open on local network
+            </a>
+          )}
           {isTunnel && (
             <a
               href={CLOUD_URL}
               target="_blank"
               rel="noopener noreferrer"
-              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+              className={`inline-flex items-center justify-center rounded-md px-4 py-2.5 text-sm font-medium transition-colors ${
+                localUrl
+                  ? "border border-border text-foreground hover:bg-accent"
+                  : "bg-primary text-primary-foreground hover:bg-primary/90"
+              }`}
             >
               Open PPM Cloud
             </a>

package/src/web/components/tunnels/named-tunnel/hostname-validation.ts

@@ -0,0 +1,14 @@
+/**
+ * Thin client re-export of the server hostname rules, so the prefix field
+ * validates instantly without a round trip — and without a second regex that
+ * could drift from what the server actually enforces.
+ */
+export {
+  validateHostname,
+  buildHostname,
+  proposeHostname,
+} from "../../../../services/named-tunnel/hostname-rules";
+export type { HostnameCheck } from "../../../../services/named-tunnel/hostname-rules";
+
+/** Default prefix proposed to the user — mirrors the server's own `proposeHostname`. */
+export const DEFAULT_HOSTNAME_PREFIX = "ppm";

package/src/web/components/tunnels/named-tunnel/named-tunnel-copy.ts

@@ -0,0 +1,96 @@
+/**
+ * All user-facing strings for the named-tunnel setup flow, kept in one file so
+ * a future i18n pass has a single place to swap. Vietnamese is the primary
+ * language here — no English fallback is implemented yet.
+ */
+export const namedTunnelCopy = {
+  askDomain: {
+    title: "Bạn đã có domain trên Cloudflare chưa?",
+    body: "Có domain riêng thì PPM có thể gắn một địa chỉ cố định (không đổi khi khởi động lại). Không có domain thì vẫn dùng bình thường với link tạm thời.",
+    yes: "Có",
+    no: "Chưa",
+  },
+  noDomain: {
+    title: "Không sao cả",
+    body: "PPM sẽ tiếp tục dùng link tạm thời (quick tunnel). Bạn có thể bật lại tính năng này bất cứ lúc nào trong mục Tunnel Manager.",
+    close: "Đóng",
+  },
+  login: {
+    title: "Đăng nhập Cloudflare",
+    hint: "Mở link bên dưới để đăng nhập — có thể làm trên điện thoại nếu tiện hơn.",
+    finishOnPhone: "Có thể hoàn tất bước này trên điện thoại nếu dễ hơn.",
+    copy: "Sao chép",
+    copied: "Đã sao chép",
+    open: "Mở link",
+    waiting: "Đang chờ đăng nhập…",
+    slowTitle: "Vẫn đang đăng nhập?",
+    slowBody: "Cloudflare đôi khi mất vài phút. Tiến trình vẫn đang chạy — bạn có thể tiếp tục chờ hoặc huỷ.",
+    keepWaiting: "Tiếp tục chờ",
+    cancel: "Huỷ",
+  },
+  timeout: {
+    title: "Link đăng nhập đã hết hạn",
+    body: "Link cũ hết hạn sau 5 phút không dùng. Bấm Thử lại để lấy link mới.",
+    retry: "Thử lại",
+  },
+  cancelled: {
+    title: "Đã huỷ đăng nhập",
+    body: "Bạn đã huỷ quá trình đăng nhập Cloudflare.",
+    retry: "Thử lại",
+  },
+  confirmZone: {
+    title: "Xác nhận vùng miền",
+    body: (zone: string) => `Máy này sẽ được gán một địa chỉ cố định dưới ${zone}. Tiếp tục?`,
+    confirm: "Tiếp tục",
+    startOver: "Bắt đầu lại",
+  },
+  needsRelogin: {
+    title: "Cần đăng nhập lại Cloudflare",
+    certInvalid: "Phiên đăng nhập Cloudflare đã hết hiệu lực.",
+    certMismatch: "Chứng chỉ này thuộc một tài khoản Cloudflare khác — cần đăng nhập lại.",
+    action: "Đăng nhập lại",
+  },
+  hostname: {
+    title: "Chọn địa chỉ",
+    prefixLabel: "Tiền tố",
+    suffixHint: "Phần đuôi được cố định theo tài khoản bạn vừa đăng nhập.",
+    submit: "Xác nhận",
+  },
+  applying: {
+    title: "Đang thiết lập…",
+  },
+  done: {
+    title: "Đã thiết lập xong",
+    body: (hostname: string) => `Địa chỉ cố định: https://${hostname}`,
+    close: "Đóng",
+  },
+  pending: {
+    title: "Đã lưu — đang chờ áp dụng",
+    restartHint: "Chạy lệnh `ppm restart` để áp dụng ngay.",
+    close: "Đóng",
+  },
+  error: {
+    title: "Có lỗi xảy ra",
+    retry: "Thử lại",
+    close: "Đóng",
+  },
+  section: {
+    title: "Named Tunnel",
+    modeQuick: "quick",
+    modeNamed: "named",
+    hostnameLabel: "Địa chỉ",
+    tokenLabel: "Token",
+    setup: "Thiết lập named tunnel",
+    retry: "Thử lại",
+    relogin: "Đăng nhập lại",
+    disable: "Chuyển về quick tunnel",
+    disableConfirm: "Bấm lần nữa để xác nhận",
+    disableSelfCut:
+      "Bạn đang mở PPM qua chính tên miền này — tắt nó sẽ ngắt trang ngay và bạn sẽ không kịp thấy link tạm. Mở PPM qua địa chỉ mạng nội bộ rồi tắt.",
+    certInvalid: "Cần đăng nhập lại Cloudflare",
+    certMismatch: "Chứng chỉ thuộc tài khoản Cloudflare khác — cần đăng nhập lại",
+    authDisabled: "Bật xác thực PPM để dùng tên miền riêng",
+    /** Small note next to the live-mode badge when the configured mode hasn't landed yet. */
+    configuredAs: (mode: "quick" | "named") => `đã cấu hình: ${mode}`,
+  },
+} as const;

package/src/web/components/tunnels/named-tunnel/named-tunnel-hostname-field.tsx

@@ -0,0 +1,51 @@
+/**
+ * Prefix input + locked zone suffix for the hostname step. The suffix is
+ * plain text (not editable) — the zone is pinned by the Cloudflare account
+ * the user just logged into, not something a text field should let them
+ * casually rewrite.
+ */
+import { useEffect, useRef } from "react";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+
+interface Props {
+  zone: string;
+  prefix: string;
+  error?: string;
+  onChange: (prefix: string) => void;
+}
+
+export function NamedTunnelHostnameField({ zone, prefix, error, onChange }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus on mount, as the spec asks — this component only mounts once
+  // per hostname step, so an effect with no deps is exactly "on mount".
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="space-y-1.5">
+      <label htmlFor="named-tunnel-prefix" className="block text-sm font-medium text-foreground">
+        {namedTunnelCopy.hostname.prefixLabel}
+      </label>
+      <div className="flex items-stretch rounded-lg border border-border bg-background focus-within:border-primary/50 transition-colors overflow-hidden">
+        <input
+          ref={inputRef}
+          id="named-tunnel-prefix"
+          type="text"
+          value={prefix}
+          onChange={(e) => onChange(e.target.value)}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoCorrect="off"
+          className="min-w-0 flex-1 px-3 py-3 bg-transparent text-sm text-foreground outline-none"
+        />
+        <span className="flex items-center px-3 py-3 text-sm text-text-subtle bg-surface-elevated border-l border-border select-none whitespace-nowrap">
+          .{zone}
+        </span>
+      </div>
+      <p className="text-xs text-text-subtle">{namedTunnelCopy.hostname.suffixHint}</p>
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/tunnels/named-tunnel/named-tunnel-login-step.tsx

@@ -0,0 +1,105 @@
+/**
+ * `login-wait` step: shows the Cloudflare login URL (openable from any
+ * device, since the WS event reaches every connected client) and the 60s
+ * "still waiting" banner. No countdown-to-zero — the login process survives
+ * past 60s, so a countdown would wrongly imply an imminent kill.
+ */
+import { useState } from "react";
+import { Copy, Check, ExternalLink, Loader2, AlertTriangle } from "lucide-react";
+import { copyToClipboard } from "@/lib/clipboard";
+import { namedTunnelCopy } from "./named-tunnel-copy";
+
+interface Props {
+  url: string | null;
+  slow: boolean;
+  onCancel: () => void;
+}
+
+export function NamedTunnelLoginStep({ url, slow, onCancel }: Props) {
+  const [copied, setCopied] = useState(false);
+  const [bannerAcked, setBannerAcked] = useState(false);
+  const c = namedTunnelCopy.login;
+
+  const showBanner = slow && !bannerAcked;
+
+  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.hint}</p>
+      </div>
+
+      {url ? (
+        <div className="flex items-stretch gap-2">
+          <div className="min-w-0 flex-1 flex items-center px-3 py-3 rounded-lg border border-border bg-surface font-mono text-xs text-foreground truncate">
+            {url}
+          </div>
+          <button
+            type="button"
+            onClick={async () => {
+              const ok = await copyToClipboard(url);
+              if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2000); }
+            }}
+            aria-label={c.copy}
+            className="shrink-0 size-11 flex items-center justify-center rounded-lg border border-border hover:bg-surface-elevated transition-colors"
+          >
+            {copied ? <Check className="size-4 text-success" /> : <Copy className="size-4" />}
+          </button>
+          <button
+            type="button"
+            onClick={() => window.open(url, "_blank", "noopener")}
+            aria-label={c.open}
+            className="shrink-0 size-11 flex items-center justify-center rounded-lg border border-border hover:bg-surface-elevated transition-colors"
+          >
+            <ExternalLink className="size-4" />
+          </button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 text-sm text-text-secondary">
+          <Loader2 className="size-4 animate-spin" />
+          {c.waiting}
+        </div>
+      )}
+
+      <p className="text-xs text-text-subtle">{c.finishOnPhone}</p>
+
+      {showBanner && (
+        <div className="rounded-lg border border-warning/30 bg-warning/10 p-3 space-y-2">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="size-4 text-warning shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-foreground">{c.slowTitle}</p>
+              <p className="text-xs text-text-secondary leading-relaxed mt-0.5">{c.slowBody}</p>
+            </div>
+          </div>
+          <div className="flex gap-2 pt-1">
+            <button
+              type="button"
+              onClick={() => setBannerAcked(true)}
+              className="flex-1 min-h-11 py-2.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
+            >
+              {c.keepWaiting}
+            </button>
+            <button
+              type="button"
+              onClick={onCancel}
+              className="flex-1 min-h-11 py-2.5 rounded-md border border-border text-sm text-text-secondary hover:bg-surface-elevated transition-colors"
+            >
+              {c.cancel}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!showBanner && (
+        <button
+          type="button"
+          onClick={onCancel}
+          className="w-full min-h-11 py-3 rounded-lg border border-border text-sm text-text-secondary hover:bg-surface-elevated transition-colors"
+        >
+          {c.cancel}
+        </button>
+      )}
+    </div>
+  );
+}