okengine 0.11.2 → 0.13.0

package/src/console/ui-next/src/features/store/schema/schema-visualizer.tsx

@@ -0,0 +1,273 @@
+/**
+ * SQL schema visualizer — table cards + declared / inferred FK edges.
+ */
+
+import { useCallback, useEffect, useMemo, useState, type JSX, type ReactNode } from "react";
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+} from "@xyflow/react";
+import { ColorsIcon, Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import "@xyflow/react/dist/style.css";
+import type { Manifest } from "../../../../../../manifest/types.ts";
+import type { StoreListStore } from "@/client.ts";
+import {
+  EXPLORER_COUNT_CLASS,
+  EXPLORER_TOOLBAR_CLASS,
+  SECTION_HEAD_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { ExplorerSearch } from "@/components/explorer/explorer-search.tsx";
+import { SheetTextToggle } from "@/components/ui/sheet-form.tsx";
+import { useTheme } from "@/components/theme-provider";
+import { useReducedMotion } from "@/lib/motion";
+import { cn } from "@/lib/utils.ts";
+import { colorizeSchemaGraph } from "../lib/schema-color.ts";
+import {
+  buildSchemaGraph,
+  emphasizeSchemaEdges,
+  emphasizeSchemaNodes,
+  schemaGraphTables,
+  schemaGraphToSql,
+  type SchemaGraphEdge,
+  type SchemaGraphNode,
+} from "../lib/schema-graph.ts";
+import { SchemaConstraintIcon } from "./schema-constraint-icon.tsx";
+import { schemaGraphEdgeTypes } from "./schema-relation-edge.tsx";
+import { SchemaRelationIcon } from "./schema-relation-icon.tsx";
+import { schemaGraphNodeTypes } from "./schema-table-node.tsx";
+
+/** Props for {@link SchemaVisualizer}. */
+export interface SchemaVisualizerProps {
+  readonly stores: readonly StoreListStore[];
+  readonly manifest: Manifest | null;
+  readonly selectedEffectRef: string | null;
+  readonly onSelectTable: (effectRef: string) => void;
+  /** Start-panel collapse control. */
+  readonly leading?: ReactNode;
+}
+
+/**
+ * Full-pane ER canvas for Manifest SQL tables.
+ *
+ * @param props - Stores + Manifest + selection
+ */
+export function SchemaVisualizer(props: SchemaVisualizerProps): JSX.Element {
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-hidden"
+      data-slot="store-schema-visualizer"
+    >
+      <ReactFlowProvider>
+        <Canvas {...props} />
+      </ReactFlowProvider>
+    </div>
+  );
+}
+
+function Canvas({
+  stores,
+  manifest,
+  selectedEffectRef,
+  onSelectTable,
+  leading,
+}: SchemaVisualizerProps): JSX.Element {
+  const { fitView } = useReactFlow();
+  const { theme } = useTheme();
+  const reduceMotion = useReducedMotion();
+  const [query, setQuery] = useState("");
+  const [layoutTick, setLayoutTick] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const [colorize, setColorize] = useState(true);
+  const [isolate, setIsolate] = useState(true);
+
+  const colorMode =
+    theme === "system"
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+      : theme;
+
+  const tables = useMemo(() => schemaGraphTables(stores, manifest), [stores, manifest]);
+  const graph = useMemo(
+    () => colorizeSchemaGraph(buildSchemaGraph(tables), colorize),
+    [tables, colorize],
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState<SchemaGraphNode>([...graph.nodes]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<SchemaGraphEdge>([...graph.edges]);
+
+  useEffect(() => {
+    setNodes(emphasizeSchemaNodes(graph.nodes, query, selectedEffectRef, graph.edges, isolate));
+    setEdges(emphasizeSchemaEdges(graph.edges, selectedEffectRef, isolate, reduceMotion !== true));
+  }, [graph, isolate, layoutTick, query, reduceMotion, selectedEffectRef, setEdges, setNodes]);
+
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      void fitView({ padding: 0.18, duration: 240 });
+    }, 40);
+    return () => window.clearTimeout(id);
+  }, [fitView, layoutTick, tables.length]);
+
+  const copySql = useCallback(async () => {
+    const sql = schemaGraphToSql(tables);
+    if (sql.length === 0) return;
+    try {
+      await navigator.clipboard.writeText(sql);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1400);
+    } catch {
+      setCopied(false);
+    }
+  }, [tables]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className={EXPLORER_TOOLBAR_CLASS} data-slot="store-schema-toolbar">
+        {leading ? (
+          <>
+            {leading}
+            <span className="w-px shrink-0 self-stretch bg-border/60" aria-hidden />
+          </>
+        ) : null}
+        <span className={cn(SECTION_HEAD_CLASS, "flex items-center px-2")}>Schema</span>
+        <span className="w-px shrink-0 self-stretch bg-border/60" aria-hidden />
+        <ExplorerSearch
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Find table…"
+          aria-label="Find table"
+          data-slot="store-schema-find"
+        />
+        <span className={cn(EXPLORER_COUNT_CLASS, "flex items-center px-2")}>
+          {tables.length} {tables.length === 1 ? "table" : "tables"}
+        </span>
+        <span className="w-px shrink-0 self-stretch bg-border/60" aria-hidden />
+        <div className="flex shrink-0 items-stretch">
+          <SheetTextToggle
+            active={colorize}
+            aria-pressed={colorize}
+            onClick={() => setColorize((v) => !v)}
+            className="h-full"
+            data-slot="store-schema-colorize"
+          >
+            <HugeiconsIcon icon={ColorsIcon} className="size-3" aria-hidden />
+            Colorize
+          </SheetTextToggle>
+          <SheetTextToggle
+            active={copied}
+            disabled={tables.length === 0}
+            onClick={() => void copySql()}
+            className="h-full disabled:pointer-events-none disabled:opacity-40"
+            data-slot="store-schema-copy-sql"
+          >
+            <HugeiconsIcon icon={copied ? Tick02Icon : Copy01Icon} className="size-3" aria-hidden />
+            {copied ? "Copied" : "Copy as SQL"}
+          </SheetTextToggle>
+          <SheetTextToggle
+            active={false}
+            disabled={tables.length === 0}
+            onClick={() => setLayoutTick((n) => n + 1)}
+            className="h-full disabled:pointer-events-none disabled:opacity-40"
+            data-slot="store-schema-auto-layout"
+          >
+            Auto layout
+          </SheetTextToggle>
+        </div>
+      </div>
+      <div className="relative min-h-0 flex-1">
+        {tables.length === 0 ? (
+          <div className="flex h-full items-center justify-center p-6">
+            <p className="text-sm text-muted-foreground">No SQL tables to visualize.</p>
+          </div>
+        ) : (
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={schemaGraphNodeTypes}
+            edgeTypes={schemaGraphEdgeTypes}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            colorMode={colorMode}
+            fitView
+            nodesConnectable={false}
+            elementsSelectable
+            proOptions={{ hideAttribution: true }}
+            minZoom={0.15}
+            maxZoom={1.8}
+            defaultEdgeOptions={{
+              type: "relation",
+              style: { stroke: "#38BDF8", strokeWidth: 1.5 },
+            }}
+            onNodeClick={(_, node) => {
+              setIsolate(true);
+              onSelectTable(node.id);
+            }}
+            onPaneClick={() => setIsolate(false)}
+            data-slot="store-schema-canvas"
+          >
+            <Background
+              gap={24}
+              size={1}
+              color="color-mix(in oklab, var(--foreground) 14%, transparent)"
+            />
+            <Controls showInteractive={false} />
+            <MiniMap
+              pannable
+              zoomable
+              ariaLabel="Schema graph overview"
+              bgColor="var(--card)"
+              maskColor="color-mix(in oklab, var(--background) 55%, transparent)"
+              nodeColor={(node) => {
+                const hex = (node.data as SchemaGraphNode["data"]).color?.hex;
+                return hex ?? "#64748B";
+              }}
+              nodeStrokeColor="transparent"
+              nodeStrokeWidth={12}
+              nodeBorderRadius={8}
+            />
+          </ReactFlow>
+        )}
+        <div className="pointer-events-none absolute bottom-3 left-1/2 z-10 max-w-[min(720px,calc(100%-2rem))] -translate-x-1/2">
+          <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5 rounded-md border border-border/60 bg-background/80 px-2 py-1 text-[10px] text-muted-foreground backdrop-blur-sm">
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaConstraintIcon kind="pk" />
+              primary
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaConstraintIcon kind="fk" />
+              foreign
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaConstraintIcon kind="unique" />
+              unique
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaRelationIcon kind="many-to-one" />
+              many
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaRelationIcon kind="one-to-one" />
+              one
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaRelationIcon kind="many-to-many" />
+              join
+            </span>
+            <span className="inline-flex items-center gap-0.5">
+              <SchemaRelationIcon kind="self" />
+              self
+            </span>
+            <span>dashed = inferred</span>
+            <span>filled = not null</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/console/ui-next/src/features/store/state/store-selection.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { validateStoreSearch } from "./store-selection.ts";
+
+describe("validateStoreSearch", () => {
+  test("keeps resource and tenant", () => {
+    expect(validateStoreSearch({ resource: "sql:bookings", tenant: "acme" })).toEqual({
+      resource: "sql:bookings",
+      tenant: "acme",
+    });
+  });
+
+  test("accepts the query console view", () => {
+    expect(validateStoreSearch({ view: "query", facet: "sql" })).toEqual({
+      view: "query",
+      facet: "sql",
+    });
+    expect(validateStoreSearch({ view: "query", facet: "kv" })).toEqual({
+      view: "query",
+      facet: "kv",
+    });
+  });
+
+  test("accepts the schema visualizer view", () => {
+    expect(validateStoreSearch({ view: "schema" })).toEqual({ view: "schema" });
+  });
+
+  test("accepts the query performance view", () => {
+    expect(validateStoreSearch({ view: "performance" })).toEqual({ view: "performance" });
+    expect(validateStoreSearch({ view: "performance", facet: "kv" })).toEqual({
+      view: "performance",
+      facet: "kv",
+    });
+  });
+
+  test("drops unknown view / facet", () => {
+    expect(validateStoreSearch({ view: "browse", facet: "files" })).toEqual({});
+  });
+});

package/src/console/ui-next/src/features/store/state/store-selection.ts

@@ -0,0 +1,154 @@
+/**
+ * Store page URL search — selected resource effectRef + optional tenant.
+ */
+
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+/** Facets that expose a query console. */
+export type StoreQueryFacet = "sql" | "kv";
+
+/** Right-pane views on `/store` besides resource browse. */
+export type StoreView = "query" | "schema" | "performance";
+
+/** Search params for `/store`. */
+export interface StoreSearch {
+  readonly resource?: string;
+  readonly tenant?: string;
+  /** `query` = SQL / KV console; `schema` = ER; `performance` = engine stats. */
+  readonly view?: StoreView;
+  readonly facet?: StoreQueryFacet;
+}
+
+/**
+ * Validate Store search params from the router.
+ *
+ * @param search - Raw search object
+ */
+export function validateStoreSearch(search: Record<string, unknown>): StoreSearch {
+  const resource =
+    typeof search.resource === "string" && search.resource.length > 0 ? search.resource : undefined;
+  const tenant =
+    typeof search.tenant === "string" && search.tenant.length > 0 ? search.tenant : undefined;
+  const view =
+    search.view === "query" || search.view === "schema" || search.view === "performance"
+      ? search.view
+      : undefined;
+  const facet = search.facet === "sql" || search.facet === "kv" ? search.facet : undefined;
+  return {
+    ...(resource !== undefined ? { resource } : {}),
+    ...(tenant !== undefined ? { tenant } : {}),
+    ...(view !== undefined ? { view } : {}),
+    ...(facet !== undefined ? { facet } : {}),
+  };
+}
+
+/**
+ * Read + write the Store page selection from the URL.
+ */
+export function useStoreSelection() {
+  const search = useSearch({ strict: false }) as StoreSearch;
+  const navigate = useNavigate();
+
+  const selectedResource = typeof search.resource === "string" ? search.resource : null;
+  const selectedTenant = typeof search.tenant === "string" ? search.tenant : null;
+  const queryFacet: StoreQueryFacet | null =
+    search.view === "query" && (search.facet === "sql" || search.facet === "kv")
+      ? search.facet
+      : null;
+  const schemaView = search.view === "schema";
+  const performanceView = search.view === "performance";
+  const performanceFacet: StoreQueryFacet | null = performanceView
+    ? search.facet === "kv"
+      ? "kv"
+      : "sql"
+    : null;
+
+  const setSelectedResource = useCallback(
+    (resource: string | null, options?: { readonly keepView?: boolean }) => {
+      void navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          resource: resource ?? undefined,
+          ...(options?.keepView ? {} : { view: undefined, facet: undefined }),
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const setQueryFacet = useCallback(
+    (next: StoreQueryFacet | null) => {
+      void navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          view: next ? ("query" as const) : undefined,
+          facet: next ?? undefined,
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const setSchemaView = useCallback(
+    (open: boolean) => {
+      void navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          view: open ? ("schema" as const) : undefined,
+          facet: undefined,
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const setPerformanceView = useCallback(
+    (open: boolean, facet?: StoreQueryFacet) => {
+      void navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          view: open ? ("performance" as const) : undefined,
+          facet: open && facet === "kv" ? ("kv" as const) : undefined,
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const setSelectedTenant = useCallback(
+    (tenant: string | null) => {
+      void navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          tenant: tenant ?? undefined,
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  return {
+    selectedResource,
+    selectedTenant,
+    queryFacet,
+    schemaView,
+    performanceView,
+    performanceFacet,
+    setSelectedResource,
+    setSelectedTenant,
+    setQueryFacet,
+    setSchemaView,
+    setPerformanceView,
+  };
+}

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

@@ -0,0 +1,180 @@
+/**
+ * Store page — read-first operator browse (facet tree + schema + browse + reveal).
+ */
+
+import { useMemo, type JSX } from "react";
+import { ExplorerEmpty } from "@/components/explorer/explorer-empty.tsx";
+import { ExplorerStartToggle } from "@/components/explorer/explorer-start-toggle.tsx";
+import { EXPLORER_PAGE_CLASS, EXPLORER_SPLIT } from "@/components/explorer/explorer-chrome.ts";
+import { useExplorerStartPanel } from "@/components/explorer/use-explorer-start-panel.ts";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { ELEMENT_ICONS } from "@/lib/element-icons.ts";
+import { useConsoleLive } from "@/features/flows/data/use-console-live.ts";
+import { useManifest } from "@/features/flows/data/use-manifest.ts";
+import { useRuns } from "@/features/flows/data/use-runs.ts";
+import { useStoresList } from "./data/use-stores-list.ts";
+import { ResourcePanel } from "./detail/resource-panel.tsx";
+import { StoreTree } from "./explorer/store-tree.tsx";
+import { findByEffectRef, firstEffectRef } from "./lib/store-tree.ts";
+import { PerformancePanel } from "./performance/performance-panel.tsx";
+import { QueryConsole } from "./query/query-console.tsx";
+import { SchemaVisualizer } from "./schema/schema-visualizer.tsx";
+import { useStoreSelection } from "./state/store-selection.ts";
+
+/**
+ * Store explorer page (~28% tree / ~72% detail).
+ */
+export function StorePage(): JSX.Element {
+  const list = useStoresList();
+  const manifestQuery = useManifest();
+  const runs = useRuns();
+  useConsoleLive(true);
+  const {
+    selectedResource,
+    selectedTenant,
+    queryFacet,
+    schemaView,
+    performanceView,
+    performanceFacet,
+    setSelectedResource,
+    setSelectedTenant,
+    setQueryFacet,
+    setSchemaView,
+    setPerformanceView,
+  } = useStoreSelection();
+  const start = useExplorerStartPanel();
+  const startToggle = (
+    <ExplorerStartToggle
+      open={start.open}
+      onToggle={start.toggle}
+      noun="store"
+      controlsId="store-tree"
+      dataSlot="store-tree-toggle"
+    />
+  );
+
+  const stores = list.data?.stores ?? [];
+  const effectRef = selectedResource ?? firstEffectRef(stores);
+  const selection = useMemo(
+    () => (effectRef ? findByEffectRef(stores, effectRef) : null),
+    [stores, effectRef],
+  );
+
+  return (
+    <div className={EXPLORER_PAGE_CLASS} data-slot="store-page">
+      <ResizablePanelGroup orientation="horizontal" className="min-h-0 flex-1">
+        <ResizablePanel
+          panelRef={start.panelRef}
+          collapsible
+          collapsedSize={0}
+          defaultSize={EXPLORER_SPLIT.start.defaultSize}
+          minSize={EXPLORER_SPLIT.start.minSize}
+          onResize={start.onResize}
+          className="min-h-0 overflow-hidden"
+        >
+          <div id="store-tree" className="h-full min-h-0 overflow-hidden" data-slot="store-tree">
+            <StoreTree
+              stores={stores}
+              selectedEffectRef={effectRef}
+              onSelect={(ref) => {
+                setSelectedResource(ref, {
+                  keepView: schemaView || performanceView,
+                });
+              }}
+              queryFacet={queryFacet}
+              schemaActive={schemaView}
+              performanceActive={performanceView}
+              performanceFacet={performanceFacet}
+              onOpenQuery={(facet) => {
+                setQueryFacet(queryFacet === facet ? null : facet);
+              }}
+              onOpenSchema={() => {
+                setSchemaView(!schemaView);
+              }}
+              onOpenPerformance={(facet) => {
+                const current = performanceFacet ?? "sql";
+                if (performanceView && current === facet) {
+                  setPerformanceView(false);
+                } else {
+                  setPerformanceView(true, facet);
+                }
+              }}
+            />
+          </div>
+        </ResizablePanel>
+        {start.open ? <ResizableHandle withHandle /> : null}
+        <ResizablePanel
+          defaultSize={EXPLORER_SPLIT.end.defaultSize}
+          minSize={EXPLORER_SPLIT.end.minSize}
+          className="min-h-0 overflow-hidden"
+        >
+          <div className="h-full min-h-0 overflow-hidden">
+            <div className="flex h-full min-h-0 flex-col overflow-hidden">
+              {schemaView ? (
+                <SchemaVisualizer
+                  stores={stores}
+                  manifest={manifestQuery.data ?? null}
+                  selectedEffectRef={effectRef}
+                  onSelectTable={(ref) => setSelectedResource(ref, { keepView: true })}
+                  leading={startToggle}
+                />
+              ) : performanceView ? (
+                <PerformancePanel
+                  stores={stores}
+                  selectedEffectRef={effectRef}
+                  tenant={selectedTenant}
+                  facet={performanceFacet ?? "sql"}
+                  leading={startToggle}
+                />
+              ) : queryFacet ? (
+                <QueryConsole
+                  key={queryFacet}
+                  facet={queryFacet}
+                  stores={stores}
+                  selectedEffectRef={effectRef}
+                  tenancyDeclared={list.data?.tenancyDeclared ?? false}
+                  tenants={list.data?.tenants ?? []}
+                  tenant={selectedTenant}
+                  onTenantChange={setSelectedTenant}
+                  manifest={manifestQuery.data ?? null}
+                  leading={startToggle}
+                />
+              ) : selection ? (
+                <ResourcePanel
+                  store={selection.store}
+                  child={selection.child}
+                  manifest={manifestQuery.data ?? null}
+                  tenancyDeclared={list.data?.tenancyDeclared ?? false}
+                  tenants={list.data?.tenants ?? []}
+                  tenant={selectedTenant}
+                  onTenantChange={setSelectedTenant}
+                  runs={runs.data ?? []}
+                  leading={startToggle}
+                />
+              ) : (
+                <ExplorerEmpty
+                  leading={startToggle}
+                  icon={ELEMENT_ICONS.store.icon}
+                  title={
+                    list.isLoading
+                      ? "Loading stores…"
+                      : list.isError
+                        ? "Store unavailable"
+                        : "Select a resource"
+                  }
+                  description={
+                    list.isLoading
+                      ? "Reading store catalogs."
+                      : list.isError
+                        ? list.error.message
+                        : "Pick a table, namespace, bucket, or index from the tree."
+                  }
+                />
+              )}
+            </div>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}