@syncular/console 0.0.4-26 → 0.0.6-100

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

package/src/styles/globals.css

@@ -1,4 +1,7 @@
-@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;