@reddb-io/ui 0.3.0 → 0.3.2

package/src/lib/ResultsPane.svelte

@@ -7,6 +7,7 @@
   import { tabs, type Tab } from '$lib/tabs.svelte'
   import { queryTabs } from '$lib/query-tabs.svelte'
   import { defaultSubpage, subpageCapability } from '$lib/collection-pages'
+  import { collectionPreviewQuery, safeCollectionName } from '$lib/collection-preview'
   import {
     collectionCatalogBadges,
     collectionCatalogFromRow,
@@ -38,6 +39,8 @@
     { value: 'document', label: 'Document' },
     { value: 'json', label: 'JSON' },
   ]
+  const resultsSkeletonRows = Array.from({ length: 14 }, (_, i) => i)
+  const resultsSkeletonColumns = Array.from({ length: 6 }, (_, i) => i)
 
   let results = $state<Record<string, QueryResult | null>>({})
   let errors = $state<Record<string, string>>({})
@@ -169,10 +172,6 @@
     }
   }
 
-  function safeCollectionName(collection: string): string {
-    return collection.replace(/[^A-Za-z0-9_./-]/g, '')
-  }
-
   function sqlString(s: string): string {
     return `'${s.replace(/'/g, "''")}'`
   }
@@ -240,7 +239,8 @@
       const shouldFetchQueue = subpage === 'queue' || tab.capability === 'queue'
       const shouldFetchVector = subpage === 'vector' || tab.capability === 'vector'
       const shouldFetchStats = subpage === 'stats' || tab.capability === 'stats'
-      const fetchMode = shouldFetchGraph ? 'graph-subgraph' : shouldFetchQueue ? 'queue-peek' : shouldFetchVector ? 'vector-inspector' : shouldFetchStats ? 'stats-info' : tab.capability ?? 'unknown'
+      const shouldFetchKv = subpage === 'kv' || tab.capability === 'kv'
+      const fetchMode = shouldFetchGraph ? 'graph-subgraph' : shouldFetchQueue ? 'queue-peek' : shouldFetchVector ? 'vector-inspector' : shouldFetchStats ? 'stats-info' : shouldFetchKv ? 'kv-list' : tab.capability ?? 'unknown'
       const cacheKey = `${tab.key}:${subpage}:${fetchMode}`
       if (resultKeys[tab.id] && resultKeys[tab.id] !== cacheKey) {
         delete results[tab.id]
@@ -267,9 +267,14 @@
               `${collection} · stats preview`,
               () => fetchStatsCollection(client, collection),
             )
+        : shouldFetchKv
+          ? activity.track(
+              `${collection} · LIST KV (LIMIT 200)`,
+              () => client.query(collectionPreviewQuery(collection, 'kv')),
+            )
         : activity.track(
             `${collection} · SELECT * (LIMIT 200)`,
-            () => client.query(`SELECT * FROM ${collection} LIMIT 200`),
+            () => client.query(collectionPreviewQuery(collection, tab.capability)),
           )
       job
         .then((r) => { results[tab.id] = r })
@@ -588,8 +593,71 @@
             <pre class="whitespace-pre-wrap">{err}</pre>
           </div>
         {:else if !result}
-          <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
-            Loading {tab.label}…
+          <div class="h-full flex flex-col" aria-busy="true" aria-label={`Loading ${tab.label} results`}>
+            <div class="border-b border-line-1 bg-bg-1/35 px-3 py-2">
+              <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+                <div class="min-w-[180px] flex-1">
+                  <div class="flex items-center gap-2">
+                    <div class="h-[21px] w-[78px] rounded border border-line-1 bg-bg-2 motion-safe:animate-pulse"></div>
+                    <div class="h-4 w-44 max-w-[45vw] rounded bg-bg-2 motion-safe:animate-pulse"></div>
+                  </div>
+                  <div class="mt-1 flex flex-wrap gap-1">
+                    <div class="h-[21px] w-24 rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                    <div class="h-[21px] w-32 rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                    <div class="h-[21px] w-20 rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                  </div>
+                </div>
+
+                <div class="flex flex-wrap items-center gap-2">
+                  <div class="h-[30px] w-[94px] rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                  <div class="h-[30px] w-[92px] rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                  <div class="h-[30px] w-[92px] rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                  <div class="h-[30px] w-[78px] rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                  <div class="h-[30px] w-[78px] rounded border border-line-1 bg-bg-0/70 motion-safe:animate-pulse"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="border-b border-line-1 px-3 py-1.5 flex items-center gap-2 bg-bg-1/40">
+              <div class="h-6 w-[70px] rounded border border-line-1 bg-bg-2 motion-safe:animate-pulse"></div>
+              <div class="h-6 w-[54px] rounded border border-line-1 bg-bg-2 motion-safe:animate-pulse"></div>
+              <div class="h-4 w-px bg-line-1"></div>
+              <div class="h-6 w-[76px] rounded border border-line-1 bg-bg-2 motion-safe:animate-pulse"></div>
+              <div class="ml-auto h-3 w-[58px] rounded bg-bg-2 motion-safe:animate-pulse"></div>
+            </div>
+
+            <div class="flex-1 overflow-hidden">
+              <div class="min-w-[760px]">
+                <div class="grid h-8 grid-cols-[40px_repeat(6,minmax(96px,1fr))] border-b border-line-1 bg-bg-1">
+                  <div class="px-2 py-2">
+                    <div class="ml-auto h-3 w-4 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+                  </div>
+                  {#each resultsSkeletonColumns as col (col)}
+                    <div class="px-2 py-2">
+                      <div class="h-3 rounded bg-bg-2 motion-safe:animate-pulse" style={`width: ${col % 3 === 0 ? 72 : col % 3 === 1 ? 104 : 56}px`}></div>
+                    </div>
+                  {/each}
+                </div>
+                {#each resultsSkeletonRows as row (row)}
+                  <div class="grid h-[29px] grid-cols-[40px_repeat(6,minmax(96px,1fr))] border-b border-line-1/60">
+                    <div class="px-2 py-2">
+                      <div class="ml-auto h-3 w-4 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+                    </div>
+                    {#each resultsSkeletonColumns as col (col)}
+                      <div class="px-2 py-2">
+                        <div class="h-3 rounded bg-bg-2 motion-safe:animate-pulse" style={`width: ${col === 0 ? 48 : 64 + ((row + col) % 4) * 18}px`}></div>
+                      </div>
+                    {/each}
+                  </div>
+                {/each}
+              </div>
+            </div>
+
+            <div class="border-t border-line-1 px-3 py-1.5 flex items-center gap-3">
+              <div class="h-3 w-28 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+              <div class="h-3 w-44 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+              <div class="h-3 w-20 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+            </div>
           </div>
         {:else}
           {@const renderer = pickRenderer(tab, result)}

package/src/lib/SchemaTree.svelte

@@ -27,6 +27,8 @@
   let error = $state<string | null>(null)
   let search = $state('')
   let capabilityFilter = $state<Capability | 'all'>('all')
+  const skeletonRows = Array.from({ length: 10 }, (_, i) => i)
+  const skeletonChips = Array.from({ length: 4 }, (_, i) => i)
 
   const connected = $derived(connection.connected)
   const activeUrl = $derived(connection.active.url)
@@ -113,7 +115,29 @@
     <div class="mt-1 break-words">{error}</div>
   </div>
 {:else if loading && items.length === 0}
-  <div class="p-3 text-[12px] text-fg-3 font-mono">Loading…</div>
+  <div class="schema-skeleton" aria-busy="true" aria-label="Loading schema">
+    <div class="p-2 border-b border-line-1 grid gap-2">
+      <div class="flex items-center gap-1.5 h-7 rounded border border-line-1 bg-bg-0 px-2">
+        <Search class="size-3 text-fg-3" />
+        <div class="h-3 w-32 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+      </div>
+
+      <div class="flex flex-wrap gap-1">
+        {#each skeletonChips as chip (chip)}
+          <div class="h-5 rounded border border-line-1 bg-bg-1 px-1.5 motion-safe:animate-pulse" style={`width: ${chip === 0 ? 42 : 28 + chip * 8}px`}></div>
+        {/each}
+      </div>
+    </div>
+
+    <ul class="py-1" role="presentation">
+      {#each skeletonRows as row (row)}
+        <li class="flex h-7 items-center gap-2 px-3">
+          <div class="h-4 w-4 rounded bg-bg-2 motion-safe:animate-pulse"></div>
+          <div class="h-3 rounded bg-bg-2 motion-safe:animate-pulse" style={`width: ${row % 3 === 0 ? 132 : row % 3 === 1 ? 96 : 164}px`}></div>
+        </li>
+      {/each}
+    </ul>
+  </div>
 {:else if items.length === 0}
   <div class="p-3 flex flex-col items-start gap-2 text-[12px] text-fg-3 font-mono leading-relaxed">
     <span class="text-fg-2">No user collections.</span>

package/src/lib/SecurityView.svelte

@@ -4,22 +4,33 @@
   import EmptyState from '$lib/EmptyState.svelte'
   import { activity } from '$lib/activity.svelte'
   import { connection } from '$lib/connections.svelte'
+  import type { PermissionDecision } from '$lib/permission-gate'
+  import {
+    POLICY_READ_CHECK,
+    assembleCapabilityMatrix,
+    capabilityMatrixChecksFromPolicies,
+    type CapabilityMatrixRow,
+  } from '$lib/policies'
   import { secureStore } from '$lib/secureStore.svelte'
   import type { AuthPolicy, AuthTenant, AuthUser, Whoami } from '#reddb'
-  import { Building2, Lock, RefreshCw, ScrollText, Shield, ShieldAlert, Users } from 'lucide-svelte'
+  import { Building2, CheckCircle2, Lock, RefreshCw, ScrollText, ShieldAlert, Users, XCircle } from 'lucide-svelte'
 
   let whoami = $state<Whoami | null>(null)
   let tenants = $state<AuthTenant[]>([])
   let users = $state<AuthUser[]>([])
   let policies = $state<AuthPolicy[]>([])
+  let policyReadDecision = $state<PermissionDecision | null>(null)
+  let capabilityRows = $state<CapabilityMatrixRow[]>([])
   let loading = $state(false)
   let whoamiError = $state<string | null>(null)
   let tenantsError = $state<string | null>(null)
   let usersError = $state<string | null>(null)
   let policiesError = $state<string | null>(null)
+  let capabilityError = $state<string | null>(null)
 
   const activeUrl = $derived(connection.active.url)
   const connected = $derived(connection.connected)
+  const showPolicyPane = $derived(policyReadDecision?.allowed === true)
 
   function fmtTime(v: number | undefined): string {
     if (!v) return '-'
@@ -34,6 +45,8 @@
       tenants = []
       users = []
       policies = []
+      policyReadDecision = null
+      capabilityRows = []
       return
     }
     loading = true
@@ -41,20 +54,61 @@
     tenantsError = null
     usersError = null
     policiesError = null
+    capabilityError = null
+    policyReadDecision = null
+    capabilityRows = []
     try {
       whoami = await activity.track('security · whoami', () => client.whoami())
     } catch (e) {
       whoamiError = (e as Error).message
       whoami = null
     }
+    try {
+      tenants = await activity.track('security · tenants', () => client.tenants())
+    } catch (e) {
+      tenantsError = (e as Error).message
+      tenants = []
+    }
     try {
       users = await activity.track('security · users', () => client.users())
     } catch (e) {
       usersError = (e as Error).message
       users = []
-    } finally {
-      loading = false
     }
+    try {
+      const [decision] = await activity.track('security · auth.can policy read', () => client.authCan([POLICY_READ_CHECK]))
+      policyReadDecision = decision ?? {
+        ...POLICY_READ_CHECK,
+        allowed: false,
+        reason: 'auth.can omitted policy-read decision',
+      }
+    } catch (e) {
+      policyReadDecision = {
+        ...POLICY_READ_CHECK,
+        allowed: false,
+        reason: (e as Error).message || 'auth.can failed',
+      }
+    }
+    if (policyReadDecision.allowed) {
+      try {
+        policies = await activity.track('security · policies', () => client.policies())
+      } catch (e) {
+        policiesError = (e as Error).message
+        policies = []
+      }
+      try {
+        const checks = capabilityMatrixChecksFromPolicies(policies)
+        const decisions = await activity.track('security · auth.can capability matrix', () => client.authCan(checks))
+        capabilityRows = assembleCapabilityMatrix(policies, decisions)
+      } catch (e) {
+        capabilityError = (e as Error).message
+        capabilityRows = []
+      }
+    } else {
+      policies = []
+      capabilityRows = []
+    }
+    loading = false
   }
 
   $effect(() => {
@@ -142,38 +196,40 @@
           {/if}
         </Card>
 
-        <Card title="policies">
-          {#if policiesError}
-            <div class="mb-2 inline-flex items-center gap-1.5 rounded border border-warn/40 bg-bg-0 px-2 py-1 text-[11px] font-mono text-warn">
-              <ShieldAlert class="size-3.5" />
-              policies endpoint denied or unavailable
-            </div>
-            <pre class="whitespace-pre-wrap break-words text-[12px] font-mono text-fg-3">{policiesError}</pre>
-          {:else if policies.length === 0}
-            <div class="flex items-center gap-2 text-[12px] font-mono text-fg-3">
-              <ScrollText class="size-4" />
-              <span>No policies returned for this principal.</span>
-            </div>
-          {:else}
-            <div class="grid gap-1 text-[12px] font-mono">
-              {#each policies.slice(0, 6) as policy, i (`${policy.id ?? policy.name ?? i}`)}
-                <div class="rounded border border-line-1 bg-bg-0 px-2 py-1.5">
-                  <div class="flex items-center gap-2">
-                    <span class="text-fg-0">{policy.name ?? policy.id ?? 'policy'}</span>
-                    {#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{/if}
-                  </div>
-                  <div class="mt-1 text-fg-3">
-                    {policy.action ?? '*'} · {policy.resource ?? '*'}
-                    {#if policy.tenant} · tenant {policy.tenant}{/if}
+        {#if showPolicyPane}
+          <Card title="policies">
+            {#if policiesError}
+              <div class="mb-2 inline-flex items-center gap-1.5 rounded border border-warn/40 bg-bg-0 px-2 py-1 text-[11px] font-mono text-warn">
+                <ShieldAlert class="size-3.5" />
+                policies endpoint denied or unavailable
+              </div>
+              <pre class="whitespace-pre-wrap break-words text-[12px] font-mono text-fg-3">{policiesError}</pre>
+            {:else if policies.length === 0}
+              <div class="flex items-center gap-2 text-[12px] font-mono text-fg-3">
+                <ScrollText class="size-4" />
+                <span>No policies returned for this principal.</span>
+              </div>
+            {:else}
+              <div class="grid gap-1 text-[12px] font-mono">
+                {#each policies.slice(0, 6) as policy, i (`${policy.id ?? policy.name ?? i}`)}
+                  <div class="rounded border border-line-1 bg-bg-0 px-2 py-1.5">
+                    <div class="flex items-center gap-2">
+                      <span class="text-fg-0">{policy.name ?? policy.id ?? 'policy'}</span>
+                      {#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{/if}
+                    </div>
+                    <div class="mt-1 text-fg-3">
+                      {policy.action ?? '*'} · {policy.resource ?? '*'}
+                      {#if policy.tenant} · tenant {policy.tenant}{/if}
+                    </div>
                   </div>
-                </div>
-              {/each}
-              {#if policies.length > 6}
-                <div class="text-[11px] text-fg-3">{policies.length - 6} more policies in the table.</div>
-              {/if}
-            </div>
-          {/if}
-        </Card>
+                {/each}
+                {#if policies.length > 6}
+                  <div class="text-[11px] text-fg-3">{policies.length - 6} more policies in the table.</div>
+                {/if}
+              </div>
+            {/if}
+          </Card>
+        {/if}
       </div>
 
       <div class="grid gap-3 content-start">
@@ -217,38 +273,93 @@
           {/if}
         </Card>
 
-        <Card title="policy table">
-          {#if policiesError}
-            <div class="text-[12px] font-mono text-fg-3">Policy table unavailable for this principal.</div>
-          {:else if policies.length === 0}
-            <div class="text-[12px] font-mono text-fg-3">No policies to tabulate.</div>
-          {:else}
-            <div class="overflow-auto">
-              <table class="w-full border-collapse text-[12px] font-mono">
-                <thead class="sticky top-0 bg-bg-1">
-                  <tr class="border-b border-line-1 text-fg-3">
-                    <th class="px-2 py-1.5 text-left font-normal">effect</th>
-                    <th class="px-2 py-1.5 text-left font-normal">principal</th>
-                    <th class="px-2 py-1.5 text-left font-normal">action</th>
-                    <th class="px-2 py-1.5 text-left font-normal">resource</th>
-                    <th class="px-2 py-1.5 text-left font-normal">tenant</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {#each policies as policy, i (`${policy.id ?? policy.name ?? i}`)}
-                    <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
-                      <td class="px-2 py-1">{#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
-                      <td class="px-2 py-1 text-fg-1">{policy.principal ?? '-'}</td>
-                      <td class="px-2 py-1 text-accent">{policy.action ?? '*'}</td>
-                      <td class="px-2 py-1 text-fg-1">{policy.resource ?? '*'}</td>
-                      <td class="px-2 py-1 text-fg-2">{policy.tenant ?? '-'}</td>
+        {#if showPolicyPane}
+          <Card title="policy table">
+            {#if policiesError}
+              <div class="text-[12px] font-mono text-fg-3">Policy table unavailable for this principal.</div>
+            {:else if policies.length === 0}
+              <div class="text-[12px] font-mono text-fg-3">No policies to tabulate.</div>
+            {:else}
+              <div class="overflow-auto">
+                <table class="w-full border-collapse text-[12px] font-mono">
+                  <thead class="sticky top-0 bg-bg-1">
+                    <tr class="border-b border-line-1 text-fg-3">
+                      <th class="px-2 py-1.5 text-left font-normal">effect</th>
+                      <th class="px-2 py-1.5 text-left font-normal">principal</th>
+                      <th class="px-2 py-1.5 text-left font-normal">action</th>
+                      <th class="px-2 py-1.5 text-left font-normal">resource</th>
+                      <th class="px-2 py-1.5 text-left font-normal">tenant</th>
                     </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
-          {/if}
-        </Card>
+                  </thead>
+                  <tbody>
+                    {#each policies as policy, i (`${policy.id ?? policy.name ?? i}`)}
+                      <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
+                        <td class="px-2 py-1">{#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
+                        <td class="px-2 py-1 text-fg-1">{policy.principal ?? '-'}</td>
+                        <td class="px-2 py-1 text-accent">{policy.action ?? '*'}</td>
+                        <td class="px-2 py-1 text-fg-1">{policy.resource ?? '*'}</td>
+                        <td class="px-2 py-1 text-fg-2">{policy.tenant ?? '-'}</td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+            {/if}
+          </Card>
+
+          <Card title="my capabilities">
+            {#if capabilityError}
+              <div class="mb-2 inline-flex items-center gap-1.5 rounded border border-warn/40 bg-bg-0 px-2 py-1 text-[11px] font-mono text-warn">
+                <ShieldAlert class="size-3.5" />
+                capability matrix unavailable
+              </div>
+              <pre class="whitespace-pre-wrap break-words text-[12px] font-mono text-fg-3">{capabilityError}</pre>
+            {:else if capabilityRows.length === 0}
+              <div class="text-[12px] font-mono text-fg-3">No capability checks returned.</div>
+            {:else}
+              <div class="overflow-auto">
+                <table class="w-full border-collapse text-[12px] font-mono">
+                  <thead class="sticky top-0 bg-bg-1">
+                    <tr class="border-b border-line-1 text-fg-3">
+                      <th class="px-2 py-1.5 text-left font-normal">can</th>
+                      <th class="px-2 py-1.5 text-left font-normal">action</th>
+                      <th class="px-2 py-1.5 text-left font-normal">resource</th>
+                      <th class="px-2 py-1.5 text-left font-normal">policy effect</th>
+                      <th class="px-2 py-1.5 text-left font-normal">reason</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {#each capabilityRows as row (row.id)}
+                      <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
+                        <td class="px-2 py-1">
+                          {#if row.allowed}
+                            <span class="inline-flex items-center gap-1 text-ok"><CheckCircle2 class="size-3.5" /> yes</span>
+                          {:else}
+                            <span class="inline-flex items-center gap-1 text-danger"><XCircle class="size-3.5" /> no</span>
+                          {/if}
+                        </td>
+                        <td class="px-2 py-1 text-accent">{row.action}</td>
+                        <td class="px-2 py-1 text-fg-1">{row.resourceLabel}</td>
+                        <td class="px-2 py-1">
+                          {#if row.effects.length === 0}
+                            <span class="text-fg-3">-</span>
+                          {:else}
+                            <span class="inline-flex flex-wrap gap-1">
+                              {#each row.effects as effect}
+                                <Badge tone={effect === 'deny' ? 'danger' : 'ok'}>{effect}</Badge>
+                              {/each}
+                            </span>
+                          {/if}
+                        </td>
+                        <td class="max-w-[320px] px-2 py-1 text-fg-3">{row.reason ?? '-'}</td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+            {/if}
+          </Card>
+        {/if}
       </div>
     </div>
   {/if}