@zooid/web 0.5.0 → 0.6.0

package/src/lib/components/edit-channel-modal.svelte

@@ -0,0 +1,234 @@
+<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 { ChannelInfo } from '../api';
+
+  let {
+    open,
+    channel,
+    client,
+    defaultConfig,
+    onClose,
+    onSaved,
+    onDeleted,
+  }: {
+    open: boolean;
+    channel: ChannelInfo | null;
+    client: ZooidClient;
+    defaultConfig?: { storage?: { retention_days?: number } };
+    onClose: () => void;
+    onSaved: () => void;
+    onDeleted: () => void;
+  } = $props();
+
+  let saving = $state(false);
+  let error = $state('');
+  let confirmDelete = $state(false);
+  let deleting = $state(false);
+
+  // Channel fields
+  let name = $state('');
+  let description = $state('');
+  let tags = $state('');
+  let isPublic = $state(true);
+
+  // Config fields
+  let retentionDays = $state('');
+  let strictTypes = $state(false);
+  let typesJson = $state('');
+
+  $effect(() => {
+    if (open && channel) {
+      error = '';
+      confirmDelete = false;
+
+      name = channel.name;
+      description = channel.description ?? '';
+      tags = (channel.tags ?? []).join(', ');
+      isPublic = channel.is_public;
+
+      const cfg = channel.config as Record<string, unknown> | null;
+      const storageCfg = cfg?.storage as Record<string, unknown> | null;
+      retentionDays = storageCfg?.retention_days != null ? String(storageCfg.retention_days) : '';
+      strictTypes = !!cfg?.strict_types;
+      typesJson = cfg?.types ? JSON.stringify(cfg.types, null, 2) : '';
+    }
+  });
+
+  async function handleSave(e: Event) {
+    e.preventDefault();
+    if (!channel) return;
+
+    saving = true;
+    error = '';
+
+    // Build config
+    let config: Record<string, unknown> | null = null;
+    const hasConfig = retentionDays || typesJson || strictTypes;
+
+    if (hasConfig) {
+      config = {};
+      if (retentionDays) {
+        const num = parseInt(retentionDays, 10);
+        if (!isNaN(num) && num > 0) config.storage = { retention_days: num };
+      }
+      if (typesJson.trim()) {
+        try {
+          config.types = JSON.parse(typesJson);
+        } catch {
+          error = 'Invalid JSON in types definition';
+          saving = false;
+          return;
+        }
+      }
+      if (strictTypes) {
+        if (!config.types) {
+          error = 'strict_types requires types to be defined';
+          saving = false;
+          return;
+        }
+        config.strict_types = true;
+      }
+    }
+
+    try {
+      await client.updateChannel(channel.id, {
+        name: name.trim() || undefined,
+        description: description.trim() || null,
+        tags: tags ? tags.split(',').map((t) => t.trim()).filter(Boolean) : null,
+        is_public: isPublic,
+        config,
+      });
+      onSaved();
+      onClose();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to save';
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function handleDelete() {
+    if (!channel) return;
+    if (!confirmDelete) {
+      confirmDelete = true;
+      return;
+    }
+
+    deleting = true;
+    error = '';
+    try {
+      await client.deleteChannel(channel.id);
+      onDeleted();
+      onClose();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to delete';
+    } finally {
+      deleting = false;
+    }
+  }
+
+  function handleBackdrop(e: MouseEvent) {
+    if (e.target === e.currentTarget) onClose();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+</script>
+
+{#if open && channel}
+  <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="Edit channel"
+    tabindex="-1"
+    onclick={handleBackdrop}
+    onkeydown={handleKeydown}
+  >
+    <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-sm p-6 max-h-[90vh] overflow-y-auto">
+      <h2 class="font-semibold text-sm mb-1">Edit Channel</h2>
+      <p class="text-xs text-muted-foreground mb-4 font-mono">{channel.id}</p>
+
+      <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="Channel name" />
+        </label>
+        <label class="flex flex-col gap-1">
+          <span class="text-xs text-muted-foreground">Description</span>
+          <Input bind:value={description} placeholder="What this channel 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" />
+        </label>
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" bind:checked={isPublic} class="rounded border-border" />
+          <span class="text-xs text-muted-foreground">Public channel</span>
+        </label>
+
+        <!-- Config section -->
+        <div class="border-t border-border pt-3 mt-1">
+          <div class="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Config</div>
+
+          <div class="flex flex-col gap-3">
+            <label class="flex flex-col gap-1">
+              <span class="text-xs text-muted-foreground">Retention (days)</span>
+              <Input bind:value={retentionDays} type="number" placeholder="Default ({defaultConfig?.storage?.retention_days ?? 7})" />
+            </label>
+
+            <label class="flex flex-col gap-1">
+              <span class="text-xs text-muted-foreground">Event types (JSON)</span>
+              <textarea
+                bind:value={typesJson}
+                placeholder={'{\n  "message": { ... },\n  "alert": { ... }\n}'}
+                class="w-full bg-background border border-input rounded-md px-3 py-2 text-xs font-mono min-h-[80px] resize-y focus:outline-none focus:ring-1 focus:ring-ring"
+                spellcheck="false"
+              ></textarea>
+              <span class="text-[10px] text-muted-foreground/60">Define event type schemas as JSON</span>
+            </label>
+
+            <label class="flex items-center gap-2 cursor-pointer">
+              <input type="checkbox" bind:checked={strictTypes} class="rounded border-border" />
+              <span class="text-xs text-muted-foreground">Strict types (reject unknown types)</span>
+            </label>
+          </div>
+        </div>
+
+        {#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 || !name.trim()}>
+            {saving ? 'Saving...' : 'Save'}
+          </Button>
+          <Button variant="outline" size="sm" class="flex-1" onclick={onClose}>Cancel</Button>
+        </div>
+
+        <!-- Delete -->
+        <div class="border-t border-border pt-3 mt-1">
+          <Button
+            type="button"
+            variant="destructive"
+            size="sm"
+            class="w-full text-[11px]"
+            disabled={deleting}
+            onclick={handleDelete}
+          >
+            {#if deleting}
+              Deleting...
+            {:else if confirmDelete}
+              Confirm delete "{channel.id}"
+            {:else}
+              Delete channel
+            {/if}
+          </Button>
+        </div>
+      </form>
+    </div>
+  </div>
+{/if}

package/src/lib/components/event-card.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  import type { ZooidEvent } from '../api';
+  import { parsePretty, renderMarkdown, type PrettyNode } from '../pretty-json';
+  import { formatRelative, formatFull } from '../time';
+  import Avatar from './avatar.svelte';
+  import RefLink from './ref-link.svelte';
+
+  let {
+    event,
+    viewMode = 'pretty',
+    canReply = false,
+    onReply,
+    onOpenRef,
+  }: {
+    event: ZooidEvent;
+    viewMode?: 'pretty' | 'raw';
+    canReply?: boolean;
+    onReply?: (eventId: string) => void;
+    onOpenRef?: (detail: { channel: string; eventId: string }) => void;
+  } = $props();
+
+  let rawData = $derived(formatRaw(event.data));
+  let prettyEntries = $derived(parsePretty(event.data));
+  let messageBody = $derived(extractMessageBody(event));
+  let relativeTime = $derived(formatRelative(event.created_at));
+  let fullTime = $derived(formatFull(event.created_at));
+  let publisherLabel = $derived(formatPublisher(event));
+  let inReplyTo = $derived(event.reply_to ?? null);
+
+  let detailOpen = $state(false);
+
+  function formatRaw(raw: string): string {
+    try {
+      return JSON.stringify(JSON.parse(raw), null, 2);
+    } catch {
+      return raw;
+    }
+  }
+
+  function scrollToEvent(id: string) {
+    const el = document.getElementById(`event-${id}`);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      el.classList.add('bg-primary/10');
+      setTimeout(() => el.classList.remove('bg-primary/10'), 1500);
+    }
+  }
+
+  function extractMessageBody(e: ZooidEvent): string | null {
+    if (e.type !== 'message') return null;
+    try {
+      const obj = JSON.parse(e.data);
+      if (typeof obj?.body === 'string') return obj.body;
+    } catch {}
+    return null;
+  }
+
+  function formatPublisher(e: ZooidEvent): string | null {
+    const id = e.publisher_id;
+    const name = e.publisher_name;
+    if (!name && !id) return null;
+    const colonIdx = id?.indexOf(':') ?? -1;
+    const issuer = colonIdx > 0 ? id!.slice(0, colonIdx) : null;
+    const isExternal = issuer && issuer !== 'local';
+    if (name && isExternal) return `${name} (@${issuer})`;
+    if (name) return name;
+    return id;
+  }
+
+  function toggleDetail() {
+    detailOpen = !detailOpen;
+  }
+
+  function closeDetail() {
+    detailOpen = false;
+  }
+</script>
+
+{#snippet prettyNode(node: PrettyNode, depth: number)}
+  {#if node.kind === 'text' && node.multiline}
+    <div style={depth > 0 ? `padding-left: ${depth * 0.75}rem` : ''}>
+      <span class="font-semibold text-foreground/90">{node.key}</span><span class="text-foreground/50">:</span>
+    </div>
+    <div class="break-words overflow-wrap-anywhere text-foreground/70" style="padding-left: {(depth + 1) * 0.75}rem">
+      {#if node.markdown}<span class="prose-inline">{@html renderMarkdown(node.value)}</span>{:else}{#each node.value.split('\n') as line, i}{#if i > 0}<br />{/if}{line}{/each}{/if}
+    </div>
+  {:else if node.kind === 'ref'}
+    <div class="break-words overflow-wrap-anywhere" style={depth > 0 ? `padding-left: ${depth * 0.75}rem` : ''}>
+      <span class="font-semibold text-foreground/90">{node.key}</span><span class="text-foreground/50">: </span>
+      <RefLink ref={node.value} {onOpenRef} />
+    </div>
+  {:else if node.kind === 'text'}
+    <div class="break-words overflow-wrap-anywhere" style={depth > 0 ? `padding-left: ${depth * 0.75}rem` : ''}>
+      {#if node.key}<span class="font-semibold text-foreground/90">{node.key}</span><span class="text-foreground/50">: </span>{/if}{#if node.markdown}<span class="prose-inline">{@html renderMarkdown(node.value)}</span>{:else}{node.value}{/if}
+    </div>
+  {:else if node.kind === 'group'}
+    <div style={depth > 0 ? `padding-left: ${depth * 0.75}rem` : ''}>
+      <span class="font-semibold text-foreground/90">{node.key}</span><span class="text-foreground/50">:</span>
+    </div>
+    {#each node.children as child}
+      {@render prettyNode(child, depth + 1)}
+    {/each}
+  {:else}
+    <div style={depth > 0 ? `padding-left: ${depth * 0.75}rem` : ''}>
+      <span class="font-semibold text-foreground/90">{node.key}</span><span class="text-foreground/50">:</span>
+    </div>
+    <ol class="list-decimal list-inside" style="padding-left: {(depth + 1) * 0.75}rem">
+      {#each node.items as fields}
+        <li class="text-foreground/80">
+          {#if fields.length === 1 && fields[0].kind === 'text' && !fields[0].key}
+            {fields[0].value}
+          {:else}
+            {#each fields as child}
+              {@render prettyNode(child, depth + 2)}
+            {/each}
+          {/if}
+        </li>
+      {/each}
+    </ol>
+  {/if}
+{/snippet}
+
+<div id="event-{event.id}" class="group py-2 px-2 hover:bg-secondary/30 rounded transition-colors">
+  <!-- Header: publisher + type + time -->
+  <div class="flex items-center gap-2 mb-0.5">
+    <Avatar {event} size={20} />
+    <span class="font-semibold text-sm text-foreground">
+      {publisherLabel ?? 'anonymous'}
+    </span>
+    {#if event.type}
+      <span class="text-[10px] font-mono text-muted-foreground/60 bg-secondary/60 px-1.5 py-0 rounded">{event.type}</span>
+    {/if}
+    {#if inReplyTo}
+      <button
+        class="text-[10px] font-mono text-primary/60 hover:text-primary bg-primary/10 hover:bg-primary/20 px-1.5 py-0 rounded cursor-pointer transition-colors"
+        onclick={() => scrollToEvent(inReplyTo!)}
+        title="Scroll to parent event"
+      >&#8593; reply</button>
+    {/if}
+    <div class="ml-auto shrink-0 flex items-center gap-1">
+      {#if canReply}
+        <button
+          class="text-[10px] text-muted-foreground/0 group-hover:text-muted-foreground/40 hover:!text-foreground transition-colors px-1"
+          onclick={() => onReply?.(event.id)}
+          title="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"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
+        </button>
+      {/if}
+      <button
+        class="text-[10px] text-muted-foreground/40 hover:text-foreground transition-colors relative"
+        onclick={toggleDetail}
+      >
+        {relativeTime}
+      </button>
+    </div>
+  </div>
+
+  <!-- Body -->
+  {#if viewMode === 'pretty' && messageBody}
+    <div class="text-sm text-foreground/80 prose-block">{@html renderMarkdown(messageBody)}</div>
+  {:else if viewMode === 'pretty' && prettyEntries}
+    <div class="text-sm text-foreground/80 flex flex-col gap-0.5 pl-0">
+      {#each prettyEntries as node}
+        {@render prettyNode(node, 0)}
+      {/each}
+    </div>
+  {:else}
+    <pre class="text-xs text-foreground/60 overflow-x-auto whitespace-pre-wrap break-all font-mono">{rawData}</pre>
+  {/if}
+</div>
+
+<!-- Detail slide-over panel (from right) -->
+{#if detailOpen}
+  <button
+    type="button"
+    class="fixed inset-0 bg-background/40 z-40"
+    onclick={closeDetail}
+    aria-label="Close detail panel"
+  ></button>
+  <div class="fixed inset-y-0 right-0 w-72 max-w-[80vw] bg-card border-l border-border shadow-lg z-50 p-4 flex flex-col gap-3 animate-slide-in-right">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold">Event detail</h3>
+      <button class="text-muted-foreground hover:text-foreground transition-colors" onclick={closeDetail} 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>
+    <div class="flex flex-col gap-2 text-xs">
+      <div>
+        <div class="text-muted-foreground mb-0.5">Created</div>
+        <div class="text-foreground font-mono">{fullTime}</div>
+      </div>
+      <div>
+        <div class="text-muted-foreground mb-0.5">Event ID</div>
+        <div class="text-foreground font-mono break-all select-all">{event.id}</div>
+      </div>
+      {#if event.type}
+        <div>
+          <div class="text-muted-foreground mb-0.5">Type</div>
+          <div class="text-foreground font-mono">{event.type}</div>
+        </div>
+      {/if}
+      {#if publisherLabel}
+        <div>
+          <div class="text-muted-foreground mb-0.5">Publisher</div>
+          <div class="text-foreground">{publisherLabel}</div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<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/event-feed.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import EventCard from './event-card.svelte';
+  import type { ZooidEvent } from '../api';
+
+  let {
+    events,
+    viewMode = 'pretty',
+    canReply = false,
+    onReply,
+    onOpenRef,
+  }: {
+    events: ZooidEvent[];
+    viewMode?: 'pretty' | 'raw';
+    canReply?: boolean;
+    onReply?: (eventId: string) => void;
+    onOpenRef?: (detail: { channel: string; eventId: string }) => void;
+  } = $props();
+
+  let reversed = $derived([...events].reverse());
+
+  let container: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    events.length;
+    if (container) {
+      tick().then(() => {
+        container!.scrollTop = container!.scrollHeight;
+      });
+    }
+  });
+</script>
+
+<div class="flex-1 overflow-auto px-4 flex flex-col" bind:this={container}>
+  {#if events.length === 0}
+    <div class="flex items-center justify-center h-32 text-sm text-muted-foreground">
+      No events yet. Waiting for signals...
+    </div>
+  {:else}
+    <div class="mt-auto"></div>
+    <div class="flex flex-col pt-2 pb-4">
+      {#each reversed as event, i (event.id)}
+        {#if i > 0}
+          <div class="border-t border-border/30 mx-2"></div>
+        {/if}
+        <EventCard {event} {viewMode} {canReply} {onReply} {onOpenRef} />
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/lib/components/homepage.svelte

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

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