okengine 0.10.2 → 0.11.0

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

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

@@ -0,0 +1,357 @@
+/**
+ * Docker panel — live stack by project name; clean tears down whole projects.
+ *
+ * Never shells into interactive `oke docker clean` (clack) while Ink is mounted —
+ * that fights stdout and leaves ghost frames.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState, type ReactElement } from "react";
+import type { DevStatus } from "../../../term.ts";
+import { composeRowToStatus } from "../../../docker/compose-health.ts";
+import {
+  composeProjectName,
+  downStack,
+  listOkeComposeProjects,
+  listStackContainers,
+  type OkeStack,
+} from "../../../docker/cleanup.ts";
+import { ConfirmDialog } from "../components/ConfirmDialog.tsx";
+import type { FooterStatus } from "../components/StatusBar.tsx";
+import { StatusDot, statusWord } from "../components/StatusDot.tsx";
+import { TUI_ACCENT, TUI_MUTED, TUI_OK, TUI_WARN } from "../theme.ts";
+
+/** Props for {@link DockerPanel}. */
+export type DockerPanelProps = {
+  readonly cwd: string;
+  readonly active: boolean;
+  readonly onLog: (line: string) => void;
+  readonly onStatus: (status: FooterStatus) => void;
+};
+
+type DockerAction = "derive" | "clean" | "restart";
+
+type ServiceRow = {
+  readonly name: string;
+  readonly status: DevStatus;
+  readonly detail: string;
+};
+
+type Mode = "main" | "pickClean" | "confirmClean";
+
+/**
+ * Compose-oriented panel.
+ *
+ * @param props - cwd + log
+ */
+export function DockerPanel(props: DockerPanelProps): ReactElement {
+  const project = composeProjectName(props.cwd);
+  const [rows, setRows] = useState<readonly ServiceRow[]>([]);
+  const [stacks, setStacks] = useState<readonly OkeStack[]>([]);
+  const [selected, setSelected] = useState(0);
+  const [mode, setMode] = useState<Mode>("main");
+  const [cleanFocus, setCleanFocus] = useState(0);
+  const [cleanPicked, setCleanPicked] = useState<ReadonlySet<string>>(() => new Set());
+  const [busy, setBusy] = useState(false);
+
+  const actions: readonly { id: DockerAction; label: string }[] = [
+    { id: "derive", label: "[D]erive" },
+    { id: "clean", label: "[C]lean" },
+    { id: "restart", label: "[R]estart stack" },
+  ];
+
+  const refresh = async (): Promise<void> => {
+    try {
+      const containers = await listStackContainers(project);
+      setRows(
+        containers.map((c) => ({
+          name: c.service || c.name,
+          status: composeRowToStatus({
+            Service: c.service,
+            State: c.state,
+            Status: c.state,
+          }),
+          detail: c.state || c.name,
+        })),
+      );
+      const all = await listOkeComposeProjects();
+      setStacks(all);
+    } catch (err) {
+      props.onLog(`${err instanceof Error ? err.message : String(err)}\n`);
+    }
+  };
+
+  useEffect(() => {
+    void refresh();
+    const id = setInterval(() => void refresh(), 4000);
+    return () => clearInterval(id);
+  }, [props.cwd]);
+
+  useInput(
+    (input, key) => {
+      if (!props.active || busy) return;
+
+      if (mode === "pickClean") {
+        if (key.escape) {
+          setMode("main");
+          return;
+        }
+        if (key.upArrow) setCleanFocus((i) => Math.max(0, i - 1));
+        if (key.downArrow) setCleanFocus((i) => Math.min(Math.max(0, stacks.length - 1), i + 1));
+        if (input === " ") {
+          const stack = stacks[cleanFocus];
+          if (!stack) return;
+          setCleanPicked((prev) => {
+            const next = new Set(prev);
+            if (next.has(stack.project)) next.delete(stack.project);
+            else next.add(stack.project);
+            return next;
+          });
+          return;
+        }
+        if (key.return) {
+          if (cleanPicked.size === 0) return;
+          setMode("confirmClean");
+        }
+        return;
+      }
+
+      if (mode !== "main") 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 === "d") void run("derive");
+      else if (lower === "c") void beginClean();
+      else if (lower === "r") void run("restart");
+      else if (key.return) {
+        const a = actions[selected];
+        if (!a) return;
+        if (a.id === "clean") void beginClean();
+        else void run(a.id);
+      }
+    },
+    { isActive: props.active && mode !== "confirmClean" },
+  );
+
+  const beginClean = async (): Promise<void> => {
+    try {
+      const all = await listOkeComposeProjects();
+      setStacks(all);
+      if (all.length === 0) {
+        props.onStatus({ kind: "done", label: "No oke-dev-* stacks" });
+        return;
+      }
+      const initial = new Set<string>();
+      if (all.some((s) => s.project === project)) initial.add(project);
+      else if (all[0]) initial.add(all[0].project);
+      setCleanPicked(initial);
+      setCleanFocus(
+        Math.max(
+          0,
+          all.findIndex((s) => s.project === project),
+        ),
+      );
+      setMode("pickClean");
+    } catch (err) {
+      const m = err instanceof Error ? err.message : String(err);
+      props.onLog(`${m}\n`);
+      props.onStatus({ kind: "done", label: m });
+    }
+  };
+
+  const runClean = async (): Promise<void> => {
+    setBusy(true);
+    setMode("main");
+    const targets = [...cleanPicked].sort();
+    props.onStatus({
+      kind: "running",
+      label: `Removing ${targets.length} stack(s)…`,
+    });
+    try {
+      for (const p of targets) {
+        props.onLog(`oke docker clean: down -v ${p}\n`);
+        await downStack(p);
+      }
+      props.onStatus({
+        kind: "done",
+        label: `Removed ${targets.length} stack(s)`,
+      });
+      await refresh();
+    } catch (err) {
+      const m = err instanceof Error ? err.message : String(err);
+      props.onLog(`${m}\n`);
+      props.onStatus({ kind: "done", label: m });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const run = async (id: Exclude<DockerAction, "clean">): Promise<void> => {
+    setBusy(true);
+    const labels = {
+      derive: "Running oke docker…",
+      restart: `Restarting ${project}…`,
+    } as const;
+    props.onStatus({ kind: "running", label: labels[id] });
+    try {
+      if (id === "derive") {
+        const { dockerCli } = await import("../../docker.ts");
+        const prev = process.cwd();
+        process.chdir(props.cwd);
+        let code = 1;
+        try {
+          code = await dockerCli([]);
+        } finally {
+          process.chdir(prev);
+        }
+        props.onLog(`oke docker → ${code}\n`);
+        props.onStatus({
+          kind: "done",
+          label: code === 0 ? "Derive ok" : `Derive exited ${code}`,
+        });
+      } else {
+        const proc = Bun.spawn(["docker", "compose", "-p", project, "restart"], {
+          stdout: "pipe",
+          stderr: "pipe",
+        });
+        const [stdout, stderr, code] = await Promise.all([
+          new Response(proc.stdout).text(),
+          new Response(proc.stderr).text(),
+          proc.exited,
+        ]);
+        if (stdout) props.onLog(stdout);
+        if (stderr) props.onLog(stderr);
+        props.onStatus({
+          kind: "done",
+          label: code === 0 ? "Stack restarted" : `Restart exited ${code}`,
+        });
+      }
+      await refresh();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (mode === "confirmClean") {
+    const list = [...cleanPicked].sort().join(", ");
+    return (
+      <ConfirmDialog
+        message={`Remove stack(s) — containers, networks, volumes?\n${list}`}
+        onConfirm={() => void runClean()}
+        onCancel={() => setMode("pickClean")}
+      />
+    );
+  }
+
+  if (mode === "pickClean") {
+    return (
+      <Box flexDirection="column" gap={1} flexGrow={1}>
+        <Text bold color={TUI_ACCENT}>
+          Clean stacks
+        </Text>
+        <Text color={TUI_MUTED} dimColor>
+          Space toggle · Enter confirm · Esc cancel — whole project, not per-service
+        </Text>
+        {stacks.length === 0 ? (
+          <Text color={TUI_WARN}>No oke-dev-* stacks on this machine</Text>
+        ) : (
+          stacks.map((s, i) => {
+            const on = i === cleanFocus;
+            const picked = cleanPicked.has(s.project);
+            const n = s.containers.length;
+            const current = s.project === project;
+            return (
+              <Text key={s.project} bold={on} color={on ? TUI_ACCENT : undefined}>
+                {on ? "› " : "  "}
+                {picked ? "●" : "○"} {s.project}
+                <Text color={TUI_MUTED}>
+                  {`  ${n} container${n === 1 ? "" : "s"}`}
+                  {current ? "  · this project" : ""}
+                </Text>
+              </Text>
+            );
+          })
+        )}
+      </Box>
+    );
+  }
+
+  const online = rows.filter((r) => r.status === "ready").length;
+  const total = rows.length;
+  const allOnline = total > 0 && online === total;
+  const stackKnown = stacks.some((s) => s.project === project);
+
+  return (
+    <Box flexDirection="column" gap={1} flexGrow={1}>
+      <Text bold color={TUI_ACCENT}>
+        Docker Compose
+      </Text>
+      <Box gap={1}>
+        <StatusDot status={allOnline ? "ready" : total === 0 ? "idle" : "pending"} />
+        <Text bold color={allOnline ? TUI_OK : TUI_WARN}>
+          {total === 0
+            ? stackKnown
+              ? `0 services · ${project}`
+              : `No stack · ${project}`
+            : `${online}/${total} services online`}
+        </Text>
+        {total > 0 ? <Text color={TUI_MUTED}>· {project}</Text> : null}
+      </Box>
+
+      <Box>
+        <Box width={22}>
+          <Text bold color={TUI_MUTED}>
+            Service
+          </Text>
+        </Box>
+        <Box width={10}>
+          <Text bold color={TUI_MUTED}>
+            Status
+          </Text>
+        </Box>
+        <Text bold color={TUI_MUTED}>
+          Detail
+        </Text>
+      </Box>
+      <Text color={TUI_MUTED}>{"─".repeat(48)}</Text>
+
+      {rows.length === 0 ? (
+        <Text color={TUI_MUTED}>
+          No containers for {project}. Start `oke dev` or run [D]erive + compose up.
+        </Text>
+      ) : (
+        rows.map((r) => {
+          const sw = statusWord(r.status);
+          return (
+            <Box key={r.name}>
+              <Box width={22} gap={1}>
+                <StatusDot status={r.status} />
+                <Text>{r.name}</Text>
+              </Box>
+              <Box width={10}>
+                <Text color={sw.color}>{sw.word}</Text>
+              </Box>
+              <Text color={TUI_MUTED}>{r.detail}</Text>
+            </Box>
+          );
+        })
+      )}
+
+      <Box gap={2} marginTop={1}>
+        {actions.map((a, i) => (
+          <Text
+            key={a.id}
+            bold={props.active && i === selected}
+            color={
+              props.active && i === selected ? TUI_ACCENT : a.id === "clean" ? TUI_WARN : undefined
+            }
+          >
+            {props.active && i === selected ? "› " : "  "}
+            {a.label}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}

package/src/cli/tui/panels/Navigator.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import type { Manifest } from "../../../manifest/types.ts";
+import { manifestToNavTree } from "./Navigator.tsx";
+
+describe("manifestToNavTree", () => {
+  test("builds element sections from a Manifest", () => {
+    const manifest = {
+      oke: "1.0",
+      app: "demo",
+      flows: { hello: {} },
+      signals: { ping: {} },
+      stores: {},
+      ai: { models: { m1: {} }, prompts: {}, agents: {} },
+    } as unknown as Manifest;
+    const tree = manifestToNavTree(manifest);
+    expect(tree.some((n) => n.label.includes("app: demo"))).toBe(true);
+    const flows = tree.find((n) => n.id === "flows");
+    expect(flows?.children?.some((c) => c.label === "hello")).toBe(true);
+    const ai = tree.find((n) => n.id === "ai");
+    expect(ai?.children?.some((c) => c.id === "ai.models")).toBe(true);
+  });
+});