@syncular/console 0.0.4-25 → 0.0.5-42

package/src/pages/Storage.tsx

@@ -0,0 +1,277 @@
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  Input,
+  SectionCard,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@syncular/ui';
+import { useState } from 'react';
+import {
+  useBlobDownload,
+  useBlobs,
+  useDeleteBlobMutation,
+} from '../hooks/useConsoleApi';
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / 1024 ** i;
+  return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+function formatDateTime(iso: string): string {
+  const parsed = Date.parse(iso);
+  if (!Number.isFinite(parsed)) return iso;
+  return new Date(parsed).toLocaleString();
+}
+
+export function Storage() {
+  const [prefixInput, setPrefixInput] = useState('');
+  const [activePrefix, setActivePrefix] = useState<string | undefined>(
+    undefined
+  );
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
+  const [cursorHistory, setCursorHistory] = useState<string[]>([]);
+  const [deletingKey, setDeletingKey] = useState<string | null>(null);
+
+  const { data, isLoading, error } = useBlobs({
+    prefix: activePrefix,
+    cursor,
+    limit: 100,
+  });
+  const deleteMutation = useDeleteBlobMutation();
+  const download = useBlobDownload();
+
+  function handleFilter() {
+    const trimmed = prefixInput.trim();
+    setActivePrefix(trimmed.length > 0 ? trimmed : undefined);
+    setCursor(undefined);
+    setCursorHistory([]);
+  }
+
+  function handleClearFilter() {
+    setPrefixInput('');
+    setActivePrefix(undefined);
+    setCursor(undefined);
+    setCursorHistory([]);
+  }
+
+  function handleNextPage() {
+    if (data?.cursor) {
+      setCursorHistory((prev) => [...prev, cursor ?? '']);
+      setCursor(data.cursor);
+    }
+  }
+
+  function handlePrevPage() {
+    setCursorHistory((prev) => {
+      const next = [...prev];
+      const prevCursor = next.pop();
+      setCursor(prevCursor && prevCursor.length > 0 ? prevCursor : undefined);
+      return next;
+    });
+  }
+
+  function handleDelete() {
+    if (!deletingKey) return;
+    deleteMutation.mutate(deletingKey, {
+      onSuccess: () => setDeletingKey(null),
+    });
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-4 px-5 py-5">
+        <div className="flex items-center justify-center h-[200px]">
+          <Spinner size="lg" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col gap-4 px-5 py-5">
+        <div className="flex items-center justify-center h-[200px]">
+          <p className="text-danger font-mono text-[11px]">
+            Failed to load storage items: {error.message}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const items = data?.items ?? [];
+
+  return (
+    <div className="flex flex-col gap-4 px-5 py-5">
+      <SectionCard
+        title="Storage"
+        actions={
+          <div className="flex items-center gap-2">
+            <Input
+              placeholder="Prefix filter..."
+              value={prefixInput}
+              onChange={(e) => setPrefixInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleFilter();
+              }}
+              className="h-7 w-48 text-xs"
+            />
+            <Button variant="default" size="sm" onClick={handleFilter}>
+              Filter
+            </Button>
+            {activePrefix && (
+              <Button variant="ghost" size="sm" onClick={handleClearFilter}>
+                Clear
+              </Button>
+            )}
+          </div>
+        }
+      >
+        {items.length === 0 ? (
+          <EmptyState
+            message={
+              activePrefix
+                ? `No storage items matching prefix "${activePrefix}".`
+                : 'No storage items found.'
+            }
+          />
+        ) : (
+          <>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Key</TableHead>
+                    <TableHead>Size</TableHead>
+                    <TableHead>Type</TableHead>
+                    <TableHead>Uploaded</TableHead>
+                    <TableHead>Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((blob) => (
+                    <TableRow key={blob.key}>
+                      <TableCell
+                        className="font-mono text-xs max-w-[320px]"
+                        title={blob.key}
+                      >
+                        {blob.key}
+                      </TableCell>
+                      <TableCell className="font-mono text-xs text-neutral-400 whitespace-nowrap">
+                        {formatFileSize(blob.size)}
+                      </TableCell>
+                      <TableCell>
+                        {blob.httpMetadata?.contentType ? (
+                          <Badge variant="ghost">
+                            {blob.httpMetadata.contentType}
+                          </Badge>
+                        ) : (
+                          <span className="text-neutral-500 text-xs">--</span>
+                        )}
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap text-xs text-neutral-400">
+                        {formatDateTime(blob.uploaded)}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => void download(blob.key)}
+                          >
+                            Download
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setDeletingKey(blob.key)}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Pagination */}
+            <div className="flex items-center justify-between px-2 py-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={cursorHistory.length === 0}
+                onClick={handlePrevPage}
+              >
+                Previous
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={!data?.truncated}
+                onClick={handleNextPage}
+              >
+                Next
+              </Button>
+            </div>
+          </>
+        )}
+      </SectionCard>
+
+      {/* Delete confirmation dialog */}
+      <Dialog
+        open={deletingKey !== null}
+        onOpenChange={() => setDeletingKey(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Storage Item</DialogTitle>
+          </DialogHeader>
+          <div className="px-5 py-4 flex flex-col gap-4">
+            <p className="font-mono text-[11px] text-neutral-300">
+              Are you sure you want to delete{' '}
+              <span className="font-mono text-white">{deletingKey}</span>?
+            </p>
+            <p className="font-mono text-[10px] text-neutral-500">
+              This action cannot be undone.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="default" onClick={() => setDeletingKey(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+            >
+              {deleteMutation.isPending ? (
+                <>
+                  <Spinner size="sm" /> Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/pages/index.ts

@@ -2,4 +2,5 @@ export * from './Command';
 export * from './Config';
 export * from './Fleet';
 export * from './Ops';
+export * from './Storage';
 export * from './Stream';

package/src/routeTree.ts

@@ -5,6 +5,7 @@ import { Route as indexRoute } from './routes/index';
 import { Route as investigateCommitRoute } from './routes/investigate-commit';
 import { Route as investigateEventRoute } from './routes/investigate-event';
 import { Route as opsRoute } from './routes/ops';
+import { Route as storageRoute } from './routes/storage';
 import { Route as streamRoute } from './routes/stream';
 
 export const routeTree = rootRoute.addChildren([
@@ -14,5 +15,6 @@ export const routeTree = rootRoute.addChildren([
   investigateEventRoute,
   fleetRoute,
   opsRoute,
+  storageRoute,
   configRoute,
 ]);

package/src/routes/storage.tsx

@@ -0,0 +1,9 @@
+import { createRoute } from '@tanstack/react-router';
+import { Storage } from '../pages';
+import { Route as rootRoute } from './__root';
+
+export const Route = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/storage',
+  component: Storage,
+});

package/src/server.ts

@@ -0,0 +1,2 @@
+export * from './runtime-config';
+export * from './static-server';

package/src/static-server.ts

@@ -0,0 +1,219 @@
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+  CONSOLE_BASEPATH_META,
+  CONSOLE_SERVER_URL_META,
+  CONSOLE_TOKEN_META,
+  normalizeBasePath,
+} from './runtime-config';
+
+const DEFAULT_MOUNT_PATH = '/console';
+const DEFAULT_INDEX_CACHE_CONTROL = 'no-store';
+const DEFAULT_ASSET_CACHE_CONTROL = 'public, max-age=31536000, immutable';
+
+const CONTENT_TYPES: Record<string, string> = {
+  '.css': 'text/css; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.ico': 'image/x-icon',
+  '.js': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.manifest': 'application/manifest+json; charset=utf-8',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.txt': 'text/plain; charset=utf-8',
+  '.webmanifest': 'application/manifest+json; charset=utf-8',
+};
+
+export interface ConsoleUiPrefill {
+  basePath?: string;
+  serverUrl?: string;
+  token?: string;
+}
+
+export interface CreateConsoleStaticResponderOptions {
+  mountPath?: string;
+  staticDir?: string;
+  defaultPrefill?: ConsoleUiPrefill;
+  indexCacheControl?: string;
+  assetCacheControl?: string;
+}
+
+export interface ServeConsoleStaticRequestOptions {
+  prefill?: ConsoleUiPrefill;
+}
+
+export type ConsoleStaticResponder = (
+  request: Request,
+  options?: ServeConsoleStaticRequestOptions
+) => Promise<Response | null>;
+
+function normalizeMountPath(mountPath: string | undefined): string {
+  const value = mountPath?.trim() ?? '';
+  if (!value || value === '/') return '/';
+  const withLeadingSlash = value.startsWith('/') ? value : `/${value}`;
+  return withLeadingSlash.replace(/\/+$/g, '') || '/';
+}
+
+function normalizeRequestPath(pathname: string): string {
+  const decodedPathname = decodeURIComponent(pathname);
+  return decodedPathname === '' ? '/' : decodedPathname;
+}
+
+function matchesMountPath(pathname: string, mountPath: string): boolean {
+  if (mountPath === '/') return pathname.startsWith('/');
+  return pathname === mountPath || pathname.startsWith(`${mountPath}/`);
+}
+
+function relativePathForMount(pathname: string, mountPath: string): string {
+  if (mountPath === '/') return pathname;
+  const withoutPrefix = pathname.slice(mountPath.length);
+  return withoutPrefix === '' ? '/' : withoutPrefix;
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;');
+}
+
+function withMetaTag(html: string, name: string, value: string): string {
+  const escapedValue = escapeHtmlAttribute(value);
+  const pattern = new RegExp(`<meta name="${name}" content="[^"]*"\\s*/?>`);
+  if (pattern.test(html)) {
+    return html.replace(
+      pattern,
+      `<meta name="${name}" content="${escapedValue}" />`
+    );
+  }
+
+  return html.replace(
+    '</head>',
+    `  <meta name="${name}" content="${escapedValue}" />\n  </head>`
+  );
+}
+
+function isWithinDirectory(baseDir: string, targetPath: string): boolean {
+  return (
+    targetPath === baseDir || targetPath.startsWith(`${baseDir}${path.sep}`)
+  );
+}
+
+function contentTypeFor(pathname: string): string {
+  const extension = path.extname(pathname).toLowerCase();
+  return CONTENT_TYPES[extension] ?? 'application/octet-stream';
+}
+
+function resolveConsoleStaticDir(): string {
+  const staticDirFromModule = fileURLToPath(
+    new URL('../web-dist', import.meta.url)
+  );
+  return path.resolve(staticDirFromModule);
+}
+
+function renderIndexHtml(args: {
+  template: string;
+  mountPath: string;
+  prefill?: ConsoleUiPrefill;
+}): string {
+  const resolvedBasePath = normalizeBasePath(
+    args.prefill?.basePath ?? args.mountPath
+  );
+  const resolvedServerUrl = args.prefill?.serverUrl ?? '';
+  const resolvedToken = args.prefill?.token ?? '';
+
+  return withMetaTag(
+    withMetaTag(
+      withMetaTag(args.template, CONSOLE_BASEPATH_META, resolvedBasePath),
+      CONSOLE_SERVER_URL_META,
+      resolvedServerUrl
+    ),
+    CONSOLE_TOKEN_META,
+    resolvedToken
+  );
+}
+
+export function createConsoleStaticResponder(
+  options: CreateConsoleStaticResponderOptions = {}
+): ConsoleStaticResponder {
+  const mountPath = normalizeMountPath(options.mountPath ?? DEFAULT_MOUNT_PATH);
+  const staticDir = path.resolve(
+    options.staticDir ?? resolveConsoleStaticDir()
+  );
+  const indexPath = path.join(staticDir, 'index.html');
+
+  if (!existsSync(indexPath)) {
+    throw new Error(
+      `Console distributable missing: ${indexPath}. Build @syncular/console before serving static assets.`
+    );
+  }
+
+  const indexTemplate = readFileSync(indexPath, 'utf8');
+  const indexCacheControl =
+    options.indexCacheControl ?? DEFAULT_INDEX_CACHE_CONTROL;
+  const assetCacheControl =
+    options.assetCacheControl ?? DEFAULT_ASSET_CACHE_CONTROL;
+  const defaultPrefill = options.defaultPrefill;
+
+  return async (request, requestOptions = {}) => {
+    const method = request.method.toUpperCase();
+    if (method !== 'GET' && method !== 'HEAD') {
+      return null;
+    }
+
+    const url = new URL(request.url);
+    const pathname = normalizeRequestPath(url.pathname);
+    if (!matchesMountPath(pathname, mountPath)) {
+      return null;
+    }
+
+    const relativePath = relativePathForMount(pathname, mountPath);
+    const effectivePrefill = {
+      ...defaultPrefill,
+      ...requestOptions.prefill,
+    };
+    const sendIndex = () => {
+      const html = renderIndexHtml({
+        template: indexTemplate,
+        mountPath,
+        prefill: effectivePrefill,
+      });
+      return new Response(method === 'HEAD' ? undefined : html, {
+        status: 200,
+        headers: {
+          'Content-Type': 'text/html; charset=utf-8',
+          'Cache-Control': indexCacheControl,
+        },
+      });
+    };
+
+    if (
+      relativePath === '/' ||
+      relativePath === '/index.html' ||
+      path.extname(relativePath).length === 0
+    ) {
+      return sendIndex();
+    }
+
+    const candidatePath = path.resolve(staticDir, `.${relativePath}`);
+    if (!isWithinDirectory(staticDir, candidatePath)) {
+      return new Response('Forbidden', { status: 403 });
+    }
+
+    if (!existsSync(candidatePath) || !statSync(candidatePath).isFile()) {
+      return new Response('Not Found', { status: 404 });
+    }
+
+    const body = method === 'HEAD' ? undefined : await readFile(candidatePath);
+    return new Response(body, {
+      status: 200,
+      headers: {
+        'Content-Type': contentTypeFor(candidatePath),
+        'Cache-Control': assetCacheControl,
+      },
+    });
+  };
+}

package/src/styles/globals.css

@@ -1 +1,8 @@
-@import "@syncular/ui/styles.css";
+@import '@syncular/ui/styles.source.css';
+
+/* Scan console page source files for Tailwind class usage */
+@source "..";
+
+:where(.syncular-console-root) {
+  color-scheme: dark;
+}

package/src/theme-scope.ts

@@ -0,0 +1,5 @@
+export const SYNCULAR_CONSOLE_ROOT_CLASS = 'syncular-console-root';
+
+export function applyConsoleThemeScope(container: Element): void {
+  container.classList.add(SYNCULAR_CONSOLE_ROOT_CLASS);
+}