@cliftonc/cfld 0.2.4 → 0.2.5

package/dist/cli.js

@@ -1206,23 +1206,15 @@ async function launch(ctx) {
   const target = `localhost:${ctx.port}`;
   const interactive = isInteractive() && !ctx.noUi;
   let dashboard;
-  if (interactive) {
-    const { startDashboard } = await import("./dashboard-GA37Z4H4.js");
-    dashboard = startDashboard({
-      url,
-      target,
-      tunnelName: ctx.tunnelName,
-      status: "connecting",
-      connections: 0,
-      requests: 0,
-      split: Boolean(ctx.exec),
-      devLabel: ctx.exec ? describeCommand(ctx.exec) : void 0,
-      tunnelLogs: [],
-      devLogs: []
-    });
-  } else {
-    step("Setting up your tunnel\u2026");
-  }
+  let runner;
+  let child;
+  let result;
+  let poll;
+  let metricsPort = 0;
+  let shuttingDown = false;
+  let started = false;
+  let busy = false;
+  const childAbort = new AbortController();
   const setupStep = (s) => dashboard ? dashboard.log(s, "tunnel") : step(s);
   const setupDone = (s) => dashboard ? dashboard.log(s, "tunnel") : done(s);
   const emitLine = (line) => {
@@ -1236,11 +1228,6 @@ async function launch(ctx) {
     if (dashboard) dashboard.log(line, "dev");
     else process.stderr.write(line + "\n");
   };
-  let runner;
-  let child;
-  let poll;
-  let shuttingDown = false;
-  const childAbort = new AbortController();
   const shutdown = (opts = {}) => {
     if (shuttingDown) return;
     shuttingDown = true;
@@ -1253,6 +1240,65 @@ ${opts.reason}`);
     if (child) reapChild(child).then(finish, finish);
     else finish();
   };
+  const startTunnel = (port) => startRunner({
+    configPath: result.configPath,
+    tunnelName: result.tunnelName,
+    certPath: result.certPath,
+    metricsPort: port,
+    onLine: (line) => emitLine(line),
+    onStatus: (status) => {
+      if (status === "reconnecting") dashboard?.update({ status: "reconnecting" });
+      else if (status === "connecting" && !dashboard) note("Reconnecting\u2026");
+    },
+    onFatal: (message) => {
+      warn(message);
+      shutdown({ code: 1 });
+    }
+  });
+  const startDevServer = () => startChild({
+    command: ctx.exec,
+    cwd: ctx.cwd,
+    env: ctx.noEnv ? void 0 : { [ctx.envKey]: url },
+    onLine: (line) => emitDevLine(line),
+    onExit: (code, signal) => {
+      childAbort.abort();
+      const how = code !== null ? `exited (code ${code})` : `was terminated${signal ? ` (${signal})` : ""}`;
+      shutdown({
+        reason: `Your dev command ${how} \u2014 stopping. Your tunnel URL is preserved.`,
+        code: code ?? 1
+      });
+    }
+  });
+  const doRestartDev = async () => {
+    if (!ctx.exec || !child) return;
+    dashboard?.log("\u21BB restarting dev server\u2026", "dev");
+    await reapChild(child);
+    if (shuttingDown) return;
+    child = startDevServer();
+  };
+  const doRestartTunnel = async () => {
+    if (!runner || !result) return;
+    dashboard?.log("\u21BB restarting tunnel\u2026", "tunnel");
+    dashboard?.update({ status: "reconnecting" });
+    runner.stop();
+    metricsPort = await findFreePort();
+    runner = await startTunnel(metricsPort);
+    const r = await waitForReady(metricsPort).catch(() => void 0);
+    if (r && !shuttingDown) dashboard?.update({ status: "live", connections: r.connections });
+  };
+  const guard = (fn) => () => {
+    if (busy || shuttingDown || !started) return;
+    busy = true;
+    void Promise.resolve(fn()).finally(() => {
+      busy = false;
+    });
+  };
+  const restartDev = guard(doRestartDev);
+  const restartTunnel = guard(doRestartTunnel);
+  const restartAll = guard(async () => {
+    await doRestartTunnel();
+    await doRestartDev();
+  });
   process.once(
     "SIGINT",
     () => shutdown({ reason: "Stopping \u2014 your URL is preserved. Re-run `cfld`." })
@@ -1262,24 +1308,35 @@ ${opts.reason}`);
     () => shutdown({ reason: "Stopping \u2014 your URL is preserved." })
   );
   process.once("SIGHUP", () => shutdown({ reason: "Terminal closed \u2014 stopping." }));
+  if (interactive) {
+    const { startDashboard } = await import("./dashboard-ZJVAPOTE.js");
+    dashboard = startDashboard(
+      {
+        url,
+        target,
+        tunnelName: ctx.tunnelName,
+        status: "connecting",
+        connections: 0,
+        requests: 0,
+        split: Boolean(ctx.exec),
+        devLabel: ctx.exec ? describeCommand(ctx.exec) : void 0,
+        tunnelLogs: [],
+        devLogs: []
+      },
+      {
+        restartAll,
+        restartTunnel,
+        restartDev: ctx.exec ? restartDev : void 0
+      }
+    );
+  } else {
+    step("Setting up your tunnel\u2026");
+  }
   if (ctx.exec) {
     if (!dashboard) step(`Starting \`${describeCommand(ctx.exec)}\`\u2026`);
-    child = startChild({
-      command: ctx.exec,
-      cwd: ctx.cwd,
-      env: ctx.noEnv ? void 0 : { [ctx.envKey]: url },
-      onLine: (line) => emitDevLine(line),
-      onExit: (code, signal) => {
-        childAbort.abort();
-        const how = code !== null ? `exited (code ${code})` : `was terminated${signal ? ` (${signal})` : ""}`;
-        shutdown({
-          reason: `Your dev command ${how} \u2014 stopping. Your tunnel URL is preserved.`,
-          code: code ?? 1
-        });
-      }
-    });
+    child = startDevServer();
   }
-  const result = await ctx.runReconcile({
+  result = await ctx.runReconcile({
     onStep: (s) => setupStep(s),
     confirmOverwrite: interactive ? (h, t) => {
       const ask = () => askConfirm(`${h} already points to ${t}. Repoint it to this tunnel?`);
@@ -1299,22 +1356,8 @@ ${opts.reason}`);
     result,
     (msg) => dashboard ? dashboard.log(msg, "tunnel") : info(msg)
   );
-  const metricsPort = await findFreePort();
-  runner = await startRunner({
-    configPath: result.configPath,
-    tunnelName: result.tunnelName,
-    certPath: result.certPath,
-    metricsPort,
-    onLine: (line) => emitLine(line),
-    onStatus: (status) => {
-      if (status === "reconnecting") dashboard?.update({ status: "reconnecting" });
-      else if (status === "connecting" && !dashboard) note("Reconnecting\u2026");
-    },
-    onFatal: (message) => {
-      warn(message);
-      shutdown({ code: 1 });
-    }
-  });
+  metricsPort = await findFreePort();
+  runner = await startTunnel(metricsPort);
   const ready = await waitForReady(metricsPort).catch((err) => {
     child?.stop();
     runner?.stop();
@@ -1324,6 +1367,7 @@ ${opts.reason}`);
       err instanceof Error ? err.message : void 0
     );
   });
+  started = true;
   if (child && !shuttingDown) {
     if (dashboard) dashboard.update({ status: "waiting", connections: ready.connections });
     else step(`Waiting for your dev server on :${ctx.port}\u2026`);
@@ -1509,7 +1553,7 @@ ${opts.reason ?? "Stopped ephemeral tunnel."}`);
     });
   }
   if (interactive) {
-    const { startDashboard } = await import("./dashboard-GA37Z4H4.js");
+    const { startDashboard } = await import("./dashboard-ZJVAPOTE.js");
     dashboard = startDashboard({
       url,
       target,

package/dist/{dashboard-GA37Z4H4.js → dashboard-ZJVAPOTE.js}

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 
 // src/ui/dashboard.tsx
+import { spawn } from "child_process";
 import "react";
-import { Box, render, Text } from "ink";
+import { Box, render, Text, useApp, useInput } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_ORDER = ["dev", "split", "tunnel"];
 var MAX_BUFFER = 1e3;
 var HEADER_ROWS = 5;
 function statusDot(status) {
@@ -18,36 +20,53 @@ function statusDot(status) {
       return /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u25CC CONNECTING" });
   }
 }
+function hotkeyHints(state) {
+  const dev = Boolean(state.split);
+  const row1 = state.canRestart ? "r restart all" : "";
+  const row2 = state.canRestart ? dev ? "d restart dev \xB7 t restart tunnel" : "t restart tunnel" : "";
+  const row3 = [dev ? "\u2039 \u203A cols" : "", "o open", "^C quit"].filter(Boolean).join(" \xB7 ");
+  return [row1, row2, row3];
+}
 function Header(state) {
   const latency = state.avgLatencyMs !== void 0 ? `  \u26A1 ${state.avgLatencyMs}ms avg` : "";
+  const [h1, h2, h3] = hotkeyHints(state);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      statusDot(state.status),
-      /* @__PURE__ */ jsx(Text, { children: " " }),
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: state.url })
+    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        statusDot(state.status),
+        /* @__PURE__ */ jsx(Text, { children: " " }),
+        /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: state.url })
+      ] }),
+      h1 ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "  ",
+        h1
+      ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         "\u2192 ",
-        state.target
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        state.target,
         "   ",
         state.connections,
-        " edge conns"
-      ] })
+        " edge conns",
+        state.ephemeral ? " \xB7 ephemeral" : ""
+      ] }),
+      h2 ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "  ",
+        h2
+      ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
         "\u2191 ",
         state.requests,
         " reqs",
         latency
       ] }),
-      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-        "   ",
-        state.ephemeral ? "ephemeral \xB7 Ctrl-C stops" : "Ctrl-C stops \xB7 URL preserved"
-      ] })
+      h3 ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "  ",
+        h3
+      ] }) : null
     ] })
   ] });
 }
@@ -82,51 +101,110 @@ function LogColumn({
 }
 function Dashboard(state) {
   const termRows = process.stdout.rows || 24;
+  const view = state.split ? state.view ?? "split" : "tunnel";
   const titleRows = state.split ? 1 : 0;
   const logRows = Math.max(3, termRows - HEADER_ROWS - titleRows - 1);
+  const devColumn = (divider) => /* @__PURE__ */ jsx(
+    LogColumn,
+    {
+      title: state.devLabel ?? "dev server",
+      titleColor: "cyan",
+      lines: state.devLogs,
+      rows: logRows,
+      placeholder: "waiting for dev-server output\u2026",
+      divider
+    }
+  );
+  const tunnelColumn = (divider) => /* @__PURE__ */ jsx(
+    LogColumn,
+    {
+      title: state.split ? "tunnel" : void 0,
+      titleColor: "blue",
+      lines: state.tunnelLogs,
+      rows: logRows,
+      placeholder: state.split ? "waiting for tunnel activity\u2026" : state.ephemeral ? "waiting for traffic\u2026 (Ctrl-C stops; this URL is temporary)" : "waiting for traffic\u2026 (Ctrl-C stops; your URL is preserved)",
+      divider
+    }
+  );
+  let body;
+  if (view === "split") {
+    body = /* @__PURE__ */ jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingX: 1, paddingTop: 1, children: [
+      devColumn(),
+      tunnelColumn(true)
+    ] });
+  } else {
+    body = /* @__PURE__ */ jsx(Box, { flexGrow: 1, paddingX: 1, paddingTop: 1, children: view === "dev" ? devColumn() : tunnelColumn() });
+  }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", height: termRows, overflow: "hidden", children: [
     /* @__PURE__ */ jsx(Header, { ...state }),
-    state.split ? /* @__PURE__ */ jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingX: 1, paddingTop: 1, children: [
-      /* @__PURE__ */ jsx(
-        LogColumn,
-        {
-          title: state.devLabel ?? "dev server",
-          titleColor: "cyan",
-          lines: state.devLogs,
-          rows: logRows,
-          placeholder: "waiting for dev-server output\u2026"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        LogColumn,
-        {
-          title: "tunnel",
-          titleColor: "blue",
-          lines: state.tunnelLogs,
-          rows: logRows,
-          placeholder: "waiting for tunnel activity\u2026",
-          divider: true
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(Box, { flexGrow: 1, paddingX: 1, paddingTop: 1, children: /* @__PURE__ */ jsx(
-      LogColumn,
-      {
-        lines: state.tunnelLogs,
-        rows: logRows,
-        placeholder: state.ephemeral ? "waiting for traffic\u2026 (Ctrl-C stops; this URL is temporary)" : "waiting for traffic\u2026 (Ctrl-C stops; your URL is preserved)"
-      }
-    ) })
+    body
   ] });
 }
+function App({
+  state,
+  actions,
+  onCycleView,
+  onOpen
+}) {
+  const { exit } = useApp();
+  useInput((input, key) => {
+    if (key.leftArrow || input === "<" || input === ",") return onCycleView(-1);
+    if (key.rightArrow || input === ">" || input === ".") return onCycleView(1);
+    switch (input.toLowerCase()) {
+      case "r":
+        return actions.restartAll?.();
+      case "d":
+        return actions.restartDev?.();
+      case "t":
+        return actions.restartTunnel?.();
+      case "o":
+        return onOpen();
+      case "q":
+        return exit();
+    }
+  });
+  return /* @__PURE__ */ jsx(Dashboard, { ...state });
+}
+function openInBrowser(url) {
+  const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+  try {
+    spawn(cmd, [url], {
+      stdio: "ignore",
+      detached: true,
+      shell: process.platform === "win32"
+    }).unref();
+  } catch {
+  }
+}
 var ENTER_ALT_SCREEN = "\x1B[?1049h";
 var LEAVE_ALT_SCREEN = "\x1B[?1049l";
-function startDashboard(initial) {
+function startDashboard(initial, actions = {}) {
   const state = {
     ...initial,
+    view: initial.view ?? (initial.split ? "split" : "tunnel"),
+    canRestart: Boolean(actions.restartAll || actions.restartTunnel),
     tunnelLogs: [...initial.tunnelLogs],
     devLogs: [...initial.devLogs]
   };
-  const mount = () => render(/* @__PURE__ */ jsx(Dashboard, { ...state }), {
+  const cycleView = (delta) => {
+    if (!state.split) return;
+    const i = VIEW_ORDER.indexOf(state.view ?? "split");
+    const next = VIEW_ORDER[Math.min(VIEW_ORDER.length - 1, Math.max(0, i + delta))];
+    if (next !== state.view) {
+      state.view = next;
+      rerender();
+    }
+  };
+  const element = () => /* @__PURE__ */ jsx(
+    App,
+    {
+      state,
+      actions,
+      onCycleView: cycleView,
+      onOpen: () => openInBrowser(state.url)
+    }
+  );
+  const mount = () => render(element(), {
     stdout: process.stdout,
     // We drive graceful shutdown ourselves; ink's Ctrl-C simply resolves
     // waitUntilExit, and the caller then stops the runner (preserving state).
@@ -136,7 +214,7 @@ function startDashboard(initial) {
   let instance = mount();
   let paused = false;
   const rerender = () => {
-    if (!paused) instance.rerender(/* @__PURE__ */ jsx(Dashboard, { ...state }));
+    if (!paused) instance.rerender(element());
   };
   let altActive = true;
   const leaveAltScreen = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliftonc/cfld",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Zero-token, persistent Cloudflare tunnel CLI for local dev — same public HTTPS URL every run.",
   "type": "module",
   "bin": {