okengine 0.10.3 → 0.11.0

package/src/cli/tui/panels/Dashboard.tsx

@@ -0,0 +1,201 @@
+/**
+ * Landing panel — OKE wordmark, session, aligned services, quick actions.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState, type ReactElement } from "react";
+import type { FooterStatus } from "../components/StatusBar.tsx";
+import { StatusDot, statusWord } from "../components/StatusDot.tsx";
+import { Wordmark } from "../components/Wordmark.tsx";
+import { formatUptime, openUrl } from "../format.ts";
+import { pollPortSnapshot, type PortSnapshot } from "../state/ports.ts";
+import { TUI_ACCENT, TUI_MUTED, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link DashboardPanel}. */
+export type DashboardPanelProps = {
+  readonly cwd: string;
+  readonly active: boolean;
+  readonly onJumpPanel: (panelId: string) => void;
+  readonly onStatus: (status: FooterStatus) => void;
+};
+
+const ACTIONS = [
+  { id: "open", label: "[O]pen Console", key: "o" },
+  { id: "mcp", label: "[M]CP Docs", key: "m" },
+  { id: "dev", label: "[D]ev Panel", key: "d" },
+] as const;
+
+/**
+ * Dashboard panel — polls ports every 1.5s.
+ *
+ * @param props - cwd + focus/actions
+ */
+export function DashboardPanel(props: DashboardPanelProps): ReactElement {
+  const [snap, setSnap] = useState<PortSnapshot | null>(null);
+  const [startedAt, setStartedAt] = useState<number | null>(null);
+  const [now, setNow] = useState(Date.now());
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    const tick = async (): Promise<void> => {
+      const next = await pollPortSnapshot(props.cwd);
+      if (cancelled) return;
+      setSnap(next);
+      if (next.ownership === "managed") {
+        setStartedAt((prev) => prev ?? Date.now());
+      } else {
+        setStartedAt(null);
+      }
+      setNow(Date.now());
+    };
+    void tick();
+    const id = setInterval(() => void tick(), 1500);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [props.cwd]);
+
+  // Prefer lock startedAt when available via re-read
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const { readDevSessionLock } = await import("../../dev-session-lock.ts");
+      const lock = await readDevSessionLock(props.cwd);
+      if (!cancelled && lock) {
+        const t = Date.parse(lock.startedAt);
+        if (Number.isFinite(t)) setStartedAt(t);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [props.cwd, snap?.ownership]);
+
+  useInput(
+    (input, key) => {
+      if (!props.active) return;
+      if (key.upArrow) setSelected((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelected((i) => Math.min(ACTIONS.length - 1, i + 1));
+      const lower = input.toLowerCase();
+      if (lower === "o") void runAction("open");
+      else if (lower === "m") void runAction("mcp");
+      else if (lower === "d") void runAction("dev");
+      else if (key.return) {
+        const a = ACTIONS[selected];
+        if (a) void runAction(a.id);
+      }
+    },
+    { isActive: props.active },
+  );
+
+  const runAction = async (id: (typeof ACTIONS)[number]["id"]): Promise<void> => {
+    if (id === "dev") {
+      props.onJumpPanel("dev");
+      return;
+    }
+    const consoleSurf = snap?.surfaces.find((s) => s.id === "console");
+    const docsSurf = snap?.surfaces.find((s) => s.id === "docsMcp");
+    if (id === "open") {
+      const url = consoleSurf?.url ?? "http://127.0.0.1:6533";
+      props.onStatus({ kind: "running", label: `Opening ${url}…` });
+      await openUrl(url);
+      props.onStatus({ kind: "done", label: "Opened Console" });
+      return;
+    }
+    const url = docsSurf?.url ?? "http://127.0.0.1:6536";
+    props.onStatus({ kind: "running", label: `Opening ${url}…` });
+    await openUrl(url);
+    props.onStatus({ kind: "done", label: "Opened MCP Docs" });
+  };
+
+  const ownership = snap?.ownership ?? "stopped";
+  const ownershipLabel =
+    ownership === "managed"
+      ? "Managed"
+      : ownership === "external"
+        ? "Connected (external)"
+        : "Stopped";
+  const ownershipColor = ownership === "managed" || ownership === "external" ? TUI_OK : TUI_WARN;
+  const uptime = startedAt && ownership === "managed" ? formatUptime(now - startedAt) : null;
+
+  return (
+    <Box flexDirection="column" gap={1} flexGrow={1}>
+      <Box justifyContent="space-between" alignItems="flex-start">
+        <Wordmark version="0.10.3" />
+      </Box>
+
+      <Box flexDirection="column">
+        <Text bold color={TUI_ACCENT}>
+          Session
+        </Text>
+        <Box gap={1}>
+          <StatusDot
+            status={ownership === "managed" || ownership === "external" ? "ready" : "idle"}
+          />
+          <Text bold color={ownershipColor}>
+            {ownershipLabel}
+          </Text>
+          {uptime ? <Text color={TUI_MUTED}>· uptime {uptime}</Text> : null}
+        </Box>
+        {ownership === "external" ? (
+          <Text color={TUI_WARN}>Read-only — will not start a second stack</Text>
+        ) : null}
+        {ownership === "stopped" ? (
+          <Text color={TUI_MUTED}>No live oke dev — press [D] or open Dev panel</Text>
+        ) : null}
+      </Box>
+
+      <Box flexDirection="column" flexGrow={1}>
+        <Box>
+          <Box width={14}>
+            <Text bold color={TUI_ACCENT}>
+              Services
+            </Text>
+          </Box>
+          <Box width={8}>
+            <Text color={TUI_MUTED}>Port</Text>
+          </Box>
+          <Box width={10}>
+            <Text color={TUI_MUTED}>Status</Text>
+          </Box>
+          <Text color={TUI_MUTED}>URL</Text>
+        </Box>
+        <Text color={TUI_MUTED}>{"─".repeat(56)}</Text>
+        {(snap?.surfaces ?? []).map((s) => {
+          const sw = statusWord(s.status);
+          return (
+            <Box key={s.id}>
+              <Box width={14} gap={1}>
+                <StatusDot status={s.status} />
+                <Text>{s.label.padEnd(9)}</Text>
+              </Box>
+              <Box width={8}>
+                <Text color={TUI_ACCENT}>{`:${String(s.port).padEnd(5)}`}</Text>
+              </Box>
+              <Box width={10}>
+                <Text color={sw.color}>{sw.word}</Text>
+              </Box>
+              <Text color={TUI_MUTED}>{s.url}</Text>
+            </Box>
+          );
+        })}
+        {!snap ? <Text color={TUI_MUTED}>Probing ports…</Text> : null}
+      </Box>
+
+      <Box gap={2}>
+        {ACTIONS.map((a, i) => (
+          <Text
+            key={a.id}
+            bold={props.active && i === selected}
+            color={props.active && i === selected ? TUI_ACCENT : TUI_MUTED}
+          >
+            {props.active && i === selected ? "› " : "  "}
+            {a.label}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/panels/Database.tsx

@@ -0,0 +1,198 @@
+/**
+ * Database panel — 3-column action cards, no nested footer.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useState, type ReactElement } from "react";
+import { ConfirmDialog } from "../components/ConfirmDialog.tsx";
+import type { FooterStatus } from "../components/StatusBar.tsx";
+import { TUI_ACCENT, TUI_MUTED, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link DatabasePanel}. */
+export type DatabasePanelProps = {
+  readonly cwd: string;
+  readonly active: boolean;
+  readonly onLog: (line: string) => void;
+  readonly onStatus: (status: FooterStatus) => void;
+};
+
+type DbAction = "push" | "generate" | "migrate" | "seed" | "studio";
+
+type Card = {
+  readonly id: DbAction;
+  readonly key: string;
+  readonly title: string;
+  readonly blurb: string;
+  readonly confirm: boolean;
+};
+
+const CARDS: readonly Card[] = [
+  {
+    id: "push",
+    key: "P",
+    title: "Push",
+    blurb: "sync schema → live DB",
+    confirm: true,
+  },
+  {
+    id: "generate",
+    key: "G",
+    title: "Generate",
+    blurb: "write SQL under drizzle/",
+    confirm: false,
+  },
+  {
+    id: "migrate",
+    key: "M",
+    title: "Migrate",
+    blurb: "apply pending migrations",
+    confirm: true,
+  },
+  {
+    id: "seed",
+    key: "E",
+    title: "Seed",
+    blurb: "run defineSeed",
+    confirm: true,
+  },
+  {
+    id: "studio",
+    key: "T",
+    title: "Studio",
+    blurb: "drizzle-kit (browser)",
+    confirm: false,
+  },
+];
+
+/**
+ * Database actions as a selectable card grid.
+ *
+ * @param props - cwd + log sink
+ */
+export function DatabasePanel(props: DatabasePanelProps): ReactElement {
+  const [selected, setSelected] = useState(0);
+  const [pending, setPending] = useState<DbAction | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useInput(
+    (input, key) => {
+      if (!props.active || pending || busy) return;
+      if (key.leftArrow) setSelected((i) => Math.max(0, i - 1));
+      if (key.rightArrow) setSelected((i) => Math.min(CARDS.length - 1, i + 1));
+      if (key.upArrow) setSelected((i) => Math.max(0, i - 3));
+      if (key.downArrow) setSelected((i) => Math.min(CARDS.length - 1, i + 3));
+      const upper = input.toUpperCase();
+      const byKey = CARDS.findIndex((c) => c.key === upper);
+      if (byKey >= 0) {
+        setSelected(byKey);
+        const card = CARDS[byKey]!;
+        if (card.confirm) setPending(card.id);
+        else void run(card.id);
+        return;
+      }
+      if (key.return) {
+        const action = CARDS[selected];
+        if (!action) return;
+        if (action.confirm) setPending(action.id);
+        else void run(action.id);
+      }
+    },
+    { isActive: props.active && !pending && !busy },
+  );
+
+  const run = async (id: DbAction): Promise<void> => {
+    setBusy(true);
+    setPending(null);
+    props.onStatus({ kind: "running", label: `Running oke db ${id}…` });
+    props.onLog(`oke db ${id}\n`);
+    const prevCwd = process.cwd();
+    try {
+      process.chdir(props.cwd);
+      const { dbCli } = await import("../../db.ts");
+      const writes: string[] = [];
+      const origLog = console.log;
+      const origErr = console.error;
+      console.log = (...args: unknown[]) => {
+        writes.push(args.map(String).join(" ") + "\n");
+      };
+      console.error = (...args: unknown[]) => {
+        writes.push(args.map(String).join(" ") + "\n");
+      };
+      let code = 1;
+      try {
+        code = await dbCli([id, "--force"]);
+      } finally {
+        console.log = origLog;
+        console.error = origErr;
+      }
+      for (const w of writes) props.onLog(w);
+      props.onStatus({
+        kind: "done",
+        label: code === 0 ? `db ${id} ok` : `db ${id} exited ${code}`,
+      });
+    } catch (err) {
+      const m = err instanceof Error ? err.message : String(err);
+      props.onLog(`${m}\n`);
+      props.onStatus({ kind: "done", label: m });
+    } finally {
+      process.chdir(prevCwd);
+      setBusy(false);
+    }
+  };
+
+  if (pending) {
+    return (
+      <ConfirmDialog
+        message={`Run oke db ${pending}? This may change the live database.`}
+        onConfirm={() => void run(pending)}
+        onCancel={() => setPending(null)}
+      />
+    );
+  }
+
+  const row1 = CARDS.slice(0, 3);
+  const row2 = CARDS.slice(3);
+
+  return (
+    <Box flexDirection="column" gap={1} flexGrow={1}>
+      <Text bold color={TUI_ACCENT}>
+        Database
+      </Text>
+      <Text color={TUI_MUTED} dimColor>
+        Domain schema via drizzle-kit
+      </Text>
+      <Box gap={1}>
+        {row1.map((card, i) => (
+          <ActionCard key={card.id} card={card} selected={props.active && selected === i} />
+        ))}
+      </Box>
+      <Box gap={1}>
+        {row2.map((card, i) => (
+          <ActionCard key={card.id} card={card} selected={props.active && selected === i + 3} />
+        ))}
+      </Box>
+      <Text color={TUI_WARN}>! Push & Migrate modify the database — confirmation required</Text>
+    </Box>
+  );
+}
+
+/**
+ * One database action card.
+ */
+function ActionCard(props: { readonly card: Card; readonly selected: boolean }): ReactElement {
+  const { card, selected } = props;
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={selected ? TUI_ACCENT : TUI_MUTED}
+      width="32%"
+      paddingX={1}
+    >
+      <Text bold color={selected ? TUI_ACCENT : undefined}>
+        {selected ? "› " : "  "}[{card.key}] {card.title}
+      </Text>
+      <Text color={TUI_MUTED}>{card.blurb}</Text>
+    </Box>
+  );
+}

package/src/cli/tui/panels/Dev.tsx

@@ -0,0 +1,257 @@
+/**
+ * Dev panel — Not Running / Running states, inline shortcuts, live logs.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useEffect, useMemo, useState, type ReactElement } from "react";
+import { DevController } from "../../dev-controller.ts";
+import type { DevOwnership } from "../../dev-session-lock.ts";
+import type { FooterStatus } from "../components/StatusBar.tsx";
+import { StatusDot } from "../components/StatusDot.tsx";
+import { formatUptime } from "../format.ts";
+import { mapDevControlInput } from "../keys.ts";
+import { pollPortSnapshot, type PortSnapshot } from "../state/ports.ts";
+import { TUI_ACCENT, TUI_MUTED, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link DevPanel}. */
+export type DevPanelProps = {
+  readonly cwd: string;
+  readonly controller: DevController;
+  readonly onLog: (line: string) => void;
+  readonly active: boolean;
+  readonly logs: readonly string[];
+  readonly onStatus: (status: FooterStatus) => void;
+};
+
+type ActionId = "start" | "stop" | "restart" | "attach";
+
+/**
+ * Dev controls panel.
+ *
+ * @param props - Controller + cwd
+ */
+export function DevPanel(props: DevPanelProps): ReactElement {
+  const [ownership, setOwnership] = useState<DevOwnership>("stopped");
+  const [snap, setSnap] = useState<PortSnapshot | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [startedAt, setStartedAt] = useState<number | null>(null);
+  const [now, setNow] = useState(Date.now());
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    const off = props.controller.on((e) => {
+      if (e.type === "ownership") setOwnership(e.ownership);
+      if (e.type === "ready") {
+        setOwnership(e.ownership);
+        if (e.ownership === "managed") setStartedAt(Date.now());
+      }
+      if (e.type === "log") props.onLog(e.text);
+      if (e.type === "error") {
+        props.onLog(`${e.message}\n`);
+        props.onStatus({ kind: "done", label: e.message });
+      }
+      if (e.type === "exit") setStartedAt(null);
+    });
+    void props.controller.attach(props.cwd).then((r) => {
+      setOwnership(r.ownership);
+      if (r.ownership === "managed" && r.lock) {
+        setStartedAt(Date.parse(r.lock.startedAt) || Date.now());
+      }
+    });
+    return off;
+  }, [props.controller, props.cwd, props.onLog, props.onStatus]);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      void pollPortSnapshot(props.cwd).then((s) => {
+        setOwnership(s.ownership);
+        setSnap(s);
+      });
+      setNow(Date.now());
+    }, 1500);
+    return () => clearInterval(id);
+  }, [props.cwd]);
+
+  const actions = useMemo(() => {
+    const running = ownership === "managed";
+    const external = ownership === "external";
+    return [
+      {
+        id: "start" as const,
+        label: "[S]tart",
+        enabled: ownership === "stopped",
+      },
+      {
+        id: "restart" as const,
+        label: "[R]estart",
+        enabled: running,
+      },
+      {
+        id: "stop" as const,
+        label: "[X]top",
+        enabled: running,
+      },
+      {
+        id: "attach" as const,
+        label: "[A]ttach",
+        enabled: true,
+      },
+    ].filter((a) => !(external && (a.id === "start" || a.id === "restart" || a.id === "stop")));
+  }, [ownership]);
+
+  useInput(
+    (input, key) => {
+      if (!props.active || busy) return;
+      const ctrl = mapDevControlInput(input, key);
+      if (ctrl === "q") return; // Esc handled by App
+      if (ctrl === "r" || input === "r" || input === "R") {
+        void runAction("restart");
+        return;
+      }
+      if (input === "s" || input === "S") {
+        void runAction("start");
+        return;
+      }
+      if (input === "x" || input === "X") {
+        void runAction("stop");
+        return;
+      }
+      if (input === "a" || input === "A") {
+        void runAction("attach");
+        return;
+      }
+      if (key.upArrow) {
+        setSelected((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelected((i) => Math.min(actions.length - 1, i + 1));
+        return;
+      }
+      if (key.return) {
+        const action = actions[selected];
+        if (action) void runAction(action.id);
+      }
+    },
+    { isActive: props.active },
+  );
+
+  const runAction = async (id: ActionId): Promise<void> => {
+    if (busy) return;
+    setBusy(true);
+    const labels: Record<ActionId, string> = {
+      start: "Starting oke dev…",
+      stop: "Stopping…",
+      restart: "Restarting…",
+      attach: "Attaching…",
+    };
+    props.onStatus({ kind: "running", label: labels[id] });
+    try {
+      if (id === "start") {
+        const code = await props.controller.start({ cwd: props.cwd });
+        props.onStatus({
+          kind: "done",
+          label: code === 0 ? "Started" : "Start failed",
+        });
+        if (code === 0) setStartedAt(Date.now());
+      } else if (id === "stop") {
+        await props.controller.stop();
+        props.onStatus({ kind: "done", label: "Stopped" });
+        setStartedAt(null);
+      } else if (id === "restart") {
+        if (ownership !== "managed") {
+          props.onStatus({ kind: "done", label: "Nothing to restart" });
+        } else {
+          const code = await props.controller.restart({ cwd: props.cwd });
+          props.onStatus({
+            kind: "done",
+            label: code === 0 ? "Restarted" : "Restart failed",
+          });
+          if (code === 0) setStartedAt(Date.now());
+        }
+      } else if (id === "attach") {
+        const r = await props.controller.attach(props.cwd);
+        setOwnership(r.ownership);
+        props.onStatus({ kind: "done", label: `Ownership: ${r.ownership}` });
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const running = ownership === "managed" || ownership === "external";
+  const uptime = startedAt && ownership === "managed" ? formatUptime(now - startedAt) : null;
+  const app = snap?.surfaces.find((s) => s.id === "app");
+  const consoleSurf = snap?.surfaces.find((s) => s.id === "console");
+  const logTail = props.logs.slice(-Math.max(6, 12));
+
+  return (
+    <Box flexDirection="column" gap={1} flexGrow={1}>
+      <Box flexDirection="column">
+        <Text bold color={TUI_ACCENT}>
+          Dev Server
+        </Text>
+        {!running ? (
+          <Box flexDirection="column">
+            <Box gap={1}>
+              <Text color={TUI_WARN} bold>
+                ●
+              </Text>
+              <Text bold color={TUI_WARN}>
+                Not Running
+              </Text>
+            </Box>
+            <Text color={TUI_MUTED}>Press [S] to start</Text>
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            <Box gap={1}>
+              <StatusDot status="ready" />
+              <Text bold color={TUI_OK}>
+                {ownership === "external" ? "Running (external)" : "Running"}
+              </Text>
+              {uptime ? <Text color={TUI_MUTED}>· uptime {uptime}</Text> : null}
+            </Box>
+            <Box gap={2}>
+              <Text color={TUI_MUTED}>Ports</Text>
+              <Text color={TUI_ACCENT}>App :{app?.port ?? "—"}</Text>
+              <Text color={TUI_ACCENT}>Console :{consoleSurf?.port ?? "—"}</Text>
+            </Box>
+            {ownership === "external" ? (
+              <Text color={TUI_WARN}>Read-only — will not start a second stack</Text>
+            ) : null}
+          </Box>
+        )}
+      </Box>
+
+      <Box gap={2}>
+        {actions.map((a, i) => (
+          <Text
+            key={a.id}
+            bold={props.active && i === selected}
+            color={!a.enabled ? TUI_MUTED : props.active && i === selected ? TUI_ACCENT : undefined}
+            dimColor={!a.enabled}
+          >
+            {props.active && i === selected ? "› " : "  "}
+            {a.label}
+          </Text>
+        ))}
+      </Box>
+
+      <Box flexDirection="column" flexGrow={1} minHeight={6}>
+        <Text bold color={TUI_ACCENT}>
+          Live Logs
+        </Text>
+        {logTail.length === 0 ? (
+          <Text color={TUI_MUTED}>Start the dev server to see logs</Text>
+        ) : (
+          logTail.map((line, i) => (
+            <Text key={`${i}-${line.slice(0, 24)}`} wrap="truncate">
+              {line.replace(/\n$/, "")}
+            </Text>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}