feat(chat-ui): add timeline filters and proposal cards

(cherry picked from commit ecc2493)

Author: akgohain

client/src/__tests__/agentProposalCards.test.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import AgentProposalCard from "../components/chat/AgentProposalCard";
+
+jest.mock("antd", () => ({
+  Button: ({ children, ...props }) => (
+    <button type="button" {...props}>
+      {children}
+    </button>
+  ),
+  Space: ({ children }) => <div>{children}</div>,
+  Tag: ({ children }) => <span>{children}</span>,
+  Typography: {
+    Text: ({ children }) => <span>{children}</span>,
+  },
+}));
+
+describe("AgentProposalCard", () => {
+  it("renders hotspot proposal fields and approve/reject actions", () => {
+    const onApprove = jest.fn();
+    const onReject = jest.fn();
+    const proposal = {
+      type: "prioritize_failure_hotspots",
+      rationale: "Focus annotation where the model fails most often.",
+      target_dataset: "set-a",
+      hotspots: ["z:11", "z:12"],
+      priority_metric: "error_rate",
+      min_failure_rate: 0.2,
+    };
+
+    render(
+      <AgentProposalCard
+        proposal={proposal}
+        onApprove={onApprove}
+        onReject={onReject}
+      />,
+    );
+
+    expect(screen.getByText("Prioritize Failure Hotspots")).toBeTruthy();
+    expect(screen.getByText("set-a")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reject" }));
+
+    expect(onApprove).toHaveBeenCalledWith(proposal);
+    expect(onReject).toHaveBeenCalledWith(proposal);
+  });
+
+  it("supports correction-impact cards with compact rationale", () => {
+    const proposal = {
+      proposal_type: "preview_correction_impact",
+      rationale: "A".repeat(200),
+      target_metric: "f1",
+      expected_delta: "+0.05",
+      sample_size: 128,
+      confidence: "high",
+    };
+
+    render(<AgentProposalCard proposal={proposal} />);
+
+    expect(screen.getByText("Preview Correction Impact")).toBeTruthy();
+    expect(screen.getByText(/A{157}…/)).toBeTruthy();
+    expect(screen.getByText("+0.05")).toBeTruthy();
+  });
+
+  it("renders fallback proposal content", () => {
+    render(
+      <AgentProposalCard
+        proposal={{ type: "custom_type", rationale: "Keep behavior stable", foo: "bar" }}
+      />,
+    );
+
+    expect(screen.getByText("Agent Proposal")).toBeTruthy();
+    expect(screen.getByText("Keep behavior stable")).toBeTruthy();
+    expect(screen.getByText("bar")).toBeTruthy();
+  });
+});

client/src/__tests__/workflowTimelineFilters.test.js

@@ -0,0 +1,34 @@
+import {
+  DEFAULT_TIMELINE_FILTERS,
+  filterTimelineEvents,
+} from "../contexts/workflow/timelineFilters";
+
+const EVENTS = [
+  { id: "1", actor: "user", event_type: "dataset.loaded" },
+  { id: "2", actor: "agent", event_type: "agent.proposal_created" },
+  { id: "3", actor: "system", event_type: "inference.completed" },
+  { id: "4", actor: "agent", event_type: "agent.proposal_approved" },
+];
+
+describe("workflow timeline filters", () => {
+  it("preserves the full timeline by default", () => {
+    const visible = filterTimelineEvents(EVENTS, DEFAULT_TIMELINE_FILTERS);
+    expect(visible).toHaveLength(EVENTS.length);
+    expect(visible).toBe(EVENTS);
+  });
+
+  it("filters by actor and event type combinations", () => {
+    expect(filterTimelineEvents(EVENTS, { actor: "agent", eventType: "" })).toEqual([
+      EVENTS[1],
+      EVENTS[3],
+    ]);
+
+    expect(
+      filterTimelineEvents(EVENTS, { actor: "agent", eventType: "approved" }),
+    ).toEqual([EVENTS[3]]);
+
+    expect(
+      filterTimelineEvents(EVENTS, { actor: "all", eventType: "proposal" }),
+    ).toEqual([EVENTS[1], EVENTS[3]]);
+  });
+});

client/src/api.js

@@ -500,6 +500,42 @@ export async function listWorkflowEvents(workflowId) {
   }
 }
 
+export async function getWorkflowHotspots(workflowId) {
+  try {
+    const res = await apiClient.get(`/api/workflows/${workflowId}/hotspots`);
+    return res.data;
+  } catch (error) {
+    handleError(error);
+  }
+}
+
+export async function getWorkflowImpactPreview(workflowId) {
+  try {
+    const res = await apiClient.get(`/api/workflows/${workflowId}/impact-preview`);
+    return res.data;
+  } catch (error) {
+    handleError(error);
+  }
+}
+
+export async function getWorkflowMetrics(workflowId) {
+  try {
+    const res = await apiClient.get(`/api/workflows/${workflowId}/metrics`);
+    return res.data;
+  } catch (error) {
+    handleError(error);
+  }
+}
+
+export async function exportWorkflowBundle(workflowId) {
+  try {
+    const res = await apiClient.post(`/api/workflows/${workflowId}/export-bundle`);
+    return res.data;
+  } catch (error) {
+    handleError(error);
+  }
+}
+
 export async function appendWorkflowEvent(workflowId, event) {
   try {
     const res = await apiClient.post(`/api/workflows/${workflowId}/events`, event);

client/src/components/WorkflowTimeline.js

@@ -1,7 +1,13 @@
-import React from "react";
-import { Button, Empty, List, Space, Tag, Typography } from "antd";
-import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import React, { useMemo, useState } from "react";
+import { Button, Empty, Input, List, Select, Space, Tag, Typography } from "antd";
 import { useWorkflow } from "../contexts/WorkflowContext";
+import AgentProposalCard from "./chat/AgentProposalCard";
+import {
+  DEFAULT_TIMELINE_FILTERS,
+  filterTimelineEvents,
+  normalizeTimelineFilters,
+  TIMELINE_ACTOR_OPTIONS,
+} from "../contexts/workflow/timelineFilters";
 
 const { Text } = Typography;
 
@@ -14,6 +20,12 @@ const STAGE_LABELS = {
   evaluation: "Evaluation",
 };
 
+const SEVERITY_COLORS = {
+  low: "default",
+  medium: "orange",
+  high: "red",
+};
+
 function formatEventTime(value) {
   if (!value) return "";
   const date = new Date(value);
@@ -24,14 +36,22 @@ function formatEventTime(value) {
 function WorkflowTimeline({ limit = 8 }) {
   const workflowContext = useWorkflow();
   const workflow = workflowContext?.workflow;
-  const events = workflowContext?.events || [];
+  const events = workflowContext?.events;
+  const hotspots = workflowContext?.hotspots || [];
+  const impactPreview = workflowContext?.impactPreview;
+  const refreshInsights = workflowContext?.refreshInsights;
   const approveAgentAction = workflowContext?.approveAgentAction;
   const rejectAgentAction = workflowContext?.rejectAgentAction;
+  const [filters, setFilters] = useState(DEFAULT_TIMELINE_FILTERS);
 
-  if (!workflowContext) return null;
-
-  const visibleEvents = events.slice(-limit).reverse();
+  const reversedEvents = useMemo(() => [...(events || [])].reverse(), [events]);
+  const visibleEvents = useMemo(() => {
+    return filterTimelineEvents(reversedEvents, filters).slice(0, limit);
+  }, [reversedEvents, filters, limit]);
   const stageLabel = STAGE_LABELS[workflow?.stage] || workflow?.stage || "Loading";
+  const topHotspot = hotspots[0] || null;
+
+  if (!workflowContext) return null;
 
   return (
     <div
@@ -55,9 +75,87 @@ function WorkflowTimeline({ limit = 8 }) {
             {stageLabel}
           </Tag>
         </Space>
-        <Text type="secondary" style={{ fontSize: 12 }}>
-          {workflow?.title || "Segmentation Workflow"}
-        </Text>
+        <Space size="small">
+          <Text type="secondary" style={{ fontSize: 12 }}>
+            {workflow?.title || "Segmentation Workflow"}
+          </Text>
+          <Button
+            size="small"
+            type="text"
+            onClick={() => refreshInsights?.()}
+            style={{ paddingInline: 4 }}
+          >
+            Refresh Insights
+          </Button>
+        </Space>
+      </Space>
+
+      {(topHotspot || impactPreview) && (
+        <div
+          style={{
+            marginTop: 8,
+            padding: "6px 8px",
+            background: "#fff",
+            border: "1px solid #f0f0f0",
+            borderRadius: 6,
+          }}
+        >
+          {topHotspot && (
+            <Space size="small" wrap>
+              <Text style={{ fontSize: 12 }} strong>
+                Hotspot
+              </Text>
+              <Tag color={SEVERITY_COLORS[topHotspot.severity] || "default"}>
+                {topHotspot.severity}
+              </Tag>
+              <Text style={{ fontSize: 12 }}>{topHotspot.summary}</Text>
+            </Space>
+          )}
+          {impactPreview && (
+            <div style={{ marginTop: topHotspot ? 4 : 0 }}>
+              <Text style={{ fontSize: 12 }} strong>
+                Impact
+              </Text>
+              <Text style={{ fontSize: 12 }}>
+                {` ${impactPreview.summary} (confidence: ${impactPreview.confidence})`}
+              </Text>
+            </div>
+          )}
+        </div>
+      )}
+
+      <Space size="small" style={{ marginTop: 8, display: "flex" }} wrap>
+        <Select
+          aria-label="Actor filter"
+          size="small"
+          value={filters.actor}
+          style={{ minWidth: 124 }}
+          options={TIMELINE_ACTOR_OPTIONS.map((value) => ({
+            value,
+            label: value === "all" ? "All actors" : value,
+          }))}
+          onChange={(value) =>
+            setFilters((prev) => normalizeTimelineFilters({ ...prev, actor: value }))
+          }
+        />
+        <Input
+          aria-label="Event type filter"
+          size="small"
+          value={filters.eventType}
+          placeholder="Filter event type"
+          style={{ maxWidth: 180 }}
+          onChange={(event) =>
+            setFilters((prev) =>
+              normalizeTimelineFilters({ ...prev, eventType: event.target.value }),
+            )
+          }
+        />
+        <Button
+          size="small"
+          onClick={() => setFilters(DEFAULT_TIMELINE_FILTERS)}
+        >
+          Clear
+        </Button>
       </Space>
 
       {visibleEvents.length === 0 ? (
@@ -85,22 +183,9 @@ function WorkflowTimeline({ limit = 8 }) {
                 actions={
                   isPendingProposal
                     ? [
-                        <Button
-                          key="approve"
-                          size="small"
-                          icon={<CheckOutlined />}
-                          onClick={() => approveAgentAction?.(event.id)}
-                        >
-                          Approve
-                        </Button>,
-                        <Button
-                          key="reject"
-                          size="small"
-                          icon={<CloseOutlined />}
-                          onClick={() => rejectAgentAction?.(event.id)}
-                        >
-                          Reject
-                        </Button>,
+                        <Tag key="pending" color="gold">
+                          Needs review
+                        </Tag>,
                       ]
                     : []
                 }
@@ -117,17 +202,31 @@ function WorkflowTimeline({ limit = 8 }) {
                     </Space>
                   }
                   description={
-                    <Space size="small" wrap>
-                      <Text type="secondary" style={{ fontSize: 11 }}>
-                        {event.actor}
-                      </Text>
-                      <Text type="secondary" style={{ fontSize: 11 }}>
-                        {event.event_type}
-                      </Text>
-                      <Text type="secondary" style={{ fontSize: 11 }}>
-                        {formatEventTime(event.created_at)}
-                      </Text>
-                    </Space>
+                    <div>
+                      <Space size="small" wrap>
+                        <Text type="secondary" style={{ fontSize: 11 }}>
+                          {event.actor}
+                        </Text>
+                        <Text type="secondary" style={{ fontSize: 11 }}>
+                          {event.event_type}
+                        </Text>
+                        <Text type="secondary" style={{ fontSize: 11 }}>
+                          {formatEventTime(event.created_at)}
+                        </Text>
+                      </Space>
+                      {isPendingProposal && (
+                        <AgentProposalCard
+                          proposal={{
+                            ...(event.payload || {}),
+                            type: event.payload?.action || "agent_proposal",
+                            rationale: event.summary,
+                            ...(event.payload?.params || {}),
+                          }}
+                          onApprove={() => approveAgentAction?.(event.id)}
+                          onReject={() => rejectAgentAction?.(event.id)}
+                        />
+                      )}
+                    </div>
                   }
                 />
               </List.Item>