fix: replace nested Routes with useLocation, remove pushState+reload, add debug logs

- ProfileRoutes: removed nested <Routes> in favor of useLocation()/useNavigate()
  with strict allowlist for /profile/me and /profile/me/edit
- ProfileComponentWrapper: replaced pushState()+reload() with navigate()
- useApi: log 401 and non-401 errors
- contexts.tsx: log fetchCurrentUser lifecycle and auth:unauthorized events
- axios.ts: log auth server 401s

react-openapi/src/components/ResourceDetail.tsx

@@ -140,7 +140,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
         return (
           <TabPanel key={t.key} value={tabIndex} index={i + 1}>
             {sub.streaming ? (
-              <SseStreamView resource={sub} pathParams={{ [pathParam]: id! }} />
+              <SseStreamView resource={sub} pathParams={{ [pathParam]: Number(id!) }} />
             ) : null}
           </TabPanel>
         );

react-openapi/src/components/fields/DetailFieldRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Typography, Avatar } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { ListCellRenderer } from "./ListCellRenderer";
 
@@ -18,11 +18,7 @@ export function DetailFieldRenderer({ field, value, displayFormat, basePath }: D
       <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
         {field.label}
       </Typography>
-      {field.uiType === "image" ? (
-        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
-      ) : (
       <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
-      )}
     </Box>
   );
 }

react-openapi/src/context/useResource.tsx

@@ -56,7 +56,6 @@ interface UseResourceReturn {
   get: (id: string | number, params?: Record<string, any>) => Promise<any>;
   create: (data: any) => Promise<any>;
   update: (id: string | number, data: any) => Promise<any>;
-  patch?: (id: string | number, data: any) => Promise<any>;
   remove: (id: string | number) => Promise<void>;
   stream?: (handlers: StreamHandlers, pathParams?: Record<string, string | number>) => StreamSubscription;
   loading: boolean;
@@ -597,7 +596,7 @@ export function useResource(resourceName: string): UseResourceReturn {
 
   const rPath = resource?.path;
   const rPagination = resource?.pagination;
-  const rPatch = resource ? (resource.operations.patch || undefined) : false;
+  const rUpdateMethod = resource?.updateMethod;
   const rStreaming = resource?.streaming;
   const rFields = resource?.fields;
 
@@ -707,7 +706,8 @@ export function useResource(resourceName: string): UseResourceReturn {
         const sanitized = rFields && schemas
           ? await sanitizePayload(data, rFields, schemas, resolveFk)
           : data;
-        const res = await api.put(`${rPath}/${id}`, sanitized);
+        const method = rUpdateMethod ?? "put";
+        const res = await (method === "patch" ? api.patch : api.put)(`${rPath}/${id}`, sanitized);
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -716,29 +716,7 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [rPath, rFields, schemas, resolveFk, setLoading, setError]
+    [rPath, rFields, schemas, resolveFk, rUpdateMethod, setLoading, setError]
-  );
-
-  const _patch = useCallback(
-    async (id: string | number, data: any): Promise<any> => {
-      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
-      setLoading(true);
-      setError(null);
-      try {
-        const api = getApi();
-        const sanitized = rFields && schemas
-          ? await sanitizePayload(data, rFields, schemas, resolveFk)
-          : data;
-        const res = await api.patch(`${rPath}/${id}`, sanitized);
-        return res.data;
-      } catch (e: any) {
-        setError(parseError(e));
-        throw e;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [rPath, rFields, schemas, resolveFk, setLoading, setError]
   );
 
   const remove = useCallback(
@@ -813,7 +791,6 @@ export function useResource(resourceName: string): UseResourceReturn {
       get,
       create,
       update,
-      patch: undefined,
       remove,
       stream: undefined,
       loading: false,
@@ -821,5 +798,5 @@ export function useResource(resourceName: string): UseResourceReturn {
     };
   }
 
-  return { resource, components, list, get, create, update, patch: rPatch ? _patch : undefined, remove, stream: rStreaming ? stream : undefined, loading: state.loading, error: state.error };
+  return { resource, components, list, get, create, update, remove, stream: rStreaming ? stream : undefined, loading: state.loading, error: state.error };
 }

react-openapi/src/transformers/resource-config.ts

@@ -98,9 +98,9 @@ export function buildResourceConfigs(spec: OpenApiSpec): ResourceConfig[] {
       const parent = nameMap.get(parentName);
       if (!parent) continue;
       if (hasOperation(pathObj, "get")) parent.operations.get = true;
-      if (hasOperation(pathObj, "put")) parent.operations.update = true;
+      if (hasOperation(pathObj, "put") || hasOperation(pathObj, "patch")) parent.operations.update = true;
-      if (hasOperation(pathObj, "patch")) parent.operations.patch = true;
       if (hasOperation(pathObj, "delete")) parent.operations.delete = true;
+      if (hasOperation(pathObj, "patch") && !hasOperation(pathObj, "put")) parent.updateMethod = "patch";
       continue;
     }
 
@@ -127,8 +127,8 @@ export function buildResourceConfigs(spec: OpenApiSpec): ResourceConfig[] {
         fields: hasSSE ? [SSE_RECEIVED_FIELD, ...fields.map((f) => ({ ...f, readOnly: true }))] : fields,
         orderedFields: [],
         operations: hasSSE
-          ? { list: true, get: false, create: false, update: false, patch: false, delete: false }
+          ? { list: true, get: false, create: false, update: false, delete: false }
-          : { list: hasOperation(pathObj, "get"), get: false, create: false, update: false, patch: false, delete: false },
+          : { list: hasOperation(pathObj, "get"), get: false, create: false, update: false, delete: false },
         updateMethod: "put",
         pagination: hasSSE ? null : detectPagination(pathObj),
         relationships: [],
@@ -173,8 +173,8 @@ export function buildResourceConfigs(spec: OpenApiSpec): ResourceConfig[] {
       fields: hasSSE ? [SSE_RECEIVED_FIELD, ...fields.map((f) => ({ ...f, readOnly: true }))] : fields,
       orderedFields: [],
       operations: hasSSE
-          ? { list: true, get: false, create: false, update: false, patch: false, delete: false }
+        ? { list: true, get: false, create: false, update: false, delete: false }
-          : { list: hasOperation(pathObj, "get"), get: false, create: hasOperation(pathObj, "post"), update: false, patch: false, delete: false },
+        : { list: hasOperation(pathObj, "get"), get: false, create: hasOperation(pathObj, "post"), update: false, delete: false },
       updateMethod: "put",
       pagination: hasSSE ? null : detectPagination(pathObj),
       relationships,

react-openapi/src/types.ts

@@ -65,7 +65,6 @@ export interface ResourceConfig {
     get: boolean;
     create: boolean;
     update: boolean;
-    patch: boolean;
     delete: boolean;
   };
   updateMethod: "put" | "patch";

src/FetchRequest/FetchRequestCreate.tsx

@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi";
 import type { FieldConfig } from "../../react-openapi";
 
-const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"];
+const CREATE_FIELDS = ["account", "format", "start_date", "end_date", "source"];
 
 function FetchRequestList() {
   const navigate = useNavigate();

src/FetchRequest/FetchRequestDetail.tsx

@@ -9,6 +9,7 @@ import {
   Chip,
   CircularProgress,
   Alert,
+  IconButton,
   Snackbar,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -19,8 +20,8 @@ import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
-import { useResource, useItemSse, useAppContext, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi";
+import { useResource, useItemSse, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation } from "@tanstack/react-query";
 import { RETRY_MAX, formatApiError } from "../features/fetch-requests";
 import type { FetchRequestStatus, SSEEvent, ProgressMessage } from "../features/fetch-requests";
 import { PipelineStepper } from "./components/PipelineStepper";
@@ -70,11 +71,9 @@ function sseIcon(status: SSEEvent["status"]) {
 export default function FetchRequestDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const { get, patch, resource } = useResource("fetch-requests");
+  const { get, update, resource } = useResource("fetch-requests");
-  const { resources: allResources } = useAppContext();
   const [stepStats, setStepStats] = useState<Record<string, number>>({});
   const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined);
-  const [retrying, setRetrying] = useState(false);
   const [failNotif, setFailNotif] = useState<string | null>(null);
   const feedRef = useRef<HTMLDivElement>(null);
 
@@ -84,6 +83,10 @@ export default function FetchRequestDetail() {
     enabled: !!id,
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ id: rid, data }: { id: string; data: any }) => update(rid, data),
+  });
+
   const sseUrl = id ? `/fetch-requests/${id}/events` : null;
   const { connected: sseConnected, events: sseEvents } = useItemSse(sseUrl, {
     onEvent: (parsed: SSEEvent) => {
@@ -147,41 +150,15 @@ export default function FetchRequestDetail() {
   }, [sseEvents]);
 
   const handleRetry = async () => {
-    if (!id || !patch || retrying) return;
+    if (!id) return;
-    setRetrying(true);
     try {
-      await patch(id, { status: "pending" });
+      await updateMutation.mutateAsync({ id, data: { status: "pending" } });
       refetchRequest();
     } catch (err: any) {
       setFailNotif(formatApiError(err));
-    } finally {
-      setRetrying(false);
     }
   };
 
-  const req = fetchRequest as any;
-  const retryCount = req?.retry_count ?? 0;
-  const isRetryExhausted = retryCount >= RETRY_MAX;
-  const status = req?.status as FetchRequestStatus | undefined;
-  const detailFields = (resource?.orderedFields ?? []).filter(
-    (f) => f.name !== "source",
-  );
-
-  const displayTitle = useMemo(() => {
-    if (!resource || !req) return "";
-    const resolved = Object.fromEntries(
-      resource.orderedFields.map((field) => {
-        const value = req[field.name];
-        if (field.fk && typeof value === "object" && value != null) {
-          const target = allResources.find((r) => r.name === field.fk!.resource);
-          if (target) return [field.name, applyDisplayFormat(value, target.displayFormat)];
-        }
-        return [field.name, value];
-      }),
-    );
-    return applyDisplayFormat(resolved, resource.displayFormat);
-  }, [resource, req, allResources]);
-
   if (isLoading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", p: 8 }}>
@@ -201,6 +178,15 @@ export default function FetchRequestDetail() {
     );
   }
 
+  const req = fetchRequest as any;
+  const retryCount = req.retry_count ?? 0;
+  const isRetryExhausted = retryCount >= RETRY_MAX;
+  const status = req.status as FetchRequestStatus;
+
+  const detailFields = (resource?.orderedFields ?? []).filter(
+    (f) => f.name !== "source",
+  );
+
   return (
     <Container sx={{ mt: 4, mb: 4 }}>
       <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
@@ -214,7 +200,7 @@ export default function FetchRequestDetail() {
             label={status.replace(/_/g, " ")}
             color={statusColors[status]}
           />
-          <Typography variant="h6" fontWeight={600}>{displayTitle}</Typography>
+          <Typography variant="h6" fontWeight={600}>{req.account_name}</Typography>
           <Chip
             label={"path" in (req.source ?? {}) ? "File" : "Email"}
             size="small"
@@ -224,22 +210,14 @@ export default function FetchRequestDetail() {
         </Box>
 
         <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap", mb: 2 }}>
-          {detailFields.map((field) => {
+          {detailFields.map((field) => (
-            const value = req[field.name];
-            let fmt = resource?.displayFormat;
-            if (field.fk && typeof value === "object" && value != null) {
-              const target = allResources.find((r) => r.name === field.fk!.resource);
-              if (target) fmt = target.displayFormat;
-            }
-            return (
             <DetailFieldRenderer
               key={field.name}
               field={field}
-                value={value}
+              value={req[field.name]}
-                displayFormat={fmt}
+              displayFormat={resource?.displayFormat}
             />
-            );
+          ))}
-          })}
         </Box>
 
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
@@ -254,7 +232,7 @@ export default function FetchRequestDetail() {
               size="small"
               startIcon={<ReplayIcon />}
               onClick={handleRetry}
-              disabled={retrying}
+              disabled={updateMutation.isPending}
             >
               Retry
             </Button>

src/FetchRequestDetail.tsx

@@ -0,0 +1,642 @@
+import * as React from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  Box,
+  Container,
+  Paper,
+  Typography,
+  Button,
+  Chip,
+  CircularProgress,
+  Alert,
+  Stepper,
+  Step,
+  StepLabel,
+  LinearProgress,
+  IconButton,
+  Snackbar,
+} from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ReplayIcon from "@mui/icons-material/Replay";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorIcon from "@mui/icons-material/Error";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import {
+  useFetchRequestAmbiguities,
+  useResolveAmbiguity,
+} from "./features/fetch-requests";
+import type {
+  FetchRequestStatus,
+  SSEEvent,
+  ProgressMessage,
+} from "./features/fetch-requests";
+import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
+import { useAppContext, useResource, useItemSse } from "../react-openapi";
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
+  pending: "default",
+  processing: "info",
+  paused: "warning",
+  raw_expenses_done: "primary",
+  enriched_done: "warning",
+  completed: "success",
+  failed: "error",
+};
+
+const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
+  pending: <PlayArrowIcon sx={{ fontSize: 16 }} />,
+  processing: <CircularProgress size={14} />,
+  paused: <WarningAmberIcon sx={{ fontSize: 16 }} />,
+  raw_expenses_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
+  enriched_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
+  completed: <CheckCircleIcon sx={{ fontSize: 16 }} />,
+  failed: <ErrorIcon sx={{ fontSize: 16 }} />,
+};
+
+const stepLabels = ["Extract", "Raw Expense", "Enrich", "Save"];
+
+function computeProgressPercent(
+  status: FetchRequestStatus,
+  liveCount: number,
+  seenSteps: Set<string>,
+  stepStats: Record<string, number>,
+  txnBlockCount: number,
+  txnDictCount: number,
+): number {
+  if (status === "pending") return 0;
+  if (status === "completed") return 100;
+
+  let pct = 0;
+
+  if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) pct += 10;
+
+  if (txnBlockCount > 0) {
+    const current = Math.max(liveCount, stepStats.txn_dicts ?? 0);
+    pct += Math.min(1, current / txnBlockCount) * 20;
+  }
+
+  if (txnDictCount > 0) {
+    pct += Math.min(1, (stepStats.enrich_count ?? 0) / txnDictCount) * 50;
+    pct += Math.min(1, (stepStats.save_count ?? 0) / txnDictCount) * 20;
+  }
+
+  return Math.round(Math.min(100, pct));
+}
+
+function computeActiveStep(status: FetchRequestStatus, seenSteps: Set<string>): number {
+  if (status === "completed") return stepLabels.length;
+
+  if (seenSteps.has("save_expenses/completed") || seenSteps.has("complete/completed")) return stepLabels.length;
+  if (seenSteps.has("save_expenses") || seenSteps.has("complete")) return 3;
+
+  if (seenSteps.has("enrich/completed")) return 3;
+  if (seenSteps.has("enrich")) return 2;
+
+  if (seenSteps.has("txn_dicts/completed") || status === "raw_expenses_done") return 2;
+  if (seenSteps.has("txn_dicts")) return 1;
+
+  if (seenSteps.has("txn_blocks/completed")) return 1;
+  if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) return 0;
+
+  if (status === "processing" || status === "paused") return 0;
+
+  return -1;
+}
+
+function formatProgressMessage(msg: ProgressMessage): string {
+  if (msg.lines !== undefined) return `${msg.lines} lines`;
+  if (msg.blocks !== undefined) return `${msg.blocks} blocks`;
+  if (msg.count !== undefined && msg.unit) return `${msg.count} ${msg.unit}`;
+  if (msg.count !== undefined) return `${msg.count} items`;
+  if (msg.raw_ocr_line) return `"${msg.raw_ocr_line.slice(0, 60)}${msg.raw_ocr_line.length > 60 ? "…" : ""}"`;
+  if (msg.error) return msg.error.slice(0, 80);
+  return "";
+}
+
+function sseIcon(status: SSEEvent["status"]) {
+  switch (status) {
+    case "started": return <CircularProgress size={14} />;
+    case "completed": return <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />;
+    case "failed": return <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />;
+    case "skipped": return <RemoveCircleOutlineIcon sx={{ fontSize: 16, color: "text.disabled" }} />;
+    case "paused": return <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />;
+    case "progress": return <FiberManualRecordIcon sx={{ fontSize: 14, color: "info.main" }} />;
+  }
+}
+
+export default function FetchRequestDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { get, update } = useResource("fetch-requests");
+
+  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useQuery({
+    queryKey: ["fetch-requests", "detail", id],
+    queryFn: () => get(id!),
+    enabled: !!id,
+  });
+  const updateMutation = useMutation({
+    mutationFn: ({ id: rid, data }: { id: string; data: any }) => update(rid, data),
+  });
+  const resolveMutation = useResolveAmbiguity();
+  const { data: ambiguities, refetch: refetchAmbiguities } = useFetchRequestAmbiguities(id!);
+
+  const [stepStats, setStepStats] = React.useState<Record<string, number>>({});
+  const [liveParsedCount, setLiveParsedCount] = React.useState<number | undefined>(undefined);
+  const [failNotif, setFailNotif] = React.useState<string | null>(null);
+  const feedRef = React.useRef<HTMLDivElement>(null);
+
+  const sseUrl = id ? `/fetch-requests/${id}/events` : null;
+  const { connected: sseConnected, events: sseEvents } = useItemSse(sseUrl, {
+    onEvent: (parsed: SSEEvent) => {
+      if (parsed.status === "progress" && parsed.message.count !== undefined) {
+        if (parsed.step === "txn_dicts") setLiveParsedCount(parsed.message.count);
+        if (parsed.step === "enrich") setStepStats((prev) => ({ ...prev, enrich_count: parsed.message.count! }));
+        if (parsed.step === "save_expenses") setStepStats((prev) => ({ ...prev, save_count: parsed.message.count! }));
+      }
+
+      if (parsed.status === "completed" && parsed.message.count !== undefined) {
+        const stats: Record<string, number> = {};
+        if (parsed.step === "raw_lines" && parsed.message.lines !== undefined) stats.raw_lines = parsed.message.lines;
+        if (parsed.step === "txn_blocks" && parsed.message.blocks !== undefined) stats.txn_blocks = parsed.message.blocks;
+        if (parsed.step === "txn_dicts") stats.txn_dicts = parsed.message.count;
+        if (parsed.step === "enrich") stats.enrich_count = parsed.message.count;
+        if (parsed.step === "save_expenses") stats.save_count = parsed.message.count;
+        if (Object.keys(stats).length) {
+          setStepStats((prev) => ({ ...prev, ...stats }));
+        }
+      }
+
+      if (parsed.status === "paused") {
+        refetchRequest();
+        refetchAmbiguities();
+      }
+      if (parsed.status === "failed") {
+        setFailNotif(parsed.message.error || "Fetch request failed");
+        refetchRequest();
+      }
+      if (parsed.status === "completed" || parsed.step === "resume_extract") {
+        refetchRequest();
+      }
+    },
+  });
+
+  React.useEffect(() => {
+    if (feedRef.current) {
+      feedRef.current.scrollTop = feedRef.current.scrollHeight;
+    }
+  }, [sseEvents]);
+
+  const txnBlockCount = React.useMemo(() => {
+    const blocks = (fetchRequest as any)?.source?.txn_blocks;
+    if (!blocks) return 0;
+    return Object.values(blocks).reduce(
+      (sum: number, list: any) => sum + (Array.isArray(list) ? list.length : 0),
+      0,
+    );
+  }, [fetchRequest]);
+
+  const seenSteps = React.useMemo(() => {
+    const steps = new Set<string>();
+    for (const evt of sseEvents) {
+      steps.add(evt.step);
+      if (evt.status === "completed") steps.add(`${evt.step}/completed`);
+      if (evt.status === "failed") steps.add(`${evt.step}/failed`);
+      if (evt.status === "started") steps.add(`${evt.step}/started`);
+      if (evt.status === "progress") steps.add(`${evt.step}/progress`);
+    }
+    return steps;
+  }, [sseEvents]);
+
+  const displayParsedCount = React.useMemo(() => {
+    if (liveParsedCount && liveParsedCount > 0) return liveParsedCount;
+    const source = (fetchRequest as any)?.source;
+    const persistedCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
+    if (persistedCount > 0) return persistedCount;
+    const dicts = source?.txn_dicts;
+    if (Array.isArray(dicts) && dicts.length > 0) return dicts.length;
+    return 0;
+  }, [liveParsedCount, fetchRequest]);
+
+  const txnDictCount = React.useMemo(() => {
+    const source = (fetchRequest as any)?.source;
+    if (stepStats.txn_dicts && stepStats.txn_dicts > 0) return stepStats.txn_dicts;
+    return source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
+  }, [fetchRequest, stepStats]);
+
+  const stepMessages = React.useMemo(() => {
+    const msgs: Record<number, string> = {};
+    const source = (fetchRequest as any)?.source;
+
+    const rawLineCount = stepStats.raw_lines ?? (source?.raw_lines?.length ?? 0);
+    if (rawLineCount) msgs[0] = `${rawLineCount}`;
+
+    const sourceDictCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
+    const dictLive = liveParsedCount ?? stepStats.txn_dicts ?? 0;
+    const dictCurrent = Math.max(dictLive, sourceDictCount);
+    if (dictCurrent && txnBlockCount) msgs[1] = `${dictCurrent}/${txnBlockCount}`;
+    else if (dictCurrent) msgs[1] = `${dictCurrent}`;
+
+    const txnDictDenom = stepStats.txn_dicts ?? sourceDictCount;
+    if (stepStats.enrich_count && txnDictDenom) msgs[2] = `${stepStats.enrich_count}/${txnDictDenom}`;
+    else if (stepStats.enrich_count) msgs[2] = `${stepStats.enrich_count}`;
+
+    if (stepStats.save_count && txnDictDenom) msgs[3] = `${stepStats.save_count}/${txnDictDenom}`;
+    else if (stepStats.save_count) msgs[3] = `${stepStats.save_count}`;
+
+    return msgs;
+  }, [fetchRequest, stepStats, liveParsedCount, txnBlockCount]);
+
+  const progressPercent = React.useMemo(
+    () => computeProgressPercent(
+      (fetchRequest as any)?.status as FetchRequestStatus ?? "pending",
+      displayParsedCount,
+      seenSteps,
+      stepStats,
+      txnBlockCount,
+      txnDictCount,
+    ),
+    [fetchRequest, displayParsedCount, seenSteps, stepStats, txnBlockCount, txnDictCount],
+  );
+
+  const displayEvents = React.useMemo(() => {
+    const progressSteps = new Set(["txn_dicts", "enrich", "save_expenses"]);
+    const lastProgressIdx: Record<string, number> = {};
+    for (let i = sseEvents.length - 1; i >= 0; i--) {
+      const e = sseEvents[i];
+      if (progressSteps.has(e.step) && e.status === "progress" && lastProgressIdx[e.step] === undefined) {
+        lastProgressIdx[e.step] = i;
+      }
+    }
+
+    const terminalStatuses = new Set(["completed", "skipped", "paused", "failed"]);
+    return sseEvents.filter((e, i) => {
+      if (progressSteps.has(e.step) && e.status === "progress") return i === lastProgressIdx[e.step];
+      if (e.status === "started") {
+        return !sseEvents.slice(i + 1).some(
+          (later) => later.step === e.step && terminalStatuses.has(later.status),
+        );
+      }
+      return true;
+    });
+  }, [sseEvents]);
+
+  const handleRetry = async () => {
+    if (!id) return;
+    try {
+      await updateMutation.mutateAsync({ id, data: { status: "pending" } });
+    } catch (err: any) {
+      setFailNotif(formatApiError(err));
+    }
+  };
+
+  const handleResolve = async (ambiguity: any, candidate: { amount: number; balance: number }) => {
+    await resolveMutation.mutateAsync({
+      ambiguityId: ambiguity.id,
+      payload: { chosen: { amount: candidate.amount, balance: candidate.balance } },
+    });
+    refetchAmbiguities();
+  };
+
+  if (isLoading) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", p: 8 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (fetchError || !fetchRequest) {
+    return (
+      <Container sx={{ mt: 4 }}>
+        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
+          Back
+        </Button>
+        <Alert severity="error">Failed to load fetch request</Alert>
+      </Container>
+    );
+  }
+
+  const req = fetchRequest as any;
+  const activeStep = computeActiveStep(req.status as FetchRequestStatus, seenSteps);
+  const retryCount = req.retry_count ?? 0;
+  const isRetryExhausted = retryCount >= RETRY_MAX;
+  const hasAmbiguities = ambiguities && ambiguities.length > 0;
+  const allResolved = hasAmbiguities && ambiguities.every((a: any) => a.status === "resolved");
+
+  return (
+    <Container sx={{ mt: 4, mb: 4 }}>
+      <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
+        Back to Fetch Requests
+      </Button>
+
+      {/* Header Card */}
+      <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
+          <Chip
+            icon={statusIcons[req.status as FetchRequestStatus] as any}
+            label={req.status.replace(/_/g, " ")}
+            color={statusColors[req.status as FetchRequestStatus]}
+          />
+          <Typography variant="h6" fontWeight={600}>{req.account_name}</Typography>
+          <Chip
+            label={"path" in req.source ? "File" : "Email"}
+            size="small"
+            variant="outlined"
+            color={"path" in req.source ? "primary" : "secondary"}
+          />
+        </Box>
+
+        <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap", mb: 2 }}>
+          <Box>
+            <Typography variant="caption" color="text.secondary">Date Range</Typography>
+            <Typography variant="body2">
+              {req.start_date ? new Date(req.start_date).toLocaleDateString() : "?"} → {req.end_date ? new Date(req.end_date).toLocaleDateString() : "?"}
+            </Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" color="text.secondary">Created</Typography>
+            <Typography variant="body2">{new Date(req.created_at).toLocaleString()}</Typography>
+          </Box>
+          {req.completed_at && (
+            <Box>
+              <Typography variant="caption" color="text.secondary">Completed</Typography>
+              <Typography variant="body2">{new Date(req.completed_at).toLocaleString()}</Typography>
+            </Box>
+          )}
+        </Box>
+
+        {/* Progress Bar */}
+        <Box sx={{ mb: 2 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 0.5 }}>
+            <Typography variant="caption" color="text.secondary">Overall Progress</Typography>
+            {["processing", "paused"].includes(req.status) && displayParsedCount > 0 && (
+              <Typography variant="caption" fontWeight={600} color="info.main">
+                Validated: {displayParsedCount} transactions
+              </Typography>
+            )}
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={progressPercent}
+            color={req.status === "failed" ? "error" : req.status === "completed" ? "success" : "primary"}
+            sx={{ borderRadius: 1, height: 8, transition: "width 0.3s ease" }}
+          />
+          <Typography variant="caption" color="text.secondary" sx={{ mt: 0.25, display: "block" }}>
+            {progressPercent}%
+          </Typography>
+        </Box>
+
+        {/* Retry Counter */}
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
+          <Box sx={{ flex: 1, maxWidth: 300 }}>
+            <Typography variant="caption" color="text.secondary">
+              Retries: {retryCount}/{RETRY_MAX}
+            </Typography>
+            <LinearProgress
+              variant="determinate"
+              value={(retryCount / RETRY_MAX) * 100}
+              color={isRetryExhausted ? "error" : "primary"}
+              sx={{ mt: 0.5, borderRadius: 1, height: 6 }}
+            />
+          </Box>
+          {req.status === "failed" && !isRetryExhausted && (
+            <Button
+              variant="outlined"
+              size="small"
+              startIcon={<ReplayIcon />}
+              onClick={handleRetry}
+              disabled={updateMutation.isPending}
+            >
+              Retry
+            </Button>
+          )}
+        </Box>
+      </Paper>
+
+      {/* Error Alerts */}
+      {req.status === "failed" && req.error_message && (
+        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
+          {req.error_message}
+        </Alert>
+      )}
+      {isRetryExhausted && req.status === "failed" && (
+        <Alert severity="info" sx={{ mb: 3, borderRadius: 2 }}>
+          Max retries reached — no further retry attempts will be made.
+        </Alert>
+      )}
+
+      {/* Pipeline Stepper */}
+      <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
+        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+          Pipeline Progress
+        </Typography>
+        <Stepper activeStep={activeStep} alternativeLabel>
+          {stepLabels.map((label, index) => {
+            const isCompleted = index < activeStep;
+            const isActive = index === activeStep;
+            const isPaused = req.status === "paused" && isActive;
+            const isFailed = req.status === "failed" && isActive;
+
+            let icon: React.ReactNode;
+            if (isCompleted) {
+              icon = <CheckCircleIcon sx={{ color: "success.main" }} />;
+            } else if (isFailed) {
+              icon = <ErrorIcon sx={{ color: "error.main" }} />;
+            } else if (isPaused) {
+              icon = <WarningAmberIcon sx={{ color: "warning.main" }} />;
+            } else if (isActive) {
+              icon = <CircularProgress size={20} />;
+            } else {
+              icon = <Typography variant="caption" color="text.disabled">{index + 1}</Typography>;
+            }
+
+            return (
+              <Step key={label}>
+                <StepLabel
+                  StepIconComponent={() => <Box sx={{ display: "flex", alignItems: "center" }}>{icon}</Box>}
+                >
+                  <Typography variant="body2" fontWeight={600}>{label}</Typography>
+                  {stepMessages[index] && (
+                    <Typography variant="caption" color="text.secondary" sx={{ display: "block", lineHeight: 1.2 }}>
+                      {stepMessages[index]}
+                    </Typography>
+                  )}
+                </StepLabel>
+              </Step>
+            );
+          })}
+        </Stepper>
+      </Paper>
+
+      {/* SSE Event Feed */}
+      <Paper sx={{ borderRadius: 4, mb: 3 }} variant="outlined">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1, p: 2, pb: 0 }}>
+          <Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
+            Progress Events
+          </Typography>
+          <Box
+            sx={{
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              bgcolor: sseConnected ? "success.main" : "error.main",
+              flexShrink: 0,
+            }}
+          />
+          <Typography variant="caption" color="text.secondary">
+            {sseConnected ? "Connected" : "Disconnected"}
+          </Typography>
+        </Box>
+        <Box
+          ref={feedRef}
+          sx={{
+            maxHeight: 300,
+            overflowY: "auto",
+            p: 2,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+          }}
+        >
+          {displayEvents.length === 0 ? (
+            <Typography variant="body2" color="text.disabled" sx={{ textAlign: "center", py: 2 }}>
+              Waiting for events...
+            </Typography>
+          ) : (
+            displayEvents.map((evt, i) => (
+              <Box
+                key={i}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1.5,
+                  p: 1,
+                  borderRadius: 2,
+                  bgcolor: "action.hover",
+                }}
+              >
+                {sseIcon(evt.status)}
+                <Box sx={{ flex: 1 }}>
+                  <Typography variant="body2" fontWeight={600}>
+                    {evt.step.replace(/_/g, " ")}
+                  </Typography>
+                  {evt.message && formatProgressMessage(evt.message) && (
+                    <Typography variant="caption" color="text.secondary">
+                      {formatProgressMessage(evt.message)}
+                    </Typography>
+                  )}
+                </Box>
+              </Box>
+            ))
+          )}
+        </Box>
+      </Paper>
+
+      {/* Ambiguity Resolution */}
+      {hasAmbiguities && (
+        <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
+          <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+            Ambiguity Resolution
+          </Typography>
+
+          {allResolved ? (
+            <Alert severity="success" sx={{ mb: 2, borderRadius: 2 }}>
+              All ambiguities resolved — pipeline will resume on next poll cycle
+            </Alert>
+          ) : (
+            <Alert severity="warning" sx={{ mb: 2, borderRadius: 2 }}>
+              Pipeline paused — resolve ambiguities to continue
+            </Alert>
+          )}
+
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            {ambiguities.map((ambiguity: any) => {
+              const isResolved = ambiguity.status === "resolved";
+              return (
+                <Paper
+                  key={ambiguity.id}
+                  sx={{
+                    p: 2,
+                    borderRadius: 3,
+                    border: 1,
+                    borderColor: isResolved ? "success.main" : "divider",
+                    opacity: isResolved ? 0.8 : 1,
+                  }}
+                  variant="outlined"
+                >
+                  <Box sx={{ fontFamily: "monospace", fontSize: "0.85rem", mb: 1.5, p: 1, bgcolor: "grey.900", borderRadius: 1, color: "grey.100" }}>
+                    {ambiguity.line}
+                  </Box>
+
+                  <Box sx={{ display: "flex", gap: 3, mb: 1.5, flexWrap: "wrap" }}>
+                    <Box>
+                      <Typography variant="caption" color="text.secondary">OCR Amount</Typography>
+                      <Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
+                        ₹{ambiguity.ocr_amount}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" color="text.secondary">OCR Balance</Typography>
+                      <Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
+                        ₹{ambiguity.ocr_balance}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" color="text.secondary">Previous Balance</Typography>
+                      <Typography variant="body2">₹{ambiguity.prev_balance}</Typography>
+                    </Box>
+                  </Box>
+
+                  {isResolved ? (
+                    <Alert severity="success" sx={{ py: 0.5, borderRadius: 2 }} icon={<CheckCircleIcon />}>
+                      Resolved: ₹{ambiguity.chosen?.amount} / ₹{ambiguity.chosen?.balance}
+                    </Alert>
+                  ) : (
+                    <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+                      {ambiguity.candidates.map((candidate: any, ci: number) => {
+                        const isCredit = candidate.amount > 0;
+                        const isDebit = candidate.amount < 0;
+                        const cColor = isCredit ? "success.main" : isDebit ? "error.main" : undefined;
+                        return (
+                          <Button
+                            key={ci}
+                            variant="outlined"
+                            size="small"
+                            onClick={() => handleResolve(ambiguity, candidate)}
+                            disabled={resolveMutation.isPending}
+                            sx={{
+                              borderColor: cColor,
+                              color: cColor,
+                              "&:hover": cColor ? { borderColor: cColor } : undefined,
+                            }}
+                          >
+                            ₹{candidate.amount} / ₹{candidate.balance}
+                          </Button>
+                        );
+                      })}
+                    </Box>
+                  )}
+                </Paper>
+              );
+            })}
+          </Box>
+        </Paper>
+      )}
+
+      <Snackbar
+        open={!!failNotif}
+        autoHideDuration={6000}
+        onClose={() => setFailNotif(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        <Alert severity="error" onClose={() => setFailNotif(null)} sx={{ borderRadius: 2 }}>
+          {failNotif}
+        </Alert>
+      </Snackbar>
+    </Container>
+  );
+}

src/FetchRequests.tsx

@@ -0,0 +1,509 @@
+import * as React from "react";
+import {
+  Box,
+  Container,
+  Paper,
+  Typography,
+  Button,
+  ToggleButtonGroup,
+  ToggleButton,
+  Chip,
+  IconButton,
+  CircularProgress,
+  Alert,
+  Snackbar,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Tooltip,
+  TextField,
+  Select,
+  MenuItem,
+  InputLabel,
+  FormControl,
+  OutlinedInput,
+  Autocomplete,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import ReplayIcon from "@mui/icons-material/Replay";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorIcon from "@mui/icons-material/Error";
+import ScheduleIcon from "@mui/icons-material/Schedule";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { useUploadFile } from "./features/fetch-requests";
+import type {
+  FetchRequest,
+  FetchRequestStatus,
+  FileSource,
+  EmailSource,
+} from "./features/fetch-requests";
+import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
+import { useNavigate } from "react-router-dom";
+import { useResource, FormFieldRenderer, applyDisplayFormat } from "../react-openapi";
+import type { FieldConfig } from "../react-openapi";
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
+  pending: "default",
+  processing: "info",
+  paused: "warning",
+  raw_expenses_done: "primary",
+  enriched_done: "warning",
+  completed: "success",
+  failed: "error",
+};
+
+const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
+  pending: <ScheduleIcon sx={{ fontSize: 16 }} />,
+  processing: <CircularProgress size={14} sx={{ mr: 0.5 }} />,
+  paused: <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />,
+  raw_expenses_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
+  enriched_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
+  completed: <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />,
+  failed: <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />,
+};
+
+const STATUS_OPTIONS: FetchRequestStatus[] = [
+  "pending",
+  "processing",
+  "paused",
+  "raw_expenses_done",
+  "enriched_done",
+  "completed",
+  "failed",
+];
+
+function shortId(fp: string) {
+  return fp.length > 8 ? fp.slice(0, 8) + "\u2026" : fp;
+}
+
+export default function FetchRequests() {
+  const navigate = useNavigate();
+
+  const [sourceType, setSourceType] = React.useState<"file" | "email">("file");
+  const [accountName, setAccountName] = React.useState("");
+  const [payorUsername, setPayorUsername] = React.useState("aetos");
+  const [format, setFormat] = React.useState("");
+  const [file, setFile] = React.useState<File | null>(null);
+  const [uploadedPath, setUploadedPath] = React.useState<string | null>(null);
+  const [fromEmail, setFromEmail] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [rawTerms, setRawTerms] = React.useState("");
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
+  const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
+  const [deleteTarget, setDeleteTarget] = React.useState<FetchRequest | null>(null);
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const [accountFilter, setAccountFilter] = React.useState("");
+  const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
+
+  const { list, create, update, remove, resource: fetchRes } = useResource("fetch-requests");
+
+  const { data: listData, isLoading, isFetching, refetch } = useQuery({
+    queryKey: ["fetch-requests", "list", { statusFilter, accountFilter, sourceFilter }],
+    queryFn: () => list({
+      ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
+      ...(accountFilter ? { account_name: accountFilter } : {}),
+      ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
+    }),
+  });
+
+  const { list: listAccounts } = useResource("accounts");
+  const { data: accountsData } = useQuery({
+    queryKey: ["accounts", "list"],
+    queryFn: () => listAccounts(),
+  });
+  const accountOptions: string[] = React.useMemo(() => {
+    return (accountsData?.items ?? []).map((a: any) => a.name).filter(Boolean);
+  }, [accountsData]);
+
+  const fields = fetchRes?.orderedFields ?? [];
+  const formatField: FieldConfig | undefined = fields.find(f => f.name === "format");
+  const startDateField: FieldConfig | undefined = fields.find(f => f.name === "start_date");
+  const endDateField: FieldConfig | undefined = fields.find(f => f.name === "end_date");
+  const payorUsernameField: FieldConfig | undefined = fields.find(f => f.name === "payor_username");
+
+  const createMutation = useMutation({ mutationFn: (data: any) => create(data) });
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) => update(id, data),
+  });
+  const deleteMutation = useMutation({ mutationFn: (id: string) => remove(id) });
+  const uploadMutation = useUploadFile();
+
+  const requests = listData?.items ?? [];
+
+  const handleUpload = async () => {
+    if (!file) return;
+    const result = await uploadMutation.mutateAsync(file);
+    if (result?.saved_as) {
+      setUploadedPath(result.saved_as);
+      if (!format) setFormat(file.name.split(".").pop() || "");
+      setSnackbar({ message: `File uploaded: ${result.saved_as}`, severity: "success" });
+    }
+  };
+
+  const handleCreate = async () => {
+    if (!accountName) return;
+
+    let source: FileSource | EmailSource;
+
+    if (sourceType === "file") {
+      if (!uploadedPath || !format) return;
+      source = { path: uploadedPath, format } as FileSource;
+    } else {
+      if (!format) return;
+      const emailSource: EmailSource = { format };
+      if (fromEmail) emailSource.from_email = fromEmail;
+      if (subject) emailSource.subject = subject;
+      if (rawTerms.trim()) emailSource.raw_terms = rawTerms.split(",").map((s) => s.trim()).filter(Boolean);
+      source = emailSource;
+    }
+
+    try {
+      const result = await createMutation.mutateAsync({
+        source,
+        account_name: accountName,
+        payor_username: payorUsername,
+        ...(startDate ? { start_date: new Date(startDate).toISOString() } : {}),
+        ...(endDate ? { end_date: new Date(endDate).toISOString() } : {}),
+      });
+      setSnackbar({ message: "Fetch request created", severity: "success" });
+      resetForm();
+      navigate(`/fetch-requests/${result.id}`);
+    } catch (err: any) {
+      if (err?.response?.status === 409) {
+        setSnackbar({ message: "Duplicate — same fingerprint already exists", severity: "error" });
+      } else {
+        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
+      }
+    }
+  };
+
+  const resetForm = () => {
+    setAccountName("");
+    setFormat("");
+    setFile(null);
+    setUploadedPath(null);
+    setFromEmail("");
+    setSubject("");
+    setRawTerms("");
+    setStartDate("");
+    setEndDate("");
+  };
+
+  const handleRetry = async (req: FetchRequest) => {
+    try {
+      await updateMutation.mutateAsync({ id: req.id, data: { status: "pending" } });
+      setSnackbar({ message: "Retrying fetch request", severity: "success" });
+    } catch {
+      setSnackbar({ message: "Failed to retry", severity: "error" });
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteMutation.mutateAsync(deleteTarget.id);
+      setSnackbar({ message: "Fetch request deleted", severity: "success" });
+    } catch {
+      setSnackbar({ message: "Failed to delete", severity: "error" });
+    }
+    setDeleteTarget(null);
+  };
+
+  return (
+    <Container sx={{ mt: 4, mb: 4 }}>
+      <Typography variant="h5" fontWeight="bold" gutterBottom>
+        Fetch Request Pipeline
+      </Typography>
+
+      {/* Create Form */}
+      <Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
+        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+          New Fetch Request
+        </Typography>
+
+        <ToggleButtonGroup
+          value={sourceType}
+          exclusive
+          onChange={(_, val) => val && setSourceType(val)}
+          sx={{ mb: 3 }}
+          size="small"
+        >
+          <ToggleButton value="file">File Upload</ToggleButton>
+          <ToggleButton value="email">Email Fetch</ToggleButton>
+        </ToggleButtonGroup>
+
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          {sourceType === "file" ? (
+            <>
+              <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
+                <Button variant="outlined" component="label" startIcon={<CloudUploadIcon />}>
+                  Choose File
+                  <input type="file" hidden onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
+                </Button>
+                <Typography variant="body2" sx={{ flex: 1, color: "text.secondary" }}>
+                  {file ? file.name : "No file selected"}
+                </Typography>
+                <Button
+                  variant="contained"
+                  onClick={handleUpload}
+                  disabled={!file || uploadMutation.isPending}
+                >
+                  {uploadMutation.isPending ? "Uploading..." : "Upload"}
+                </Button>
+              </Box>
+              {uploadedPath && (
+                <Alert severity="success" sx={{ py: 0 }}>
+                  Uploaded as: {uploadedPath}
+                </Alert>
+              )}
+              {formatField && (
+                <FormFieldRenderer field={formatField} value={format} onChange={setFormat} />
+              )}
+            </>
+          ) : (
+            <>
+              {formatField && (
+                <FormFieldRenderer field={formatField} value={format} onChange={setFormat} />
+              )}
+              <TextField label="From Email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} size="small" />
+              <TextField label="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} size="small" />
+              <TextField label="Raw Terms" value={rawTerms} onChange={(e) => setRawTerms(e.target.value)} size="small" helperText="Comma-separated search terms" />
+            </>
+          )}
+
+          <Autocomplete
+            options={accountOptions}
+            value={accountName || null}
+            onChange={(_, val) => setAccountName(val ?? "")}
+            renderInput={(params) => (
+              <TextField {...params} label="Account Name" size="small" required />
+            )}
+          />
+
+          {payorUsernameField && (
+            <FormFieldRenderer field={payorUsernameField} value={payorUsername} onChange={setPayorUsername} />
+          )}
+
+          <Box sx={{ display: "flex", gap: 2 }}>
+            {startDateField && (
+              <Box sx={{ flex: 1 }}>
+                <FormFieldRenderer field={startDateField} value={startDate} onChange={setStartDate} />
+              </Box>
+            )}
+            {endDateField && (
+              <Box sx={{ flex: 1 }}>
+                <FormFieldRenderer field={endDateField} value={endDate} onChange={setEndDate} />
+              </Box>
+            )}
+          </Box>
+
+          <Button
+            variant="contained"
+            onClick={handleCreate}
+            disabled={createMutation.isPending || !accountName || (sourceType === "file" && (!uploadedPath || !format)) || (sourceType === "email" && !format)}
+          >
+            {createMutation.isPending ? "Creating..." : "Create Fetch Request"}
+          </Button>
+        </Box>
+      </Paper>
+
+      {/* Filters */}
+      <Paper sx={{ borderRadius: 4, mb: 2, p: 2 }} variant="outlined">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+          <FormControl size="small" sx={{ minWidth: 200 }}>
+            <InputLabel>Status</InputLabel>
+            <Select
+              multiple
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as string[])}
+              input={<OutlinedInput label="Status" />}
+              renderValue={(selected) => (selected as string[]).join(", ")}
+            >
+              {STATUS_OPTIONS.map((s) => (
+                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <Autocomplete
+            options={accountOptions}
+            value={accountFilter || null}
+            onChange={(_, val) => setAccountFilter(val ?? "")}
+            renderInput={(params) => (
+              <TextField {...params} label="Account" size="small" sx={{ minWidth: 160 }} />
+            )}
+            sx={{ minWidth: 160 }}
+          />
+          <ToggleButtonGroup
+            value={sourceFilter}
+            exclusive
+            onChange={(_, val) => val && setSourceFilter(val)}
+            size="small"
+          >
+            <ToggleButton value="all">All</ToggleButton>
+            <ToggleButton value="file">File</ToggleButton>
+            <ToggleButton value="email">Email</ToggleButton>
+          </ToggleButtonGroup>
+          <Box sx={{ flex: 1 }} />
+          <IconButton onClick={() => refetch()} disabled={isFetching}>
+            <RefreshIcon />
+          </IconButton>
+        </Box>
+      </Paper>
+
+      {/* List Table */}
+      {isLoading ? (
+        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+          <CircularProgress />
+        </Box>
+      ) : requests.length === 0 ? (
+        <Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
+          No fetch requests yet
+        </Box>
+      ) : (
+        <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 4 }}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>ID</TableCell>
+                <TableCell>Account</TableCell>
+                <TableCell>Source</TableCell>
+                <TableCell>Date Range</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Retries</TableCell>
+                <TableCell>Created</TableCell>
+                <TableCell align="right">Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {[...requests]
+                .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                .map((req: FetchRequest) => (
+                  <TableRow
+                    key={req.id}
+                    hover
+                    sx={{ cursor: "pointer" }}
+                    onClick={() => navigate(`/fetch-requests/${req.id}`)}
+                  >
+                    <TableCell>
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                        <Typography variant="body2" sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
+                          {shortId(req.fingerprint)}
+                        </Typography>
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            navigator.clipboard.writeText(req.fingerprint);
+                            setSnackbar({ message: "Copied!", severity: "success" });
+                          }}
+                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
+                        >
+                          <ContentCopyIcon sx={{ fontSize: 14 }} />
+                        </IconButton>
+                      </Box>
+                    </TableCell>
+                    <TableCell>{req.account_name}</TableCell>
+                    <TableCell>
+                      <Chip
+                        label={"path" in req.source ? "File" : "Email"}
+                        size="small"
+                        variant="outlined"
+                        color={"path" in req.source ? "primary" : "secondary"}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
+                        {(req as any).start_date ? new Date((req as any).start_date).toLocaleDateString() : "?"} → {(req as any).end_date ? new Date((req as any).end_date).toLocaleDateString() : "?"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
+                        <Chip
+                          icon={statusIcons[req.status] as any}
+                          label={req.status.replace(/_/g, " ")}
+                          color={statusColors[req.status]}
+                          size="small"
+                        />
+                      </Tooltip>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
+                        {(req.retry_count ?? 0) > 0 ? `${req.retry_count}/${RETRY_MAX}` : "—"}
+                      </Typography>
+                    </TableCell>
+                    <TableCell>
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
+                        {new Date(req.created_at).toLocaleString()}
+                      </Typography>
+                    </TableCell>
+                    <TableCell align="right">
+                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+                        {req.status === "paused" && (
+                          <Tooltip title="Resolve ambiguities">
+                            <IconButton size="small" onClick={(e) => { e.stopPropagation(); navigate(`/fetch-requests/${req.id}`); }}>
+                              <WarningAmberIcon fontSize="small" color="warning" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        {req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
+                          <Tooltip title="Retry">
+                            <IconButton size="small" onClick={(e) => { e.stopPropagation(); handleRetry(req); }}>
+                              <ReplayIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        <Tooltip title="Delete">
+                          <IconButton size="small" onClick={(e) => { e.stopPropagation(); setDeleteTarget(req); }}>
+                            <DeleteIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      </Box>
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+
+      <Snackbar
+        open={!!snackbar}
+        autoHideDuration={4000}
+        onClose={() => setSnackbar(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        {snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
+      </Snackbar>
+
+      <Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Fetch Request?</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            This will permanently delete the fetch request and all associated data.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
+          <Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
+            {deleteMutation.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+}

src/RequireAuth.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth, AuthPage } from "../react-auth";
+
+export function RequireAuth({ children }: { children: React.ReactNode }) {
+  const { currentUser, loading, error, login, register } = useAuth();
+  const navigate = useNavigate();
+  const [mode, setMode] = React.useState<"login" | "register">("login");
+
+  if (currentUser) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthPage
+      mode={mode}
+      onBack={() => navigate("/")}
+      onSwitchMode={() => setMode(mode === "login" ? "register" : "login")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}

src/features/fetch-requests/fetch-requests.models.ts

@@ -9,7 +9,7 @@ export type FetchRequestStatus =
 
 export interface FileSource {
   path: string;
-  bank: string;
+  format: string;
   raw_lines?: string[];
   txn_blocks?: Record<string, any>;
   txn_dicts?: Record<string, any>[];
@@ -18,7 +18,7 @@ export interface FileSource {
 }
 
 export interface EmailSource {
-  bank: string;
+  format: string;
   from_email?: string;
   subject?: string;
   raw_terms?: string[];
@@ -26,12 +26,9 @@ export interface EmailSource {
   txn_dicts_count?: number;
 }
 
-export type PipelineType = "heuristic" | "llm" | "llama_parser";
-
 export interface FetchRequestCreate {
   source: FileSource | EmailSource;
   account_name: string;
-  pipeline?: PipelineType;
   payor_username?: string;
   start_date?: string;
   end_date?: string;

src/features/fetch-requests/index.ts

@@ -14,7 +14,6 @@ export type {
   SSEEventStep,
   SSEEventStatus,
   ProgressMessage,
-  PipelineType,
 } from "./fetch-requests.models";
 export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
 export {

src/main.jsx

@@ -10,7 +10,6 @@ import {
 import {
   Box,
   CssBaseline,
-  CircularProgress,
   Toolbar
 } from "@mui/material";
 import Home from './Home';
@@ -82,17 +81,8 @@ const routerMapping = [
 
 /** Reads authConfig from AppProvider context and passes it to AuthProvider. */
 function AppContent() {
-  const { authConfig, loading } = useAppContext();
+  const { authConfig } = useAppContext();
   const navigate = useNavigate();
-
-  if (loading) {
-    return (
-      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
   return (
     <AuthProvider authConfig={authConfig} onUnauthorized={() => navigate("/login")}>
       <AppTheme>