@zooid/web 0.5.0 → 0.6.0

package/src/lib/components/mint-token-modal.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { Button } from '@ui/components/button/index';
+  import { Input } from '@ui/components/input/index';
+  import type { ZooidClient } from '@zooid/sdk';
+
+  let {
+    open,
+    client,
+    onClose,
+  }: {
+    open: boolean;
+    client: ZooidClient;
+    onClose: () => void;
+  } = $props();
+
+  let scopes = $state('pub:*, sub:*');
+  let sub = $state('');
+  let name = $state('');
+  let expiresIn = $state('');
+  let minting = $state(false);
+  let error = $state('');
+  let mintedToken = $state('');
+  let copied = $state(false);
+
+  $effect(() => {
+    if (open) {
+      error = '';
+      mintedToken = '';
+      copied = false;
+    }
+  });
+
+  async function handleMint(e: Event) {
+    e.preventDefault();
+    minting = true;
+    error = '';
+    mintedToken = '';
+    copied = false;
+
+    const scopeList = scopes.split(',').map((s) => s.trim()).filter(Boolean);
+    if (scopeList.length === 0) {
+      error = '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) {
+      error = 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 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="Mint token"
+    tabindex="-1"
+    onclick={handleBackdrop}
+    onkeydown={handleKeydown}
+  >
+    <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-sm p-6">
+      <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={onClose}>Done</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 error}
+            <p class="text-xs text-destructive">{error}</p>
+          {/if}
+
+          <div class="flex gap-2 mt-1">
+            <Button type="submit" size="sm" class="flex-1" disabled={minting || !scopes.trim()}>
+              {minting ? 'Minting...' : 'Mint'}
+            </Button>
+            <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Cancel</Button>
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/lib/components/ref-link.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { resolveRef } from '../zooid-uri';
+
+  let {
+    ref,
+    serverUrl = '',
+    onOpenRef,
+  }: {
+    ref: string;
+    serverUrl?: string;
+    onOpenRef?: (detail: { channel: string; eventId: string }) => void;
+  } = $props();
+
+  let resolved = $derived(resolveRef(ref, serverUrl));
+
+  function handleClick() {
+    if (resolved.type === 'zooid') {
+      onOpenRef?.({ channel: resolved.channel, eventId: resolved.eventId });
+    }
+  }
+</script>
+
+{#if resolved.type === 'zooid'}
+  <button class="text-xs font-mono text-primary/70 hover:text-primary bg-primary/10 hover:bg-primary/20 px-1.5 py-0 rounded cursor-pointer transition-colors" onclick={handleClick}>
+    {resolved.label}
+  </button>
+{:else if resolved.type === 'zooid-external' || resolved.type === 'external'}
+  <a href={resolved.href} target="_blank" rel="noopener" class="text-xs font-mono text-primary/70 hover:text-primary bg-primary/10 hover:bg-primary/20 px-1.5 py-0 rounded transition-colors">
+    {resolved.label}
+  </a>
+{:else}
+  <span class="text-xs font-mono text-muted-foreground">{resolved.label}</span>
+{/if}

package/src/lib/components/ref-side-sheet.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { ZooidEvent } from '../api';
+  import EventCard from './event-card.svelte';
+
+  let {
+    channel,
+    eventId,
+    client,
+    onClose,
+  }: {
+    channel: string;
+    eventId: string;
+    client: { poll: (channelId: string, options?: { cursor?: string; limit?: number }) => Promise<{ events: ZooidEvent[] }> };
+    onClose?: () => void;
+  } = $props();
+
+  let event = $state<ZooidEvent | null>(null);
+  let thread = $state<ZooidEvent[] | null>(null);
+  let loading = $state(true);
+  let threadExpanded = $state(false);
+
+  async function fetchEvent() {
+    loading = true;
+    try {
+      const res = await fetch(`/api/v1/channels/${channel}/events/${eventId}`);
+      if (res.ok) {
+        event = await res.json();
+      }
+    } catch {
+      // fetch failed
+    }
+    loading = false;
+  }
+
+  async function expandThread() {
+    try {
+      const res = await fetch(`/api/v1/channels/${channel}/events/${eventId}/thread`);
+      if (res.ok) {
+        const body = await res.json();
+        thread = body.events ?? [];
+      }
+    } catch {
+      // fetch failed
+    }
+    threadExpanded = true;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose?.();
+  }
+
+  $effect(() => {
+    if (channel && eventId) fetchEvent();
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<button
+  type="button"
+  class="fixed inset-0 bg-background/40 z-40"
+  onclick={() => onClose?.()}
+  aria-label="Close ref panel"
+></button>
+
+<div class="fixed inset-y-0 right-0 w-80 max-w-[85vw] bg-card border-l border-border shadow-lg z-50 p-4 flex flex-col gap-3 animate-slide-in-right overflow-y-auto">
+  <div class="flex items-center justify-between">
+    <h3 class="text-sm font-semibold">#{channel} / {eventId.slice(0, 8)}&hellip;</h3>
+    <button class="text-muted-foreground hover:text-foreground transition-colors" onclick={() => onClose?.()} aria-label="Close">
+      <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+  </div>
+
+  {#if loading}
+    <div class="text-sm text-muted-foreground">Loading&hellip;</div>
+  {:else if event}
+    <EventCard {event} />
+
+    {#if !threadExpanded}
+      <button class="text-xs text-primary hover:text-primary/80 transition-colors" onclick={expandThread}>
+        Expand thread
+      </button>
+    {:else if thread && thread.length > 0}
+      <div class="flex flex-col gap-1 border-t border-border pt-2">
+        {#each thread as threadEvent}
+          <EventCard event={threadEvent} />
+        {/each}
+      </div>
+    {:else if thread}
+      <div class="text-xs text-muted-foreground">No replies</div>
+    {/if}
+  {:else}
+    <div class="text-sm text-muted-foreground">Event not found</div>
+  {/if}
+</div>
+
+<style>
+  @keyframes slide-in-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+  .animate-slide-in-right {
+    animation: slide-in-right 0.15s ease-out;
+  }
+</style>

package/src/lib/components/server-config-modal.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { Button } from '@ui/components/button/index';
+  import { Input } from '@ui/components/input/index';
+  import type { ZooidClient } from '@zooid/sdk';
+  import type { ServerIdentity } from '../api';
+
+  let {
+    open,
+    client,
+    onClose,
+    onSaved,
+  }: {
+    open: boolean;
+    client: ZooidClient;
+    onClose: () => void;
+    onSaved: () => void;
+  } = $props();
+
+  let loading = $state(false);
+  let saving = $state(false);
+  let error = $state('');
+
+  let name = $state('');
+  let description = $state('');
+  let tags = $state('');
+  let owner = $state('');
+  let company = $state('');
+  let email = $state('');
+
+  $effect(() => {
+    if (open) {
+      error = '';
+      loadMeta();
+    }
+  });
+
+  async function loadMeta() {
+    loading = true;
+    try {
+      const meta = await client.getServerMeta();
+      name = meta.name ?? '';
+      description = meta.description ?? '';
+      tags = (meta.tags ?? []).join(', ');
+      owner = meta.owner ?? '';
+      company = meta.company ?? '';
+      email = meta.email ?? '';
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSave(e: Event) {
+    e.preventDefault();
+    saving = true;
+    error = '';
+    try {
+      await client.updateServerMeta({
+        name: name || undefined,
+        description: description || null,
+        tags: tags ? tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
+        owner: owner || null,
+        company: company || null,
+        email: email || null,
+      });
+      onSaved();
+      onClose();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to save';
+    } finally {
+      saving = false;
+    }
+  }
+
+  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="Server configuration"
+    tabindex="-1"
+    onclick={handleBackdrop}
+    onkeydown={handleKeydown}
+  >
+    <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-sm p-6">
+      <h2 class="font-semibold text-sm mb-4">Server Configuration</h2>
+
+      {#if loading}
+        <p class="text-xs text-muted-foreground">Loading...</p>
+      {:else}
+        <form onsubmit={handleSave} class="flex flex-col gap-3">
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Name</span>
+            <Input bind:value={name} placeholder="My Zooid Server" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Description</span>
+            <Input bind:value={description} placeholder="What this server is for" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Tags (comma-separated)</span>
+            <Input bind:value={tags} placeholder="ai, signals, trading" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Owner</span>
+            <Input bind:value={owner} placeholder="Your name" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Company</span>
+            <Input bind:value={company} placeholder="Organization" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Email</span>
+            <Input bind:value={email} type="email" placeholder="contact@example.com" />
+          </label>
+
+          {#if error}
+            <p class="text-xs text-destructive">{error}</p>
+          {/if}
+
+          <div class="flex gap-2 mt-1">
+            <Button type="submit" size="sm" class="flex-1" disabled={saving}>
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+            <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Cancel</Button>
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/lib/components/server-config-page.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { Button } from '@ui/components/button/index';
+  import { Input } from '@ui/components/input/index';
+  import type { ZooidClient } from '@zooid/sdk';
+
+  let {
+    client,
+    onMenuClick,
+    onSaved,
+  }: {
+    client: ZooidClient;
+    onMenuClick: () => void;
+    onSaved: () => void;
+  } = $props();
+
+  let loading = $state(false);
+  let saving = $state(false);
+  let error = $state('');
+  let saved = $state(false);
+
+  let name = $state('');
+  let description = $state('');
+  let tags = $state('');
+  let owner = $state('');
+  let company = $state('');
+  let email = $state('');
+
+  async function loadMeta() {
+    loading = true;
+    try {
+      const meta = await client.getServerMeta();
+      name = meta.name ?? '';
+      description = meta.description ?? '';
+      tags = (meta.tags ?? []).join(', ');
+      owner = meta.owner ?? '';
+      company = meta.company ?? '';
+      email = meta.email ?? '';
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSave(e: Event) {
+    e.preventDefault();
+    saving = true;
+    error = '';
+    saved = false;
+    try {
+      await client.updateServerMeta({
+        name: name || undefined,
+        description: description || null,
+        tags: tags ? tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
+        owner: owner || null,
+        company: company || null,
+        email: email || null,
+      });
+      saved = true;
+      onSaved();
+      setTimeout(() => { saved = false; }, 2000);
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to save';
+    } finally {
+      saving = false;
+    }
+  }
+
+  loadMeta();
+</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">Server Configuration</h1>
+  </div>
+
+  <!-- Content -->
+  <div class="flex-1 overflow-y-auto p-4 md:p-6">
+    <div class="max-w-lg mx-auto">
+      {#if loading}
+        <p class="text-xs text-muted-foreground">Loading...</p>
+      {:else}
+        <form onsubmit={handleSave} class="flex flex-col gap-3">
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Name</span>
+            <Input bind:value={name} placeholder="My Zooid Server" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Description</span>
+            <Input bind:value={description} placeholder="What this server is for" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Tags (comma-separated)</span>
+            <Input bind:value={tags} placeholder="ai, signals, trading" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Owner</span>
+            <Input bind:value={owner} placeholder="Your name" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Company</span>
+            <Input bind:value={company} placeholder="Organization" />
+          </label>
+          <label class="flex flex-col gap-1">
+            <span class="text-xs text-muted-foreground">Email</span>
+            <Input bind:value={email} type="email" placeholder="contact@example.com" />
+          </label>
+
+          {#if error}
+            <p class="text-xs text-destructive">{error}</p>
+          {/if}
+
+          <div class="flex gap-2 mt-1">
+            <Button type="submit" size="sm" disabled={saving}>
+              {saved ? 'Saved!' : saving ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+</div>