@hienlh/ppm 0.18.11 → 0.18.13

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/.spike/cdp-client.ts

@@ -1,116 +0,0 @@
-// Minimal Chrome DevTools Protocol client over the browser WebSocket endpoint.
-// Spike helper only (untracked). Flattened sessions: one WS, per-target sessionId.
-
-export interface CdpTarget {
-  targetId: string;
-  type: string;
-  title: string;
-  url: string;
-  attached: boolean;
-}
-
-type Pending = { resolve: (v: any) => void; reject: (e: Error) => void; method: string };
-
-export class CdpClient {
-  private ws!: WebSocket;
-  private nextId = 1;
-  private pending = new Map<number, Pending>();
-  private listeners: Array<(msg: any) => void> = [];
-
-  static async connect(port: number): Promise<CdpClient> {
-    const res = await fetch(`http://127.0.0.1:${port}/json/version`);
-    const info = (await res.json()) as { webSocketDebuggerUrl: string };
-    const client = new CdpClient();
-    await client.open(info.webSocketDebuggerUrl);
-    return client;
-  }
-
-  private open(url: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      this.ws = new WebSocket(url);
-      this.ws.onopen = () => resolve();
-      this.ws.onerror = (e) => reject(new Error(`ws error ${String(e)}`));
-      this.ws.onmessage = (ev) => {
-        const msg = JSON.parse(String(ev.data));
-        if (msg.id && this.pending.has(msg.id)) {
-          const p = this.pending.get(msg.id)!;
-          this.pending.delete(msg.id);
-          if (msg.error) p.reject(new Error(`${p.method}: ${msg.error.message} ${msg.error.data ?? ""}`));
-          else p.resolve(msg.result);
-        } else {
-          for (const l of this.listeners) l(msg);
-        }
-      };
-    });
-  }
-
-  onEvent(fn: (msg: any) => void) {
-    this.listeners.push(fn);
-  }
-
-  send(method: string, params: Record<string, unknown> = {}, sessionId?: string): Promise<any> {
-    const id = this.nextId++;
-    const payload: Record<string, unknown> = { id, method, params };
-    if (sessionId) payload.sessionId = sessionId;
-    return new Promise((resolve, reject) => {
-      this.pending.set(id, { resolve, reject, method });
-      this.ws.send(JSON.stringify(payload));
-    });
-  }
-
-  async targets(): Promise<CdpTarget[]> {
-    const r = await this.send("Target.getTargets");
-    return r.targetInfos as CdpTarget[];
-  }
-
-  async attach(targetId: string): Promise<string> {
-    const r = await this.send("Target.attachToTarget", { targetId, flatten: true });
-    return r.sessionId as string;
-  }
-
-  /** Runtime.evaluate with awaitPromise + returnByValue; throws on JS exception. */
-  async eval<T = unknown>(sessionId: string, expression: string): Promise<T> {
-    const r = await this.send(
-      "Runtime.evaluate",
-      { expression, awaitPromise: true, returnByValue: true, userGesture: false },
-      sessionId,
-    );
-    if (r.exceptionDetails) {
-      const d = r.exceptionDetails;
-      throw new Error(`JS exception: ${d.exception?.description ?? d.text}`);
-    }
-    return r.result?.value as T;
-  }
-
-  async click(sessionId: string, x: number, y: number) {
-    const base = { x, y, button: "left", clickCount: 1 };
-    await this.send("Input.dispatchMouseEvent", { type: "mouseMoved", x, y }, sessionId);
-    await this.send("Input.dispatchMouseEvent", { ...base, type: "mousePressed" }, sessionId);
-    await this.send("Input.dispatchMouseEvent", { ...base, type: "mouseReleased" }, sessionId);
-  }
-
-  /** Type printable text as trusted key events (one keyDown/keyUp per char). */
-  async typeText(sessionId: string, text: string) {
-    for (const ch of text) {
-      await this.send("Input.dispatchKeyEvent", { type: "keyDown", text: ch, key: ch, unmodifiedText: ch }, sessionId);
-      await this.send("Input.dispatchKeyEvent", { type: "keyUp", key: ch }, sessionId);
-    }
-  }
-
-  async pressKey(sessionId: string, key: string, code: string, vk: number, text?: string, modifiers = 0) {
-    const common = { key, code, windowsVirtualKeyCode: vk, nativeVirtualKeyCode: vk, modifiers };
-    await this.send("Input.dispatchKeyEvent", { type: text ? "keyDown" : "rawKeyDown", ...common, ...(text ? { text, unmodifiedText: text } : {}) }, sessionId);
-    await this.send("Input.dispatchKeyEvent", { type: "keyUp", ...common }, sessionId);
-  }
-
-  async screenshot(sessionId: string, path: string) {
-    const r = await this.send("Page.captureScreenshot", { format: "png" }, sessionId);
-    await Bun.write(path, Buffer.from(r.data, "base64"));
-  }
-
-  close() {
-    this.ws.close();
-  }
-}
-
-export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

package/.spike/cleanup-ppm-workspace.mjs

@@ -1,44 +0,0 @@
-// One-off: remove the duplicate `terminal:1@panel-*` tabs an earlier smoke run left in the
-// real `ppm` project workspace. Prints before/after; makes no other change.
-import { homedir } from "node:os";
-import { join } from "node:path";
-import { Database } from "bun:sqlite";
-
-const API = "http://127.0.0.1:8099";
-const db = new Database(join(homedir(), ".ppm", "ppm.dev.db"), { readonly: true });
-const TOKEN = JSON.parse(db.query("SELECT value FROM config WHERE key='auth'").get().value).token;
-db.close();
-
-const H = { Authorization: `Bearer ${TOKEN}`, "Content-Type": "application/json" };
-const res = await fetch(`${API}/api/project/ppm/workspace`, { headers: H });
-const json = await res.json();
-if (!json.ok || !json.data) {
-  console.log("no server workspace for ppm:", JSON.stringify(json).slice(0, 300));
-  process.exit(0);
-}
-const layout = json.data.layout;
-const dump = (l) =>
-  JSON.stringify(Object.fromEntries(Object.entries(l.panels).map(([k, v]) => [k, v.tabs.map((t) => t.id)])));
-console.log("before:", dump(layout));
-
-const BAD = /^terminal:1@panel-/;
-let removed = 0;
-for (const panel of Object.values(layout.panels)) {
-  const keep = panel.tabs.filter((t) => !BAD.test(t.id));
-  removed += panel.tabs.length - keep.length;
-  const ids = new Set(keep.map((t) => t.id));
-  panel.tabs = keep;
-  panel.tabHistory = (panel.tabHistory ?? []).filter((id) => ids.has(id));
-  if (panel.activeTabId && !ids.has(panel.activeTabId)) {
-    panel.activeTabId = panel.tabHistory.at(-1) ?? keep.at(-1)?.id ?? null;
-  }
-}
-console.log("after: ", dump(layout), `removed=${removed}`);
-if (removed === 0) process.exit(0);
-
-const put = await fetch(`${API}/api/project/ppm/workspace`, {
-  method: "PUT",
-  headers: H,
-  body: JSON.stringify({ layout }),
-});
-console.log("PUT:", put.status, JSON.stringify(await put.json()).slice(0, 200));

package/.spike/group-protected-probe.ts

@@ -1,21 +0,0 @@
-// How many groups would the whole-app kill button be enabled for, per the live snapshot?
-import { Database } from "bun:sqlite";
-import { homedir } from "node:os";
-import { resolve } from "node:path";
-import { isGroupProtected } from "../src/web/components/system/build-kill-request.ts";
-
-const db = new Database(resolve(homedir(), ".ppm", "ppm.dev.db"), { readonly: true });
-const row = db.query("SELECT value FROM config WHERE key = 'auth'").get() as { value: string } | null;
-const token = row ? JSON.parse(row.value)?.token : undefined;
-const res = await fetch("http://localhost:8081/api/system/resources?processes=1", { headers: token ? { Authorization: `Bearer ${token}` } : {} });
-const snap = (await res.json()).data;
-const byPid = new Map(snap.processes.map((p: any) => [p.pid, p]));
-let enabled = 0, disabled = 0;
-const protectedNames = new Map<string, number>();
-for (const g of snap.groups) {
-  const members = g.pids.map((pid: number) => byPid.get(pid)).filter(Boolean);
-  if (isGroupProtected(members)) { disabled++; for (const m of members) if (m.protected) protectedNames.set(m.name, (protectedNames.get(m.name) ?? 0) + 1); }
-  else enabled++;
-}
-console.log({ groups: snap.groups.length, enabled, disabled, processes: snap.processes.length, protectedProcs: snap.processes.filter((p: any) => p.protected).length });
-console.log("protected names in disabled groups:", [...protectedNames].slice(0, 12));

package/.spike/pip-eval.ts

@@ -1,17 +0,0 @@
-// Ad-hoc: evaluate a JS expression in the spike Chrome's app page. Usage: bun pip-eval.ts "<expr>" [--shot path]
-import { CdpClient } from "./cdp-client";
-const expr = process.argv[2] ?? "location.href";
-const shotIdx = process.argv.indexOf("--shot");
-const cdp = await CdpClient.connect(9333);
-const targets = await cdp.targets();
-const page = targets.find((t) => t.type === "page" && t.url.startsWith("http://localhost:5173"));
-if (!page) throw new Error("no page: " + JSON.stringify(targets));
-const sid = await cdp.attach(page.targetId);
-try {
-  const v = await cdp.eval(sid, expr);
-  console.log(typeof v === "string" ? v : JSON.stringify(v, null, 2));
-} catch (e) {
-  console.error(String(e));
-}
-if (shotIdx > 0) await cdp.screenshot(sid, process.argv[shotIdx + 1]!);
-cdp.close();