@everystack/admin 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everystack/admin",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Declarative admin dashboard framework for PostgREST APIs",
   "license": "AGPL-3.0-only",
   "publishConfig": {
@@ -15,6 +15,10 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
+    "./rpc": {
+      "types": "./src/rpc/resource-dashboard-rpc.ts",
+      "default": "./src/rpc/resource-dashboard-rpc.ts"
+    },
     "./presets/twitter": {
       "types": "./src/presets/twitter.ts",
       "default": "./src/presets/twitter.ts"
@@ -30,8 +34,8 @@
     "d3-time-format": "4.1.0"
   },
   "peerDependencies": {
-    "@everystack/api": ">=0.1.0",
-    "@everystack/ui": ">=0.1.0",
+    "@everystack/api": ">=0.2.4",
+    "@everystack/ui": ">=0.2.2",
     "react": "19.2.6",
     "react-native": "0.83.6"
   },

package/src/adapters/EverystackAdapter.ts

@@ -120,6 +120,16 @@ export class EverystackAdapter implements DataAdapter {
     }
   }
 
+  async rpc<T = unknown>(fn: string, body?: unknown): Promise<T> {
+    const result = await this.client.rpc<T>(fn, body);
+
+    if (result.error) {
+      throw new Error(result.error.message);
+    }
+
+    return result.data as T;
+  }
+
   async aggregate(resource: string, params: AggregateParams): Promise<AggregateResult> {
     const selectParts: string[] = [];
 

package/src/adapters/types.ts

@@ -55,6 +55,12 @@ export interface DataAdapter {
    */
   aggregate?(resource: string, params: AggregateParams): Promise<AggregateResult>;
 
+  /**
+   * Call a named RPC on the backend (row actions, dashboards).
+   * Throws on error, like the other adapter methods.
+   */
+  rpc?<T = unknown>(fn: string, body?: unknown): Promise<T>;
+
   /**
    * Subscribe to real-time updates (optional)
    */

package/src/index.ts

@@ -30,6 +30,8 @@ export type {
   StatDialConfig,
   StatDialValue,
   DimensionConfig,
+  // Row actions
+  RowActionConfig,
 } from './types';
 
 // Adapter types
@@ -126,6 +128,9 @@ export { ImageDisplay } from './components/ImageDisplay';
 export { resolveImageUrl, type ResolveImageUrlOptions } from './utils/resolve-image-url';
 export { uploadFile, type UploadFileOptions, type UploadFileResult } from './utils/upload-file';
 
+// Row actions
+export { visibleRowActions } from './utils/row-actions';
+
 // Utilities
 export {
   toCamelCase,

package/src/rpc/resource-dashboard-rpc.ts

@@ -15,6 +15,7 @@
  */
 
 import { sql, type SQL } from 'drizzle-orm';
+import { toCamelCaseKeys } from '../utils/naming';
 import type { ResourceDashboardConfig, DimensionConfig, StatDialConfig } from '../types';
 
 interface DbExecutor {
@@ -54,6 +55,53 @@ export interface EventListResult {
   total: number;
 }
 
+// ────────────────────────────────────────────────────────────
+// Identifier validation
+//
+// Every identifier interpolated with sql.raw comes from server-side config,
+// but config flows through several packages before it gets here — validate
+// at factory time so a typo or an injection-shaped value fails loudly at
+// wiring, not silently at query time. Values are always parameterized.
+// ────────────────────────────────────────────────────────────
+
+const TABLE_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*(\.[a-zA-Z_][a-zA-Z0-9_]*)?$/;
+const COLUMN_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+
+function assertTable(name: string): void {
+  if (!TABLE_PATTERN.test(name)) {
+    throw new Error(`Invalid dashboard table name: ${JSON.stringify(name)}`);
+  }
+}
+
+function assertColumn(name: string): void {
+  if (!COLUMN_PATTERN.test(name)) {
+    throw new Error(`Invalid dashboard column name: ${JSON.stringify(name)}`);
+  }
+}
+
+function validateConfig(tableName: string, config: ResourceDashboardConfig): void {
+  assertTable(tableName);
+  assertColumn(config.timestampColumn);
+  for (const predicate of config.where ?? []) assertColumn(predicate.column);
+  for (const dim of config.dimensions) assertColumn(dim.column);
+  for (const col of config.listColumns) assertColumn(col);
+  for (const col of config.searchColumns ?? []) assertColumn(col);
+  const pkCols = config.primaryKey
+    ? (Array.isArray(config.primaryKey) ? config.primaryKey : [config.primaryKey])
+    : [];
+  for (const col of pkCols) assertColumn(col);
+  for (const stat of config.stats) {
+    assertColumn(stat.id);
+    if (stat.value.type === 'count_where' || stat.value.type === 'distinct') {
+      assertColumn(stat.value.column);
+    }
+    if (stat.value.type === 'table_count') {
+      assertTable(stat.value.table);
+      if (stat.value.timestampColumn) assertColumn(stat.value.timestampColumn);
+    }
+  }
+}
+
 // ────────────────────────────────────────────────────────────
 // WHERE clause builder
 // ────────────────────────────────────────────────────────────
@@ -66,6 +114,11 @@ function buildWhereClause(
   const conditions: SQL[] = [];
   const tsCol = config.timestampColumn;
 
+  // Static predicates (server-side constants, e.g. STI discriminators)
+  for (const predicate of config.where ?? []) {
+    conditions.push(sql`${sql.raw(predicate.column)} = ${predicate.equals}`);
+  }
+
   // Time window
   if (filters.time && filters.time[0] && filters.time[1]) {
     conditions.push(sql`${sql.raw(tsCol)} >= ${filters.time[0]}::timestamptz`);
@@ -361,6 +414,61 @@ function createEventListHandler(
   };
 }
 
+// ────────────────────────────────────────────────────────────
+// Event Detail RPC
+//
+// The show view's data source for detailVia: 'rpc' resources — one row
+// by primary key, the static where still applied (an STI discriminator
+// must gate detail exactly like it gates the list), keys camelCased to
+// match field definitions. Keeps telemetry off the REST surface entirely.
+// ────────────────────────────────────────────────────────────
+
+const MAX_ID_LENGTH = 256;
+
+function createEventDetailHandler(
+  tableName: string,
+  config: ResourceDashboardConfig,
+  db: DbExecutor,
+): (body: unknown) => Promise<unknown> {
+  const pkColumn = Array.isArray(config.primaryKey)
+    ? config.primaryKey[0]
+    : config.primaryKey ?? 'id';
+
+  return async (body: unknown) => {
+    const id = (body as { id?: unknown } | null)?.id;
+    if (
+      (typeof id !== 'string' && typeof id !== 'number') ||
+      String(id).length === 0 ||
+      String(id).length > MAX_ID_LENGTH
+    ) {
+      throw new Error('Invalid id');
+    }
+
+    const conditions: SQL[] = [sql`${sql.raw(pkColumn)} = ${String(id)}`];
+    for (const predicate of config.where ?? []) {
+      conditions.push(sql`${sql.raw(predicate.column)} = ${predicate.equals}`);
+    }
+    let where = conditions[0];
+    for (let i = 1; i < conditions.length; i++) {
+      where = sql`${where} AND ${conditions[i]}`;
+    }
+
+    const result = await db.execute(sql`
+      SELECT row_to_json(r) AS row
+      FROM (SELECT * FROM ${sql.raw(tableName)} WHERE ${where} LIMIT 1) r
+    `);
+
+    const rows = extractRows(result);
+    const first = rows[0] as { row: Record<string, unknown> | string } | undefined;
+    if (!first) {
+      throw new Error(`Record not found: ${id}`);
+    }
+
+    const raw = typeof first.row === 'string' ? JSON.parse(first.row) : first.row;
+    return toCamelCaseKeys(raw);
+  };
+}
+
 // ────────────────────────────────────────────────────────────
 // Public API
 // ────────────────────────────────────────────────────────────
@@ -368,12 +476,13 @@ function createEventListHandler(
 export interface ResourceDashboardRpcs {
   dashboardData: (body: unknown) => Promise<unknown>;
   eventList: (body: unknown) => Promise<unknown>;
+  eventDetail: (body: unknown) => Promise<unknown>;
 }
 
 /**
  * Create dashboard + event list RPC handlers for a resource.
  *
- * @param tableName - Database table name (snake_case)
+ * @param tableName - Physical table name, may be schema-qualified ('ops.runs')
  * @param config - ResourceDashboardConfig from ResourceConfig.dashboard
  * @param db - Drizzle db executor (must support .execute())
  */
@@ -382,9 +491,11 @@ export function createResourceDashboardRpcs(
   config: ResourceDashboardConfig,
   db: DbExecutor,
 ): ResourceDashboardRpcs {
+  validateConfig(tableName, config);
   return {
     dashboardData: createDashboardDataHandler(tableName, config, db),
     eventList: createEventListHandler(tableName, config, db),
+    eventDetail: createEventDetailHandler(tableName, config, db),
   };
 }
 
@@ -405,11 +516,13 @@ export function createAllDashboardRpcs(
 
   for (const resource of resources) {
     if (!resource.dashboard) continue;
-    const handlers = createResourceDashboardRpcs(resource.name, resource.dashboard, db);
+    const tableName = resource.dashboard.tableName ?? resource.name;
+    const handlers = createResourceDashboardRpcs(tableName, resource.dashboard, db);
     // Convert resource name to camelCase RPC name prefix
     const prefix = resource.name.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
     rpcs[`${prefix}DashboardData`] = handlers.dashboardData;
     rpcs[`${prefix}EventList`] = handlers.eventList;
+    rpcs[`${prefix}EventDetail`] = handlers.eventDetail;
   }
 
   return rpcs;

package/src/screens/ResourceDashboard.tsx

@@ -18,6 +18,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 import { View, Text, ScrollView, Pressable, useWindowDimensions } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useRpc } from '../hooks/useRpc';
+import { useContainerWidth } from '@everystack/ui/dashboard';
 import { StatDials } from '../components/dashboard/StatDials';
 import { TimeHistogram } from '../components/dashboard/TimeHistogram';
 import { DimensionBars } from '../components/dashboard/DimensionBars';
@@ -98,7 +99,10 @@ function ResourceDashboardInner({
   action?: { label: string; onPress: () => void };
 }): React.ReactElement {
   const { width: windowWidth } = useWindowDimensions();
-  const chartWidth = Math.min(windowWidth - 48, 800);
+  // Real width comes from the chart wrapper's onLayout; the window-derived
+  // value only serves until the first layout fires.
+  const chart = useContainerWidth(Math.min(windowWidth - 48, 800));
+  const chartWidth = chart.width;
 
   const prefix = toCamelCase(resource);
   const dashboardDataFn = `${prefix}DashboardData`;
@@ -222,13 +226,15 @@ function ResourceDashboardInner({
       {/* Stat Dials */}
       <StatDials dials={dials} />
 
-      {/* Time Histogram */}
-      <TimeHistogram
-        data={data?.timeHistogram ?? []}
-        width={chartWidth}
-        title={dashboard.title ? `${dashboard.title} Over Time` : undefined}
-        onBrush={handleTimeBrush}
-      />
+      {/* Time Histogram — wrapper measures content width */}
+      <View onLayout={chart.onLayout}>
+        <TimeHistogram
+          data={data?.timeHistogram ?? []}
+          width={chartWidth}
+          title={dashboard.title ? `${dashboard.title} Over Time` : undefined}
+          onBrush={handleTimeBrush}
+        />
+      </View>
 
       {/* Dimension Charts */}
       <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, marginTop: 24 }}>

package/src/screens/ResourceList.tsx

@@ -10,6 +10,7 @@ import { View, Text } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useAdminData } from '../hooks/useAdminData';
 import { DataTable, FilterBar, PaginationBar, LoadingState, ErrorState, EmptyState, Button, type DataTableColumn } from '@everystack/ui';
+import { formatCellValue } from '../utils/format-cell-value';
 import type { ResourceConfig, FieldDefinition } from '../types';
 
 export interface ResourceListProps {
@@ -149,5 +150,10 @@ function fieldsToColumns(
       key: field.name,
       label: field.label ?? field.name,
       sortable: field.sortable,
+      render: (value: unknown) => (
+        <Text className="text-sm text-gray-900" numberOfLines={1}>
+          {formatCellValue(field, value)}
+        </Text>
+      ),
     }));
 }

package/src/screens/ResourceShow.tsx

@@ -5,13 +5,16 @@
  * Fetches via adapter.fetchOne() and displays field values.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { View, Text, ScrollView } from 'react-native';
 import { useAdminConfig } from '../hooks/useAdminConfig';
 import { useDataAdapter } from '../hooks/useAdminData';
 import { LoadingState, ErrorState, Button, Card, Divider } from '@everystack/ui';
 import { ImageDisplay } from '../components/ImageDisplay';
-import type { FieldDefinition, DataRecord } from '../types';
+import { visibleRowActions } from '../utils/row-actions';
+import { toCamelCase } from '../utils/naming';
+import type { FieldDefinition, DataRecord, ResourceConfig, RowActionConfig } from '../types';
+import type { DataAdapter } from '../adapters/types';
 
 export interface ResourceShowProps {
   /** Resource name */
@@ -45,14 +48,13 @@ export function ResourceShow({
     setLoading(true);
     setError(null);
     try {
-      const result = await adapter.fetchOne(resource, id);
-      setRecord(result);
+      setRecord(await fetchDetail(adapter, resource, id, resourceConfig));
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setLoading(false);
     }
-  }, [adapter, resource, id]);
+  }, [adapter, resource, id, resourceConfig]);
 
   useEffect(() => {
     fetchRecord();
@@ -79,6 +81,7 @@ export function ResourceShow({
   const fieldMap = new Map(resourceConfig.fields.map(f => [f.name, f]));
   const canEdit = resourceConfig.actions?.edit !== false;
   const canDelete = resourceConfig.actions?.delete !== false;
+  const rowActions = visibleRowActions(resourceConfig.rowActions, record);
 
   return (
     <ScrollView className="flex-1">
@@ -93,6 +96,15 @@ export function ResourceShow({
           </Text>
         </View>
         <View className="flex-row gap-2">
+          {rowActions.map(action => (
+            <RowActionButton
+              key={action.id}
+              action={action}
+              recordId={id}
+              adapter={adapter}
+              onDone={fetchRecord}
+            />
+          ))}
           {canEdit && onEditPress && (
             <Button label="Edit" variant="outline" onPress={onEditPress} />
           )}
@@ -120,6 +132,106 @@ export function ResourceShow({
   );
 }
 
+// =============================================================================
+// Detail fetching
+// =============================================================================
+
+/**
+ * detailVia: 'rpc' fetches through the role-gated {prefix}EventDetail RPC —
+ * the resource never enters the REST surface (telemetry tables stay out of
+ * exposedTables). Everything else uses adapter.fetchOne as before.
+ */
+async function fetchDetail(
+  adapter: DataAdapter,
+  resource: string,
+  id: string | number,
+  resourceConfig: ResourceConfig | undefined,
+): Promise<DataRecord> {
+  if (resourceConfig?.dashboard?.detailVia === 'rpc') {
+    if (!adapter.rpc) {
+      throw new Error(`Resource "${resource}" uses detailVia: 'rpc' but the adapter has no rpc()`);
+    }
+    return (await adapter.rpc(`${toCamelCase(resource)}EventDetail`, { id })) as DataRecord;
+  }
+  return adapter.fetchOne(resource, id);
+}
+
+// =============================================================================
+// RowActionButton
+// =============================================================================
+
+interface RowActionButtonProps {
+  action: RowActionConfig;
+  recordId: string | number;
+  adapter: DataAdapter;
+  onDone: () => Promise<void> | void;
+}
+
+/**
+ * Two-tap confirm: actions with `confirm` swap their label on first press
+ * and execute on the second. Cross-platform (no Alert/window.confirm),
+ * resets after 3 seconds without the confirming press.
+ */
+function RowActionButton({ action, recordId, adapter, onDone }: RowActionButtonProps): React.ReactElement {
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+    };
+  }, []);
+
+  const execute = useCallback(async () => {
+    if (!adapter.rpc) {
+      setError('Adapter does not support RPC actions');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await adapter.rpc(action.rpc, { id: recordId });
+      await onDone();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+      setConfirming(false);
+    }
+  }, [adapter, action.rpc, recordId, onDone]);
+
+  const handlePress = useCallback(() => {
+    if (busy) return;
+    if (action.confirm && !confirming) {
+      setConfirming(true);
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => setConfirming(false), 3000);
+      return;
+    }
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+    execute();
+  }, [busy, action.confirm, confirming, execute]);
+
+  const buttonLabel = busy ? '…' : confirming ? (action.confirm ?? action.label) : action.label;
+
+  return (
+    <View>
+      <Button
+        label={buttonLabel}
+        variant={action.variant ?? 'outline'}
+        onPress={handlePress}
+      />
+      {error && (
+        <Text className="text-xs text-red-600 mt-1" numberOfLines={2}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}
+
 // =============================================================================
 // FieldRow
 // =============================================================================

package/src/types.ts

@@ -60,6 +60,25 @@ export interface FieldDefinition {
 // Resource Configuration
 // =============================================================================
 
+/**
+ * A declarative, RPC-backed action on a single record (retry/cancel a job).
+ * Rendered on the show view; invoked via adapter.rpc(rpc, { id }).
+ */
+export interface RowActionConfig {
+  /** Unique action identifier */
+  id: string;
+  /** Button label */
+  label: string;
+  /** RPC function name, called with { id: record[primaryKey] } */
+  rpc: string;
+  /** Require a confirming second press; shown as the interim label */
+  confirm?: string;
+  /** Button styling */
+  variant?: 'primary' | 'outline' | 'destructive';
+  /** Show only when String(record[field]) is in the list */
+  when?: { field: string; in: string[] };
+}
+
 export interface ResourceConfig {
   /** Unique resource identifier (e.g., 'users', 'orders') */
   name: string;
@@ -96,6 +115,8 @@ export interface ResourceConfig {
   primaryKey?: string;
   /** Optional observability-style dashboard configuration */
   dashboard?: ResourceDashboardConfig;
+  /** RPC-backed record actions shown on the show view */
+  rowActions?: RowActionConfig[];
 }
 
 // =============================================================================
@@ -143,6 +164,19 @@ export interface DimensionConfig {
 export interface ResourceDashboardConfig {
   /** Title displayed at the top */
   title?: string;
+  /**
+   * Physical table for dashboard SQL, may be schema-qualified (e.g. 'ops.runs',
+   * 'logs.crash_reports'). Defaults to the resource name. Required whenever the
+   * exposed resource name differs from the table the raw aggregation queries
+   * must hit — there is no search_path to paper over the difference.
+   */
+  tableName?: string;
+  /**
+   * Static predicates ANDed into every dashboard query (server-side constants,
+   * never user input). The STI case: jobs over ops.runs use
+   * [{ column: 'type', equals: 'job' }].
+   */
+  where?: Array<{ column: string; equals: string }>;
   /** The datetime column for the time histogram */
   timestampColumn: string;
   /** Time window in hours (default: 168 = 7 days) */
@@ -161,6 +195,12 @@ export interface ResourceDashboardConfig {
   searchColumns?: string[];
   /** Navigate to detail on row press (default: true) */
   linkToDetail?: boolean;
+  /**
+   * How the show view fetches the record. 'rpc' uses the role-gated
+   * {prefix}EventDetail RPC — the whole resource stays off the REST
+   * surface (telemetry tables never enter exposedTables). Default 'rest'.
+   */
+  detailVia?: 'rpc' | 'rest';
 }
 
 // =============================================================================

package/src/utils/format-cell-value.ts

@@ -0,0 +1,30 @@
+/**
+ * Field-type-aware cell formatting for list views.
+ *
+ * The PostgREST protocol delivers ISO strings and raw JSON; the list
+ * renders them by the field's declared type. Unparseable values pass
+ * through untouched — never hide data behind "Invalid Date".
+ */
+
+import type { FieldDefinition } from '../types';
+
+export function formatCellValue(field: FieldDefinition, value: unknown): string {
+  if (value === null || value === undefined) return '—';
+
+  switch (field.type) {
+    case 'datetime': {
+      const date = new Date(String(value));
+      return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+    }
+    case 'date': {
+      const date = new Date(String(value));
+      return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleDateString();
+    }
+    case 'boolean':
+      return value ? 'Yes' : 'No';
+    case 'json':
+      return typeof value === 'string' ? value : JSON.stringify(value);
+    default:
+      return typeof value === 'object' ? JSON.stringify(value) : String(value);
+  }
+}

package/src/utils/row-actions.ts

@@ -0,0 +1,21 @@
+/**
+ * Row action visibility — pure logic behind the show view's action buttons.
+ *
+ * The `when` clause compares String(record[field]) against the configured
+ * list, so numeric and boolean fields match their string forms.
+ */
+
+import type { RowActionConfig } from '../types';
+
+export function visibleRowActions(
+  actions: RowActionConfig[] | undefined,
+  record: Record<string, unknown>,
+): RowActionConfig[] {
+  if (!actions) return [];
+  return actions.filter((action) => {
+    if (!action.when) return true;
+    const value = record[action.when.field];
+    if (value === null || value === undefined) return false;
+    return action.when.in.includes(String(value));
+  });
+}