AI-1478: Frontend UX consistency and confirmation standardization

apps/frontend/src/App.css

@@ -31,23 +31,6 @@
   flex-wrap: nowrap;
 }
 
-/* Compact name + email in BC header utilities */
-.app-header-user {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  line-height: 1.15;
-}
-
-.app-header-user .bcds-react-aria-Text {
-  display: block;
-  line-height: 1.15;
-}
-
-.app-header-user .bcds-react-aria-Text + .bcds-react-aria-Text {
-  margin-top: 0.25rem;
-}
-
 /* Tight title/description pairing in standard page headers */
 .bcds-page-header__title-block .bcds-react-aria-Heading,
 .bcds-page-header__title-block .bcds-react-aria-Text {

apps/frontend/src/App.tsx

@@ -72,7 +72,7 @@ const router = createBrowserRouter([
       { path: "tables", element: <TablesListPage /> },
       { path: "tables/:tableId", element: <TableDetailPage /> },
 
-      // Template Models with nested routes
+      // Template models with nested routes
       { path: "template-models", element: <ModelListPage /> },
       { path: "template-models/:modelId", element: <ModelDetailPage /> },
       {
@@ -88,7 +88,7 @@ const router = createBrowserRouter([
       { path: "groups", element: <GroupsPage /> },
       { path: "groups/:groupId", element: <GroupDetailPage /> },
 
-      // Confusion Profiles
+      // Confusion profiles
       { path: "confusion-profiles", element: <ConfusionProfilesPage /> },
 
       // Benchmarking routes

apps/frontend/src/components/DocumentsList.tsx

@@ -37,7 +37,7 @@ export const DocumentsList: React.FC = () => {
       <Alert
         variant="light"
         color="red"
-        title="Error Loading Documents"
+        title="Error loading documents"
         icon="❌"
       >
         {error.message}

apps/frontend/src/components/ErrorBoundary.spec.tsx

@@ -93,7 +93,7 @@ describe("ErrorBoundary", () => {
     );
   });
 
-  it("resets and shows children again when Try again is clicked and error is resolved", () => {
+  it("resets and shows children again when try again is clicked and error is resolved", () => {
     const { ThrowingChild, setThrow } = createThrowingChild();
     setThrow(true);
 
@@ -111,7 +111,7 @@ describe("ErrorBoundary", () => {
     expect(screen.getByText("Safe content")).toBeInTheDocument();
   });
 
-  it("shows Go to home page button on the final retry attempt", () => {
+  it("shows go to home page button on the final retry attempt", () => {
     const { ThrowingChild, setThrow } = createThrowingChild();
     setThrow(true);
 
@@ -133,7 +133,7 @@ describe("ErrorBoundary", () => {
     ).toBeInTheDocument();
   });
 
-  it("redirects to home when Go to home page is clicked", () => {
+  it("redirects to home when go to home page is clicked", () => {
     const originalLocation = window.location;
     Object.defineProperty(window, "location", {
       value: { href: "" },

apps/frontend/src/components/RouterErrorPage.spec.tsx

@@ -45,7 +45,7 @@ describe("RouterErrorPage", () => {
     ).toBeInTheDocument();
   });
 
-  it("reports an Error instance to the backend", async () => {
+  it("reports an error instance to the backend", async () => {
     const error = new Error("Route crashed");
     mockUseRouteError.mockReturnValue(error);
 
@@ -63,19 +63,19 @@ describe("RouterErrorPage", () => {
   });
 
   it("reports a non-Error thrown value to the backend", async () => {
-    mockUseRouteError.mockReturnValue("404 Not Found");
+    mockUseRouteError.mockReturnValue("404 not found");
 
     renderPage();
 
     await waitFor(() => {
       expect(mockPost).toHaveBeenCalledWith(
         "client-errors",
-        expect.objectContaining({ message: "404 Not Found" }),
+        expect.objectContaining({ message: "404 not found" }),
       );
     });
   });
 
-  it("navigates to / when Go to home page is clicked", () => {
+  it("navigates to / when go to home page is clicked", () => {
     mockUseRouteError.mockReturnValue(new Error("Route crashed"));
 
     renderPage();

apps/frontend/src/components/classification/ClassificationFiles.tsx

@@ -86,14 +86,14 @@ const ClassificationFiles = (props: ClassificationFilesProps) => {
     <Stack>
       <Paper shadow="xs" radius="md" p="md" withBorder>
         <Group justify="space-between" align="center" mb="xs">
-          <h2>Classification Label Training Groups</h2>
+          <h2>Classification label training groups</h2>
           <Group gap={4}>
             <Button
               variant="outline"
               size="xs"
               onClick={() => setUploadModal({ open: true, label: "" })}
             >
-              Add Label Group
+              Add label group
             </Button>
             {classifierModel && (
               <Tooltip label={trainTooltip} disabled={!trainDisabled} withArrow>
@@ -127,7 +127,7 @@ const ClassificationFiles = (props: ClassificationFilesProps) => {
           <Notification
             icon={<IconInfoCircle size={18} />}
             color="blue"
-            title="Training Started"
+            title="Training started"
             onClose={() => setShowTrainingNotice(false)}
             mt="sm"
           >
@@ -141,7 +141,7 @@ const ClassificationFiles = (props: ClassificationFilesProps) => {
         )}
         <Text size="sm" c="dimmed" mb="md">
           {files.length === 0
-            ? "No files uploaded yet. Use the 'Add Label Group' button to create a new group and upload files."
+            ? "No files uploaded yet. Use the 'add label group' button to create a new group and upload files."
             : "Each label represents a group of files used for training. You can add files to an existing label or delete an entire label group."}
         </Text>
         <Text size="sm" c="dimmed" mb="md">

apps/frontend/src/components/classification/ClassifierAccess.tsx

@@ -108,7 +108,7 @@ const ClassifierAccess = ({ model }: ClassifierAccessProps) => {
   return (
     <Paper shadow="xs" radius="md" p="md" withBorder>
       <Stack>
-        <Title order={2}>Classifier Test</Title>
+        <Title order={2}>Classifier test</Title>
         <Text c="dimmed">
           This classifier is ready for use. Upload a document to test it below.
         </Text>
@@ -128,7 +128,7 @@ const ClassifierAccess = ({ model }: ClassifierAccessProps) => {
             loading={loading || polling}
             disabled={!file || loading || polling}
           >
-            Submit for Classification
+            Submit for classification
           </Button>
         </Group>
         {error && (
@@ -139,7 +139,7 @@ const ClassifierAccess = ({ model }: ClassifierAccessProps) => {
         {result && (
           <Paper shadow="xs" radius="md" p="md" withBorder>
             <Text fw={500} mb={4}>
-              Classification Analyze Result:
+              Classification analyze result:
             </Text>
             <Code block style={{ width: "100%", whiteSpace: "pre-wrap" }}>
               {result}

apps/frontend/src/components/classification/ClassifierDetails.tsx

@@ -81,7 +81,7 @@ const ClassifierDetails = ({
           })}
         >
           <Group justify="space-between">
-            <h2>Classifier Details</h2>
+            <h2>Classifier details</h2>
             <Group gap="xs">
               {canDelete && (
                 <Button
@@ -112,7 +112,7 @@ const ClassifierDetails = ({
             <b>Name:</b> {classifierModel.name}
           </Text>
           <Text mt="md">
-            <b>Group Ownership:</b>{" "}
+            <b>Group ownership:</b>{" "}
             {classifierModel.group
               ? classifierModel.group.name
               : `ID: ${classifierModel.group_id}`}

apps/frontend/src/components/classification/ClassifierModals.tsx

@@ -37,7 +37,7 @@ export const DeleteClassifierModal = ({
   <Modal
     opened={isOpen}
     onClose={() => setIsOpen(false)}
-    title="Delete Classifier Files"
+    title="Delete classifier files"
     centered
   >
     <Stack gap="md">
@@ -126,7 +126,7 @@ export const UploadClassifierFilesModal = ({
     <Modal
       opened={isOpen}
       onClose={() => setIsOpen(false)}
-      title="Upload Files to Classifier"
+      title="Upload files to classifier"
       centered
     >
       <form onSubmit={form.onSubmit(handleSubmit)}>
@@ -215,7 +215,7 @@ export const DeleteClassifierConfirmationModal = ({
       {
         onSuccess: () => {
           notifications.show({
-            title: "Classifier Deleted",
+            title: "Classifier deleted",
             message: `"${classifierName}" has been permanently deleted.`,
             color: "green",
           });
@@ -243,7 +243,7 @@ export const DeleteClassifierConfirmationModal = ({
     <Modal
       opened={isOpen}
       onClose={handleClose}
-      title="Delete Classifier"
+      title="Delete classifier"
       centered
     >
       <Stack gap="md">
@@ -361,7 +361,7 @@ export const CreateClassifierModal = (props: CreateClassifierModalProps) => {
       >
         <Stack gap="md">
           <TextInput
-            label="Classifier Name"
+            label="Classifier name"
             placeholder="Enter classifier name"
             {...form.getInputProps("name")}
             required

apps/frontend/src/components/document/DocumentValidation.tsx

@@ -97,20 +97,20 @@ export function DocumentValidation({
         <div>
           <Group justify="space-between" align="flex-start">
             <div>
-              <Title order={4}>Document Validation Required</Title>
+              <Title order={4}>Document validation required</Title>
               <Text size="sm" c="dimmed" mt={4}>
                 This document has low OCR confidence and requires human review
               </Text>
             </div>
             <Badge color={confidenceColor} size="lg" variant="light">
-              {confidencePercentage}% Confidence
+              {confidencePercentage}% confidence
             </Badge>
           </Group>
         </div>
 
         <Alert
           icon={<IconAlertTriangle size={16} />}
-          title="Review Required"
+          title="Review required"
           color="orange"
           variant="light"
         >
@@ -120,7 +120,7 @@ export function DocumentValidation({
 
         <div>
           <Text size="sm" fw={600} mb="xs">
-            Extracted Text Preview:
+            Extracted text preview:
           </Text>
           <Paper
             p="sm"
@@ -145,7 +145,7 @@ export function DocumentValidation({
         {keyValuePairsArray.length > 0 && (
           <div>
             <Text size="sm" fw={600} mb="xs">
-              Key-Value Pairs ({keyValuePairsArray.length}):
+              Key-Value pairs ({keyValuePairsArray.length}):
             </Text>
             <Paper
               p="sm"
@@ -189,7 +189,7 @@ export function DocumentValidation({
 
         <div>
           <Text size="sm" fw={600} mb="xs">
-            Review Comments (Optional):
+            Review comments (optional):
           </Text>
           <Textarea
             placeholder="Add any comments about the OCR results..."
@@ -202,7 +202,7 @@ export function DocumentValidation({
 
         <div>
           <Text size="sm" fw={600} mb="xs">
-            Rejection Reason{" "}
+            Rejection reason{" "}
             <Text span c="red">
               *
             </Text>{" "}
@@ -213,23 +213,23 @@ export function DocumentValidation({
             data={[
               {
                 value: RejectionReason.INPUT_QUALITY,
-                label: "❌ Input Quality (scan unreadable, cutoff, skew)",
+                label: "❌ Input quality (scan unreadable, cutoff, skew)",
               },
               {
                 value: RejectionReason.OCR_FAILURE,
-                label: "❌ OCR Failure (missing fields, hallucinations)",
+                label: "❌ OCR failure (missing fields, hallucinations)",
               },
               {
                 value: RejectionReason.MODEL_MISMATCH,
-                label: "❌ Model Mismatch (wrong document type/template)",
+                label: "❌ Model mismatch (wrong document type/template)",
               },
               {
                 value: RejectionReason.CONFIDENCE_TOO_LOW,
-                label: "❌ Confidence Too Low (too low to trust)",
+                label: "❌ Confidence too low (too low to trust)",
               },
               {
                 value: RejectionReason.SYSTEMIC_ERROR,
-                label: "❌ Systemic Error (pipeline bug)",
+                label: "❌ Systemic error (pipeline bug)",
               },
             ]}
             value={rejectionReason || null}
@@ -245,10 +245,10 @@ export function DocumentValidation({
 
         <div>
           <Text size="sm" fw={600} mb="xs">
-            Annotations (Optional):
+            Annotations (optional):
           </Text>
           <Textarea
-            placeholder="What failed, where, why? (e.g., 'Field X is missing on page 2', 'OCR hallucinated text in section Y')"
+            placeholder="What failed, where, why? (e.g., 'field X is missing on page 2', 'OCR hallucinated text in section Y')"
             value={annotations}
             onChange={(e) => setAnnotations(e.currentTarget.value)}
             minRows={3}