@reddb-io/ui 0.3.0 → 0.3.2

package/src/lib/embed/RedUiEmbedRoot.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { BitsConfig } from 'bits-ui'
   import Workspace from '../Workspace.svelte'
+  import ErrorBoundary from '../ErrorBoundary.svelte'
   import type { ConnectionProvider } from '../reddb'
   import type { Theme } from '../theme.svelte'
 
@@ -20,12 +21,16 @@
 </script>
 
 <BitsConfig defaultPortalTo={portalTarget}>
-  <Workspace
-    {connectionProvider}
-    {initialRoute}
-    showConnect={false}
-    themeTarget={shadowHost}
-    persistTheme={false}
-    {initialTheme}
-  />
+  <!-- Black-screen shield (#126): keep an embed render crash inside the boundary
+       rather than blanking the host's mount point. -->
+  <ErrorBoundary>
+    <Workspace
+      {connectionProvider}
+      {initialRoute}
+      showConnect={false}
+      themeTarget={shadowHost}
+      persistTheme={false}
+      {initialTheme}
+    />
+  </ErrorBoundary>
 </BitsConfig>

package/src/lib/embed/index.ts

@@ -1,6 +1,7 @@
 import appCss from "../../app.css?inline";
 import type { Component } from "svelte";
-import type { ConnectionProvider } from "../reddb";
+import type { ConnectionProvider, ConsoleSink } from "../reddb";
+import { devConsole } from "../reddb/dev-console";
 import type { Theme } from "../theme.svelte";
 import { RED_UI_VERSION, readBuildInfo } from "../build-info";
 
@@ -18,6 +19,9 @@ export {
   RedClient,
   type Connection,
   type ConnectionProvider,
+  type ConsoleEntry,
+  type ConsoleEntryKind,
+  type ConsoleSink,
   type InjectedClientOptions,
   type RedClientOptions,
 } from "../reddb";
@@ -27,6 +31,14 @@ export interface RedUiEmbedOptions {
   initialRoute?: string;
   theme?: Theme;
   shadowRoot?: ShadowRootInit;
+  /**
+   * Host tap on red-ui's developer console. When set, every query/HTTP
+   * round-trip the embedded Core records — verb, target, duration, row count,
+   * sanitized payload — is also delivered to the host, so a host app (e.g.
+   * red-request) can mirror red-ui's RQL/SQL traffic into its own developer
+   * bar. Entries are already secret-redacted before they reach the sink.
+   */
+  consoleSink?: ConsoleSink;
 }
 
 export interface RedUiEmbedHandle {
@@ -167,11 +179,16 @@ export async function mountRedUi(
     },
   });
 
+  const removeSink = opts.consoleSink
+    ? devConsole.addSink(opts.consoleSink)
+    : undefined;
+
   return {
     host,
     shadowRoot,
     portalTarget,
     destroy: () => {
+      removeSink?.();
       void unmount(instance);
       shadowRoot.textContent = "";
     },
@@ -180,6 +197,7 @@ export async function mountRedUi(
 
 export class RedUiElement extends HTMLElement {
   #connectionProvider: ConnectionProvider | null = null;
+  #consoleSink: ConsoleSink | null = null;
   initialRoute: string | undefined;
   theme: Theme | undefined;
   #handle: RedUiEmbedHandle | null = null;
@@ -201,6 +219,20 @@ export class RedUiElement extends HTMLElement {
     if (this.isConnected) this.#mounting = this.#mount();
   }
 
+  get consoleSink(): ConsoleSink | null {
+    return this.#consoleSink;
+  }
+
+  /**
+   * Host tap on the embedded Core's developer console (see
+   * `RedUiEmbedOptions.consoleSink`). Setting it after mount remounts, like
+   * `connectionProvider` — hosts normally assign both before attach.
+   */
+  set consoleSink(sink: ConsoleSink | null) {
+    this.#consoleSink = sink;
+    if (this.isConnected) this.#mounting = this.#mount();
+  }
+
   connectedCallback() {
     if (!this.hasAttribute("version"))
       this.setAttribute("version", RED_UI_VERSION);
@@ -220,6 +252,7 @@ export class RedUiElement extends HTMLElement {
       connectionProvider: this.#connectionProvider,
       initialRoute: this.initialRoute,
       theme: this.theme,
+      consoleSink: this.#consoleSink ?? undefined,
     });
   }
 }

package/src/lib/index.ts

@@ -7,7 +7,15 @@ export { default as CollectionHistory } from "./CollectionHistory.svelte";
 export { default as CommandPalette } from "./CommandPalette.svelte";
 export { default as ConnectDropdown } from "./ConnectDropdown.svelte";
 export { default as EmptyState } from "./EmptyState.svelte";
+export { default as GlobalProgressBar } from "./GlobalProgressBar.svelte";
 export { default as LiveChanges } from "./LiveChanges.svelte";
+export { default as LoadingOverlay } from "./LoadingOverlay.svelte";
+export {
+  loading,
+  formatElapsed,
+  type LoadingStep,
+  type LoadingStepStatus,
+} from "./loading.svelte";
 export { default as MasterPasswordDialog } from "./MasterPasswordDialog.svelte";
 export { default as PageHeader } from "./PageHeader.svelte";
 export { default as PendingChangesPanel } from "./PendingChangesPanel.svelte";
@@ -35,6 +43,8 @@ export * from "./collection-catalog";
 export * from "./collection-pages";
 export * from "./router.svelte";
 export * from "./settings-sections";
+export * from "./settings-authoring-client";
+export * from "./permission-gate";
 export * from "./cn";
 export * from "./connections.svelte";
 export * from "./shortcuts";

package/src/lib/loading.svelte.ts

@@ -0,0 +1,142 @@
+// Connect/boot loading model (#127). Slow opens (sidecar spawn, readiness,
+// handshake, initial schema/stats fetch) get real, timestamped feedback: a
+// started-at, an ordered log of steps (each with a label, optional detail, and
+// its own start time + outcome), and a "current" step that stays on screen —
+// with its elapsed time — while it's still running (a stalled step reads AS
+// stalled). Live-or-empty applies: steps are appended by the actual connect
+// sequence, never synthesized to fake progress.
+//
+// `$state` is compiled here (`.svelte.ts`), so the model is reactive and the
+// overlay re-renders as steps land. Writes are wrapped in `untrack()` because
+// the connect sequence commonly runs from inside a Svelte `$effect` (the
+// layout's auto-refresh); an untracked write keeps our own mutations from
+// re-firing that effect.
+
+import { untrack } from "svelte";
+
+export type LoadingStepStatus = "active" | "done" | "error";
+
+export interface LoadingStep {
+  id: number;
+  label: string;
+  detail?: string;
+  /** Absolute wall-clock time the step was appended. */
+  startedAt: number;
+  /** Wall-clock duration once the step resolves; null while still active. */
+  durationMs: number | null;
+  status: LoadingStepStatus;
+  error?: string;
+}
+
+/**
+ * Format a millisecond elapsed value for the overlay badge and per-step timing.
+ * Sub-second reads as fractional seconds ("0.4s"); longer as one-decimal
+ * seconds ("12.3s"). Kept pure so the render is unit-testable without a clock.
+ */
+export function formatElapsed(ms: number): string {
+  const clamped = Math.max(0, ms);
+  return `${(clamped / 1000).toFixed(1)}s`;
+}
+
+class LoadingStore {
+  /** Wall-clock time the current open began; null when nothing is opening. */
+  startedAt = $state<number | null>(null);
+  /** Headline for what's being opened, e.g. "Opening Docker primary". */
+  label = $state<string | null>(null);
+  /** Ordered, timestamped step log for the current open. */
+  steps = $state<LoadingStep[]>([]);
+  private nextId = 1;
+
+  /** True while an open is in progress. Gates the overlay. */
+  get active(): boolean {
+    return this.startedAt !== null;
+  }
+
+  /** The step currently on screen — the last appended one, if any. */
+  get current(): LoadingStep | null {
+    return this.steps.length ? this.steps[this.steps.length - 1] : null;
+  }
+
+  /** Elapsed time since the open began, for the ticking badge. */
+  elapsedMs(now = Date.now()): number {
+    return this.startedAt === null ? 0 : Math.max(0, now - this.startedAt);
+  }
+
+  /**
+   * Begin a fresh open. Resets the log and stamps the start. Any subsequent
+   * `step()` calls append to this open until `succeed`/`fail` finishes it.
+   */
+  begin(label: string, now = Date.now()): void {
+    untrack(() => {
+      this.startedAt = now;
+      this.label = label;
+      this.steps = [];
+      this.nextId = 1;
+    });
+  }
+
+  /**
+   * Append a step and mark it the current (active) one, closing out the
+   * previous active step as done. No-op if no open is in progress — steps are
+   * only ever real work inside an open.
+   */
+  step(label: string, detail?: string, now = Date.now()): void {
+    untrack(() => {
+      if (this.startedAt === null) return;
+      const closed = this.steps.map((s) =>
+        s.status === "active"
+          ? { ...s, status: "done" as const, durationMs: now - s.startedAt }
+          : s
+      );
+      this.steps = [
+        ...closed,
+        {
+          id: this.nextId++,
+          label,
+          ...(detail ? { detail } : {}),
+          startedAt: now,
+          durationMs: null,
+          status: "active",
+        },
+      ];
+    });
+  }
+
+  /** Finish the open successfully: close the active step and hide the overlay. */
+  succeed(now = Date.now()): void {
+    untrack(() => {
+      this.#closeActive(now);
+      this.startedAt = null;
+    });
+  }
+
+  /**
+   * Finish the open with a failure: mark the active step errored and hide the
+   * overlay (the Connect flow surfaces the error separately).
+   */
+  fail(error?: string, now = Date.now()): void {
+    untrack(() => {
+      this.steps = this.steps.map((s) =>
+        s.status === "active"
+          ? {
+              ...s,
+              status: "error" as const,
+              durationMs: now - s.startedAt,
+              ...(error ? { error } : {}),
+            }
+          : s
+      );
+      this.startedAt = null;
+    });
+  }
+
+  #closeActive(now: number): void {
+    this.steps = this.steps.map((s) =>
+      s.status === "active"
+        ? { ...s, status: "done" as const, durationMs: now - s.startedAt }
+        : s
+    );
+  }
+}
+
+export const loading = new LoadingStore();

package/src/lib/permission-gate.ts

@@ -0,0 +1,120 @@
+export interface PermissionResource {
+  kind: string;
+  name: string;
+  tenant?: string;
+}
+
+export interface PermissionCheck {
+  action: string;
+  resource: PermissionResource;
+  current_tenant?: string;
+}
+
+export interface PermissionDecision extends PermissionCheck {
+  allowed: boolean;
+  reason?: string;
+}
+
+export interface PermissionTransport {
+  authCan(checks: PermissionCheck[]): Promise<PermissionDecision[]>;
+}
+
+function keyFor(check: PermissionCheck): string {
+  const tenant = check.resource.tenant ?? "";
+  const currentTenant = check.current_tenant ?? "";
+  return [
+    check.action,
+    check.resource.kind,
+    check.resource.name,
+    tenant,
+    currentTenant,
+  ].join("\u001f");
+}
+
+function deny(check: PermissionCheck, reason: string): PermissionDecision {
+  return { ...check, allowed: false, reason };
+}
+
+export class PermissionGate {
+  readonly #transport: PermissionTransport;
+  readonly #cache = new Map<string, PermissionDecision>();
+  readonly #inFlight = new Map<string, Promise<PermissionDecision>>();
+
+  constructor(transport: PermissionTransport) {
+    this.#transport = transport;
+  }
+
+  cachedDecision(check: PermissionCheck): PermissionDecision | null {
+    return this.#cache.get(keyFor(check)) ?? null;
+  }
+
+  cachedCan(check: PermissionCheck): boolean {
+    return this.cachedDecision(check)?.allowed === true;
+  }
+
+  async decision(check: PermissionCheck): Promise<PermissionDecision> {
+    await this.preload([check]);
+    return (
+      this.cachedDecision(check) ??
+      deny(check, "auth.can did not return a decision")
+    );
+  }
+
+  async can(check: PermissionCheck): Promise<boolean> {
+    return (await this.decision(check)).allowed;
+  }
+
+  async preload(checks: readonly PermissionCheck[]): Promise<void> {
+    const missing = checks.filter((check) => !this.#cache.has(keyFor(check)));
+    if (missing.length === 0) return;
+
+    const unique = new Map<string, PermissionCheck>();
+    for (const check of missing) {
+      const key = keyFor(check);
+      if (!this.#inFlight.has(key)) unique.set(key, check);
+    }
+
+    if (unique.size > 0) {
+      const batch = [...unique.values()];
+      const batchPromise = this.#transport
+        .authCan(batch)
+        .then((results) => {
+          const byKey = new Map(
+            results.map((result) => [keyFor(result), result] as const)
+          );
+          for (const check of batch) {
+            const key = keyFor(check);
+            this.#cache.set(
+              key,
+              byKey.get(key) ?? deny(check, "auth.can omitted this check")
+            );
+          }
+        })
+        .catch((e) => {
+          const reason = (e as Error).message || "auth.can failed";
+          for (const check of batch) {
+            this.#cache.set(keyFor(check), deny(check, reason));
+          }
+        })
+        .finally(() => {
+          for (const check of batch) this.#inFlight.delete(keyFor(check));
+        });
+
+      for (const check of batch) {
+        const key = keyFor(check);
+        this.#inFlight.set(
+          key,
+          batchPromise.then(
+            () =>
+              this.#cache.get(key) ??
+              deny(check, "auth.can did not return a decision")
+          )
+        );
+      }
+    }
+
+    await Promise.all(
+      missing.map((check) => this.#inFlight.get(keyFor(check)))
+    );
+  }
+}

package/src/lib/policies.ts

@@ -0,0 +1,136 @@
+import type { AuthPolicy } from "#reddb";
+import type {
+  PermissionCheck,
+  PermissionDecision,
+  PermissionResource,
+} from "./permission-gate";
+
+export const POLICY_READ_CHECK: PermissionCheck = {
+  action: "policy:read",
+  resource: { kind: "policy", name: "*" },
+};
+
+export interface CapabilityMatrixRow {
+  id: string;
+  action: string;
+  resource: PermissionResource;
+  resourceLabel: string;
+  allowed: boolean;
+  reason?: string;
+  effects: string[];
+  principals: string[];
+  policies: string[];
+}
+
+function matrixKey(check: PermissionCheck): string {
+  return [
+    check.action,
+    check.resource.kind,
+    check.resource.name,
+    check.resource.tenant ?? "",
+    check.current_tenant ?? "",
+  ].join("\u001f");
+}
+
+function resourceLabel(resource: PermissionResource): string {
+  const base = `${resource.kind}:${resource.name}`;
+  return resource.tenant ? `${base} @ ${resource.tenant}` : base;
+}
+
+export function parsePolicyResource(
+  value: string | undefined,
+  tenant?: string
+): PermissionResource {
+  const trimmed = value?.trim();
+  if (!trimmed || trimmed === "*")
+    return { kind: "resource", name: "*", tenant };
+
+  const separator = trimmed.includes(":")
+    ? ":"
+    : trimmed.includes("/")
+      ? "/"
+      : null;
+  if (!separator) return { kind: "resource", name: trimmed, tenant };
+
+  const [kind, ...rest] = trimmed.split(separator);
+  const name = rest.join(separator) || "*";
+  return {
+    kind: kind || "resource",
+    name,
+    tenant,
+  };
+}
+
+export function capabilityMatrixChecksFromPolicies(
+  policies: readonly AuthPolicy[]
+): PermissionCheck[] {
+  const checks = [POLICY_READ_CHECK];
+  const seen = new Set(checks.map(matrixKey));
+
+  for (const policy of policies) {
+    const check: PermissionCheck = {
+      action: policy.action?.trim() || "*",
+      resource: parsePolicyResource(policy.resource, policy.tenant),
+    };
+    const key = matrixKey(check);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    checks.push(check);
+  }
+
+  return checks;
+}
+
+export function assembleCapabilityMatrix(
+  policies: readonly AuthPolicy[],
+  decisions: readonly PermissionDecision[]
+): CapabilityMatrixRow[] {
+  const policyChecks = capabilityMatrixChecksFromPolicies(policies);
+  const decisionsByKey = new Map(
+    decisions.map((decision) => [matrixKey(decision), decision] as const)
+  );
+
+  return policyChecks.map((check) => {
+    const decision = decisionsByKey.get(matrixKey(check));
+    const related = policies.filter((policy) => {
+      const policyCheck: PermissionCheck = {
+        action: policy.action?.trim() || "*",
+        resource: parsePolicyResource(policy.resource, policy.tenant),
+      };
+      return matrixKey(policyCheck) === matrixKey(check);
+    });
+
+    return {
+      id: matrixKey(check),
+      action: check.action,
+      resource: check.resource,
+      resourceLabel: resourceLabel(check.resource),
+      allowed: decision?.allowed === true,
+      reason: decision?.reason,
+      effects: [
+        ...new Set(
+          related
+            .map((policy) => policy.effect)
+            .filter((effect): effect is string => !!effect)
+        ),
+      ],
+      principals: [
+        ...new Set(
+          related
+            .map((policy) => policy.principal)
+            .filter((principal): principal is string => !!principal)
+        ),
+      ],
+      policies: [
+        ...new Set(
+          related
+            .map(
+              (policy, index) =>
+                policy.name ?? policy.id ?? `policy ${index + 1}`
+            )
+            .filter((name): name is string => !!name)
+        ),
+      ],
+    };
+  });
+}