@syncular/ui 0.0.0

package/src/console/connection-form.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import { Badge } from '../primitives/badge';
+import { Button } from '../primitives/button';
+import { Input } from '../primitives/input';
+
+export type ConnectionFormProps = ComponentPropsWithoutRef<'div'> & {
+  isConnected?: boolean;
+  isConnecting?: boolean;
+  isTestingConnection?: boolean;
+  serverUrl: string;
+  onServerUrlChange?: (value: string) => void;
+  consoleToken: string;
+  onConsoleTokenChange?: (value: string) => void;
+  onSaveAndConnect?: () => void;
+  onDisconnect?: () => void;
+  onTestConnection?: () => void;
+  statusMessage?: string;
+};
+
+const ConnectionForm = forwardRef<HTMLDivElement, ConnectionFormProps>(
+  (
+    {
+      className,
+      isConnected = false,
+      isConnecting = false,
+      isTestingConnection = false,
+      serverUrl,
+      onServerUrlChange,
+      consoleToken,
+      onConsoleTokenChange,
+      onSaveAndConnect,
+      onDisconnect,
+      onTestConnection,
+      statusMessage,
+      ...props
+    },
+    ref
+  ) => (
+    <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">
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              'w-1.5 h-1.5 rounded-full',
+              isConnected ? 'bg-healthy' : 'bg-offline'
+            )}
+            style={isConnected ? { boxShadow: '0 0 4px #22c55e' } : undefined}
+          />
+          <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+            Connection
+          </span>
+        </div>
+        <Badge variant={isConnected ? 'healthy' : 'offline'}>
+          {isConnected ? 'Connected' : 'Disconnected'}
+        </Badge>
+      </div>
+
+      {/* Body */}
+      <div className="p-5 space-y-4">
+        <p className="font-mono text-[10px] text-neutral-500">
+          Configure the server endpoint and authentication token.
+        </p>
+
+        {/* Server URL */}
+        <div>
+          <label
+            htmlFor="console-server-url"
+            className="font-mono text-[9px] text-neutral-500 uppercase tracking-wider block mb-1.5"
+          >
+            Server URL
+          </label>
+          <Input
+            id="console-server-url"
+            variant="mono"
+            value={serverUrl}
+            onChange={(e) => onServerUrlChange?.(e.target.value)}
+          />
+        </div>
+
+        {/* Console Token */}
+        <div>
+          <label
+            htmlFor="console-token"
+            className="font-mono text-[9px] text-neutral-500 uppercase tracking-wider block mb-1.5"
+          >
+            Console Token
+          </label>
+          <Input
+            id="console-token"
+            variant="mono"
+            type="password"
+            value={consoleToken}
+            onChange={(e) => onConsoleTokenChange?.(e.target.value)}
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            variant="primary"
+            size="md"
+            onClick={onSaveAndConnect}
+            disabled={isConnecting}
+          >
+            {isConnecting ? 'Connecting...' : 'Save + Connect'}
+          </Button>
+          <Button
+            variant="default"
+            size="md"
+            onClick={onTestConnection}
+            disabled={isConnecting || isTestingConnection}
+          >
+            {isTestingConnection ? 'Testing...' : 'Test Connection'}
+          </Button>
+          <Button
+            variant="destructive"
+            size="md"
+            onClick={onDisconnect}
+            disabled={!isConnected}
+          >
+            Disconnect
+          </Button>
+        </div>
+
+        {/* Status message */}
+        {statusMessage && (
+          <div
+            className={cn(
+              'font-mono text-[10px]',
+              isConnected ? 'text-healthy' : 'text-offline'
+            )}
+          >
+            {statusMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+);
+ConnectionForm.displayName = 'ConnectionForm';
+
+export { ConnectionForm };

package/src/console/connection-status-badge.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Badge } from '../primitives/badge';
+import { Spinner } from '../primitives/spinner';
+
+export type ConnectionState =
+  | 'connecting'
+  | 'connected'
+  | 'disconnected'
+  | 'not-configured';
+
+export interface ConnectionStatusBadgeProps {
+  className?: string;
+  state: ConnectionState;
+}
+
+export function ConnectionStatusBadge({
+  className,
+  state,
+}: ConnectionStatusBadgeProps) {
+  switch (state) {
+    case 'connected':
+      return (
+        <Badge variant="healthy" className={className}>
+          Connected
+        </Badge>
+      );
+    case 'disconnected':
+      return (
+        <Badge variant="destructive" className={className}>
+          Disconnected
+        </Badge>
+      );
+    case 'connecting':
+      return (
+        <span className="inline-flex items-center gap-1.5 text-xs text-neutral-400">
+          <Spinner size="sm" />
+          Connecting
+        </span>
+      );
+    case 'not-configured':
+      return (
+        <Badge variant="ghost" className={className}>
+          Not configured
+        </Badge>
+      );
+  }
+}

package/src/console/danger-action-card.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+import { Card, CardContent } from '../primitives/card';
+
+export interface DangerActionCardProps {
+  actionLabel?: string;
+  className?: string;
+  description?: string;
+  onAction?: () => void;
+  stats?: React.ReactNode;
+  title: string;
+}
+
+export function DangerActionCard({
+  actionLabel = 'Confirm',
+  className,
+  description,
+  onAction,
+  stats,
+  title,
+}: DangerActionCardProps) {
+  return (
+    <Card className={cn('border-offline/20', className)}>
+      <CardContent className="flex flex-col gap-3">
+        <h3 className="text-lg font-semibold text-offline">{title}</h3>
+        {description ? (
+          <p className="text-sm text-neutral-500">{description}</p>
+        ) : null}
+        {stats ? <div>{stats}</div> : null}
+        {onAction ? (
+          <Button variant="destructive" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/src/console/empty-state.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+
+export interface EmptyStateProps {
+  action?: ReactNode;
+  className?: string;
+  icon?: ReactNode;
+  message: string;
+}
+
+export function EmptyState({
+  action,
+  className,
+  icon,
+  message,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-3 py-12',
+        className
+      )}
+    >
+      {icon ? <div className="text-neutral-500">{icon}</div> : null}
+      <p className="text-sm text-neutral-500">{message}</p>
+      {action ? <div>{action}</div> : null}
+    </div>
+  );
+}

package/src/console/filter-bar.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { cn } from '../lib/cn';
+import type { FilterGroup } from '../lib/types';
+
+export type FilterBarProps = ComponentPropsWithoutRef<'div'> & {
+  groups: FilterGroup[];
+  searchValue?: string;
+  searchPlaceholder?: string;
+  onSearchChange?: (value: string) => void;
+  actions?: ReactNode;
+};
+
+const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(
+  (
+    {
+      className,
+      groups,
+      searchValue,
+      searchPlaceholder = 'Filter by client or actor...',
+      onSearchChange,
+      actions,
+      ...props
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        'px-5 py-3 border-b border-border flex items-center gap-4 flex-wrap',
+        className
+      )}
+      {...props}
+    >
+      {groups.map((group, i) => (
+        <FilterGroupSection key={i} group={group} showDivider={i > 0} />
+      ))}
+
+      {onSearchChange !== undefined && (
+        <input
+          className="bg-surface border border-border rounded-md font-mono text-[10px] text-foreground outline-none transition focus:border-flow placeholder:text-neutral-600 max-w-[200px] px-2.5 py-1"
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+      )}
+
+      {actions && (
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
+      )}
+    </div>
+  )
+);
+FilterBar.displayName = 'FilterBar';
+
+function FilterGroupSection({
+  group,
+  showDivider,
+}: {
+  group: FilterGroup;
+  showDivider: boolean;
+}) {
+  return (
+    <>
+      {showDivider && <div className="w-px h-4 bg-border" />}
+      <div className="flex items-center gap-1">
+        {group.label && (
+          <span className="font-mono text-[9px] text-neutral-500 mr-1">
+            {group.label}
+          </span>
+        )}
+        {group.options.map((opt) => (
+          <button
+            key={opt.id}
+            type="button"
+            onClick={() => group.onActiveChange(opt.id)}
+            className={cn(
+              'font-mono text-[10px] border rounded-sm px-2.5 py-0.5 cursor-pointer transition-all',
+              opt.id === group.activeId
+                ? 'text-white border-border-bright bg-white/[0.03]'
+                : 'text-neutral-500 border-transparent hover:text-neutral-300'
+            )}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export { FilterBar };

package/src/console/fleet-card.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { SyncClientNode } from '../lib/types';
+import { Badge } from '../primitives/badge';
+
+export type FleetCardProps = ComponentPropsWithoutRef<'div'> & {
+  client: SyncClientNode;
+  headSeq: number;
+  onEvict?: () => void;
+};
+
+function getLagColor(lag: number) {
+  if (lag === 0) return '#22c55e';
+  if (lag < 10) return '#f59e0b';
+  if (lag < 50) return '#f97316';
+  return '#ef4444';
+}
+
+const statusBadgeVariant = {
+  online: 'healthy',
+  syncing: 'syncing',
+  offline: 'offline',
+} as const;
+
+const modeBadgeVariant = {
+  realtime: 'flow',
+  polling: 'ghost',
+} as const;
+
+const FleetCard = forwardRef<HTMLDivElement, FleetCardProps>(
+  ({ className, client, headSeq, onEvict, ...props }, ref) => {
+    const lag = Math.max(0, headSeq - client.cursor);
+    const pct = Math.min(100, (client.cursor / headSeq) * 100);
+    const lagColor = getLagColor(lag);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'bg-panel border border-border rounded-lg hover:border-border-bright transition',
+          className
+        )}
+        style={{ borderLeft: `3px solid ${lagColor}` }}
+        {...props}
+      >
+        {/* Header */}
+        <div className="px-3.5 py-2 border-b border-border flex items-center justify-between">
+          <div className="flex items-center gap-2 min-w-0">
+            <span
+              className="font-mono text-[11px] text-white truncate"
+              title={client.id}
+            >
+              {client.id.length > 14
+                ? `${client.id.substring(0, 14)}\u2026`
+                : client.id}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5 flex-shrink-0">
+            <Badge variant={statusBadgeVariant[client.status]}>
+              {client.status}
+            </Badge>
+            <Badge variant={modeBadgeVariant[client.mode]}>{client.mode}</Badge>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="p-3 space-y-3">
+          {/* Progress bar */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="font-mono text-[9px] text-neutral-600">
+                #{client.cursor.toLocaleString()}
+              </span>
+              <span className="font-mono text-[9px] text-neutral-600">
+                #{headSeq.toLocaleString()}
+              </span>
+            </div>
+            <div className="h-1 rounded-full bg-surface">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{ width: `${pct}%`, background: lagColor }}
+              />
+            </div>
+            <div
+              className="font-mono text-[9px] mt-1"
+              style={{ color: lagColor }}
+            >
+              {lag === 0 ? 'Caught up' : `${lag} behind`}
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="space-y-1">
+            <DetailRow label="Actor" value={client.actor} />
+            <DetailRow label="Dialect" value={client.dialect} />
+            <DetailRow label="Last seen" value={client.lastSeen} />
+            <div className="flex justify-between items-start">
+              <span className="font-mono text-[9px] text-neutral-600">
+                Scopes
+              </span>
+              <div className="flex gap-1 flex-wrap justify-end">
+                {client.scopes.slice(0, 2).map((s) => (
+                  <Badge key={s} variant="ghost">
+                    {s}
+                  </Badge>
+                ))}
+                {client.scopes.length > 2 && (
+                  <span className="font-mono text-[9px] text-neutral-600">
+                    +{client.scopes.length - 2}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Evict button */}
+          {onEvict && (
+            <button
+              type="button"
+              onClick={onEvict}
+              className="w-full inline-flex items-center justify-center gap-1.5 rounded-md font-mono text-[9px] px-2 py-1 border border-offline/25 bg-offline/[0.04] text-offline hover:border-offline hover:bg-offline/[0.08] cursor-pointer transition-all"
+            >
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                viewBox="0 0 24 24"
+              >
+                <path d="M18.36 6.64a9 9 0 11-12.73 0" />
+                <line x1="12" y1="2" x2="12" y2="12" />
+              </svg>
+              Evict
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+FleetCard.displayName = 'FleetCard';
+
+function DetailRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between">
+      <span className="font-mono text-[9px] text-neutral-600">{label}</span>
+      <span className="font-mono text-[10px] text-neutral-400">{value}</span>
+    </div>
+  );
+}
+
+export { FleetCard };

package/src/console/handlers-table.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { type ComponentPropsWithoutRef, forwardRef } from 'react';
+import { cn } from '../lib/cn';
+import type { HandlerEntry } from '../lib/types';
+import { Badge } from '../primitives/badge';
+
+export type HandlersTableProps = ComponentPropsWithoutRef<'div'> & {
+  handlers: HandlerEntry[];
+  tableCount?: number;
+};
+
+const HandlersTable = forwardRef<HTMLDivElement, HandlersTableProps>(
+  ({ className, handlers, tableCount, ...props }, ref) => {
+    const count = tableCount ?? handlers.length;
+
+    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">
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-flow" />
+            <span className="font-mono text-[10px] text-neutral-500 uppercase tracking-widest">
+              Handlers
+            </span>
+          </div>
+          <span className="font-mono text-[10px] text-neutral-600">
+            {count} tables
+          </span>
+        </div>
+
+        {/* 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">
+          <span className="flex-1">Table</span>
+          <span className="w-[100px]">Depends On</span>
+          <span className="w-[70px] text-right">Chunk TTL</span>
+        </div>
+
+        {/* Rows */}
+        {handlers.map((h, i) => (
+          <div
+            key={h.table}
+            className={cn(
+              'font-mono text-[11px] leading-7 px-4 flex items-center gap-4 hover:bg-white/[0.015] transition-colors cursor-default',
+              i < handlers.length - 1 && 'border-b border-[#141414]'
+            )}
+          >
+            <span className="flex-1 text-white truncate">{h.table}</span>
+            <span className="w-[100px] truncate">
+              {h.dependsOn ? (
+                <Badge variant="ghost">{h.dependsOn}</Badge>
+              ) : (
+                <span className="text-neutral-600">&mdash;</span>
+              )}
+            </span>
+            <span className="w-[70px] text-right text-neutral-500 truncate">
+              {h.chunkTtl}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+);
+HandlersTable.displayName = 'HandlersTable';
+
+export { HandlersTable };

package/src/console/index.ts

@@ -0,0 +1,27 @@
+export * from './activity-bars';
+export * from './alerts-config';
+export * from './api-keys-table';
+export * from './bottom-bar';
+export * from './commit-table';
+export * from './connection-form';
+export * from './connection-status-badge';
+export * from './danger-action-card';
+export * from './empty-state';
+export * from './filter-bar';
+export * from './fleet-card';
+export * from './handlers-table';
+export * from './kpi-card';
+export * from './kpi-strip';
+export * from './latency-percentiles';
+export * from './live-activity-feed';
+export * from './maintenance-card';
+export * from './page-header';
+export * from './panel-shell';
+export * from './preferences-panel';
+export * from './section-card';
+export * from './stream-log';
+export * from './sync-horizon';
+export * from './sync-lag-bar';
+export * from './sync-state-badge';
+export * from './topology-card';
+export * from './topology-hero';

package/src/console/kpi-card.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/cn';
+import { Card, CardContent } from '../primitives/card';
+
+export interface KpiCardProps {
+  className?: string;
+  label: ReactNode;
+  meta?: ReactNode;
+  tone?: 'accent' | 'destructive' | 'info' | 'muted' | 'success' | 'warning';
+  value: ReactNode;
+}
+
+const toneColorMap: Record<NonNullable<KpiCardProps['tone']>, string> = {
+  success: 'text-healthy',
+  warning: 'text-syncing',
+  destructive: 'text-offline',
+  info: 'text-flow',
+  accent: 'text-relay',
+  muted: 'text-neutral-500',
+};
+
+export function KpiCard({
+  className,
+  label,
+  meta,
+  tone = 'muted',
+  value,
+}: KpiCardProps) {
+  return (
+    <Card className={className}>
+      <CardContent className="flex flex-col gap-1">
+        <span className="text-xs font-mono uppercase tracking-wider text-neutral-500">
+          {label}
+        </span>
+        <span
+          className={cn('text-2xl font-bold tabular-nums', toneColorMap[tone])}
+        >
+          {value}
+        </span>
+        {meta ? <span className="text-xs text-neutral-500">{meta}</span> : null}
+      </CardContent>
+    </Card>
+  );
+}