@syncular/console 0.0.4-26 → 0.0.6-100

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;
@@ -129,7 +243,6 @@ export function useLiveEvents(
           : baseUrl.pathname;
         baseUrl.pathname = `${normalizedPath}/console/events/live`;
         baseUrl.search = '';
-        baseUrl.searchParams.set('token', config.token);
         if (lastEventTimestampRef.current) {
           baseUrl.searchParams.set('since', lastEventTimestampRef.current);
         }
@@ -152,8 +265,21 @@ export function useLiveEvents(
           return;
         }
         reconnectAttemptsRef.current = 0;
-        markActivity();
         setError(null);
+        setConnectionState('connecting');
+        setIsConnected(false);
+
+        try {
+          ws.send(
+            JSON.stringify({
+              type: 'auth',
+              token: config.token,
+            })
+          );
+        } catch {
+          ws.close();
+          return;
+        }
 
         clearStaleInterval();
         staleCheckIntervalRef.current = setInterval(() => {
@@ -190,7 +316,19 @@ export function useLiveEvents(
           markActivity();
 
           // Skip control events
-          if (eventType === 'connected' || eventType === 'heartbeat') {
+          if (
+            eventType === 'connected' ||
+            eventType === 'heartbeat' ||
+            eventType === 'auth_required'
+          ) {
+            return;
+          }
+          if (eventType === 'error') {
+            const message =
+              typeof data.message === 'string'
+                ? data.message
+                : 'Live events authentication failed';
+            setError(new Error(message));
             return;
           }
 

package/src/layout.tsx

@@ -1,15 +1,18 @@
 import {
+  Badge,
   BottomBar,
   Button,
   ConnectionStatusBadge,
   Input,
   NavPill,
   NavPillGroup,
+  navActionLinkClassName,
   SyncularBrand,
   TopNavigation,
 } from '@syncular/ui';
 import { Link, Outlet, useRouterState } from '@tanstack/react-router';
-import { Settings } from 'lucide-react';
+import { ArrowLeft, Settings } from 'lucide-react';
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import { useConnection } from './hooks/ConnectionContext';
 import { useStats } from './hooks/useConsoleApi';
@@ -20,9 +23,17 @@ import { SYNCULAR_CONSOLE_ROOT_CLASS } from './theme-scope';
 
 interface ConsoleLayoutProps {
   basePath?: string;
+  appHref?: string;
+  modeBadge?: ReactNode;
 }
 
-type ConsoleNavSuffix = '' | '/stream' | '/fleet' | '/ops' | '/config';
+type ConsoleNavSuffix =
+  | ''
+  | '/stream'
+  | '/fleet'
+  | '/ops'
+  | '/storage'
+  | '/config';
 
 interface ConsoleNavItem {
   suffix: ConsoleNavSuffix;
@@ -34,6 +45,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' },
 ];
 
@@ -49,7 +61,11 @@ function resolvePath(basePath: string, suffix: ConsoleNavSuffix): string {
   return suffix ? `${basePath}${suffix}` : basePath;
 }
 
-export function ConsoleLayout({ basePath }: ConsoleLayoutProps) {
+export function ConsoleLayout({
+  basePath,
+  appHref,
+  modeBadge,
+}: ConsoleLayoutProps) {
   const { connect, config, isConnected, isConnecting } = useConnection();
   const { preferences } = usePreferences();
   const { instanceId, rawInstanceId, setInstanceId, clearInstanceId } =
@@ -127,6 +143,14 @@ export function ConsoleLayout({ basePath }: ConsoleLayoutProps) {
         }
         right={
           <div className="flex items-center gap-2">
+            {modeBadge ? (
+              <Badge
+                variant="flow"
+                className="hidden md:inline-flex px-2 py-1 text-[10px]"
+              >
+                {modeBadge}
+              </Badge>
+            ) : null}
             <div className="flex items-center gap-1">
               <span className="font-mono text-[9px] text-neutral-500 uppercase tracking-wide">
                 Instance
@@ -179,14 +203,20 @@ export function ConsoleLayout({ basePath }: ConsoleLayoutProps) {
                 variant={pathname === configPath ? 'secondary' : 'ghost'}
                 size="icon"
               >
-                <Settings />
+                <Settings className="h-3 w-3" />
               </Button>
             </Link>
+            {appHref ? (
+              <a href={appHref} className={navActionLinkClassName}>
+                <ArrowLeft className="h-3 w-3" />
+                Go to app
+              </a>
+            ) : null}
           </div>
         }
       />
 
-      <main className="flex-1 overflow-auto pt-[42px] pb-[32px]">
+      <main className="flex-1 overflow-auto pb-[32px]">
         <div className="min-h-full">
           {isConnected || pathname === configPath ? (
             <div key={pathname} style={{ animation: 'pageIn 0.3s ease-out' }}>

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

@@ -7,6 +7,7 @@ interface MountSyncularConsoleOptions {
   strictMode?: boolean;
   basePath?: SyncularConsoleProps['basePath'];
   defaultConfig?: SyncularConsoleProps['defaultConfig'];
+  autoConnect?: SyncularConsoleProps['autoConnect'];
 }
 
 function resolveContainer(containerOrSelector: Element | string): Element {
@@ -33,7 +34,11 @@ export function mountSyncularConsoleApp(
 
   const root = createRoot(container);
   const app = (
-    <App basePath={options.basePath} defaultConfig={options.defaultConfig} />
+    <App
+      basePath={options.basePath}
+      defaultConfig={options.defaultConfig}
+      autoConnect={options.autoConnect}
+    />
   );
 
   if (options.strictMode === false) {

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>
   );
 }
@@ -79,15 +80,24 @@ function ConnectionTab() {
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    const urlToken = params.get('token');
     const urlServer = params.get('server');
+    let shouldReplaceUrl = false;
 
-    if (urlToken) {
-      setToken(urlToken);
-      window.history.replaceState({}, '', window.location.pathname);
-    }
     if (urlServer) {
       setServerUrl(urlServer);
+      params.delete('server');
+      shouldReplaceUrl = true;
+    }
+    if (params.has('token')) {
+      params.delete('token');
+      shouldReplaceUrl = true;
+    }
+    if (shouldReplaceUrl) {
+      const nextQuery = params.toString();
+      const nextUrl = nextQuery
+        ? `${window.location.pathname}?${nextQuery}`
+        : window.location.pathname;
+      window.history.replaceState({}, '', nextUrl);
     }
   }, []);
 
@@ -554,7 +564,7 @@ function ApiKeysTab() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>
+                <TableHead className="w-[28px]">
                   <Checkbox
                     checked={allSelectableChecked}
                     indeterminate={
@@ -572,16 +582,15 @@ function ApiKeysTab() {
                     aria-label="Select all active keys"
                   />
                 </TableHead>
-                <TableHead>NAME</TableHead>
-                <TableHead>TYPE</TableHead>
-                <TableHead>KEY PREFIX</TableHead>
-                <TableHead>ACTOR</TableHead>
-                <TableHead>SCOPES</TableHead>
-                <TableHead>CREATED</TableHead>
-                <TableHead>LAST USED</TableHead>
-                <TableHead>EXPIRES</TableHead>
-                <TableHead>STATUS</TableHead>
-                <TableHead>ACTIONS</TableHead>
+                <TableHead className="w-[100px]">NAME</TableHead>
+                <TableHead className="w-[55px]">TYPE</TableHead>
+                <TableHead className="w-[90px]">KEY PREFIX</TableHead>
+                <TableHead className="w-[80px]">ACTOR</TableHead>
+                <TableHead className="w-[100px]">SCOPES</TableHead>
+                <TableHead className="w-[120px]">CREATED</TableHead>
+                <TableHead className="w-[120px]">LAST USED</TableHead>
+                <TableHead className="w-[120px]">EXPIRES</TableHead>
+                <TableHead className="flex-1">STATUS</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -592,8 +601,8 @@ function ApiKeysTab() {
                 );
 
                 return (
-                  <TableRow key={apiKey.keyId}>
-                    <TableCell>
+                  <TableRow key={apiKey.keyId} className="group relative">
+                    <TableCell className="w-[28px]">
                       <Checkbox
                         checked={selectedKeyIds.includes(apiKey.keyId)}
                         onCheckedChange={(checked) => {
@@ -609,8 +618,10 @@ function ApiKeysTab() {
                         disabled={apiKey.revokedAt !== null}
                       />
                     </TableCell>
-                    <TableCell className="font-medium">{apiKey.name}</TableCell>
-                    <TableCell>
+                    <TableCell className="w-[100px] font-medium">
+                      {apiKey.name}
+                    </TableCell>
+                    <TableCell className="w-[55px]">
                       <Badge
                         variant={
                           apiKey.keyType === 'admin'
@@ -623,63 +634,60 @@ function ApiKeysTab() {
                         {apiKey.keyType}
                       </Badge>
                     </TableCell>
-                    <TableCell>
+                    <TableCell className="w-[90px]">
                       <code className="font-mono text-[11px]">
                         {apiKey.keyPrefix}...
                       </code>
                     </TableCell>
-                    <TableCell className="text-neutral-500">
+                    <TableCell className="w-[80px] text-neutral-500">
                       {apiKey.actorId ?? '-'}
                     </TableCell>
-                    <TableCell className="max-w-[220px] text-neutral-500">
+                    <TableCell className="w-[100px] text-neutral-500">
                       <code className="font-mono text-[10px]">
                         {summarizeScopeKeys(apiKey.scopeKeys)}
                       </code>
                     </TableCell>
-                    <TableCell className="text-neutral-500">
+                    <TableCell className="w-[120px] text-neutral-500">
                       {formatOptionalDateTime(apiKey.createdAt)}
                     </TableCell>
-                    <TableCell className="text-neutral-500">
+                    <TableCell className="w-[120px] text-neutral-500">
                       {formatOptionalDateTime(apiKey.lastUsedAt)}
                     </TableCell>
-                    <TableCell className="text-neutral-500">
+                    <TableCell className="w-[120px] text-neutral-500">
                       {formatOptionalDateTime(apiKey.expiresAt)}
                     </TableCell>
-                    <TableCell>
+                    <TableCell className="flex-1">
                       <Badge
                         variant={getApiKeyStatusBadgeVariant(lifecycleStatus)}
                       >
                         {lifecycleStatus}
                       </Badge>
                     </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-1">
-                        <Button
-                          variant="default"
-                          size="sm"
+                    {apiKey.revokedAt === null && (
+                      <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          type="button"
                           onClick={() => setStagingRotateKey(apiKey)}
-                          disabled={apiKey.revokedAt !== null}
+                          className="px-1.5 py-0.5 rounded text-[9px] font-mono text-neutral-600 hover:text-white hover:bg-white/[0.05] cursor-pointer transition-colors"
                         >
-                          Stage
-                        </Button>
-                        <Button
-                          variant="default"
-                          size="sm"
+                          stage
+                        </button>
+                        <button
+                          type="button"
                           onClick={() => setRotatingKeyId(apiKey.keyId)}
-                          disabled={apiKey.revokedAt !== null}
+                          className="px-1.5 py-0.5 rounded text-[9px] font-mono text-neutral-600 hover:text-white hover:bg-white/[0.05] cursor-pointer transition-colors"
                         >
-                          Rotate
-                        </Button>
-                        <Button
-                          variant="destructive"
-                          size="sm"
+                          rotate
+                        </button>
+                        <button
+                          type="button"
                           onClick={() => setRevokingKeyId(apiKey.keyId)}
-                          disabled={apiKey.revokedAt !== null}
+                          className="px-1.5 py-0.5 rounded text-[9px] font-mono text-neutral-600 hover:text-offline hover:bg-offline/10 cursor-pointer transition-colors"
                         >
-                          Revoke
-                        </Button>
+                          revoke
+                        </button>
                       </div>
-                    </TableCell>
+                    )}
                   </TableRow>
                 );
               })}

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 && (