okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/styles.css

@@ -0,0 +1,384 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-chart-scale-pattern-color: var(--chart-scale-pattern-color);
+  --color-chart-scale-05: var(--chart-scale-05);
+  --color-chart-scale-04: var(--chart-scale-04);
+  --color-chart-scale-03: var(--chart-scale-03);
+  --color-chart-scale-02: var(--chart-scale-02);
+  --color-chart-scale-01: var(--chart-scale-01);
+  --color-chart-label: var(--chart-label);
+  --color-chart-marker-foreground: var(--chart-marker-foreground);
+  --color-chart-marker-border: var(--chart-marker-border);
+  --color-chart-marker-background: var(--chart-marker-background);
+  --color-chart-tooltip-muted: var(--chart-tooltip-muted);
+  --color-chart-tooltip-foreground: var(--chart-tooltip-foreground);
+  --color-chart-tooltip-background: var(--chart-tooltip-background);
+  --chart-brush-border: var(--chart-brush-border);
+  --color-chart-grid: var(--chart-grid);
+  --color-chart-crosshair: var(--chart-crosshair);
+  --chart-line-secondary: var(--chart-line-secondary);
+  --chart-line-primary: var(--chart-line-primary);
+  --color-chart-foreground-muted: var(--chart-foreground-muted);
+  --color-chart-foreground: var(--chart-foreground);
+  --color-chart-background: var(--chart-background);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.62 0.17 250);
+  --chart-2: oklch(0.62 0.12 195);
+  --chart-3: oklch(0.6 0.2 25);
+  --chart-4: oklch(0.55 0.16 280);
+  --chart-5: oklch(0.58 0.14 220);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.945 0.002 286.32);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-background: oklch(1 0 0);
+  --chart-foreground: oklch(0.145 0.004 285);
+  --chart-foreground-muted: oklch(0.55 0.014 260);
+  --chart-line-primary: var(--chart-1);
+  --chart-line-secondary: var(--chart-2);
+  --chart-crosshair: oklch(0.4 0.1828 274.34);
+  --chart-grid: oklch(0.9 0 0);
+  --chart-brush-border: var(--chart-grid);
+  --chart-tooltip-background: oklch(0.21 0.006 285 / 0.8);
+  --chart-tooltip-foreground: oklch(0.985 0 0);
+  --chart-tooltip-muted: oklch(0.65 0.01 260);
+  --chart-marker-background: oklch(0.97 0.005 260);
+  --chart-marker-border: oklch(0.85 0.01 260);
+  --chart-marker-foreground: oklch(0.3 0.01 260);
+  --chart-label: oklch(0.45 0.01 260);
+  --chart-scale-01: oklch(0.98 0.004 250);
+  --chart-scale-02: oklch(0.93 0.01 250);
+  --chart-scale-03: oklch(0.82 0.03 250);
+  --chart-scale-04: oklch(0.68 0.05 250);
+  --chart-scale-05: oklch(0.55 0.07 250);
+  --chart-scale-pattern-color: oklch(0.96 0.008 250);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.19 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.19 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.19 0.006 285.885);
+  --secondary: oklch(0.25 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.25 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.25 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.7 0.14 250);
+  --chart-2: oklch(0.72 0.12 195);
+  --chart-3: oklch(0.7 0.18 22);
+  --chart-4: oklch(0.7 0.16 280);
+  --chart-5: oklch(0.72 0.12 220);
+  --sidebar: oklch(0.141 0.005 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.22 0.008 285.885);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-background: oklch(0.145 0 0);
+  --chart-foreground: oklch(0.45 0 0);
+  --chart-foreground-muted: oklch(0.65 0.01 260);
+  --chart-crosshair: oklch(0.45 0 0);
+  --chart-grid: oklch(0.25 0 0);
+  --chart-brush-border: var(--chart-grid);
+  --chart-marker-background: oklch(0.25 0.01 260);
+  --chart-marker-border: oklch(0.4 0.01 260);
+  --chart-marker-foreground: oklch(0.9 0 0);
+  --chart-label: oklch(0.75 0.01 260);
+  --chart-scale-01: oklch(0.28 0.03 270);
+  --chart-scale-02: oklch(0.38 0.04 270);
+  --chart-scale-03: oklch(0.48 0.05 270);
+  --chart-scale-04: oklch(0.58 0.06 270);
+  --chart-scale-05: oklch(0.68 0.07 270);
+  --chart-scale-pattern-color: oklch(0.145 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  /* Native controls / autofill follow the class theme, not OS alone.
+     https://tailwindcss.com/docs/color-scheme */
+  html {
+    @apply scheme-light;
+  }
+  html.dark {
+    @apply scheme-dark;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    margin: 0;
+    min-height: 100dvh;
+  }
+  #root {
+    min-height: 100dvh;
+  }
+
+  /* Chrome paints autofill as a UA wash. Delay it so the field stays
+     the surface; ink uses the theme token. */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active,
+  textarea:-webkit-autofill,
+  select:-webkit-autofill {
+    -webkit-text-fill-color: var(--foreground);
+    caret-color: var(--foreground);
+    background-color: transparent !important;
+    background-image: none !important;
+    -webkit-background-clip: text;
+    background-clip: text;
+    transition:
+      background-color 99999s ease-out 0s,
+      background-image 99999s ease-out 0s;
+  }
+}
+
+/* React Flow — match Console theme tokens (controls, background, attribution). */
+.react-flow {
+  --xy-background-color: var(--background);
+  --xy-edge-stroke: var(--border);
+  --xy-edge-stroke-selected: var(--primary);
+  --xy-controls-button-background-color: var(--card);
+  --xy-controls-button-background-color-hover: var(--muted);
+  --xy-controls-button-color: var(--muted-foreground);
+  --xy-controls-button-color-hover: var(--foreground);
+  --xy-controls-button-border-color: var(--border);
+  --xy-attribution-background-color: transparent;
+  --xy-attribution-color: var(--muted-foreground);
+  --xy-minimap-background-color: var(--card);
+  --xy-minimap-mask-background-color: color-mix(in oklab, var(--background) 55%, transparent);
+  --xy-minimap-node-background-color: color-mix(in oklab, var(--foreground) 22%, transparent);
+}
+
+.react-flow__controls {
+  box-shadow: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.react-flow__controls-button {
+  border-bottom: 1px solid var(--border);
+}
+
+.react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__node-law {
+  overflow: visible !important;
+}
+
+/* Overview hubs — keep edge anchors, never paint the xyflow handle square. */
+.react-flow__handle.oke-center-handle,
+.react-flow__node-element .react-flow__handle,
+.react-flow__node-typeChip .react-flow__handle,
+.react-flow__node-unitChip .react-flow__handle,
+.react-flow__node-law .react-flow__handle {
+  opacity: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  width: 1px !important;
+  height: 1px !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  pointer-events: none !important;
+}
+
+.react-flow__minimap {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: none;
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor;
+}
+
+@property --oke-changes-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes oke-changes-border-spin {
+  to {
+    --oke-changes-angle: 360deg;
+  }
+}
+
+/**
+ * Traveling outline on the Store "Changes" button while pending edits exist.
+ * Mask punches the fill so only a 1px ring spins around the control.
+ */
+.oke-changes-border-run {
+  --oke-changes-ink: var(--color-amber-500);
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.oke-changes-border-run::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  pointer-events: none;
+  background: conic-gradient(
+    from var(--oke-changes-angle),
+    transparent 0 58%,
+    color-mix(in oklab, var(--oke-changes-ink) 35%, transparent) 72%,
+    var(--oke-changes-ink) 86%,
+    color-mix(in oklab, var(--oke-changes-ink) 35%, transparent) 94%,
+    transparent 100%
+  );
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  animation: oke-changes-border-spin 2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oke-changes-border-run::before {
+    animation: none;
+    background: color-mix(in oklab, var(--oke-changes-ink) 45%, transparent);
+  }
+
+  .oke-law-ripple,
+  .oke-law-hit {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+@keyframes oke-law-ripple {
+  0% {
+    transform: scale(0.78);
+    opacity: 0.42;
+  }
+  100% {
+    transform: scale(1.55);
+    opacity: 0;
+  }
+}
+
+@keyframes oke-law-hit {
+  0% {
+    transform: scale(0.88);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1.72);
+    opacity: 0;
+  }
+}
+
+/**
+ * Concentric beat rings on the Overview law disc — pace follows live
+ * operations; a one-shot hit fires when the live count ticks up.
+ */
+.oke-law-ripple,
+.oke-law-hit {
+  position: absolute;
+  inset: 2%;
+  border-radius: 9999px;
+  pointer-events: none;
+  border: 1.5px solid color-mix(in oklab, currentColor 48%, transparent);
+}
+
+.oke-law-ripple {
+  animation: oke-law-ripple linear infinite;
+}
+
+.oke-law-hit {
+  border-width: 2px;
+  animation: oke-law-hit 0.7s ease-out forwards;
+}

package/src/console/ui-next/src/vite-env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+/** Injected from root package.json by Vite `define`. */
+declare const __OKE_VERSION__: string;
+
+/**
+ * Fixed Console operator for login prefill on standalone `dev:console`
+ * / `:seed` only — null for `oke dev` HMR and production builds.
+ * Injected by Vite `define` from `ui-next-dev-operator.ts`.
+ */
+declare const __OKE_DEV_OPERATOR__: { readonly email: string; readonly password: string } | null;
+
+/**
+ * True when Vite serve is `dev:console:seed` (`OKE_CONSOLE_SEEDED=1`).
+ * Production `oke dev` / `oke start` dist is always false.
+ */
+declare const __OKE_CONSOLE_SEEDED__: boolean;

package/src/console/ui-next/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "types": ["vite/client", "bun"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@console/password-policy": ["../password-policy.ts"]
+    }
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["dist"]
+}

package/src/console/ui-next/ui-next-dev-operator.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Unit tests for the fixed console-next dev operator helper.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { authenticateOperator } from "../../auth/operator.ts";
+import {
+  isConsoleFresh,
+  isConsoleKernelSkipped,
+  seedUiNextDevOperator,
+  shouldPrefillDevOperator,
+  UI_NEXT_DEV_OPERATOR,
+  UI_NEXT_DEV_OPERATOR_EMAIL,
+  UI_NEXT_DEV_OPERATOR_NAME,
+  UI_NEXT_DEV_OPERATOR_PASSWORD,
+} from "./ui-next-dev-operator.ts";
+
+describe("ui-next dev operator", () => {
+  test("kernel-skip env flag is explicit", () => {
+    const prev = process.env["OKE_CONSOLE_KERNEL"];
+    try {
+      delete process.env["OKE_CONSOLE_KERNEL"];
+      expect(isConsoleKernelSkipped()).toBe(false);
+      process.env["OKE_CONSOLE_KERNEL"] = "0";
+      expect(isConsoleKernelSkipped()).toBe(true);
+    } finally {
+      if (prev === undefined) delete process.env["OKE_CONSOLE_KERNEL"];
+      else process.env["OKE_CONSOLE_KERNEL"] = prev;
+    }
+  });
+
+  test("fresh env flag is explicit", () => {
+    const prev = process.env["OKE_CONSOLE_FRESH"];
+    try {
+      delete process.env["OKE_CONSOLE_FRESH"];
+      expect(isConsoleFresh()).toBe(false);
+      process.env["OKE_CONSOLE_FRESH"] = "1";
+      expect(isConsoleFresh()).toBe(true);
+    } finally {
+      if (prev === undefined) delete process.env["OKE_CONSOLE_FRESH"];
+      else process.env["OKE_CONSOLE_FRESH"] = prev;
+    }
+  });
+
+  test("login prefill is standalone Vite console only", () => {
+    expect(shouldPrefillDevOperator({ serve: true, fresh: false, kernelSkipped: false })).toBe(
+      true,
+    );
+    expect(shouldPrefillDevOperator({ serve: true, fresh: false, kernelSkipped: true })).toBe(
+      false,
+    );
+    expect(shouldPrefillDevOperator({ serve: true, fresh: true, kernelSkipped: false })).toBe(
+      false,
+    );
+    expect(shouldPrefillDevOperator({ serve: false, fresh: false, kernelSkipped: false })).toBe(
+      false,
+    );
+  });
+
+  test("seeded operator authenticates with documented credentials", async () => {
+    const { store, operatorId } = await seedUiNextDevOperator();
+    expect(store.operators.size).toBe(1);
+    const row = store.operators.get(operatorId);
+    expect(row?.email).toBe(UI_NEXT_DEV_OPERATOR_EMAIL);
+    expect(row?.name).toBe(UI_NEXT_DEV_OPERATOR_NAME);
+
+    const op = await authenticateOperator(
+      store,
+      UI_NEXT_DEV_OPERATOR.email,
+      UI_NEXT_DEV_OPERATOR_PASSWORD,
+    );
+    expect(op).not.toBeNull();
+    expect(op!.id).toBe(operatorId);
+    expect(op!.email).toBe(UI_NEXT_DEV_OPERATOR_EMAIL);
+  });
+});

package/src/console/ui-next/ui-next-dev-operator.ts

@@ -0,0 +1,81 @@
+/**
+ * Fixed Console operator for local DX — seeded on every
+ * `dev:console` / `:seed` boot unless `OKE_CONSOLE_FRESH=1`.
+ *
+ * Credentials are intentional and public for local/dev only; never use in prod.
+ */
+
+import { createOperator, createOperatorStore, type OperatorStore } from "../../auth/operator.ts";
+import { CONSOLE_PASSWORD_POLICY } from "../password-policy.ts";
+
+/** Stable email for the console-next dev operator. */
+export const UI_NEXT_DEV_OPERATOR_EMAIL = "dev@oke.dev";
+
+/** Display name for the console-next dev operator. */
+export const UI_NEXT_DEV_OPERATOR_NAME = "Ali Alnaghmoush";
+
+/** Password for the console-next dev operator (meets Console policy). */
+export const UI_NEXT_DEV_OPERATOR_PASSWORD = "Okengine123!";
+
+/** Public shape injected into the Vite SPA for login prefill. */
+export type UiNextDevOperatorCreds = {
+  readonly email: string;
+  readonly password: string;
+};
+
+/**
+ * Credentials object shared by the Vite banner, `define`, and login prefill.
+ */
+export const UI_NEXT_DEV_OPERATOR: UiNextDevOperatorCreds = {
+  email: UI_NEXT_DEV_OPERATOR_EMAIL,
+  password: UI_NEXT_DEV_OPERATOR_PASSWORD,
+};
+
+/**
+ * True when `OKE_CONSOLE_FRESH=1` — skip the fixed operator and keep claim open.
+ */
+export function isConsoleFresh(): boolean {
+  return process.env["OKE_CONSOLE_FRESH"] === "1";
+}
+
+/**
+ * True when `OKE_CONSOLE_KERNEL=0` — Vite is SPA-only because `oke dev`
+ * already owns the Console kernel on :6533.
+ */
+export function isConsoleKernelSkipped(): boolean {
+  return process.env["OKE_CONSOLE_KERNEL"] === "0";
+}
+
+/**
+ * Prefill `dev@oke.dev` only on standalone `dev:console` / `:seed`.
+ * `oke dev` (kernel skipped) and production builds stay empty.
+ *
+ * @param options.serve - Vite `command === "serve"`
+ * @param options.fresh - `OKE_CONSOLE_FRESH=1` (claim open)
+ * @param options.kernelSkipped - Vite is HMR beside `oke dev`
+ */
+export function shouldPrefillDevOperator(options: {
+  readonly serve: boolean;
+  readonly fresh: boolean;
+  readonly kernelSkipped: boolean;
+}): boolean {
+  return options.serve && !options.fresh && !options.kernelSkipped;
+}
+
+/**
+ * Create an {@link OperatorStore} with the fixed Console dev operator.
+ * Closing setup (`setupClosed`) follows from `operators.size > 0`.
+ *
+ * @param store - Optional existing store (defaults to a new empty store)
+ */
+export async function seedUiNextDevOperator(
+  store: OperatorStore = createOperatorStore(),
+): Promise<{ readonly store: OperatorStore; readonly operatorId: string }> {
+  const op = await createOperator(store, {
+    email: UI_NEXT_DEV_OPERATOR_EMAIL,
+    name: UI_NEXT_DEV_OPERATOR_NAME,
+    password: UI_NEXT_DEV_OPERATOR_PASSWORD,
+    passwordPolicy: CONSOLE_PASSWORD_POLICY,
+  });
+  return { store, operatorId: op.id };
+}