@syncular/console 0.0.5-42 → 0.0.6-101

package/src/hooks/ConnectionContext.tsx

@@ -10,6 +10,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -17,7 +18,58 @@ import {
   createConsoleClient,
   testConnection,
 } from '../lib/api';
-import { useLocalStorage } from './useLocalStorage';
+
+export type ConnectionStorageMode = 'memory' | 'session' | 'local';
+
+const CONNECTION_STORAGE_KEY = 'sync-console-connection';
+
+function normalizeConfig(
+  config: ConnectionConfig | null | undefined
+): ConnectionConfig | null {
+  if (!config) return null;
+  const serverUrl = config.serverUrl?.trim() ?? '';
+  const token = config.token?.trim() ?? '';
+  if (!serverUrl || !token) return null;
+  return { serverUrl, token };
+}
+
+function getStorageForMode(mode: ConnectionStorageMode): Storage | null {
+  if (typeof window === 'undefined') return null;
+  if (mode === 'local') return window.localStorage;
+  if (mode === 'session') return window.sessionStorage;
+  return null;
+}
+
+function readStoredConfig(
+  mode: ConnectionStorageMode
+): ConnectionConfig | null {
+  const storage = getStorageForMode(mode);
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(CONNECTION_STORAGE_KEY);
+    if (!raw) return null;
+    return normalizeConfig(JSON.parse(raw) as ConnectionConfig);
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredConfig(
+  mode: ConnectionStorageMode,
+  config: ConnectionConfig | null
+): void {
+  const storage = getStorageForMode(mode);
+  if (!storage) return;
+  try {
+    if (!config) {
+      storage.removeItem(CONNECTION_STORAGE_KEY);
+      return;
+    }
+    storage.setItem(CONNECTION_STORAGE_KEY, JSON.stringify(config));
+  } catch {
+    // Ignore storage write errors.
+  }
+}
 
 interface ConnectionState {
   isConnected: boolean;
@@ -44,6 +96,8 @@ interface ConnectionContextValue {
 interface ConnectionProviderProps {
   children: ReactNode;
   defaultConfig?: ConnectionConfig | null;
+  autoConnect?: boolean;
+  storageMode?: ConnectionStorageMode;
 }
 
 const ConnectionContext = createContext<ConnectionContextValue | null>(null);
@@ -51,10 +105,35 @@ const ConnectionContext = createContext<ConnectionContextValue | null>(null);
 export function ConnectionProvider({
   children,
   defaultConfig = null,
+  autoConnect = false,
+  storageMode = 'session',
 }: ConnectionProviderProps) {
-  const [config, setConfigStorage] = useLocalStorage<ConnectionConfig | null>(
-    'sync-console-connection',
-    null
+  const [config, setConfigState] = useState<ConnectionConfig | null>(() =>
+    readStoredConfig(storageMode)
+  );
+
+  useEffect(() => {
+    const storedConfig = readStoredConfig(storageMode);
+    setConfigState(storedConfig);
+  }, [storageMode]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (storageMode !== 'local') {
+      window.localStorage.removeItem(CONNECTION_STORAGE_KEY);
+    }
+    if (storageMode === 'memory') {
+      window.sessionStorage.removeItem(CONNECTION_STORAGE_KEY);
+    }
+  }, [storageMode]);
+
+  const setConfigStorage = useCallback(
+    (nextConfig: ConnectionConfig | null) => {
+      const normalized = normalizeConfig(nextConfig);
+      setConfigState(normalized);
+      writeStoredConfig(storageMode, normalized);
+    },
+    [storageMode]
   );
 
   const [state, setState] = useState<ConnectionState>({
@@ -63,6 +142,7 @@ export function ConnectionProvider({
     error: null,
     client: null,
   });
+  const lastAutoConnectConfigKeyRef = useRef<string | null>(null);
 
   // Resolve initial config: saved config -> provided defaults
   useEffect(() => {
@@ -90,18 +170,16 @@ export function ConnectionProvider({
         return false;
       }
 
-      const normalizedConfig: ConnectionConfig = {
-        serverUrl: effectiveConfig.serverUrl?.trim() ?? '',
-        token: effectiveConfig.token?.trim() ?? '',
-      };
+      const normalizedConfig = normalizeConfig(effectiveConfig);
 
       // Validate config has required fields
-      if (!normalizedConfig.serverUrl) {
-        setState((s) => ({ ...s, error: 'Server URL is required' }));
-        return false;
-      }
-      if (!normalizedConfig.token) {
-        setState((s) => ({ ...s, error: 'Token is required' }));
+      if (!normalizedConfig) {
+        const hasServerUrl =
+          (effectiveConfig.serverUrl?.trim() ?? '').length > 0;
+        setState((s) => ({
+          ...s,
+          error: hasServerUrl ? 'Token is required' : 'Server URL is required',
+        }));
         return false;
       }
 
@@ -182,6 +260,32 @@ export function ConnectionProvider({
     [config, setConfig, state, connect, disconnect, clearError]
   );
 
+  useEffect(() => {
+    if (!autoConnect || state.isConnected || state.isConnecting) {
+      return;
+    }
+
+    const candidate = config ?? defaultConfig;
+    const key = normalizeConfigKey(candidate);
+    if (!candidate || !key) {
+      return;
+    }
+
+    if (lastAutoConnectConfigKeyRef.current === key) {
+      return;
+    }
+
+    lastAutoConnectConfigKeyRef.current = key;
+    void connect(candidate, { persistOverride: true });
+  }, [
+    autoConnect,
+    config,
+    defaultConfig,
+    state.isConnected,
+    state.isConnecting,
+    connect,
+  ]);
+
   return (
     <ConnectionContext.Provider value={value}>
       {children}
@@ -189,6 +293,18 @@ export function ConnectionProvider({
   );
 }
 
+function normalizeConfigKey(config: ConnectionConfig | null): string | null {
+  if (!config) {
+    return null;
+  }
+  const serverUrl = config.serverUrl?.trim() ?? '';
+  const token = config.token?.trim() ?? '';
+  if (!serverUrl || !token) {
+    return null;
+  }
+  return `${serverUrl}\u0000${token}`;
+}
+
 export function useConnection(): ConnectionContextValue {
   const context = useContext(ConnectionContext);
   if (!context) {

package/src/hooks/useLiveEvents.ts

@@ -243,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);
         }
@@ -266,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(() => {
@@ -304,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,6 +23,8 @@ import { SYNCULAR_CONSOLE_ROOT_CLASS } from './theme-scope';
 
 interface ConsoleLayoutProps {
   basePath?: string;
+  appHref?: string;
+  modeBadge?: ReactNode;
 }
 
 type ConsoleNavSuffix =
@@ -56,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 } =
@@ -134,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
@@ -186,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/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

@@ -80,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);
     }
   }, []);
 
@@ -555,7 +564,7 @@ function ApiKeysTab() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>
+                <TableHead className="w-[28px]">
                   <Checkbox
                     checked={allSelectableChecked}
                     indeterminate={
@@ -573,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>
@@ -593,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) => {
@@ -610,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'
@@ -624,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/Stream.tsx

@@ -164,8 +164,11 @@ export function Stream({ initialSelectedEntryId }: StreamProps = {}) {
   const { range, setRange } = useTimeRangeState();
   const pageSize = preferences.pageSize;
   const refreshIntervalMs = preferences.refreshInterval * 1000;
-  const traceUrlTemplate: string | undefined = import.meta.env
-    ?.VITE_CONSOLE_TRACE_URL_TEMPLATE;
+  const traceUrlTemplate: string | undefined = (
+    import.meta as ImportMeta & {
+      env?: { VITE_CONSOLE_TRACE_URL_TEMPLATE?: string };
+    }
+  ).env?.VITE_CONSOLE_TRACE_URL_TEMPLATE;
 
   const [viewMode, setViewMode] = useState<ViewMode>(() => {
     if (initialSelectedEntryId?.startsWith('#')) return 'commits';
@@ -268,7 +271,7 @@ export function Stream({ initialSelectedEntryId }: StreamProps = {}) {
         selectedEvent?.traceId ?? null,
         selectedEvent?.spanId ?? null
       ),
-    [selectedEvent?.spanId, selectedEvent?.traceId]
+    [selectedEvent?.spanId, selectedEvent?.traceId, traceUrlTemplate]
   );
 
   useEffect(() => {

package/src/static-server.ts

@@ -125,7 +125,7 @@ function renderIndexHtml(args: {
   const resolvedServerUrl = args.prefill?.serverUrl ?? '';
   const resolvedToken = args.prefill?.token ?? '';
 
-  return withMetaTag(
+  const withMeta = withMetaTag(
     withMetaTag(
       withMetaTag(args.template, CONSOLE_BASEPATH_META, resolvedBasePath),
       CONSOLE_SERVER_URL_META,
@@ -134,6 +134,17 @@ function renderIndexHtml(args: {
     CONSOLE_TOKEN_META,
     resolvedToken
   );
+
+  if (resolvedBasePath === '/') {
+    return withMeta;
+  }
+
+  const mountPrefix = resolvedBasePath.replace(/\/+$/g, '');
+  return withMeta.replace(
+    /(src|href)=("|')\/assets\/([^"']+)("|')/g,
+    (_match, attribute, openQuote, assetPath, closeQuote) =>
+      `${attribute}=${openQuote}${mountPrefix}/assets/${assetPath}${closeQuote}`
+  );
 }
 
 export function createConsoleStaticResponder(