@zooid/web 0.6.0 → 0.7.0

package/src/lib/components/homepage.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  import { Badge } from '@ui/components/badge/index';
-  import { Card, CardContent } from '@ui/components/card/index';
-  import { Separator } from '@ui/components/separator/index';
-  import { fetchServerMeta, listChannels, type ChannelInfo } from '../api';
-  import { formatRelativeUlid } from '../time';
-
-  const baseUrl = window.location.origin;
-
-  let serverName = $state('Zooid');
-  let serverDesc = $state<string | null>(null);
-  let channels = $state<ChannelInfo[]>([]);
-  let loading = $state(true);
-
-  async function load() {
-    const [meta, chs] = await Promise.all([
-      fetchServerMeta(baseUrl),
-      listChannels(baseUrl),
-    ]);
-    serverName = meta.server_name;
-    serverDesc = meta.server_description;
-    channels = chs;
-    loading = false;
-  }
-
-  load();
-
-</script>
-
-<div class="min-h-screen max-w-2xl mx-auto px-4 py-12 flex flex-col">
-  <header class="mb-10">
-    <h1 class="text-2xl font-bold tracking-tight mb-1">{serverName}</h1>
-    <p class="text-sm text-muted-foreground">{serverDesc ?? 'Channels on this server:'}</p>
-  </header>
-
-  {#if loading}
-    <p class="text-sm text-muted-foreground">Loading channels...</p>
-  {:else if channels.length === 0}
-    <div class="text-sm text-muted-foreground border border-dashed border-border rounded-lg p-8 text-center">
-      <p>No channels yet.</p>
-      <p class="mt-1">Create one with <code class="text-foreground">npx zooid channel create</code></p>
-    </div>
-  {:else}
-    <div class="flex flex-col gap-3">
-      {#each channels as ch (ch.id)}
-        <a href="/{ch.id}" class="block group no-underline">
-          <Card class="transition-colors group-hover:border-primary/40">
-            <CardContent class="p-4">
-              <div class="flex items-center justify-between gap-2 mb-1">
-                <div class="flex items-center gap-2">
-                  <span class="font-semibold text-sm">{ch.name}</span>
-                  {#if ch.is_public}
-                    <Badge variant="secondary" class="text-[10px] px-1.5 py-0">public</Badge>
-                  {:else}
-                    <Badge variant="outline" class="text-[10px] px-1.5 py-0">private</Badge>
-                  {/if}
-                </div>
-                <span class="text-[10px] text-muted-foreground shrink-0">
-                  {ch.event_count} event{ch.event_count === 1 ? '' : 's'}
-                </span>
-              </div>
-
-              {#if ch.description}
-                <p class="text-xs text-muted-foreground mb-2">{ch.description}</p>
-              {/if}
-
-              <div class="flex items-center gap-3 text-[10px] text-muted-foreground/60">
-                <span class="font-mono">{ch.id}</span>
-                {#if ch.last_event_id}
-                  <Separator orientation="vertical" class="h-3" />
-                  <span>latest {formatRelativeUlid(ch.last_event_id)}</span>
-                {/if}
-              </div>
-            </CardContent>
-          </Card>
-        </a>
-      {/each}
-    </div>
-  {/if}
-
-  <div class="flex-1"></div>
-  <footer class="mt-12 pt-4 pb-[env(safe-area-inset-bottom)] border-t border-border text-[10px] text-muted-foreground/40 flex items-center justify-between">
-    <span>Powered by <a href="https://zooid.dev" class="underline hover:text-muted-foreground">Zooid</a></span>
-    <a href="https://github.com/zooid-ai/zooid" class="underline hover:text-muted-foreground">Star on GitHub</a>
-  </footer>
-</div>

package/src/lib/components/json-editor.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { JSONEditor, createAjvValidator, Mode } from 'svelte-jsoneditor';
-  import type { Content } from 'svelte-jsoneditor';
-
-  let {
-    content = $bindable({ json: {} }),
-    schema,
-  }: {
-    content: Content;
-    schema?: Record<string, unknown> | null;
-  } = $props();
-
-  let validator = $derived.by(() => {
-    if (!schema) return undefined;
-    try {
-      return createAjvValidator({ schema });
-    } catch {
-      return undefined;
-    }
-  });
-</script>
-
-<div class="json-editor-wrapper">
-  <JSONEditor
-    bind:content
-    mode={Mode.text}
-    mainMenuBar={false}
-    navigationBar={false}
-    statusBar={false}
-    {validator}
-  />
-</div>
-
-<style>
-  .json-editor-wrapper {
-    --jse-theme-color: oklch(0.21 0 0);
-    --jse-theme-color-highlight: oklch(0.25 0 0);
-    --jse-background-color: oklch(0.18 0 0);
-    --jse-text-color: oklch(0.85 0 0);
-    --jse-panel-background: oklch(0.15 0 0);
-    --jse-panel-border: oklch(0.25 0 0);
-    --jse-main-border: 1px solid oklch(0.25 0 0);
-    --jse-key-color: oklch(0.7 0.1 200);
-    --jse-value-color-string: oklch(0.75 0.1 150);
-    --jse-value-color-number: oklch(0.75 0.1 60);
-    --jse-delimiter-color: oklch(0.5 0 0);
-    --jse-error-color: oklch(0.65 0.2 25);
-    border-radius: 0.375rem;
-    overflow: hidden;
-    max-height: 150px;
-  }
-
-  .json-editor-wrapper :global(.jse-text-mode) {
-    min-height: 60px;
-    max-height: 150px;
-  }
-</style>

package/src/lib/components/keys-and-tokens-page.svelte

@@ -1,216 +0,0 @@
-<script lang="ts">
-  import { Button } from '@ui/components/button/index';
-  import { Input } from '@ui/components/input/index';
-  import type { ZooidClient, TrustedKey } from '@zooid/sdk';
-  import { formatRelative } from '../time';
-
-  let {
-    client,
-    onMenuClick,
-  }: {
-    client: ZooidClient;
-    onMenuClick: () => void;
-  } = $props();
-
-  // --- Keys ---
-  let keys = $state<TrustedKey[]>([]);
-  let keysLoading = $state(false);
-  let keysError = $state('');
-  let revoking = $state<string | null>(null);
-
-  async function loadKeys() {
-    keysLoading = true;
-    keysError = '';
-    try {
-      keys = await client.listKeys();
-    } catch (err) {
-      keysError = err instanceof Error ? err.message : 'Failed to load keys';
-    } finally {
-      keysLoading = false;
-    }
-  }
-
-  async function handleRevoke(kid: string) {
-    if (!confirm(`Revoke key "${kid}"? Tokens signed by this key will stop working.`)) return;
-    revoking = kid;
-    keysError = '';
-    try {
-      await client.revokeKey(kid);
-      keys = keys.filter((k) => k.kid !== kid);
-    } catch (err) {
-      keysError = err instanceof Error ? err.message : 'Failed to revoke key';
-    } finally {
-      revoking = null;
-    }
-  }
-
-  // --- Mint token ---
-  let scopes = $state('pub:*, sub:*');
-  let sub = $state('');
-  let name = $state('');
-  let expiresIn = $state('');
-  let minting = $state(false);
-  let mintError = $state('');
-  let mintedToken = $state('');
-  let copied = $state(false);
-
-  async function handleMint(e: Event) {
-    e.preventDefault();
-    minting = true;
-    mintError = '';
-    mintedToken = '';
-    copied = false;
-
-    const scopeList = scopes.split(',').map((s) => s.trim()).filter(Boolean);
-    if (scopeList.length === 0) {
-      mintError = 'At least one scope is required';
-      minting = false;
-      return;
-    }
-
-    try {
-      const result = await client.mintToken({
-        scopes: scopeList,
-        sub: sub || undefined,
-        name: name || undefined,
-        expires_in: expiresIn || undefined,
-      });
-      mintedToken = result.token;
-    } catch (err) {
-      mintError = err instanceof Error ? err.message : 'Failed to mint token';
-    } finally {
-      minting = false;
-    }
-  }
-
-  async function copyToken() {
-    await navigator.clipboard.writeText(mintedToken);
-    copied = true;
-    setTimeout(() => { copied = false; }, 2000);
-  }
-
-  function resetMint() {
-    mintedToken = '';
-    mintError = '';
-    copied = false;
-  }
-
-  // Load keys on mount
-  loadKeys();
-</script>
-
-<div class="flex-1 flex flex-col min-w-0">
-  <!-- Header -->
-  <div class="flex items-center gap-3 px-4 h-12 border-b border-border shrink-0">
-    <button
-      onclick={onMenuClick}
-      class="p-1 rounded hover:bg-secondary transition-colors md:hidden"
-      aria-label="Open channels"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
-    </button>
-    <h1 class="text-sm font-semibold">Keys & Tokens</h1>
-  </div>
-
-  <!-- Content -->
-  <div class="flex-1 overflow-y-auto p-4 md:p-6">
-    <div class="max-w-lg mx-auto flex flex-col gap-8">
-
-      <!-- Mint Token section -->
-      <section>
-        <h2 class="font-semibold text-sm mb-1">Mint Token</h2>
-        <p class="text-xs text-muted-foreground mb-4">Create a new JWT with custom scopes.</p>
-
-        {#if mintedToken}
-          <div class="flex flex-col gap-3">
-            <div class="bg-secondary rounded-md p-3">
-              <div class="text-[10px] text-muted-foreground mb-1 uppercase tracking-wider">Token (shown once)</div>
-              <div class="text-xs font-mono break-all select-all max-h-24 overflow-y-auto">{mintedToken}</div>
-            </div>
-            <div class="flex gap-2">
-              <Button size="sm" class="flex-1" onclick={copyToken}>
-                {copied ? 'Copied!' : 'Copy'}
-              </Button>
-              <Button variant="outline" size="sm" class="flex-1" onclick={resetMint}>Mint another</Button>
-            </div>
-          </div>
-        {:else}
-          <form onsubmit={handleMint} class="flex flex-col gap-3">
-            <label class="flex flex-col gap-1">
-              <span class="text-xs text-muted-foreground">Scopes (comma-separated)</span>
-              <Input bind:value={scopes} placeholder="admin, pub:my-channel, sub:*" />
-              <span class="text-[10px] text-muted-foreground/60">admin, pub:channel, sub:channel, pub:*, sub:*</span>
-            </label>
-            <label class="flex flex-col gap-1">
-              <span class="text-xs text-muted-foreground">Subject (optional)</span>
-              <Input bind:value={sub} placeholder="my-bot" />
-            </label>
-            <label class="flex flex-col gap-1">
-              <span class="text-xs text-muted-foreground">Display name (optional)</span>
-              <Input bind:value={name} placeholder="My Bot" />
-            </label>
-            <label class="flex flex-col gap-1">
-              <span class="text-xs text-muted-foreground">Expires in (optional)</span>
-              <Input bind:value={expiresIn} placeholder="7d, 1h, 30m" />
-              <span class="text-[10px] text-muted-foreground/60">Leave empty for no expiry</span>
-            </label>
-
-            {#if mintError}
-              <p class="text-xs text-destructive">{mintError}</p>
-            {/if}
-
-            <div class="flex gap-2 mt-1">
-              <Button type="submit" size="sm" disabled={minting || !scopes.trim()}>
-                {minting ? 'Minting...' : 'Mint'}
-              </Button>
-            </div>
-          </form>
-        {/if}
-      </section>
-
-      <!-- Signing Keys section -->
-      <section>
-        <h2 class="font-semibold text-sm mb-1">Signing Keys</h2>
-        <p class="text-xs text-muted-foreground mb-4">Trusted keys used to verify JWT tokens.</p>
-
-        {#if keysLoading}
-          <p class="text-xs text-muted-foreground">Loading...</p>
-        {:else if keys.length === 0}
-          <p class="text-xs text-muted-foreground/60 text-center py-4">No keys found</p>
-        {:else}
-          <div class="flex flex-col gap-2">
-            {#each keys as key (key.kid)}
-              <div class="bg-secondary rounded-md px-3 py-2 flex items-start justify-between gap-2">
-                <div class="min-w-0 flex-1">
-                  <div class="text-xs font-mono font-medium truncate">{key.kid}</div>
-                  <div class="text-[10px] text-muted-foreground mt-0.5">
-                    {key.crv} · {key.issuer ?? 'unknown issuer'} · {formatRelative(key.created_at)}
-                  </div>
-                  {#if key.max_scopes}
-                    <div class="text-[10px] text-muted-foreground/60 mt-0.5 font-mono truncate">
-                      {key.max_scopes.join(', ')}
-                    </div>
-                  {/if}
-                </div>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  class="shrink-0 text-[10px] h-6 px-2"
-                  disabled={revoking === key.kid}
-                  onclick={() => handleRevoke(key.kid)}
-                >
-                  {revoking === key.kid ? '...' : 'Revoke'}
-                </Button>
-              </div>
-            {/each}
-          </div>
-        {/if}
-
-        {#if keysError}
-          <p class="text-xs text-destructive mt-3">{keysError}</p>
-        {/if}
-      </section>
-
-    </div>
-  </div>
-</div>

package/src/lib/components/keys-modal.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-  import { Button } from '@ui/components/button/index';
-  import type { ZooidClient, TrustedKey } from '@zooid/sdk';
-  import { formatRelative } from '../time';
-
-  let {
-    open,
-    client,
-    onClose,
-  }: {
-    open: boolean;
-    client: ZooidClient;
-    onClose: () => void;
-  } = $props();
-
-  let keys = $state<TrustedKey[]>([]);
-  let loading = $state(false);
-  let error = $state('');
-  let revoking = $state<string | null>(null);
-
-  $effect(() => {
-    if (open) {
-      error = '';
-      loadKeys();
-    }
-  });
-
-  async function loadKeys() {
-    loading = true;
-    try {
-      keys = await client.listKeys();
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to load keys';
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function handleRevoke(kid: string) {
-    if (!confirm(`Revoke key "${kid}"? Tokens signed by this key will stop working.`)) return;
-    revoking = kid;
-    error = '';
-    try {
-      await client.revokeKey(kid);
-      keys = keys.filter((k) => k.kid !== kid);
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to revoke key';
-    } finally {
-      revoking = null;
-    }
-  }
-
-  function handleBackdrop(e: MouseEvent) {
-    if (e.target === e.currentTarget) onClose();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') onClose();
-  }
-</script>
-
-{#if open}
-  <div
-    class="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
-    role="dialog"
-    aria-modal="true"
-    aria-label="Signing keys"
-    tabindex="-1"
-    onclick={handleBackdrop}
-    onkeydown={handleKeydown}
-  >
-    <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-md p-6">
-      <h2 class="font-semibold text-sm mb-1">Signing Keys</h2>
-      <p class="text-xs text-muted-foreground mb-4">
-        Trusted keys used to verify JWT tokens.
-      </p>
-
-      {#if loading}
-        <p class="text-xs text-muted-foreground">Loading...</p>
-      {:else if keys.length === 0}
-        <p class="text-xs text-muted-foreground/60 text-center py-4">No keys found</p>
-      {:else}
-        <div class="flex flex-col gap-2 max-h-64 overflow-y-auto">
-          {#each keys as key (key.kid)}
-            <div class="bg-secondary rounded-md px-3 py-2 flex items-start justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <div class="text-xs font-mono font-medium truncate">{key.kid}</div>
-                <div class="text-[10px] text-muted-foreground mt-0.5">
-                  {key.crv} · {key.issuer ?? 'unknown issuer'} · {formatRelative(key.created_at)}
-                </div>
-                {#if key.max_scopes}
-                  <div class="text-[10px] text-muted-foreground/60 mt-0.5 font-mono truncate">
-                    {key.max_scopes.join(', ')}
-                  </div>
-                {/if}
-              </div>
-              <Button
-                variant="destructive"
-                size="sm"
-                class="shrink-0 text-[10px] h-6 px-2"
-                disabled={revoking === key.kid}
-                onclick={() => handleRevoke(key.kid)}
-              >
-                {revoking === key.kid ? '...' : 'Revoke'}
-              </Button>
-            </div>
-          {/each}
-        </div>
-      {/if}
-
-      {#if error}
-        <p class="text-xs text-destructive mt-3">{error}</p>
-      {/if}
-
-      <div class="flex justify-end mt-4">
-        <Button variant="outline" size="sm" onclick={onClose}>Close</Button>
-      </div>
-    </div>
-  </div>
-{/if}