feat: classify sensitive columns locally

frontend/src/shell/database-management/SensitiveDataReviewDrawer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Save } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "../../components/ui/button";
@@ -6,7 +6,7 @@ import { apiErrorMessage } from "../../api/client";
 import {
   updateCatalogColumnSensitive,
   type CatalogColumn,
-  type SensitiveDataSuggestion,
+  type SensitivityReviewItem,
 } from "../../api/catalog-databases";
 import { FleetLedgerDrawer } from "./FleetLedgerShell";
 
@@ -14,7 +14,7 @@ interface Props {
   open: boolean;
   databaseId: string | null;
   scopeLabel: string;
-  suggestions: SensitiveDataSuggestion[];
+  suggestions: SensitivityReviewItem[];
   canManage: boolean;
   onClose: () => void;
   onSaved: (columns: CatalogColumn[]) => void;
@@ -33,16 +33,26 @@ export function SensitiveDataReviewDrawer({
   const [search, setSearch] = useState("");
   const [showAll, setShowAll] = useState(false);
   const [saving, setSaving] = useState(false);
+  const initializedReview = useRef<string | null>(null);
+  const reviewKey = useMemo(
+    () => suggestions.map((suggestion) => suggestion.columnId).join(":"),
+    [suggestions],
+  );
 
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      initializedReview.current = null;
+      return;
+    }
+    if (initializedReview.current === reviewKey) return;
+    initializedReview.current = reviewKey;
     setDrafts(Object.fromEntries(suggestions.map((suggestion) => [
       suggestion.columnId,
       suggestion.sensitive,
     ])));
     setSearch("");
     setShowAll(false);
-  }, [open, suggestions]);
+  }, [open, reviewKey, suggestions]);
 
   const changed = useMemo(() => suggestions.filter((suggestion) => (
     drafts[suggestion.columnId] !== undefined
@@ -92,8 +102,8 @@ export function SensitiveDataReviewDrawer({
       open
       ariaLabel="Sensitive field review"
       eyebrow="Sensitive data"
-      title="Review suggested flags"
-      description={`${scopeLabel}. The model proposed values, but only your save changes the catalog.`}
+      title="Review local assessments"
+      description={`${scopeLabel}. Local rules proposed values, but only your save changes the catalog.`}
       onClose={close}
       closeLabel="Close sensitive field review"
       busy={saving}
@@ -101,7 +111,7 @@ export function SensitiveDataReviewDrawer({
       footerClassName="thot-catalog-drawer__footer--split"
       footer={(
         <>
-          <p className="text-xs text-muted-foreground">Unsaved suggestions never change the catalog.</p>
+          <p className="text-xs text-muted-foreground">Unsaved assessments never change the catalog.</p>
           <div className="flex gap-2">
             <Button type="button" variant="outline" disabled={saving} onClick={close}>Cancel</Button>
             <Button type="button" disabled={!canManage || saving || changed.length === 0} onClick={() => void save()}>
@@ -115,7 +125,7 @@ export function SensitiveDataReviewDrawer({
           <div className="flex items-center gap-3">
             <input
               className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15"
-              aria-label="Search sensitive field suggestions"
+              aria-label="Search sensitivity assessments"
               placeholder="Search table or column"
               value={search}
               onChange={(event) => setSearch(event.target.value)}
@@ -131,7 +141,7 @@ export function SensitiveDataReviewDrawer({
               checked={showAll}
               onChange={(event) => setShowAll(event.target.checked)}
             />
-            Show all {suggestions.length} classified columns
+            Show all {suggestions.length} assessed columns
           </label>
       </div>
 
@@ -144,7 +154,7 @@ export function SensitiveDataReviewDrawer({
               </p>
             </div>
           ) : (
-            <ul className="divide-y divide-border" aria-label="Sensitive field suggestions">
+            <ul className="divide-y divide-border" aria-label="Sensitivity assessments">
               {visible.map((suggestion) => {
                 const proposed = drafts[suggestion.columnId] ?? suggestion.sensitive;
                 const changedFromCurrent = proposed !== suggestion.currentSensitive;
@@ -168,6 +178,13 @@ export function SensitiveDataReviewDrawer({
                       <p className="mt-1 text-xs text-muted-foreground">
                         Current: {suggestion.currentSensitive ? "protected" : "allowed"}. Proposed: {proposed ? "protected" : "allowed"}.
                       </p>
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        Assessment: {suggestion.assessment.replace("_", " ")}. Evidence: {suggestion.evidence.length > 0
+                          ? suggestion.evidence.map((item) => item.label
+                            ? `${item.ruleId} (${item.label}${item.confidence === undefined ? "" : ` ${Math.round(item.confidence * 100)}%`})`
+                            : item.ruleId).join(", ")
+                          : "no sensitive match"}. Observed values: {suggestion.observedValues}.
+                      </p>
                     </div>
                     <span className={`rounded px-2 py-0.5 text-[11px] font-semibold ${changedFromCurrent ? "bg-amber-500/12 text-amber-800 dark:text-amber-300" : "bg-muted text-muted-foreground"}`}>
                       {changedFromCurrent ? "Change" : "No change"}