@syncular/console 0.0.4-25 → 0.0.5-42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncular/console",
-  "version": "0.0.4-25",
+  "version": "0.0.5-42",
   "description": "Embeddable Syncular console UI",
   "license": "MIT",
   "author": "Benjamin Kniffler",
@@ -48,9 +48,18 @@
         "default": "./dist/browser-main.js"
       }
     },
+    "./server": {
+      "bun": "./src/server.ts",
+      "import": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.js"
+      }
+    },
     "./static": "./web-dist/index.html",
     "./static/*": "./web-dist/*",
-    "./styles.css": "./src/styles/globals.css"
+    "./styles.css": "./dist/styles.css",
+    "./styles.source.css": "./src/styles/globals.css",
+    "./static/console.css": "./web-dist/console.css"
   },
   "scripts": {
     "tsgo": "tsgo --noEmit",
@@ -59,12 +68,12 @@
     "release": "bunx syncular-publish"
   },
   "dependencies": {
-    "@syncular/observability-sentry": "0.0.4-25",
-    "@syncular/transport-http": "0.0.4-25",
-    "@syncular/ui": "0.0.4-25",
+    "@syncular/observability-sentry": "0.0.5-42",
+    "@syncular/transport-http": "0.0.5-42",
+    "@syncular/ui": "0.0.5-42",
     "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.159.5",
-    "lucide-react": "^0.563.0"
+    "@tanstack/react-router": "^1.161.3",
+    "lucide-react": "^0.575.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -72,12 +81,14 @@
   },
   "devDependencies": {
     "@syncular/config": "0.0.0",
+    "@tailwindcss/vite": "^4.2.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "bun-plugin-tailwind": "^0.1.2",
+    "@vitejs/plugin-react": "^5.1.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.2.0",
+    "vite": "^7.3.1"
   },
   "files": [
     "dist",

package/src/App.tsx

@@ -9,6 +9,7 @@ import {
   resolveConsoleBasePathFromMeta,
   resolveConsoleConnectionConfigFromMeta,
 } from './runtime-config';
+import { SYNCULAR_CONSOLE_ROOT_CLASS } from './theme-scope';
 
 const routerForTypes = createRouter({ routeTree, basepath: '/' });
 
@@ -61,5 +62,9 @@ function SyncularConsole(props: SyncularConsoleProps) {
 }
 
 export function App(props: SyncularConsoleProps) {
-  return <SyncularConsole {...props} />;
+  return (
+    <div className={SYNCULAR_CONSOLE_ROOT_CLASS}>
+      <SyncularConsole {...props} />
+    </div>
+  );
 }

package/src/browser-main.tsx

@@ -1,4 +1,4 @@
-import { initAndConfigureBrowserSentry } from '@syncular/observability-sentry';
+import { initAndConfigureBrowserSentry } from '@syncular/observability-sentry/browser';
 import { mountSyncularConsoleApp } from './mount';
 import { resolveConsoleBrowserSentryOptions } from './sentry';
 

package/src/hooks/ConnectionContext.tsx

@@ -113,24 +113,14 @@ export function ConnectionProvider({
 
       try {
         const client = createConsoleClient(normalizedConfig);
-        const ok = await testConnection(client);
-
-        if (ok) {
-          setState({
-            isConnected: true,
-            isConnecting: false,
-            client,
-            error: null,
-          });
-          return true;
-        }
+        await testConnection(client);
         setState({
-          isConnected: false,
+          isConnected: true,
           isConnecting: false,
-          client: null,
-          error: 'Failed to connect',
+          client,
+          error: null,
         });
-        return false;
+        return true;
       } catch (err) {
         setState({
           isConnected: false,

package/src/hooks/useConsoleApi.ts

@@ -7,6 +7,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import type {
   ConsoleApiKey,
   ConsoleApiKeyBulkRevokeResponse,
+  ConsoleBlobListResponse,
   ConsoleClient,
   ConsoleCommitDetail,
   ConsoleCommitListItem,
@@ -104,6 +105,8 @@ const queryKeys = {
     expiresWithinDays?: number;
     instanceId?: string;
   }) => ['console', 'api-keys', params] as const,
+  storage: (params?: Record<string, unknown>) =>
+    ['console', 'storage', params] as const,
 };
 
 function resolveRefetchInterval(
@@ -924,3 +927,103 @@ export function useStageRotateApiKeyMutation() {
     },
   });
 }
+
+// ---------------------------------------------------------------------------
+// Blob storage hooks
+// ---------------------------------------------------------------------------
+
+export function useBlobs(
+  options: {
+    prefix?: string;
+    cursor?: string;
+    limit?: number;
+    refetchIntervalMs?: number;
+  } = {}
+) {
+  const { config: connectionConfig } = useConnection();
+  return useQuery<ConsoleBlobListResponse>({
+    queryKey: queryKeys.storage({
+      prefix: options.prefix,
+      cursor: options.cursor,
+      limit: options.limit,
+    }),
+    queryFn: async () => {
+      if (!connectionConfig) throw new Error('Not connected');
+      const queryString = new URLSearchParams();
+      if (options.prefix) queryString.set('prefix', options.prefix);
+      if (options.cursor) queryString.set('cursor', options.cursor);
+      if (options.limit) queryString.set('limit', String(options.limit));
+      const response = await fetch(
+        buildConsoleUrl(
+          connectionConfig.serverUrl,
+          '/console/storage',
+          queryString
+        ),
+        {
+          method: 'GET',
+          headers: { Authorization: `Bearer ${connectionConfig.token}` },
+        }
+      );
+      if (!response.ok) throw new Error('Failed to list blobs');
+      return response.json();
+    },
+    enabled: !!connectionConfig,
+    refetchInterval: resolveRefetchInterval(options.refetchIntervalMs, 30000),
+  });
+}
+
+export function useDeleteBlobMutation() {
+  const { config: connectionConfig } = useConnection();
+  const queryClient = useQueryClient();
+  return useMutation<{ deleted: boolean }, Error, string>({
+    mutationFn: async (key: string) => {
+      if (!connectionConfig) throw new Error('Not connected');
+      const encodedKey = encodeURIComponent(key);
+      const response = await fetch(
+        buildConsoleUrl(
+          connectionConfig.serverUrl,
+          `/console/storage/${encodedKey}`,
+          new URLSearchParams()
+        ),
+        {
+          method: 'DELETE',
+          headers: { Authorization: `Bearer ${connectionConfig.token}` },
+        }
+      );
+      if (!response.ok) throw new Error('Failed to delete blob');
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['console', 'storage'] });
+    },
+  });
+}
+
+export function useBlobDownload() {
+  const { config: connectionConfig } = useConnection();
+  return async (key: string) => {
+    if (!connectionConfig) throw new Error('Not connected');
+    const encodedKey = encodeURIComponent(key);
+    const response = await fetch(
+      buildConsoleUrl(
+        connectionConfig.serverUrl,
+        `/console/storage/${encodedKey}/download`,
+        new URLSearchParams()
+      ),
+      {
+        method: 'GET',
+        headers: { Authorization: `Bearer ${connectionConfig.token}` },
+      }
+    );
+    if (!response.ok) throw new Error('Failed to download blob');
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = key.split('/').pop() || key;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+}

package/src/hooks/useLiveEvents.ts

@@ -3,7 +3,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import type { LiveEvent } from '../lib/types';
+import type { ConsoleRequestEvent, LiveEvent } from '../lib/types';
 import { useConnection } from './ConnectionContext';
 import { useInstanceContext } from './useInstanceContext';
 
@@ -35,6 +35,11 @@ interface UseLiveEventsResult {
   clearEvents: () => void;
 }
 
+function isServiceWorkerServerMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  return new URLSearchParams(window.location.search).get('swServer') === '1';
+}
+
 export function useLiveEvents(
   options: UseLiveEventsOptions = {}
 ): UseLiveEventsResult {
@@ -65,10 +70,12 @@ export function useLiveEvents(
   const reconnectAttemptsRef = useRef(0);
   const lastActivityAtRef = useRef(0);
   const lastEventTimestampRef = useRef<string | null>(null);
+  const lastEventIdRef = useRef<number | null>(null);
 
   const clearEvents = useCallback(() => {
     setEvents([]);
     lastEventTimestampRef.current = null;
+    lastEventIdRef.current = null;
   }, []);
 
   useEffect(() => {
@@ -80,6 +87,113 @@ export function useLiveEvents(
     const normalizedReplayLimit = Number.isFinite(replayLimit)
       ? Math.max(1, Math.min(500, Math.floor(replayLimit)))
       : 100;
+    const usePollingFallback =
+      isServiceWorkerServerMode() || typeof WebSocket === 'undefined';
+
+    if (usePollingFallback) {
+      setConnectionState('connecting');
+      setIsConnected(false);
+
+      let pollTimer: ReturnType<typeof setInterval> | null = null;
+      let isPolling = false;
+
+      const poll = async () => {
+        if (isCleanedUp || isPolling) return;
+        isPolling = true;
+
+        try {
+          const baseUrl = new URL(config.serverUrl, window.location.origin);
+          const normalizedPath = baseUrl.pathname.endsWith('/')
+            ? baseUrl.pathname.slice(0, -1)
+            : baseUrl.pathname;
+          baseUrl.pathname = `${normalizedPath}/console/events`;
+          baseUrl.search = '';
+          baseUrl.searchParams.set('limit', String(normalizedReplayLimit));
+          baseUrl.searchParams.set('offset', '0');
+          if (partitionId) {
+            baseUrl.searchParams.set('partitionId', partitionId);
+          }
+
+          const response = await fetch(baseUrl.toString(), {
+            headers: {
+              Authorization: `Bearer ${config.token}`,
+            },
+          });
+
+          if (!response.ok) {
+            throw new Error(`Live event polling failed (${response.status})`);
+          }
+
+          const payload = (await response.json()) as {
+            items?: ConsoleRequestEvent[];
+          };
+          const rows = Array.isArray(payload.items) ? payload.items : [];
+          const filtered = rows
+            .filter((row) =>
+              effectiveInstanceId
+                ? row.instanceId === effectiveInstanceId
+                : true
+            )
+            .sort((a, b) => a.eventId - b.eventId);
+
+          const previousLastId = lastEventIdRef.current ?? -1;
+          const newRows = filtered.filter(
+            (row) => row.eventId > previousLastId
+          );
+          if (newRows.length > 0) {
+            const mapped: LiveEvent[] = newRows
+              .map((row) => ({
+                type: row.eventType,
+                timestamp: row.createdAt,
+                data: row as unknown as Record<string, unknown>,
+              }))
+              .reverse();
+
+            setEvents((prev) => [...mapped, ...prev].slice(0, maxEvents));
+            const newest = newRows[newRows.length - 1]!;
+            lastEventIdRef.current = newest.eventId;
+            lastEventTimestampRef.current = newest.createdAt;
+          } else if (filtered.length > 0) {
+            const newest = filtered[filtered.length - 1]!;
+            lastEventIdRef.current = Math.max(
+              lastEventIdRef.current ?? -1,
+              newest.eventId
+            );
+            lastEventTimestampRef.current = newest.createdAt;
+          }
+
+          setError(null);
+          setIsConnected(true);
+          setConnectionState('connected');
+        } catch (err) {
+          if (!isCleanedUp) {
+            setIsConnected(false);
+            setConnectionState('disconnected');
+            setError(
+              err instanceof Error
+                ? err
+                : new Error('Live event polling failed')
+            );
+          }
+        } finally {
+          isPolling = false;
+        }
+      };
+
+      void poll();
+      pollTimer = setInterval(() => {
+        void poll();
+      }, 2_000);
+
+      return () => {
+        isCleanedUp = true;
+        if (pollTimer) {
+          clearInterval(pollTimer);
+        }
+        setIsConnected(false);
+        setConnectionState('disconnected');
+      };
+    }
 
     const clearReconnectTimeout = () => {
       if (!reconnectTimeoutRef.current) return;

package/src/index.ts

@@ -7,3 +7,4 @@ export * from './pages';
 export * from './routeTree';
 export * from './runtime-config';
 export * from './sentry';
+export * from './theme-scope';

package/src/layout.tsx

@@ -16,12 +16,19 @@ import { useStats } from './hooks/useConsoleApi';
 import { useInstanceContext } from './hooks/useInstanceContext';
 import { usePartitionContext } from './hooks/usePartitionContext';
 import { usePreferences } from './hooks/usePreferences';
+import { SYNCULAR_CONSOLE_ROOT_CLASS } from './theme-scope';
 
 interface ConsoleLayoutProps {
   basePath?: string;
 }
 
-type ConsoleNavSuffix = '' | '/stream' | '/fleet' | '/ops' | '/config';
+type ConsoleNavSuffix =
+  | ''
+  | '/stream'
+  | '/fleet'
+  | '/ops'
+  | '/storage'
+  | '/config';
 
 interface ConsoleNavItem {
   suffix: ConsoleNavSuffix;
@@ -33,6 +40,7 @@ const NAV_ITEMS: ConsoleNavItem[] = [
   { suffix: '/stream', label: 'Stream' },
   { suffix: '/fleet', label: 'Fleet' },
   { suffix: '/ops', label: 'Ops' },
+  { suffix: '/storage', label: 'Storage' },
   { suffix: '/config', label: 'Config' },
 ];
 
@@ -104,7 +112,9 @@ export function ConsoleLayout({ basePath }: ConsoleLayoutProps) {
     : [];
 
   return (
-    <div className="h-screen bg-background text-foreground flex flex-col">
+    <div
+      className={`${SYNCULAR_CONSOLE_ROOT_CLASS} h-screen bg-background text-foreground flex flex-col`}
+    >
       <TopNavigation
         brand={
           <Link to={commandPath}>

package/src/lib/api.ts

@@ -16,11 +16,44 @@ export function createConsoleClient(config: ConnectionConfig): SyncClient {
   });
 }
 
-export async function testConnection(client: SyncClient): Promise<boolean> {
+export async function testConnection(client: SyncClient): Promise<void> {
   try {
-    const { error } = await client.GET('/console/stats');
-    return !error;
-  } catch {
-    return false;
+    const { error, response } = await client.GET('/console/stats');
+    if (!error) return;
+
+    const statusCode = response.status;
+    let detail: string | null = null;
+    if (typeof error === 'string') {
+      detail = error;
+    } else if (error && typeof error === 'object') {
+      const errorRecord = error as Record<string, unknown>;
+      const nestedError = errorRecord.error;
+      const nestedMessage = errorRecord.message;
+      if (typeof nestedError === 'string' && nestedError.length > 0) {
+        detail = nestedError;
+      } else if (
+        typeof nestedMessage === 'string' &&
+        nestedMessage.length > 0
+      ) {
+        detail = nestedMessage;
+      } else {
+        try {
+          detail = JSON.stringify(errorRecord);
+        } catch {
+          detail = null;
+        }
+      }
+    }
+
+    throw new Error(
+      detail && detail.length > 0
+        ? `Console API /console/stats returned ${statusCode}: ${detail}`
+        : `Console API /console/stats returned ${statusCode}`
+    );
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error('Failed to connect to console API');
   }
 }

package/src/lib/types.ts

@@ -226,3 +226,20 @@ export interface LiveEvent {
   timestamp: string;
   data: Record<string, unknown>;
 }
+
+// ---------------------------------------------------------------------------
+// Blob storage
+// ---------------------------------------------------------------------------
+
+export interface ConsoleBlob {
+  key: string;
+  size: number;
+  uploaded: string;
+  httpMetadata?: { contentType?: string };
+}
+
+export interface ConsoleBlobListResponse {
+  items: ConsoleBlob[];
+  truncated: boolean;
+  cursor: string | null;
+}

package/src/mount.tsx

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { App, type SyncularConsoleProps } from './App';
+import { applyConsoleThemeScope } from './theme-scope';
 
 interface MountSyncularConsoleOptions {
   strictMode?: boolean;
@@ -27,7 +28,10 @@ export function mountSyncularConsoleApp(
   containerOrSelector: Element | string,
   options: MountSyncularConsoleOptions = {}
 ): Root {
-  const root = createRoot(resolveContainer(containerOrSelector));
+  const container = resolveContainer(containerOrSelector);
+  applyConsoleThemeScope(container);
+
+  const root = createRoot(container);
   const app = (
     <App basePath={options.basePath} defaultConfig={options.defaultConfig} />
   );

package/src/pages/Config.tsx

@@ -48,12 +48,13 @@ import type {
   ConsoleApiKeyBulkRevokeResponse,
 } from '../lib/types';
 
-export function Config() {
+export function Config({ children }: { children?: import('react').ReactNode }) {
   return (
     <div className="space-y-4 px-5 py-5">
       <ConnectionTab />
       <ApiKeysTab />
       <PreferencesTab />
+      {children}
     </div>
   );
 }

package/src/pages/Fleet.tsx

@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
   EmptyState,
-  FleetCard,
+  FleetTable,
   Pagination,
   PanelShell,
   Spinner,
@@ -99,7 +99,11 @@ function mapToSyncNode(
   };
 }
 
-export function Fleet() {
+export function Fleet({
+  emptyState,
+}: {
+  emptyState?: import('react').ReactNode;
+} = {}) {
   const [page, setPage] = useState(1);
   const [evictingClientId, setEvictingClientId] = useState<string | null>(null);
   const { preferences } = usePreferences();
@@ -167,22 +171,20 @@ export function Fleet() {
       )}
 
       {syncNodes.length === 0 ? (
-        <PanelShell>
-          <EmptyState message="No clients yet" />
-        </PanelShell>
+        (emptyState ?? (
+          <PanelShell>
+            <EmptyState message="No clients yet" />
+          </PanelShell>
+        ))
       ) : (
-        <div className="grid grid-cols-3 gap-3">
-          {syncNodes.map((node, i) => (
-            <FleetCard
-              key={node.id}
-              client={node}
-              headSeq={headSeq}
-              onEvict={() =>
-                setEvictingClientId(data?.items[i]?.clientId ?? node.id)
-              }
-            />
-          ))}
-        </div>
+        <FleetTable
+          clients={syncNodes}
+          headSeq={headSeq}
+          onEvict={(clientId) => {
+            const item = data?.items.find((c) => c.clientId === clientId);
+            setEvictingClientId(item?.clientId ?? clientId);
+          }}
+        />
       )}
 
       {totalPages > 1 && (

package/src/pages/Ops.tsx

@@ -684,8 +684,10 @@ function OperationsAuditView({ partitionId }: { partitionId?: string }) {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {(data?.items ?? []).map((event) => (
-                <TableRow key={event.operationId}>
+              {(data?.items ?? []).map((event, index) => (
+                <TableRow
+                  key={`${event.operationId}:${event.createdAt}:${index}`}
+                >
                   <TableCell className="whitespace-nowrap text-xs text-neutral-400">
                     {formatDateTime(event.createdAt)}
                   </TableCell>