@reddb-io/ui 0.2.0 → 0.3.1

package/src/lib/GlobalProgressBar.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { activity } from './activity.svelte'
+</script>
+
+{#if activity.active}
+  <div class="global-progress" role="progressbar" aria-label="reddb activity" aria-valuetext="Loading">
+    <div class="global-progress__bar"></div>
+  </div>
+{/if}

package/src/lib/MetricChart.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  // Renders a metric the way its *nature* dictates (eixo 3): the caller passes
+  // the ChartKind derived from the descriptor's `kind`, and this component
+  // picks the visualisation — a rate line, a filled gauge level, or a
+  // P50/P95/P99 percentile curve. No chart-type picker is ever shown to the
+  // user; the metric's kind decides.
+  import { LineChart, AreaChart } from 'layerchart'
+  import type { ChartKind, NormalizedSeries } from '#reddb'
+
+  interface Props {
+    chart: ChartKind
+    series: NormalizedSeries[]
+    unit?: string | null
+  }
+  let { chart, series, unit = null }: Props = $props()
+
+  // Worse percentiles trend redder; single series leads with the accent.
+  const PALETTE = ['#ff2056', '#4ade80', '#fbbf24', '#38bdf8', '#a78bfa']
+  const PERCENTILE_COLOR: Record<string, string> = {
+    p50: '#4ade80',
+    p95: '#fbbf24',
+    p99: '#ff2056',
+  }
+
+  // LayerChart auto-detects a time scale from Date x-values.
+  const chartSeries = $derived(
+    series.map((s, i) => ({
+      key: s.label,
+      color: PERCENTILE_COLOR[s.label] ?? PALETTE[i % PALETTE.length],
+      data: s.points.map((p) => ({ date: new Date(p.t), value: p.v })),
+    })),
+  )
+
+  const hasData = $derived(series.some((s) => s.points.length > 0))
+
+  // Gauge / ratio: lead with the most recent level, big.
+  const latest = $derived.by(() => {
+    const pts = series[0]?.points
+    return pts && pts.length ? pts[pts.length - 1].v : null
+  })
+  const isRatio = $derived(chart === 'gauge')
+
+  function fmtValue(v: number): string {
+    if (isRatio && v >= 0 && v <= 1) return `${(v * 100).toFixed(1)}%`
+    if (Math.abs(v) >= 1000) return v.toLocaleString(undefined, { maximumFractionDigits: 1 })
+    return v.toFixed(Math.abs(v) < 1 ? 3 : 2)
+  }
+</script>
+
+{#if !hasData}
+  <div class="flex h-full items-center justify-center text-[12px] text-fg-3 font-mono">
+    no samples in window
+  </div>
+{:else if chart === 'gauge'}
+  <!-- Point-in-time level. A ratio shows a 0–100% bar; other gauges show the
+       raw latest value. -->
+  <div class="flex h-full flex-col items-center justify-center gap-3">
+    <div class="font-mono text-[40px] font-semibold leading-none text-accent">
+      {latest === null ? '—' : fmtValue(latest)}{#if unit && !isRatio}<span class="ml-1 text-[16px] text-fg-3">{unit}</span>{/if}
+    </div>
+    {#if isRatio && latest !== null}
+      <div class="h-1.5 w-56 overflow-hidden rounded-full bg-bg-3">
+        <div class="h-full rounded-full bg-accent" style={`width: ${Math.max(0, Math.min(100, latest * 100))}%`}></div>
+      </div>
+    {/if}
+  </div>
+{:else if chart === 'area'}
+  <AreaChart
+    data={chartSeries[0]?.data ?? []}
+    x="date"
+    y="value"
+    series={chartSeries}
+    props={{ area: { 'fill-opacity': 0.12 } }}
+    legend={chartSeries.length > 1}
+  />
+{:else}
+  <!-- line + percentiles -->
+  <LineChart
+    data={chartSeries[0]?.data ?? []}
+    x="date"
+    y="value"
+    series={chartSeries}
+    legend={chartSeries.length > 1}
+  />
+{/if}

package/src/lib/QueryEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Play, Loader2 } from 'lucide-svelte'
+  import { Play, Loader2, X } from 'lucide-svelte'
   import { connection } from '$lib/connections.svelte'
-  import { queryTabs, deriveQueryLabel } from '$lib/query-tabs.svelte'
+  import { queryTabs, deriveQueryLabel, formatElapsed } from '$lib/query-tabs.svelte'
   import { tabs } from '$lib/tabs.svelte'
   import { registry } from '$lib/renderers'
   import type { Capability } from '$lib/renderers'
@@ -23,6 +23,19 @@
   const tab = $derived(tabs.tabs.find((t) => t.id === tabId))
 
   let textareaEl: HTMLTextAreaElement | undefined = $state()
+  let now = $state(Date.now())
+  const elapsed = $derived(
+    qs?.runningStartedAt ? formatElapsed(Math.max(0, now - qs.runningStartedAt)) : '0ms'
+  )
+
+  $effect(() => {
+    if (!qs?.running) return
+    now = Date.now()
+    const id = setInterval(() => {
+      now = Date.now()
+    }, 100)
+    return () => clearInterval(id)
+  })
 
   function setSql(value: string) {
     queryTabs.setSql(tabId, value)
@@ -36,6 +49,10 @@
     await queryTabs.run(tabId)
   }
 
+  function cancel() {
+    queryTabs.cancel(tabId)
+  }
+
   function onKey(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
       e.preventDefault()
@@ -93,15 +110,39 @@
   </div>
 
   <div class="flex-1 overflow-hidden bg-bg-0">
-    {#if qs?.error}
+    {#if qs?.running}
+      <div class="h-full grid place-items-center p-6" aria-live="polite" aria-busy="true">
+        <div class="w-full max-w-md rounded border border-line-1 bg-bg-1 p-4 font-mono">
+          <div class="flex items-start justify-between gap-4">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2 text-fg-1 text-[13px]">
+                <Loader2 class="size-4 animate-spin text-accent" />
+                <span>Running query</span>
+              </div>
+              <div class="mt-2 text-[11px] text-fg-3">
+                elapsed <span class="tabular-nums text-fg-2">{elapsed}</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="inline-flex h-7 items-center gap-1 rounded border border-line-2 px-2 text-[11px] text-fg-2 hover:border-danger/50 hover:text-danger cursor-pointer"
+              onclick={cancel}
+              aria-label="Cancel running query"
+            >
+              <X class="size-3.5" />
+              <span>Cancel</span>
+            </button>
+          </div>
+          <div class="mt-3 max-h-24 overflow-hidden rounded bg-bg-0 px-2 py-1.5 text-[11px] text-fg-3">
+            <pre class="m-0 whitespace-pre-wrap break-words">{qs.sql.trim()}</pre>
+          </div>
+        </div>
+      </div>
+    {:else if qs?.error}
       <div class="p-4 text-[12px] font-mono text-warn">
         <div class="font-semibold mb-1">Query failed</div>
         <pre class="whitespace-pre-wrap">{qs.error}</pre>
       </div>
-    {:else if qs?.running && !qs.result}
-      <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
-        Running…
-      </div>
     {:else if !qs?.result}
       <div class="h-full grid place-items-center text-fg-3 text-[12px] font-mono">
         Run a query to see results here.

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}