@syncular/console 0.0.0

package/src/layout.tsx

@@ -0,0 +1,240 @@
+import {
+  BottomBar,
+  Button,
+  ConnectionStatusBadge,
+  Input,
+  NavPill,
+  NavPillGroup,
+  SyncularBrand,
+  TopNavigation,
+} from '@syncular/ui';
+import { Link, Outlet, useRouterState } from '@tanstack/react-router';
+import { Settings } from 'lucide-react';
+import { useMemo } from 'react';
+import { useConnection } from './hooks/ConnectionContext';
+import { useStats } from './hooks/useConsoleApi';
+import { useInstanceContext } from './hooks/useInstanceContext';
+import { usePartitionContext } from './hooks/usePartitionContext';
+import { usePreferences } from './hooks/usePreferences';
+
+interface ConsoleLayoutProps {
+  basePath?: string;
+}
+
+type ConsoleNavSuffix = '' | '/stream' | '/fleet' | '/ops' | '/config';
+
+interface ConsoleNavItem {
+  suffix: ConsoleNavSuffix;
+  label: string;
+}
+
+const NAV_ITEMS: ConsoleNavItem[] = [
+  { suffix: '', label: 'Command' },
+  { suffix: '/stream', label: 'Stream' },
+  { suffix: '/fleet', label: 'Fleet' },
+  { suffix: '/ops', label: 'Ops' },
+  { suffix: '/config', label: 'Config' },
+];
+
+function normalizeBasePath(basePath?: string): string {
+  const value = basePath?.trim() ?? '';
+  if (!value || value === '/') return '';
+  const withSlash = value.startsWith('/') ? value : `/${value}`;
+  return withSlash.replace(/\/+$/g, '');
+}
+
+function resolvePath(basePath: string, suffix: ConsoleNavSuffix): string {
+  if (!basePath) return suffix || '/';
+  return suffix ? `${basePath}${suffix}` : basePath;
+}
+
+export function ConsoleLayout({ basePath }: ConsoleLayoutProps) {
+  const { connect, config, isConnected, isConnecting } = useConnection();
+  const { preferences } = usePreferences();
+  const { instanceId, rawInstanceId, setInstanceId, clearInstanceId } =
+    useInstanceContext();
+  const { partitionId, rawPartitionId, setPartitionId, clearPartitionId } =
+    usePartitionContext();
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+  const { data: stats } = useStats({
+    refetchIntervalMs: preferences.refreshInterval * 1000,
+    partitionId,
+    instanceId,
+  });
+
+  const normalizedBasePath = normalizeBasePath(basePath);
+  const resolvedNavItems = useMemo(
+    () =>
+      NAV_ITEMS.map((item) => ({
+        ...item,
+        id: resolvePath(normalizedBasePath, item.suffix),
+      })),
+    [normalizedBasePath]
+  );
+  const commandPath = resolvePath(normalizedBasePath, '');
+  const configPath = resolvePath(normalizedBasePath, '/config');
+
+  const connectionState = isConnecting
+    ? 'connecting'
+    : isConnected
+      ? 'connected'
+      : config
+        ? 'disconnected'
+        : 'not-configured';
+
+  const activeId =
+    resolvedNavItems.find((item) =>
+      item.suffix === ''
+        ? pathname === commandPath || pathname === `${commandPath}/`
+        : pathname.startsWith(item.id)
+    )?.id ?? commandPath;
+
+  const bottomMetrics = stats
+    ? [
+        { label: 'HEAD', value: `#${stats.maxCommitSeq}` },
+        { label: 'COMMITS', value: `${stats.commitCount}` },
+        { label: 'CHANGES', value: `${stats.changeCount}` },
+        {
+          label: 'CLIENTS',
+          value: `${stats.activeClientCount}/${stats.clientCount}`,
+        },
+      ]
+    : [];
+
+  return (
+    <div className="h-screen bg-background text-foreground flex flex-col">
+      <TopNavigation
+        brand={
+          <Link to={commandPath}>
+            <SyncularBrand label="console" />
+          </Link>
+        }
+        center={
+          <NavPillGroup
+            items={resolvedNavItems}
+            activeId={activeId}
+            renderItem={(item, { active }) => (
+              <Link key={item.id} to={item.id}>
+                <NavPill active={active}>{item.label}</NavPill>
+              </Link>
+            )}
+          />
+        }
+        right={
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
+              <span className="font-mono text-[9px] text-neutral-500 uppercase tracking-wide">
+                Instance
+              </span>
+              <Input
+                variant="mono"
+                value={rawInstanceId}
+                onChange={(event) => setInstanceId(event.target.value)}
+                onBlur={(event) => setInstanceId(event.target.value.trim())}
+                placeholder="all"
+                className="h-7 w-[110px] px-2 py-1"
+              />
+              {instanceId ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-[10px]"
+                  onClick={clearInstanceId}
+                >
+                  All
+                </Button>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="font-mono text-[9px] text-neutral-500 uppercase tracking-wide">
+                Partition
+              </span>
+              <Input
+                variant="mono"
+                value={rawPartitionId}
+                onChange={(event) => setPartitionId(event.target.value)}
+                onBlur={(event) => setPartitionId(event.target.value.trim())}
+                placeholder="all"
+                className="h-7 w-[110px] px-2 py-1"
+              />
+              {partitionId ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-[10px]"
+                  onClick={clearPartitionId}
+                >
+                  All
+                </Button>
+              ) : null}
+            </div>
+            <ConnectionStatusBadge state={connectionState} />
+            <Link to={configPath}>
+              <Button
+                variant={pathname === configPath ? 'secondary' : 'ghost'}
+                size="icon"
+              >
+                <Settings />
+              </Button>
+            </Link>
+          </div>
+        }
+      />
+
+      <main className="flex-1 overflow-auto pt-[42px] pb-[32px]">
+        <div className="min-h-full">
+          {isConnected || pathname === configPath ? (
+            <div key={pathname} style={{ animation: 'pageIn 0.3s ease-out' }}>
+              <Outlet />
+            </div>
+          ) : (
+            <NotConnectedFallback
+              configPath={configPath}
+              hasSavedConfig={Boolean(config)}
+              isConnecting={isConnecting}
+              onConnect={() => {
+                void connect();
+              }}
+            />
+          )}
+        </div>
+      </main>
+
+      {isConnected && (
+        <BottomBar isLive={isConnected} metrics={bottomMetrics} uptime="--" />
+      )}
+    </div>
+  );
+}
+
+function NotConnectedFallback({
+  configPath,
+  hasSavedConfig,
+  isConnecting,
+  onConnect,
+}: {
+  configPath: string;
+  hasSavedConfig: boolean;
+  isConnecting: boolean;
+  onConnect: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16">
+      <p className="mb-4 text-foreground-muted">
+        Not connected to a @syncular server
+      </p>
+      <div className="flex items-center gap-2">
+        {hasSavedConfig && (
+          <Button variant="default" onClick={onConnect} disabled={isConnecting}>
+            {isConnecting ? 'Connecting...' : 'Connect'}
+          </Button>
+        )}
+        <Link to={configPath}>
+          <Button variant="link">Configure connection</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/lib/api.ts

@@ -0,0 +1,26 @@
+/**
+ * Console API client - uses generated types from @syncular/transport-http
+ */
+
+import { createApiClient, type SyncClient } from '@syncular/transport-http';
+
+export interface ConnectionConfig {
+  serverUrl: string;
+  token: string;
+}
+
+export function createConsoleClient(config: ConnectionConfig): SyncClient {
+  return createApiClient({
+    baseUrl: config.serverUrl,
+    getHeaders: () => ({ Authorization: `Bearer ${config.token}` }),
+  });
+}
+
+export async function testConnection(client: SyncClient): Promise<boolean> {
+  try {
+    const { error } = await client.GET('/console/stats');
+    return !error;
+  } catch {
+    return false;
+  }
+}

package/src/lib/topology.ts

@@ -0,0 +1,102 @@
+import type { SyncClient } from '@syncular/ui';
+import type { ConsoleClient, SyncStats } from './types';
+
+interface TopologyAdapterOptions {
+  maxNodes?: number;
+}
+
+const TYPE_HINTS: Array<{ hint: string; type: string }> = [
+  { hint: 'ios', type: 'mobile' },
+  { hint: 'android', type: 'mobile' },
+  { hint: 'mobile', type: 'mobile' },
+  { hint: 'tablet', type: 'tablet' },
+  { hint: 'desktop', type: 'desktop' },
+  { hint: 'mac', type: 'desktop' },
+  { hint: 'windows', type: 'desktop' },
+  { hint: 'linux', type: 'desktop' },
+  { hint: 'browser', type: 'browser' },
+  { hint: 'web', type: 'browser' },
+  { hint: 'server', type: 'server' },
+  { hint: 'api', type: 'server' },
+  { hint: 'iot', type: 'iot' },
+  { hint: 'sensor', type: 'iot' },
+];
+
+function inferType(clientId: string): string {
+  const lowerId = clientId.toLowerCase();
+
+  for (const hint of TYPE_HINTS) {
+    if (lowerId.includes(hint.hint)) {
+      return hint.type;
+    }
+  }
+
+  return 'client';
+}
+
+function inferDialect(clientId: string): string {
+  const lower = clientId.toLowerCase();
+  if (lower.includes('pglite')) return 'PGlite';
+  if (lower.includes('sqlite') || lower.includes('wa-sqlite')) return 'SQLite';
+  if (lower.includes('postgres') || lower.includes('pg')) return 'PostgreSQL';
+  return 'unknown';
+}
+
+function inferLagCommitCount(
+  client: ConsoleClient,
+  stats: SyncStats | undefined
+): number {
+  if (typeof client.lagCommitCount === 'number') {
+    return Math.max(0, client.lagCommitCount);
+  }
+  return stats ? Math.max(0, stats.maxCommitSeq - client.cursor) : 0;
+}
+
+function inferStatus(
+  client: ConsoleClient,
+  lagCommitCount: number
+): SyncClient['status'] {
+  if (client.activityState === 'stale') {
+    return 'offline';
+  }
+
+  if (lagCommitCount > 0) {
+    return 'syncing';
+  }
+
+  return 'online';
+}
+
+function createDisplayId(clientId: string, index: number): string {
+  if (clientId.length <= 16) {
+    return clientId;
+  }
+
+  const prefix = clientId.slice(0, 12);
+  return `${prefix}-${index + 1}`;
+}
+
+export function adaptConsoleClientsToTopology(
+  clients: ConsoleClient[],
+  stats?: SyncStats,
+  options: TopologyAdapterOptions = {}
+): SyncClient[] {
+  const maxNodes = options.maxNodes ?? 10;
+
+  return clients.slice(0, maxNodes).map((client, index) => {
+    const lagCommitCount = inferLagCommitCount(client, stats);
+    const status = inferStatus(client, lagCommitCount);
+
+    return {
+      id: createDisplayId(client.clientId, index),
+      type: inferType(client.clientId),
+      status,
+      cursor: Math.max(0, client.cursor),
+      actor: client.actorId,
+      mode: client.connectionMode,
+      dialect: inferDialect(client.clientId),
+      scopes: Object.keys(client.effectiveScopes || {}),
+      lastSeen: client.updatedAt,
+    };
+  });
+}

package/src/lib/types.ts

@@ -0,0 +1,228 @@
+/**
+ * Console API types - derived from OpenAPI spec
+ */
+
+export type ApiKeyType = 'relay' | 'proxy' | 'admin';
+
+export interface ConsoleApiKey {
+  keyId: string;
+  keyPrefix: string;
+  name: string;
+  keyType: ApiKeyType;
+  scopeKeys: string[];
+  actorId: string | null;
+  createdAt: string;
+  expiresAt: string | null;
+  lastUsedAt: string | null;
+  revokedAt: string | null;
+}
+
+export interface ConsoleApiKeyBulkRevokeResponse {
+  requestedCount: number;
+  revokedCount: number;
+  alreadyRevokedCount: number;
+  notFoundCount: number;
+  revokedKeyIds: string[];
+  alreadyRevokedKeyIds: string[];
+  notFoundKeyIds: string[];
+}
+
+export interface ConsoleCommitListItem {
+  commitSeq: number;
+  actorId: string;
+  clientId: string;
+  clientCommitId: string;
+  createdAt: string;
+  changeCount: number;
+  affectedTables: string[];
+  instanceId?: string;
+  federatedCommitId?: string;
+  localCommitSeq?: number;
+}
+
+export interface ConsoleChange {
+  changeId: number;
+  table: string;
+  rowId: string;
+  op: 'upsert' | 'delete';
+  rowJson: unknown | null;
+  rowVersion: number | null;
+  scopes: Record<string, unknown>;
+}
+
+export interface ConsoleCommitDetail extends ConsoleCommitListItem {
+  changes: ConsoleChange[];
+}
+
+export interface ConsoleClient {
+  clientId: string;
+  actorId: string;
+  cursor: number;
+  lagCommitCount: number;
+  connectionPath: 'direct' | 'relay';
+  connectionMode: 'polling' | 'realtime';
+  realtimeConnectionCount: number;
+  isRealtimeConnected: boolean;
+  activityState: 'active' | 'idle' | 'stale';
+  lastRequestAt: string | null;
+  lastRequestType: 'push' | 'pull' | null;
+  lastRequestOutcome: string | null;
+  effectiveScopes: Record<string, unknown>;
+  updatedAt: string;
+  instanceId?: string;
+  federatedClientId?: string;
+}
+
+export interface ConsoleHandler {
+  table: string;
+  dependsOn?: string[];
+  snapshotChunkTtlMs?: number;
+}
+
+export interface ConsoleRequestEvent {
+  eventId: number;
+  partitionId: string;
+  requestId: string;
+  traceId: string | null;
+  spanId: string | null;
+  eventType: 'push' | 'pull';
+  syncPath: 'http-combined' | 'ws-push';
+  transportPath: 'direct' | 'relay';
+  actorId: string;
+  clientId: string;
+  statusCode: number;
+  outcome: string;
+  responseStatus: string;
+  errorCode: string | null;
+  durationMs: number;
+  commitSeq: number | null;
+  operationCount: number | null;
+  rowCount: number | null;
+  subscriptionCount: number | null;
+  scopesSummary: Record<string, string | string[]> | null;
+  tables: string[];
+  errorMessage: string | null;
+  payloadRef: string | null;
+  createdAt: string;
+  instanceId?: string;
+  federatedEventId?: string;
+  localEventId?: number;
+}
+
+export interface ConsoleRequestPayload {
+  payloadRef: string;
+  partitionId: string;
+  requestPayload: unknown;
+  responsePayload: unknown | null;
+  createdAt: string;
+  instanceId?: string;
+  federatedEventId?: string;
+  localEventId?: number;
+}
+
+export interface ConsoleTimelineItem {
+  type: 'commit' | 'event';
+  timestamp: string;
+  commit: ConsoleCommitListItem | null;
+  event: ConsoleRequestEvent | null;
+  instanceId?: string;
+  federatedTimelineId?: string;
+  localCommitSeq?: number | null;
+  localEventId?: number | null;
+}
+
+export type ConsoleOperationType =
+  | 'prune'
+  | 'compact'
+  | 'notify_data_change'
+  | 'evict_client';
+
+export interface ConsoleOperationEvent {
+  operationId: number;
+  operationType: ConsoleOperationType;
+  consoleUserId: string | null;
+  partitionId: string | null;
+  targetClientId: string | null;
+  requestPayload: unknown | null;
+  resultPayload: unknown | null;
+  createdAt: string;
+  instanceId?: string;
+  federatedOperationId?: string;
+  localOperationId?: number;
+}
+
+export interface ConsoleNotifyDataChangeResponse {
+  commitSeq: number;
+  tables: string[];
+  deletedChunks: number;
+}
+
+export interface SyncStats {
+  commitCount: number;
+  changeCount: number;
+  minCommitSeq: number;
+  maxCommitSeq: number;
+  clientCount: number;
+  activeClientCount: number;
+  minActiveClientCursor: number | null;
+  maxActiveClientCursor: number | null;
+  partial?: boolean;
+  failedInstances?: Array<{
+    instanceId: string;
+    reason: string;
+    status?: number;
+  }>;
+  minCommitSeqByInstance?: Record<string, number>;
+  maxCommitSeqByInstance?: Record<string, number>;
+}
+
+export interface PaginatedResponse<T> {
+  items: T[];
+  total: number;
+  offset: number;
+  limit: number;
+}
+
+// Time-series types
+export type TimeseriesInterval = 'minute' | 'hour' | 'day';
+export type TimeseriesRange = '1h' | '6h' | '24h' | '7d' | '30d';
+
+export interface TimeseriesBucket {
+  timestamp: string;
+  pushCount: number;
+  pullCount: number;
+  errorCount: number;
+  avgLatencyMs: number;
+}
+
+export interface TimeseriesStatsResponse {
+  buckets: TimeseriesBucket[];
+  interval: TimeseriesInterval;
+  range: TimeseriesRange;
+}
+
+// Latency percentiles types
+export interface LatencyPercentiles {
+  p50: number;
+  p90: number;
+  p99: number;
+}
+
+export interface LatencyStatsResponse {
+  push: LatencyPercentiles;
+  pull: LatencyPercentiles;
+  range: TimeseriesRange;
+}
+
+// Live events types
+export interface LiveEvent {
+  type:
+    | 'push'
+    | 'pull'
+    | 'commit'
+    | 'client_update'
+    | 'instance_error'
+    | 'error';
+  timestamp: string;
+  data: Record<string, unknown>;
+}

package/src/mount.tsx

@@ -0,0 +1,39 @@
+import { StrictMode } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { App } from './App';
+import './styles/globals.css';
+
+interface MountSyncularConsoleOptions {
+  strictMode?: boolean;
+}
+
+function resolveContainer(containerOrSelector: Element | string): Element {
+  if (typeof containerOrSelector !== 'string') {
+    return containerOrSelector;
+  }
+
+  const container = document.querySelector(containerOrSelector);
+  if (!container) {
+    throw new Error(
+      `Unable to mount console: ${containerOrSelector} not found`
+    );
+  }
+
+  return container;
+}
+
+export function mountSyncularConsoleApp(
+  containerOrSelector: Element | string,
+  options: MountSyncularConsoleOptions = {}
+): Root {
+  const root = createRoot(resolveContainer(containerOrSelector));
+  const app = <App />;
+
+  if (options.strictMode === false) {
+    root.render(app);
+    return root;
+  }
+
+  root.render(<StrictMode>{app}</StrictMode>);
+  return root;
+}