okengine 0.10.2 → 0.11.0

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

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

@@ -0,0 +1,184 @@
+/**
+ * Flattened slash-command catalogue — TUI jumps + full `oke` CLI surface.
+ */
+
+import { OKE_COMMANDS, type CliCommand } from "../registry.ts";
+
+/** Kind of slash action. */
+export type SlashKind = "panel" | "cli";
+
+/** One autofill / runnable slash entry. */
+export type SlashAction = {
+  /** Canonical command after `/` (e.g. `db push`, `dev`, `panel dashboard`). */
+  readonly id: string;
+  /** Display label (usually same as id). */
+  readonly label: string;
+  readonly summary: string;
+  readonly kind: SlashKind;
+  /** Args after `oke` for CLI actions. */
+  readonly argv?: readonly string[];
+  /** Panel id for TUI jumps. */
+  readonly panel?: string;
+};
+
+const PANEL_JUMPS: readonly SlashAction[] = [
+  {
+    id: "panel dashboard",
+    label: "panel dashboard",
+    summary: "Jump to Dashboard",
+    kind: "panel",
+    panel: "dashboard",
+  },
+  {
+    id: "panel dev",
+    label: "panel dev",
+    summary: "Jump to Dev",
+    kind: "panel",
+    panel: "dev",
+  },
+  {
+    id: "panel database",
+    label: "panel database",
+    summary: "Jump to Database",
+    kind: "panel",
+    panel: "database",
+  },
+  {
+    id: "panel docker",
+    label: "panel docker",
+    summary: "Jump to Docker",
+    kind: "panel",
+    panel: "docker",
+  },
+  {
+    id: "panel navigator",
+    label: "panel navigator",
+    summary: "Jump to Navigator",
+    kind: "panel",
+    panel: "navigator",
+  },
+];
+
+/**
+ * Expand a registry command into slash actions (leaf + each subcommand).
+ *
+ * @param cmd - Registry command
+ */
+function expandCommand(cmd: CliCommand): readonly SlashAction[] {
+  const out: SlashAction[] = [];
+  if (cmd.leaf || !cmd.subcommands?.length) {
+    out.push({
+      id: cmd.name,
+      label: cmd.name,
+      summary: cmd.summary,
+      kind: "cli",
+      argv: [cmd.name],
+    });
+  }
+  if (cmd.subcommands) {
+    for (const sub of cmd.subcommands) {
+      // Nested like vault key rotate — positionals may be more tokens.
+      const pos = sub.positionals?.trim();
+      const base = `${cmd.name} ${sub.name}`;
+      out.push({
+        id: base,
+        label: base,
+        summary: sub.summary,
+        kind: "cli",
+        argv: [cmd.name, sub.name],
+      });
+      // Offer common nested positionals as separate autofill stubs when they
+      // look like literal tokens (not <placeholders>).
+      if (pos && !pos.includes("<") && !pos.includes("[")) {
+        const tokens = pos.split(/\s+/).filter(Boolean);
+        out.push({
+          id: `${base} ${tokens.join(" ")}`,
+          label: `${base} ${tokens.join(" ")}`,
+          summary: sub.summary,
+          kind: "cli",
+          argv: [cmd.name, sub.name, ...tokens],
+        });
+      }
+    }
+  }
+  return out;
+}
+
+let cached: readonly SlashAction[] | undefined;
+
+/**
+ * Full slash catalogue (panels + every registry command/subcommand).
+ */
+export function slashCatalog(): readonly SlashAction[] {
+  if (cached) return cached;
+  const cli = OKE_COMMANDS.flatMap((c) => expandCommand(c));
+  // Prefer panel jumps + high-traffic commands near the top for empty query.
+  cached = [...PANEL_JUMPS, ...cli];
+  return cached;
+}
+
+/**
+ * Score + filter catalogue entries for autofill.
+ *
+ * Matching: prefix on id, then substring, then word-prefix. Case-insensitive.
+ *
+ * @param query - Text after `/` (no leading slash)
+ * @param limit - Max suggestions
+ */
+export function filterSlashActions(query: string, limit: number = 12): readonly SlashAction[] {
+  const q = query.trim().toLowerCase();
+  const all = slashCatalog();
+  if (q.length === 0) {
+    return all.slice(0, limit);
+  }
+
+  type Ranked = { readonly action: SlashAction; readonly score: number };
+  const ranked: Ranked[] = [];
+  for (const action of all) {
+    const id = action.id.toLowerCase();
+    const summary = action.summary.toLowerCase();
+    let score = -1;
+    if (id === q) score = 1000;
+    else if (id.startsWith(q)) score = 800 - id.length;
+    else if (id.includes(` ${q}`) || id.includes(q)) score = 500 - id.indexOf(q);
+    else if (summary.includes(q)) score = 200;
+    else {
+      // Word-prefix: every query token starts a word in id
+      const words = id.split(/[\s:/._-]+/);
+      const tokens = q.split(/\s+/).filter(Boolean);
+      if (tokens.length > 0 && tokens.every((t) => words.some((w) => w.startsWith(t)))) {
+        score = 400;
+      }
+    }
+    if (score >= 0) ranked.push({ action, score });
+  }
+  ranked.sort((a, b) => b.score - a.score || a.action.id.localeCompare(b.action.id));
+  return ranked.slice(0, limit).map((r) => r.action);
+}
+
+/**
+ * Longest common prefix among suggestion ids (for Tab autofill).
+ *
+ * @param ids - Candidate labels
+ */
+export function commonPrefix(ids: readonly string[]): string {
+  if (ids.length === 0) return "";
+  let prefix = ids[0]!;
+  for (let i = 1; i < ids.length; i++) {
+    const s = ids[i]!;
+    let j = 0;
+    while (j < prefix.length && j < s.length && prefix[j] === s[j]) j++;
+    prefix = prefix.slice(0, j);
+    if (prefix.length === 0) break;
+  }
+  return prefix;
+}
+
+/**
+ * Parse free-typed slash input into argv after `oke`.
+ *
+ * @param raw - Text after `/`
+ */
+export function parseSlashArgv(raw: string): readonly string[] {
+  return raw.trim().split(/\s+/).filter(Boolean);
+}

package/src/cli/tui/slash-run.ts

@@ -0,0 +1,54 @@
+/**
+ * Execute a slash CLI action — spawn `oke` with full argv, stream into logs.
+ */
+
+import { resolve } from "node:path";
+
+/**
+ * Run `oke <argv…>` in `cwd`, appending stdout/stderr lines via `onLog`.
+ *
+ * @param cwd - Project root
+ * @param argv - Args after `oke`
+ * @param onLog - Log sink
+ */
+export async function runSlashCli(
+  cwd: string,
+  argv: readonly string[],
+  onLog: (line: string) => void,
+): Promise<number> {
+  const cliEntry = resolve(import.meta.dir, "../index.ts");
+  onLog(`$ oke ${argv.join(" ")}\n`);
+
+  // Prefer in-repo entry so local TUI always hits this checkout.
+  const proc = Bun.spawn(["bun", cliEntry, ...argv], {
+    cwd,
+    stdout: "pipe",
+    stderr: "pipe",
+    env: {
+      ...process.env,
+      // Force non-interactive child (no nested TUI).
+      OKE_NO_TUI: "1",
+    },
+  });
+
+  const pump = async (stream: ReadableStream<Uint8Array> | null): Promise<void> => {
+    if (!stream) return;
+    const reader = stream.getReader();
+    const dec = new TextDecoder();
+    let buf = "";
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      const parts = buf.split("\n");
+      buf = parts.pop() ?? "";
+      for (const line of parts) onLog(`${line}\n`);
+    }
+    if (buf.length > 0) onLog(`${buf}\n`);
+  };
+
+  await Promise.all([pump(proc.stdout), pump(proc.stderr)]);
+  const code = await proc.exited;
+  onLog(code === 0 ? `✓ exit ${code}\n` : `✗ exit ${code}\n`);
+  return code;
+}

package/src/cli/tui/state/ports.ts

@@ -0,0 +1,95 @@
+/**
+ * Poll preferred OKE ports for the Dashboard.
+ */
+
+import { APP_PORT, CONSOLE_PORT, DOCS_MCP_PORT, MCP_PORT } from "../../../runtime/types.ts";
+import type { DevStatus } from "../../../term.ts";
+import { isPortInUse } from "../../ports.ts";
+import {
+  type DevOwnership,
+  type DevSessionPorts,
+  resolveDevOwnership,
+} from "../../dev-session-lock.ts";
+
+/** One surface row on the dashboard. */
+export type SurfaceStatus = {
+  readonly id: "app" | "console" | "mcp" | "docsMcp";
+  readonly label: string;
+  readonly port: number;
+  readonly status: DevStatus;
+  readonly url: string;
+};
+
+/** Snapshot for Dashboard / Dev panel. */
+export type PortSnapshot = {
+  readonly ownership: DevOwnership;
+  readonly surfaces: readonly SurfaceStatus[];
+};
+
+/**
+ * Preferred ports (config overrides later if needed).
+ *
+ * @param cwd - Project root
+ */
+export async function pollPortSnapshot(
+  cwd: string,
+  preferred: DevSessionPorts = {
+    app: APP_PORT,
+    console: CONSOLE_PORT,
+    mcp: MCP_PORT,
+    docsMcp: DOCS_MCP_PORT,
+  },
+): Promise<PortSnapshot> {
+  const { ownership, lock, busy } = await resolveDevOwnership(cwd, preferred);
+  const ports = lock?.ports ?? preferred;
+  const toStatus = (busyPort: boolean): DevStatus => (busyPort ? "ready" : "idle");
+  return {
+    ownership,
+    surfaces: [
+      {
+        id: "app",
+        label: "App",
+        port: ports.app,
+        status: toStatus(busy.app),
+        url: `http://127.0.0.1:${ports.app}`,
+      },
+      {
+        id: "console",
+        label: "Console",
+        port: ports.console,
+        status: toStatus(busy.console),
+        url: `http://127.0.0.1:${ports.console}`,
+      },
+      {
+        id: "mcp",
+        label: "MCP",
+        port: ports.mcp,
+        status: toStatus(busy.mcp),
+        url: `http://127.0.0.1:${ports.mcp}`,
+      },
+      {
+        id: "docsMcp",
+        label: "Docs MCP",
+        port: ports.docsMcp,
+        status: toStatus(busy.docsMcp),
+        url: `http://127.0.0.1:${ports.docsMcp}`,
+      },
+    ],
+  };
+}
+
+/**
+ * Light HTTP probe — upgrades idle→error when port open but not answering.
+ *
+ * @param url - Base URL
+ */
+export async function probeHttpOk(url: string): Promise<boolean> {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(800) });
+    return res.status < 500;
+  } catch {
+    return false;
+  }
+}
+
+export { isPortInUse };

package/src/cli/tui/theme.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared Ink color tokens — aligned with `oke dev` green brand.
+ */
+
+/** Brand / logo / active tab (matches oke dev wordmark). */
+export const TUI_BRAND = "green" as const;
+
+/** Focused rows, panel titles, links. */
+export const TUI_ACCENT = "cyan" as const;
+
+/** Online / success / managed. */
+export const TUI_OK = "green" as const;
+
+/** Offline / error. */
+export const TUI_ERR = "red" as const;
+
+/** Warning / destructive / pending. */
+export const TUI_WARN = "yellow" as const;
+
+/** Chrome borders, inactive text. */
+export const TUI_MUTED = "gray" as const;
+
+/** Shortcut hints. */
+export const TUI_HINT = "yellow" as const;