@reddb-io/ui 0.3.0 → 0.3.1

package/src/lib/Topbar.svelte

@@ -2,7 +2,7 @@
   import { Kbd } from '@reddb-io/ui-kit'
   import ConnectDropdown from './ConnectDropdown.svelte'
   import ActivityIndicator from './ActivityIndicator.svelte'
-  import { Search, Sun, Moon, Network, Database, FileCode2, Shield, Settings2 } from 'lucide-svelte'
+  import { Search, Sun, Moon, Network, Database, FileCode2, Shield, Settings2, LineChart, Sparkles } from 'lucide-svelte'
   import { theme } from './theme.svelte'
   import { useRouter } from './router.svelte'
 
@@ -14,10 +14,12 @@
     window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true, bubbles: true }))
   }
 
+  const onAsk = $derived(router.view === 'ask')
   const onQuery = $derived(router.view === 'query')
   const onCollections = $derived(router.view === 'collections')
   const onCluster = $derived(router.view === 'cluster')
   const onSecurity = $derived(router.view === 'security')
+  const onAnalytics = $derived(router.view === 'analytics')
   const onSettings = $derived(router.view === 'settings')
 </script>
 
@@ -38,6 +40,19 @@
       <div class="w-px h-[18px] bg-line-2"></div>
     {/if}
     <nav class="flex items-center gap-0.5">
+      <a
+        href={router.href({ view: 'ask' })}
+        onclick={(e) => router.go({ view: 'ask' }, e)}
+        title="Ask — grounded natural-language query"
+        aria-current={onAsk ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onAsk ? 'bg-bg-2 text-accent' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <Sparkles class="size-3.5" />
+        <span>Ask</span>
+      </a>
       <a
         href={router.href({ view: 'query' })}
         onclick={(e) => router.go({ view: 'query' }, e)}
@@ -90,6 +105,19 @@
         <Shield class="size-3.5" />
         <span>Security</span>
       </a>
+      <a
+        href={router.href({ view: 'analytics' })}
+        onclick={(e) => router.go({ view: 'analytics' }, e)}
+        title="Analytics"
+        aria-current={onAnalytics ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onAnalytics ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <LineChart class="size-3.5" />
+        <span>Analytics</span>
+      </a>
       <a
         href={router.href({ view: 'settings' })}
         onclick={(e) => router.go({ view: 'settings' }, e)}

package/src/lib/Workspace.svelte

@@ -6,6 +6,7 @@
   // The SvelteKit Surface wraps this same component with a Kit-backed router.
   import { onMount, untrack } from 'svelte'
   import Splash from './Splash.svelte'
+  import GlobalProgressBar from './GlobalProgressBar.svelte'
   import Topbar from './Topbar.svelte'
   import StatusBar from './StatusBar.svelte'
   import CommandPalette from './CommandPalette.svelte'
@@ -14,6 +15,7 @@
   import PendingChangesPanel from './PendingChangesPanel.svelte'
   import CollectionsView from './CollectionsView.svelte'
   import ClusterView from './ClusterView.svelte'
+  import AskView from './AskView.svelte'
   import SecurityView from './SecurityView.svelte'
   import SettingsView from './SettingsView.svelte'
   import Appearance from './Appearance.svelte'
@@ -112,7 +114,9 @@
       queryTabs.setExecutor(null)
       return
     }
-    queryTabs.setExecutor((sql) => runQueryPreferStream(client, sql))
+    queryTabs.setExecutor((sql, options) =>
+      runQueryPreferStream(client, sql, options)
+    )
     pendingChanges.setExecutor(async (changes) =>
       Promise.all(
         changes.map(async (c): Promise<CommitOutcome> => {
@@ -236,14 +240,25 @@
 {#if !booted}
   <Splash onDone={() => (booted = true)} />
 {:else}
-  <div class="app grid grid-rows-[44px_32px_1fr] h-screen">
+  <div class="app relative grid grid-rows-[44px_32px_1fr] h-screen">
+    <GlobalProgressBar />
     <Topbar showConnect={showConnect} />
     <StatusBar />
     <main class="relative overflow-hidden z-[1]">
-      {#if router.view === 'cluster'}
+      {#if router.view === 'ask'}
+        <AskView />
+      {:else if router.view === 'cluster'}
         <ClusterView />
       {:else if router.view === 'security'}
         <SecurityView />
+      {:else if router.view === 'analytics'}
+        <!-- Lazy: LayerChart + d3 are heavy, so the charting bundle only
+             loads when the user actually opens Analytics. -->
+        {#await import('./AnalyticsView.svelte')}
+          <div class="flex h-full items-center justify-center font-mono text-[12px] text-fg-3">loading analytics…</div>
+        {:then { default: AnalyticsView }}
+          <AnalyticsView />
+        {/await}
       {:else if router.view === 'settings'}
         <SettingsView />
       {:else if router.view === 'appearance'}

package/src/lib/activity.svelte.ts

@@ -16,61 +16,65 @@
 // without untrack, the effect would track those as dependencies and our
 // own writes would re-fire it — infinite loop (`effect_update_depth_exceeded`).
 
-import { untrack } from 'svelte'
+import { untrack } from "svelte";
 
 export interface ActivityEntry {
-  id: number
-  label: string
-  startedAt: number
-  durationMs: number | null
-  status: 'pending' | 'ok' | 'error'
-  error?: string
+  id: number;
+  label: string;
+  startedAt: number;
+  durationMs: number | null;
+  status: "pending" | "ok" | "error";
+  error?: string;
 }
 
-const MAX_LOG = 20
+const MAX_LOG = 20;
 
 class ActivityStore {
-  inflight = $state(0)
-  log = $state<ActivityEntry[]>([])
-  private nextId = 1
+  inflight = $state(0);
+  active = $derived(this.inflight > 0);
+  log = $state<ActivityEntry[]>([]);
+  private nextId = 1;
 
   async track<T>(label: string, op: () => Promise<T>): Promise<T> {
-    const id = this.nextId++
+    const id = this.nextId++;
     const entry: ActivityEntry = {
       id,
       label,
       startedAt: Date.now(),
       durationMs: null,
-      status: 'pending',
-    }
+      status: "pending",
+    };
     untrack(() => {
-      this.log = [entry, ...this.log].slice(0, MAX_LOG)
-      this.inflight += 1
-    })
+      this.log = [entry, ...this.log].slice(0, MAX_LOG);
+      this.inflight += 1;
+    });
     try {
-      const result = await op()
+      const result = await op();
       untrack(() =>
-        this.update(id, { durationMs: Date.now() - entry.startedAt, status: 'ok' }),
-      )
-      return result
+        this.update(id, {
+          durationMs: Date.now() - entry.startedAt,
+          status: "ok",
+        })
+      );
+      return result;
     } catch (err) {
       untrack(() =>
         this.update(id, {
           durationMs: Date.now() - entry.startedAt,
-          status: 'error',
+          status: "error",
           error: (err as Error).message,
-        }),
-      )
-      throw err
+        })
+      );
+      throw err;
     } finally {
       untrack(() => {
-        this.inflight = Math.max(0, this.inflight - 1)
-      })
+        this.inflight = Math.max(0, this.inflight - 1);
+      });
     }
   }
 
   private update(id: number, patch: Partial<ActivityEntry>) {
-    this.log = this.log.map((e) => (e.id === id ? { ...e, ...patch } : e))
+    this.log = this.log.map((e) => (e.id === id ? { ...e, ...patch } : e));
   }
 
   /** Panic button for when the indicator gets stuck out of sync with
@@ -79,13 +83,18 @@ class ActivityStore {
   reset() {
     untrack(() => {
       this.log = this.log.map((e) =>
-        e.status === 'pending'
-          ? { ...e, status: 'error', error: 'reset by user', durationMs: Date.now() - e.startedAt }
-          : e,
-      )
-      this.inflight = 0
-    })
+        e.status === "pending"
+          ? {
+              ...e,
+              status: "error",
+              error: "reset by user",
+              durationMs: Date.now() - e.startedAt,
+            }
+          : e
+      );
+      this.inflight = 0;
+    });
   }
 }
 
-export const activity = new ActivityStore()
+export const activity = new ActivityStore();

package/src/lib/collection-preview.ts

@@ -0,0 +1,14 @@
+import type { Capability } from "./renderers/types";
+
+export function safeCollectionName(collection: string): string {
+  return collection.replace(/[^A-Za-z0-9_./-]/g, "");
+}
+
+export function collectionPreviewQuery(
+  collection: string,
+  capability: Capability | undefined
+): string {
+  const safe = safeCollectionName(collection);
+  if (capability === "kv") return `LIST KV ${safe} LIMIT 200`;
+  return `SELECT * FROM ${safe} LIMIT 200`;
+}

package/src/lib/connections.svelte.ts

@@ -173,13 +173,75 @@ export function makeCustomConnection(input: string): ConnectionPreset {
 // Transport reachability is a Surface property (#34, ADR-0003): a Tauri shell
 // can open native unix/embedded connections the browser can't. Detect the
 // Surface here so the default provider declares the right reachable set.
-function surfaceTransports(): Transport[] {
-  const tauri =
+function isTauriSurface(): boolean {
+  return (
     typeof window !== "undefined" &&
-    ("__TAURI_INTERNALS__" in window || "__TAURI__" in window);
-  return [...(tauri ? DESKTOP_TRANSPORTS : BROWSER_TRANSPORTS)];
+    ("__TAURI_INTERNALS__" in window || "__TAURI__" in window)
+  );
+}
+
+function surfaceTransports(): Transport[] {
+  return [...(isTauriSurface() ? DESKTOP_TRANSPORTS : BROWSER_TRANSPORTS)];
 }
 
+/**
+ * Open a `file://` connection by asking the Tauri shell to spawn a local
+ * file-backed reddb sidecar; returns the `http://127.0.0.1:<port>` URL the
+ * HTTP client then talks to.
+ *
+ * Tauri-ness is checked HERE, at call time — not when the provider is built.
+ * In `tauri dev` this module can evaluate before Tauri injects its globals, so
+ * gating the resolver at construction left it unwired and `file://` fell
+ * through to a raw fetch ("Load failed"). At connect time the IPC bridge is
+ * always present. The browser has no filesystem/process access, so we fail
+ * with a clear message there instead.
+ */
+async function tauriOpenEmbedded(fileUrl: string): Promise<string> {
+  if (!isTauriSurface()) {
+    throw new Error("file:// databases can only be opened in the desktop app");
+  }
+  const path = fileUrl.replace(/^file:\/\//i, "");
+  const { invoke } = await import("@tauri-apps/api/core");
+  return invoke<string>("open_embedded", { path });
+}
+
+/**
+ * Desktop HTTP for loopback targets goes through Tauri's rust-side fetch.
+ *
+ * An embedded file-backed reddb (and the bundled `red` generally) emits no CORS
+ * headers, so a cross-origin webview fetch from the app/dev origin to
+ * `127.0.0.1:<port>` is blocked ("Load failed"). Tauri's HTTP plugin issues the
+ * request from Rust, bypassing the webview's same-origin policy. Only loopback
+ * targets are rerouted; remote servers keep the plain webview fetch. In the
+ * browser this is always the plain fetch.
+ */
+const desktopFetch: typeof fetch = async (input, init) => {
+  const url =
+    typeof input === "string"
+      ? input
+      : input instanceof URL
+        ? input.href
+        : input.url;
+  const isLoopback =
+    /^https?:\/\/(127\.0\.0\.1|localhost|\[::1\])(:\d+)?(\/|$)/i.test(url);
+  if (isTauriSurface() && isLoopback) {
+    try {
+      const { fetch: tauriFetch } = await import("@tauri-apps/plugin-http");
+      return await tauriFetch(
+        input as URL | Request | string,
+        init as RequestInit
+      );
+    } catch (e) {
+      // Surface the real reason — the http plugin can reject with a bare
+      // string/object that would otherwise read as "undefined" upstream.
+      const reason =
+        e instanceof Error ? e.message : typeof e === "string" ? e : String(e);
+      throw new Error(`rust-side fetch failed for ${url}: ${reason}`);
+    }
+  }
+  return fetch(input, init);
+};
+
 function isHandoffTokenConsumer(
   candidate: ConnectionProvider
 ): candidate is ConnectionProvider & HandoffTokenConsumer {
@@ -198,6 +260,13 @@ export const provider: ConnectionProvider & {
   presets: PRESETS,
   history: historyStore,
   transports: surfaceTransports(),
+  // Always wired: the resolver itself decides (at call time) whether it's on a
+  // Tauri Surface, so a not-yet-injected global at module load can't disable it.
+  embeddedResolver: tauriOpenEmbedded,
+  // Route loopback HTTP through Tauri's rust-side fetch (CORS bypass for the
+  // embedded/local reddb); plain webview fetch everywhere else.
+  clientFactory: (url, opts) =>
+    new RedClient(url, { ...opts, fetch: desktopFetch }),
   // Boot-params pre-configuration (#36, ADR-0005): a Surface (the MCP App)
   // seeds the endpoint + initial route in the app URL; the Core reads it
   // through the provider. Query tokens are ignored and hash tokens are not

package/src/lib/index.ts

@@ -7,6 +7,7 @@ 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 MasterPasswordDialog } from "./MasterPasswordDialog.svelte";
 export { default as PageHeader } from "./PageHeader.svelte";
@@ -35,6 +36,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/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)
+        ),
+      ],
+    };
+  });
+}