diff --git a/.gitignore b/.gitignore
index f659601..59dc9f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,3 +51,13 @@ shock.code-workspace
 devel/lo.data
 shock-server/shock-server
 shock-server/shock-server
+
+# Node.js
+node_modules/
+
+# UI build outputs (embedded copy)
+shock-server/ui/dist/
+!shock-server/ui/dist/.gitkeep
+clients/shock-ts/dist/
+clients/shock-ui/dist/
+*.tsbuildinfo
diff --git a/Dockerfile b/Dockerfile
index 3a735d9..1d24b23 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,6 +7,13 @@
 # This allows the shock-server to bind to port 80 if desired.
 #setcap 'cap_net_bind_service=+ep' bin/shock-server
 
+FROM node:20-alpine AS ui-builder
+WORKDIR /build/clients
+COPY clients/ .
+RUN npm install && \
+    cd shock-ts && npm run build && \
+    cd ../shock-ui && npm run build
+
 FROM golang:alpine
 
 ENV PYTHONUNBUFFERED=1
@@ -19,6 +26,9 @@ WORKDIR /go/bin
 
 COPY . /go/src/github.com/MG-RAST/Shock
 
+# Copy built UI into the Go embed directory
+COPY --from=ui-builder /build/clients/shock-ui/dist ${DIR}/shock-server/ui/dist
+
 RUN mkdir -p /var/log/shock /usr/local/shock/data ${DIR}
 
 # set version
diff --git a/build-ui.sh b/build-ui.sh
new file mode 100755
index 0000000..d4feabe
--- /dev/null
+++ b/build-ui.sh
@@ -0,0 +1,25 @@
+#!/bin/sh
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+CLIENTS_DIR="$SCRIPT_DIR/clients"
+UI_DIR="$CLIENTS_DIR/shock-ui"
+EMBED_DIR="$SCRIPT_DIR/shock-server/ui/dist"
+
+echo "==> Installing dependencies..."
+cd "$CLIENTS_DIR"
+npm install
+
+echo "==> Building shock-ts..."
+cd "$CLIENTS_DIR/shock-ts"
+npm run build
+
+echo "==> Building shock-ui..."
+cd "$UI_DIR"
+npm run build
+
+echo "==> Copying dist to shock-server/ui/dist..."
+rm -rf "$EMBED_DIR"
+cp -r "$UI_DIR/dist" "$EMBED_DIR"
+
+echo "==> UI build complete. Run ./compile-server.sh to embed in binary."
diff --git a/clients/package.json b/clients/package.json
new file mode 100644
index 0000000..9fdff5d
--- /dev/null
+++ b/clients/package.json
@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "workspaces": [
+    "shock-ts",
+    "shock-ui"
+  ]
+}
diff --git a/clients/shock-ts/src/client.ts b/clients/shock-ts/src/client.ts
index 2165b14..d15cc64 100644
--- a/clients/shock-ts/src/client.ts
+++ b/clients/shock-ts/src/client.ts
@@ -3,6 +3,12 @@ import type {
   DisplayAcl,
   AclType,
   DownloadOptions,
+  LocationInfo,
+  LocationNodeList,
+  LockedFiles,
+  LockedIndexes,
+  LockedNodes,
+  LockerState,
   NodeListQuery,
   NodeLocation,
   PaginatedResult,
@@ -23,12 +29,14 @@ export class ShockClient {
   private baseUrl: string;
   private staticToken?: string;
   private getTokenFn?: () => string | undefined;
+  private authType: "basic" | "oauth";
 
   constructor(options: ShockClientOptions) {
     // Strip trailing slash
     this.baseUrl = options.url.replace(/\/+$/, "");
     this.staticToken = options.token;
     this.getTokenFn = options.getToken;
+    this.authType = options.authType ?? "oauth";
   }
 
   /** Update the static auth token. */
@@ -207,6 +215,92 @@ export class ShockClient {
     return this.request<NodeLocation[]>("GET", `/node/${nodeId}/locations/`);
   }
 
+  // ─── Index Management ────────────────────────────────────────
+
+  /** `DELETE /node/{id}/index/{type}` — delete an index. */
+  async deleteIndex(nodeId: string, indexType: string): Promise<void> {
+    this.validateId(nodeId);
+    await this.request<unknown>("DELETE", `/node/${nodeId}/index/${indexType}`);
+  }
+
+  // ─── Admin: Location Info ────────────────────────────────────
+
+  /** `GET /location/{loc}/info` — get location configuration info (admin only). */
+  async getLocationInfo(locId: string): Promise<LocationInfo> {
+    return this.request<LocationInfo>("GET", `/location/${locId}/info`);
+  }
+
+  /** `GET /location/{loc}/missing` — get nodes missing from a location (admin only). */
+  async getLocationMissing(locId: string): Promise<LocationNodeList> {
+    return this.request<LocationNodeList>("GET", `/location/${locId}/missing`);
+  }
+
+  /** `GET /location/{loc}/present` — get nodes present in a location (admin only). */
+  async getLocationPresent(locId: string): Promise<LocationNodeList> {
+    return this.request<LocationNodeList>("GET", `/location/${locId}/present`);
+  }
+
+  // ─── Admin: Locker ───────────────────────────────────────────
+
+  /** `GET /locker` — get all lock manager states (admin check). */
+  async getLocker(): Promise<LockerState> {
+    return this.request<LockerState>("GET", "/locker");
+  }
+
+  /** `GET /locked/node` — get locked node IDs. */
+  async getLockedNodes(): Promise<LockedNodes> {
+    return this.request<LockedNodes>("GET", "/locked/node");
+  }
+
+  /** `GET /locked/file` — get locked file IDs. */
+  async getLockedFiles(): Promise<LockedFiles> {
+    return this.request<LockedFiles>("GET", "/locked/file");
+  }
+
+  /** `GET /locked/index` — get locked index IDs. */
+  async getLockedIndexes(): Promise<LockedIndexes> {
+    return this.request<LockedIndexes>("GET", "/locked/index");
+  }
+
+  // ─── Admin: Trace ────────────────────────────────────────────
+
+  /** `GET /trace/start` — start execution trace (admin only). */
+  async startTrace(): Promise<string> {
+    return this.request<string>("GET", "/trace/start");
+  }
+
+  /** `GET /trace/stop` — stop execution trace (admin only). */
+  async stopTrace(): Promise<string> {
+    return this.request<string>("GET", "/trace/stop");
+  }
+
+  /** `GET /trace/download` — download the latest trace file as a Blob (admin only). */
+  async downloadTrace(): Promise<Blob> {
+    const response = await this.rawFetch("GET", "/trace/download");
+    if (!response.ok) {
+      await this.throwFromResponse(response);
+    }
+    return response.blob();
+  }
+
+  /** `GET /trace/summary` — get trace footprint summary as text (admin only). */
+  async getTraceSummary(): Promise<string> {
+    const response = await this.rawFetch("GET", "/trace/summary");
+    if (!response.ok) {
+      await this.throwFromResponse(response);
+    }
+    return response.text();
+  }
+
+  /** `GET /trace/events` — get parsed trace events as text (admin only). */
+  async getTraceEvents(): Promise<string> {
+    const response = await this.rawFetch("GET", "/trace/events");
+    if (!response.ok) {
+      await this.throwFromResponse(response);
+    }
+    return response.text();
+  }
+
   // ─── Polling ───────────────────────────────────────────────────
 
   /**
@@ -245,7 +339,8 @@ export class ShockClient {
   private authHeaders(): Record<string, string> {
     const token = this.resolveToken();
     if (token) {
-      return { Authorization: `OAuth ${token}` };
+      const prefix = this.authType === "basic" ? "Basic" : "OAuth";
+      return { Authorization: `${prefix} ${token}` };
     }
     return {};
   }
@@ -422,7 +517,8 @@ export class ShockClient {
 
       const token = this.resolveToken();
       if (token) {
-        xhr.setRequestHeader("Authorization", `OAuth ${token}`);
+        const prefix = this.authType === "basic" ? "Basic" : "OAuth";
+        xhr.setRequestHeader("Authorization", `${prefix} ${token}`);
       }
 
       xhr.upload.addEventListener("progress", (e) => {
diff --git a/clients/shock-ts/src/index.ts b/clients/shock-ts/src/index.ts
index 361ee38..e50b26f 100644
--- a/clients/shock-ts/src/index.ts
+++ b/clients/shock-ts/src/index.ts
@@ -30,4 +30,10 @@ export type {
   ChunkedUploadOptions,
   ChunkedUploadResult,
   SmartUploadOptions,
+  LockerState,
+  LockedNodes,
+  LockedFiles,
+  LockedIndexes,
+  LocationInfo,
+  LocationNodeList,
 } from "./types.js";
diff --git a/clients/shock-ts/src/react/hooks.ts b/clients/shock-ts/src/react/hooks.ts
index 5bfec9b..6e95b25 100644
--- a/clients/shock-ts/src/react/hooks.ts
+++ b/clients/shock-ts/src/react/hooks.ts
@@ -9,6 +9,12 @@ import { useShockClient } from "./provider.js";
 import type {
   DisplayAcl,
   AclType,
+  LocationInfo,
+  LocationNodeList,
+  LockedFiles,
+  LockedIndexes,
+  LockedNodes,
+  LockerState,
   NodeListQuery,
   PaginatedResult,
   ShockNode,
@@ -24,6 +30,15 @@ export const shockKeys = {
   nodes: (query?: NodeListQuery) => ["shock", "nodes", query] as const,
   node: (id: string | undefined) => ["shock", "node", id] as const,
   acl: (id: string | undefined) => ["shock", "node", id, "acl"] as const,
+  locker: () => ["shock", "locker"] as const,
+  lockedNodes: () => ["shock", "locked", "nodes"] as const,
+  lockedFiles: () => ["shock", "locked", "files"] as const,
+  lockedIndexes: () => ["shock", "locked", "indexes"] as const,
+  locationInfo: (locId: string) => ["shock", "location", locId, "info"] as const,
+  locationMissing: (locId: string) => ["shock", "location", locId, "missing"] as const,
+  locationPresent: (locId: string) => ["shock", "location", locId, "present"] as const,
+  traceSummary: () => ["shock", "trace", "summary"] as const,
+  traceEvents: () => ["shock", "trace", "events"] as const,
 };
 
 // ─── Queries ─────────────────────────────────────────────────────
@@ -137,3 +152,163 @@ export function useRemoveAcl(
     },
   });
 }
+
+// ─── Index Mutations ──────────────────────────────────────────
+
+export function useCreateIndex(
+  nodeId: string
+): UseMutationResult<void, Error, string> {
+  const client = useShockClient();
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: (indexType: string) => client.createIndex(nodeId, indexType),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: shockKeys.node(nodeId) });
+    },
+  });
+}
+
+export function useDeleteIndex(
+  nodeId: string
+): UseMutationResult<void, Error, string> {
+  const client = useShockClient();
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: (indexType: string) => client.deleteIndex(nodeId, indexType),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: shockKeys.node(nodeId) });
+    },
+  });
+}
+
+// ─── Admin Queries ────────────────────────────────────────────
+
+export function useLocker(): UseQueryResult<LockerState> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.locker(),
+    queryFn: () => client.getLocker(),
+    staleTime: 10_000,
+  });
+}
+
+export function useLockedNodes(): UseQueryResult<LockedNodes> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.lockedNodes(),
+    queryFn: () => client.getLockedNodes(),
+    staleTime: 10_000,
+  });
+}
+
+export function useLockedFiles(): UseQueryResult<LockedFiles> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.lockedFiles(),
+    queryFn: () => client.getLockedFiles(),
+    staleTime: 10_000,
+  });
+}
+
+export function useLockedIndexes(): UseQueryResult<LockedIndexes> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.lockedIndexes(),
+    queryFn: () => client.getLockedIndexes(),
+    staleTime: 10_000,
+  });
+}
+
+export function useLocationInfo(
+  locId: string,
+  enabled = true
+): UseQueryResult<LocationInfo> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.locationInfo(locId),
+    queryFn: () => client.getLocationInfo(locId),
+    enabled,
+    staleTime: 60_000,
+  });
+}
+
+export function useLocationMissing(
+  locId: string,
+  enabled = true
+): UseQueryResult<LocationNodeList> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.locationMissing(locId),
+    queryFn: () => client.getLocationMissing(locId),
+    enabled,
+    staleTime: 30_000,
+  });
+}
+
+export function useLocationPresent(
+  locId: string,
+  enabled = true
+): UseQueryResult<LocationNodeList> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.locationPresent(locId),
+    queryFn: () => client.getLocationPresent(locId),
+    enabled,
+    staleTime: 30_000,
+  });
+}
+
+// ─── Admin Mutations ──────────────────────────────────────────
+
+export function useStartTrace(): UseMutationResult<string, Error, void> {
+  const client = useShockClient();
+  return useMutation({
+    mutationFn: () => client.startTrace(),
+  });
+}
+
+export function useStopTrace(): UseMutationResult<string, Error, void> {
+  const client = useShockClient();
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: () => client.stopTrace(),
+    onSuccess: () => {
+      // Invalidate summary/events so they reload after a new trace is captured
+      qc.invalidateQueries({ queryKey: shockKeys.traceSummary() });
+      qc.invalidateQueries({ queryKey: shockKeys.traceEvents() });
+    },
+  });
+}
+
+export function useTraceSummary(
+  enabled = true
+): UseQueryResult<string> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.traceSummary(),
+    queryFn: () => client.getTraceSummary(),
+    enabled,
+    staleTime: 60_000,
+  });
+}
+
+export function useTraceEvents(
+  enabled = true
+): UseQueryResult<string> {
+  const client = useShockClient();
+  return useQuery({
+    queryKey: shockKeys.traceEvents(),
+    queryFn: () => client.getTraceEvents(),
+    enabled,
+    staleTime: 60_000,
+  });
+}
+
+export function useDownloadTrace(): UseMutationResult<Blob, Error, void> {
+  const client = useShockClient();
+  return useMutation({
+    mutationFn: () => client.downloadTrace(),
+  });
+}
diff --git a/clients/shock-ts/src/react/index.ts b/clients/shock-ts/src/react/index.ts
index 118d880..922073d 100644
--- a/clients/shock-ts/src/react/index.ts
+++ b/clients/shock-ts/src/react/index.ts
@@ -11,6 +11,20 @@ export {
   useUpdateAttributes,
   useAddAcl,
   useRemoveAcl,
+  useCreateIndex,
+  useDeleteIndex,
+  useLocker,
+  useLockedNodes,
+  useLockedFiles,
+  useLockedIndexes,
+  useLocationInfo,
+  useLocationMissing,
+  useLocationPresent,
+  useStartTrace,
+  useStopTrace,
+  useTraceSummary,
+  useTraceEvents,
+  useDownloadTrace,
 } from "./hooks.js";
 
 export { useUpload } from "./use-upload.js";
diff --git a/clients/shock-ts/src/react/provider.tsx b/clients/shock-ts/src/react/provider.tsx
index dd0fe54..1f89b70 100644
--- a/clients/shock-ts/src/react/provider.tsx
+++ b/clients/shock-ts/src/react/provider.tsx
@@ -20,6 +20,8 @@ export interface ShockProviderProps {
   token?: string;
   /** Dynamic token getter (takes priority over `token`). */
   getToken?: () => string | undefined;
+  /** Auth header prefix: "basic" or "oauth". Defaults to "oauth". */
+  authType?: "basic" | "oauth";
   /** Optional externally-managed QueryClient. */
   queryClient?: QueryClient;
   children: ReactNode;
@@ -35,6 +37,7 @@ export function ShockProvider({
   url,
   token,
   getToken,
+  authType,
   queryClient: externalQc,
   children,
 }: ShockProviderProps) {
@@ -45,10 +48,10 @@ export function ShockProvider({
   }
   const qc = externalQc ?? internalQcRef.current!;
 
-  // Memoize the client on [url, getToken]. Token changes go through setToken.
+  // Memoize the client on [url, getToken, authType]. Token changes go through setToken.
   const client = useMemo(
-    () => new ShockClient({ url, token, getToken }),
-    [url, getToken] // eslint-disable-line react-hooks/exhaustive-deps
+    () => new ShockClient({ url, token, getToken, authType }),
+    [url, getToken, authType] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // Update token without re-creating client
diff --git a/clients/shock-ts/src/types.ts b/clients/shock-ts/src/types.ts
index 3fb9053..986be1f 100644
--- a/clients/shock-ts/src/types.ts
+++ b/clients/shock-ts/src/types.ts
@@ -170,8 +170,41 @@ export interface ShockClientOptions {
   token?: string;
   /** Dynamic token getter (takes priority over static `token`). */
   getToken?: () => string | undefined;
+  /** Auth header prefix: "basic" → `Basic <token>`, "oauth" → `OAuth <token>`. Defaults to "oauth". */
+  authType?: "basic" | "oauth";
 }
 
+// ─── Admin Types ──────────────────────────────────────────────────
+
+/** Response from `GET /locker` — all lock manager states. */
+export interface LockerState {
+  [key: string]: string[];
+}
+
+/** Response from `GET /locked/node` — list of locked node IDs. */
+export type LockedNodes = string[];
+
+/** Response from `GET /locked/file` — all file locks. */
+export interface LockedFiles {
+  [key: string]: string[];
+}
+
+/** Response from `GET /locked/index` — all index locks. */
+export interface LockedIndexes {
+  [key: string]: string[];
+}
+
+/** Location info from `GET /location/{loc}/info`. */
+export interface LocationInfo {
+  id: string;
+  description?: string;
+  type?: string;
+  [key: string]: unknown;
+}
+
+/** Missing/present node list from location endpoints. */
+export type LocationNodeList = string[];
+
 // ─── Query & Upload Options ────────────────────────────────────────
 
 /** Query parameters for listing nodes. */
diff --git a/clients/shock-ui/.gitignore b/clients/shock-ui/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/clients/shock-ui/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/clients/shock-ui/index.html b/clients/shock-ui/index.html
new file mode 100644
index 0000000..44f3523
--- /dev/null
+++ b/clients/shock-ui/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shock</title>
+  </head>
+  <body class="min-h-screen bg-background text-foreground antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/clients/shock-ui/package.json b/clients/shock-ui/package.json
new file mode 100644
index 0000000..80420b0
--- /dev/null
+++ b/clients/shock-ui/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "shock-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "@tanstack/react-query": "^5.62.0",
+    "shock-client": "*",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "lucide-react": "^0.460.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "autoprefixer": "^10.4.20"
+  }
+}
diff --git a/clients/shock-ui/src/App.tsx b/clients/shock-ui/src/App.tsx
new file mode 100644
index 0000000..99bfeb1
--- /dev/null
+++ b/clients/shock-ui/src/App.tsx
@@ -0,0 +1,129 @@
+import { lazy, Suspense } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { ShockUIProvider } from "@/providers/ShockUIProvider";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { ProtectedRoute, AdminRoute } from "@/components/auth/ProtectedRoute";
+import { AppShell } from "@/components/layout/AppShell";
+import { LoginPage } from "@/pages/LoginPage";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Lazy-load pages for code splitting
+const NodesPage = lazy(() => import("@/pages/NodesPage").then((m) => ({ default: m.NodesPage })));
+const NodeDetailPage = lazy(() => import("@/pages/NodeDetailPage").then((m) => ({ default: m.NodeDetailPage })));
+const UploadPage = lazy(() => import("@/pages/UploadPage").then((m) => ({ default: m.UploadPage })));
+const AdminDashboardPage = lazy(() => import("@/pages/AdminDashboardPage").then((m) => ({ default: m.AdminDashboardPage })));
+const AdminLocationsPage = lazy(() => import("@/pages/AdminLocationsPage").then((m) => ({ default: m.AdminLocationsPage })));
+const AdminLockerPage = lazy(() => import("@/pages/AdminLockerPage").then((m) => ({ default: m.AdminLockerPage })));
+const AdminTracePage = lazy(() => import("@/pages/AdminTracePage").then((m) => ({ default: m.AdminTracePage })));
+const SettingsPage = lazy(() => import("@/pages/SettingsPage").then((m) => ({ default: m.SettingsPage })));
+
+function PageLoader() {
+  return (
+    <div className="space-y-4 p-6">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-64" />
+    </div>
+  );
+}
+
+export function App() {
+  return (
+    <ErrorBoundary>
+      <BrowserRouter>
+        <ShockUIProvider>
+          <Routes>
+            <Route path="/ui/login" element={<LoginPage />} />
+
+            <Route
+              element={
+                <ProtectedRoute>
+                  <AppShell />
+                </ProtectedRoute>
+              }
+            >
+              <Route
+                path="/ui/nodes"
+                element={
+                  <Suspense fallback={<PageLoader />}>
+                    <NodesPage />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="/ui/nodes/:id"
+                element={
+                  <Suspense fallback={<PageLoader />}>
+                    <NodeDetailPage />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="/ui/upload"
+                element={
+                  <Suspense fallback={<PageLoader />}>
+                    <UploadPage />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="/ui/settings"
+                element={
+                  <Suspense fallback={<PageLoader />}>
+                    <SettingsPage />
+                  </Suspense>
+                }
+              />
+
+              {/* Admin routes */}
+              <Route
+                path="/ui/admin"
+                element={
+                  <AdminRoute>
+                    <Suspense fallback={<PageLoader />}>
+                      <AdminDashboardPage />
+                    </Suspense>
+                  </AdminRoute>
+                }
+              />
+              <Route
+                path="/ui/admin/locations"
+                element={
+                  <AdminRoute>
+                    <Suspense fallback={<PageLoader />}>
+                      <AdminLocationsPage />
+                    </Suspense>
+                  </AdminRoute>
+                }
+              />
+              <Route
+                path="/ui/admin/locker"
+                element={
+                  <AdminRoute>
+                    <Suspense fallback={<PageLoader />}>
+                      <AdminLockerPage />
+                    </Suspense>
+                  </AdminRoute>
+                }
+              />
+              <Route
+                path="/ui/admin/trace"
+                element={
+                  <AdminRoute>
+                    <Suspense fallback={<PageLoader />}>
+                      <AdminTracePage />
+                    </Suspense>
+                  </AdminRoute>
+                }
+              />
+            </Route>
+
+            {/* Redirects */}
+            <Route path="/ui" element={<Navigate to="/ui/nodes" replace />} />
+            <Route path="/ui/" element={<Navigate to="/ui/nodes" replace />} />
+            <Route path="*" element={<Navigate to="/ui/nodes" replace />} />
+          </Routes>
+        </ShockUIProvider>
+      </BrowserRouter>
+    </ErrorBoundary>
+  );
+}
diff --git a/clients/shock-ui/src/components/ErrorBoundary.tsx b/clients/shock-ui/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..e1dfd85
--- /dev/null
+++ b/clients/shock-ui/src/components/ErrorBoundary.tsx
@@ -0,0 +1,48 @@
+import { Component, type ReactNode, type ErrorInfo } from "react";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("UI Error:", error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-[400px] flex-col items-center justify-center gap-4">
+          <h2 className="text-lg font-semibold">Something went wrong</h2>
+          <p className="max-w-md text-center text-sm text-muted-foreground">
+            {this.state.error?.message ?? "An unexpected error occurred"}
+          </p>
+          <Button
+            onClick={() => {
+              this.setState({ hasError: false, error: null });
+              window.location.reload();
+            }}
+          >
+            Reload
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/clients/shock-ui/src/components/acl/AclPanel.tsx b/clients/shock-ui/src/components/acl/AclPanel.tsx
new file mode 100644
index 0000000..69d7da7
--- /dev/null
+++ b/clients/shock-ui/src/components/acl/AclPanel.tsx
@@ -0,0 +1,121 @@
+import { useNodeAcl, useAddAcl, useRemoveAcl } from "shock-client/react";
+import type { AclType } from "shock-client";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Plus, X, Globe } from "lucide-react";
+
+interface AclPanelProps {
+  nodeId: string;
+}
+
+function AclUserList({
+  nodeId,
+  type,
+  users,
+}: {
+  nodeId: string;
+  type: AclType;
+  users: string[];
+}) {
+  const addAcl = useAddAcl(nodeId);
+  const removeAcl = useRemoveAcl(nodeId);
+  const [newUser, setNewUser] = useState("");
+
+  const handleAdd = () => {
+    const trimmed = newUser.trim();
+    if (!trimmed) return;
+    addAcl.mutate({ type, users: [trimmed] });
+    setNewUser("");
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1">
+        {users.length === 0 && (
+          <span className="text-xs text-muted-foreground">No users</span>
+        )}
+        {users.map((user) => (
+          <Badge key={user} variant="secondary" className="gap-1">
+            {user}
+            <button
+              onClick={() => removeAcl.mutate({ type, users: [user] })}
+              className="ml-1 hover:text-destructive"
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <Input
+          value={newUser}
+          onChange={(e) => setNewUser(e.target.value)}
+          placeholder="Add user..."
+          className="h-8 text-xs"
+          onKeyDown={(e) => e.key === "Enter" && handleAdd()}
+        />
+        <Button variant="outline" size="sm" onClick={handleAdd} disabled={!newUser.trim()}>
+          <Plus className="h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function AclPanel({ nodeId }: AclPanelProps) {
+  const { data: acl, isLoading } = useNodeAcl(nodeId);
+  const addAcl = useAddAcl(nodeId);
+  const removeAcl = useRemoveAcl(nodeId);
+
+  if (isLoading) {
+    return <div className="space-y-3"><Skeleton className="h-24" /><Skeleton className="h-24" /></div>;
+  }
+
+  if (!acl) return null;
+
+  const togglePublic = (type: "public_read" | "public_write" | "public_delete", current: boolean) => {
+    if (current) {
+      removeAcl.mutate({ type, users: [] });
+    } else {
+      addAcl.mutate({ type, users: [] });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h4 className="mb-1 text-sm font-medium">Owner</h4>
+        <Badge>{acl.owner}</Badge>
+      </div>
+
+      <div>
+        <h4 className="mb-1 text-sm font-medium flex items-center gap-2">
+          Public Access
+          <Globe className="h-3 w-3 text-muted-foreground" />
+        </h4>
+        <div className="flex gap-2">
+          {(["read", "write", "delete"] as const).map((perm) => (
+            <Button
+              key={perm}
+              variant={acl.public[perm] ? "default" : "outline"}
+              size="sm"
+              onClick={() => togglePublic(`public_${perm}`, acl.public[perm])}
+            >
+              {perm}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {(["read", "write", "delete"] as const).map((type) => (
+        <div key={type}>
+          <h4 className="mb-2 text-sm font-medium capitalize">{type}</h4>
+          <AclUserList nodeId={nodeId} type={type} users={acl[type]} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/admin/Dashboard.tsx b/clients/shock-ui/src/components/admin/Dashboard.tsx
new file mode 100644
index 0000000..b3dc578
--- /dev/null
+++ b/clients/shock-ui/src/components/admin/Dashboard.tsx
@@ -0,0 +1,78 @@
+import { useServerInfo, useLockedNodes, useLockedFiles, useLockedIndexes } from "shock-client/react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Server, Lock, Clock } from "lucide-react";
+
+export function Dashboard() {
+  const { data: info, isLoading: infoLoading } = useServerInfo();
+  const { data: lockedNodes } = useLockedNodes();
+  const { data: lockedFiles } = useLockedFiles();
+  const { data: lockedIndexes } = useLockedIndexes();
+
+  if (infoLoading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {[1, 2, 3].map((i) => <Skeleton key={i} className="h-32" />)}
+      </div>
+    );
+  }
+
+  if (!info) return null;
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center gap-3 pb-2">
+            <Server className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">Server</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1 text-sm">
+              <p>Version: <span className="font-mono">{info.version}</span></p>
+              <p className="flex items-center gap-1">
+                <Clock className="h-3 w-3" /> Uptime: {info.uptime}
+              </p>
+              <p>Contact: {info.contact || "—"}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center gap-3 pb-2">
+            <Lock className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-sm font-medium">Locked Resources</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1 text-sm">
+              <p>Nodes: <Badge variant="secondary">{lockedNodes?.length ?? "—"}</Badge></p>
+              <p>Files: <Badge variant="secondary">{lockedFiles ? Object.keys(lockedFiles).length : "—"}</Badge></p>
+              <p>Indexes: <Badge variant="secondary">{lockedIndexes ? Object.keys(lockedIndexes).length : "—"}</Badge></p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Configuration</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-1 text-sm">
+              <p>Auth: {info.auth && info.auth.length > 0 ? info.auth.join(", ") : "basic"}</p>
+              <div className="flex gap-1">
+                <span>Anon:</span>
+                {info.anonymous_permissions.read && <Badge variant="outline">read</Badge>}
+                {info.anonymous_permissions.write && <Badge variant="outline">write</Badge>}
+                {info.anonymous_permissions.delete && <Badge variant="outline">delete</Badge>}
+                {!info.anonymous_permissions.read && !info.anonymous_permissions.write && !info.anonymous_permissions.delete && (
+                  <span className="text-muted-foreground">none</span>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/admin/LocationBrowser.tsx b/clients/shock-ui/src/components/admin/LocationBrowser.tsx
new file mode 100644
index 0000000..9d2720e
--- /dev/null
+++ b/clients/shock-ui/src/components/admin/LocationBrowser.tsx
@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { useLocationInfo, useLocationMissing, useLocationPresent } from "shock-client/react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Search } from "lucide-react";
+
+export function LocationBrowser() {
+  const [locId, setLocId] = useState("");
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const { data: info, isLoading: infoLoading, error: infoError } = useLocationInfo(
+    activeId ?? "",
+    Boolean(activeId)
+  );
+  const { data: missing } = useLocationMissing(activeId ?? "", Boolean(activeId));
+  const { data: present } = useLocationPresent(activeId ?? "", Boolean(activeId));
+
+  const handleSearch = () => {
+    if (locId.trim()) setActiveId(locId.trim());
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <Input
+          value={locId}
+          onChange={(e) => setLocId(e.target.value)}
+          placeholder="Enter location ID (e.g., s3)"
+          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+        />
+        <Button onClick={handleSearch} disabled={!locId.trim()}>
+          <Search className="mr-2 h-4 w-4" />
+          Inspect
+        </Button>
+      </div>
+
+      {activeId && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Location: {activeId}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {infoLoading ? (
+              <Skeleton className="h-20" />
+            ) : infoError ? (
+              <p className="text-sm text-destructive">
+                {infoError instanceof Error ? infoError.message : "Failed to load location info"}
+              </p>
+            ) : info ? (
+              <div className="space-y-4">
+                <pre className="rounded-md bg-muted p-3 text-xs font-mono overflow-auto max-h-40">
+                  {JSON.stringify(info, null, 2)}
+                </pre>
+
+                <Tabs defaultValue="missing">
+                  <TabsList>
+                    <TabsTrigger value="missing">
+                      Missing <Badge variant="secondary" className="ml-1">{missing?.length ?? "—"}</Badge>
+                    </TabsTrigger>
+                    <TabsTrigger value="present">
+                      Present <Badge variant="secondary" className="ml-1">{present?.length ?? "—"}</Badge>
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="missing">
+                    {!missing || missing.length === 0 ? (
+                      <p className="text-sm text-muted-foreground py-2">No missing nodes</p>
+                    ) : (
+                      <div className="max-h-48 overflow-auto">
+                        <div className="flex flex-wrap gap-1 py-2">
+                          {missing.map((id) => (
+                            <Badge key={id} variant="outline" className="font-mono text-xs">
+                              {id.slice(0, 8)}...
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </TabsContent>
+                  <TabsContent value="present">
+                    {!present || present.length === 0 ? (
+                      <p className="text-sm text-muted-foreground py-2">No present nodes</p>
+                    ) : (
+                      <div className="max-h-48 overflow-auto">
+                        <div className="flex flex-wrap gap-1 py-2">
+                          {present.map((id) => (
+                            <Badge key={id} variant="outline" className="font-mono text-xs">
+                              {id.slice(0, 8)}...
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/admin/LockerView.tsx b/clients/shock-ui/src/components/admin/LockerView.tsx
new file mode 100644
index 0000000..7e3b581
--- /dev/null
+++ b/clients/shock-ui/src/components/admin/LockerView.tsx
@@ -0,0 +1,101 @@
+import { useLockedNodes, useLockedFiles, useLockedIndexes } from "shock-client/react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Link } from "react-router-dom";
+
+export function LockerView() {
+  const { data: nodes, isLoading: nodesLoading } = useLockedNodes();
+  const { data: files, isLoading: filesLoading } = useLockedFiles();
+  const { data: indexes, isLoading: indexesLoading } = useLockedIndexes();
+
+  if (nodesLoading || filesLoading || indexesLoading) {
+    return <div className="space-y-4"><Skeleton className="h-32" /><Skeleton className="h-32" /></div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            Locked Nodes
+            <Badge variant="secondary">{nodes?.length ?? 0}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!nodes || nodes.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No locked nodes</p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {nodes.map((id) => (
+                <Link key={id} to={`/ui/nodes/${id}`}>
+                  <Badge variant="outline" className="font-mono text-xs hover:bg-accent">
+                    {id.slice(0, 8)}...
+                  </Badge>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            Locked Files
+            <Badge variant="secondary">{files ? Object.keys(files).length : 0}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!files || Object.keys(files).length === 0 ? (
+            <p className="text-sm text-muted-foreground">No locked files</p>
+          ) : (
+            <div className="space-y-2">
+              {Object.entries(files).map(([key, ids]) => (
+                <div key={key}>
+                  <span className="text-xs font-medium">{key}:</span>
+                  <div className="ml-2 flex flex-wrap gap-1 mt-1">
+                    {ids.map((id) => (
+                      <Badge key={id} variant="outline" className="font-mono text-xs">
+                        {id.slice(0, 8)}...
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            Locked Indexes
+            <Badge variant="secondary">{indexes ? Object.keys(indexes).length : 0}</Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!indexes || Object.keys(indexes).length === 0 ? (
+            <p className="text-sm text-muted-foreground">No locked indexes</p>
+          ) : (
+            <div className="space-y-2">
+              {Object.entries(indexes).map(([key, ids]) => (
+                <div key={key}>
+                  <span className="text-xs font-medium">{key}:</span>
+                  <div className="ml-2 flex flex-wrap gap-1 mt-1">
+                    {ids.map((id) => (
+                      <Badge key={id} variant="outline" className="font-mono text-xs">
+                        {id.slice(0, 8)}...
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/admin/TraceControls.tsx b/clients/shock-ui/src/components/admin/TraceControls.tsx
new file mode 100644
index 0000000..a1800da
--- /dev/null
+++ b/clients/shock-ui/src/components/admin/TraceControls.tsx
@@ -0,0 +1,167 @@
+import { useState } from "react";
+import {
+  useStartTrace,
+  useStopTrace,
+  useTraceSummary,
+  useTraceEvents,
+  useDownloadTrace,
+} from "shock-client/react";
+import { Button } from "@/components/ui/button";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Play, Square, Download, Loader2 } from "lucide-react";
+
+export function TraceControls() {
+  const startTrace = useStartTrace();
+  const stopTrace = useStopTrace();
+  const downloadTrace = useDownloadTrace();
+  const [showAnalysis, setShowAnalysis] = useState(false);
+
+  const { data: summary, isLoading: summaryLoading, error: summaryError } =
+    useTraceSummary(showAnalysis);
+  const { data: events, isLoading: eventsLoading, error: eventsError } =
+    useTraceEvents(showAnalysis);
+
+  const handleDownload = () => {
+    downloadTrace.mutate(undefined, {
+      onSuccess: (blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `trace-${Date.now()}.log`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      },
+    });
+  };
+
+  const handleStop = () => {
+    stopTrace.mutate(undefined, {
+      onSuccess: () => {
+        // Show analysis tabs after stopping
+        setShowAnalysis(true);
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Controls */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Capture</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Capture a runtime execution trace, then download the raw file or
+            view a summary. Raw files can be analyzed locally with{" "}
+            <code className="rounded bg-muted px-1 text-xs">go tool trace</code>.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              onClick={() => startTrace.mutate()}
+              disabled={startTrace.isPending}
+            >
+              <Play className="mr-2 h-4 w-4" />
+              {startTrace.isPending ? "Starting..." : "Start Trace"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleStop}
+              disabled={stopTrace.isPending}
+            >
+              <Square className="mr-2 h-4 w-4" />
+              {stopTrace.isPending ? "Stopping..." : "Stop Trace"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleDownload}
+              disabled={downloadTrace.isPending}
+            >
+              {downloadTrace.isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Download className="mr-2 h-4 w-4" />
+              )}
+              Download
+            </Button>
+          </div>
+          {startTrace.data && (
+            <p className="text-sm text-green-600 dark:text-green-400">{startTrace.data}</p>
+          )}
+          {stopTrace.data && (
+            <p className="text-sm text-green-600 dark:text-green-400">{stopTrace.data}</p>
+          )}
+          {downloadTrace.error && (
+            <p className="text-sm text-destructive">{downloadTrace.error.message}</p>
+          )}
+          {(startTrace.error || stopTrace.error) && (
+            <p className="text-sm text-destructive">
+              {(startTrace.error ?? stopTrace.error)?.message}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Analysis */}
+      {!showAnalysis ? (
+        <Button variant="secondary" onClick={() => setShowAnalysis(true)}>
+          Load trace analysis
+        </Button>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Analysis</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="summary">
+              <TabsList>
+                <TabsTrigger value="summary">Footprint Summary</TabsTrigger>
+                <TabsTrigger value="events">Parsed Events</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="summary">
+                {summaryLoading ? (
+                  <Skeleton className="h-48" />
+                ) : summaryError ? (
+                  <p className="py-4 text-sm text-destructive">
+                    {summaryError.message}
+                  </p>
+                ) : summary ? (
+                  <pre className="max-h-[500px] overflow-auto rounded-md bg-muted p-4 text-xs font-mono">
+                    {summary}
+                  </pre>
+                ) : (
+                  <p className="py-4 text-sm text-muted-foreground">
+                    No trace data. Start and stop a trace first.
+                  </p>
+                )}
+              </TabsContent>
+
+              <TabsContent value="events">
+                {eventsLoading ? (
+                  <Skeleton className="h-48" />
+                ) : eventsError ? (
+                  <p className="py-4 text-sm text-destructive">
+                    {eventsError.message}
+                  </p>
+                ) : events ? (
+                  <pre className="max-h-[500px] overflow-auto rounded-md bg-muted p-4 text-xs font-mono leading-relaxed">
+                    {events}
+                  </pre>
+                ) : (
+                  <p className="py-4 text-sm text-muted-foreground">
+                    No trace data. Start and stop a trace first.
+                  </p>
+                )}
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/auth/LoginForm.tsx b/clients/shock-ui/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..61e4dae
--- /dev/null
+++ b/clients/shock-ui/src/components/auth/LoginForm.tsx
@@ -0,0 +1,76 @@
+import { useState, type FormEvent } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Database } from "lucide-react";
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await login(username, password);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+          <Database className="h-6 w-6 text-primary" />
+        </div>
+        <CardTitle className="text-xl">Shock</CardTitle>
+        <CardDescription>Sign in to your account</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="username" className="text-sm font-medium">
+              Username
+            </label>
+            <Input
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter username"
+              autoComplete="username"
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="password" className="text-sm font-medium">
+              Password
+            </label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter password"
+              autoComplete="current-password"
+              required
+            />
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? "Signing in..." : "Sign in"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/clients/shock-ui/src/components/auth/ProtectedRoute.tsx b/clients/shock-ui/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 0000000..f4a6ba6
--- /dev/null
+++ b/clients/shock-ui/src/components/auth/ProtectedRoute.tsx
@@ -0,0 +1,24 @@
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "@/hooks/use-auth";
+import type { ReactNode } from "react";
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { isAuthenticated } = useAuth();
+  const location = useLocation();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/ui/login" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export function AdminRoute({ children }: { children: ReactNode }) {
+  const { isAdmin } = useAuth();
+
+  if (!isAdmin) {
+    return <Navigate to="/ui/nodes" replace />;
+  }
+
+  return <>{children}</>;
+}
diff --git a/clients/shock-ui/src/components/download/DownloadButton.tsx b/clients/shock-ui/src/components/download/DownloadButton.tsx
new file mode 100644
index 0000000..dbb2a21
--- /dev/null
+++ b/clients/shock-ui/src/components/download/DownloadButton.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { useShockClient } from "shock-client/react";
+import { Button } from "@/components/ui/button";
+import { Download, Loader2 } from "lucide-react";
+
+interface DownloadButtonProps {
+  nodeId: string;
+  fileName: string;
+}
+
+export function DownloadButton({ nodeId, fileName }: DownloadButtonProps) {
+  const client = useShockClient();
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    try {
+      const blob = await client.downloadFile(nodeId);
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fileName || "download";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Download failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button onClick={handleDownload} disabled={loading}>
+      {loading ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <Download className="mr-2 h-4 w-4" />
+      )}
+      Download
+    </Button>
+  );
+}
diff --git a/clients/shock-ui/src/components/download/PreAuthButton.tsx b/clients/shock-ui/src/components/download/PreAuthButton.tsx
new file mode 100644
index 0000000..2bde64f
--- /dev/null
+++ b/clients/shock-ui/src/components/download/PreAuthButton.tsx
@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useShockClient } from "shock-client/react";
+import { Button } from "@/components/ui/button";
+import { Link2, Check, Loader2 } from "lucide-react";
+
+interface PreAuthButtonProps {
+  nodeId: string;
+}
+
+export function PreAuthButton({ nodeId }: PreAuthButtonProps) {
+  const client = useShockClient();
+  const [url, setUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const handleGetUrl = async () => {
+    setLoading(true);
+    try {
+      const result = await client.getDownloadUrl(nodeId);
+      setUrl(result.url);
+    } catch (err) {
+      console.error("Failed to get download URL:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!url) return;
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (url) {
+    return (
+      <div className="space-y-2">
+        <div className="flex gap-2">
+          <input
+            readOnly
+            value={url}
+            className="flex-1 rounded-md border bg-muted px-3 py-2 text-xs font-mono"
+          />
+          <Button variant="outline" size="sm" onClick={handleCopy}>
+            {copied ? <Check className="h-4 w-4" /> : "Copy"}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Button variant="outline" onClick={handleGetUrl} disabled={loading}>
+      {loading ? (
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      ) : (
+        <Link2 className="mr-2 h-4 w-4" />
+      )}
+      Pre-Auth URL
+    </Button>
+  );
+}
diff --git a/clients/shock-ui/src/components/indexes/IndexList.tsx b/clients/shock-ui/src/components/indexes/IndexList.tsx
new file mode 100644
index 0000000..99bb6bf
--- /dev/null
+++ b/clients/shock-ui/src/components/indexes/IndexList.tsx
@@ -0,0 +1,97 @@
+import type { IdxInfo } from "shock-client";
+import { useCreateIndex, useDeleteIndex } from "shock-client/react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, Lock } from "lucide-react";
+import { formatDate } from "@/lib/utils";
+
+interface IndexListProps {
+  nodeId: string;
+  indexes: Record<string, IdxInfo>;
+}
+
+export function IndexList({ nodeId, indexes }: IndexListProps) {
+  const createIndex = useCreateIndex(nodeId);
+  const deleteIndex = useDeleteIndex(nodeId);
+  const [newType, setNewType] = useState("");
+
+  const entries = Object.entries(indexes);
+
+  const handleCreate = () => {
+    const trimmed = newType.trim();
+    if (!trimmed) return;
+    createIndex.mutate(trimmed);
+    setNewType("");
+  };
+
+  return (
+    <div className="space-y-4">
+      {entries.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No indexes</p>
+      ) : (
+        <div className="overflow-x-auto rounded-lg border">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b bg-muted/50">
+                <th className="px-4 py-2 text-left font-medium">Type</th>
+                <th className="px-4 py-2 text-right font-medium">Units</th>
+                <th className="px-4 py-2 text-right font-medium">Avg Size</th>
+                <th className="px-4 py-2 text-left font-medium">Created</th>
+                <th className="px-4 py-2 text-right font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(([type, info]) => (
+                <tr key={type} className="border-b">
+                  <td className="px-4 py-2 flex items-center gap-2">
+                    <span className="font-mono text-xs">{type}</span>
+                    {info.locked && (
+                      <Badge variant="secondary" className="gap-1">
+                        <Lock className="h-3 w-3" /> locked
+                      </Badge>
+                    )}
+                  </td>
+                  <td className="px-4 py-2 text-right tabular-nums">{info.total_units}</td>
+                  <td className="px-4 py-2 text-right tabular-nums">{info.average_unit_size}</td>
+                  <td className="px-4 py-2 text-muted-foreground">{formatDate(info.created_on)}</td>
+                  <td className="px-4 py-2 text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => deleteIndex.mutate(type)}
+                      disabled={deleteIndex.isPending}
+                      title="Delete index"
+                    >
+                      <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <Input
+          value={newType}
+          onChange={(e) => setNewType(e.target.value)}
+          placeholder="Index type (e.g., size, line, chunkrecord)"
+          className="h-8 text-sm"
+          onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleCreate}
+          disabled={!newType.trim() || createIndex.isPending}
+        >
+          <Plus className="mr-1 h-3 w-3" />
+          Create
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/layout/AppShell.tsx b/clients/shock-ui/src/components/layout/AppShell.tsx
new file mode 100644
index 0000000..265448d
--- /dev/null
+++ b/clients/shock-ui/src/components/layout/AppShell.tsx
@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { Outlet } from "react-router-dom";
+import { Sidebar } from "./Sidebar";
+import { Header } from "./Header";
+
+export function AppShell() {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/layout/Header.tsx b/clients/shock-ui/src/components/layout/Header.tsx
new file mode 100644
index 0000000..f713c3e
--- /dev/null
+++ b/clients/shock-ui/src/components/layout/Header.tsx
@@ -0,0 +1,49 @@
+import { useServerInfo } from "shock-client/react";
+import { useAuth } from "@/hooks/use-auth";
+import { Button } from "@/components/ui/button";
+import { LogOut, Sun, Moon } from "lucide-react";
+import { useCallback, useState, useEffect } from "react";
+
+export function Header() {
+  const { data: serverInfo } = useServerInfo();
+  const { username, logout } = useAuth();
+  const [dark, setDark] = useState(() =>
+    document.documentElement.classList.contains("dark")
+  );
+
+  const toggleTheme = useCallback(() => {
+    setDark((prev) => {
+      const next = !prev;
+      document.documentElement.classList.toggle("dark", next);
+      return next;
+    });
+  }, []);
+
+  // sync on mount
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+  }, [dark]);
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b bg-card px-4">
+      <div className="flex items-center gap-3">
+        {serverInfo && (
+          <span className="text-sm text-muted-foreground">
+            {serverInfo.type} v{serverInfo.version}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={toggleTheme}>
+          {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </Button>
+        {username && (
+          <span className="text-sm text-muted-foreground">{username}</span>
+        )}
+        <Button variant="ghost" size="icon" onClick={logout}>
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+    </header>
+  );
+}
diff --git a/clients/shock-ui/src/components/layout/Sidebar.tsx b/clients/shock-ui/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..0919348
--- /dev/null
+++ b/clients/shock-ui/src/components/layout/Sidebar.tsx
@@ -0,0 +1,107 @@
+import { NavLink } from "react-router-dom";
+import { cn } from "@/lib/utils";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  Database,
+  Upload,
+  Settings,
+  Shield,
+  MapPin,
+  Lock,
+  Activity,
+  LayoutDashboard,
+  PanelLeftClose,
+  PanelLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface SidebarProps {
+  collapsed: boolean;
+  onToggle: () => void;
+}
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  cn(
+    "flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
+    isActive
+      ? "bg-accent text-accent-foreground"
+      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+  );
+
+export function Sidebar({ collapsed, onToggle }: SidebarProps) {
+  const { isAdmin } = useAuth();
+
+  return (
+    <aside
+      className={cn(
+        "flex h-full flex-col border-r bg-card transition-all duration-200",
+        collapsed ? "w-14" : "w-56"
+      )}
+    >
+      <div className="flex h-14 items-center border-b px-3">
+        {!collapsed && (
+          <span className="text-lg font-bold tracking-tight">Shock</span>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn("ml-auto", collapsed && "mx-auto")}
+          onClick={onToggle}
+        >
+          {collapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+        </Button>
+      </div>
+
+      <nav className="flex-1 space-y-1 p-2">
+        <NavLink to="/ui/nodes" className={navLinkClass}>
+          <Database className="h-4 w-4 shrink-0" />
+          {!collapsed && <span>Nodes</span>}
+        </NavLink>
+        <NavLink to="/ui/upload" className={navLinkClass}>
+          <Upload className="h-4 w-4 shrink-0" />
+          {!collapsed && <span>Upload</span>}
+        </NavLink>
+        <NavLink to="/ui/settings" className={navLinkClass}>
+          <Settings className="h-4 w-4 shrink-0" />
+          {!collapsed && <span>Settings</span>}
+        </NavLink>
+
+        {isAdmin && (
+          <>
+            <div className={cn("my-3 border-t", collapsed && "mx-1")} />
+            {!collapsed && (
+              <p className="px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Admin
+              </p>
+            )}
+            <NavLink to="/ui/admin" end className={navLinkClass}>
+              <LayoutDashboard className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>Dashboard</span>}
+            </NavLink>
+            <NavLink to="/ui/admin/locations" className={navLinkClass}>
+              <MapPin className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>Locations</span>}
+            </NavLink>
+            <NavLink to="/ui/admin/locker" className={navLinkClass}>
+              <Lock className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>Locker</span>}
+            </NavLink>
+            <NavLink to="/ui/admin/trace" className={navLinkClass}>
+              <Activity className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>Trace</span>}
+            </NavLink>
+          </>
+        )}
+      </nav>
+
+      {!collapsed && (
+        <div className="border-t p-3">
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Shield className="h-3 w-3" />
+            <span>{isAdmin ? "Admin" : "User"}</span>
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/clients/shock-ui/src/components/nodes/AttributeEditor.tsx b/clients/shock-ui/src/components/nodes/AttributeEditor.tsx
new file mode 100644
index 0000000..58a647f
--- /dev/null
+++ b/clients/shock-ui/src/components/nodes/AttributeEditor.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { useUpdateAttributes } from "shock-client/react";
+import { Button } from "@/components/ui/button";
+import { Save, RotateCcw } from "lucide-react";
+
+interface AttributeEditorProps {
+  nodeId: string;
+  attributes: unknown;
+}
+
+export function AttributeEditor({ nodeId, attributes }: AttributeEditorProps) {
+  const original = JSON.stringify(attributes, null, 2) || "{}";
+  const [text, setText] = useState(original);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const updateAttrs = useUpdateAttributes(nodeId);
+
+  const isDirty = text !== original;
+
+  const handleSave = () => {
+    try {
+      const parsed = JSON.parse(text);
+      setParseError(null);
+      updateAttrs.mutate({ attributes: parsed });
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Invalid JSON");
+    }
+  };
+
+  const handleReset = () => {
+    setText(original);
+    setParseError(null);
+  };
+
+  return (
+    <div className="space-y-3">
+      <textarea
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value);
+          setParseError(null);
+        }}
+        className="h-64 w-full rounded-md border bg-muted/30 p-3 font-mono text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+        spellCheck={false}
+      />
+      {parseError && (
+        <p className="text-sm text-destructive">{parseError}</p>
+      )}
+      {updateAttrs.error && (
+        <p className="text-sm text-destructive">{updateAttrs.error.message}</p>
+      )}
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          onClick={handleSave}
+          disabled={!isDirty || updateAttrs.isPending}
+        >
+          <Save className="mr-1 h-3 w-3" />
+          {updateAttrs.isPending ? "Saving..." : "Save"}
+        </Button>
+        <Button variant="outline" size="sm" onClick={handleReset} disabled={!isDirty}>
+          <RotateCcw className="mr-1 h-3 w-3" />
+          Reset
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/nodes/NodeFilters.tsx b/clients/shock-ui/src/components/nodes/NodeFilters.tsx
new file mode 100644
index 0000000..c2c08fc
--- /dev/null
+++ b/clients/shock-ui/src/components/nodes/NodeFilters.tsx
@@ -0,0 +1,84 @@
+import { useState, type FormEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, X } from "lucide-react";
+
+interface NodeFiltersProps {
+  onSearch: (query: Record<string, string>) => void;
+  onSort: (field: string, direction: "asc" | "desc") => void;
+  onClear: () => void;
+}
+
+export function NodeFilters({ onSearch, onSort, onClear }: NodeFiltersProps) {
+  const [filterText, setFilterText] = useState("");
+  const [sortField, setSortField] = useState("created_on");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const query: Record<string, string> = {};
+    // Parse key=value pairs separated by spaces
+    const parts = filterText.trim().split(/\s+/);
+    for (const part of parts) {
+      const eqIdx = part.indexOf("=");
+      if (eqIdx > 0) {
+        query[part.slice(0, eqIdx)] = part.slice(eqIdx + 1);
+      }
+    }
+    onSearch(query);
+  };
+
+  const handleSortChange = (field: string) => {
+    const newDir = field === sortField && sortDir === "desc" ? "asc" : "desc";
+    setSortField(field);
+    setSortDir(newDir);
+    onSort(field, newDir);
+  };
+
+  return (
+    <div className="space-y-3">
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={filterText}
+            onChange={(e) => setFilterText(e.target.value)}
+            placeholder='Filter: key=value (e.g. attributes.type=metagenome)'
+            className="pl-9"
+          />
+        </div>
+        <Button type="submit" variant="secondary" size="default">
+          Search
+        </Button>
+        {filterText && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => {
+              setFilterText("");
+              onClear();
+            }}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </form>
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>Sort by:</span>
+        {["created_on", "file.name", "file.size", "last_modified"].map((field) => (
+          <button
+            key={field}
+            onClick={() => handleSortChange(field)}
+            className={`rounded px-2 py-1 transition-colors ${
+              sortField === field ? "bg-accent text-accent-foreground" : "hover:bg-accent"
+            }`}
+          >
+            {field.replace("file.", "").replace("_", " ")}
+            {sortField === field && (sortDir === "asc" ? " ↑" : " ↓")}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/nodes/NodeTable.tsx b/clients/shock-ui/src/components/nodes/NodeTable.tsx
new file mode 100644
index 0000000..c81068c
--- /dev/null
+++ b/clients/shock-ui/src/components/nodes/NodeTable.tsx
@@ -0,0 +1,89 @@
+import { Link } from "react-router-dom";
+import type { ShockNode } from "shock-client";
+import { formatBytes, formatDate } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { FileText, Trash2, Eye } from "lucide-react";
+
+interface NodeTableProps {
+  nodes: ShockNode[];
+  onDelete: (id: string) => void;
+  deleting?: string;
+}
+
+export function NodeTable({ nodes, onDelete, deleting }: NodeTableProps) {
+  if (nodes.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <FileText className="mb-2 h-8 w-8" />
+        <p>No nodes found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto rounded-lg border">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b bg-muted/50">
+            <th className="px-4 py-3 text-left font-medium">Name</th>
+            <th className="px-4 py-3 text-left font-medium">ID</th>
+            <th className="px-4 py-3 text-right font-medium">Size</th>
+            <th className="px-4 py-3 text-left font-medium">Format</th>
+            <th className="px-4 py-3 text-left font-medium">Created</th>
+            <th className="px-4 py-3 text-right font-medium">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {nodes.map((node) => (
+            <tr key={node.id} className="border-b transition-colors hover:bg-muted/30">
+              <td className="px-4 py-3">
+                <Link
+                  to={`/ui/nodes/${node.id}`}
+                  className="font-medium text-primary hover:underline"
+                >
+                  {node.file.name || "(unnamed)"}
+                </Link>
+                {node.file.locked && (
+                  <Badge variant="secondary" className="ml-2">locked</Badge>
+                )}
+              </td>
+              <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                {node.id.slice(0, 8)}...
+              </td>
+              <td className="px-4 py-3 text-right tabular-nums">
+                {node.file.size > 0 ? formatBytes(node.file.size) : "-"}
+              </td>
+              <td className="px-4 py-3">
+                {node.file.format ? (
+                  <Badge variant="outline">{node.file.format}</Badge>
+                ) : "-"}
+              </td>
+              <td className="px-4 py-3 text-muted-foreground">
+                {formatDate(node.created_on)}
+              </td>
+              <td className="px-4 py-3 text-right">
+                <div className="flex items-center justify-end gap-1">
+                  <Link to={`/ui/nodes/${node.id}`}>
+                    <Button variant="ghost" size="icon" title="View">
+                      <Eye className="h-3.5 w-3.5" />
+                    </Button>
+                  </Link>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => onDelete(node.id)}
+                    disabled={deleting === node.id}
+                    title="Delete"
+                  >
+                    <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/nodes/Pagination.tsx b/clients/shock-ui/src/components/nodes/Pagination.tsx
new file mode 100644
index 0000000..6be0977
--- /dev/null
+++ b/clients/shock-ui/src/components/nodes/Pagination.tsx
@@ -0,0 +1,62 @@
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface PaginationProps {
+  offset: number;
+  limit: number;
+  totalCount: number;
+  onOffsetChange: (offset: number) => void;
+  onLimitChange: (limit: number) => void;
+}
+
+export function Pagination({ offset, limit, totalCount, onOffsetChange, onLimitChange }: PaginationProps) {
+  const currentPage = Math.floor(offset / limit) + 1;
+  const totalPages = Math.max(1, Math.ceil(totalCount / limit));
+  const hasPrev = offset > 0;
+  const hasNext = offset + limit < totalCount;
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <span>
+          {totalCount === 0
+            ? "No results"
+            : `${offset + 1}-${Math.min(offset + limit, totalCount)} of ${totalCount}`}
+        </span>
+        <select
+          value={limit}
+          onChange={(e) => {
+            onLimitChange(Number(e.target.value));
+            onOffsetChange(0);
+          }}
+          className="h-8 rounded-md border bg-background px-2 text-sm"
+        >
+          {[10, 25, 50, 100].map((n) => (
+            <option key={n} value={n}>{n} per page</option>
+          ))}
+        </select>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onOffsetChange(Math.max(0, offset - limit))}
+          disabled={!hasPrev}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <span className="px-2 text-sm">
+          {currentPage} / {totalPages}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onOffsetChange(offset + limit)}
+          disabled={!hasNext}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/ui/badge.tsx b/clients/shock-ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000..441b7ef
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/clients/shock-ui/src/components/ui/button.tsx b/clients/shock-ui/src/components/ui/button.tsx
new file mode 100644
index 0000000..520bbae
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/clients/shock-ui/src/components/ui/card.tsx b/clients/shock-ui/src/components/ui/card.tsx
new file mode 100644
index 0000000..72a6e7b
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/card.tsx
@@ -0,0 +1,39 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };
diff --git a/clients/shock-ui/src/components/ui/input.tsx b/clients/shock-ui/src/components/ui/input.tsx
new file mode 100644
index 0000000..74bafba
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/clients/shock-ui/src/components/ui/skeleton.tsx b/clients/shock-ui/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..6d9a616
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
+}
+
+export { Skeleton };
diff --git a/clients/shock-ui/src/components/ui/tabs.tsx b/clients/shock-ui/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..5b09119
--- /dev/null
+++ b/clients/shock-ui/src/components/ui/tabs.tsx
@@ -0,0 +1,58 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+const TabsContext = createContext<{ value: string; onChange: (v: string) => void } | null>(null);
+
+function Tabs({ defaultValue, value: controlled, onValueChange, children, className }: {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: ReactNode;
+  className?: string;
+}) {
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const value = controlled ?? internal;
+  const onChange = onValueChange ?? setInternal;
+  return (
+    <TabsContext.Provider value={{ value, onChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+function TabsList({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div role="tablist" className={cn("inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className)}>
+      {children}
+    </div>
+  );
+}
+
+function TabsTrigger({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
+  const ctx = useContext(TabsContext)!;
+  const selected = ctx.value === value;
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={selected}
+      tabIndex={selected ? 0 : -1}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2",
+        selected && "bg-background text-foreground shadow",
+        className
+      )}
+      onClick={() => ctx.onChange(value)}
+    >
+      {children}
+    </button>
+  );
+}
+
+function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
+  const ctx = useContext(TabsContext)!;
+  if (ctx.value !== value) return null;
+  return <div role="tabpanel" className={cn("mt-2", className)}>{children}</div>;
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/clients/shock-ui/src/components/upload/UploadProgress.tsx b/clients/shock-ui/src/components/upload/UploadProgress.tsx
new file mode 100644
index 0000000..37cd4b9
--- /dev/null
+++ b/clients/shock-ui/src/components/upload/UploadProgress.tsx
@@ -0,0 +1,27 @@
+import type { UploadProgress as ProgressData } from "shock-client";
+import { formatBytes } from "@/lib/utils";
+
+interface UploadProgressProps {
+  progress: ProgressData;
+  fileName: string;
+}
+
+export function UploadProgress({ progress, fileName }: UploadProgressProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <span className="truncate font-medium">{fileName}</span>
+        <span className="text-muted-foreground">{progress.percent}%</span>
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-secondary">
+        <div
+          className="h-full rounded-full bg-primary transition-all duration-300"
+          style={{ width: `${progress.percent}%` }}
+        />
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {formatBytes(progress.loaded)} / {formatBytes(progress.total)}
+      </p>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/components/upload/UploadZone.tsx b/clients/shock-ui/src/components/upload/UploadZone.tsx
new file mode 100644
index 0000000..e961290
--- /dev/null
+++ b/clients/shock-ui/src/components/upload/UploadZone.tsx
@@ -0,0 +1,81 @@
+import { useCallback, useState, useRef, type DragEvent } from "react";
+import { cn } from "@/lib/utils";
+import { Upload, FileUp } from "lucide-react";
+
+interface UploadZoneProps {
+  onFileSelect: (file: File) => void;
+  disabled?: boolean;
+}
+
+export function UploadZone({ onFileSelect, disabled }: UploadZoneProps) {
+  const [dragActive, setDragActive] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleDrag = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      if (disabled) return;
+      const file = e.dataTransfer.files[0];
+      if (file) onFileSelect(file);
+    },
+    [onFileSelect, disabled]
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) onFileSelect(file);
+      // reset so the same file can be re-selected
+      e.target.value = "";
+    },
+    [onFileSelect]
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-[200px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+        dragActive
+          ? "border-primary bg-primary/5"
+          : "border-muted-foreground/25 hover:border-muted-foreground/50",
+        disabled && "cursor-not-allowed opacity-50"
+      )}
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+      onClick={() => !disabled && inputRef.current?.click()}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        className="hidden"
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      {dragActive ? (
+        <FileUp className="mb-3 h-10 w-10 text-primary" />
+      ) : (
+        <Upload className="mb-3 h-10 w-10 text-muted-foreground" />
+      )}
+      <p className="text-sm font-medium">
+        {dragActive ? "Drop file here" : "Drag & drop or click to upload"}
+      </p>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Any file type supported
+      </p>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/hooks/use-auth.ts b/clients/shock-ui/src/hooks/use-auth.ts
new file mode 100644
index 0000000..0e9f36b
--- /dev/null
+++ b/clients/shock-ui/src/hooks/use-auth.ts
@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+export interface AuthState {
+  token: string | undefined;
+  username: string | undefined;
+  isAdmin: boolean;
+  isAuthenticated: boolean;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+export const AuthContext = createContext<AuthState | null>(null);
+
+export function useAuth(): AuthState {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return ctx;
+}
diff --git a/clients/shock-ui/src/hooks/use-is-admin.ts b/clients/shock-ui/src/hooks/use-is-admin.ts
new file mode 100644
index 0000000..cd89489
--- /dev/null
+++ b/clients/shock-ui/src/hooks/use-is-admin.ts
@@ -0,0 +1,6 @@
+import { useAuth } from "./use-auth";
+
+export function useIsAdmin(): boolean {
+  const { isAdmin } = useAuth();
+  return isAdmin;
+}
diff --git a/clients/shock-ui/src/index.css b/clients/shock-ui/src/index.css
new file mode 100644
index 0000000..ca99e3b
--- /dev/null
+++ b/clients/shock-ui/src/index.css
@@ -0,0 +1,53 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.965 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.965 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.965 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.922 0 0);
+  --color-input: oklch(0.922 0 0);
+  --color-ring: oklch(0.708 0 0);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+}
+
+.dark {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.205 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.205 0 0);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.269 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-accent: oklch(0.269 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.396 0.141 25.723);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.269 0 0);
+  --color-input: oklch(0.269 0 0);
+  --color-ring: oklch(0.439 0 0);
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
diff --git a/clients/shock-ui/src/lib/api-url.ts b/clients/shock-ui/src/lib/api-url.ts
new file mode 100644
index 0000000..78311f9
--- /dev/null
+++ b/clients/shock-ui/src/lib/api-url.ts
@@ -0,0 +1,10 @@
+/** Returns the Shock API base URL.
+ *  - Dev mode: direct to :7445 (bypasses Vite proxy, avoids root-path conflict)
+ *  - Production (embedded): same-origin (empty string)
+ */
+export function getApiUrl(): string {
+  if (import.meta.env.DEV) {
+    return `${window.location.protocol}//${window.location.hostname}:7445`;
+  }
+  return "";
+}
diff --git a/clients/shock-ui/src/lib/auth.ts b/clients/shock-ui/src/lib/auth.ts
new file mode 100644
index 0000000..59e192a
--- /dev/null
+++ b/clients/shock-ui/src/lib/auth.ts
@@ -0,0 +1,27 @@
+const TOKEN_KEY = "shock_auth_token";
+const USER_KEY = "shock_auth_user";
+const ADMIN_KEY = "shock_is_admin";
+
+export function getStoredToken(): string | undefined {
+  return sessionStorage.getItem(TOKEN_KEY) ?? undefined;
+}
+
+export function getStoredUser(): string | undefined {
+  return sessionStorage.getItem(USER_KEY) ?? undefined;
+}
+
+export function getStoredAdmin(): boolean {
+  return sessionStorage.getItem(ADMIN_KEY) === "true";
+}
+
+export function storeAuth(token: string, username: string, isAdmin: boolean): void {
+  sessionStorage.setItem(TOKEN_KEY, token);
+  sessionStorage.setItem(USER_KEY, username);
+  sessionStorage.setItem(ADMIN_KEY, String(isAdmin));
+}
+
+export function clearAuth(): void {
+  sessionStorage.removeItem(TOKEN_KEY);
+  sessionStorage.removeItem(USER_KEY);
+  sessionStorage.removeItem(ADMIN_KEY);
+}
diff --git a/clients/shock-ui/src/lib/utils.ts b/clients/shock-ui/src/lib/utils.ts
new file mode 100644
index 0000000..cae820d
--- /dev/null
+++ b/clients/shock-ui/src/lib/utils.ts
@@ -0,0 +1,33 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatBytes(bytes: number, decimals = 1): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
+}
+
+export function formatDate(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return dateString;
+  }
+}
+
+export function encodeBasicAuth(username: string, password: string): string {
+  return btoa(`${username}:${password}`);
+}
diff --git a/clients/shock-ui/src/main.tsx b/clients/shock-ui/src/main.tsx
new file mode 100644
index 0000000..a93d054
--- /dev/null
+++ b/clients/shock-ui/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/clients/shock-ui/src/pages/AdminDashboardPage.tsx b/clients/shock-ui/src/pages/AdminDashboardPage.tsx
new file mode 100644
index 0000000..da96be3
--- /dev/null
+++ b/clients/shock-ui/src/pages/AdminDashboardPage.tsx
@@ -0,0 +1,10 @@
+import { Dashboard } from "@/components/admin/Dashboard";
+
+export function AdminDashboardPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Admin Dashboard</h1>
+      <Dashboard />
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/AdminLocationsPage.tsx b/clients/shock-ui/src/pages/AdminLocationsPage.tsx
new file mode 100644
index 0000000..59209a0
--- /dev/null
+++ b/clients/shock-ui/src/pages/AdminLocationsPage.tsx
@@ -0,0 +1,10 @@
+import { LocationBrowser } from "@/components/admin/LocationBrowser";
+
+export function AdminLocationsPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Storage Locations</h1>
+      <LocationBrowser />
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/AdminLockerPage.tsx b/clients/shock-ui/src/pages/AdminLockerPage.tsx
new file mode 100644
index 0000000..328eb36
--- /dev/null
+++ b/clients/shock-ui/src/pages/AdminLockerPage.tsx
@@ -0,0 +1,10 @@
+import { LockerView } from "@/components/admin/LockerView";
+
+export function AdminLockerPage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Locker</h1>
+      <LockerView />
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/AdminTracePage.tsx b/clients/shock-ui/src/pages/AdminTracePage.tsx
new file mode 100644
index 0000000..e512d26
--- /dev/null
+++ b/clients/shock-ui/src/pages/AdminTracePage.tsx
@@ -0,0 +1,10 @@
+import { TraceControls } from "@/components/admin/TraceControls";
+
+export function AdminTracePage() {
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Execution Trace</h1>
+      <TraceControls />
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/LoginPage.tsx b/clients/shock-ui/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..8071f6c
--- /dev/null
+++ b/clients/shock-ui/src/pages/LoginPage.tsx
@@ -0,0 +1,17 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "@/hooks/use-auth";
+import { LoginForm } from "@/components/auth/LoginForm";
+
+export function LoginPage() {
+  const { isAuthenticated } = useAuth();
+
+  if (isAuthenticated) {
+    return <Navigate to="/ui/nodes" replace />;
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <LoginForm />
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/NodeDetailPage.tsx b/clients/shock-ui/src/pages/NodeDetailPage.tsx
new file mode 100644
index 0000000..9597b9d
--- /dev/null
+++ b/clients/shock-ui/src/pages/NodeDetailPage.tsx
@@ -0,0 +1,166 @@
+import { useParams, Link } from "react-router-dom";
+import { useNode } from "shock-client/react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { DownloadButton } from "@/components/download/DownloadButton";
+import { PreAuthButton } from "@/components/download/PreAuthButton";
+import { AclPanel } from "@/components/acl/AclPanel";
+import { IndexList } from "@/components/indexes/IndexList";
+import { AttributeEditor } from "@/components/nodes/AttributeEditor";
+import { formatBytes, formatDate } from "@/lib/utils";
+import { ArrowLeft } from "lucide-react";
+
+export function NodeDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const { data: node, isLoading, error } = useNode(id);
+
+  if (isLoading) {
+    return <div className="space-y-4"><Skeleton className="h-8 w-48" /><Skeleton className="h-64" /></div>;
+  }
+
+  if (error) {
+    return <p className="text-destructive">{error.message}</p>;
+  }
+
+  if (!node || !id) return null;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Link to="/ui/nodes" className="text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="h-5 w-5" />
+        </Link>
+        <div>
+          <h1 className="text-2xl font-bold">{node.file.name || "(unnamed)"}</h1>
+          <p className="font-mono text-xs text-muted-foreground">{node.id}</p>
+        </div>
+        {node.file.locked && <Badge variant="secondary">locked</Badge>}
+      </div>
+
+      {/* File info card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">File Info</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <div>
+              <p className="text-xs text-muted-foreground">Size</p>
+              <p className="font-mono">{node.file.size > 0 ? formatBytes(node.file.size) : "—"}</p>
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">Format</p>
+              <p>{node.file.format || "—"}</p>
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">Created</p>
+              <p>{formatDate(node.created_on)}</p>
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">Modified</p>
+              <p>{formatDate(node.last_modified)}</p>
+            </div>
+          </div>
+
+          {node.file.checksum && Object.keys(node.file.checksum).length > 0 && (
+            <div className="mt-4">
+              <p className="text-xs text-muted-foreground mb-1">Checksums</p>
+              <div className="space-y-1">
+                {Object.entries(node.file.checksum).map(([alg, hash]) => (
+                  <div key={alg} className="flex gap-2">
+                    <Badge variant="outline" className="text-xs">{alg}</Badge>
+                    <span className="font-mono text-xs break-all">{hash}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {node.file.size > 0 && (
+            <div className="mt-4 flex gap-2">
+              <DownloadButton nodeId={id} fileName={node.file.name} />
+              <PreAuthButton nodeId={id} />
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Tabs for attributes, ACL, indexes, locations */}
+      <Tabs defaultValue="attributes">
+        <TabsList>
+          <TabsTrigger value="attributes">Attributes</TabsTrigger>
+          <TabsTrigger value="acl">ACL</TabsTrigger>
+          <TabsTrigger value="indexes">
+            Indexes ({Object.keys(node.indexes).length})
+          </TabsTrigger>
+          <TabsTrigger value="locations">
+            Locations ({node.locations?.length ?? 0})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="attributes">
+          <Card>
+            <CardContent className="pt-6">
+              <AttributeEditor nodeId={id} attributes={node.attributes} />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="acl">
+          <Card>
+            <CardContent className="pt-6">
+              <AclPanel nodeId={id} />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="indexes">
+          <Card>
+            <CardContent className="pt-6">
+              <IndexList nodeId={id} indexes={node.indexes} />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="locations">
+          <Card>
+            <CardContent className="pt-6">
+              {node.locations && node.locations.length > 0 ? (
+                <div className="overflow-x-auto rounded-lg border">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="border-b bg-muted/50">
+                        <th className="px-4 py-2 text-left font-medium">ID</th>
+                        <th className="px-4 py-2 text-left font-medium">Stored</th>
+                        <th className="px-4 py-2 text-left font-medium">Requested</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {node.locations.map((loc) => (
+                        <tr key={loc.id} className="border-b">
+                          <td className="px-4 py-2 font-mono text-xs">{loc.id}</td>
+                          <td className="px-4 py-2">
+                            <Badge variant={loc.stored ? "default" : "secondary"}>
+                              {loc.stored ? "yes" : "pending"}
+                            </Badge>
+                          </td>
+                          <td className="px-4 py-2 text-muted-foreground">
+                            {loc.requestedDate ?? "—"}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">No storage locations</p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/NodesPage.tsx b/clients/shock-ui/src/pages/NodesPage.tsx
new file mode 100644
index 0000000..272d576
--- /dev/null
+++ b/clients/shock-ui/src/pages/NodesPage.tsx
@@ -0,0 +1,65 @@
+import { useState, useCallback } from "react";
+import { useNodes, useDeleteNode } from "shock-client/react";
+import type { NodeListQuery } from "shock-client";
+import { NodeTable } from "@/components/nodes/NodeTable";
+import { NodeFilters } from "@/components/nodes/NodeFilters";
+import { Pagination } from "@/components/nodes/Pagination";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getStoredPageSize } from "@/pages/SettingsPage";
+
+export function NodesPage() {
+  const [query, setQuery] = useState<NodeListQuery>({
+    limit: getStoredPageSize(),
+    offset: 0,
+    direction: "desc",
+    order: "created_on",
+  });
+
+  const { data, isLoading, error } = useNodes(query);
+  const deleteNode = useDeleteNode();
+
+  const handleSearch = useCallback((q: Record<string, string>) => {
+    setQuery((prev) => ({ ...prev, offset: 0, query: Object.keys(q).length > 0 ? q : undefined }));
+  }, []);
+
+  const handleSort = useCallback((field: string, direction: "asc" | "desc") => {
+    setQuery((prev) => ({ ...prev, order: field, direction }));
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setQuery((prev) => ({ ...prev, offset: 0, query: undefined }));
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Nodes</h1>
+
+      <NodeFilters onSearch={handleSearch} onSort={handleSort} onClear={handleClear} />
+
+      {error && (
+        <p className="text-sm text-destructive">{error.message}</p>
+      )}
+
+      {isLoading ? (
+        <div className="space-y-2">
+          {[1, 2, 3, 4, 5].map((i) => <Skeleton key={i} className="h-12" />)}
+        </div>
+      ) : data ? (
+        <>
+          <NodeTable
+            nodes={data.data}
+            onDelete={(id) => deleteNode.mutate(id)}
+            deleting={deleteNode.isPending ? deleteNode.variables : undefined}
+          />
+          <Pagination
+            offset={data.offset}
+            limit={data.limit}
+            totalCount={data.totalCount}
+            onOffsetChange={(offset) => setQuery((prev) => ({ ...prev, offset }))}
+            onLimitChange={(limit) => setQuery((prev) => ({ ...prev, limit }))}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/SettingsPage.tsx b/clients/shock-ui/src/pages/SettingsPage.tsx
new file mode 100644
index 0000000..71fff23
--- /dev/null
+++ b/clients/shock-ui/src/pages/SettingsPage.tsx
@@ -0,0 +1,229 @@
+import { useState, useCallback } from "react";
+import { useServerInfo } from "shock-client/react";
+import { useAuth } from "@/hooks/use-auth";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Check, Copy, Sun, Moon, Shield, User, Terminal } from "lucide-react";
+
+const PAGE_SIZE_KEY = "shock_page_size";
+
+export function getStoredPageSize(): number {
+  const stored = localStorage.getItem(PAGE_SIZE_KEY);
+  const parsed = stored ? Number(stored) : 25;
+  return Number.isFinite(parsed) ? parsed : 25;
+}
+
+export function setStoredPageSize(size: number): void {
+  localStorage.setItem(PAGE_SIZE_KEY, String(size));
+}
+
+function CopyField({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [value]);
+
+  return (
+    <div className="space-y-1">
+      <label className="text-xs font-medium text-muted-foreground">{label}</label>
+      <div className="flex gap-2">
+        <Input
+          readOnly
+          value={value}
+          className={`flex-1 ${mono ? "font-mono text-xs" : ""}`}
+          onClick={(e) => (e.target as HTMLInputElement).select()}
+        />
+        <Button variant="outline" size="sm" onClick={handleCopy} className="shrink-0">
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function SettingsPage() {
+  const { token, username, isAdmin } = useAuth();
+  const { data: serverInfo } = useServerInfo();
+  const [dark, setDark] = useState(() =>
+    document.documentElement.classList.contains("dark")
+  );
+  const [pageSize, setPageSize] = useState(getStoredPageSize);
+
+  const toggleTheme = useCallback(() => {
+    setDark((prev) => {
+      const next = !prev;
+      document.documentElement.classList.toggle("dark", next);
+      return next;
+    });
+  }, []);
+
+  const handlePageSizeChange = useCallback((size: number) => {
+    setPageSize(size);
+    setStoredPageSize(size);
+  }, []);
+
+  const authHeader = token ? `Basic ${token}` : "";
+  const serverUrl = serverInfo?.url?.replace(/\/$/, "") || window.location.origin;
+  const curlExample = `curl -H "Authorization: ${authHeader}" ${serverUrl}/node?limit=10`;
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <h1 className="text-2xl font-bold">Settings</h1>
+
+      {/* Account */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            <User className="h-4 w-4" />
+            Account
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium">{username}</span>
+            <Badge variant={isAdmin ? "default" : "secondary"}>
+              {isAdmin ? "Admin" : "User"}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* API Token */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm flex items-center gap-2">
+            <Terminal className="h-4 w-4" />
+            API Token
+          </CardTitle>
+          <CardDescription>
+            Use this header to authenticate API calls from scripts or the command line.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <CopyField
+            label="Authorization Header"
+            value={authHeader}
+            mono
+          />
+          <CopyField
+            label="curl Example"
+            value={curlExample}
+            mono
+          />
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-muted-foreground">Usage</label>
+            <pre className="rounded-md bg-muted p-3 text-xs font-mono overflow-auto leading-relaxed">
+{`# List nodes
+curl -H "Authorization: ${authHeader}" \\
+  ${serverUrl}/node?limit=10
+
+# Upload a file
+curl -X POST -H "Authorization: ${authHeader}" \\
+  -F "upload=@myfile.fasta" \\
+  ${serverUrl}/node
+
+# Download a file
+curl -H "Authorization: ${authHeader}" \\
+  -o output.dat \\
+  "${serverUrl}/node/<node-id>?download"`}
+            </pre>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Preferences */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Preferences</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Theme</p>
+              <p className="text-xs text-muted-foreground">Switch between light and dark mode</p>
+            </div>
+            <Button variant="outline" size="sm" onClick={toggleTheme}>
+              {dark ? (
+                <><Sun className="mr-2 h-4 w-4" /> Light</>
+              ) : (
+                <><Moon className="mr-2 h-4 w-4" /> Dark</>
+              )}
+            </Button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Default Page Size</p>
+              <p className="text-xs text-muted-foreground">Number of nodes per page in the browser</p>
+            </div>
+            <select
+              value={pageSize}
+              onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+              className="h-9 rounded-md border bg-background px-3 text-sm"
+            >
+              {[10, 25, 50, 100].map((n) => (
+                <option key={n} value={n}>{n}</option>
+              ))}
+            </select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Server Config (admin only) */}
+      {isAdmin && serverInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm flex items-center gap-2">
+              <Shield className="h-4 w-4" />
+              Server Configuration
+            </CardTitle>
+            <CardDescription>Read-only view of the running server configuration.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <div className="grid grid-cols-2 gap-y-2 gap-x-4">
+              <span className="text-muted-foreground">Version</span>
+              <span className="font-mono">{serverInfo.version}</span>
+
+              <span className="text-muted-foreground">Uptime</span>
+              <span>{serverInfo.uptime}</span>
+
+              <span className="text-muted-foreground">URL</span>
+              <span className="font-mono text-xs">{serverInfo.url}</span>
+
+              <span className="text-muted-foreground">Contact</span>
+              <span>{serverInfo.contact || "—"}</span>
+
+              <span className="text-muted-foreground">Auth Methods</span>
+              <span>{serverInfo.auth && serverInfo.auth.length > 0 ? serverInfo.auth.join(", ") : "basic"}</span>
+
+              <span className="text-muted-foreground">Anonymous Read</span>
+              <Badge variant={serverInfo.anonymous_permissions.read ? "default" : "outline"}>
+                {serverInfo.anonymous_permissions.read ? "allowed" : "denied"}
+              </Badge>
+
+              <span className="text-muted-foreground">Anonymous Write</span>
+              <Badge variant={serverInfo.anonymous_permissions.write ? "destructive" : "outline"}>
+                {serverInfo.anonymous_permissions.write ? "allowed" : "denied"}
+              </Badge>
+
+              <span className="text-muted-foreground">Anonymous Delete</span>
+              <Badge variant={serverInfo.anonymous_permissions.delete ? "destructive" : "outline"}>
+                {serverInfo.anonymous_permissions.delete ? "allowed" : "denied"}
+              </Badge>
+
+              <span className="text-muted-foreground">Attribute Indexes</span>
+              <span className="font-mono text-xs">
+                {serverInfo.attribute_indexes.filter(Boolean).join(", ") || "—"}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/pages/UploadPage.tsx b/clients/shock-ui/src/pages/UploadPage.tsx
new file mode 100644
index 0000000..b06bb6a
--- /dev/null
+++ b/clients/shock-ui/src/pages/UploadPage.tsx
@@ -0,0 +1,119 @@
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUpload } from "shock-client/react";
+import { UploadZone } from "@/components/upload/UploadZone";
+import { UploadProgress } from "@/components/upload/UploadProgress";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { CheckCircle } from "lucide-react";
+
+export function UploadPage() {
+  const navigate = useNavigate();
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [attrsText, setAttrsText] = useState("");
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const { upload, progress, isUploading, error, node, reset } = useUpload();
+
+  const handleFileSelect = useCallback((file: File) => {
+    setSelectedFile(file);
+  }, []);
+
+  const handleUpload = () => {
+    if (!selectedFile) return;
+
+    let attributes: Record<string, unknown> | undefined;
+    if (attrsText.trim()) {
+      try {
+        attributes = JSON.parse(attrsText);
+        setJsonError(null);
+      } catch (e) {
+        setJsonError(e instanceof Error ? e.message : "Invalid JSON");
+        return;
+      }
+    }
+
+    upload({
+      file: selectedFile,
+      fileName: selectedFile.name,
+      attributes,
+    });
+  };
+
+  if (node) {
+    return (
+      <div className="space-y-4">
+        <h1 className="text-2xl font-bold">Upload</h1>
+        <Card>
+          <CardContent className="flex flex-col items-center py-12">
+            <CheckCircle className="mb-4 h-12 w-12 text-green-500" />
+            <p className="text-lg font-medium">Upload complete!</p>
+            <p className="mt-1 text-sm text-muted-foreground font-mono">{node.id}</p>
+            <div className="mt-4 flex gap-2">
+              <Button onClick={() => navigate(`/ui/nodes/${node.id}`)}>
+                View Node
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  reset();
+                  setSelectedFile(null);
+                  setAttrsText("");
+                }}
+              >
+                Upload Another
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-bold">Upload</h1>
+
+      <UploadZone onFileSelect={handleFileSelect} disabled={isUploading} />
+
+      {selectedFile && !isUploading && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">
+              {selectedFile.name}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <label className="mb-1 block text-sm font-medium">
+                Attributes (optional JSON)
+              </label>
+              <textarea
+                value={attrsText}
+                onChange={(e) => { setAttrsText(e.target.value); setJsonError(null); }}
+                className="h-24 w-full rounded-md border bg-muted/30 p-3 font-mono text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+                placeholder='{"type": "metagenome", "project": "..."}'
+                spellCheck={false}
+              />
+            </div>
+            {jsonError && (
+              <p className="text-sm text-destructive">{jsonError}</p>
+            )}
+            <Button onClick={handleUpload}>Upload File</Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {isUploading && progress && selectedFile && (
+        <Card>
+          <CardContent className="py-6">
+            <UploadProgress progress={progress} fileName={selectedFile.name} />
+          </CardContent>
+        </Card>
+      )}
+
+      {error && (
+        <p className="text-sm text-destructive">{error.message}</p>
+      )}
+    </div>
+  );
+}
diff --git a/clients/shock-ui/src/providers/AuthProvider.tsx b/clients/shock-ui/src/providers/AuthProvider.tsx
new file mode 100644
index 0000000..7f10966
--- /dev/null
+++ b/clients/shock-ui/src/providers/AuthProvider.tsx
@@ -0,0 +1,69 @@
+import { useState, useCallback, type ReactNode } from "react";
+import { AuthContext, type AuthState } from "../hooks/use-auth";
+import {
+  getStoredToken,
+  getStoredUser,
+  getStoredAdmin,
+  storeAuth,
+  clearAuth,
+} from "../lib/auth";
+import { encodeBasicAuth } from "../lib/utils";
+import { getApiUrl } from "../lib/api-url";
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<string | undefined>(getStoredToken);
+  const [username, setUsername] = useState<string | undefined>(getStoredUser);
+  const [isAdmin, setIsAdmin] = useState(getStoredAdmin);
+
+  const login = useCallback(async (user: string, password: string) => {
+    const encoded = encodeBasicAuth(user, password);
+    const baseUrl = getApiUrl();
+
+    // Validate credentials by fetching node list
+    const res = await fetch(`${baseUrl}/node?limit=1`, {
+      headers: { Authorization: `Basic ${encoded}` },
+    });
+
+    if (!res.ok) {
+      const body = await res.json().catch(() => null);
+      const msg = body?.error?.[0] ?? `Authentication failed (HTTP ${res.status})`;
+      throw new Error(msg);
+    }
+
+    // Check admin status by trying /locker
+    let admin = false;
+    try {
+      const adminRes = await fetch(`${baseUrl}/locker`, {
+        headers: { Authorization: `Basic ${encoded}` },
+      });
+      admin = adminRes.ok;
+    } catch {
+      // Not admin, that's fine
+    }
+
+    storeAuth(encoded, user, admin);
+    setToken(encoded);
+    setUsername(user);
+    setIsAdmin(admin);
+  }, []);
+
+  const logout = useCallback(() => {
+    clearAuth();
+    setToken(undefined);
+    setUsername(undefined);
+    setIsAdmin(false);
+  }, []);
+
+  const value: AuthState = {
+    token,
+    username,
+    isAdmin,
+    isAuthenticated: Boolean(token),
+    login,
+    logout,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+  );
+}
diff --git a/clients/shock-ui/src/providers/ShockUIProvider.tsx b/clients/shock-ui/src/providers/ShockUIProvider.tsx
new file mode 100644
index 0000000..c1a4568
--- /dev/null
+++ b/clients/shock-ui/src/providers/ShockUIProvider.tsx
@@ -0,0 +1,46 @@
+import { type ReactNode, useMemo } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ShockProvider } from "shock-client/react";
+import { AuthProvider } from "./AuthProvider";
+import { useAuth } from "../hooks/use-auth";
+import { getApiUrl } from "../lib/api-url";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+function ShockClientBridge({ children }: { children: ReactNode }) {
+  const { token } = useAuth();
+
+  const getToken = useMemo(() => {
+    if (!token) return undefined;
+    const t = token;
+    return () => t;
+  }, [token]);
+
+  return (
+    <ShockProvider
+      url={getApiUrl()}
+      getToken={getToken}
+      authType="basic"
+      queryClient={queryClient}
+    >
+      {children}
+    </ShockProvider>
+  );
+}
+
+export function ShockUIProvider({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <ShockClientBridge>{children}</ShockClientBridge>
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}
diff --git a/clients/shock-ui/src/vite-env.d.ts b/clients/shock-ui/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/clients/shock-ui/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/clients/shock-ui/tsconfig.json b/clients/shock-ui/tsconfig.json
new file mode 100644
index 0000000..5a3af71
--- /dev/null
+++ b/clients/shock-ui/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/clients/shock-ui/vite.config.ts b/clients/shock-ui/vite.config.ts
new file mode 100644
index 0000000..d43a978
--- /dev/null
+++ b/clients/shock-ui/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  base: "/ui/",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    proxy: {
+      "/node": "http://localhost:7445",
+      "/preauth": "http://localhost:7445",
+      "/location": "http://localhost:7445",
+      "/locker": "http://localhost:7445",
+      "/locked": "http://localhost:7445",
+      "/trace": "http://localhost:7445",
+      "/types": "http://localhost:7445",
+    },
+  },
+});
diff --git a/docker-compose.local.yml b/docker-compose.local.yml
new file mode 100644
index 0000000..5e1b009
--- /dev/null
+++ b/docker-compose.local.yml
@@ -0,0 +1,109 @@
+# Local development Shock server with MongoDB
+#
+# Usage:
+#   docker compose -f docker-compose.local.yml up --build -d
+#   docker compose -f docker-compose.local.yml down
+#
+# Custom port:
+#   SHOCK_PORT=8080 docker compose -f docker-compose.local.yml up --build -d
+#
+# Exposes:
+#   - Shock API on http://localhost:${SHOCK_PORT:-7445}
+#   - MongoDB on localhost:27017 (for debugging)
+#
+# Auth credentials (basic auth):
+#   admin:secret  -> Authorization: Basic YWRtaW46c2VjcmV0
+#   user1:secret  -> Authorization: Basic dXNlcjE6c2VjcmV0
+#
+# Other compose setups can connect via the "shock-net" network:
+#   networks:
+#     shock-net:
+#       external: true
+
+services:
+  shock-server:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    depends_on:
+      shock-mongo:
+        condition: service_healthy
+    entrypoint:
+      - /go/bin/shock-server
+      - --hosts=shock-mongo
+      - --basic=true
+      - --users=admin
+      - --force_yes=true
+      - --api-url=http://localhost:${SHOCK_PORT:-7445}
+      - --api-port=${SHOCK_PORT:-7445}
+    ports:
+      - "${SHOCK_PORT:-7445}:${SHOCK_PORT:-7445}"
+    volumes:
+      - shock-data:/usr/local/shock/data
+      - shock-logs:/var/log/shock
+    networks:
+      - shock-net
+    healthcheck:
+      test: ["CMD", "sh", "-c", "curl -sf http://localhost:${SHOCK_PORT:-7445}/"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+
+  shock-mongo:
+    image: mongo:5.0
+    ports:
+      - "27017:27017"
+    volumes:
+      - shock-mongo-data:/data/db
+    networks:
+      - shock-net
+    healthcheck:
+      test: ["CMD", "mongo", "--eval", "db.adminCommand('ping')"]
+      interval: 5s
+      timeout: 5s
+      retries: 3
+      start_period: 5s
+
+  # Seeds admin and test user passwords into MongoDB after Shock creates them
+  shock-seed:
+    image: mongo:5.0
+    depends_on:
+      shock-server:
+        condition: service_healthy
+    networks:
+      - shock-net
+    restart: "no"
+    entrypoint:
+      - /bin/bash
+      - -c
+      - |
+        set -e
+        echo "Waiting for Shock to create users..."
+        sleep 2
+        echo "Setting passwords for admin and user1..."
+        mongo mongodb://shock-mongo:27017/ShockDB --eval '
+          db.Users.updateOne(
+            { username: "admin" },
+            { $$set: { password: "secret", shock_admin: true } },
+            { upsert: true }
+          );
+          db.Users.updateOne(
+            { username: "user1" },
+            { $$set: { password: "secret", shock_admin: false } },
+            { upsert: true }
+          );
+          print("Users seeded:");
+          printjson(db.Users.find({}, {username:1, shock_admin:1, _id:0}).toArray());
+        '
+        echo "Done seeding users."
+
+volumes:
+  shock-data:
+  shock-logs:
+  shock-mongo-data:
+
+networks:
+  shock-net:
+    name: shock-net
+    driver: bridge
diff --git a/scratchpad.md b/scratchpad.md
index 43e3908..119919e 100644
--- a/scratchpad.md
+++ b/scratchpad.md
@@ -1,9 +1,44 @@
 # Shock Project Scratchpad
 
-## Current State: On `feature/s3-setup` branch
+## Current State (2026-03-03)
 
-- **Branch**: `feature/s3-setup`
-- **Previous**: PR #402 merged to master, tag v2.1.0-alpha
+- **Branch**: `feature/UI`
+
+### Shock UI — React SPA (completed)
+- Full React SPA at `clients/shock-ui/` — Vite + React 18 + TypeScript + TailwindCSS v4
+- Embedded in Go binary via `go:embed` at `shock-server/ui/`
+- Served at `/ui/` with SPA fallback routing
+- All phases implemented: auth, node CRUD, upload/download, ACLs, indexes, admin dashboard
+
+**Key commands:**
+```bash
+cd clients/shock-ui && npm run dev    # Dev mode (Vite proxy → :7445)
+./build-ui.sh && ./compile-server.sh  # Build embedded binary
+```
+**shock-ts updates:** added `authType` (basic/oauth), admin methods (locker, locked/*, trace, location info), deleteIndex, corresponding React hooks
+
+### Local Dev Server Running (Docker Compose)
+- `docker-compose.local.yml` — Shock + MongoDB + user seed
+- Shock API: http://localhost:7445
+- MongoDB: localhost:27017
+- Docker network: `shock-net` (named, other compose setups can join as external)
+
+**Auth Credentials (Basic Auth):**
+| User   | Password | Admin | Authorization Header |
+|--------|----------|-------|---------------------|
+| admin  | secret   | yes   | `Basic YWRtaW46c2VjcmV0` |
+| user1  | secret   | no    | `Basic dXNlcjE6c2VjcmV0` |
+
+**Commands:**
+```bash
+docker compose -f docker-compose.local.yml up --build -d   # start
+docker compose -f docker-compose.local.yml down             # stop
+docker compose -f docker-compose.local.yml down -v          # stop + destroy data
+docker compose -f docker-compose.local.yml logs -f shock-server  # logs
+```
+
+### Vendor Fix Applied
+- `vendor/github.com/MG-RAST/golib/httpclient/restclient.go` — `Get()` and `Delete()` were missing `io.Reader` parameter (added `nil`)
 
 ## Session Summary (2026-02-26) — S3 Integration Tests
 
diff --git a/shock-server/main.go b/shock-server/main.go
index 279c090..57ec889 100644
--- a/shock-server/main.go
+++ b/shock-server/main.go
@@ -6,6 +6,7 @@ import (
 	"net/http"
 	_ "net/http/pprof"
 	"os"
+	"path/filepath"
 	"os/signal"
 	"runtime"
 	"strconv"
@@ -15,6 +16,7 @@ import (
 	"github.com/MG-RAST/Shock/shock-server/auth"
 	"github.com/MG-RAST/Shock/shock-server/cache"
 	"github.com/MG-RAST/Shock/shock-server/conf"
+	"github.com/MG-RAST/Shock/shock-server/ui"
 	ncon "github.com/MG-RAST/Shock/shock-server/controller/node"
 	acon "github.com/MG-RAST/Shock/shock-server/controller/node/acl"
 	icon "github.com/MG-RAST/Shock/shock-server/controller/node/index"
@@ -165,7 +167,78 @@ func newRouter() chi.Router {
 			responder.RespondWithError(w, r, http.StatusInternalServerError, fmt.Sprintf("error stopping trace: %s", err.Error()))
 			return
 		}
-		responder.RespondWithData(w, r, "trace stoped")
+		responder.RespondWithData(w, r, "trace stopped")
+	})
+
+	// download latest trace file
+	router.Get("/trace/download", func(w http.ResponseWriter, r *http.Request) {
+		u, err := request.Authenticate(r)
+		if err != nil && err.Error() != e.NoAuth {
+			request.AuthError(err, w, r)
+			return
+		}
+		if u == nil || !u.Admin {
+			responder.RespondWithError(w, r, http.StatusUnauthorized, e.NoAuth)
+			return
+		}
+		path, err := latestTraceFile()
+		if err != nil {
+			responder.RespondWithError(w, r, http.StatusNotFound, err.Error())
+			return
+		}
+		w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%q", filepath.Base(path)))
+		w.Header().Set("Content-Type", "application/octet-stream")
+		http.ServeFile(w, r, path)
+	})
+
+	// trace summary (footprint)
+	router.Get("/trace/summary", func(w http.ResponseWriter, r *http.Request) {
+		u, err := request.Authenticate(r)
+		if err != nil && err.Error() != e.NoAuth {
+			request.AuthError(err, w, r)
+			return
+		}
+		if u == nil || !u.Admin {
+			responder.RespondWithError(w, r, http.StatusUnauthorized, e.NoAuth)
+			return
+		}
+		path, err := latestTraceFile()
+		if err != nil {
+			responder.RespondWithError(w, r, http.StatusNotFound, err.Error())
+			return
+		}
+		out, err := runGoToolTrace(path, "footprint")
+		if err != nil {
+			responder.RespondWithError(w, r, http.StatusInternalServerError, err.Error())
+			return
+		}
+		w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+		w.Write(out)
+	})
+
+	// trace parsed events
+	router.Get("/trace/events", func(w http.ResponseWriter, r *http.Request) {
+		u, err := request.Authenticate(r)
+		if err != nil && err.Error() != e.NoAuth {
+			request.AuthError(err, w, r)
+			return
+		}
+		if u == nil || !u.Admin {
+			responder.RespondWithError(w, r, http.StatusUnauthorized, e.NoAuth)
+			return
+		}
+		path, err := latestTraceFile()
+		if err != nil {
+			responder.RespondWithError(w, r, http.StatusNotFound, err.Error())
+			return
+		}
+		out, err := runGoToolTrace(path, "parsed")
+		if err != nil {
+			responder.RespondWithError(w, r, http.StatusInternalServerError, err.Error())
+			return
+		}
+		w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+		w.Write(out)
 	})
 
 	// Root endpoint
@@ -208,6 +281,10 @@ func newRouter() chi.Router {
 		responder.WriteResponseObject(w, r, http.StatusOK, res)
 	})
 
+	// Embedded web UI
+	router.Handle("/ui", http.RedirectHandler("/ui/", http.StatusMovedPermanently))
+	router.Handle("/ui/*", http.StripPrefix("/ui", ui.Handler()))
+
 	// Node CRUD (replaces goweb.MapController)
 	nc := &ncon.NodeController{}
 	router.Route("/node", func(nr chi.Router) {
diff --git a/shock-server/trace.go b/shock-server/trace.go
index abe06cd..c608d0f 100644
--- a/shock-server/trace.go
+++ b/shock-server/trace.go
@@ -1,20 +1,80 @@
 package main
 
 import (
+	"context"
 	"fmt"
-	"github.com/MG-RAST/Shock/shock-server/conf"
 	"os"
+	"os/exec"
+	"path/filepath"
 	"runtime/trace"
+	"sort"
+	"strings"
+	"sync"
 	"time"
+
+	"github.com/MG-RAST/Shock/shock-server/conf"
 )
 
-var traceFile *os.File
-var traceOn bool
+var (
+	traceFile *os.File
+	traceOn   bool
+	traceMu   sync.Mutex
+)
 
 func traceFileName() string {
 	return fmt.Sprintf("trace.%d.log", time.Now().Unix())
 }
 
+// latestTraceFile returns the path to the most recent completed trace file.
+func latestTraceFile() (string, error) {
+	entries, err := os.ReadDir(conf.PATH_LOGS)
+	if err != nil {
+		return "", fmt.Errorf("cannot read logs directory: %w", err)
+	}
+
+	traceMu.Lock()
+	activeFile := ""
+	if traceOn && traceFile != nil {
+		activeFile = filepath.Base(traceFile.Name())
+	}
+	traceMu.Unlock()
+
+	var traces []string
+	for _, e := range entries {
+		if strings.HasPrefix(e.Name(), "trace.") && strings.HasSuffix(e.Name(), ".log") {
+			if e.Name() == activeFile {
+				continue
+			}
+			traces = append(traces, e.Name())
+		}
+	}
+	if len(traces) == 0 {
+		return "", fmt.Errorf("no trace files found")
+	}
+	sort.Strings(traces)
+	return filepath.Join(conf.PATH_LOGS, traces[len(traces)-1]), nil
+}
+
+// runGoToolTrace runs "go tool trace -d=<mode> <file>" and returns the output.
+// A 60-second timeout prevents runaway processes on large trace files.
+func runGoToolTrace(traceFilePath string, mode string) ([]byte, error) {
+	goPath, err := exec.LookPath("go")
+	if err != nil {
+		return nil, fmt.Errorf("go toolchain not found on PATH: %w", err)
+	}
+	ctx, cancel := context.WithTimeout(context.Background(), 60*time.Second)
+	defer cancel()
+	cmd := exec.CommandContext(ctx, goPath, "tool", "trace", "-d="+mode, traceFilePath)
+	out, err := cmd.CombinedOutput()
+	if ctx.Err() == context.DeadlineExceeded {
+		return nil, fmt.Errorf("go tool trace timed out after 60s")
+	}
+	if err != nil {
+		return out, fmt.Errorf("go tool trace failed: %w\n%s", err, string(out))
+	}
+	return out, nil
+}
+
 func hourlyTrace() {
 	wait := 60 * time.Minute
 	for {
@@ -37,6 +97,8 @@ func durationTrace(wait time.Duration) {
 }
 
 func startTrace(name string) (err error) {
+	traceMu.Lock()
+	defer traceMu.Unlock()
 	if traceOn && (traceFile != nil) {
 		err = fmt.Errorf("tracing is already enabled with file %s", traceFile.Name())
 		return
@@ -55,6 +117,8 @@ func startTrace(name string) (err error) {
 }
 
 func stopTrace() (err error) {
+	traceMu.Lock()
+	defer traceMu.Unlock()
 	if traceOn {
 		trace.Stop()
 		traceOn = false
diff --git a/shock-server/ui/dist/.gitkeep b/shock-server/ui/dist/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/shock-server/ui/ui.go b/shock-server/ui/ui.go
new file mode 100644
index 0000000..5f787fa
--- /dev/null
+++ b/shock-server/ui/ui.go
@@ -0,0 +1,49 @@
+package ui
+
+import (
+	"embed"
+	"io/fs"
+	"net/http"
+	"strings"
+)
+
+//go:embed dist/*
+var content embed.FS
+
+// Handler returns an http.Handler that serves the embedded SPA.
+// It serves static files from dist/ and falls back to index.html
+// for any path that doesn't match a real file (SPA client-side routing).
+func Handler() http.Handler {
+	dist, err := fs.Sub(content, "dist")
+	if err != nil {
+		panic(err)
+	}
+	fileServer := http.FileServer(http.FS(dist))
+
+	// Verify index.html exists at init time
+	if _, err := dist.Open("index.html"); err != nil {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			http.Error(w, "UI not built. Run build-ui.sh to generate the UI assets.", http.StatusNotFound)
+		})
+	}
+
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// Try to serve the exact file first
+		path := strings.TrimPrefix(r.URL.Path, "/")
+		if path == "" {
+			path = "index.html"
+		}
+
+		// Check if the file exists in the embedded FS
+		f, err := dist.Open(path)
+		if err == nil {
+			f.Close()
+			fileServer.ServeHTTP(w, r)
+			return
+		}
+
+		// Fall back to index.html for SPA routing
+		r.URL.Path = "/"
+		fileServer.ServeHTTP(w, r)
+	})
+}