Vertexvis · danschultz · Apr 7, 2026 · Apr 3, 2026 · Apr 3, 2026 · Apr 3, 2026
diff --git a/package.json b/package.json
@@ -9,14 +9,15 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
-    "@vertexvis/api-client-node": "^0.33.2",
+    "@vertexvis/api-client-node": "^0.40.0",
     "@vertexvis/geometry": "^0.24.2",
     "@vertexvis/viewer-react": "^0.24.2",
     "lodash.debounce": "^4.0",
     "multer": "2.0.2",
     "next": "^15.5.7",
     "next-connect": "^0.13.0",
     "next-iron-session": "^4.2",
+    "pretty-bytes": "^7.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.63.0",

diff --git a/src/components/file/FileDetailsDrawer.tsx b/src/components/file/FileDetailsDrawer.tsx
@@ -0,0 +1,169 @@
+import { Close } from "@mui/icons-material";
+import {
+  Box,
+  Drawer,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+import { toLocaleString } from "../../lib/dates";
+import { File } from "../../lib/files";
+import { toDisplayValue, toFileSizeDisplay } from "../../lib/formatting";
+import { RightDrawerWidth } from "../shared/Layout";
+
+interface Props {
+  readonly file?: File;
+  readonly onClose: () => void;
+  readonly open: boolean;
+}
+
+export function FileDetailsDrawer({
+  file,
+  onClose,
+  open,
+}: Props): JSX.Element {
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      sx={{
+        flexShrink: 0,
+        width: RightDrawerWidth,
+        "& .MuiDrawer-paper": { width: RightDrawerWidth },
+      }}
+      variant="persistent"
+    >
+      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Typography sx={{ my: 2, mx: 2 }} variant="h5">
+          File Details
+        </Typography>
+        <IconButton onClick={onClose} sx={{ mr: 2 }}>
+          <Close />
+        </IconButton>
+      </Box>
+      {file ? (
+        <TableContainer>
+          <Table size="small" sx={{ whiteSpace: "nowrap" }}>
+            <TableBody>
+              <DetailsRow label="Name" value={file.name} />
+              <DetailsRow label="Created" value={toLocaleString(file.created)} />
+              <DetailsRow label="Status" value={file.status} />
+              <DetailsRow
+                label="Expires"
+                value={toLocaleString(file.expiresAt)}
+              />
+              <MetadataRow metadata={file.metadata} />
+              <DetailsRow label="Root File Name" value={file.rootFileName} />
+              <DetailsRow label="Size" value={toFileSizeDisplay(file.size)} />
+              <DetailsRow label="Updated" value={toLocaleString(file.uploaded)} />
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <></>
+      )}
+    </Drawer>
+  );
+}
+
+function DetailsRow({
+  label,
+  value,
+}: {
+  readonly label: string;
+  readonly value?: string;
+}): JSX.Element {
+  return (
+    <TableRow>
+      <TableCell>
+        <Typography variant="subtitle2">{label}</Typography>
+        <Typography
+          sx={{ overflowWrap: "anywhere", whiteSpace: "normal" }}
+          variant="body2"
+        >
+          {toDisplayValue(value)}
+        </Typography>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function MetadataRow({
+  metadata,
+}: {
+  readonly metadata?: Record<string, string>;
+}): JSX.Element {
+  const entries = metadata == null ? [] : Object.entries(metadata);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Typography variant="subtitle2">Metadata</Typography>
+        {entries.length > 0 ? (
+          <Table size="small" sx={{ mt: 1, tableLayout: "fixed" }}>
+            <TableHead>
+              <TableRow>
+                <TableCell
+                  sx={{
+                    px: 0,
+                    py: 0.5,
+                    width: "40%",
+                    pr: 1,
+                  }}
+                >
+                  <Typography variant="subtitle2">Key</Typography>
+                </TableCell>
+                <TableCell sx={{ px: 0, py: 0.5, pl: 1 }}>
+                  <Typography variant="subtitle2">Value</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {entries.map(([key, value]) => (
+                <TableRow key={key}>
+                  <TableCell
+                    sx={{
+                      px: 0,
+                      py: 0.5,
+                      verticalAlign: "top",
+                      pr: 1,
+                    }}
+                  >
+                    <Typography
+                      sx={{ overflowWrap: "anywhere", whiteSpace: "normal" }}
+                      variant="body2"
+                    >
+                      {toDisplayValue(key)}
+                    </Typography>
+                  </TableCell>
+                  <TableCell sx={{ px: 0, py: 0.5, pl: 1, verticalAlign: "top" }}>
+                    <Typography
+                      sx={{ overflowWrap: "anywhere", whiteSpace: "normal" }}
+                      variant="body2"
+                    >
+                      {toDisplayValue(value)}
+                    </Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <Typography
+            sx={{ overflowWrap: "anywhere", whiteSpace: "normal" }}
+            variant="body2"
+          >
+            N/A
+          </Typography>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/src/components/file/FileTable.tsx b/src/components/file/FileTable.tsx
@@ -20,7 +20,7 @@ import React from "react";
 import useSWR from "swr";
 
 import { toLocaleString } from "../../lib/dates";
-import { toFilePage } from "../../lib/files";
+import { File, toFilePage } from "../../lib/files";
 import { SwrProps } from "../../lib/paging";
 import { DataLoadError } from "../shared/DataLoadError";
 import { DefaultPageSize, DefaultRowHeight } from "../shared/Layout";
@@ -46,7 +46,15 @@ function useFiles({ cursor, pageSize, suppliedId }: SwrProps) {
   );
 }
 
-export default function FilesTable(): JSX.Element {
+interface Props {
+  readonly activeFileId?: string;
+  readonly onFileSelected: (file: File) => void;
+}
+
+export default function FilesTable({
+  activeFileId,
+  onFileSelected,
+}: Props): JSX.Element {
   const pageSize = DefaultPageSize;
   const [curPage, setCurPage] = React.useState(0);
   const [cursor, setCursor] = React.useState<string | undefined>();
@@ -173,17 +181,23 @@ export default function FilesTable(): JSX.Element {
               ) : (
                 page.items.map((row) => {
                   const isSel = selected.has(row.id);
+                  const isActive = activeFileId === row.id;
+
                   return (
                     <TableRow
                       hover
                       role="checkbox"
                       tabIndex={-1}
                       key={row.id}
-                      selected={isSel}
+                      selected={isSel || isActive}
+                      onClick={() => onFileSelected(row)}
                     >
                       <TableCell
                         padding="checkbox"
-                        onClick={() => handleCheck(row.id)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleCheck(row.id);
+                        }}
                       >
                         <Checkbox color="primary" checked={isSel} />
                       </TableCell>

diff --git a/src/lib/formatting.ts b/src/lib/formatting.ts
@@ -0,0 +1,11 @@
+import prettyBytes from "pretty-bytes";
+
+export function toDisplayValue(value?: string): string {
+  return value == null || value.trim().length === 0 ? "N/A" : value;
+}
+
+export function toFileSizeDisplay(size?: number): string | undefined {
+  if (size == null) return undefined;
+
+  return prettyBytes(size);
+}
diff --git a/src/pages/files.tsx b/src/pages/files.tsx
@@ -1,15 +1,34 @@
 import dynamic from "next/dynamic";
 import React from "react";
 
+import { FileDetailsDrawer } from "../components/file/FileDetailsDrawer";
 import { Layout } from "../components/shared/Layout";
+import { File } from "../lib/files";
 import { defaultServerSideProps } from "../lib/with-session";
 
 const FilesTable = dynamic(() => import("../components/file/FileTable"), {
   ssr: false,
 });
 
 export default function Files(): JSX.Element {
-  return <Layout main={<FilesTable />} />;
+  const [file, setFile] = React.useState<File | undefined>();
+  const drawerOpen = Boolean(file);
+
+  return (
+    <Layout
+      main={
+        <FilesTable activeFileId={file?.id} onFileSelected={setFile} />
+      }
+      rightDrawer={
+        <FileDetailsDrawer
+          file={file}
+          onClose={() => setFile(undefined)}
+          open={drawerOpen}
+        />
+      }
+      rightDrawerOpen={drawerOpen}
+    />
+  );
 }
 
 export const getServerSideProps = defaultServerSideProps;
diff --git a/yarn.lock b/yarn.lock
@@ -994,12 +994,12 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vertexvis/api-client-node@^0.33.2":
-  version "0.33.2"
-  resolved "https://registry.yarnpkg.com/@vertexvis/api-client-node/-/api-client-node-0.33.2.tgz#bfb15f972270b1aaf5ae80abb146b28b00a2559b"
-  integrity sha512-u4Hso8ADOMbk7s/8Qhm0vGzY1sR2MDQ3mWiFc0xxJ051rL2S/UdKjSQA/Yjm3eU2ut1cTmso8ZXWVqvuAqcv6w==
+"@vertexvis/api-client-node@^0.40.0":
+  version "0.40.0"
+  resolved "https://registry.yarnpkg.com/@vertexvis/api-client-node/-/api-client-node-0.40.0.tgz#9563245ab3247ae3789bc972a739f2638b2681da"
+  integrity sha512-z/WtLR296nffQc047nHIiFhC68Vhw4Xs5354t0LWA4j+jPm8ybnf6UkObuJcJv1Nm13qsRe+NAJ08zQzUbtGzQ==
   dependencies:
-    axios "^1.6.4"
+    axios "1.11.0"
     p-limit "^3"
 
 "@vertexvis/frame-streaming-protos@^0.15.1":
@@ -1293,7 +1293,7 @@ axe-core@^4.10.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
   integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
 
-axios@1.8.2, axios@^1.6.4:
+axios@1.11.0, axios@1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.8.2.tgz#fabe06e241dfe83071d4edfbcaa7b1c3a40f7979"
   integrity sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==
@@ -3253,6 +3253,11 @@ prettier@^2.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+pretty-bytes@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-7.1.0.tgz#d788c9906241dbdcd4defab51b6d7470243db9bd"
+  integrity sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"