@zooid/web 0.5.1 → 0.6.0

package/src/lib/components/sidebar.svelte

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

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

@@ -0,0 +1,200 @@
+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');
+  });
+});

package/src/lib/pretty-json.ts

@@ -0,0 +1,79 @@
+import { marked } from 'marked';
+
+marked.setOptions({ breaks: true, gfm: true });
+
+export type PrettyNode =
+  | {
+      kind: 'text';
+      key: string;
+      value: string;
+      markdown: boolean;
+      multiline: boolean;
+    }
+  | { kind: 'ref'; key: string; value: string }
+  | { kind: 'group'; key: string; children: PrettyNode[] }
+  | { kind: 'list'; key: string; items: PrettyNode[][] };
+
+const MD_HINT = /[*_#\[`~>]|\n[-*] |\n\d+\. /;
+
+export function looksLikeMarkdown(s: string): boolean {
+  return MD_HINT.test(s);
+}
+
+export function renderMarkdown(s: string): string {
+  return marked.parse(s, { async: false }) as string;
+}
+
+export function parsePretty(raw: string): PrettyNode[] | null {
+  try {
+    const obj = JSON.parse(raw);
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj))
+      return null;
+    return objectToNodes(obj);
+  } catch {
+    return null;
+  }
+}
+
+export function objectToNodes(obj: Record<string, unknown>): PrettyNode[] {
+  return Object.entries(obj).map(([key, value]) => {
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      return {
+        kind: 'group' as const,
+        key,
+        children: objectToNodes(value as Record<string, unknown>),
+      };
+    }
+    if (Array.isArray(value) && value.length > 0) {
+      return {
+        kind: 'list' as const,
+        key,
+        items: value.map((item) =>
+          typeof item === 'object' && item !== null && !Array.isArray(item)
+            ? objectToNodes(item as Record<string, unknown>)
+            : [
+                {
+                  kind: 'text' as const,
+                  key: '',
+                  value: String(item),
+                  markdown: false,
+                  multiline: false,
+                },
+              ],
+        ),
+      };
+    }
+    const str = typeof value === 'string' ? value : JSON.stringify(value);
+    if (key === 'ref' && typeof value === 'string') {
+      return { kind: 'ref' as const, key, value: str };
+    }
+    const multiline = str.includes('\n');
+    return {
+      kind: 'text' as const,
+      key,
+      value: str,
+      markdown: looksLikeMarkdown(str),
+      multiline,
+    };
+  });
+}

package/src/lib/time.ts

@@ -0,0 +1,38 @@
+export function formatFull(iso: string): string {
+  const hasOffset = /Z|[+-]\d{2}:?\d{2}$/.test(iso);
+  const ts = hasOffset ? iso : iso + 'Z';
+  return new Date(ts).toLocaleString();
+}
+
+const ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ';
+
+/** Extract millisecond timestamp from a ULID (first 10 chars encode 48-bit time). */
+export function ulidTimestamp(ulid: string): number {
+  let time = 0;
+  for (let i = 0; i < 10; i++) {
+    time = time * 32 + ULID_CHARS.indexOf(ulid[i].toUpperCase());
+  }
+  return time;
+}
+
+export function formatRelative(iso: string): string {
+  const hasOffset = /Z|[+-]\d{2}:?\d{2}$/.test(iso);
+  const ts = hasOffset ? iso : iso + 'Z';
+  return formatRelativeMs(new Date(ts).getTime());
+}
+
+export function formatRelativeUlid(ulid: string): string {
+  return formatRelativeMs(ulidTimestamp(ulid));
+}
+
+function formatRelativeMs(ms: number): string {
+  const diff = Date.now() - ms;
+  const seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

package/src/lib/zooid-uri.test.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { parseZooidUri, resolveRef } from './zooid-uri';
+
+describe('parseZooidUri', () => {
+  it('should parse same-server URI', () => {
+    const result = parseZooidUri('zooid:signals/01HWXYZ123456789012345A');
+    expect(result).toEqual({
+      host: null,
+      channel: 'signals',
+      eventId: '01HWXYZ123456789012345A',
+    });
+  });
+
+  it('should parse cross-server URI', () => {
+    const result = parseZooidUri(
+      'zooid:ori.zoon.eco/signals/01HWXYZ123456789012345A',
+    );
+    expect(result).toEqual({
+      host: 'ori.zoon.eco',
+      channel: 'signals',
+      eventId: '01HWXYZ123456789012345A',
+    });
+  });
+
+  it('should distinguish host from channel by dot presence', () => {
+    const withDot = parseZooidUri(
+      'zooid:my.server/chan/01HWXYZ123456789012345A',
+    );
+    expect(withDot?.host).toBe('my.server');
+
+    const withoutDot = parseZooidUri(
+      'zooid:my-channel/01HWXYZ123456789012345A',
+    );
+    expect(withoutDot?.host).toBeNull();
+    expect(withoutDot?.channel).toBe('my-channel');
+  });
+
+  it('should return null for invalid URIs', () => {
+    expect(parseZooidUri('not-a-uri')).toBeNull();
+    expect(parseZooidUri('zooid:')).toBeNull();
+    expect(parseZooidUri('zooid:only-one-part')).toBeNull();
+    expect(parseZooidUri('https://example.com')).toBeNull();
+  });
+});
+
+describe('resolveRef', () => {
+  const currentServer = 'https://demo.zoon.eco';
+
+  it('should resolve zooid: same-server to in-app link', () => {
+    const result = resolveRef(
+      'zooid:signals/01HWXYZ123456789012345A',
+      currentServer,
+    );
+    expect(result).toEqual({
+      type: 'zooid',
+      label: 'signals/01HWXYZ123456789012345A',
+      channel: 'signals',
+      eventId: '01HWXYZ123456789012345A',
+      href: null,
+    });
+  });
+
+  it('should resolve zooid: cross-server to external link', () => {
+    const result = resolveRef(
+      'zooid:ori.zoon.eco/signals/01HWXYZ123456789012345A',
+      currentServer,
+    );
+    expect(result).toEqual({
+      type: 'zooid-external',
+      label: 'ori.zoon.eco/signals/01HWXYZ123456789012345A',
+      channel: 'signals',
+      eventId: '01HWXYZ123456789012345A',
+      href: 'https://ori.zoon.eco/api/v1/channels/signals/events/01HWXYZ123456789012345A',
+    });
+  });
+
+  it('should resolve https: as external link', () => {
+    const result = resolveRef('https://example.com/docs', currentServer);
+    expect(result).toEqual({
+      type: 'external',
+      label: 'https://example.com/docs',
+      href: 'https://example.com/docs',
+    });
+  });
+
+  it('should resolve http: as external link', () => {
+    const result = resolveRef('http://localhost:8787/test', currentServer);
+    expect(result).toEqual({
+      type: 'external',
+      label: 'http://localhost:8787/test',
+      href: 'http://localhost:8787/test',
+    });
+  });
+
+  it('should resolve unknown schemes as plain text', () => {
+    const result = resolveRef('ftp://files.example.com', currentServer);
+    expect(result).toEqual({
+      type: 'text',
+      label: 'ftp://files.example.com',
+    });
+  });
+});

package/src/lib/zooid-uri.ts

@@ -0,0 +1,74 @@
+export interface ZooidUri {
+  host: string | null;
+  channel: string;
+  eventId: string;
+}
+
+export type ResolvedRef =
+  | {
+      type: 'zooid';
+      label: string;
+      channel: string;
+      eventId: string;
+      href: null;
+    }
+  | {
+      type: 'zooid-external';
+      label: string;
+      channel: string;
+      eventId: string;
+      href: string;
+    }
+  | { type: 'external'; label: string; href: string }
+  | { type: 'text'; label: string };
+
+export function parseZooidUri(uri: string): ZooidUri | null {
+  if (!uri.startsWith('zooid:')) return null;
+
+  const path = uri.slice('zooid:'.length);
+  if (!path) return null;
+  const segments = path.split('/');
+
+  if (segments.length === 2) {
+    const [channel, eventId] = segments;
+    if (!channel || !eventId) return null;
+    return { host: null, channel, eventId };
+  }
+
+  if (segments.length === 3) {
+    const [host, channel, eventId] = segments;
+    if (!host || !channel || !eventId) return null;
+    if (!host.includes('.')) return null;
+    return { host, channel, eventId };
+  }
+
+  return null;
+}
+
+export function resolveRef(ref: string, currentServer: string): ResolvedRef {
+  const zooid = parseZooidUri(ref);
+  if (zooid) {
+    if (zooid.host) {
+      return {
+        type: 'zooid-external',
+        label: `${zooid.host}/${zooid.channel}/${zooid.eventId}`,
+        channel: zooid.channel,
+        eventId: zooid.eventId,
+        href: `https://${zooid.host}/api/v1/channels/${zooid.channel}/events/${zooid.eventId}`,
+      };
+    }
+    return {
+      type: 'zooid',
+      label: `${zooid.channel}/${zooid.eventId}`,
+      channel: zooid.channel,
+      eventId: zooid.eventId,
+      href: null,
+    };
+  }
+
+  if (ref.startsWith('https://') || ref.startsWith('http://')) {
+    return { type: 'external', label: ref, href: ref };
+  }
+
+  return { type: 'text', label: ref };
+}

package/src/main.ts

@@ -0,0 +1,7 @@
+import './app.css';
+import App from './App.svelte';
+import { mount } from 'svelte';
+
+const app = mount(App, { target: document.getElementById('app')! });
+
+export default app;

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />