okengine 0.10.3 → 0.11.0

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

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

@@ -0,0 +1,213 @@
+/**
+ * Project Navigator — Manifest tree with expand/collapse.
+ */
+
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState, type ReactElement } from "react";
+import type { Manifest } from "../../../manifest/types.ts";
+import { TUI_ACCENT, TUI_ERR, TUI_MUTED } from "../theme.ts";
+
+/** Props for {@link NavigatorPanel}. */
+export type NavigatorPanelProps = {
+  readonly cwd: string;
+  readonly active: boolean;
+};
+
+type NavNode = {
+  readonly id: string;
+  readonly label: string;
+  readonly kind?: "category" | "item" | "meta";
+  readonly count?: number;
+  readonly children?: readonly NavNode[];
+};
+
+/**
+ * Build a tree from a Manifest.
+ *
+ * @param manifest - Parsed/extracted manifest
+ */
+export function manifestToNavTree(manifest: Manifest): readonly NavNode[] {
+  const section = (title: string, record: Record<string, unknown> | undefined): NavNode => {
+    const keys = record ? Object.keys(record).sort() : [];
+    return {
+      id: title,
+      label: title,
+      kind: "category",
+      count: keys.length,
+      children: keys.map((name) => ({
+        id: `${title}:${name}`,
+        label: name,
+        kind: "item" as const,
+      })),
+    };
+  };
+
+  const ai = manifest.ai;
+  const aiChildren: NavNode[] = [];
+  if (ai?.models) {
+    const keys = Object.keys(ai.models);
+    aiChildren.push({
+      id: "ai.models",
+      label: "models",
+      kind: "category",
+      count: keys.length,
+      children: keys.map((n) => ({ id: `ai.models:${n}`, label: n, kind: "item" })),
+    });
+  }
+  if (ai?.prompts) {
+    const keys = Object.keys(ai.prompts);
+    aiChildren.push({
+      id: "ai.prompts",
+      label: "prompts",
+      kind: "category",
+      count: keys.length,
+      children: keys.map((n) => ({ id: `ai.prompts:${n}`, label: n, kind: "item" })),
+    });
+  }
+  if (ai?.agents) {
+    const keys = Object.keys(ai.agents);
+    aiChildren.push({
+      id: "ai.agents",
+      label: "agents",
+      kind: "category",
+      count: keys.length,
+      children: keys.map((n) => ({ id: `ai.agents:${n}`, label: n, kind: "item" })),
+    });
+  }
+
+  return [
+    { id: "app", label: `app: ${manifest.app}`, kind: "meta" },
+    section("flows", manifest.flows as Record<string, unknown> | undefined),
+    section("signals", manifest.signals as Record<string, unknown> | undefined),
+    section("stores", manifest.stores as Record<string, unknown> | undefined),
+    section("clocks", manifest.clocks as Record<string, unknown> | undefined),
+    section("gates", manifest.gates as Record<string, unknown> | undefined),
+    section("vault", manifest.vault as Record<string, unknown> | undefined),
+    section("channels", manifest.channels as Record<string, unknown> | undefined),
+    {
+      id: "ai",
+      label: "ai",
+      kind: "category",
+      count: aiChildren.length,
+      children: aiChildren,
+    },
+  ];
+}
+
+/**
+ * Flatten tree for arrow-key navigation.
+ *
+ * @param nodes - Roots
+ * @param expanded - Expanded ids
+ */
+function flatten(
+  nodes: readonly NavNode[],
+  expanded: ReadonlySet<string>,
+  depth = 0,
+): readonly { node: NavNode; depth: number }[] {
+  const out: { node: NavNode; depth: number }[] = [];
+  for (const node of nodes) {
+    out.push({ node, depth });
+    if (node.children && expanded.has(node.id)) {
+      out.push(...flatten(node.children, expanded, depth + 1));
+    }
+  }
+  return out;
+}
+
+/**
+ * Manifest browser.
+ *
+ * @param props - cwd
+ */
+export function NavigatorPanel(props: NavigatorPanelProps): ReactElement {
+  const [tree, setTree] = useState<readonly NavNode[]>([]);
+  const [expanded, setExpanded] = useState<Set<string>>(
+    () => new Set(["flows", "signals", "stores"]),
+  );
+  const [selected, setSelected] = useState(0);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { extractManifest } = await import("../../../compiler/extract.ts");
+        const manifest = await extractManifest({ rootDir: props.cwd });
+        if (!cancelled) {
+          setTree(manifestToNavTree(manifest));
+          setError("");
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [props.cwd]);
+
+  const rows = flatten(tree, expanded);
+
+  const toggle = (expand: boolean | "toggle"): void => {
+    const row = rows[selected];
+    if (!row?.node.children?.length) return;
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (expand === true) next.add(row.node.id);
+      else if (expand === false) next.delete(row.node.id);
+      else if (next.has(row.node.id)) next.delete(row.node.id);
+      else next.add(row.node.id);
+      return next;
+    });
+  };
+
+  useInput(
+    (_input, key) => {
+      if (!props.active) return;
+      if (key.upArrow) setSelected((i) => Math.max(0, i - 1));
+      if (key.downArrow) setSelected((i) => Math.min(Math.max(0, rows.length - 1), i + 1));
+      if (key.rightArrow) toggle(true);
+      if (key.leftArrow) toggle(false);
+      if (key.return) toggle("toggle");
+    },
+    { isActive: props.active },
+  );
+
+  return (
+    <Box flexDirection="column" gap={0} flexGrow={1}>
+      <Text bold color={TUI_ACCENT}>
+        Project Navigator
+      </Text>
+      <Text color={TUI_MUTED} dimColor>
+        Manifest tree · ↑↓ · → expand · ← collapse · Enter toggle
+      </Text>
+      {error ? <Text color={TUI_ERR}>{error}</Text> : null}
+      {rows.map((row, i) => {
+        const hasKids = Boolean(row.node.children?.length);
+        const open = expanded.has(row.node.id);
+        const branch = hasKids ? (open ? "▾ " : "▸ ") : "  ";
+        const on = props.active && i === selected;
+        const isCategory = row.node.kind === "category";
+        return (
+          <Text
+            key={row.node.id}
+            bold={on || isCategory}
+            color={on ? TUI_ACCENT : isCategory ? TUI_ACCENT : undefined}
+          >
+            {"  ".repeat(row.depth)}
+            {on ? "› " : "  "}
+            {branch}
+            {row.node.label}
+            {typeof row.node.count === "number" ? (
+              <Text color={TUI_MUTED}>{` (${row.node.count})`}</Text>
+            ) : null}
+          </Text>
+        );
+      })}
+      {rows.length === 0 && !error ? (
+        <Text color={TUI_MUTED}>Loading Manifest… extract from src/ or oke.manifest.json</Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/cli/tui/slash-catalog.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import { commonPrefix, filterSlashActions, parseSlashArgv, slashCatalog } from "./slash-catalog.ts";
+
+describe("slashCatalog", () => {
+  test("includes panel jumps and core cli commands", () => {
+    const all = slashCatalog();
+    expect(all.some((a) => a.id === "panel dashboard")).toBe(true);
+    expect(all.some((a) => a.id === "dev")).toBe(true);
+    expect(all.some((a) => a.id === "db push")).toBe(true);
+    expect(all.some((a) => a.id === "db studio")).toBe(true);
+    expect(all.some((a) => a.id === "doctor")).toBe(true);
+  });
+
+  test("filterSlashActions prefixes db", () => {
+    const hits = filterSlashActions("db", 20);
+    expect(hits.length).toBeGreaterThan(0);
+    expect(hits.every((h) => h.id.includes("db") || h.summary.toLowerCase().includes("db"))).toBe(
+      true,
+    );
+    expect(hits[0]?.id.startsWith("db")).toBe(true);
+  });
+
+  test("filterSlashActions empty returns top slice", () => {
+    expect(filterSlashActions("", 5)).toHaveLength(5);
+  });
+
+  test("commonPrefix and parseSlashArgv", () => {
+    expect(commonPrefix(["db push", "db studio", "db seed"])).toBe("db ");
+    expect(parseSlashArgv("  db   push  ")).toEqual(["db", "push"]);
+  });
+});