rastack 0.0.62 → 0.0.64

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.64](https://github.com/theserverkid/reactapistack/compare/v0.0.63...v0.0.64) (2026-07-20)
+
+
+### Features
+
+* **define,provider:** nullable FK relations + bundled-warehouse seed ([276f8c6](https://github.com/theserverkid/reactapistack/commit/276f8c6d6555a6dbcb8965926009f0ddd076ad96))
+
+### [0.0.63](https://github.com/theserverkid/reactapistack/compare/v0.0.62...v0.0.63) (2026-07-20)
+
+
+### Features
+
+* **deploy:** dev + prod environments with per-env Cognito, proxy, and .env ([996e726](https://github.com/theserverkid/reactapistack/commit/996e726e7e0d55f01e3111579594c2b66e88a79c))
+
 ### [0.0.62](https://github.com/theserverkid/reactapistack/compare/v0.0.61...v0.0.62) (2026-07-19)
 
 

package/admin/AdminApp.tsx

@@ -10,7 +10,7 @@
  * Layout: models on the left (`<Sidebar>`), the changelist table in the main
  * area, a Linear-style filter bar on top (`<FilterBar>`), and add/change forms.
  */
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   AutoForm,
   Button,
@@ -28,9 +28,11 @@ import {
   mergeDiscovered,
 } from "./adapters";
 import {
+  RefreshContext,
   useDashboardStats,
   useDeleteRecord,
   useFilterModel,
+  useRefresh,
   useResourceForm,
   useResourceTable,
 } from "./useAdmin";
@@ -56,6 +58,7 @@ import {
   IconLayers,
   IconLink,
   IconPlus,
+  IconRefresh,
   IconTable,
   IconTrash,
 } from "./ui/icons";
@@ -100,7 +103,43 @@ interface Crumb {
   hash?: string;
 }
 
+/** Compact relative age, e.g. "just now", "3m ago", "2h ago". */
+function formatAgo(ts: number, now: number): string {
+  if (!ts) return "—";
+  const secs = Math.max(0, Math.round((now - ts) / 1000));
+  if (secs < 5) return "just now";
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.round(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.round(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.round(hrs / 24)}d ago`;
+}
+
+/** The "Updated …" label — ticks over time and snaps fresh when data lands. */
+function LastUpdated(): React.JSX.Element {
+  const { lastUpdated } = useRefresh();
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 30_000);
+    return () => window.clearInterval(id);
+  }, []);
+  useEffect(() => setNow(Date.now()), [lastUpdated]);
+  return (
+    <span className="ras-updated" style={{ marginLeft: "auto" }}>
+      Updated {formatAgo(lastUpdated, now)}
+    </span>
+  );
+}
+
 function Topbar({ crumbs }: { crumbs: Crumb[] }): React.JSX.Element {
+  const { refresh } = useRefresh();
+  const [spinning, setSpinning] = useState(false);
+  const onReload = () => {
+    setSpinning(true);
+    refresh();
+    window.setTimeout(() => setSpinning(false), 500);
+  };
   return (
     <header className="ras-topbar">
       <nav className="ras-crumbs">
@@ -115,6 +154,16 @@ function Topbar({ crumbs }: { crumbs: Crumb[] }): React.JSX.Element {
           </React.Fragment>
         ))}
       </nav>
+      <LastUpdated />
+      <button
+        type="button"
+        className="ras-icon-btn"
+        onClick={onReload}
+        title="Reload data"
+        aria-label="Reload data"
+      >
+        <IconRefresh size={16} className={spinning ? "ras-spin" : undefined} />
+      </button>
     </header>
   );
 }
@@ -695,6 +744,10 @@ export function AdminApp(props: {
   const { engine } = props;
   const resources = useDiscoveredResources(engine, props.resources);
   const [collapsed, toggleCollapsed] = useSidebarCollapsed();
+  const [nonce, setNonce] = useState(0);
+  const [lastUpdated, setLastUpdated] = useState(0);
+  const refresh = useCallback(() => setNonce((n) => n + 1), []);
+  const markUpdated = useCallback(() => setLastUpdated(Date.now()), []);
 
   const activeKey =
     route.name === "index" ? undefined : `${route.app}.${route.model}`;
@@ -737,7 +790,7 @@ export function AdminApp(props: {
   }
 
   return (
-    <>
+    <RefreshContext.Provider value={{ nonce, refresh, lastUpdated, markUpdated }}>
       <AdminStyles />
       <div className={"ras-root" + (collapsed ? " is-collapsed" : "")}>
         <Sidebar
@@ -748,6 +801,6 @@ export function AdminApp(props: {
         />
         <main className="ras-main">{screen}</main>
       </div>
-    </>
+    </RefreshContext.Provider>
   );
 }

package/admin/index.tsx

@@ -132,8 +132,14 @@ function Boot(): React.JSX.Element {
       openapi={openapi}
       loadEngine={loadEngine}
       warehouseBaseUrl={cfg.warehouseBaseUrl ?? "/data/warehouse/"}
-      persist={false}
-      cache={false}
+      // In local mode the WASM warehouse *is* the database — there is no server
+      // behind it. So edits (creates/updates/deletes) MUST persist to IndexedDB;
+      // otherwise every reload re-seeds from the committed `/data/warehouse/`
+      // and silently resurrects deleted rows. The Iceberg file cache (`cache`,
+      // on by default) still makes those reloads fast — it caches the immutable
+      // Parquet used for the *first* seed; the persisted warehouse blob, once it
+      // exists, wins over re-seeding and carries the user's edits forward.
+      persist={true}
     >
       <ThemeProvider tokens={theme}>
         <LocalAdmin resources={resources} />

package/admin/ui/icons.tsx

@@ -152,6 +152,15 @@ export const IconArrowUpRight = (p: SvgProps) => (
   </Svg>
 );
 
+export const IconRefresh = (p: SvgProps) => (
+  <Svg {...p}>
+    <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+    <path d="M3 21v-5h5" />
+  </Svg>
+);
+
 export const IconPanelLeft = (p: SvgProps) => (
   <Svg {...p}>
     <rect x="3.5" y="4.5" width="17" height="15" rx="2" />

package/admin/ui/styles.ts

@@ -192,6 +192,8 @@ a { color: inherit; text-decoration: none; }
   transition: background 0.14s, color 0.14s, border-color 0.14s;
 }
 .ras-icon-btn:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 22%, transparent); }
+@keyframes ras-spin { to { transform: rotate(360deg); } }
+.ras-spin { animation: ras-spin 0.5s linear; }
 
 /* ---- top bar ------------------------------------------------------------- */
 .ras-topbar {
@@ -212,6 +214,7 @@ a { color: inherit; text-decoration: none; }
 .ras-crumbs a:hover { color: var(--color-text); }
 .ras-crumb-sep { color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); }
 .ras-crumb-current { color: var(--color-text); font-weight: 600; }
+.ras-updated { font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; }
 
 .ras-content { padding: 26px 28px 64px; max-width: 1240px; width: 100%; }
 

package/admin/useAdmin.ts

@@ -7,7 +7,14 @@
  * one admin serves any app.
  */
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import type { RastackEngine } from "../provider/types";
 import type { AutoFormField, AutoFormLike, TableQuery } from "../components/types";
 import type {
@@ -45,6 +52,30 @@ interface EngineResult {
 }
 const ok = (r: EngineResult) => r.status >= 200 && r.status < 300;
 
+/**
+ * A global "reload" signal for the admin. The engine holds the live data (the
+ * WASM warehouse under `rastack dev`, the real `rastack-server` under
+ * `rastack admin`), so a manual reload just re-runs the read effects against it.
+ * `nonce` bumps on every {@link RefreshApi.refresh}; the data hooks include it in
+ * their fetch deps so they refetch **without** resetting filters/paging. The
+ * default value keeps the hooks usable with no provider (tests, embedding).
+ */
+export interface RefreshApi {
+  nonce: number;
+  refresh: () => void;
+  /** Epoch ms of the most recent successful load (0 before the first). */
+  lastUpdated: number;
+  /** Called by the data hooks when a fetch resolves, to stamp {@link lastUpdated}. */
+  markUpdated: () => void;
+}
+export const RefreshContext = createContext<RefreshApi>({
+  nonce: 0,
+  refresh: () => {},
+  lastUpdated: 0,
+  markUpdated: () => {},
+});
+export const useRefresh = (): RefreshApi => useContext(RefreshContext);
+
 /** What `useResourceTable` returns: a `TableQuery` plus changelist controls. */
 export interface ResourceTable {
   query: TableQuery;
@@ -75,6 +106,7 @@ export function useResourceTable(
   const [isLoading, setLoading] = useState(true);
   const [error, setError] = useState<unknown>(undefined);
   const [tick, setTick] = useState(0);
+  const { nonce, markUpdated } = useRefresh();
 
   // Reset paging/search/filters when the resource changes.
   useEffect(() => {
@@ -111,6 +143,7 @@ export function useResourceTable(
           setData([]);
         }
         setLoading(false);
+        markUpdated();
       })
       .catch((e: unknown) => {
         if (cancelled) return;
@@ -121,7 +154,7 @@ export function useResourceTable(
     return () => {
       cancelled = true;
     };
-  }, [engine, resource.key, resource.app, resource.model, page, search, filterKey, tick]);
+  }, [engine, resource.key, resource.app, resource.model, page, search, filterKey, tick, nonce]);
 
   const setSearch = (v: string | undefined) => {
     setSearchState(v && v.length ? v : undefined);
@@ -447,6 +480,7 @@ export function useDashboardStats(
 ): DashboardStats {
   const models = useMemo(() => adminResources(resources), [resources]);
   const [counts, setCounts] = useState<Record<string, number> | null>(null);
+  const { nonce, markUpdated } = useRefresh();
 
   useEffect(() => {
     let cancelled = false;
@@ -467,12 +501,15 @@ export function useDashboardStats(
           }
         }),
       );
-      if (!cancelled) setCounts(Object.fromEntries(entries));
+      if (!cancelled) {
+        setCounts(Object.fromEntries(entries));
+        markUpdated();
+      }
     })();
     return () => {
       cancelled = true;
     };
-  }, [engine, models]);
+  }, [engine, models, nonce]);
 
   return useMemo((): DashboardStats => {
     const loading = counts === null;

package/auth/provider.ts

@@ -74,10 +74,7 @@ export interface CognitoAuthProviderConfig extends Partial<CognitoAuthConfig> {
 }
 
 export type CognitoAuthStatus =
-  | "loading"
-  | "authenticated"
-  | "unauthenticated"
-  | "error";
+  "loading" | "authenticated" | "unauthenticated" | "error";
 
 /** What `useCognitoAuth()` returns. */
 export interface CognitoAuthContextValue {
@@ -178,7 +175,8 @@ export function CognitoAuthProvider({
   const keyBase = config.storageKey ?? "rastack.auth";
   const sessionKey = `${keyBase}.session`;
   const pkceKey = `${keyBase}.pkce`;
-  const doFetch = config.fetchImpl ?? (globalThis.fetch?.bind(globalThis) as typeof fetch);
+  const doFetch =
+    config.fetchImpl ?? (globalThis.fetch?.bind(globalThis) as typeof fetch);
 
   const [session, setSession] = useState<CognitoSession | null>(null);
   const [status, setStatus] = useState<CognitoAuthStatus>("loading");
@@ -242,7 +240,8 @@ export function CognitoAuthProvider({
         const redirect = parseRedirect(dom.window.location.search);
         if (redirect.error) {
           clearUrl();
-          if (!cancelled) fail(new Error(redirect.errorDescription ?? redirect.error));
+          if (!cancelled)
+            fail(new Error(redirect.errorDescription ?? redirect.error));
           return;
         }
         if (redirect.code) {
@@ -288,14 +287,17 @@ export function CognitoAuthProvider({
   ): Promise<CognitoSession> {
     const hosted = requireHostedConfig(config);
     const pending = storage.getItem(pkceKey);
-    if (!pending) throw new Error("No pending PKCE verifier — restart sign-in.");
+    if (!pending)
+      throw new Error("No pending PKCE verifier — restart sign-in.");
     const { verifier, state: expectedState } = JSON.parse(pending) as {
       verifier: string;
       state: string;
     };
     storage.removeItem(pkceKey);
     if (expectedState && state && expectedState !== state) {
-      throw new Error("OAuth state mismatch — possible CSRF, sign-in rejected.");
+      throw new Error(
+        "OAuth state mismatch — possible CSRF, sign-in rejected.",
+      );
     }
     const response = await doFetch(tokenEndpoint(hosted), {
       method: "POST",
@@ -484,3 +486,64 @@ export function useRastackAuthFromCognito(): RastackAuth {
     [auth.isAuthenticated, auth.claims],
   );
 }
+
+// -- Dev-time Cognito runtime config (real dev pool, opt-in) ------------------
+// `rastack dev` serves the dev environment's Cognito coordinates at
+// `/__rastack/cognito.json` so a locally-running app can sign in against the
+// *real* dev user pool (to obtain real tokens — e.g. for the deployed
+// external-API proxy) instead of the unsigned `mode:"local"` shim. These
+// helpers turn that JSON into a `<CognitoAuthProvider config>`; a developer opts
+// in with `cognitoConfigFromGlobal() ?? { mode: "local" }`.
+
+/** The shape `rastack dev` serves at `/__rastack/cognito.json`. */
+export interface RastackCognitoRuntime {
+  userPoolId?: string;
+  clientId: string;
+  /** Hosted UI base URL (`https://…amazoncognito.com`). */
+  hostedUiUrl: string;
+  region: string;
+}
+
+/**
+ * Map a served runtime config into a `CognitoAuthProviderConfig` for the real
+ * Hosted UI flow. `redirectUri` defaults to the current page origin (where
+ * `rastack dev` serves the app), so local sign-in round-trips back correctly.
+ */
+export function cognitoRuntimeToConfig(
+  runtime: RastackCognitoRuntime,
+  opts: { redirectUri?: string } & Partial<CognitoAuthProviderConfig> = {},
+): CognitoAuthProviderConfig {
+  const origin = dom.window?.location?.origin as string | undefined;
+  const { redirectUri, ...rest } = opts;
+  return {
+    mode: "hosted-ui",
+    domain: runtime.hostedUiUrl,
+    clientId: runtime.clientId,
+    region: runtime.region,
+    userPoolId: runtime.userPoolId,
+    redirectUri: redirectUri ?? origin ?? "",
+    ...rest,
+  };
+}
+
+/**
+ * Read the runtime Cognito config `rastack dev` injects as
+ * `globalThis.__RASTACK_COGNITO__`, mapped to a provider config — or undefined
+ * when none is present (so the caller falls back to `{ mode: "local" }`). Set
+ * the global from the served JSON, e.g.:
+ *
+ * ```html
+ * <script>
+ *   fetch("/__rastack/cognito.json").then(r => r.ok && r.json())
+ *     .then(c => { if (c) window.__RASTACK_COGNITO__ = c; })
+ * </script>
+ * ```
+ */
+export function cognitoConfigFromGlobal(
+  opts: { redirectUri?: string } & Partial<CognitoAuthProviderConfig> = {},
+): CognitoAuthProviderConfig | undefined {
+  const runtime = (dom as { __RASTACK_COGNITO__?: RastackCognitoRuntime })
+    .__RASTACK_COGNITO__;
+  if (!runtime?.clientId || !runtime?.hostedUiUrl) return undefined;
+  return cognitoRuntimeToConfig(runtime, opts);
+}