polling and sort by doc

frontend/src/hooks/usePolling.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * usePolling — self-rescheduling setTimeout-based polling.
+ *
+ * Calls `callback` every `interval` ms while `active` is true.
+ * Stops automatically when `active` becomes false.
+ * Cleans up on unmount.
+ *
+ * Uses setTimeout (not setInterval) so each poll waits for the
+ * previous one to finish before scheduling the next — identical
+ * to the pattern used in Documents.jsx.
+ *
+ * @param {() => Promise<void>} callback  Async function to call each tick.
+ * @param {number}              interval  Milliseconds between polls.
+ * @param {boolean}             active    Poll only while this is true.
+ */
+export function usePolling(callback, interval, active) {
+    const timerRef = useRef(null);
+    const callbackRef = useRef(callback);
+
+    // Keep callbackRef current without restarting the effect.
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+
+    useEffect(() => {
+        if (!active) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+            return;
+        }
+
+        timerRef.current = setTimeout(async () => {
+            await callbackRef.current();
+        }, interval);
+
+        return () => {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        };
+    // Re-run whenever active or the data that drives active changes.
+    // interval is stable so including it has no cost.
+    }, [active, interval]);
+}

frontend/src/pages/Activity.jsx

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { useWorkspace } from "../hooks/useWorkspace";
+import { usePolling } from "../hooks/usePolling";
 import { listActivity } from "../api/activity";
-import { Card, CardHeader, CardBody, Badge, LoadingState, EmptyState, Glossary } from "../components/ui";
+import { listDocuments } from "../api/documents";
+import { Badge, LoadingState, EmptyState, Glossary } from "../components/ui";
 import { GLOSSARY } from "../utils/labels";
 import "./Activity.css";
 
@@ -29,6 +31,9 @@ const TYPE_TONE = {
     commit_created: "success",
 };
 
+// How often to check for new events while the page is open.
+const REFRESH_INTERVAL = 15000;
+
 export default function Activity() {
     const { workspace, loading: wsLoading } = useWorkspace();
     const [events, setEvents] = useState([]);
@@ -36,7 +41,11 @@ export default function Activity() {
     const [loadingMore, setLoadingMore] = useState(false);
     const [nextCursor, setNextCursor] = useState(null);
     const [hasMore, setHasMore] = useState(false);
+    // Document filter: "" = All
+    const [docFilter, setDocFilter] = useState("");
+    const [documents, setDocuments] = useState([]);
 
+    // Initial full load — replaces whatever is in state.
     const load = useCallback(async () => {
         if (!workspace) return;
         setLoading(true);
@@ -53,6 +62,25 @@ export default function Activity() {
         }
     }, [workspace]);
 
+    // Background refresh — prepends only events the list doesn't have yet.
+    const refresh = useCallback(async () => {
+        if (!workspace) return;
+        try {
+            const response = await listActivity(workspace.id, 50);
+            const fresh = response?.events ?? (Array.isArray(response) ? response : []);
+            if (fresh.length === 0) return;
+            setEvents((prev) => {
+                const existingIds = new Set(prev.map((e) => e.id));
+                const newOnes = fresh.filter((e) => !existingIds.has(e.id));
+                if (newOnes.length === 0) return prev;
+                return [...newOnes, ...prev];
+            });
+        } catch {
+            // silently handle
+        }
+    }, [workspace]);
+
+    // Load older events (manual pagination, appended to the bottom).
     const loadOlder = useCallback(async () => {
         if (!workspace || !nextCursor || loadingMore) return;
         setLoadingMore(true);
@@ -69,11 +97,37 @@ export default function Activity() {
         }
     }, [workspace, nextCursor, loadingMore]);
 
+    // Initial load.
     useEffect(() => { load(); }, [load]);
 
+    // Load document list once for the dropdown.
+    useEffect(() => {
+        if (!workspace) return;
+        listDocuments(workspace.id)
+            .then((result) => { if (Array.isArray(result)) setDocuments(result); })
+            .catch(() => {});
+    }, [workspace]);
+
+    // Poll every 15 s to prepend new events while the page is open.
+    usePolling(refresh, REFRESH_INTERVAL, !!workspace);
+
+    // Apply document filter client-side.
+    // Events carry metadata.filename and/or metadata.document_id.
+    const visibleEvents = docFilter
+        ? events.filter((e) => {
+            const meta = e.metadata || {};
+            return meta.filename === docFilter;
+          })
+        : events;
+
     if (wsLoading) return <LoadingState label="Loading workspace…" />;
     if (!workspace) return <EmptyState title="No workspace" description="Create a workspace to get started." />;
 
+    // Build sorted unique filenames for the dropdown.
+    const docNames = Array.from(
+        new Set(documents.map((d) => d.filename).filter(Boolean))
+    ).sort();
+
     return (
         <div className="dw-page">
             <header className="dw-page__header">
@@ -83,17 +137,35 @@ export default function Activity() {
 
             <Glossary terms={GLOSSARY.activity} />
 
+            {/* Document filter dropdown */}
+            <div className="dw-knowledge__filters">
+                <select
+                    className="dw-knowledge__filter-select"
+                    value={docFilter}
+                    onChange={(e) => setDocFilter(e.target.value)}
+                >
+                    <option value="">All documents</option>
+                    {docNames.map((name) => (
+                        <option key={name} value={name}>{name}</option>
+                    ))}
+                </select>
+            </div>
+
             {loading ? (
                 <LoadingState label="Loading activity…" />
-            ) : events.length === 0 ? (
+            ) : visibleEvents.length === 0 ? (
                 <EmptyState
-                    title="No activity yet"
-                    description="Upload a document or process a workflow to see activity here."
+                    title={docFilter ? `No activity for "${docFilter}"` : "No activity yet"}
+                    description={
+                        docFilter
+                            ? "Try selecting a different document or All documents."
+                            : "Upload a document or process a workflow to see activity here."
+                    }
                 />
             ) : (
                 <>
                     <div className="dw-activity__list">
-                        {events.map((event) => (
+                        {visibleEvents.map((event) => (
                             <div key={event.id} className="dw-activity__item">
                                 <Badge tone={TYPE_TONE[event.type] || "default"}>
                                     {TYPE_LABELS[event.type] || event.type}
@@ -108,7 +180,8 @@ export default function Activity() {
                         ))}
                     </div>
 
-                    {hasMore && (
+                    {/* Only show "load older" when showing all events, not filtered */}
+                    {!docFilter && hasMore && (
                         <div className="dw-activity__load-more">
                             <button
                                 className="dw-activity__load-more-btn"

frontend/src/pages/Dashboard.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useWorkspace } from "../hooks/useWorkspace";
+import { usePolling } from "../hooks/usePolling";
 import { getDashboardStats } from "../api/dashboard";
 import { listDocuments } from "../api/documents";
 import { listActivity } from "../api/activity";
@@ -28,6 +29,9 @@ const EVENT_ICONS = {
     commit_created: "💾",
 };
 
+const ACTIVE_STATUSES = new Set(["PENDING", "RUNNING"]);
+const POLL_INTERVAL = 3000;
+
 export default function Dashboard() {
     const { workspace, loading: wsLoading } = useWorkspace();
     const navigate = useNavigate();
@@ -58,6 +62,10 @@ export default function Dashboard() {
 
     useEffect(() => { load(); }, [load]);
 
+    // Poll every 3 s while any of the recent docs is actively processing.
+    const hasActive = recentDocs.some((d) => ACTIVE_STATUSES.has(d.workflow_status));
+    usePolling(load, POLL_INTERVAL, hasActive);
+
     if (wsLoading || loading) return <LoadingState label="Loading dashboard..." />;
     if (!workspace) return <EmptyState title="No workspace" description="Create a workspace to get started." />;
 
@@ -109,10 +117,12 @@ export default function Dashboard() {
                         title="Recent Documents"
                         action={
                             <span style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
-                                <span style={{ fontSize: "var(--text-xs)", color: "var(--color-success)", display: "flex", alignItems: "center", gap: "4px" }}>
-                                    <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--color-success)", display: "inline-block" }} />
-                                    Live
-                                </span>
+                                {hasActive && (
+                                    <span style={{ fontSize: "var(--text-xs)", color: "var(--color-success)", display: "flex", alignItems: "center", gap: "4px" }}>
+                                        <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: "var(--color-success)", display: "inline-block" }} />
+                                        Live
+                                    </span>
+                                )}
                                 <Button size="sm" variant="ghost" onClick={() => navigate("/documents")}>View all</Button>
                             </span>
                         }

frontend/src/pages/Knowledge.jsx

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useWorkspace } from "../hooks/useWorkspace";
+import { usePolling } from "../hooks/usePolling";
 import { listKnowledge } from "../api/knowledge";
+import { listDocuments } from "../api/documents";
 import { restoreProposal } from "../api/proposals";
 import {
     Card,
@@ -59,6 +61,9 @@ const STATUSES = [
     "REJECTED",
 ];
 
+// Poll every 3 s while any item is still PENDING (being processed).
+const POLL_INTERVAL = 3000;
+
 function ConfidenceBar({ confidence }) {
     if (confidence == null) return null;
 
@@ -93,19 +98,14 @@ function EvidenceBlock({ evidence }) {
     return (
         <div className="dw-knowledge__evidence">
             {evidence.map((ev, i) => (
-                <div
-                    key={i}
-                    className="dw-knowledge__evidence-item"
-                >
+                <div key={i} className="dw-knowledge__evidence-item">
                     <p className="dw-knowledge__evidence-quote">
                         "{ev.quote}"
                     </p>
-
                     <div className="dw-knowledge__evidence-meta">
                         {ev.page_number && (
                             <span>Page {ev.page_number}</span>
                         )}
-
                         {ev.section && (
                             <span>{ev.section}</span>
                         )}
@@ -124,6 +124,18 @@ export default function Knowledge() {
     const [loading, setLoading] = useState(true);
     const [typeFilter, setTypeFilter] = useState("");
     const [statusFilter, setStatusFilter] = useState("");
+    // Document dropdown: "" means All
+    const [docFilter, setDocFilter] = useState("");
+    // List of uploaded documents for the dropdown
+    const [documents, setDocuments] = useState([]);
+
+    // Load the document list once (for the dropdown).
+    useEffect(() => {
+        if (!workspace) return;
+        listDocuments(workspace.id)
+            .then((result) => { if (Array.isArray(result)) setDocuments(result); })
+            .catch(() => {});
+    }, [workspace]);
 
     const load = useCallback(async () => {
         if (!workspace) return;
@@ -162,9 +174,18 @@ export default function Knowledge() {
         }
     }, [workspace, typeFilter, statusFilter]);
 
-    useEffect(() => {
-        load();
-    }, [load]);
+    useEffect(() => { load(); }, [load]);
+
+    // Poll every 3 s while any knowledge item is still PENDING —
+    // new items appear automatically as documents finish processing.
+    const hasActive = items.some((i) => i.status === "PENDING");
+    usePolling(load, POLL_INTERVAL, hasActive);
+
+    // Apply document filter client-side (items already carry filename +
+    // document_version_id from the API response).
+    const visibleItems = docFilter
+        ? items.filter((i) => i.filename === docFilter)
+        : items;
 
     if (wsLoading) {
         return <LoadingState label="Loading workspace…" />;
@@ -179,6 +200,11 @@ export default function Knowledge() {
         );
     }
 
+    // Build sorted unique filenames for the dropdown.
+    const docNames = Array.from(
+        new Set(documents.map((d) => d.filename).filter(Boolean))
+    ).sort();
+
     return (
         <div className="dw-page">
             <header className="dw-page__header">
@@ -192,13 +218,27 @@ export default function Knowledge() {
             <Glossary terms={GLOSSARY.knowledge} />
 
             <div className="dw-knowledge__filters">
+                {/* Document filter */}
+                <select
+                    className="dw-knowledge__filter-select"
+                    value={docFilter}
+                    onChange={(e) => setDocFilter(e.target.value)}
+                >
+                    <option value="">All documents</option>
+                    {docNames.map((name) => (
+                        <option key={name} value={name}>
+                            {name}
+                        </option>
+                    ))}
+                </select>
+
+                {/* Type filter */}
                 <select
                     className="dw-knowledge__filter-select"
                     value={typeFilter}
                     onChange={(e) => setTypeFilter(e.target.value)}
                 >
                     <option value="">All types</option>
-
                     {TYPES.filter(Boolean).map((type) => (
                         <option key={type} value={type}>
                             {KNOWLEDGE_TYPE_LABELS[type] || type}
@@ -206,13 +246,13 @@ export default function Knowledge() {
                     ))}
                 </select>
 
+                {/* Status filter */}
                 <select
                     className="dw-knowledge__filter-select"
                     value={statusFilter}
                     onChange={(e) => setStatusFilter(e.target.value)}
                 >
                     <option value="">All statuses</option>
-
                     {STATUSES.filter(Boolean).map((status) => (
                         <option key={status} value={status}>
                             {KNOWLEDGE_STATUS_LABELS[status] || status}
@@ -223,15 +263,22 @@ export default function Knowledge() {
 
             {loading ? (
                 <LoadingState label="Loading knowledge items…" />
-            ) : items.length === 0 ? (
+            ) : visibleItems.length === 0 ? (
                 <EmptyState
-                    title="No knowledge has been committed yet"
-                    description="Upload and process documents to begin building the knowledge register."
+                    title={
+                        docFilter
+                            ? `No knowledge items for "${docFilter}"`
+                            : "No knowledge has been committed yet"
+                    }
+                    description={
+                        docFilter
+                            ? "Try selecting a different document or All documents."
+                            : "Upload and process documents to begin building the knowledge register."
+                    }
                 />
             ) : (
                 <div className="dw-knowledge__list">
-                    {items.map((item) => {
-                        // Derive display status from proposal state
+                    {visibleItems.map((item) => {
                         const displayStatus =
                             item.proposal?.status === "ARCHIVED"
                                 ? "ARCHIVED"
@@ -239,92 +286,71 @@ export default function Knowledge() {
                         const isArchived = item.proposal?.status === "ARCHIVED";
 
                         return (
-                        <Card
-                            key={item.id}
-                            interactive
-                            onClick={() =>
-                                navigate(`/knowledge/${item.id}`)
-                            }
-                        >
-                            <CardBody>
-                                <div className="dw-knowledge__item-header">
-                                    <Badge
-                                        tone={
-                                            TYPE_TONE[item.type] ||
-                                            "default"
-                                        }
-                                    >
-                                        {KNOWLEDGE_TYPE_LABELS[item.type] ||
-                                            item.type}
-                                    </Badge>
-
-                                    <Badge
-                                        tone={
-                                            STATUS_TONE[displayStatus] ||
-                                            "default"
-                                        }
-                                    >
-                                        {KNOWLEDGE_STATUS_LABELS[displayStatus] ||
-                                            displayStatus}
-                                    </Badge>
-
-                                    <ConfidenceBar
-                                        confidence={item.confidence}
-                                    />
-                                </div>
-
-                                <p className="dw-knowledge__item-title">
-                                    {item.title}
-                                </p>
-
-                                <p className="dw-knowledge__item-value">
-                                    {item.value}
-                                </p>
-
-                                {item.summary && (
-                                    <p className="dw-knowledge__item-summary">
-                                        {item.summary}
+                            <Card
+                                key={item.id}
+                                interactive
+                                onClick={() => navigate(`/knowledge/${item.id}`)}
+                            >
+                                <CardBody>
+                                    <div className="dw-knowledge__item-header">
+                                        <Badge tone={TYPE_TONE[item.type] || "default"}>
+                                            {KNOWLEDGE_TYPE_LABELS[item.type] || item.type}
+                                        </Badge>
+
+                                        <Badge tone={STATUS_TONE[displayStatus] || "default"}>
+                                            {KNOWLEDGE_STATUS_LABELS[displayStatus] || displayStatus}
+                                        </Badge>
+
+                                        <ConfidenceBar confidence={item.confidence} />
+                                    </div>
+
+                                    <p className="dw-knowledge__item-title">
+                                        {item.title}
                                     </p>
-                                )}
 
-                                <EvidenceBlock
-                                    evidence={item.evidence}
-                                />
+                                    <p className="dw-knowledge__item-value">
+                                        {item.value}
+                                    </p>
 
-                                <div className="dw-knowledge__item-meta">
-                                    {item.filename && (
-                                        <span>{item.filename}</span>
+                                    {item.summary && (
+                                        <p className="dw-knowledge__item-summary">
+                                            {item.summary}
+                                        </p>
                                     )}
 
-                                    {item.created_at && (
-                                        <span>
-                                            {new Date(
-                                                item.created_at
-                                            ).toLocaleDateString()}
-                                        </span>
-                                    )}
-                                </div>
-
-                                {isArchived && item.proposal?.id && (
-                                    <div className="dw-knowledge__item-actions">
-                                        <Button
-                                            size="sm"
-                                            variant="warning"
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                handleRestore(item.proposal.id, item.id);
-                                            }}
-                                        >
-                                            Restore to review
-                                        </Button>
+                                    <EvidenceBlock evidence={item.evidence} />
+
+                                    <div className="dw-knowledge__item-meta">
+                                        {item.filename && (
+                                            <span>{item.filename}</span>
+                                        )}
+                                        {item.created_at && (
+                                            <span>
+                                                {new Date(item.created_at).toLocaleDateString()}
+                                            </span>
+                                        )}
                                     </div>
-                                )}
-                            </CardBody>
-                        </Card>
+
+                                    {isArchived && item.proposal?.id && (
+                                        <div className="dw-knowledge__item-actions">
+                                            <Button
+                                                size="sm"
+                                                variant="warning"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleRestore(item.proposal.id, item.id);
+                                                }}
+                                            >
+                                                Restore to review
+                                            </Button>
+                                        </div>
+                                    )}
+                                </CardBody>
+                            </Card>
                         );
                     })}
                 </div>
             )}
         </div>
     );
-}
+}

frontend/src/pages/Workflows.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useWorkspace } from "../hooks/useWorkspace";
+import { usePolling } from "../hooks/usePolling";
 import { listWorkflows } from "../api/workflows";
 import { retryDocument } from "../api/documents";
 import { Button, Badge, LoadingState, EmptyState, DataTable } from "../components/ui";
@@ -12,6 +13,9 @@ const STATUS_TONE = {
     COMPLETED: "success", FAILED: "danger", CANCELLED: "info",
 };
 
+const ACTIVE_STATUSES = new Set(["PENDING", "RUNNING"]);
+const POLL_INTERVAL = 3000;
+
 function duration(started, completed) {
     if (!started || !completed) return "—";
     const ms = new Date(completed) - new Date(started);
@@ -39,6 +43,10 @@ export default function Workflows() {
 
     useEffect(() => { load(); }, [load]);
 
+    // Poll every 3 s while any workflow is PENDING or RUNNING.
+    const hasActive = workflows.some((w) => ACTIVE_STATUSES.has(w.status));
+    usePolling(load, POLL_INTERVAL, hasActive);
+
     if (wsLoading) return <LoadingState label="Loading..." />;
     if (!workspace) return <EmptyState title="No workspace" />;