@zooid/web 0.5.0 → 0.6.0

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

@@ -0,0 +1,216 @@
+<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

@@ -0,0 +1,120 @@
+<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}

package/src/lib/components/message-bar.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import type { Content, JSONContent } from 'svelte-jsoneditor';
+  import type { ChannelInfo } from '../api';
+
+  let {
+    channel,
+    replyTo = $bindable(null),
+    onPublish,
+  }: {
+    channel: ChannelInfo;
+    replyTo?: string | null;
+    onPublish: (payload: { type?: string; reply_to?: string; data: unknown }) => void;
+  } = $props();
+
+  let textInput = $state('');
+  let editorContent = $state<Content>({ json: {} });
+  let selectedType = $state<string>('message');
+  let customType = $state('');
+  let sending = $state(false);
+  let typeDropdownOpen = $state(false);
+  let JsonEditor = $state<typeof import('./json-editor.svelte').default | null>(null);
+
+  // Lazy-load the JSON editor component
+  async function loadEditor() {
+    if (!JsonEditor) {
+      const mod = await import('./json-editor.svelte');
+      JsonEditor = mod.default;
+    }
+  }
+
+  // Extract types from channel config
+  let eventTypes = $derived.by(() => {
+    const config = channel.config as { strict?: boolean; types?: Record<string, { schema?: Record<string, unknown> }> } | null;
+    if (!config?.types) return [];
+    const types = Object.keys(config.types);
+    // Non-strict channels: ensure "message" is available for replies
+    if (!config.strict && types.length > 0 && !types.includes('message')) {
+      return [...types, 'message'];
+    }
+    return types;
+  });
+
+  // The active type name (from dropdown or custom input)
+  let activeType = $derived(eventTypes.length > 0 ? selectedType : (customType.trim() || 'message'));
+
+  // Get schema for selected type
+  let selectedSchema = $derived.by(() => {
+    if (!activeType) return null;
+    const config = channel.config as { types?: Record<string, { schema?: Record<string, unknown> }> } | null;
+    return config?.types?.[activeType]?.schema ?? null;
+  });
+
+  // Check if we should use the JSON editor
+  let useJsonEditor = $derived.by(() => {
+    if (!selectedSchema) return false;
+    const props = (selectedSchema as { properties?: Record<string, { type?: string }> }).properties;
+    if (!props) return false;
+    const keys = Object.keys(props);
+    // Single-key string schema = free text
+    if (keys.length === 1 && props[keys[0]]?.type === 'string') return false;
+    return true;
+  });
+
+  let freeTextKey = $derived.by(() => {
+    if (useJsonEditor || !selectedSchema) return null;
+    const props = (selectedSchema as { properties?: Record<string, unknown> }).properties;
+    return props ? Object.keys(props)[0] : null;
+  });
+
+  // Generate a template object from schema properties
+  function templateFromSchema(schema: Record<string, unknown> | null): Record<string, unknown> {
+    if (!schema) return {};
+    const props = (schema as { properties?: Record<string, { type?: string; enum?: unknown[]; default?: unknown }> }).properties;
+    if (!props) return {};
+    const obj: Record<string, unknown> = {};
+    for (const [key, def] of Object.entries(props)) {
+      if (def.default !== undefined) {
+        obj[key] = def.default;
+      } else if (def.enum && def.enum.length > 0) {
+        obj[key] = def.enum[0];
+      } else {
+        const defaults: Record<string, unknown> = {
+          string: '',
+          number: 0,
+          boolean: false,
+          array: [],
+          object: {},
+        };
+        obj[key] = defaults[def.type ?? 'string'] ?? '';
+      }
+    }
+    return obj;
+  }
+
+  function getSchemaForType(typeName: string): Record<string, unknown> | null {
+    const config = channel.config as { types?: Record<string, { schema?: Record<string, unknown> }> } | null;
+    return config?.types?.[typeName]?.schema ?? null;
+  }
+
+  // When replying, switch type to "message"
+  let lastReplyTo: string | null = null;
+  $effect(() => {
+    if (replyTo && replyTo !== lastReplyTo) {
+      selectedType = 'message';
+    }
+    lastReplyTo = replyTo;
+  });
+
+  // Reset state when channel or type changes
+  let lastChannelId = '';
+  let lastType = '';
+  $effect(() => {
+    const channelChanged = channel.id !== lastChannelId;
+    const typeChanged = activeType !== lastType;
+
+    if (channelChanged) {
+      lastChannelId = channel.id;
+      textInput = '';
+      customType = '';
+      const config = channel.config as { types?: Record<string, unknown> } | null;
+      const types = config?.types ? Object.keys(config.types) : [];
+      selectedType = types[0] ?? 'message';
+    }
+
+    if (channelChanged || typeChanged) {
+      lastType = activeType;
+      const schema = getSchemaForType(activeType);
+      editorContent = { json: templateFromSchema(schema) };
+      if (useJsonEditor) loadEditor();
+    }
+  });
+
+  async function handleSubmit(e?: Event) {
+    e?.preventDefault();
+    if (sending) return;
+
+    sending = true;
+    try {
+      if (!useJsonEditor) {
+        const trimmed = textInput.trim();
+        if (!trimmed) return;
+
+        let data: unknown;
+        if (freeTextKey) {
+          data = { [freeTextKey]: trimmed };
+        } else {
+          // Try to parse as JSON, fall back to { body: ... }
+          try {
+            data = JSON.parse(trimmed);
+          } catch {
+            data = { body: trimmed };
+          }
+        }
+
+        onPublish({ type: activeType, reply_to: replyTo ?? undefined, data });
+        textInput = '';
+        replyTo = null;
+      } else {
+        // JSON editor mode
+        let data: unknown;
+        if ('json' in editorContent) {
+          data = (editorContent as JSONContent).json;
+        } else if ('text' in editorContent) {
+          data = JSON.parse((editorContent as { text: string }).text);
+        }
+
+        onPublish({ type: activeType, data });
+        editorContent = { json: templateFromSchema(selectedSchema) };
+      }
+    } catch {
+      // Invalid JSON — don't clear
+    } finally {
+      sending = false;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+
+  function selectType(t: string) {
+    selectedType = t;
+    typeDropdownOpen = false;
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="border-t border-border mx-4 mb-3 mt-1 mb-[calc(0.75rem+env(safe-area-inset-bottom))] rounded-lg border bg-secondary/30 max-h-[250px] flex flex-col">
+  <!-- Top row: type selector -->
+  <div class="flex items-center gap-2 px-3 py-1.5 border-b border-border/50">
+    {#if eventTypes.length > 0}
+      <!-- Dropdown for configured types -->
+      <div class="relative">
+        <button
+          class="flex items-center gap-1 px-2 py-0.5 rounded text-[11px] bg-secondary text-muted-foreground hover:text-foreground transition-colors"
+          onclick={() => typeDropdownOpen = !typeDropdownOpen}
+        >
+          <span class="font-mono">{activeType}</span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        {#if typeDropdownOpen}
+          <div class="absolute bottom-full left-0 mb-1 bg-popover border border-border rounded-md shadow-lg py-1 z-10 min-w-[120px]">
+            {#each eventTypes as t (t)}
+              <button
+                class="w-full text-left px-3 py-1 text-[11px] font-mono transition-colors
+                  {activeType === t ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}"
+                onclick={() => selectType(t)}
+              >
+                {t}
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- Free text type input -->
+      <div class="flex items-center gap-1">
+        <span class="text-[10px] text-muted-foreground/50">type:</span>
+        <input
+          type="text"
+          class="bg-transparent border-none outline-none text-[11px] font-mono text-muted-foreground w-20 placeholder:text-muted-foreground/30"
+          placeholder="message"
+          bind:value={customType}
+        />
+      </div>
+    {/if}
+  </div>
+
+  <!-- Reply indicator -->
+  {#if replyTo}
+    <div class="flex items-center gap-2 px-3 py-1 border-b border-border/50 text-[11px] text-muted-foreground">
+      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+      <span class="font-mono truncate">Replying to {replyTo.slice(0, 12)}...</span>
+      <button
+        class="ml-auto text-muted-foreground/60 hover:text-foreground transition-colors"
+        onclick={() => replyTo = null}
+        aria-label="Cancel reply"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+  {/if}
+
+  <!-- Middle: input area -->
+  <div class="px-3 py-2 flex-1 overflow-auto min-h-0">
+    {#if !useJsonEditor}
+      <input
+        type="text"
+        class="w-full bg-transparent outline-none text-sm text-foreground placeholder:text-muted-foreground/40"
+        placeholder="Message #{channel.id}"
+        bind:value={textInput}
+        onkeydown={handleKeydown}
+        autocomplete="off"
+      />
+    {:else if JsonEditor}
+      <JsonEditor
+        bind:content={editorContent}
+        schema={selectedSchema}
+      />
+    {:else}
+      <div class="text-sm text-muted-foreground/40 py-1">Loading editor...</div>
+    {/if}
+  </div>
+
+  <!-- Bottom row: toolbar + send -->
+  <div class="flex items-center justify-between px-3 py-1.5 border-t border-border/50">
+    <div class="flex items-center gap-1">
+      <!-- Placeholder slots for future toolbar buttons (markdown, emoji, etc.) -->
+    </div>
+    <button
+      class="flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors
+        {(useJsonEditor || textInput.trim()) && !sending
+          ? 'text-foreground hover:bg-secondary'
+          : 'text-muted-foreground/30 cursor-default'}"
+      disabled={!useJsonEditor && !textInput.trim() || sending}
+      onclick={() => handleSubmit()}
+      aria-label="Send"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>
+    </button>
+  </div>
+</div>
+
+{#if typeDropdownOpen}
+  <!-- Backdrop to close dropdown -->
+  <button type="button" class="fixed inset-0 z-5" onclick={() => typeDropdownOpen = false} aria-label="Close dropdown"></button>
+{/if}