@syncular/ui 0.0.0

package/src/console/stream-log.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { cn } from '../lib/cn';
+import type { StreamOperation } from '../lib/types';
+
+export type StreamLogProps = ComponentPropsWithoutRef<'div'> & {
+  entries: StreamOperation[];
+  /** Filter bar rendered above the table */
+  filterBar?: ReactNode;
+  /** Pagination rendered below the table */
+  pagination?: ReactNode;
+  /** Optional click handler for selecting a row */
+  onEntryClick?: (entry: StreamOperation) => void;
+  /** Selected entry id for row highlighting */
+  selectedEntryId?: string | null;
+};
+
+const typeColorMap: Record<string, string> = {
+  commit: 'text-flow',
+  push: 'text-syncing',
+  pull: 'text-healthy',
+};
+
+const outcomeColorMap: Record<string, string> = {
+  applied: 'text-healthy',
+  error: 'text-offline',
+  cached: 'text-syncing',
+};
+
+const StreamLog = forwardRef<HTMLDivElement, StreamLogProps>(
+  (
+    {
+      className,
+      entries,
+      filterBar,
+      pagination,
+      onEntryClick,
+      selectedEntryId,
+      ...props
+    },
+    ref
+  ) => (
+    <div ref={ref} className={cn('h-full flex flex-col', className)} {...props}>
+      {filterBar}
+
+      {/* Column headers */}
+      <div className="font-mono text-[9px] tracking-wider uppercase text-neutral-600 flex items-center gap-4 px-4 leading-6 border-b border-border bg-white/[0.01]">
+        <span className="w-[50px] truncate">Time</span>
+        <span className="w-[65px] truncate">Type</span>
+        <span className="w-[55px] truncate">ID</span>
+        <span className="w-[65px] truncate">Outcome</span>
+        <span className="w-[50px] truncate">Dur</span>
+        <span className="w-[100px] truncate">Actor</span>
+        <span className="w-[120px] truncate">Client</span>
+        <span className="flex-1 truncate">Detail</span>
+      </div>
+
+      {/* Log entries */}
+      <div className="flex-1 overflow-y-auto">
+        {entries.map((entry, i) => (
+          <StreamLogRow
+            key={`${entry.id}-${i}`}
+            entry={entry}
+            isSelected={selectedEntryId === entry.id}
+            onClick={onEntryClick}
+          />
+        ))}
+      </div>
+
+      {pagination}
+    </div>
+  )
+);
+StreamLog.displayName = 'StreamLog';
+
+function StreamLogRow({
+  entry,
+  isSelected,
+  onClick,
+}: {
+  entry: StreamOperation;
+  isSelected: boolean;
+  onClick?: (entry: StreamOperation) => void;
+}) {
+  const typeColor = typeColorMap[entry.type] ?? 'text-neutral-500';
+  const outcomeColor = outcomeColorMap[entry.outcome] ?? 'text-neutral-600';
+  const rowClassName = cn(
+    'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 border-b border-[#141414] hover:bg-white/[0.015] transition-colors',
+    onClick ? 'cursor-pointer' : 'cursor-default',
+    isSelected && 'bg-white/[0.05]'
+  );
+  const rowContent = (
+    <>
+      <span className="w-[50px] text-neutral-600 truncate">{entry.time}</span>
+      <span className={cn('w-[65px] font-medium truncate', typeColor)}>
+        {entry.type.toUpperCase()}
+      </span>
+      <span className="w-[55px] text-flow truncate">{entry.id}</span>
+      <span className={cn('w-[65px] truncate', outcomeColor)}>
+        {entry.outcome}
+      </span>
+      <span className="w-[50px] text-neutral-500 truncate">
+        {entry.duration}
+      </span>
+      <span className="w-[100px] text-neutral-400 truncate">{entry.actor}</span>
+      <span
+        className="w-[120px] text-neutral-600 truncate"
+        title={entry.client}
+      >
+        {entry.client.length > 14
+          ? `${entry.client.substring(0, 14)}\u2026`
+          : entry.client}
+      </span>
+      <span className="flex-1 text-neutral-500 truncate">{entry.detail}</span>
+    </>
+  );
+
+  if (!onClick) {
+    return <div className={rowClassName}>{rowContent}</div>;
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(rowClassName, 'w-full bg-transparent text-left')}
+      onClick={() => onClick(entry)}
+    >
+      {rowContent}
+    </button>
+  );
+}
+
+export { StreamLog };

package/src/console/sync-horizon.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { SyncClientNode } from '../lib/types';
+
+export type SyncHorizonProps = ComponentPropsWithoutRef<'div'> & {
+  clients: SyncClientNode[];
+  headSeq: number;
+  maxLag?: number;
+  /** Min seq shown on the scale. Defaults to headSeq minus range */
+  minSeq?: number;
+};
+
+function getCursorColor(status: string) {
+  if (status === 'online') return '#22c55e';
+  if (status === 'syncing') return '#f59e0b';
+  return '#ef4444';
+}
+
+const SyncHorizon = forwardRef<HTMLDivElement, SyncHorizonProps>(
+  ({ className, clients, headSeq, maxLag, minSeq, ...props }, ref) => {
+    const cursors = clients.map((c) => c.cursor);
+    const computedMinSeq = minSeq ?? Math.min(...cursors, headSeq) - 10;
+    const computedMaxLag =
+      maxLag ?? Math.max(...clients.map((c) => headSeq - c.cursor), 0);
+    const range = headSeq - computedMinSeq;
+
+    const scaleMarkers = [
+      computedMinSeq,
+      Math.round(computedMinSeq + range * 0.33),
+      Math.round(computedMinSeq + range * 0.66),
+      headSeq,
+    ];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+          className
+        )}
+        {...props}
+      >
+        {/* Header */}
+        <div className="px-4 py-2.5 border-b border-border flex items-center justify-between">
+          <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+            Sync Horizon
+          </span>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-[10px] text-neutral-500">
+                Head
+              </span>
+              <span className="font-mono text-xs text-white font-semibold">
+                #{headSeq.toLocaleString()}
+              </span>
+            </div>
+            <div className="w-px h-3 bg-border" />
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-[10px] text-neutral-500">
+                Max lag
+              </span>
+              <span className="font-mono text-xs text-syncing font-semibold">
+                {computedMaxLag}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-4">
+          {/* Timeline bar */}
+          <div className="relative h-8 mb-3 rounded bg-surface">
+            {/* Scale markers */}
+            <div className="absolute inset-0 flex items-center justify-between px-2">
+              {scaleMarkers.map((m) => (
+                <span key={m} className="font-mono text-[8px] text-neutral-700">
+                  #{m.toLocaleString()}
+                </span>
+              ))}
+            </div>
+
+            {/* Head line */}
+            <div
+              className="absolute top-0 bottom-0 w-px bg-flow/40"
+              style={{ right: '2%' }}
+            />
+
+            {/* Client cursors */}
+            {clients.map((c) => {
+              const pct =
+                range > 0 ? ((c.cursor - computedMinSeq) / range) * 96 + 2 : 50;
+              const color = getCursorColor(c.status);
+              const op = c.status === 'offline' ? 0.4 : 1;
+
+              return (
+                <div
+                  key={c.id}
+                  className="absolute"
+                  style={{
+                    left: `${pct}%`,
+                    top: '50%',
+                    transform: 'translate(-50%,-50%)',
+                    opacity: op,
+                  }}
+                  title={`${c.id} \u2192 #${c.cursor}`}
+                >
+                  <div
+                    className="w-2.5 h-2.5 rounded-full"
+                    style={{
+                      background: color,
+                      boxShadow: `0 0 4px ${color}`,
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Legend */}
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-1.5">
+              <span className="w-2 h-2 rounded-full bg-healthy" />
+              <span className="font-mono text-[9px] text-neutral-500">
+                Caught up
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="w-2 h-2 rounded-full bg-syncing" />
+              <span className="font-mono text-[9px] text-neutral-500">
+                Behind
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="w-2 h-2 rounded-full bg-offline opacity-50" />
+              <span className="font-mono text-[9px] text-neutral-500">
+                Offline
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+SyncHorizon.displayName = 'SyncHorizon';
+
+export { SyncHorizon };

package/src/console/sync-lag-bar.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { useMemo } from 'react';
+import { cn } from '../lib/cn';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
+
+export interface SyncLagStats {
+  maxCommitSeq: number;
+}
+
+export interface SyncLagClient {
+  clientId: string;
+  cursor: number;
+  lagCommitCount?: number | null;
+}
+
+export interface SyncLagBarProps {
+  className?: string;
+  clients: SyncLagClient[];
+  stats: SyncLagStats;
+}
+
+interface ClientLagInfo {
+  lag: number;
+  status: 'ok' | 'behind' | 'far-behind' | 'bootstrapping';
+  colorClass: string;
+  bgClass: string;
+}
+
+export function getClientLagInfo(
+  cursor: number,
+  headSeq: number,
+  lagOverride?: number | null
+): ClientLagInfo {
+  const lag = lagOverride ?? Math.max(0, headSeq - cursor);
+
+  if (cursor <= 0) {
+    return {
+      lag,
+      status: 'bootstrapping',
+      colorClass: 'text-neutral-500',
+      bgClass: 'bg-neutral-700',
+    };
+  }
+
+  if (lag === 0) {
+    return {
+      lag,
+      status: 'ok',
+      colorClass: 'text-healthy',
+      bgClass: 'bg-healthy',
+    };
+  }
+
+  if (lag <= 10) {
+    return {
+      lag,
+      status: 'behind',
+      colorClass: 'text-syncing',
+      bgClass: 'bg-syncing',
+    };
+  }
+
+  return {
+    lag,
+    status: 'far-behind',
+    colorClass: 'text-offline',
+    bgClass: 'bg-offline',
+  };
+}
+
+export function SyncLagBar({ className, clients, stats }: SyncLagBarProps) {
+  const headSeq = stats.maxCommitSeq;
+
+  const analysis = useMemo(() => {
+    const infos = clients.map((c) => ({
+      ...c,
+      info: getClientLagInfo(c.cursor, headSeq, c.lagCommitCount),
+    }));
+
+    const active = infos.filter((c) => c.info.status !== 'bootstrapping');
+    const bootstrapping = infos.filter(
+      (c) => c.info.status === 'bootstrapping'
+    );
+
+    const lags = active.map((c) => c.info.lag);
+    const maxLag = lags.length > 0 ? Math.max(...lags) : 0;
+    const avgLag =
+      lags.length > 0
+        ? Math.round(lags.reduce((sum, l) => sum + l, 0) / lags.length)
+        : 0;
+
+    const okCount = active.filter((c) => c.info.status === 'ok').length;
+    const behindCount = active.filter((c) => c.info.status === 'behind').length;
+    const farBehindCount = active.filter(
+      (c) => c.info.status === 'far-behind'
+    ).length;
+
+    return {
+      infos,
+      active,
+      bootstrapping,
+      maxLag,
+      avgLag,
+      okCount,
+      behindCount,
+      farBehindCount,
+    };
+  }, [clients, headSeq]);
+
+  const total = analysis.active.length;
+  const barSegments = [
+    { count: analysis.okCount, colorClass: 'bg-healthy', label: 'Up to date' },
+    {
+      count: analysis.behindCount,
+      colorClass: 'bg-syncing',
+      label: 'Behind (1-10)',
+    },
+    {
+      count: analysis.farBehindCount,
+      colorClass: 'bg-offline',
+      label: 'Far behind (>10)',
+    },
+  ];
+
+  return (
+    <div className={cn('flex flex-col gap-3', className)}>
+      {/* Header stats */}
+      <div className="flex items-center justify-between text-xs">
+        <div className="flex items-center gap-4">
+          <span className="text-neutral-500">
+            Head: <span className="text-foreground font-mono">#{headSeq}</span>
+          </span>
+          <span className="text-neutral-500">
+            Active:{' '}
+            <span className="text-foreground">{analysis.active.length}</span>
+          </span>
+          {analysis.bootstrapping.length > 0 ? (
+            <span className="text-neutral-500">
+              Bootstrapping:{' '}
+              <span className="text-foreground">
+                {analysis.bootstrapping.length}
+              </span>
+            </span>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="text-neutral-500">
+            Max lag:{' '}
+            <span
+              className={cn(
+                'font-mono',
+                analysis.maxLag === 0
+                  ? 'text-healthy'
+                  : analysis.maxLag <= 10
+                    ? 'text-syncing'
+                    : 'text-offline'
+              )}
+            >
+              {analysis.maxLag}
+            </span>
+          </span>
+          <span className="text-neutral-500">
+            Avg lag:{' '}
+            <span
+              className={cn(
+                'font-mono',
+                analysis.avgLag === 0
+                  ? 'text-healthy'
+                  : analysis.avgLag <= 10
+                    ? 'text-syncing'
+                    : 'text-offline'
+              )}
+            >
+              {analysis.avgLag}
+            </span>
+          </span>
+        </div>
+      </div>
+
+      {/* Stacked bar */}
+      {total > 0 ? (
+        <div className="h-3 rounded-full bg-neutral-900 overflow-hidden flex">
+          {barSegments.map((segment) =>
+            segment.count > 0 ? (
+              <Tooltip key={segment.label}>
+                <TooltipTrigger
+                  render={
+                    <div
+                      className={cn(
+                        'h-full transition-all',
+                        segment.colorClass
+                      )}
+                      style={{
+                        width: `${(segment.count / total) * 100}%`,
+                      }}
+                    />
+                  }
+                />
+                <TooltipContent>
+                  {segment.label}: {segment.count} client
+                  {segment.count !== 1 ? 's' : ''}
+                </TooltipContent>
+              </Tooltip>
+            ) : null
+          )}
+        </div>
+      ) : (
+        <div className="h-3 rounded-full bg-neutral-900" />
+      )}
+
+      {/* Legend */}
+      <div className="flex items-center gap-4 text-xs">
+        {barSegments.map((segment) => (
+          <div key={segment.label} className="flex items-center gap-1.5">
+            <div className={cn('h-2 w-2 rounded-full', segment.colorClass)} />
+            <span className="text-neutral-500">
+              {segment.label}{' '}
+              <span className="text-foreground">{segment.count}</span>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/console/sync-state-badge.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { cn } from '../lib/cn';
+import { Badge } from '../primitives/badge';
+
+export interface SyncStateBadgeProps {
+  className?: string;
+  state: string;
+}
+
+export function SyncStateBadge({ className, state }: SyncStateBadgeProps) {
+  const variant = stateToVariant(state);
+
+  return (
+    <Badge variant={variant} className={cn(className)}>
+      {state}
+    </Badge>
+  );
+}
+
+function stateToVariant(state: string) {
+  switch (state) {
+    case 'idle':
+      return 'ghost' as const;
+    case 'syncing':
+      return 'syncing' as const;
+    case 'error':
+      return 'destructive' as const;
+    default:
+      return 'ghost' as const;
+  }
+}

package/src/console/topology-card.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { cn } from '../lib/cn';
+import type { SyncClient } from '../lib/types';
+import { Card, CardContent } from '../primitives/card';
+import { Spinner } from '../primitives/spinner';
+
+export interface TopologyCardProps {
+  clients: SyncClient[];
+  emptyMessage?: string;
+  isLoading?: boolean;
+  relayLabel?: string;
+}
+
+export function TopologyCard({
+  clients,
+  emptyMessage = 'No clients connected',
+  isLoading,
+  relayLabel,
+}: TopologyCardProps) {
+  return (
+    <Card>
+      <CardContent className={cn('min-h-[280px] flex flex-col')}>
+        {relayLabel ? (
+          <span className="text-xs text-neutral-500 mb-2">{relayLabel}</span>
+        ) : null}
+
+        {isLoading ? (
+          <div className="flex flex-1 items-center justify-center">
+            <Spinner size="lg" />
+          </div>
+        ) : clients.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center">
+            <p className="text-sm text-neutral-500">{emptyMessage}</p>
+          </div>
+        ) : (
+          <div className="flex flex-1 items-center justify-center">
+            {/* Placeholder for SVG topology visualization */}
+            <div className="text-xs text-neutral-500">
+              {clients.length} client{clients.length !== 1 ? 's' : ''} connected
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}