okengine 0.10.3 → 0.11.0

package/src/cli/test.ts

@@ -0,0 +1,58 @@
+/**
+ * `oke test` — run `bun test` with PGLite test posture (no Docker Compose).
+ */
+
+/**
+ * CLI entry for `oke test`.
+ *
+ * Sets `NODE_ENV=test` and a default in-memory PGLite URL, verifies
+ * `@electric-sql/pglite` resolves, then forwards remaining argv to `bun test`.
+ *
+ * @param args - Args after `test` (forwarded to `bun test`)
+ */
+export async function testCli(args: readonly string[]): Promise<number> {
+  for (const a of args) {
+    if (a === "--help" || a === "-h") {
+      console.log(`oke test [...bun test args]
+
+Run bun test with PGLite test posture (NODE_ENV=test).
+Does not start Docker Compose.
+
+Environment (set if unset):
+  NODE_ENV=test
+  OKE_PGLITE_URL=memory://
+`);
+      return 0;
+    }
+  }
+
+  if (process.env.NODE_ENV === undefined || process.env.NODE_ENV === "") {
+    process.env.NODE_ENV = "test";
+  }
+  if (process.env.OKE_PGLITE_URL === undefined || process.env.OKE_PGLITE_URL === "") {
+    process.env.OKE_PGLITE_URL = "memory://";
+  }
+
+  try {
+    await import("@electric-sql/pglite");
+  } catch {
+    try {
+      Bun.resolveSync("@electric-sql/pglite", process.cwd());
+    } catch {
+      console.error(
+        "oke test: `@electric-sql/pglite` is not installed — add it as a dependency (okengine peers it for the pglite SQL driver)",
+      );
+      return 1;
+    }
+  }
+
+  const proc = Bun.spawn(["bun", "test", ...args], {
+    cwd: process.cwd(),
+    env: process.env as Record<string, string>,
+    stdin: "inherit",
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+  const code = await proc.exited;
+  return code ?? 1;
+}

package/src/cli/tui/App.tsx

@@ -0,0 +1,252 @@
+/**
+ * Interactive `oke` shell — brand chrome, focus layers, `/` palette.
+ */
+
+import { Box, useApp, useInput } from "ink";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from "react";
+import { DevController } from "../dev-controller.ts";
+import type { DevOwnership } from "../dev-session-lock.ts";
+import { ConfirmDialog } from "./components/ConfirmDialog.tsx";
+import { HeaderBar } from "./components/HeaderBar.tsx";
+import { SlashPalette } from "./components/SlashPalette.tsx";
+import { StatusBar, type FooterStatus } from "./components/StatusBar.tsx";
+import { TabBar } from "./components/TabBar.tsx";
+import { DashboardPanel } from "./panels/Dashboard.tsx";
+import { DatabasePanel } from "./panels/Database.tsx";
+import { DevPanel } from "./panels/Dev.tsx";
+import { DockerPanel } from "./panels/Docker.tsx";
+import { NavigatorPanel } from "./panels/Navigator.tsx";
+import { runSlashCli } from "./slash-run.ts";
+import { pollPortSnapshot } from "./state/ports.ts";
+import { TUI_MUTED } from "./theme.ts";
+
+const PANELS = ["dashboard", "dev", "database", "docker", "navigator"] as const;
+type PanelId = (typeof PANELS)[number];
+
+const TABS = [
+  { id: "dashboard", label: "Dashboard" },
+  { id: "dev", label: "Dev" },
+  { id: "database", label: "Database" },
+  { id: "docker", label: "Docker" },
+  { id: "navigator", label: "Navigator" },
+] as const;
+
+/** Props for {@link OkeTuiApp}. */
+export type OkeTuiAppProps = {
+  readonly cwd: string;
+};
+
+/**
+ * Root Ink application.
+ *
+ * @param props - cwd
+ */
+export function OkeTuiApp(props: OkeTuiAppProps): ReactElement {
+  const { exit } = useApp();
+  const [panelIndex, setPanelIndex] = useState(0);
+  const [focusLayer, setFocusLayer] = useState<"tabs" | "panel">("tabs");
+  const [logs, setLogs] = useState<string[]>([]);
+  const [slashOpen, setSlashOpen] = useState(false);
+  const [slashBusy, setSlashBusy] = useState(false);
+  const [quitConfirm, setQuitConfirm] = useState(false);
+  const [ownership, setOwnership] = useState<DevOwnership>("stopped");
+  const [footerStatus, setFooterStatus] = useState<FooterStatus>({ kind: "idle" });
+  const doneTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const controller = useMemo(() => new DevController(), []);
+
+  const onLog = useCallback((line: string) => {
+    setLogs((prev) => {
+      const next = [...prev, ...line.split("\n").filter((l) => l.length > 0)];
+      return next.slice(-200);
+    });
+  }, []);
+
+  const onStatus = useCallback((status: FooterStatus) => {
+    if (doneTimer.current) {
+      clearTimeout(doneTimer.current);
+      doneTimer.current = null;
+    }
+    setFooterStatus(status);
+    if (status.kind === "done") {
+      doneTimer.current = setTimeout(() => {
+        setFooterStatus({ kind: "idle" });
+        doneTimer.current = null;
+      }, 2000);
+    }
+  }, []);
+
+  useEffect(() => {
+    const tick = (): void => {
+      void pollPortSnapshot(props.cwd).then((s) => setOwnership(s.ownership));
+    };
+    tick();
+    const id = setInterval(tick, 2000);
+    const off = controller.on((e) => {
+      if (e.type === "ownership" || e.type === "ready") {
+        setOwnership(e.ownership);
+      }
+      if (e.type === "exit") setOwnership("stopped");
+    });
+    return () => {
+      clearInterval(id);
+      off();
+      if (doneTimer.current) clearTimeout(doneTimer.current);
+    };
+  }, [controller, props.cwd]);
+
+  const panel = (PANELS[panelIndex] ?? "dashboard") as PanelId;
+  const panelActive = !slashOpen && !quitConfirm && focusLayer === "panel";
+
+  const jumpPanel = useCallback((panelId: string) => {
+    const idx = PANELS.indexOf(panelId as PanelId);
+    if (idx >= 0) {
+      setPanelIndex(idx);
+      setFocusLayer("panel");
+    }
+  }, []);
+
+  const runCli = useCallback(
+    async (argv: readonly string[]) => {
+      setSlashBusy(true);
+      onStatus({ kind: "running", label: `Running oke ${argv.join(" ")}…` });
+      try {
+        await runSlashCli(props.cwd, argv, onLog);
+        onStatus({ kind: "done", label: "Done" });
+      } catch {
+        onStatus({ kind: "done", label: "Failed" });
+      } finally {
+        setSlashBusy(false);
+      }
+    },
+    [props.cwd, onLog, onStatus],
+  );
+
+  const requestQuit = useCallback(() => {
+    if (ownership === "managed") {
+      setQuitConfirm(true);
+      return;
+    }
+    exit();
+  }, [ownership, exit]);
+
+  useInput((input, key) => {
+    if (slashOpen || quitConfirm) return;
+
+    if (key.escape) {
+      if (focusLayer === "panel") {
+        setFocusLayer("tabs");
+        return;
+      }
+      requestQuit();
+      return;
+    }
+    if (input === "/") {
+      setSlashOpen(true);
+      return;
+    }
+    const n = Number(input);
+    if (n >= 1 && n <= PANELS.length) {
+      setPanelIndex(n - 1);
+      return;
+    }
+    // Global panel switch: Tab always; ←→ when focus is on the tab strip.
+    if (key.tab) {
+      setPanelIndex((i) => (i + 1) % PANELS.length);
+      setFocusLayer("tabs");
+      return;
+    }
+    if (focusLayer === "tabs") {
+      if (key.leftArrow) {
+        setPanelIndex((i) => (i - 1 + PANELS.length) % PANELS.length);
+        return;
+      }
+      if (key.rightArrow) {
+        setPanelIndex((i) => (i + 1) % PANELS.length);
+        return;
+      }
+      if (key.downArrow || key.return) {
+        setFocusLayer("panel");
+      }
+    }
+  });
+
+  if (quitConfirm) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={TUI_MUTED}
+        width="100%"
+        padding={1}
+      >
+        <ConfirmDialog
+          message="Stop managed oke dev and quit TUI?"
+          onConfirm={() => {
+            void controller.stop().then(() => exit());
+          }}
+          onCancel={() => setQuitConfirm(false)}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={TUI_MUTED}
+      width="100%"
+      paddingX={1}
+      paddingY={0}
+    >
+      <Box paddingY={1}>
+        <HeaderBar cwd={props.cwd} />
+      </Box>
+      <TabBar tabs={TABS} activeIndex={panelIndex} focused={focusLayer === "tabs"} />
+
+      {slashOpen ? (
+        <Box marginTop={1} flexGrow={1} minHeight={10}>
+          <SlashPalette
+            cwd={props.cwd}
+            busy={slashBusy}
+            onClose={() => setSlashOpen(false)}
+            onJumpPanel={jumpPanel}
+            onRunCli={runCli}
+          />
+        </Box>
+      ) : (
+        <Box flexDirection="column" flexGrow={1} marginTop={1} minHeight={10} gap={1}>
+          {panel === "dashboard" ? (
+            <DashboardPanel
+              cwd={props.cwd}
+              active={panelActive}
+              onJumpPanel={jumpPanel}
+              onStatus={onStatus}
+            />
+          ) : null}
+          {panel === "dev" ? (
+            <DevPanel
+              cwd={props.cwd}
+              controller={controller}
+              onLog={onLog}
+              logs={logs}
+              active={panelActive}
+              onStatus={onStatus}
+            />
+          ) : null}
+          {panel === "database" ? (
+            <DatabasePanel cwd={props.cwd} active={panelActive} onLog={onLog} onStatus={onStatus} />
+          ) : null}
+          {panel === "docker" ? (
+            <DockerPanel cwd={props.cwd} active={panelActive} onLog={onLog} onStatus={onStatus} />
+          ) : null}
+          {panel === "navigator" ? <NavigatorPanel cwd={props.cwd} active={panelActive} /> : null}
+        </Box>
+      )}
+
+      <Box marginTop={0}>
+        <StatusBar status={footerStatus} />
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/DevLive.tsx

@@ -0,0 +1,116 @@
+/**
+ * Ink live controls for an already-running `oke dev` session.
+ *
+ * Flat single-line chrome (no nested borders / width="100%") so Ink does not
+ * remount at a second column count and leave a ghost frame above the bar.
+ */
+
+import { Box, Text, useApp, useInput } from "ink";
+import { useState, type ReactElement } from "react";
+import { mapDevControlInput } from "./keys.ts";
+import { TUI_BRAND, TUI_HINT, TUI_MUTED, TUI_WARN } from "./theme.ts";
+
+/** Props for {@link DevLiveControls}. */
+export type DevLiveControlsProps = {
+  readonly onRefresh: () => void | Promise<void>;
+  readonly onComposeUp: () => void | Promise<void>;
+  readonly onComposeStop: () => void | Promise<void>;
+  readonly onQuit: () => void;
+};
+
+/**
+ * Compact key-driven controls mounted after `oke dev` boot.
+ *
+ * @param props - Actions
+ */
+export function DevLiveControls(props: DevLiveControlsProps): ReactElement {
+  const { exit } = useApp();
+  const [help, setHelp] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState("");
+
+  useInput((input, key) => {
+    const ctrl = mapDevControlInput(input, key);
+    if (!ctrl || busy) return;
+    if (ctrl === "?") {
+      setHelp((h) => !h);
+      return;
+    }
+    if (ctrl === "q") {
+      props.onQuit();
+      exit();
+      return;
+    }
+    if (ctrl === "r") {
+      setBusy(true);
+      void Promise.resolve(props.onRefresh())
+        .then(() => setStatus("refreshed"))
+        .catch((err: unknown) => setStatus(err instanceof Error ? err.message : String(err)))
+        .finally(() => setBusy(false));
+      return;
+    }
+    if (ctrl === "u" || ctrl === "x") {
+      setBusy(true);
+      const run = ctrl === "u" ? props.onComposeUp : props.onComposeStop;
+      void Promise.resolve(run())
+        .then(() => setStatus(ctrl === "u" ? "compose up" : "compose stop"))
+        .catch((err: unknown) => setStatus(err instanceof Error ? err.message : String(err)))
+        .finally(() => setBusy(false));
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text>
+        <Text bold color={TUI_BRAND}>
+          oke dev
+        </Text>
+        <Text color={TUI_MUTED}> · controls · </Text>
+        <Text color={TUI_HINT}>? help · r refresh · q quit · u up · x stop</Text>
+        {busy ? <Text color={TUI_WARN}> · working…</Text> : null}
+        {status ? <Text color={TUI_MUTED}>{` · ${status}`}</Text> : null}
+      </Text>
+      {help ? (
+        <Text color={TUI_MUTED}>
+          r clear/refresh board · q quit · u compose up · x compose stop
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+/**
+ * Render {@link DevLiveControls} until quit.
+ *
+ * Clears Ink's frame before `onRefresh` reprints the hero so stdout + Ink
+ * never stack two control boxes.
+ *
+ * @param props - Actions
+ */
+export async function launchDevLiveControls(props: DevLiveControlsProps): Promise<void> {
+  const React = await import("react");
+  const { render } = await import("ink");
+
+  type InkInstance = ReturnType<typeof render>;
+  let instance: InkInstance | null = null;
+
+  const afterStdout = async (run: () => void | Promise<void>): Promise<void> => {
+    instance?.clear();
+    await run();
+    if (instance) {
+      instance.rerender(React.createElement(DevLiveControls, bound));
+    }
+  };
+
+  const bound: DevLiveControlsProps = {
+    onRefresh: () => afterStdout(props.onRefresh),
+    onComposeUp: () => afterStdout(props.onComposeUp),
+    onComposeStop: () => afterStdout(props.onComposeStop),
+    onQuit: props.onQuit,
+  };
+
+  instance = render(React.createElement(DevLiveControls, bound), {
+    exitOnCtrlC: false,
+  });
+  await instance.waitUntilExit();
+}

package/src/cli/tui/components/ConfirmDialog.tsx

@@ -0,0 +1,48 @@
+/**
+ * Simple y/n confirm overlay for destructive TUI actions.
+ */
+
+import { Box, Text, useInput } from "ink";
+import type { ReactElement } from "react";
+import { TUI_HINT, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link ConfirmDialog}. */
+export type ConfirmDialogProps = {
+  readonly message: string;
+  readonly onConfirm: () => void;
+  readonly onCancel: () => void;
+};
+
+/**
+ * Confirm with y / n / Enter / Esc.
+ *
+ * @param props - Message + callbacks
+ */
+export function ConfirmDialog(props: ConfirmDialogProps): ReactElement {
+  useInput((input, key) => {
+    if (input === "y" || input === "Y" || key.return) {
+      props.onConfirm();
+      return;
+    }
+    if (input === "n" || input === "N" || key.escape) {
+      props.onCancel();
+    }
+  });
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={TUI_WARN}
+      paddingX={1}
+      paddingY={0}
+    >
+      <Text bold color={TUI_WARN}>
+        Confirm
+      </Text>
+      <Text>{props.message}</Text>
+      <Text color={TUI_HINT}>
+        <Text color={TUI_OK}>y</Text> confirm · <Text color={TUI_WARN}>n</Text> cancel
+      </Text>
+    </Box>
+  );
+}

package/src/cli/tui/components/HeaderBar.tsx

@@ -0,0 +1,67 @@
+/**
+ * Compact project chrome — no border (spacing separates).
+ */
+
+import { Box, Text } from "ink";
+import { useEffect, useState, type ReactElement } from "react";
+import { basename } from "node:path";
+import { TUI_ACCENT, TUI_MUTED, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link HeaderBar}. */
+export type HeaderBarProps = {
+  readonly cwd: string;
+};
+
+async function resolveBranch(cwd: string): Promise<string> {
+  try {
+    const proc = Bun.spawn(["git", "rev-parse", "--abbrev-ref", "HEAD"], {
+      cwd,
+      stdout: "pipe",
+      stderr: "pipe",
+    });
+    const [out, code] = await Promise.all([new Response(proc.stdout).text(), proc.exited]);
+    if (code !== 0) return "dev";
+    const name = out.trim();
+    return name.length > 0 && name !== "HEAD" ? name : "dev";
+  } catch {
+    return "dev";
+  }
+}
+
+/**
+ * Project · branch · path.
+ *
+ * @param props - cwd
+ */
+export function HeaderBar(props: HeaderBarProps): ReactElement {
+  const [branch, setBranch] = useState("dev");
+  const project = basename(props.cwd) || props.cwd;
+
+  useEffect(() => {
+    let cancelled = false;
+    void resolveBranch(props.cwd).then((b) => {
+      if (!cancelled) setBranch(b);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [props.cwd]);
+
+  const home = process.env["HOME"] ?? "";
+  const shortCwd =
+    home && props.cwd.startsWith(home) ? `~${props.cwd.slice(home.length)}` : props.cwd;
+
+  return (
+    <Box paddingX={1} paddingY={0} marginBottom={0}>
+      <Text bold color={TUI_ACCENT}>
+        {project}
+      </Text>
+      <Text color={TUI_MUTED}> · </Text>
+      <Text color={TUI_WARN}>{branch}</Text>
+      <Text color={TUI_MUTED}> · </Text>
+      <Text color={TUI_MUTED} wrap="truncate">
+        {shortCwd}
+      </Text>
+    </Box>
+  );
+}

package/src/cli/tui/components/LogStream.tsx

@@ -0,0 +1,47 @@
+/**
+ * Persistent log footer — last N lines from the active service.
+ */
+
+import { Box, Text } from "ink";
+import type { ReactElement } from "react";
+import { TUI_MUTED } from "../theme.ts";
+
+/** Props for {@link LogStream}. */
+export type LogStreamProps = {
+  readonly lines: readonly string[];
+  readonly max?: number;
+  readonly title?: string;
+};
+
+/**
+ * Scrollable-ish log tail (shows last `max` lines).
+ *
+ * @param props - Lines + title
+ */
+export function LogStream(props: LogStreamProps): ReactElement {
+  const max = props.max ?? 6;
+  const tail = props.lines.slice(-max);
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={TUI_MUTED}
+      paddingX={1}
+      minHeight={4}
+      flexGrow={0}
+    >
+      <Text bold color={TUI_MUTED}>
+        {props.title ?? "Logs"}
+      </Text>
+      {tail.length === 0 ? (
+        <Text color={TUI_MUTED}>(quiet)</Text>
+      ) : (
+        tail.map((line, i) => (
+          <Text key={`${i}-${line.slice(0, 24)}`} wrap="truncate">
+            {line.replace(/\n$/, "")}
+          </Text>
+        ))
+      )}
+    </Box>
+  );
+}

package/src/cli/tui/components/PanelCard.tsx

@@ -0,0 +1,39 @@
+/**
+ * Content card — cyan title, single border for distinct sections only.
+ */
+
+import { Box, Text } from "ink";
+import type { ReactElement, ReactNode } from "react";
+import { TUI_ACCENT, TUI_MUTED } from "../theme.ts";
+
+/** Props for {@link PanelCard}. */
+export type PanelCardProps = {
+  readonly title: string;
+  readonly children: ReactNode;
+  readonly flexGrow?: number;
+  readonly accent?: boolean;
+};
+
+/**
+ * Single bordered panel section.
+ *
+ * @param props - Title + body
+ */
+export function PanelCard(props: PanelCardProps): ReactElement {
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={props.accent ? TUI_ACCENT : TUI_MUTED}
+      paddingX={1}
+      paddingY={0}
+      flexGrow={props.flexGrow}
+      minHeight={3}
+    >
+      <Text bold color={TUI_ACCENT}>
+        {props.title}
+      </Text>
+      <Box flexDirection="column">{props.children}</Box>
+    </Box>
+  );
+}

package/src/cli/tui/components/SelectRow.tsx

@@ -0,0 +1,37 @@
+/**
+ * Selectable list row with › marker + cyan focus.
+ */
+
+import { Text } from "ink";
+import type { ReactElement } from "react";
+import { TUI_ACCENT, TUI_MUTED } from "../theme.ts";
+
+/** Props for {@link SelectRow}. */
+export type SelectRowProps = {
+  readonly label: string;
+  readonly selected: boolean;
+  readonly enabled?: boolean;
+};
+
+/**
+ * One navigable action/list row.
+ *
+ * @param props - Label + selection
+ */
+export function SelectRow(props: SelectRowProps): ReactElement {
+  const enabled = props.enabled !== false;
+  if (!enabled) {
+    return (
+      <Text dimColor color={TUI_MUTED}>
+        {props.selected ? "› " : "  "}
+        {props.label}
+      </Text>
+    );
+  }
+  return (
+    <Text bold={props.selected} color={props.selected ? TUI_ACCENT : undefined}>
+      {props.selected ? "› " : "  "}
+      {props.label}
+    </Text>
+  );
+}