okengine 0.10.2 → 0.11.0

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

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

@@ -0,0 +1,172 @@
+/**
+ * `/` command palette — autofill over the full `oke` CLI + panel jumps.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useMemo, useState, type ReactElement } from "react";
+import {
+  commonPrefix,
+  filterSlashActions,
+  parseSlashArgv,
+  type SlashAction,
+} from "../slash-catalog.ts";
+import { TUI_BRAND, TUI_HINT, TUI_MUTED, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link SlashPalette}. */
+export type SlashPaletteProps = {
+  readonly cwd: string;
+  readonly onClose: () => void;
+  readonly onJumpPanel: (panelId: string) => void;
+  readonly onRunCli: (argv: readonly string[]) => void | Promise<void>;
+  readonly busy?: boolean;
+};
+
+/**
+ * Slash palette overlay — type to filter, Tab autofills, Enter runs.
+ *
+ * @param props - Callbacks
+ */
+export function SlashPalette(props: SlashPaletteProps): ReactElement {
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(0);
+  const [status, setStatus] = useState("");
+
+  const matches = useMemo(() => filterSlashActions(query, 14), [query]);
+  const sel = Math.min(selected, Math.max(0, matches.length - 1));
+  const active = matches[sel] ?? null;
+
+  useInput(
+    (input, key) => {
+      if (props.busy) return;
+
+      if (key.escape) {
+        props.onClose();
+        return;
+      }
+
+      if (key.upArrow) {
+        setSelected((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelected((i) => Math.min(Math.max(0, matches.length - 1), i + 1));
+        return;
+      }
+
+      if (key.tab) {
+        if (active) {
+          const ids = matches.map((m) => m.id);
+          const prefix = commonPrefix(ids);
+          const next =
+            prefix.length > query.length && ids.every((id) => id.startsWith(prefix))
+              ? prefix
+              : active.id;
+          setQuery(next);
+          setSelected(0);
+          setStatus(`autofill → /${next}`);
+        }
+        return;
+      }
+
+      if (key.return) {
+        void submit(active, query);
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        setQuery((q) => q.slice(0, -1));
+        setSelected(0);
+        setStatus("");
+        return;
+      }
+
+      if (!input || key.ctrl || key.meta) return;
+      // Ignore a second leading `/`; otherwise append printable chars.
+      if (input === "/" && query.length === 0) return;
+      setQuery((q) => q + input);
+      setSelected(0);
+      setStatus("");
+    },
+    { isActive: true },
+  );
+
+  const submit = async (action: SlashAction | null, raw: string): Promise<void> => {
+    if (action?.kind === "panel" && action.panel) {
+      props.onJumpPanel(action.panel);
+      props.onClose();
+      return;
+    }
+
+    if (action?.kind === "cli" && action.argv) {
+      const typed = parseSlashArgv(raw);
+      const base = action.argv;
+      // Append trailing free tokens the user typed beyond the suggestion.
+      let argv: readonly string[] = base;
+      if (typed.length > base.length && typed.slice(0, base.length).join(" ") === base.join(" ")) {
+        argv = typed;
+      }
+      setStatus(`running oke ${argv.join(" ")}…`);
+      await props.onRunCli(argv);
+      props.onClose();
+      return;
+    }
+
+    const argv = parseSlashArgv(raw);
+    if (argv.length === 0) {
+      setStatus("type a command · Tab to autofill");
+      return;
+    }
+    setStatus(`running oke ${argv.join(" ")}…`);
+    await props.onRunCli(argv);
+    props.onClose();
+  };
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={TUI_BRAND}
+      paddingX={1}
+      width="100%"
+      flexGrow={1}
+    >
+      <Box>
+        <Text bold color={TUI_BRAND}>
+          /
+        </Text>
+        <Text bold>{query}</Text>
+        <Text color={TUI_BRAND}>█</Text>
+        <Text color={TUI_MUTED}> Tab autofill · ↑↓ · Enter run · Esc</Text>
+      </Box>
+
+      <Box flexDirection="column" marginTop={1} flexGrow={1}>
+        {matches.length === 0 ? (
+          <Text color={TUI_WARN}>No matches — Enter runs free-form `oke …`</Text>
+        ) : (
+          matches.map((m, i) => {
+            const on = i === sel;
+            return (
+              <Box key={m.id} gap={1}>
+                <Text bold={on} color={on ? TUI_BRAND : TUI_MUTED}>
+                  {on ? "›" : " "}
+                </Text>
+                <Text bold={on} color={on ? TUI_BRAND : undefined}>
+                  /{m.label}
+                </Text>
+                <Text color={m.kind === "panel" ? TUI_OK : TUI_MUTED}>
+                  {m.kind === "panel" ? "panel" : "cli"}
+                </Text>
+                <Text color={TUI_MUTED} wrap="truncate">
+                  {m.summary}
+                </Text>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+
+      {status ? <Text color={TUI_HINT}>{status}</Text> : null}
+      {props.busy ? <Text color={TUI_WARN}>Running…</Text> : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Lightweight terminal spinner (no extra deps).
+ */
+
+import { Text } from "ink";
+import { useEffect, useState, type ReactElement } from "react";
+import { TUI_WARN } from "../theme.ts";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+
+/** Props for {@link Spinner}. */
+export type SpinnerProps = {
+  readonly label?: string;
+};
+
+/**
+ * Animated spinner + optional label.
+ *
+ * @param props - Label
+ */
+export function Spinner(props: SpinnerProps): ReactElement {
+  const [i, setI] = useState(0);
+  useEffect(() => {
+    const id = setInterval(() => setI((n) => (n + 1) % FRAMES.length), 80);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <Text color={TUI_WARN}>
+      {FRAMES[i]} {props.label ?? "Working…"}
+    </Text>
+  );
+}

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

@@ -0,0 +1,51 @@
+/**
+ * Single global footer — shortcuts + transient action status (no own border;
+ * the app chrome already frames the shell).
+ */
+
+import { Box, Text } from "ink";
+import type { ReactElement } from "react";
+import { Spinner } from "./Spinner.tsx";
+import { TUI_HINT, TUI_MUTED, TUI_OK } from "../theme.ts";
+
+/** Footer mode. */
+export type FooterStatus =
+  | { readonly kind: "idle" }
+  | { readonly kind: "running"; readonly label: string }
+  | { readonly kind: "done"; readonly label?: string };
+
+/** Props for {@link StatusBar}. */
+export type StatusBarProps = {
+  readonly status?: FooterStatus;
+  readonly hints?: string;
+};
+
+/**
+ * Shortcut strip + optional running/done feedback.
+ *
+ * @param props - Status + hints
+ */
+export function StatusBar(props: StatusBarProps): ReactElement {
+  const hints =
+    props.hints ?? "/ command · Tab panels · ↑↓ navigate · Enter action · 1-5 jump · Esc";
+  const status = props.status ?? { kind: "idle" as const };
+
+  return (
+    <Box paddingX={1} paddingY={0} marginTop={0} justifyContent="space-between">
+      <Box>
+        {status.kind === "running" ? (
+          <Spinner label={status.label} />
+        ) : status.kind === "done" ? (
+          <Text color={TUI_OK}>✓ {status.label ?? "Done"}</Text>
+        ) : (
+          <Text color={TUI_HINT}>{hints}</Text>
+        )}
+      </Box>
+      {status.kind !== "idle" ? (
+        <Text color={TUI_MUTED} dimColor>
+          {hints}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Ink readiness glyph for {@link DevStatus}.
+ */
+
+import { Text } from "ink";
+import type { ReactElement } from "react";
+import type { DevStatus } from "../../../term.ts";
+import { TUI_ERR, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link StatusDot}. */
+export type StatusDotProps = {
+  readonly status: DevStatus;
+};
+
+/**
+ * ● online/pending/error · ○ offline (yellow/red, not gray).
+ *
+ * @param props - Status
+ */
+export function StatusDot(props: StatusDotProps): ReactElement {
+  if (props.status === "idle") {
+    return <Text color={TUI_WARN}>○</Text>;
+  }
+  const color = props.status === "ready" ? TUI_OK : props.status === "pending" ? TUI_WARN : TUI_ERR;
+  return <Text color={color}>●</Text>;
+}
+
+/** Fixed-width status word. */
+export function statusWord(status: DevStatus): {
+  readonly word: string;
+  readonly color: typeof TUI_OK | typeof TUI_WARN | typeof TUI_ERR;
+} {
+  if (status === "ready") return { word: "online ", color: TUI_OK };
+  if (status === "pending") return { word: "start  ", color: TUI_WARN };
+  if (status === "error") return { word: "error  ", color: TUI_ERR };
+  return { word: "offline", color: TUI_WARN };
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Top-level panel tabs — green active chip, no enclosing border.
+ */
+
+import { Box, Text } from "ink";
+import type { ReactElement } from "react";
+import { TUI_BRAND, TUI_MUTED } from "../theme.ts";
+
+/** One tab descriptor. */
+export type TabItem = {
+  readonly id: string;
+  readonly label: string;
+};
+
+/** Props for {@link TabBar}. */
+export type TabBarProps = {
+  readonly tabs: readonly TabItem[];
+  readonly activeIndex: number;
+  /** When true, tab strip owns focus (reserved for future emphasis). */
+  readonly focused?: boolean;
+};
+
+/**
+ * Horizontal tab bar.
+ *
+ * @param props - Tabs + selection
+ */
+export function TabBar(props: TabBarProps): ReactElement {
+  return (
+    <Box paddingX={1} gap={0}>
+      {props.tabs.map((tab, i) => {
+        const active = i === props.activeIndex;
+        const label = `  ${i + 1} ${tab.label}  `;
+        if (active) {
+          return (
+            <Text key={tab.id} backgroundColor={TUI_BRAND} color="black" bold>
+              {label}
+            </Text>
+          );
+        }
+        return (
+          <Text key={tab.id} color={TUI_MUTED}>
+            {label}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}