rastack 0.0.63 → 0.0.64

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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;