@punkcode/cli 0.1.16 → 0.1.18

package/dist/App-GTPBJCS2.js

@@ -0,0 +1,785 @@
+#!/usr/bin/env node
+import {
+  PunkConnection,
+  clearAuth,
+  createPunkStore,
+  initQrSession,
+  loadAuth,
+  refreshIdToken,
+  saveAuth,
+  signIn,
+  usePunkStore,
+  version
+} from "./chunk-NW32U73H.js";
+
+// src/ui/App.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+
+// src/ui/LoginDialog.tsx
+import { useState, useEffect, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { TextInput, Spinner } from "@inkjs/ui";
+
+// src/ui/theme.ts
+var theme = {
+  // Accent colors
+  primary: "cyan",
+  accent: "yellow",
+  // Status colors
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  // Structural
+  border: "gray",
+  sectionTitle: "cyan",
+  // Logo
+  logo: "yellow"
+};
+
+// src/ui/LoginDialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var QR_COLORS = ["cyan", "magenta", "greenBright", "yellowBright", "cyanBright", "magentaBright"];
+function LoginDialog({ store, server }) {
+  const [mode, setMode] = useState("qr");
+  const [error, setError] = useState(null);
+  const [qrString, setQrString] = useState("");
+  const [colorIdx, setColorIdx] = useState(0);
+  const [email, setEmail] = useState("");
+  const [polling, setPolling] = useState(false);
+  const [welcomeEmail, setWelcomeEmail] = useState("");
+  useEffect(() => {
+    if (mode !== "success") return;
+    const timer = setTimeout(() => {
+      store.getState().setScreen("connecting");
+    }, 2500);
+    return () => clearTimeout(timer);
+  }, [mode, store]);
+  useEffect(() => {
+    if (mode !== "qr") return;
+    const timer = setInterval(() => {
+      setColorIdx((i) => (i + 1) % QR_COLORS.length);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [mode]);
+  const startQr = useCallback(async () => {
+    setMode("qr");
+    setError(null);
+    setPolling(false);
+    try {
+      const session = await initQrSession(server);
+      setQrString(session.qrString);
+      setPolling(true);
+      const ac = new AbortController();
+      for await (const result of session.poll(ac.signal)) {
+        if (result.status === "pending") continue;
+        if (result.status === "expired") {
+          setError("QR code expired. Retrying...");
+          setPolling(false);
+          setTimeout(() => startQr(), 1e3);
+          return;
+        }
+        if (result.status === "confirmed") {
+          handleConfirmed(result);
+          return;
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "QR login failed");
+      setPolling(false);
+    }
+  }, [server, store]);
+  useEffect(() => {
+    startQr();
+  }, [startQr]);
+  const handleConfirmed = (result) => {
+    saveAuth({
+      idToken: result.idToken,
+      refreshToken: result.refreshToken,
+      expiresAt: Date.now() + parseInt(result.expiresIn, 10) * 1e3,
+      email: result.email,
+      uid: result.uid
+    });
+    store.getState().setAuth({ email: result.email, uid: result.uid });
+    store.getState().addActivity({ icon: "\u2713", message: `Logged in as ${result.email}` });
+    setWelcomeEmail(result.email);
+    setMode("success");
+  };
+  useInput((input, key) => {
+    if (mode === "qr" && input === "e") {
+      setMode("email-input");
+      setError(null);
+    }
+    if ((mode === "email-input" || mode === "password-input") && key.escape) {
+      setMode("qr");
+      setEmail("");
+      startQr();
+    }
+  }, { isActive: mode === "qr" || mode === "email-input" || mode === "password-input" });
+  const handleEmailSubmit = (value) => {
+    setEmail(value);
+    setMode("password-input");
+  };
+  const handlePasswordSubmit = async (password) => {
+    setMode("authenticating");
+    setError(null);
+    try {
+      const auth = await signIn(email, password);
+      store.getState().setAuth({ email: auth.email, uid: auth.uid });
+      store.getState().addActivity({ icon: "\u2713", message: `Logged in as ${auth.email}` });
+      setWelcomeEmail(auth.email);
+      setMode("success");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+      setMode("email-input");
+      setEmail("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      paddingX: 2,
+      children: [
+        error && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: theme.error, children: [
+          "\u2717",
+          " ",
+          error
+        ] }) }),
+        mode === "qr" && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Text, { children: "Scan with the Punk app to connect:" }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          qrString ? /* @__PURE__ */ jsx(Text, { color: QR_COLORS[colorIdx], children: qrString }) : /* @__PURE__ */ jsx(Spinner, { label: "Generating QR code..." }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          polling && /* @__PURE__ */ jsx(Spinner, { label: "Waiting for confirmation..." }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsxs(Text, { children: [
+            /* @__PURE__ */ jsx(Text, { color: theme.accent, bold: true, children: "e" }),
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: " email login" })
+          ] })
+        ] }),
+        mode === "email-input" && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx(Text, { children: "Email:" }),
+          /* @__PURE__ */ jsx(TextInput, { placeholder: "you@example.com", onSubmit: handleEmailSubmit }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "esc to go back to QR" })
+        ] }),
+        mode === "password-input" && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+          /* @__PURE__ */ jsxs(Text, { children: [
+            "Password for ",
+            email,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(PasswordInput, { onSubmit: handlePasswordSubmit }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "esc to go back to QR" })
+        ] }),
+        mode === "authenticating" && /* @__PURE__ */ jsx(Box, { justifyContent: "center", children: /* @__PURE__ */ jsx(Spinner, { label: "Authenticating..." }) }),
+        mode === "success" && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsxs(Text, { color: theme.success, bold: true, children: [
+            "\u2714",
+            " Welcome!"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsx(Text, { children: welcomeEmail }),
+          /* @__PURE__ */ jsx(Text, { children: " " }),
+          /* @__PURE__ */ jsx(Spinner, { label: "Connecting..." }),
+          /* @__PURE__ */ jsx(Text, { children: " " })
+        ] })
+      ]
+    }
+  );
+}
+function PasswordInput({ onSubmit }) {
+  const [value, setValue] = useState("");
+  useInput((input, key) => {
+    if (key.return) {
+      onSubmit(value);
+    } else if (key.backspace || key.delete) {
+      setValue((v) => v.slice(0, -1));
+    } else if (input && !key.ctrl && !key.meta) {
+      setValue((v) => v + input);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    "*".repeat(value.length),
+    value.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "enter password" }) : ""
+  ] });
+}
+
+// src/ui/Dashboard.tsx
+import { useState as useState2, useEffect as useEffect2, useRef } from "react";
+import { Box as Box2, Text as Text2, useApp, useInput as useInput2, useStdout } from "ink";
+import { Badge } from "@inkjs/ui";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getColumns(width) {
+  if (width >= 120) return { id: 12, project: 20, status: 12, started: 12, model: 10, effort: 8, showExtras: true };
+  if (width >= 100) return { id: 10, project: 18, status: 12, started: 10, model: 10, effort: 8, showExtras: true };
+  if (width >= 80) return { id: 10, project: 16, status: 10, started: 10, model: 0, effort: 0, showExtras: false };
+  return { id: 8, project: 12, status: 10, started: 8, model: 0, effort: 0, showExtras: false };
+}
+var LOGO = [
+  "\u2588\u2588\u2588\u2588\u2588\u2588  \u2588\u2588  \u2588\u2588 \u2588\u2588  \u2588\u2588 \u2588\u2588  \u2588\u2588",
+  "\u2588\u2588  \u2588\u2588  \u2588\u2588  \u2588\u2588 \u2588\u2588\u2588 \u2588\u2588 \u2588\u2588 \u2588\u2588 ",
+  "\u2588\u2588\u2588\u2588\u2588\u2588  \u2588\u2588  \u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588  ",
+  "\u2588\u2588      \u2588\u2588  \u2588\u2588 \u2588\u2588 \u2588\u2588\u2588 \u2588\u2588 \u2588\u2588 ",
+  "\u2588\u2588       \u2588\u2588\u2588\u2588  \u2588\u2588  \u2588\u2588 \u2588\u2588  \u2588\u2588"
+];
+function Dashboard({ store, connection, overlay }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const termWidth = stdout?.columns ?? 80;
+  const termHeight = stdout?.rows ?? 24;
+  const connectionStatus = usePunkStore(store, (s) => s.connection);
+  const connectionError = usePunkStore(store, (s) => s.connectionError);
+  const deviceInfo = usePunkStore(store, (s) => s.deviceInfo);
+  const sessions = usePunkStore(store, (s) => s.sessions);
+  const activityLog = usePunkStore(store, (s) => s.activityLog);
+  const server = usePunkStore(store, (s) => s.server);
+  const connectedAt = usePunkStore(store, (s) => s.connectedAt);
+  const auth = usePunkStore(store, (s) => s.auth);
+  const sessionProjects = usePunkStore(store, (s) => s.sessionProjects);
+  const [focusMode, setFocusMode] = useState2(false);
+  const [focusedSessionIdx, setFocusedSessionIdx] = useState2(0);
+  const knownSessionIds = Object.keys(sessionProjects);
+  const focusedSessionId = focusMode ? knownSessionIds[focusedSessionIdx] : null;
+  const hasMultipleSessions = knownSessionIds.length > 1;
+  const filteredActivity = focusedSessionId ? activityLog.filter((e) => e.sessionId === focusedSessionId) : activityLog;
+  const [now, setNow] = useState2(Date.now());
+  useEffect2(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  const [selectedIdx, setSelectedIdx] = useState2(-1);
+  const [userScrolled, setUserScrolled] = useState2(false);
+  const prevLogLength = useRef(filteredActivity.length);
+  useEffect2(() => {
+    if (filteredActivity.length > prevLogLength.current && !userScrolled) {
+      setSelectedIdx(filteredActivity.length - 1);
+    }
+    prevLogLength.current = filteredActivity.length;
+  }, [filteredActivity.length, userScrolled]);
+  useEffect2(() => {
+    setSelectedIdx(filteredActivity.length - 1);
+    setUserScrolled(false);
+  }, [focusedSessionId]);
+  const [detailEntry, setDetailEntry] = useState2(null);
+  const effectiveIdx = selectedIdx === -1 ? filteredActivity.length - 1 : selectedIdx;
+  useInput2((input, key) => {
+    if (input === "q" || input === "c" && key.ctrl) {
+      connection?.disconnect();
+      exit();
+    }
+    if (input === "r") connection?.reconnect();
+    if (input === "c" && !key.ctrl) {
+      store.getState().clearActivity();
+      setSelectedIdx(-1);
+      setUserScrolled(false);
+    }
+    if (input === "l") {
+      connection?.disconnect();
+      clearAuth();
+      store.getState().setAuth(null);
+      store.getState().setDisconnected("logged out");
+      store.getState().addActivity({ icon: "\u25CF", message: "Logged out" });
+      store.getState().setScreen("login");
+    }
+    if (input === "g" && knownSessionIds.length > 0) {
+      setFocusMode((f) => !f);
+      setFocusedSessionIdx(0);
+    }
+    if (focusMode && key.leftArrow) {
+      setFocusedSessionIdx((i) => (i - 1 + knownSessionIds.length) % knownSessionIds.length);
+    }
+    if (focusMode && key.rightArrow) {
+      setFocusedSessionIdx((i) => (i + 1) % knownSessionIds.length);
+    }
+    if (key.return && !detailEntry && effectiveIdx >= 0 && effectiveIdx < filteredActivity.length) {
+      setDetailEntry(filteredActivity[effectiveIdx]);
+    }
+    if ((key.escape || key.return) && detailEntry) {
+      setDetailEntry(null);
+    }
+    if (!detailEntry && key.upArrow && filteredActivity.length > 0) {
+      setUserScrolled(true);
+      setSelectedIdx((prev) => Math.max(0, (prev === -1 ? filteredActivity.length - 1 : prev) - 1));
+    }
+    if (!detailEntry && key.downArrow && filteredActivity.length > 0) {
+      const next = selectedIdx + 1;
+      if (next >= filteredActivity.length - 1) {
+        setUserScrolled(false);
+        setSelectedIdx(filteredActivity.length - 1);
+      } else {
+        setSelectedIdx(next);
+      }
+    }
+  });
+  const sessionList = Object.values(sessions);
+  const uptime = connectedAt ? formatDuration(now - connectedAt) : "-";
+  const boxWidth = termWidth - 2;
+  const col = getColumns(termWidth);
+  const headerHeight = 8;
+  const sessionHeight = Math.max(sessionList.length, 1) + 5;
+  const footerHeight = 1;
+  const visibleCount = Math.max(termHeight - headerHeight - sessionHeight - footerHeight - 4, 4);
+  const tabBarHeight = focusMode ? 1 : 0;
+  const adjustedVisibleCount = visibleCount - tabBarHeight;
+  let viewStart = Math.max(0, filteredActivity.length - adjustedVisibleCount);
+  if (effectiveIdx < viewStart) viewStart = effectiveIdx;
+  if (effectiveIdx >= viewStart + adjustedVisibleCount) viewStart = effectiveIdx - adjustedVisibleCount + 1;
+  viewStart = Math.max(0, viewStart);
+  const visibleActivity = filteredActivity.slice(viewStart, viewStart + adjustedVisibleCount);
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width: termWidth, height: termHeight, children: [
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", justifyContent: "space-between", width: termWidth - 2, paddingX: 1, children: [
+      /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+        auth && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "User:     ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { children: auth.email })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Server:   ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { children: stripProtocol(server) })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Status:   ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(StatusIndicator, { status: connectionStatus, error: connectionError })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Uptime:   ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { children: uptime })
+        ] }),
+        deviceInfo && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Device:   ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { children: deviceInfo.name })
+        ] }),
+        termWidth >= 80 && deviceInfo && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Platform: ".padEnd(12) }),
+          /* @__PURE__ */ jsxs2(Text2, { children: [
+            deviceInfo.platform,
+            " ",
+            deviceInfo.arch,
+            " ",
+            deviceInfo.memoryGB,
+            "GB"
+          ] })
+        ] }),
+        termWidth >= 80 && deviceInfo?.battery && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Battery:  ".padEnd(12) }),
+          /* @__PURE__ */ jsxs2(Text2, { children: [
+            deviceInfo.battery.level,
+            "%",
+            deviceInfo.battery.charging ? " \u26A1" : ""
+          ] })
+        ] }),
+        termWidth >= 80 && deviceInfo?.claudeCodeVersion && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Claude:   ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { color: "#E07B39", children: deviceInfo.claudeCodeVersion })
+        ] }),
+        termWidth >= 80 && deviceInfo && deviceInfo.platform === "darwin" && /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Sleep:    ".padEnd(12) }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.success, children: "caffeinate active" })
+        ] })
+      ] }),
+      termWidth >= 80 && /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: termWidth >= 100 ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<q>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Quit" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<r>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Reconnect" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<c>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Clear Activity" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<g>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Group Activity" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<l>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Logout" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<enter> ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Activity Details" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit " }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "r" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " reconnect" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "c" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " clear " }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " group" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "l" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " logout " }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
+        ] })
+      ] }) }),
+      termWidth >= 120 && /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", alignItems: "flex-end", justifyContent: "center", children: LOGO.map((line, i) => /* @__PURE__ */ jsx2(Text2, { color: theme.logo, children: line }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginX: 1, marginTop: 1, children: [
+      buildTopBorderJsx(`Sessions (${sessionList.length})`, boxWidth),
+      /* @__PURE__ */ jsxs2(
+        Box2,
+        {
+          flexDirection: "column",
+          borderStyle: "single",
+          borderColor: theme.border,
+          borderTop: false,
+          paddingX: 1,
+          paddingY: 1,
+          children: [
+            /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+              "ID".padEnd(col.id),
+              "PROJECT".padEnd(col.project),
+              "STATUS".padEnd(col.status),
+              "STARTED".padEnd(col.started),
+              col.showExtras ? "MODEL".padEnd(col.model) + "EFFORT" : ""
+            ] }) }),
+            sessionList.length === 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+              "\u25CB",
+              " Waiting for sessions from the Punk app..."
+            ] }) : sessionList.map((session) => /* @__PURE__ */ jsx2(SessionRow, { session, now, col }, session.requestId))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginX: 1, flexGrow: 1, children: [
+      buildTopBorderJsx(
+        overlay ? "Login" : focusMode && focusedSessionId ? `Activity: ${sessionProjects[focusedSessionId]?.project ?? focusedSessionId.slice(0, 8)}` : filteredActivity.length > adjustedVisibleCount ? `Activity (${effectiveIdx + 1}/${filteredActivity.length})` : "Activity",
+        boxWidth
+      ),
+      /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          flexDirection: "column",
+          borderStyle: "single",
+          borderColor: theme.border,
+          borderTop: false,
+          paddingX: 1,
+          flexGrow: 1,
+          alignItems: overlay ? "center" : void 0,
+          justifyContent: overlay ? "center" : void 0,
+          children: overlay ?? (detailEntry ? (
+            /* Detail view */
+            /* @__PURE__ */ jsx2(DetailView, { entry: detailEntry, sessionProjects })
+          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            focusMode && knownSessionIds.length > 0 && /* @__PURE__ */ jsxs2(Box2, { marginBottom: 1, gap: 1, children: [
+              knownSessionIds.map((sid, i) => {
+                const sp = sessionProjects[sid];
+                const isFocused = i === focusedSessionIdx;
+                return /* @__PURE__ */ jsx2(Text2, { children: isFocused ? /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+                  "[",
+                  sp?.project ?? sid.slice(0, 8),
+                  ":",
+                  sid.slice(0, 8),
+                  "]"
+                ] }) : /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+                  " ",
+                  sp?.project ?? sid.slice(0, 8),
+                  ":",
+                  sid.slice(0, 8),
+                  " "
+                ] }) }, sid);
+              }),
+              /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+                "  ",
+                "\u2190",
+                "/",
+                "\u2192",
+                " switch  g all"
+              ] })
+            ] }),
+            visibleActivity.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Waiting for events..." }) : visibleActivity.map((entry, i) => /* @__PURE__ */ jsx2(
+              ActivityRow,
+              {
+                entry,
+                termWidth,
+                isSelected: viewStart + i === effectiveIdx,
+                sessionProjects: hasMultipleSessions && !focusMode ? sessionProjects : void 0
+              },
+              `${entry.timestamp}-${i}`
+            ))
+          ] }))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, justifyContent: "space-between", width: termWidth - 2, children: [
+      /* @__PURE__ */ jsx2(Box2, { gap: 2, children: detailEntry ? /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsxs2(Text2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "esc" }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " close" })
+      ] }) }) : overlay ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "e" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " email" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) : focusMode ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2190\u2192" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " switch" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " all" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " scroll" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " scroll" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " group" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "c" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " clear" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "r" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " reconnect" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "l" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " logout" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        "punk v",
+        version
+      ] })
+    ] })
+  ] });
+}
+function StatusIndicator({ status, error }) {
+  if (status === "connected") {
+    return /* @__PURE__ */ jsxs2(Text2, { color: theme.success, bold: true, children: [
+      "\u25CF",
+      " Connected"
+    ] });
+  }
+  if (status === "connecting") {
+    return /* @__PURE__ */ jsxs2(Text2, { color: theme.warning, children: [
+      "\u25CF",
+      " Connecting..."
+    ] });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxs2(Text2, { color: theme.error, children: [
+      "\u25CF",
+      " ",
+      error ?? "Error"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Text2, { color: theme.error, children: [
+    "\u25CF",
+    " Disconnected"
+  ] });
+}
+function SessionRow({ session, now, col }) {
+  const id = session.requestId.slice(0, col.id - 2);
+  const project = session.workingDirectory ? session.workingDirectory.split("/").pop() ?? "" : "";
+  const started = formatDuration(now - session.startedAt);
+  return /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsxs2(Text2, { children: [
+      id.padEnd(col.id),
+      project.padEnd(col.project)
+    ] }),
+    /* @__PURE__ */ jsx2(Box2, { width: col.status, children: session.status === "running" ? /* @__PURE__ */ jsx2(Badge, { color: "green", children: "RUNNING" }) : session.status === "error" ? /* @__PURE__ */ jsx2(Badge, { color: "red", children: "ERROR" }) : /* @__PURE__ */ jsx2(Badge, { color: "yellow", children: "IDLE" }) }),
+    /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: started.padEnd(col.started) }),
+    col.showExtras && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: (session.model ?? "").padEnd(col.model) }),
+    col.showExtras && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: session.effort ?? "" })
+  ] });
+}
+function DetailView({ entry, sessionProjects }) {
+  const time = new Date(entry.timestamp).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  const date = new Date(entry.timestamp).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  const sp = entry.sessionId ? sessionProjects[entry.sessionId] : null;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingY: 1, children: [
+    /* @__PURE__ */ jsx2(Box2, { gap: 1, children: /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+      entry.icon,
+      " ",
+      entry.message
+    ] }) }),
+    /* @__PURE__ */ jsx2(Text2, { children: " " }),
+    /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Time:     ".padEnd(12) }),
+      /* @__PURE__ */ jsxs2(Text2, { children: [
+        date,
+        " ",
+        time
+      ] })
+    ] }),
+    entry.sessionId && /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Session:  ".padEnd(12) }),
+      /* @__PURE__ */ jsx2(Text2, { children: entry.sessionId })
+    ] }),
+    sp && /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Project:  ".padEnd(12) }),
+      /* @__PURE__ */ jsx2(Text2, { children: sp.project })
+    ] }),
+    entry.data && Object.entries(entry.data).map(([key, value]) => {
+      if (value == null) return null;
+      const strValue = typeof value === "string" ? value : JSON.stringify(value);
+      if (!strValue) return null;
+      return /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: (key + ":").padEnd(12) }),
+        /* @__PURE__ */ jsx2(Text2, { children: strValue })
+      ] }, key);
+    })
+  ] });
+}
+function ActivityRow({ entry, termWidth, isSelected, sessionProjects }) {
+  const time = new Date(entry.timestamp).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  const iconColor = entry.icon === "\u2713" ? theme.success : entry.icon === "\u2717" ? theme.error : entry.icon === "\u25B6" ? theme.primary : entry.icon === "\u27F3" ? theme.warning : "white";
+  const sessionStr = entry.sessionId ? entry.sessionId.slice(0, 8) : "";
+  const detailStr = entry.detail ?? "";
+  const marker = isSelected ? "\u25B8 " : "  ";
+  const sp = sessionProjects && entry.sessionId ? sessionProjects[entry.sessionId] : null;
+  return /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsx2(Text2, { color: isSelected ? theme.primary : void 0, bold: isSelected, children: marker }),
+    /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
+      time,
+      "  "
+    ] }),
+    sp && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: `${sp.project.slice(0, 8)}:${sessionStr}`.padEnd(18) }),
+    /* @__PURE__ */ jsxs2(Text2, { color: iconColor, bold: true, children: [
+      entry.icon,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx2(Text2, { bold: isSelected, children: entry.message }),
+    !sp && termWidth >= 80 && sessionStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
+      "  ",
+      sessionStr
+    ] }),
+    termWidth >= 80 && detailStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
+      "  ",
+      detailStr
+    ] })
+  ] });
+}
+function buildTopBorderJsx(title, width, borderColor) {
+  const prefix = "\u250C\u2500 ";
+  const suffix = " ";
+  const end = "\u2510";
+  const used = prefix.length + title.length + suffix.length + end.length;
+  const fill = Math.max(width - used, 0);
+  const lineColor = borderColor ?? theme.border;
+  return /* @__PURE__ */ jsxs2(Text2, { children: [
+    /* @__PURE__ */ jsx2(Text2, { color: lineColor, children: prefix }),
+    /* @__PURE__ */ jsx2(Text2, { color: theme.sectionTitle, bold: true, children: title }),
+    /* @__PURE__ */ jsxs2(Text2, { color: lineColor, children: [
+      suffix,
+      "\u2500".repeat(fill),
+      end
+    ] })
+  ] });
+}
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours}h ${minutes % 60}m`;
+}
+function stripProtocol(url) {
+  return url.replace(/^https?:\/\//, "");
+}
+
+// src/ui/App.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function App({ server, idToken, options }) {
+  const [store] = useState3(() => {
+    const s = createPunkStore(server);
+    const auth = loadAuth();
+    if (auth || idToken) {
+      if (auth) s.getState().setAuth({ email: auth.email, uid: auth.uid });
+      s.getState().setScreen("connecting");
+    }
+    return s;
+  });
+  const connectionRef = useRef2(null);
+  const screen = usePunkStore(store, (s) => s.screen);
+  useEffect3(() => {
+    if (screen !== "connecting") return;
+    if (connectionRef.current) {
+      connectionRef.current.disconnect();
+      connectionRef.current = null;
+    }
+    const tokenPromise = idToken ? Promise.resolve(idToken) : refreshIdToken();
+    tokenPromise.then((token) => {
+      connectionRef.current = new PunkConnection(server, token, options, store);
+      store.getState().setScreen("dashboard");
+    }).catch((err) => {
+      store.getState().setError(err instanceof Error ? err.message : String(err));
+      store.getState().addActivity({ icon: "\u2717", message: "Auth failed, please log in" });
+      store.getState().setScreen("login");
+    });
+  }, [screen, server, idToken, options, store]);
+  useEffect3(() => {
+    return () => {
+      connectionRef.current?.disconnect();
+    };
+  }, []);
+  const loginOverlay = screen === "login" ? /* @__PURE__ */ jsx3(LoginDialog, { store, server }) : void 0;
+  return /* @__PURE__ */ jsx3(
+    Dashboard,
+    {
+      store,
+      connection: connectionRef.current,
+      overlay: loginOverlay
+    }
+  );
+}
+export {
+  App
+};