@zooid/web 0.6.0 → 0.8.0

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

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

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

package/src/lib/components/sidebar.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">
-  import type { ChannelInfo } from '../api';
-  import AdminDropdown from './admin-dropdown.svelte';
-
-  import type { Component } from 'svelte';
-
-  interface SettingsPageExtension {
-    slug: string;
-    label: string;
-    icon?: Component;
-  }
-
-  let {
-    channels,
-    selectedId,
-    serverName,
-    hasAuth,
-    isAdmin,
-    status,
-    pollInterval,
-    onSelect,
-    onAuthClick,
-    onClose,
-    onServerConfig,
-    onKeysAndTokens,
-    onCreateChannel,
-    extensionSettingsPages = [],
-    onExtensionSettings,
-  }: {
-    channels: ChannelInfo[];
-    selectedId: string | null;
-    serverName: string;
-    hasAuth: boolean;
-    isAdmin: boolean;
-    status: 'connected' | 'polling' | 'reconnecting' | 'error' | 'idle' | 'loading';
-    pollInterval: number;
-    onSelect: (id: string) => void;
-    onAuthClick: () => void;
-    onClose?: () => void;
-    onServerConfig: () => void;
-    onKeysAndTokens: () => void;
-    onCreateChannel: () => void;
-    extensionSettingsPages?: SettingsPageExtension[];
-    onExtensionSettings?: (slug: string) => void;
-  } = $props();
-
-  const statusColor: Record<string, string> = {
-    connected: 'bg-primary',
-    polling: 'bg-primary',
-    reconnecting: 'bg-yellow-500',
-    error: 'bg-destructive',
-    idle: 'bg-muted-foreground',
-    loading: 'bg-muted-foreground',
-  };
-
-  const statusLabel: Record<string, string> = {
-    connected: 'Connected',
-    polling: 'Connected',
-    reconnecting: 'Reconnecting...',
-    error: 'Error',
-    idle: 'Idle',
-    loading: 'Loading...',
-  };
-</script>
-
-<div class="flex flex-col h-full w-full bg-[oklch(0.13_0_0)] border-r border-border">
-  <!-- Server header -->
-  <div class="flex items-center justify-between px-3 h-12 border-b border-border shrink-0">
-    {#if isAdmin}
-      <AdminDropdown {serverName} {onServerConfig} {onKeysAndTokens} {extensionSettingsPages} {onExtensionSettings} />
-    {:else}
-      <span class="font-semibold text-sm truncate">{serverName}</span>
-    {/if}
-    {#if onClose}
-      <button
-        onclick={onClose}
-        class="p-1.5 rounded hover:bg-secondary transition-colors md:hidden"
-        aria-label="Close sidebar"
-      >
-        <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>
-    {/if}
-  </div>
-
-  <!-- Channel list -->
-  <div class="flex-1 overflow-y-auto py-2">
-    <div class="px-3 mb-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Channels</div>
-    {#each channels as ch (ch.id)}
-      <button
-        class="w-full text-left px-3 py-1.5 flex items-center gap-2 text-sm transition-colors
-          {selectedId === ch.id ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}"
-        onclick={() => onSelect(ch.id)}
-      >
-        <span class="text-muted-foreground/60 shrink-0">#</span>
-        <span class="truncate flex-1">{ch.name}</span>
-        {#if !ch.is_public}
-          <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" class="text-muted-foreground/40 shrink-0"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-        {/if}
-      </button>
-    {/each}
-
-    {#if channels.length === 0 && !isAdmin}
-      <div class="px-3 py-4 text-xs text-muted-foreground/60 text-center">
-        No channels yet
-      </div>
-    {/if}
-
-    {#if isAdmin}
-      <button
-        class="w-full text-left px-3 py-1.5 flex items-center gap-2 text-sm text-muted-foreground/50 hover:text-muted-foreground hover:bg-secondary/50 transition-colors"
-        onclick={onCreateChannel}
-      >
-        <span class="shrink-0">+</span>
-        <span>Create channel</span>
-      </button>
-    {/if}
-  </div>
-
-  <!-- Profile -->
-  <button
-    onclick={onAuthClick}
-    class="border-t border-border px-3 h-12 flex items-center gap-2 w-full hover:bg-secondary/50 transition-colors shrink-0"
-    title={hasAuth ? 'Authenticated' : 'Sign in'}
-  >
-    <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" class={hasAuth ? 'text-primary' : 'text-muted-foreground'}>
-      <circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>
-    </svg>
-    <span class="text-xs {hasAuth ? 'text-foreground' : 'text-muted-foreground'}">{hasAuth ? 'Signed in' : 'Sign in'}</span>
-  </button>
-
-  <!-- Status + powered by -->
-  <div class="border-t border-border px-3 py-2 flex items-center justify-between text-[10px] text-muted-foreground/50">
-    <div class="flex items-center gap-1.5">
-      <span class={`inline-block w-1.5 h-1.5 rounded-full ${statusColor[status]}`}></span>
-      <span>{statusLabel[status]}</span>
-      {#if status === 'connected'}
-        <span class="text-muted-foreground/30">WS</span>
-      {:else if status === 'polling'}
-        <span class="text-muted-foreground/30">{pollInterval}s</span>
-      {/if}
-    </div>
-    <a href="https://zooid.dev" class="underline hover:text-muted-foreground/70">Zooid</a>
-  </div>
-</div>

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

@@ -1,40 +0,0 @@
-<script lang="ts">
-  let {
-    status,
-    pollInterval,
-  }: {
-    status: 'connected' | 'polling' | 'reconnecting' | 'error' | 'idle' | 'loading';
-    pollInterval: number;
-  } = $props();
-
-  const statusText: Record<string, string> = {
-    connected: 'Connected',
-    polling: 'Connected',
-    reconnecting: 'Reconnecting...',
-    error: 'Error',
-    idle: 'Idle',
-    loading: 'Loading...',
-  };
-
-  const statusColor: Record<string, string> = {
-    connected: 'bg-primary',
-    polling: 'bg-primary',
-    reconnecting: 'bg-yellow-500',
-    error: 'bg-destructive',
-    idle: 'bg-muted-foreground',
-    loading: 'bg-muted-foreground',
-  };
-</script>
-
-<div class="flex items-center justify-between px-4 py-2 pb-[calc(0.5rem+env(safe-area-inset-bottom))] text-xs text-muted-foreground border-t border-border">
-  <div class="flex items-center gap-2">
-    <span class={`inline-block w-1.5 h-1.5 rounded-full ${statusColor[status]}`}></span>
-    <span>{statusText[status]}</span>
-    {#if status === 'connected'}
-      <span class="text-muted-foreground/60">WebSocket</span>
-    {:else if status === 'polling'}
-      <span class="text-muted-foreground/60">poll every {pollInterval}s</span>
-    {/if}
-  </div>
-  <span class="text-muted-foreground/40"><a href="https://zooid.dev" class="underline hover:text-muted-foreground">Powered by Zooid</a></span>
-</div>

package/src/lib/pretty-json.test.ts

@@ -1,200 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { looksLikeMarkdown, parsePretty, renderMarkdown } from './pretty-json';
-
-describe('parsePretty', () => {
-  it('parses flat object into text nodes', () => {
-    const raw = JSON.stringify({ title: 'Hello', count: 42 });
-    const nodes = parsePretty(raw);
-    expect(nodes).toEqual([
-      {
-        kind: 'text',
-        key: 'title',
-        value: 'Hello',
-        markdown: false,
-        multiline: false,
-      },
-      {
-        kind: 'text',
-        key: 'count',
-        value: '42',
-        markdown: false,
-        multiline: false,
-      },
-    ]);
-  });
-
-  it('preserves newlines in string values and marks as multiline', () => {
-    const raw = JSON.stringify({ body: 'line one\nline two\nline three' });
-    const nodes = parsePretty(raw)!;
-    expect(nodes[0].kind).toBe('text');
-    const text = nodes[0] as Extract<(typeof nodes)[0], { kind: 'text' }>;
-    expect(text.value).toBe('line one\nline two\nline three');
-    expect(text.multiline).toBe(true);
-    expect(text.value.split('\n')).toEqual([
-      'line one',
-      'line two',
-      'line three',
-    ]);
-  });
-
-  it('marks single-line strings as not multiline', () => {
-    const raw = JSON.stringify({ title: 'no newlines here' });
-    const nodes = parsePretty(raw)!;
-    const text = nodes[0] as Extract<(typeof nodes)[0], { kind: 'text' }>;
-    expect(text.multiline).toBe(false);
-  });
-
-  it('parses nested object as group node', () => {
-    const raw = JSON.stringify({ meta: { author: 'bot', version: 1 } });
-    const nodes = parsePretty(raw)!;
-    expect(nodes).toHaveLength(1);
-    expect(nodes[0].kind).toBe('group');
-    const group = nodes[0] as Extract<(typeof nodes)[0], { kind: 'group' }>;
-    expect(group.key).toBe('meta');
-    expect(group.children).toEqual([
-      {
-        kind: 'text',
-        key: 'author',
-        value: 'bot',
-        markdown: false,
-        multiline: false,
-      },
-      {
-        kind: 'text',
-        key: 'version',
-        value: '1',
-        markdown: false,
-        multiline: false,
-      },
-    ]);
-  });
-
-  it('parses array of objects as list node', () => {
-    const raw = JSON.stringify({
-      posts: [
-        { title: 'A', score: 10 },
-        { title: 'B', score: 20 },
-      ],
-    });
-    const nodes = parsePretty(raw)!;
-    expect(nodes).toHaveLength(1);
-    expect(nodes[0].kind).toBe('list');
-    const list = nodes[0] as Extract<(typeof nodes)[0], { kind: 'list' }>;
-    expect(list.items).toHaveLength(2);
-    expect(list.items[0][0]).toEqual({
-      kind: 'text',
-      key: 'title',
-      value: 'A',
-      markdown: false,
-      multiline: false,
-    });
-  });
-
-  it('detects markdown in string values', () => {
-    const raw = JSON.stringify({ summary: '**bold** and *italic*' });
-    const nodes = parsePretty(raw)!;
-    const text = nodes[0] as Extract<(typeof nodes)[0], { kind: 'text' }>;
-    expect(text.markdown).toBe(true);
-  });
-
-  it('returns null for non-object JSON', () => {
-    expect(parsePretty('"hello"')).toBeNull();
-    expect(parsePretty('[1,2,3]')).toBeNull();
-    expect(parsePretty('42')).toBeNull();
-  });
-
-  it('returns null for invalid JSON', () => {
-    expect(parsePretty('not json')).toBeNull();
-  });
-});
-
-describe('ref convention', () => {
-  it('should mark ref field with kind "ref"', () => {
-    const nodes = parsePretty(
-      JSON.stringify({
-        body: 'Trade executed',
-        ref: 'zooid:signals/01HWXYZ123456789012345A',
-      }),
-    );
-
-    const refNode = nodes!.find((n) => n.key === 'ref');
-    expect(refNode).toBeDefined();
-    expect(refNode!.kind).toBe('ref');
-    expect((refNode as { value: string }).value).toBe(
-      'zooid:signals/01HWXYZ123456789012345A',
-    );
-  });
-
-  it('should mark ref with https: scheme', () => {
-    const nodes = parsePretty(
-      JSON.stringify({
-        ref: 'https://example.com/resource',
-      }),
-    );
-
-    const refNode = nodes!.find((n) => n.key === 'ref');
-    expect(refNode!.kind).toBe('ref');
-  });
-
-  it('should not mark non-ref string fields as ref', () => {
-    const nodes = parsePretty(
-      JSON.stringify({
-        body: 'zooid:signals/01HWXYZ123456789012345A',
-        symbol: 'AAPL',
-      }),
-    );
-
-    const bodyNode = nodes!.find((n) => n.key === 'body');
-    expect(bodyNode!.kind).toBe('text');
-  });
-});
-
-describe('looksLikeMarkdown', () => {
-  it('detects bold syntax', () => {
-    expect(looksLikeMarkdown('some **bold** text')).toBe(true);
-  });
-
-  it('detects italic syntax', () => {
-    expect(looksLikeMarkdown('some *italic* text')).toBe(true);
-  });
-
-  it('detects heading syntax', () => {
-    expect(looksLikeMarkdown('# Heading')).toBe(true);
-  });
-
-  it('detects link syntax', () => {
-    expect(looksLikeMarkdown('see [link](url)')).toBe(true);
-  });
-
-  it('detects code backticks', () => {
-    expect(looksLikeMarkdown('use `code` here')).toBe(true);
-  });
-
-  it('does not flag plain text', () => {
-    expect(looksLikeMarkdown('just a normal sentence')).toBe(false);
-  });
-
-  it('does not flag URLs without markdown', () => {
-    expect(looksLikeMarkdown('https://example.com/path/to/page')).toBe(false);
-  });
-});
-
-describe('renderMarkdown', () => {
-  it('renders bold text', () => {
-    const html = renderMarkdown('**bold**');
-    expect(html).toContain('<strong>bold</strong>');
-  });
-
-  it('renders bullet lists', () => {
-    const html = renderMarkdown('* item one\n* item two');
-    expect(html).toContain('<li>');
-    expect(html).toContain('item one');
-    expect(html).toContain('item two');
-  });
-
-  it('renders links', () => {
-    const html = renderMarkdown('[click](https://example.com)');
-    expect(html).toContain('<a');
-    expect(html).toContain('https://example.com');
-  });
-});