@reddb-io/ui 0.1.1

package/src/lib/SchemaTree.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import { connection } from './connections.svelte'
+  import { secureStore } from './secureStore.svelte'
+  import { activity } from './activity.svelte'
+  import {
+    CAPABILITY_GLYPHS,
+    detectCapability,
+    isInternalCollection,
+    type Capability,
+  } from './capability'
+  import { defaultSubpage } from './collection-pages'
+  import { useRouter } from './router.svelte'
+  import { Plug, Database, Lock, Search, X } from 'lucide-svelte'
+
+  const router = useRouter()
+
+  interface Item {
+    name: string
+    capability: Capability
+  }
+
+  // The router is the source of truth for which collection is selected.
+  const activeCollection = $derived(router.collection)
+
+  let items = $state<Item[]>([])
+  let loading = $state(false)
+  let error = $state<string | null>(null)
+  let search = $state('')
+  let capabilityFilter = $state<Capability | 'all'>('all')
+
+  const connected = $derived(connection.connected)
+  const activeUrl = $derived(connection.active.url)
+  const capabilityCounts = $derived.by(() => {
+    const counts = new Map<Capability, number>()
+    for (const item of items) counts.set(item.capability, (counts.get(item.capability) ?? 0) + 1)
+    return [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]))
+  })
+  const filteredItems = $derived.by(() => {
+    const q = search.trim().toLowerCase()
+    return items.filter((item) => {
+      if (capabilityFilter !== 'all' && item.capability !== capabilityFilter) return false
+      if (!q) return true
+      const g = CAPABILITY_GLYPHS[item.capability]
+      return item.name.toLowerCase().includes(q) || g.label.toLowerCase().includes(q)
+    })
+  })
+
+  async function refresh() {
+    const client = connection.client
+    if (!client || !connected) {
+      items = []
+      return
+    }
+    loading = true
+    error = null
+    const token = activeUrl
+    try {
+      const names = await activity.track('schema · list collections', () => client.collections())
+      const user = names.filter((n) => !isInternalCollection(n)).sort()
+      items = user.map((name) => ({ name, capability: 'table' as Capability }))
+      const probes = user.map((name) =>
+        activity.track(`schema · probe ${name}`, async () => {
+          const cap = await detectCapability(client, name)
+          if (token !== activeUrl) return
+          items = items.map((it) => (it.name === name ? { ...it, capability: cap } : it))
+        }),
+      )
+      await Promise.all(probes)
+    } catch (e) {
+      error = (e as Error).message
+      items = []
+    } finally {
+      loading = false
+    }
+  }
+
+  $effect(() => {
+    // Block all probing until the secure store is unlocked, so the
+    // network panel doesn't leak the schema before the user authenticates.
+    if (secureStore.locked) return
+    void connected
+    void activeUrl
+    refresh()
+  })
+
+</script>
+
+<div class="px-3 py-2 border-b border-line-1 flex items-center justify-between text-fg-3">
+  <div class="flex items-center gap-2">
+    <Database class="size-3.5" />
+    <span class="type-label">Schema</span>
+  </div>
+  {#if connected && items.length > 0}
+    <span class="font-mono text-[10px] text-fg-3">{items.length}</span>
+  {/if}
+</div>
+
+{#if secureStore.locked}
+  <div class="p-3 flex flex-col items-start gap-2 text-[12px] text-fg-3 font-mono leading-relaxed">
+    <Lock class="size-4 text-accent" />
+    <span class="text-fg-1">Locked.</span>
+    <span>Enter your master password to load the schema.</span>
+  </div>
+{:else if !connected}
+  <div class="p-3 flex flex-col items-start gap-2 text-[12px] text-fg-3 font-mono leading-relaxed">
+    <Plug class="size-4 text-fg-3" />
+    <span>No schema to show.</span>
+    <span>Connect to a reddb instance to inspect collections.</span>
+  </div>
+{:else if error}
+  <div class="p-3 text-[12px] text-fg-3 font-mono leading-relaxed">
+    <div class="text-fg-2">Couldn't load collections.</div>
+    <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>
+{: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>
+    <span>Seed the instance to populate the schema.</span>
+    <code class="px-2 py-1 bg-bg-2 border border-line-1 rounded text-[11px]">./scripts/seed.sh {activeUrl}</code>
+  </div>
+{:else}
+  <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 text-[11px] font-mono">
+      <Search class="size-3 text-fg-3" />
+      <input
+        type="text"
+        bind:value={search}
+        placeholder="search collections…"
+        class="min-w-0 flex-1 bg-transparent text-fg-1 outline-none placeholder:text-fg-3"
+      />
+      {#if search}
+        <button type="button" class="text-fg-3 hover:text-fg-1 cursor-pointer" aria-label="Clear collection search" onclick={() => (search = '')}>
+          <X class="size-3" />
+        </button>
+      {/if}
+    </div>
+
+    <div class="flex flex-wrap gap-1">
+      <button
+        type="button"
+        onclick={() => (capabilityFilter = 'all')}
+        class={[
+          'h-5 rounded border px-1.5 font-mono text-[10px] cursor-pointer transition-colors',
+          capabilityFilter === 'all' ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+        ].join(' ')}
+      >
+        all {items.length}
+      </button>
+      {#each capabilityCounts as [cap, count] (cap)}
+        {@const g = CAPABILITY_GLYPHS[cap]}
+        <button
+          type="button"
+          onclick={() => (capabilityFilter = cap)}
+          title={g.label}
+          class={[
+            'h-5 rounded border px-1.5 font-mono text-[10px] cursor-pointer transition-colors',
+            capabilityFilter === cap ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+          ].join(' ')}
+        >
+          {g.glyph} {count}
+        </button>
+      {/each}
+    </div>
+  </div>
+  <ul class="py-1" role="list">
+    {#if filteredItems.length === 0}
+      <li class="px-3 py-2 font-mono text-[12px] text-fg-3">No matching collections.</li>
+    {/if}
+    {#each filteredItems as item (item.name)}
+      {@const g = CAPABILITY_GLYPHS[item.capability]}
+      {@const active = item.name === activeCollection}
+      {@const target = { view: 'collection' as const, collection: item.name, subpage: defaultSubpage(item.capability) }}
+      <li>
+        <a
+          href={router.href(target)}
+          onclick={(e) => router.go(target, e)}
+          aria-current={active ? 'page' : undefined}
+          title={`${g.label} · ${item.name}`}
+          class={[
+            'w-full flex items-center gap-2 px-3 py-1 font-mono text-[12px] no-underline transition-colors',
+            active ? 'bg-bg-1 text-fg-0' : 'text-fg-2 hover:bg-bg-1 hover:text-fg-0',
+          ].join(' ')}
+        >
+          <span class="inline-block w-4 text-center text-fg-3" aria-hidden="true">{g.glyph}</span>
+          <span class="truncate">{item.name}</span>
+          <span class="sr-only">{g.label}</span>
+        </a>
+      </li>
+    {/each}
+  </ul>
+{/if}

package/src/lib/SecurityView.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+  import { Card, Badge } from '@reddb-io/ui-kit'
+  import PageHeader from '$lib/PageHeader.svelte'
+  import EmptyState from '$lib/EmptyState.svelte'
+  import { activity } from '$lib/activity.svelte'
+  import { connection } from '$lib/connections.svelte'
+  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'
+
+  let whoami = $state<Whoami | null>(null)
+  let tenants = $state<AuthTenant[]>([])
+  let users = $state<AuthUser[]>([])
+  let policies = $state<AuthPolicy[]>([])
+  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)
+
+  const activeUrl = $derived(connection.active.url)
+  const connected = $derived(connection.connected)
+
+  function fmtTime(v: number | undefined): string {
+    if (!v) return '-'
+    const ms = v > 10_000_000_000 ? v : v * 1000
+    return new Date(ms).toISOString().replace('T', ' ').slice(0, 19)
+  }
+
+  async function refresh() {
+    const client = connection.client
+    if (!client || secureStore.locked || !connected) {
+      whoami = null
+      tenants = []
+      users = []
+      policies = []
+      return
+    }
+    loading = true
+    whoamiError = null
+    tenantsError = null
+    usersError = null
+    policiesError = null
+    try {
+      whoami = await activity.track('security · whoami', () => client.whoami())
+    } catch (e) {
+      whoamiError = (e as Error).message
+      whoami = null
+    }
+    try {
+      users = await activity.track('security · users', () => client.users())
+    } catch (e) {
+      usersError = (e as Error).message
+      users = []
+    } finally {
+      loading = false
+    }
+  }
+
+  $effect(() => {
+    if (secureStore.locked) return
+    void activeUrl
+    void connected
+    refresh()
+  })
+</script>
+
+<div class="h-full overflow-auto bg-bg-0 p-6 text-fg-1">
+  <PageHeader
+    eyebrow="Admin"
+    title="Security"
+    subtitle="Tenants, users, and policy surfaces are permission-aware. Controls only appear when reddb exposes the grant."
+  >
+    {#snippet actions()}
+      <button
+        type="button"
+        onclick={refresh}
+        disabled={loading || secureStore.locked || !connected}
+        class="inline-flex h-7 items-center gap-1.5 rounded-md border border-line-2 bg-bg-2 px-2.5 text-[11px] font-mono text-fg-1 hover:border-line-3 hover:text-fg-0 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        <RefreshCw class={loading ? 'size-3.5 animate-spin' : 'size-3.5'} />
+        refresh
+      </button>
+    {/snippet}
+  </PageHeader>
+
+  {#if secureStore.locked}
+    <EmptyState icon={Lock} title="Security locked" message="Enter the master password before red-ui loads auth data." />
+  {:else if !connected}
+    <EmptyState icon={ShieldAlert} title="No active connection" message="Connect to a reddb instance to inspect security posture." />
+  {:else}
+    <div class="grid grid-cols-[minmax(280px,0.75fr)_1.25fr] gap-3">
+      <div class="grid gap-3 content-start">
+        <Card title="session">
+          {#if whoamiError}
+            <div class="text-[12px] font-mono text-warn break-words">{whoamiError}</div>
+          {:else if whoami}
+            <div class="grid grid-cols-[110px_1fr] gap-x-3 gap-y-2 text-[12px] font-mono">
+              <span class="text-fg-3">authenticated</span>
+              <span>{#if whoami.authenticated}<Badge tone="ok">yes</Badge>{:else}<Badge tone="warn">no</Badge>{/if}</span>
+              <span class="text-fg-3">username</span>
+              <span class="text-fg-0">{whoami.username}</span>
+              <span class="text-fg-3">role</span>
+              <span class="text-accent">{whoami.role}</span>
+              {#if whoami.note}
+                <span class="text-fg-3">note</span>
+                <span class="text-fg-1">{whoami.note}</span>
+              {/if}
+            </div>
+          {:else}
+            <div class="text-[12px] font-mono text-fg-3">Loading session…</div>
+          {/if}
+        </Card>
+
+        <Card title="tenants">
+          {#if tenantsError}
+            <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" />
+              tenants endpoint denied or unavailable
+            </div>
+            <pre class="whitespace-pre-wrap break-words text-[12px] font-mono text-fg-3">{tenantsError}</pre>
+          {:else if tenants.length === 0}
+            <div class="flex items-center gap-2 text-[12px] font-mono text-fg-3">
+              <Building2 class="size-4" />
+              <span>No tenants returned for this principal.</span>
+            </div>
+          {:else}
+            <div class="grid gap-1 text-[12px] font-mono">
+              {#each tenants as tenant, i (`${tenant.id ?? tenant.slug ?? tenant.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">{tenant.name ?? tenant.slug ?? tenant.id ?? 'tenant'}</span>
+                    {#if tenant.role}<Badge tone="accent">{tenant.role}</Badge>{/if}
+                  </div>
+                  <div class="mt-1 text-fg-3">
+                    {tenant.id ?? tenant.slug ?? '-'}
+                    {#if tenant.grants?.length} · {tenant.grants.join(', ')}{/if}
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {/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}
+                  </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>
+      </div>
+
+      <div class="grid gap-3 content-start">
+        <Card title="users">
+          {#if usersError}
+            <div class="mb-3 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" />
+              users endpoint denied or unavailable
+            </div>
+            <pre class="whitespace-pre-wrap break-words text-[12px] font-mono text-fg-3">{usersError}</pre>
+          {:else if users.length === 0}
+            <div class="flex items-center gap-2 text-[12px] font-mono text-fg-3">
+              <Users class="size-4" />
+              <span>No users returned for this principal.</span>
+            </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">user</th>
+                    <th class="px-2 py-1.5 text-left font-normal">role</th>
+                    <th class="px-2 py-1.5 text-left font-normal">mfa</th>
+                    <th class="px-2 py-1.5 text-left font-normal">created</th>
+                    <th class="px-2 py-1.5 text-left font-normal">last active</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {#each users as user (user.username)}
+                    <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
+                      <td class="px-2 py-1 text-fg-0">{user.username}</td>
+                      <td class="px-2 py-1 text-accent">{user.role ?? '-'}</td>
+                      <td class="px-2 py-1">{#if user.mfa}<Badge tone="ok">on</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
+                      <td class="px-2 py-1 text-fg-2">{fmtTime(user.created_at)}</td>
+                      <td class="px-2 py-1 text-fg-2">{fmtTime(user.last_active)}</td>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/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>
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/if}
+        </Card>
+      </div>
+    </div>
+  {/if}
+</div>

package/src/lib/ShortcutOverlay.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { Kbd } from '@reddb-io/ui-kit'
+  import { shortcuts, shortcutContexts, type ShortcutContext } from './shortcuts'
+
+  let open = $state(false)
+
+  function close() {
+    open = false
+  }
+
+  function isTypingTarget(el: EventTarget | null): boolean {
+    if (!(el instanceof HTMLElement)) return false
+    if (el.isContentEditable) return true
+    const tag = el.tagName
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open) {
+      e.preventDefault()
+      close()
+      return
+    }
+    if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (isTypingTarget(e.target)) return
+      e.preventDefault()
+      open = !open
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onKey)
+    const onOpen = () => { open = true }
+    window.addEventListener('red:open-shortcuts', onOpen)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      window.removeEventListener('red:open-shortcuts', onOpen)
+    }
+  })
+
+  const grouped = $derived(
+    shortcutContexts
+      .map((ctx) => ({ ctx, items: shortcuts.filter((s) => s.context === ctx) }))
+      .filter((g) => g.items.length > 0)
+  )
+
+  const ctxBlurb: Record<ShortcutContext, string> = {
+    Global: 'Available anywhere in the app',
+    Connection: 'Manage which reddb you talk to',
+    Workspace: 'Move between tabs and panes',
+    Editing: 'While editing data or running queries',
+  }
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[200] bg-bg-0/70 backdrop-blur-md flex items-center justify-center p-6"
+    onclick={close}
+    role="presentation"
+  >
+    <div
+      class="w-full max-w-[640px] max-h-[80vh] overflow-y-auto bg-bg-1 border border-line-2 rounded-lg shadow-2xl"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Keyboard shortcuts"
+      tabindex="-1"
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={null}
+    >
+      <header class="flex items-center justify-between px-5 py-3 border-b border-line-1">
+        <div class="flex items-center gap-2">
+          <span class="type-label">Keyboard shortcuts</span>
+        </div>
+        <div class="flex items-center gap-1.5 text-fg-3 text-[11px]">
+          <Kbd>Esc</Kbd> close
+        </div>
+      </header>
+
+      <div class="p-5 grid gap-5">
+        {#each grouped as group}
+          <section>
+            <div class="flex items-baseline justify-between mb-2">
+              <h3 class="type-label m-0">{group.ctx}</h3>
+              <span class="text-fg-3 text-[11px]">{ctxBlurb[group.ctx]}</span>
+            </div>
+            <ul class="grid gap-1 m-0 p-0 list-none">
+              {#each group.items as s}
+                <li class="flex items-center justify-between gap-3 px-2 py-1.5 rounded hover:bg-bg-2">
+                  <span class="text-fg-1 text-[13px]">{s.label}</span>
+                  <span class="inline-flex gap-1 shrink-0">
+                    {#each s.keys as k}
+                      <Kbd>{k}</Kbd>
+                    {/each}
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/each}
+      </div>
+    </div>
+  </div>
+{/if}

package/src/lib/Splash.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  interface Props {
+    onDone?: () => void
+  }
+  let { onDone }: Props = $props()
+
+  let visible = $state(true)
+  let stage = $state(0) // 0: pre, 1: in, 2: out
+
+  onMount(() => {
+    const inT = setTimeout(() => (stage = 1), 20)
+    const outT = setTimeout(() => (stage = 2), 800)
+    const closeT = setTimeout(() => {
+      visible = false
+      onDone?.()
+    }, 1000)
+    return () => {
+      clearTimeout(inT)
+      clearTimeout(outT)
+      clearTimeout(closeT)
+    }
+  })
+</script>
+
+{#if visible}
+  <div
+    class="fixed inset-0 z-[9999] grid place-items-center bg-bg-0 transition-opacity duration-200 ease-out"
+    class:opacity-0={stage === 2}
+    class:opacity-100={stage === 1}
+    class:pointer-events-none={stage === 2}
+    style:opacity={stage === 0 ? 0 : undefined}
+  >
+    <div class="flex items-center gap-2">
+      <div class="w-2 h-2 rounded-full bg-accent shadow-[0_0_12px_var(--color-accent-glow)]"></div>
+      <span class="font-mono font-semibold text-fg-0 text-[15px] tracking-tight">red<span class="text-accent mx-px">·</span>ui</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    div { transition: none !important; }
+  }
+</style>