uplink-cli 0.1.37 → 0.1.39

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>
+  );
+}

package/cli/src/tui/format.ts

@@ -0,0 +1,22 @@
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k)));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export function formatDate(iso?: string): string {
+  if (!iso) return "—";
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toISOString().slice(0, 10);
+}
+
+export function cleanLabel(label: string): string {
+  return label
+    .replace(/^🚀\s*/, "")
+    .replace(/^⚠️\s*/, "⚠ ")
+    .replace(/^✅\s*/, "")
+    .replace(/^❌\s*/, "");
+}

package/cli/src/tui/index.mts

@@ -0,0 +1,6 @@
+import { startMenuSession } from "./session.mts";
+
+startMenuSession().catch((error) => {
+  console.error(error instanceof Error ? error.message : error);
+  process.exit(1);
+});

package/cli/src/tui/liveTree.ts

@@ -0,0 +1,40 @@
+import type { MenuChoice } from "../subcommands/menu/types";
+import type { MenuStatus } from "./App";
+import { cleanLabel } from "./format";
+import { fetchAppLogs } from "./snapshot";
+
+export function withLiveApps(tree: MenuChoice[], status: MenuStatus): MenuChoice[] {
+  return tree.map((item) => {
+    if (!item.subMenu || cleanLabel(item.label) !== "Hosting") return item;
+    const rest = item.subMenu.filter((choice) => cleanLabel(choice.label) !== "Apps");
+    const appsMenu: MenuChoice = {
+      label: "Apps",
+      subMenu:
+        status.apps.length > 0
+          ? status.apps.map((app) => ({
+              label: app.name,
+              inspect: { kind: "app", id: app.id, url: app.url, createdAt: app.createdAt },
+              subMenu: [
+                {
+                  label: "Logs",
+                  action: () => fetchAppLogs(app.id),
+                },
+              ],
+            }))
+          : [{ label: "No apps yet", action: async () => "No hosted apps." }],
+    };
+    return { ...item, subMenu: [appsMenu, ...rest] };
+  });
+}
+
+export function resolveStack(tree: MenuChoice[], titles: string[]): MenuChoice[][] {
+  const stack: MenuChoice[][] = [tree];
+  let current = tree;
+  for (let i = 1; i < titles.length; i += 1) {
+    const found = current.find((choice) => cleanLabel(choice.label) === titles[i]);
+    if (!found?.subMenu) break;
+    stack.push(found.subMenu);
+    current = found.subMenu;
+  }
+  return stack;
+}

package/cli/src/tui/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/cli/src/tui/runMenu.tsx

@@ -0,0 +1,57 @@
+import { render } from "ink";
+import { MenuApp, type MenuOutcome, type MenuStatus } from "./App";
+import type { MenuChoice } from "../subcommands/menu/types";
+import { prepareStdinForPrompt } from "../subcommands/menu/io";
+import { resolveStack, withLiveApps } from "./liveTree";
+
+export async function runInkMenu(opts: {
+  tree: MenuChoice[];
+  getStatus: () => Promise<MenuStatus>;
+}): Promise<void> {
+  let message = "";
+  let titles = ["UPLINK"];
+  let selected = 0;
+
+  while (true) {
+    const status = await opts.getStatus();
+    const tree = withLiveApps(opts.tree, status);
+    const stack = resolveStack(tree, titles);
+    let outcome: MenuOutcome = { kind: "quit" };
+    const instance = render(
+      <MenuApp
+        tree={tree}
+        status={status}
+        message={message}
+        initialStack={stack}
+        initialTitles={titles}
+        initialSelected={Math.min(selected, (stack[stack.length - 1]?.length || 1) - 1)}
+        onOutcome={(next) => {
+          outcome = next;
+        }}
+      />
+    );
+    await instance.waitUntilExit();
+    instance.unmount();
+    prepareStdinForPrompt();
+
+    if (outcome.kind !== "action") return;
+
+    titles = outcome.titles;
+    selected = outcome.selected;
+
+    if (outcome.isExit) {
+      try {
+        await outcome.action();
+      } catch {
+        /* ignore */
+      }
+      return;
+    }
+
+    try {
+      message = (await outcome.action()) || "";
+    } catch (error) {
+      message = `Error: ${error instanceof Error ? error.message : String(error)}`;
+    }
+  }
+}