okengine 0.22.0 → 0.23.0

package/src/console/ui-next/src/features/units/explorer/units-tree.tsx

@@ -8,6 +8,7 @@ import {
   FilterHorizontalIcon,
   Folder01Icon,
   InternetAntenna03Icon,
+  PinIcon,
   SecurityCheckIcon,
   Timer01Icon,
   UserIcon,
@@ -54,6 +55,10 @@ import {
   countActiveFacets,
   filterUnitTree,
   filterUnitsAdvanced,
+  loadPinnedUnits,
+  orderPinnedGroups,
+  savePinnedUnits,
+  togglePinnedUnit,
   unitTreeAncestorKeys,
   unitTreeBandKey,
   unitTreeGroupKey,
@@ -90,6 +95,7 @@ export function UnitsTree({ groups, selectedFlowId, onSelect }: UnitsTreeProps):
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [facets, setFacets] = useState<UnitTreeFacets>({});
   const [openByKey, setOpenByKey] = useState<Readonly<Record<string, boolean>>>({});
+  const [pinned, setPinned] = useState<readonly string[]>(() => loadPinnedUnits());
 
   const availableKinds = useMemo(() => {
     const present = new Set<FlowTriggerKind>();
@@ -171,6 +177,14 @@ export function UnitsTree({ groups, selectedFlowId, onSelect }: UnitsTreeProps):
       deliveries: toggleItem(prev.deliveries ?? [], delivery),
     }));
 
+  const togglePin = (unit: string): void => {
+    setPinned((prev) => {
+      const next = togglePinnedUnit(prev, unit);
+      savePinnedUnits(next);
+      return next;
+    });
+  };
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden" data-slot="units-tree">
       <div className="shrink-0 border-b border-border/60">
@@ -341,6 +355,8 @@ export function UnitsTree({ groups, selectedFlowId, onSelect }: UnitsTreeProps):
                   }
                   selectedFlowId={selectedFlowId}
                   onSelect={onSelect}
+                  pinned={pinned}
+                  onTogglePin={togglePin}
                 />
               );
             })}
@@ -438,6 +454,8 @@ function TriggerBand({
   onGroupOpenChange,
   selectedFlowId,
   onSelect,
+  pinned,
+  onTogglePin,
 }: {
   readonly band: UnitTreeBand;
   readonly open: boolean;
@@ -446,10 +464,13 @@ function TriggerBand({
   readonly onGroupOpenChange: (unit: string, open: boolean) => void;
   readonly selectedFlowId: string | null;
   readonly onSelect: (flowId: string) => void;
+  readonly pinned: readonly string[];
+  readonly onTogglePin: (unit: string) => void;
 }): JSX.Element {
   const kindSpec = FLOW_TRIGGER_KIND_SPECS[band.id];
-  const flowCount = band.groups.reduce((n, g) => n + g.flows.length, 0);
-  const units = band.groups.map((g) => g.unit);
+  const groups = orderPinnedGroups(band.groups, pinned);
+  const flowCount = groups.reduce((n, g) => n + g.flows.length, 0);
+  const units = groups.map((g) => g.unit);
   const unitsOpen = units.length > 0 && units.every((unit) => groupOpen(unit));
 
   const toggleUnits = (): void => {
@@ -501,7 +522,7 @@ function TriggerBand({
         />
         <CollapsibleContent>
           <ul className="flex flex-col">
-            {band.groups.map((g) => (
+            {groups.map((g) => (
               <UnitGroupItem
                 key={`${band.id}:${g.unit}`}
                 group={g}
@@ -509,6 +530,8 @@ function TriggerBand({
                 onOpenChange={(next) => onGroupOpenChange(g.unit, next)}
                 selectedFlowId={selectedFlowId}
                 onSelect={onSelect}
+                pinned={pinned.includes(g.unit)}
+                onTogglePin={() => onTogglePin(g.unit)}
               />
             ))}
           </ul>
@@ -529,30 +552,62 @@ function UnitGroupItem({
   onOpenChange,
   selectedFlowId,
   onSelect,
+  pinned,
+  onTogglePin,
 }: {
   readonly group: UnitGroup;
   readonly open: boolean;
   readonly onOpenChange: (open: boolean) => void;
   readonly selectedFlowId: string | null;
   readonly onSelect: (flowId: string) => void;
+  readonly pinned: boolean;
+  readonly onTogglePin: () => void;
 }): JSX.Element {
+  const pinLabel = pinned ? `Unpin ${group.unit}` : `Pin ${group.unit}`;
   return (
-    <li data-slot="unit-group" data-unit={group.unit}>
+    <li data-slot="unit-group" data-unit={group.unit} data-pinned={pinned ? "true" : undefined}>
       <Collapsible open={open} onOpenChange={onOpenChange}>
-        <CollapsibleTrigger className={cn(EXPLORER_GROUP_ROW_CLASS, "pl-4")}>
-          <HugeiconsIcon
-            icon={ArrowDown01Icon}
-            className={cn(EXPLORER_CHEVRON_CLASS, !open && "-rotate-90")}
-            aria-hidden
-          />
-          <HugeiconsIcon
-            icon={Folder01Icon}
-            className={cn(EXPLORER_ICON_CLASS, "text-muted-foreground")}
-            aria-hidden
-          />
-          <span className="min-w-0 flex-1 truncate font-medium text-foreground">{group.unit}</span>
-          <span className={EXPLORER_COUNT_CLASS}>{group.flows.length}</span>
-        </CollapsibleTrigger>
+        <CollapsibleTrigger
+          nativeButton={false}
+          className={cn(EXPLORER_GROUP_ROW_CLASS, "pl-4")}
+          data-slot="unit-group-toggle"
+          render={(props) => (
+            <div {...props}>
+              <HugeiconsIcon
+                icon={ArrowDown01Icon}
+                className={cn(EXPLORER_CHEVRON_CLASS, !open && "-rotate-90")}
+                aria-hidden
+              />
+              <HugeiconsIcon
+                icon={Folder01Icon}
+                className={cn(EXPLORER_ICON_CLASS, "text-muted-foreground")}
+                aria-hidden
+              />
+              <span className="flex min-w-0 flex-1 items-center">
+                <span className="min-w-0 truncate font-medium text-foreground">{group.unit}</span>
+                <button
+                  type="button"
+                  aria-label={pinLabel}
+                  aria-pressed={pinned}
+                  data-slot="unit-pin"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onTogglePin();
+                  }}
+                  className={cn(
+                    "inline-flex shrink-0 items-center justify-center overflow-hidden text-muted-foreground transition-[width,opacity,margin] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none",
+                    pinned
+                      ? "ml-1.5 size-3.5 text-foreground"
+                      : "pointer-events-none ml-0 size-0 opacity-0 group-hover/folder:pointer-events-auto group-hover/folder:ml-1.5 group-hover/folder:size-3.5 group-hover/folder:opacity-100 group-focus-within/folder:pointer-events-auto group-focus-within/folder:ml-1.5 group-focus-within/folder:size-3.5 group-focus-within/folder:opacity-100",
+                  )}
+                >
+                  <HugeiconsIcon icon={PinIcon} className="size-3 shrink-0" aria-hidden />
+                </button>
+              </span>
+              <span className={EXPLORER_COUNT_CLASS}>{group.flows.length}</span>
+            </div>
+          )}
+        />
         <CollapsibleContent>
           <ul className="flex flex-col">
             {group.flows.map((f) => (

package/src/console/ui-next/src/features/units/lib/unit-tree.test.ts

@@ -10,6 +10,9 @@ import {
   countActiveFacets,
   filterUnitTree,
   filterUnitsAdvanced,
+  orderPinnedGroups,
+  parsePinnedUnits,
+  togglePinnedUnit,
   unitTreeAncestorKeys,
   unitTreeBandKey,
   unitTreeGroupKey,
@@ -289,6 +292,24 @@ describe("bandUnitTree", () => {
     expect(unitTreeAncestorKeys(bands, "missing")).toEqual([]);
   });
 
+  test("pinned folders rise to the front and toggle in newest-first order", () => {
+    const http = bandUnitTree(TREE)[0]!;
+    expect(parsePinnedUnits(["orders", "", "orders", 1, "billing"])).toEqual(["orders", "billing"]);
+    expect(parsePinnedUnits("orders")).toEqual([]);
+    expect(orderPinnedGroups(http.groups, ["orders"]).map((g) => g.unit)).toEqual([
+      "orders",
+      "billing",
+    ]);
+    expect(orderPinnedGroups(http.groups, []).map((g) => g.unit)).toEqual(["billing", "orders"]);
+    const pinned = togglePinnedUnit(togglePinnedUnit([], "billing"), "orders");
+    expect(pinned).toEqual(["orders", "billing"]);
+    expect(orderPinnedGroups(http.groups, pinned).map((g) => g.unit)).toEqual([
+      "orders",
+      "billing",
+    ]);
+    expect(togglePinnedUnit(pinned, "orders")).toEqual(["billing"]);
+  });
+
   test("bands and unit folders default closed unless searching", () => {
     expect(unitTreeIsOpen("band:http", {})).toBe(false);
     expect(unitTreeIsOpen("unit:http:billing", {})).toBe(false);

package/src/console/ui-next/src/features/units/lib/unit-tree.ts

@@ -87,6 +87,88 @@ export function bandUnitTree(groups: readonly UnitGroup[]): readonly UnitTreeBan
   });
 }
 
+/** localStorage key for pinned Units explorer folders. */
+export const PINNED_UNITS_KEY = "oke_units_pinned";
+
+/**
+ * Parse a stored pin list. Empty and duplicate names are dropped; order is kept.
+ *
+ * @param value - JSON from localStorage
+ */
+export function parsePinnedUnits(value: unknown): readonly string[] {
+  if (!Array.isArray(value)) return [];
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const item of value) {
+    if (typeof item !== "string" || item.length === 0 || seen.has(item)) continue;
+    seen.add(item);
+    out.push(item);
+  }
+  return out;
+}
+
+/**
+ * Load pinned unit folders from localStorage.
+ */
+export function loadPinnedUnits(): readonly string[] {
+  try {
+    if (typeof localStorage === "undefined") return [];
+    const raw = localStorage.getItem(PINNED_UNITS_KEY);
+    if (!raw) return [];
+    return parsePinnedUnits(JSON.parse(raw) as unknown);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Persist pinned unit folders. Newest pin is first.
+ *
+ * @param pinned - Unit names, newest first
+ */
+export function savePinnedUnits(pinned: readonly string[]): void {
+  try {
+    if (typeof localStorage === "undefined") return;
+    localStorage.setItem(PINNED_UNITS_KEY, JSON.stringify(pinned));
+  } catch {
+    // quota / private mode
+  }
+}
+
+/**
+ * Pin or unpin a unit folder. A new pin is placed first.
+ *
+ * @param pinned - Current pins, newest first
+ * @param unit - Unit name to toggle
+ */
+export function togglePinnedUnit(pinned: readonly string[], unit: string): readonly string[] {
+  return pinned.includes(unit) ? pinned.filter((item) => item !== unit) : [unit, ...pinned];
+}
+
+/**
+ * Lift pinned folders to the front of a band. Pin order is newest first;
+ * unpinned folders keep their current order.
+ *
+ * @param groups - Unit folders in one band
+ * @param pinned - Pinned unit names, newest first
+ */
+export function orderPinnedGroups(
+  groups: readonly UnitGroup[],
+  pinned: readonly string[],
+): readonly UnitGroup[] {
+  if (pinned.length === 0 || groups.length < 2) return groups;
+  const rank = new Map(pinned.map((unit, index) => [unit, index]));
+  return groups
+    .map((group, index) => ({ group, index, pin: rank.get(group.unit) }))
+    .sort((a, b) => {
+      if (a.pin !== undefined && b.pin !== undefined) return a.pin - b.pin;
+      if (a.pin !== undefined) return -1;
+      if (b.pin !== undefined) return 1;
+      return a.index - b.index;
+    })
+    .map((row) => row.group);
+}
+
 /**
  * Open-state key for a trigger-kind band in the Units tree.
  *

package/src/console/ui-next/src/features/units/units-page.tsx

@@ -1,5 +1,5 @@
 /**
- * Flows page — Manifest service catalog + docked Call API.
+ * Flows page — Manifest service catalog, contract, and a Call API rail.
  */
 
 import { useMemo, type JSX } from "react";
@@ -27,6 +27,7 @@ export function UnitsPage(): JSX.Element {
   useConsoleLive(true);
   const { selectedFlowId: urlFlowId, setSelectedFlow } = useUnitsSelection();
   const start = useExplorerStartPanel();
+  const callRail = useExplorerStartPanel();
   const groups = useMemo(() => buildUnitTree(manifestQuery.data ?? null), [manifestQuery.data]);
   const startToggle = (
     <ExplorerStartToggle
@@ -37,6 +38,16 @@ export function UnitsPage(): JSX.Element {
       dataSlot="flows-tree-toggle"
     />
   );
+  const callToggle = (
+    <ExplorerStartToggle
+      open={callRail.open}
+      onToggle={callRail.toggle}
+      noun="Call API"
+      controlsId="call-api-rail"
+      dataSlot="call-api-toggle"
+      side="end"
+    />
+  );
 
   const selectedFlowId = urlFlowId ?? groups[0]?.flows[0]?.id ?? null;
   const selectedRow = useMemo(() => {
@@ -79,25 +90,32 @@ export function UnitsPage(): JSX.Element {
           <div className="h-full min-h-0 overflow-hidden">
             {selectedRow ? (
               <ResizablePanelGroup
-                orientation="vertical"
+                orientation="horizontal"
                 className="min-h-0 flex-1"
                 data-slot="units-inspector"
               >
-                <ResizablePanel defaultSize="56%" minSize="28%" className="min-h-0 overflow-hidden">
+                <ResizablePanel defaultSize="62%" minSize="36%" className="min-h-0 overflow-hidden">
                   <FlowContractPanel
                     row={selectedRow}
                     manifest={manifestQuery.data ?? null}
                     runs={runs.data}
                     leading={startToggle}
+                    trailing={callToggle}
                   />
                 </ResizablePanel>
-                <ResizableHandle withHandle />
+                {callRail.open ? <ResizableHandle withHandle /> : null}
                 <ResizablePanel
-                  defaultSize="44%"
-                  minSize="220px"
+                  panelRef={callRail.panelRef}
+                  collapsible
+                  collapsedSize={0}
+                  defaultSize="38%"
+                  minSize="352px"
+                  onResize={callRail.onResize}
                   className="min-h-0 overflow-hidden"
                 >
-                  <CallApiPanel row={selectedRow} manifest={manifestQuery.data ?? null} />
+                  <div id="call-api-rail" className="h-full min-h-0 overflow-hidden">
+                    <CallApiPanel row={selectedRow} manifest={manifestQuery.data ?? null} />
+                  </div>
                 </ResizablePanel>
               </ResizablePanelGroup>
             ) : (

package/src/console/ui-next/src/router.tsx

@@ -107,6 +107,22 @@ const flowsRoute = createRoute({
   component: lazyRouteComponent(() => import("./features/units/units-page.tsx"), "UnitsPage"),
 });
 
+const decisionsRoute = createRoute({
+  getParentRoute: () => authenticatedRoute,
+  path: "/flows/decisions",
+  validateSearch: (search: Record<string, unknown>) => {
+    const decision =
+      typeof search.decision === "string" && search.decision.length > 0
+        ? search.decision
+        : undefined;
+    return { ...(decision !== undefined ? { decision } : {}) };
+  },
+  component: lazyRouteComponent(
+    () => import("./features/flows/decisions/decisions-page.tsx"),
+    "DecisionsPage",
+  ),
+});
+
 const storeRoute = createRoute({
   getParentRoute: () => authenticatedRoute,
   path: "/store",
@@ -152,6 +168,7 @@ const routeTree = rootRoute.addChildren([
   authenticatedRoute.addChildren([
     overviewRoute,
     flowsRoute,
+    decisionsRoute,
     storeRoute,
     vaultRoute,
     accessRoute,

package/src/console/ui-next/ui-next-seed-runs.ts

@@ -363,6 +363,29 @@ export function createUiNextSeedRuns(now: number = Date.now()): readonly WideEve
     replica: "replica",
     replicaLagMs: 12,
     buildVersion: BUILD,
+    http: {
+      request: {
+        method: "GET",
+        path: "/tasks",
+        query: { limit: "20" },
+        headers: {
+          accept: "application/json",
+          authorization: "[redacted]",
+          host: "localhost:6530",
+          "user-agent":
+            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+          "sec-ch-ua-platform": '"macOS"',
+          "sec-ch-ua-mobile": "?0",
+          "cf-connecting-ip": "203.0.113.10",
+        },
+      },
+      response: {
+        status: 200,
+        headers: {
+          "content-type": "application/json",
+        },
+      },
+    },
     output: {
       count: 3,
       tasks: [

package/src/console/ui-next/vite-console-kernel-plugin.ts

@@ -15,7 +15,7 @@
 import type { Plugin, ViteDevServer } from "vite";
 import { isPortInUse } from "../../cli/ports.ts";
 import { CONSOLE_PORT } from "../../runtime/types.ts";
-import { serveConsole, type ConsoleServerHandle } from "../server/serve.ts";
+import type { ConsoleServerHandle } from "../server/serve.ts";
 import {
   isConsoleFresh,
   isConsoleKernelSkipped,
@@ -30,6 +30,21 @@ import {
   uiNextSeededSummary,
 } from "./ui-next-seed.ts";
 
+/**
+ * Load a Console module from its source file.
+ *
+ * Vite bundles this plugin into a config chunk. A literal `import()` is
+ * inlined there, and Bun `import.meta.dir` then points at that chunk, so
+ * `lazyRequire` looks for `aot.js` beside the chunk. A variable specifier
+ * stays out of the bundle and keeps the real source directory.
+ *
+ * @param relativePath - Path relative to this plugin file
+ */
+async function importSource<T>(relativePath: string): Promise<T> {
+  const href = new URL(relativePath, import.meta.url).href;
+  return (await import(href)) as T;
+}
+
 /** Vite SPA URL for ui-next (proxies `/console` → kernel :6533). */
 const UI_NEXT_DEV_URL = "http://127.0.0.1:6537";
 
@@ -78,6 +93,7 @@ function printConsoleNextBanner(
 export function okeConsoleKernelPlugin(): Plugin {
   let handle: ConsoleServerHandle | null = null;
   let stopping = false;
+  let parkedStop: (() => Promise<void>) | null = null;
 
   const stop = (): void => {
     if (stopping || !handle) return;
@@ -87,6 +103,8 @@ export function okeConsoleKernelPlugin(): Plugin {
     } catch {
       // ignore
     }
+    void parkedStop?.();
+    parkedStop = null;
     handle = null;
   };
 
@@ -133,6 +151,15 @@ export function okeConsoleKernelPlugin(): Plugin {
 
       const operators = fresh ? undefined : (await seedUiNextDevOperator()).store;
 
+      const parked = seeded
+        ? await importSource<typeof import("./seed-parked-approval.ts")>(
+            "./seed-parked-approval.ts",
+          ).then((mod) => mod.bootParkedApproval())
+        : null;
+      if (parked) parkedStop = () => parked.stop();
+
+      const { serveConsole } =
+        await importSource<typeof import("../server/serve.ts")>("../server/serve.ts");
       handle = await serveConsole({
         port,
         hostname,
@@ -142,10 +169,21 @@ export function okeConsoleKernelPlugin(): Plugin {
         env: "test",
         secret: process.env.OKE_CONSOLE_SECRET ?? "oke-console-next-dev-secret",
         ...(operators ? { operators } : {}),
+        ...(parked ? { journalStore: parked.store } : {}),
         ...(seeded
           ? { manifest: UI_NEXT_SEEDED_MANIFEST, vaultLayerSeed: UI_NEXT_SEED_VAULT_LAYERS }
           : {}),
       });
+      if (parked) {
+        handle.console.state.forwardAgent = (request) => parked.fetch(request);
+        handle.console.state.afterAgentApproval = () => parked.resume();
+        if (parked.log) {
+          const { setAgentEventLog } = await importSource<
+            typeof import("../../elements/ai/run-events.ts")
+          >("../../elements/ai/run-events.ts");
+          setAgentEventLog(parked.log);
+        }
+      }
 
       if (seeded) {
         const runs = handle.console.app.bootResult?.runs;
@@ -154,7 +192,8 @@ export function okeConsoleKernelPlugin(): Plugin {
         }
         await appendUiNextSeedRun(runs);
         if (handle.console.state.storeRuntime) {
-          const { seedUiNextStoreData } = await import("./ui-next-seed.ts");
+          const { seedUiNextStoreData } =
+            await importSource<typeof import("./ui-next-seed.ts")>("./ui-next-seed.ts");
           await seedUiNextStoreData(handle.console.state.storeRuntime);
         }
         // Same thin host substitute as the Playwright fixture — Replay hits
@@ -162,7 +201,8 @@ export function okeConsoleKernelPlugin(): Plugin {
         handle.console.state.replayTrace = async ({ event, dryRun }) => ({
           output: { replayed: event.id, dryRun, input: event.input ?? null },
         });
-        const { bootUiNextSeedInvoke } = await import("./seed-invoke-host.ts");
+        const { bootUiNextSeedInvoke } =
+          await importSource<typeof import("./seed-invoke-host.ts")>("./seed-invoke-host.ts");
         const seedInvoke = await bootUiNextSeedInvoke({
           ...(handle.console.state.storeRuntime
             ? { storeRuntime: handle.console.state.storeRuntime }

package/src/console/ui-next/vite.config.ts

@@ -82,6 +82,15 @@ export default defineConfig(({ command }) => {
           changeOrigin: true,
           ws: true,
         },
+        "/agent": {
+          // `oke dev` serves follow on the app (:6530). An explicit
+          // `OKE_CONSOLE_PROXY` is the Console kernel, which forwards `/agent`.
+          target:
+            attachToOkeDev && process.env["OKE_CONSOLE_PROXY"] === undefined
+              ? "http://127.0.0.1:6530"
+              : consoleProxy,
+          changeOrigin: true,
+        },
       },
     },
   };

package/src/docker/recipes/dragonfly.ts

@@ -1,7 +1,8 @@
 /**
- * Dragonfly image recipe — Redis-wire-compatible, multi-threaded alternative.
+ * Dragonfly image recipe — default `store.kv` pin.
  *
- * Peer of Redis / Valkey via `images["store.kv"]` (driver id stays `redis`).
+ * Redis-wire-compatible and multi-threaded. Peer of Redis / Valkey via
+ * `images["store.kv"]` (driver id stays `redis`).
  * Official image: `docker.dragonflydb.io/dragonflydb/dragonfly`.
  */
 

package/src/docker/recipes/redis.ts

@@ -1,5 +1,5 @@
 /**
- * Redis image recipe — default `store.kv` pin (`redis:*`).
+ * Redis image recipe — opt-in `store.kv` pin (`redis:*`).
  *
  * Valkey and Dragonfly are separate recipes — same `redis` driver /
  * `redis://` URL, different binaries. Pin via `images["store.kv"]`.