okengine 0.10.2 → 0.11.0

package/src/cli/resolve-dev-sql-env.test.ts

@@ -1,12 +1,11 @@
 /**
- * Active SQL env resolution from `.oke/mode` / session overrides.
+ * Active SQL env resolution — Docker-first (`dev` default).
  */
 
 import { afterEach, describe, expect, test } from "bun:test";
 import { mkdtemp, rm } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { writeDevMode } from "./dev-mode.ts";
 import { resolveDevSqlEnv } from "./resolve-dev-sql-env.ts";
 
 const dirs: string[] = [];
@@ -22,27 +21,20 @@ async function tempDir(): Promise<string> {
 }
 
 describe("resolveDevSqlEnv", () => {
-  test("defaults to local when nothing set", async () => {
+  test("defaults to dev (Docker-first)", async () => {
     const dir = await tempDir();
-    expect(await resolveDevSqlEnv(dir)).toBe("local");
+    expect(await resolveDevSqlEnv(dir)).toBe("dev");
   });
 
   test("explicit env override wins", async () => {
     const dir = await tempDir();
-    await writeDevMode(dir, "local");
-    expect(await resolveDevSqlEnv(dir, { env: "docker" })).toBe("docker");
+    expect(await resolveDevSqlEnv(dir, { env: "test" })).toBe("test");
+    expect(await resolveDevSqlEnv(dir, { env: "dev" })).toBe("dev");
   });
 
-  test("session docker flag wins over saved mode", async () => {
+  test("docker flag is ignored (always dev unless env set)", async () => {
     const dir = await tempDir();
-    await writeDevMode(dir, "local");
-    expect(await resolveDevSqlEnv(dir, { docker: true })).toBe("docker");
-    expect(await resolveDevSqlEnv(dir, { docker: false })).toBe("local");
-  });
-
-  test("reads saved .oke/mode", async () => {
-    const dir = await tempDir();
-    await writeDevMode(dir, "docker");
-    expect(await resolveDevSqlEnv(dir)).toBe("docker");
+    expect(await resolveDevSqlEnv(dir, { docker: true })).toBe("dev");
+    expect(await resolveDevSqlEnv(dir, { docker: false })).toBe("dev");
   });
 });

package/src/cli/resolve-dev-sql-env.ts

@@ -1,42 +1,40 @@
 /**
- * Resolve the active SQL env for schema tooling (`oke db`, `oke mode`,
- * `oke dev` one-shot sync) from session overrides and the saved dev mode.
+ * Resolve the active SQL env for schema tooling (`oke db`, `oke dev`
+ * one-shot sync). Docker-first: `oke dev` always uses `dev`.
  */
 
 import type { ConfigEnv } from "../config/index.ts";
-import { readDevMode } from "./dev-mode.ts";
 
 /** Options for {@link resolveDevSqlEnv}. */
 export interface ResolveDevSqlEnvOptions {
   /**
-   * Session override — `true` means docker (e.g. `OKE_DOCKER=1` or
-   * `oke dev --docker`). `false` means local. `undefined` → auto-resolve.
+   * Session override — `true` means compose infra is up. Ignored for env
+   * selection (always `dev` unless `options.env` is set); kept for call-site
+   * compatibility.
    */
   readonly docker?: boolean;
   /**
-   * Explicit env override (e.g. `oke db --env docker`). Wins over `.oke/mode`.
+   * Explicit env override (e.g. `oke db --env test`). Wins over the default.
    */
   readonly env?: ConfigEnv;
 }
 
 /**
- * Resolve the SQL env (`local` | `docker` for dev tooling) without prompting.
+ * Resolve the SQL {@link ConfigEnv} for tooling without prompting.
  *
  * Order:
  * 1. Explicit `options.env` (CLI flag)
- * 2. Session docker flag (`options.docker`)
- * 3. `.oke/mode` persisted preference
- * 4. Default `local`
+ * 2. Default `dev` (Docker-first local development)
  *
- * @param cwd - Project root
+ * @param _cwd - Project root (unused; kept for call-site compatibility)
  * @param options - Session / CLI overrides
  */
 export async function resolveDevSqlEnv(
-  cwd: string,
+  _cwd: string,
   options: ResolveDevSqlEnvOptions = {},
 ): Promise<ConfigEnv> {
+  void _cwd;
+  void options.docker;
   if (options.env !== undefined) return options.env;
-  if (options.docker !== undefined) return options.docker ? "docker" : "local";
-  const saved = await readDevMode(cwd);
-  return saved ?? "local";
+  return "dev";
 }

package/src/cli/safe-defaults.test.ts

@@ -12,36 +12,54 @@ import { runImagesPin } from "./images.ts";
 import { upgradeCli } from "./upgrade.ts";
 
 describe("oke safe-default overrides", () => {
-  test("docker --prod is off unless --prod|-p is passed", async () => {
+  test("docker prod overlays are on by default; --no-prod opts out", async () => {
     const dir = await mkdtemp(join(tmpdir(), "oke-safe-docker-"));
     await Bun.write(
       join(dir, "oke.config.ts"),
-      `export default { images: { "store.sql": "postgres:18-alpine" } }\n`,
+      `export default { images: { store: { sql: "postgres:18-alpine" } } }\n`,
     );
-    // Without --prod, derive still runs but prod overlays are not requested.
-    // We assert the parser default by calling runDockerDerive via dockerCli
-    // with a dry path: inspect that -p flips prod on.
     const { runDockerDerive } = await import("./docker.ts");
-    const off = await runDockerDerive({
+
+    // Default layout is single: prod readiness/deploy folds into docker-compose.yml
+    // (no separate compose.prod.yml). Assert production-grade content is present.
+    const defaults = await runDockerDerive({
+      cwd: dir,
+      outDir: dir,
+      images: { "store.sql": "postgres:18-alpine" },
+      dryRun: true,
+      write: () => {},
+    });
+    expect(defaults.code).toBe(0);
+    const defaultCompose = defaults.result?.files.find((f) => f.path === "docker-compose.yml");
+    expect(defaultCompose).toBeDefined();
+    expect(defaultCompose!.content).toContain("/_/ready");
+    expect(defaults.result?.files.some((f) => f.path.includes("prod"))).toBe(false);
+
+    const noProd = await runDockerDerive({
       cwd: dir,
       outDir: dir,
       images: { "store.sql": "postgres:18-alpine" },
+      prod: false,
       dryRun: true,
       write: () => {},
     });
-    expect(off.code).toBe(0);
-    expect(off.result?.files.some((f) => f.path.includes("prod"))).toBe(false);
+    expect(noProd.code).toBe(0);
+    const noProdCompose = noProd.result?.files.find((f) => f.path === "docker-compose.yml");
+    expect(noProdCompose).toBeDefined();
+    expect(noProdCompose!.content).not.toContain("/_/ready");
 
-    const on = await runDockerDerive({
+    // Split layout still emits a separate compose.prod.yml when prod is on.
+    const splitProd = await runDockerDerive({
       cwd: dir,
       outDir: dir,
       images: { "store.sql": "postgres:18-alpine" },
       prod: true,
+      layout: "split",
       dryRun: true,
       write: () => {},
     });
-    expect(on.code).toBe(0);
-    expect(on.result?.files.some((f) => f.path.includes("prod"))).toBe(true);
+    expect(splitProd.code).toBe(0);
+    expect(splitProd.result?.files.some((f) => f.path === "compose.prod.yml")).toBe(true);
 
     expect(await dockerCli(["--help"])).toBe(0);
   });

package/src/cli/schema.ts

@@ -1,5 +1,9 @@
 /**
- * `oke schema generate` — core + auth + plugin tables → `schema/oke.ts`.
+ * `oke schema generate` — core + auth + plugin tables → `.oke/schema/oke.ts`.
+ *
+ * Domain Drizzle lives under `src/db/` (`oke db …`). This file is the
+ * generated system/stub catalogue — kept under `.oke/` so it never lands
+ * at the project root next to app source.
  */
 
 import { createHash } from "node:crypto";
@@ -15,10 +19,16 @@ import type { Manifest } from "../manifest/types.ts";
 import { loadManifest } from "./load-config.ts";
 
 /** Fingerprint file written beside generated schema. */
-export const SCHEMA_FINGERPRINT_FILE = "schema/.oke-schema.sha256";
+export const SCHEMA_FINGERPRINT_FILE = ".oke/schema/.oke-schema.sha256";
+
+/** Default generated system schema path (under `.oke/`, not project root). */
+export const SCHEMA_OUT = ".oke/schema/oke.ts";
 
-/** Default generated schema path. */
-export const SCHEMA_OUT = "schema/oke.ts";
+/** Pre-0.10.4 path — still read for doctor / --check soft-compat. */
+export const LEGACY_SCHEMA_OUT = "schema/oke.ts";
+
+/** Pre-0.10.4 fingerprint path. */
+export const LEGACY_SCHEMA_FINGERPRINT_FILE = "schema/.oke-schema.sha256";
 
 /** Options for {@link runSchemaGenerate}. */
 export interface SchemaGenerateOptions {
@@ -36,7 +46,7 @@ export interface SchemaGenerateOptions {
 }
 
 /**
- * Generate `schema/oke.ts` from Manifest store tables + core auth columns.
+ * Generate `.oke/schema/oke.ts` from Manifest store tables + core auth columns.
  *
  * @param options - Manifest / check flag
  */
@@ -60,6 +70,11 @@ export async function runSchemaGenerate(options: SchemaGenerateOptions = {}): Pr
     "oke_crons",
     "oke_signal_config",
     "oke_console_prefs",
+    "oke_vault_secrets",
+    "oke_vault_keys",
+    "oke_vault_audit",
+    "oke_vault_master",
+    "oke_vault_status",
     ...(options.extraTables ?? []),
   ]);
   if (authSchema) {
@@ -85,13 +100,31 @@ export async function runSchemaGenerate(options: SchemaGenerateOptions = {}): Pr
   }
 
   const source = emitSchemaSource([...tables].sort(), authSchema);
-  const out = resolve(cwd, options.out ?? SCHEMA_OUT);
+  const outRel = options.out ?? SCHEMA_OUT;
+  const out = resolve(cwd, outRel);
   const fp = hashSource(source);
+  const fpRel = options.out
+    ? `${dirname(outRel)}/.oke-schema.sha256`.replace(/^\.\//, "")
+    : SCHEMA_FINGERPRINT_FILE;
 
   if (options.check) {
     const existing = Bun.file(out);
     if (!(await existing.exists())) {
-      write("oke schema generate --check: schema/oke.ts missing\n");
+      // Soft-compat: accept a correct legacy root `schema/oke.ts` during migrate.
+      if (!options.out) {
+        const legacy = Bun.file(resolve(cwd, LEGACY_SCHEMA_OUT));
+        if (await legacy.exists()) {
+          if (hashSource(await legacy.text()) === fp) {
+            write(
+              "oke schema generate --check: ok (legacy schema/oke.ts — re-run without --check to move under .oke/schema/)\n",
+            );
+            return 0;
+          }
+          write("oke schema generate --check: schema drift\n");
+          return 1;
+        }
+      }
+      write(`oke schema generate --check: ${outRel} missing\n`);
       return 1;
     }
     const current = await existing.text();
@@ -105,7 +138,7 @@ export async function runSchemaGenerate(options: SchemaGenerateOptions = {}): Pr
 
   await mkdir(dirname(out), { recursive: true });
   await Bun.write(out, source);
-  await Bun.write(resolve(cwd, SCHEMA_FINGERPRINT_FILE), `${fp}\n`);
+  await Bun.write(resolve(cwd, fpRel), `${fp}\n`);
   write(`oke schema generate: wrote ${out} (${tables.size} table(s))\n`);
   return 0;
 }
@@ -128,6 +161,11 @@ export async function schemaFingerprint(cwd: string, manifest?: Manifest): Promi
     "oke_crons",
     "oke_signal_config",
     "oke_console_prefs",
+    "oke_vault_secrets",
+    "oke_vault_keys",
+    "oke_vault_audit",
+    "oke_vault_master",
+    "oke_vault_status",
     ...authSchema.tableNames,
   ]);
   if (m?.stores) {
@@ -141,16 +179,24 @@ export async function schemaFingerprint(cwd: string, manifest?: Manifest): Promi
 /**
  * Read the on-disk schema fingerprint, if any.
  *
+ * Prefers `.oke/schema/`, then legacy root `schema/`.
+ *
  * @param cwd - Project root
  */
 export async function readSchemaFingerprint(cwd: string): Promise<string | null> {
-  const fpFile = Bun.file(resolve(cwd, SCHEMA_FINGERPRINT_FILE));
-  if (await fpFile.exists()) {
-    return (await fpFile.text()).trim();
+  for (const rel of [SCHEMA_FINGERPRINT_FILE, LEGACY_SCHEMA_FINGERPRINT_FILE] as const) {
+    const fpFile = Bun.file(resolve(cwd, rel));
+    if (await fpFile.exists()) {
+      return (await fpFile.text()).trim();
+    }
+  }
+  for (const rel of [SCHEMA_OUT, LEGACY_SCHEMA_OUT] as const) {
+    const schema = Bun.file(resolve(cwd, rel));
+    if (await schema.exists()) {
+      return hashSource(await schema.text());
+    }
   }
-  const schema = Bun.file(resolve(cwd, SCHEMA_OUT));
-  if (!(await schema.exists())) return null;
-  return hashSource(await schema.text());
+  return null;
 }
 
 /**
@@ -173,9 +219,11 @@ export async function schemaCli(args: readonly string[]): Promise<number> {
     else if (a === "--manifest" || a === "-m") manifestPath = rest[++i];
     else if (a === "--out" || a === "-o") out = rest[++i];
     else if (a === "--help" || a === "-h") {
-      console.log(`oke schema generate [--check|-c] [--out|-o schema/oke.ts]
+      console.log(`oke schema generate [--check|-c] [--out|-o .oke/schema/oke.ts]
 
-Emit core auth columns + Manifest store tables. Use --check in CI to fail on drift.
+Emit core auth columns + Manifest store tables into \`.oke/schema/oke.ts\`
+(system stubs — not domain Drizzle under src/db/). Use --check in CI to fail on drift.
+Re-run after adding plugins / auth tables so the stub catalogue stays current.
 `);
       return 0;
     }
@@ -211,6 +259,7 @@ export function emitSchemaSource(
   return `/**
  * Generated by \`oke schema generate\` — do not edit.
  * Core Gate auth tables + Manifest store tables.
+ * Path: \`.oke/schema/oke.ts\` (system stubs; domain schema lives under \`src/db/\`).
  */
 
 ${decls}

package/src/cli/test.ts

@@ -0,0 +1,58 @@
+/**
+ * `oke test` — run `bun test` with PGLite test posture (no Docker Compose).
+ */
+
+/**
+ * CLI entry for `oke test`.
+ *
+ * Sets `NODE_ENV=test` and a default in-memory PGLite URL, verifies
+ * `@electric-sql/pglite` resolves, then forwards remaining argv to `bun test`.
+ *
+ * @param args - Args after `test` (forwarded to `bun test`)
+ */
+export async function testCli(args: readonly string[]): Promise<number> {
+  for (const a of args) {
+    if (a === "--help" || a === "-h") {
+      console.log(`oke test [...bun test args]
+
+Run bun test with PGLite test posture (NODE_ENV=test).
+Does not start Docker Compose.
+
+Environment (set if unset):
+  NODE_ENV=test
+  OKE_PGLITE_URL=memory://
+`);
+      return 0;
+    }
+  }
+
+  if (process.env.NODE_ENV === undefined || process.env.NODE_ENV === "") {
+    process.env.NODE_ENV = "test";
+  }
+  if (process.env.OKE_PGLITE_URL === undefined || process.env.OKE_PGLITE_URL === "") {
+    process.env.OKE_PGLITE_URL = "memory://";
+  }
+
+  try {
+    await import("@electric-sql/pglite");
+  } catch {
+    try {
+      Bun.resolveSync("@electric-sql/pglite", process.cwd());
+    } catch {
+      console.error(
+        "oke test: `@electric-sql/pglite` is not installed — add it as a dependency (okengine peers it for the pglite SQL driver)",
+      );
+      return 1;
+    }
+  }
+
+  const proc = Bun.spawn(["bun", "test", ...args], {
+    cwd: process.cwd(),
+    env: process.env as Record<string, string>,
+    stdin: "inherit",
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+  const code = await proc.exited;
+  return code ?? 1;
+}

package/src/cli/tui/App.tsx

@@ -0,0 +1,252 @@
+/**
+ * Interactive `oke` shell — brand chrome, focus layers, `/` palette.
+ */
+
+import { Box, useApp, useInput } from "ink";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from "react";
+import { DevController } from "../dev-controller.ts";
+import type { DevOwnership } from "../dev-session-lock.ts";
+import { ConfirmDialog } from "./components/ConfirmDialog.tsx";
+import { HeaderBar } from "./components/HeaderBar.tsx";
+import { SlashPalette } from "./components/SlashPalette.tsx";
+import { StatusBar, type FooterStatus } from "./components/StatusBar.tsx";
+import { TabBar } from "./components/TabBar.tsx";
+import { DashboardPanel } from "./panels/Dashboard.tsx";
+import { DatabasePanel } from "./panels/Database.tsx";
+import { DevPanel } from "./panels/Dev.tsx";
+import { DockerPanel } from "./panels/Docker.tsx";
+import { NavigatorPanel } from "./panels/Navigator.tsx";
+import { runSlashCli } from "./slash-run.ts";
+import { pollPortSnapshot } from "./state/ports.ts";
+import { TUI_MUTED } from "./theme.ts";
+
+const PANELS = ["dashboard", "dev", "database", "docker", "navigator"] as const;
+type PanelId = (typeof PANELS)[number];
+
+const TABS = [
+  { id: "dashboard", label: "Dashboard" },
+  { id: "dev", label: "Dev" },
+  { id: "database", label: "Database" },
+  { id: "docker", label: "Docker" },
+  { id: "navigator", label: "Navigator" },
+] as const;
+
+/** Props for {@link OkeTuiApp}. */
+export type OkeTuiAppProps = {
+  readonly cwd: string;
+};
+
+/**
+ * Root Ink application.
+ *
+ * @param props - cwd
+ */
+export function OkeTuiApp(props: OkeTuiAppProps): ReactElement {
+  const { exit } = useApp();
+  const [panelIndex, setPanelIndex] = useState(0);
+  const [focusLayer, setFocusLayer] = useState<"tabs" | "panel">("tabs");
+  const [logs, setLogs] = useState<string[]>([]);
+  const [slashOpen, setSlashOpen] = useState(false);
+  const [slashBusy, setSlashBusy] = useState(false);
+  const [quitConfirm, setQuitConfirm] = useState(false);
+  const [ownership, setOwnership] = useState<DevOwnership>("stopped");
+  const [footerStatus, setFooterStatus] = useState<FooterStatus>({ kind: "idle" });
+  const doneTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const controller = useMemo(() => new DevController(), []);
+
+  const onLog = useCallback((line: string) => {
+    setLogs((prev) => {
+      const next = [...prev, ...line.split("\n").filter((l) => l.length > 0)];
+      return next.slice(-200);
+    });
+  }, []);
+
+  const onStatus = useCallback((status: FooterStatus) => {
+    if (doneTimer.current) {
+      clearTimeout(doneTimer.current);
+      doneTimer.current = null;
+    }
+    setFooterStatus(status);
+    if (status.kind === "done") {
+      doneTimer.current = setTimeout(() => {
+        setFooterStatus({ kind: "idle" });
+        doneTimer.current = null;
+      }, 2000);
+    }
+  }, []);
+
+  useEffect(() => {
+    const tick = (): void => {
+      void pollPortSnapshot(props.cwd).then((s) => setOwnership(s.ownership));
+    };
+    tick();
+    const id = setInterval(tick, 2000);
+    const off = controller.on((e) => {
+      if (e.type === "ownership" || e.type === "ready") {
+        setOwnership(e.ownership);
+      }
+      if (e.type === "exit") setOwnership("stopped");
+    });
+    return () => {
+      clearInterval(id);
+      off();
+      if (doneTimer.current) clearTimeout(doneTimer.current);
+    };
+  }, [controller, props.cwd]);
+
+  const panel = (PANELS[panelIndex] ?? "dashboard") as PanelId;
+  const panelActive = !slashOpen && !quitConfirm && focusLayer === "panel";
+
+  const jumpPanel = useCallback((panelId: string) => {
+    const idx = PANELS.indexOf(panelId as PanelId);
+    if (idx >= 0) {
+      setPanelIndex(idx);
+      setFocusLayer("panel");
+    }
+  }, []);
+
+  const runCli = useCallback(
+    async (argv: readonly string[]) => {
+      setSlashBusy(true);
+      onStatus({ kind: "running", label: `Running oke ${argv.join(" ")}…` });
+      try {
+        await runSlashCli(props.cwd, argv, onLog);
+        onStatus({ kind: "done", label: "Done" });
+      } catch {
+        onStatus({ kind: "done", label: "Failed" });
+      } finally {
+        setSlashBusy(false);
+      }
+    },
+    [props.cwd, onLog, onStatus],
+  );
+
+  const requestQuit = useCallback(() => {
+    if (ownership === "managed") {
+      setQuitConfirm(true);
+      return;
+    }
+    exit();
+  }, [ownership, exit]);
+
+  useInput((input, key) => {
+    if (slashOpen || quitConfirm) return;
+
+    if (key.escape) {
+      if (focusLayer === "panel") {
+        setFocusLayer("tabs");
+        return;
+      }
+      requestQuit();
+      return;
+    }
+    if (input === "/") {
+      setSlashOpen(true);
+      return;
+    }
+    const n = Number(input);
+    if (n >= 1 && n <= PANELS.length) {
+      setPanelIndex(n - 1);
+      return;
+    }
+    // Global panel switch: Tab always; ←→ when focus is on the tab strip.
+    if (key.tab) {
+      setPanelIndex((i) => (i + 1) % PANELS.length);
+      setFocusLayer("tabs");
+      return;
+    }
+    if (focusLayer === "tabs") {
+      if (key.leftArrow) {
+        setPanelIndex((i) => (i - 1 + PANELS.length) % PANELS.length);
+        return;
+      }
+      if (key.rightArrow) {
+        setPanelIndex((i) => (i + 1) % PANELS.length);
+        return;
+      }
+      if (key.downArrow || key.return) {
+        setFocusLayer("panel");
+      }
+    }
+  });
+
+  if (quitConfirm) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={TUI_MUTED}
+        width="100%"
+        padding={1}
+      >
+        <ConfirmDialog
+          message="Stop managed oke dev and quit TUI?"
+          onConfirm={() => {
+            void controller.stop().then(() => exit());
+          }}
+          onCancel={() => setQuitConfirm(false)}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={TUI_MUTED}
+      width="100%"
+      paddingX={1}
+      paddingY={0}
+    >
+      <Box paddingY={1}>
+        <HeaderBar cwd={props.cwd} />
+      </Box>
+      <TabBar tabs={TABS} activeIndex={panelIndex} focused={focusLayer === "tabs"} />
+
+      {slashOpen ? (
+        <Box marginTop={1} flexGrow={1} minHeight={10}>
+          <SlashPalette
+            cwd={props.cwd}
+            busy={slashBusy}
+            onClose={() => setSlashOpen(false)}
+            onJumpPanel={jumpPanel}
+            onRunCli={runCli}
+          />
+        </Box>
+      ) : (
+        <Box flexDirection="column" flexGrow={1} marginTop={1} minHeight={10} gap={1}>
+          {panel === "dashboard" ? (
+            <DashboardPanel
+              cwd={props.cwd}
+              active={panelActive}
+              onJumpPanel={jumpPanel}
+              onStatus={onStatus}
+            />
+          ) : null}
+          {panel === "dev" ? (
+            <DevPanel
+              cwd={props.cwd}
+              controller={controller}
+              onLog={onLog}
+              logs={logs}
+              active={panelActive}
+              onStatus={onStatus}
+            />
+          ) : null}
+          {panel === "database" ? (
+            <DatabasePanel cwd={props.cwd} active={panelActive} onLog={onLog} onStatus={onStatus} />
+          ) : null}
+          {panel === "docker" ? (
+            <DockerPanel cwd={props.cwd} active={panelActive} onLog={onLog} onStatus={onStatus} />
+          ) : null}
+          {panel === "navigator" ? <NavigatorPanel cwd={props.cwd} active={panelActive} /> : null}
+        </Box>
+      )}
+
+      <Box marginTop={0}>
+        <StatusBar status={footerStatus} />
+      </Box>
+    </Box>
+  );
+}