uplink-cli 0.1.38 → 0.1.39

package/cli/src/subcommands/tunnel.ts

@@ -1,6 +1,11 @@
 import { Command } from "commander";
 import { apiRequest } from "../http";
 import { handleError, printJson } from "../utils/machine";
+import {
+  findTunnelClients,
+  killTunnelClient,
+  startTunnelClient,
+} from "./menu/effects/tunnel-clients";
 
 type TunnelResponse = {
   id: string;
@@ -9,10 +14,13 @@ type TunnelResponse = {
   port?: number;
   token?: string;
   alias?: string | null;
+  aliasUrl?: string | null;
   status?: string;
+  connected?: boolean;
   createdAt?: string;
   updatedAt?: string;
   ingressHttpUrl?: string;
+  targetPort?: number;
 };
 
 type TunnelListResponse = {
@@ -22,16 +30,18 @@ type TunnelListResponse = {
 
 type TunnelStatsResponse = any;
 
-export const tunnelCommand = new Command("tunnel")
-  .description("Manage tunnels non-interactively (agent-friendly)");
+export const tunnelCommand = new Command("tunnel").description(
+  "Manage tunnels non-interactively (agent-friendly)"
+);
 
-// Create tunnel
+// Create tunnel + start local client (unless --no-client)
 tunnelCommand
   .command("create")
-  .description("Create a tunnel")
+  .description("Create a tunnel and start the local client")
   .requiredOption("--port <port>", "Local port to expose")
   .option("--alias <alias>", "Optional permanent alias (if enabled on account)")
   .option("--project <project>", "Optional project id")
+  .option("--api-only", "Create API record only; do not start the local client", false)
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
     const port = Number(opts.port);
@@ -41,42 +51,75 @@ tunnelCommand
     }
 
     try {
+      const existing = findTunnelClients().filter((c) => c.port === port);
+      if (existing.length > 0 && !opts.apiOnly) {
+        const err = `Tunnel client already running on port ${port} (pid ${existing[0].pid})`;
+        if (opts.json) {
+          printJson({ error: err, existing: existing[0] });
+        } else {
+          console.error(err);
+        }
+        process.exit(2);
+      }
+
       const body: Record<string, unknown> = { port };
       if (opts.project) body.project = opts.project;
 
-      const tunnel = await apiRequest("POST", "/v1/tunnels", body) as TunnelResponse;
+      const tunnel = (await apiRequest("POST", "/v1/tunnels", body)) as TunnelResponse;
       let aliasResult: TunnelResponse | null = null;
       let aliasError: string | null = null;
 
       if (opts.alias) {
         try {
-          aliasResult = await apiRequest("POST", `/v1/tunnels/${tunnel.id}/alias`, {
+          aliasResult = (await apiRequest("POST", `/v1/tunnels/${tunnel.id}/alias`, {
             alias: opts.alias,
-          }) as TunnelResponse;
+          })) as TunnelResponse;
         } catch (err: any) {
           aliasError = err?.message || String(err);
         }
       }
 
+      let client: { pid: number; started: boolean } | null = null;
+      if (!opts.apiOnly) {
+        const token = tunnel.token;
+        if (!token) {
+          throw new Error("Tunnel created but API returned no token; cannot start client");
+        }
+        const started = startTunnelClient({ token, port });
+        // Brief wait so list/connected is more likely accurate for agents.
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        client = { pid: started.pid, started: true };
+      }
+
+      const url =
+        aliasResult?.aliasUrl ||
+        aliasResult?.url ||
+        tunnel.url ||
+        tunnel.ingressHttpUrl ||
+        null;
+      const alias = aliasResult?.alias ?? tunnel.alias ?? null;
+
       if (opts.json) {
         printJson({
-          tunnel,
-          alias: aliasResult?.alias ?? null,
+          tunnel: {
+            ...tunnel,
+            alias,
+            aliasUrl: aliasResult?.aliasUrl ?? tunnel.aliasUrl ?? null,
+            url: tunnel.url ?? tunnel.ingressHttpUrl,
+          },
+          alias,
           aliasError,
+          url,
+          client,
         });
       } else {
         console.log(`Created tunnel ${tunnel.id}`);
-        console.log(`  url:   ${tunnel.url ?? tunnel.ingressHttpUrl ?? "-"}`);
-        console.log(`  token: ${tunnel.token ?? "-"}`);
-        if (opts.alias) {
-          if (aliasResult?.alias) {
-            console.log(`  alias: ${aliasResult.alias}`);
-          } else if (aliasError) {
-            console.log(`  alias: failed - ${aliasError}`);
-          }
-        } else if (tunnel.alias) {
-          console.log(`  alias: ${tunnel.alias}`);
-        }
+        console.log(`  url:    ${url ?? "-"}`);
+        console.log(`  token:  ${tunnel.token ?? "-"}`);
+        if (alias) console.log(`  alias:  ${alias}`);
+        else if (aliasError) console.log(`  alias:  failed - ${aliasError}`);
+        if (client) console.log(`  client: started (pid ${client.pid})`);
+        else console.log(`  client: not started (--api-only)`);
       }
     } catch (error) {
       handleError(error, { json: opts.json });
@@ -90,7 +133,7 @@ tunnelCommand
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
     try {
-      const result = await apiRequest("GET", "/v1/tunnels") as TunnelListResponse;
+      const result = (await apiRequest("GET", "/v1/tunnels")) as TunnelListResponse;
       if (opts.json) {
         printJson(result);
       } else {
@@ -100,8 +143,10 @@ tunnelCommand
         }
         console.log(`Tunnels (${result.count}):`);
         for (const t of result.tunnels) {
+          const connected = t.connected ? "connected" : "idle";
+          const token = t.token ? `${String(t.token).slice(0, 8)}…` : "-";
           console.log(
-            `${t.id}  ${t.url ?? t.ingressHttpUrl ?? "-"}  token=${t.token ?? "-"}  alias=${t.alias ?? "-"}  status=${t.status ?? "-"}`
+            `${t.id}  ${t.url ?? t.ingressHttpUrl ?? "-"}  token=${token}  alias=${t.alias ?? "-"}  status=${t.status ?? "-"}  ${connected}`
           );
         }
       }
@@ -119,9 +164,9 @@ tunnelCommand
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
     try {
-      const result = await apiRequest("POST", `/v1/tunnels/${opts.id}/alias`, {
+      const result = (await apiRequest("POST", `/v1/tunnels/${opts.id}/alias`, {
         alias: opts.alias,
-      }) as TunnelResponse;
+      })) as TunnelResponse;
       if (opts.json) {
         printJson(result);
       } else {
@@ -140,7 +185,10 @@ tunnelCommand
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
     try {
-      const result = await apiRequest("DELETE", `/v1/tunnels/${opts.id}/alias`) as TunnelResponse;
+      const result = (await apiRequest(
+        "DELETE",
+        `/v1/tunnels/${opts.id}/alias`
+      )) as TunnelResponse;
       if (opts.json) {
         printJson(result);
       } else {
@@ -159,7 +207,10 @@ tunnelCommand
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
     try {
-      const result = await apiRequest("GET", `/v1/tunnels/${opts.id}/stats`) as TunnelStatsResponse;
+      const result = (await apiRequest(
+        "GET",
+        `/v1/tunnels/${opts.id}/stats`
+      )) as TunnelStatsResponse;
       if (opts.json) {
         printJson(result);
       } else {
@@ -171,22 +222,62 @@ tunnelCommand
     }
   });
 
-// Stop (delete) tunnel
+// Stop (delete) tunnel and kill any matching local client
 tunnelCommand
   .command("stop")
-  .description("Stop (delete) a tunnel")
-  .requiredOption("--id <id>", "Tunnel id")
+  .description("Stop a tunnel: kill the local client and delete the record")
+  .option("--id <id>", "Tunnel id")
+  .option("--all", "Stop every tunnel for this account", false)
   .option("--json", "Output JSON", false)
   .action(async (opts) => {
+    if (!opts.all && !opts.id) {
+      console.error("Provide --id or --all");
+      process.exit(2);
+    }
+
     try {
-      const result = await apiRequest("DELETE", `/v1/tunnels/${opts.id}`) as { id: string; status: string };
+      if (opts.all) {
+        const listed = (await apiRequest("GET", "/v1/tunnels")) as TunnelListResponse;
+        let killed = 0;
+        for (const client of findTunnelClients()) {
+          if (killTunnelClient(client.pid)) killed++;
+        }
+        let deleted = 0;
+        for (const t of listed.tunnels || []) {
+          if (!t.id) continue;
+          try {
+            await apiRequest("DELETE", `/v1/tunnels/${t.id}`);
+            deleted++;
+          } catch {
+            /* already gone */
+          }
+        }
+        if (opts.json) {
+          printJson({ ok: true, killed, deleted });
+        } else {
+          console.log(`Stopped ${killed} local client(s), removed ${deleted} tunnel record(s)`);
+        }
+        return;
+      }
+
+      const listed = (await apiRequest("GET", "/v1/tunnels")) as TunnelListResponse;
+      const target = (listed.tunnels || []).find((t) => t.id === opts.id);
+      if (target?.token) {
+        for (const client of findTunnelClients().filter((c) => c.token === target.token)) {
+          killTunnelClient(client.pid);
+        }
+      }
+
+      const result = (await apiRequest("DELETE", `/v1/tunnels/${opts.id}`)) as {
+        id: string;
+        status: string;
+      };
       if (opts.json) {
         printJson(result);
       } else {
         console.log(`Stopped tunnel ${result.id} (status=${result.status})`);
       }
-    } catch (error: any) {
-      console.error(error?.message || String(error));
-      process.exit(30);
+    } catch (error) {
+      handleError(error, { json: opts.json });
     }
   });

package/cli/src/templates/index.ts

@@ -154,7 +154,7 @@ RUN npm install -g serve
 COPY --from=builder /app/${distDir} ./public
 
 EXPOSE ${port}
-CMD ["sh", "-c", "serve -s public -l ${PORT}"]
+CMD ["sh", "-c", "serve -s public -l \${PORT}"]
 `;
   }
 
@@ -184,7 +184,7 @@ RUN npm install -g serve
 COPY --from=builder /app/${distDir} ./public
 
 EXPOSE ${port}
-CMD ["sh", "-c", "serve -s public -l ${PORT}"]
+CMD ["sh", "-c", "serve -s public -l \${PORT}"]
 `;
   }
 
@@ -215,7 +215,7 @@ RUN npm install -g serve
 COPY --from=builder /app/${distDir} ./public
 
 EXPOSE ${port}
-CMD ["sh", "-c", "serve -s public -l ${PORT}"]
+CMD ["sh", "-c", "serve -s public -l \${PORT}"]
 `;
 }
 

package/cli/src/tui/App.tsx

@@ -0,0 +1,197 @@
+import { Box, Text, useApp, useInput } from "ink";
+import { useState } from "react";
+import type { MenuChoice } from "../subcommands/menu/types";
+import { HomeStatus } from "./HomeStatus";
+import { AppInspector } from "./AppInspector";
+import { cleanLabel } from "./format";
+
+export type TunnelLine = { url: string; port: number };
+
+export type MenuStatus = {
+  connected: boolean;
+  latencyMs: number | null;
+  tunnels: TunnelLine[];
+  apps: { name: string; id: string; url?: string; createdAt?: string }[];
+  providers: string[];
+};
+
+export type MenuOutcome =
+  | { kind: "quit" }
+  | {
+      kind: "action";
+      action: () => Promise<string>;
+      isExit: boolean;
+      stack: MenuChoice[][];
+      titles: string[];
+      selected: number;
+    };
+
+function isDanger(label: string): boolean {
+  const lower = label.toLowerCase();
+  return lower.includes("stop all") || lower.includes("⚠") || lower.includes("delete");
+}
+
+function isExitLabel(label: string): boolean {
+  return label.toLowerCase() === "exit";
+}
+
+function noticeColor(line: string): string | undefined {
+  if (line.startsWith("Error:") || line.startsWith("✗")) return "red";
+  if (line.startsWith("✓")) return "green";
+  return undefined;
+}
+
+export function MenuApp({
+  tree,
+  status,
+  message,
+  initialStack,
+  initialTitles,
+  initialSelected,
+  onOutcome,
+}: {
+  tree: MenuChoice[];
+  status: MenuStatus;
+  message: string;
+  initialStack: MenuChoice[][];
+  initialTitles: string[];
+  initialSelected: number;
+  onOutcome: (outcome: MenuOutcome) => void;
+}) {
+  const { exit } = useApp();
+  const [stack, setStack] = useState<MenuChoice[][]>(initialStack);
+  const [titles, setTitles] = useState<string[]>(initialTitles);
+  const [selected, setSelected] = useState(initialSelected);
+  const [notice, setNotice] = useState(message);
+
+  const current = stack[stack.length - 1] ?? tree;
+  const atRoot = stack.length === 1;
+  const crumb = titles.slice(1).join(" › ");
+  const selectedChoice = current[selected];
+  const inspecting = Boolean(selectedChoice?.inspect);
+
+  const finish = (outcome: MenuOutcome) => {
+    onOutcome(outcome);
+    exit();
+  };
+
+  const goBack = () => {
+    if (notice) {
+      setNotice("");
+      return;
+    }
+    if (atRoot) {
+      finish({ kind: "quit" });
+      return;
+    }
+    setStack((prev) => prev.slice(0, -1));
+    setTitles((prev) => prev.slice(0, -1));
+    setSelected(0);
+  };
+
+  useInput((_input, key) => {
+    if (key.escape || key.leftArrow) {
+      goBack();
+      return;
+    }
+    if (_input === "q" && atRoot && !notice) {
+      finish({ kind: "quit" });
+      return;
+    }
+    if (key.upArrow) {
+      setSelected((i) => (i - 1 + current.length) % current.length);
+      return;
+    }
+    if (key.downArrow) {
+      setSelected((i) => (i + 1) % current.length);
+      return;
+    }
+    if (key.return) {
+      if (notice) {
+        setNotice("");
+        return;
+      }
+      const choice = current[selected];
+      if (!choice) return;
+      if (choice.subMenu && choice.subMenu.length > 0) {
+        setStack((prev) => [...prev, choice.subMenu!]);
+        setTitles((prev) => [...prev, cleanLabel(choice.label)]);
+        setSelected(0);
+        return;
+      }
+      if (choice.action) {
+        finish({
+          kind: "action",
+          action: choice.action,
+          isExit: isExitLabel(choice.label),
+          stack,
+          titles,
+          selected,
+        });
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1} paddingY={1}>
+      {atRoot ? (
+        <HomeStatus status={status} />
+      ) : (
+        <Box flexDirection="column">
+          <Text dimColor>UPLINK</Text>
+          {crumb ? (
+            <Box marginTop={1}>
+              <Text dimColor>{crumb}</Text>
+            </Box>
+          ) : null}
+        </Box>
+      )}
+
+      <Box flexDirection="column" marginTop={atRoot ? 1 : 1}>
+        {current.map((choice, i) => {
+          const active = i === selected;
+          const label = cleanLabel(choice.label);
+          const suffix = choice.subMenu ? " ›" : "";
+          const danger = isDanger(label);
+          const exitItem = isExitLabel(label);
+          return (
+            <Text
+              key={`${label}-${i}`}
+              bold={active && !exitItem}
+              color={active && danger ? "red" : undefined}
+              dimColor={!active || exitItem}
+            >
+              {active ? "› " : "  "}
+              {label}
+              {suffix}
+            </Text>
+          );
+        })}
+      </Box>
+
+      {inspecting ? <AppInspector inspect={selectedChoice?.inspect} /> : null}
+
+      {notice ? (
+        <Box flexDirection="column" marginTop={1}>
+          {notice.split("\n").map((line, i) => (
+            <Text key={i} color={noticeColor(line)} dimColor={!noticeColor(line)}>
+              {line || " "}
+            </Text>
+          ))}
+        </Box>
+      ) : null}
+
+      <Box marginTop={1}>
+        <Text dimColor>
+          {notice
+            ? "enter/esc dismiss"
+            : inspecting
+              ? "↑↓ inspect · ↵ open · esc back"
+              : atRoot
+                ? "↑↓ enter · esc/q quit"
+                : "↑↓ enter · esc back"}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/cli/src/tui/AppInspector.tsx

@@ -0,0 +1,114 @@
+import { Box, Text } from "ink";
+import { useEffect, useState } from "react";
+import type { MenuInspect } from "../subcommands/menu/types";
+import { ARTIFACT_CAP_BYTES, fetchAppInspect, type AppInspect } from "./snapshot";
+import { formatBytes, formatDate } from "./format";
+
+const LABEL_WIDTH = 10;
+const GAUGE_WIDTH = 16;
+
+function Row({
+  label,
+  value,
+  color,
+  dim,
+}: {
+  label: string;
+  value: string;
+  color?: "green" | "red";
+  dim?: boolean;
+}) {
+  return (
+    <Box>
+      <Box width={LABEL_WIDTH}>
+        <Text dimColor>{label}</Text>
+      </Box>
+      <Text color={color} dimColor={dim}>
+        {value}
+      </Text>
+    </Box>
+  );
+}
+
+function SizeGauge({ bytes }: { bytes: number }) {
+  const ratio = Math.min(1, bytes / ARTIFACT_CAP_BYTES);
+  const filled = Math.round(ratio * GAUGE_WIDTH);
+  return (
+    <Box>
+      <Box width={LABEL_WIDTH}>
+        <Text dimColor>size</Text>
+      </Box>
+      <Text>
+        <Text color="green">{"█".repeat(filled)}</Text>
+        <Text dimColor>{"░".repeat(GAUGE_WIDTH - filled)}</Text>
+        <Text dimColor>
+          {"  "}
+          {formatBytes(bytes)} / {formatBytes(ARTIFACT_CAP_BYTES)}
+        </Text>
+      </Text>
+    </Box>
+  );
+}
+
+function statusColor(value?: string): "green" | "red" | undefined {
+  if (!value) return undefined;
+  if (value === "running" || value === "ready") return "green";
+  if (value === "failed") return "red";
+  return undefined;
+}
+
+export function AppInspector({ inspect }: { inspect?: MenuInspect }) {
+  const [detail, setDetail] = useState<AppInspect | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!inspect || inspect.kind !== "app") {
+      setDetail(null);
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      setLoading(true);
+      fetchAppInspect(inspect.id).then((next) => {
+        if (cancelled) return;
+        setDetail(next);
+        setLoading(false);
+      });
+    }, 120);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [inspect?.id, inspect?.kind]);
+
+  if (!inspect) return null;
+
+  const url = detail?.url || inspect.url || "—";
+  const deploy = detail?.deploy || (loading ? "…" : "—");
+  const build = detail?.build || (loading ? "…" : "—");
+  const domainText =
+    detail && detail.domains.length > 0
+      ? detail.domains
+          .slice(0, 2)
+          .map((domain) => `${domain.hostname}${domain.verified ? "" : " (pending)"}`)
+          .join(", ") + (detail.domains.length > 2 ? ` +${detail.domains.length - 2}` : "")
+      : loading && !detail
+        ? "…"
+        : "none";
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text dimColor>── inspect ──</Text>
+      <Row label="url" value={url} />
+      <Row label="status" value={deploy} color={statusColor(detail?.deploy)} dim={!detail?.deploy} />
+      <Row label="build" value={build} color={statusColor(detail?.build)} dim={!detail?.build} />
+      {detail?.sizeBytes != null ? (
+        <SizeGauge bytes={detail.sizeBytes} />
+      ) : (
+        <Row label="size" value={loading ? "…" : "none"} dim />
+      )}
+      <Row label="created" value={formatDate(detail?.createdAt || inspect.createdAt)} dim={!detail?.createdAt && !inspect.createdAt} />
+      <Row label="domains" value={domainText} dim={domainText === "none"} />
+    </Box>
+  );
+}

package/cli/src/tui/HomeStatus.tsx

@@ -0,0 +1,59 @@
+import { Box, Text } from "ink";
+import type { MenuStatus } from "./App";
+import { Wordmark } from "./brand";
+
+const LABEL_WIDTH = 12;
+const BAR_CAP = 24;
+
+function CountBar({ count }: { count: number }) {
+  if (count <= 0) return null;
+  const filled = Math.min(count, BAR_CAP);
+  return (
+    <Text>
+      <Text color="green">{"█".repeat(filled)}</Text>
+      {count > BAR_CAP ? <Text dimColor> +{count - BAR_CAP}</Text> : null}
+    </Text>
+  );
+}
+
+function Metric({ label, count }: { label: string; count: number }) {
+  return (
+    <Box>
+      <Box width={LABEL_WIDTH}>
+        <Text dimColor>{label}</Text>
+      </Box>
+      <Box width={4}>
+        {count > 0 ? <Text>{count}</Text> : <Text dimColor>—</Text>}
+      </Box>
+      <CountBar count={count} />
+    </Box>
+  );
+}
+
+export function HomeStatus({ status }: { status: MenuStatus }) {
+  const latency =
+    status.connected && status.latencyMs != null ? `${status.latencyMs}ms` : "—";
+
+  return (
+    <Box flexDirection="column">
+      <Wordmark />
+      <Box marginTop={1}>
+        <Text color={status.connected ? "green" : "red"}>
+          {status.connected ? "connected" : "offline"}
+        </Text>
+        <Text dimColor> · {latency}</Text>
+      </Box>
+      <Box marginTop={1} marginBottom={1}>
+        <Text dimColor>{"─".repeat(36)}</Text>
+      </Box>
+      <Box flexDirection="column">
+        <Metric label="apps" count={status.apps.length} />
+        <Metric label="tunnels" count={status.tunnels.length} />
+        <Metric label="registrars" count={status.providers.length} />
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>{"─".repeat(36)}</Text>
+      </Box>
+    </Box>
+  );
+}

package/cli/src/tui/brand.tsx

@@ -0,0 +1,20 @@
+import { Box, Text } from "ink";
+
+const WORDMARK = [
+  " _   _ ___ _    ___ _  _ _  __",
+  "| | | | _ \\ |  |_ _| \\| | |/ /",
+  "| |_| |  _/ |__ | || .` | ' < ",
+  " \\___/|_| |____|___|_|\\_|_|\\_\\",
+];
+
+export function Wordmark() {
+  return (
+    <Box flexDirection="column">
+      {WORDMARK.map((line) => (
+        <Text key={line} bold>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}