feat: add status colors for document pipeline stages, add status filter to documents page

frontend/src/pages/Documents.tsx

@@ -5,10 +5,17 @@ import { DataTable, type Column } from '../components/DataTable';
 import { StatusBadge, LoadingSpinner, TickerFilter } from '../components/ui';
 import type { Document } from '../api/hooks';
 
+const STATUS_OPTIONS = ['', 'extracted', 'parsed', 'extraction_failed', 'low_quality'] as const;
+
 export function DocumentsPage() {
   const navigate = useNavigate();
   const [ticker, setTicker] = useState('');
-  const { data, isLoading, error } = useDocuments({ ticker: ticker || undefined, limit: 100 });
+  const [status, setStatus] = useState('');
+  const { data, isLoading, error } = useDocuments({
+    ticker: ticker || undefined,
+    status: status || undefined,
+    limit: 100,
+  });
 
   const columns: Column<Document>[] = [
     { key: 'title', header: 'Title', render: (r) => <span className="line-clamp-1 max-w-xs">{r.title ?? '—'}</span> },
@@ -26,7 +33,20 @@ export function DocumentsPage() {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <h1 className="text-xl font-semibold text-gray-100">Documents</h1>
-        <TickerFilter value={ticker} onChange={setTicker} />
+        <div className="flex items-center gap-3">
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            className="rounded-md border border-surface-700 bg-surface-900 px-3 py-1.5 text-sm text-gray-200 focus:border-brand-500 focus:outline-none"
+            aria-label="Filter by status"
+          >
+            <option value="">All statuses</option>
+            {STATUS_OPTIONS.filter(Boolean).map((s) => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+          <TickerFilter value={ticker} onChange={setTicker} />
+        </div>
       </div>
       <DataTable<Document>
         data={data ?? []}