{isLoadingConvo ? (
diff --git a/client/src/components/RuntimeLogPanel.js b/client/src/components/RuntimeLogPanel.js
index 9a938a7e..1ce77453 100644
--- a/client/src/components/RuntimeLogPanel.js
+++ b/client/src/components/RuntimeLogPanel.js
@@ -117,7 +117,7 @@ function RuntimeLogPanel({ title, runtime, onRefresh }) {
background: "#fff",
border: "1px solid #f0f0f0",
fontFamily:
- 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace',
+ "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace",
fontSize: 12,
color: "#262626",
wordBreak: "break-word",
@@ -142,7 +142,7 @@ function RuntimeLogPanel({ title, runtime, onRefresh }) {
whiteSpace: "pre-wrap",
wordBreak: "break-word",
fontFamily:
- 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace',
+ "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace",
}}
>
{text || "No runtime logs captured yet."}
diff --git a/client/src/components/WorkflowTimeline.js b/client/src/components/WorkflowTimeline.js
new file mode 100644
index 00000000..f2569f9b
--- /dev/null
+++ b/client/src/components/WorkflowTimeline.js
@@ -0,0 +1,241 @@
+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;
+
+const STAGE_LABELS = {
+ setup: "Setup",
+ visualization: "Visualization",
+ inference: "Inference",
+ proofreading: "Proofreading",
+ retraining_staged: "Retraining staged",
+ evaluation: "Evaluation",
+};
+
+const SEVERITY_COLORS = {
+ low: "default",
+ medium: "orange",
+ high: "red",
+};
+
+function formatEventTime(value) {
+ if (!value) return "";
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "";
+ return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+function WorkflowTimeline({ limit = 8 }) {
+ const workflowContext = useWorkflow();
+ const workflow = workflowContext?.workflow;
+ 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);
+
+ 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 (
+
+
+
+
+ Workflow
+
+
+ {stageLabel}
+
+
+
+
+ {workflow?.title || "Segmentation Workflow"}
+
+ refreshInsights?.()}
+ style={{ paddingInline: 4 }}
+ >
+ Refresh Insights
+
+
+
+
+ {(topHotspot || impactPreview) && (
+
+ {topHotspot && (
+
+
+ Hotspot
+
+
+ {topHotspot.severity}
+
+ {topHotspot.summary}
+
+ )}
+ {impactPreview && (
+
+
+ Impact
+
+
+ {` ${impactPreview.summary} (confidence: ${impactPreview.confidence})`}
+
+
+ )}
+
+ )}
+
+
+ ({
+ value,
+ label: value === "all" ? "All actors" : value,
+ }))}
+ onChange={(value) =>
+ setFilters((prev) => normalizeTimelineFilters({ ...prev, actor: value }))
+ }
+ />
+ setFilters(DEFAULT_TIMELINE_FILTERS)}
+ >
+ Clear
+
+
+
+ {visibleEvents.length === 0 ? (
+
+ ) : (
+
{
+ const isPendingProposal =
+ event.event_type === "agent.proposal_created" &&
+ event.approval_status === "pending";
+ return (
+
+ Needs review
+ ,
+ ]
+ : []
+ }
+ >
+
+ {event.summary}
+ {event.approval_status !== "not_required" && (
+
+ {event.approval_status}
+
+ )}
+
+ }
+ description={
+
+
+
+ {event.actor}
+
+
+ {event.event_type}
+
+
+ {formatEventTime(event.created_at)}
+
+
+ {isPendingProposal && (
+
approveAgentAction?.(event.id)}
+ onReject={() => rejectAgentAction?.(event.id)}
+ />
+ )}
+
+ );
+ }}
+ />
+ )}
+
+ );
+}
+
+export default WorkflowTimeline;
diff --git a/client/src/components/WorkflowTimeline.test.js b/client/src/components/WorkflowTimeline.test.js
new file mode 100644
index 00000000..4792681f
--- /dev/null
+++ b/client/src/components/WorkflowTimeline.test.js
@@ -0,0 +1,228 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import WorkflowTimeline from "./WorkflowTimeline";
+import { WorkflowContext } from "../contexts/WorkflowContext";
+
+jest.mock("antd", () => {
+ const React = require("react");
+ const List = ({ dataSource = [], renderItem }) => (
+
+ {dataSource.map((item, index) => (
+
+ {renderItem(item, index)}
+
+ ))}
+
+ );
+ List.Item = ({ children, actions = [] }) => (
+
+ {children}
+ {actions.map((action, index) => (
+ {action}
+ ))}
+
+ );
+ List.Item.Meta = ({ title, description }) => (
+
+
{title}
+
{description}
+
+ );
+
+ const Empty = ({ description }) =>
{description}
;
+ Empty.PRESENTED_IMAGE_SIMPLE = "simple";
+
+ return {
+ Button: ({ children, icon, ...props }) => (
+
+ {icon}
+ {children}
+
+ ),
+ Input: ({ ...props }) =>
,
+ Empty,
+ List,
+ Select: ({ options = [], value, onChange, ...props }) => (
+
onChange?.(event.target.value)}
+ {...props}
+ >
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ ),
+ Space: ({ children }) =>
{children} ,
+ Tag: ({ children }) =>
{children} ,
+ Typography: {
+ Text: ({ children }) =>
{children} ,
+ },
+ };
+});
+
+jest.mock("@ant-design/icons", () => {
+ const Icon = () =>
;
+ return {
+ CheckOutlined: Icon,
+ CloseOutlined: Icon,
+ };
+});
+
+jest.mock("../contexts/WorkflowContext", () => {
+ const React = require("react");
+ const WorkflowContext = React.createContext(null);
+ return {
+ WorkflowContext,
+ useWorkflow: () => React.useContext(WorkflowContext),
+ };
+});
+
+const workflow = {
+ id: 1,
+ title: "Test Workflow",
+ stage: "proofreading",
+};
+
+function renderTimeline(overrides = {}) {
+ const value = {
+ workflow,
+ events: [],
+ hotspots: [],
+ impactPreview: null,
+ refreshInsights: jest.fn(),
+ approveAgentAction: jest.fn(),
+ rejectAgentAction: jest.fn(),
+ ...overrides,
+ };
+ render(
+
+ ,
+ );
+ return value;
+}
+
+describe("WorkflowTimeline", () => {
+ it("renders workflow stage and chronological evidence", () => {
+ renderTimeline({
+ events: [
+ {
+ id: 1,
+ actor: "user",
+ event_type: "dataset.loaded",
+ stage: "proofreading",
+ summary: "Loaded dataset.",
+ approval_status: "not_required",
+ created_at: "2026-04-12T12:00:00Z",
+ },
+ ],
+ });
+
+ expect(screen.getByText("Proofreading")).toBeTruthy();
+ expect(screen.getByText("Loaded dataset.")).toBeTruthy();
+ expect(screen.getByText("dataset.loaded")).toBeTruthy();
+ });
+
+ it("exposes approve and reject controls for pending agent proposals", () => {
+ const approveAgentAction = jest.fn();
+ const rejectAgentAction = jest.fn();
+ renderTimeline({
+ approveAgentAction,
+ rejectAgentAction,
+ events: [
+ {
+ id: 7,
+ actor: "agent",
+ event_type: "agent.proposal_created",
+ stage: "proofreading",
+ summary: "Stage corrected masks.",
+ approval_status: "pending",
+ created_at: "2026-04-12T12:00:00Z",
+ },
+ ],
+ });
+
+ fireEvent.click(screen.getByText("Approve"));
+ fireEvent.click(screen.getByText("Reject"));
+
+ expect(approveAgentAction).toHaveBeenCalledWith(7);
+ expect(rejectAgentAction).toHaveBeenCalledWith(7);
+ });
+
+ it("renders hotspot + impact summary and refresh action", () => {
+ const refreshInsights = jest.fn();
+ renderTimeline({
+ refreshInsights,
+ hotspots: [
+ {
+ rank: 1,
+ region_key: "z:12",
+ score: 9.5,
+ severity: "high",
+ summary: "z:12 has repeated failures.",
+ recommended_action: "Open proofreading.",
+ evidence: {},
+ },
+ ],
+ impactPreview: {
+ confidence: "high",
+ summary: "Corrections are ready to stage.",
+ },
+ });
+
+ expect(screen.getByText("z:12 has repeated failures.")).toBeTruthy();
+ expect(
+ screen.getByText(
+ /Corrections are ready to stage\. \(confidence: high\)/,
+ ),
+ ).toBeTruthy();
+
+ fireEvent.click(screen.getByText("Refresh Insights"));
+ expect(refreshInsights).toHaveBeenCalledTimes(1);
+ });
+
+ it("filters timeline entries by actor and event type", () => {
+ renderTimeline({
+ events: [
+ {
+ id: 1,
+ actor: "user",
+ event_type: "dataset.loaded",
+ stage: "proofreading",
+ summary: "Loaded dataset.",
+ approval_status: "not_required",
+ created_at: "2026-04-12T12:00:00Z",
+ },
+ {
+ id: 2,
+ actor: "agent",
+ event_type: "agent.proposal_created",
+ stage: "proofreading",
+ summary: "Stage corrected masks.",
+ approval_status: "pending",
+ payload: {
+ action: "stage_retraining_from_corrections",
+ params: { corrected_mask_path: "/tmp/corrected.tif" },
+ },
+ created_at: "2026-04-12T12:02:00Z",
+ },
+ ],
+ });
+
+ fireEvent.change(screen.getByLabelText("Actor filter"), {
+ target: { value: "agent" },
+ });
+ expect(screen.queryByText("Loaded dataset.")).toBeNull();
+ expect(screen.getAllByText("Stage corrected masks.").length).toBeGreaterThan(0);
+
+ fireEvent.change(screen.getByLabelText("Event type filter"), {
+ target: { value: "proposal" },
+ });
+ expect(screen.getAllByText("Stage corrected masks.").length).toBeGreaterThan(0);
+ expect(screen.getByText("Stage Retraining From Corrections")).toBeTruthy();
+ });
+});
diff --git a/client/src/components/YamlFileUploader.js b/client/src/components/YamlFileUploader.js
index e7a33c5a..8fec2dbd 100644
--- a/client/src/components/YamlFileUploader.js
+++ b/client/src/components/YamlFileUploader.js
@@ -490,7 +490,11 @@ const YamlFileUploader = (props) => {
{yamlContent ? (
{sliderData.map((param, index) => {
- const sliderValue = getSliderValue(currentYamlData, type, param.key);
+ const sliderValue = getSliderValue(
+ currentYamlData,
+ type,
+ param.key,
+ );
const sliderSupported = isSliderSupported(
currentYamlData,
type,
@@ -507,7 +511,11 @@ const YamlFileUploader = (props) => {
min={param.min}
max={param.max}
marks={param.marks}
- value={typeof sliderValue === "number" ? sliderValue : param.value}
+ value={
+ typeof sliderValue === "number"
+ ? sliderValue
+ : param.value
+ }
disabled={!sliderSupported}
onChange={(newValue) =>
handleSliderChange(param.key, newValue)
diff --git a/client/src/components/chat/AgentProposalCard.js b/client/src/components/chat/AgentProposalCard.js
new file mode 100644
index 00000000..d6f06ab2
--- /dev/null
+++ b/client/src/components/chat/AgentProposalCard.js
@@ -0,0 +1,60 @@
+import React from "react";
+import { Button, Space, Tag, Typography } from "antd";
+
+import { getProposalCardContent } from "../../contexts/workflow/proposalCardConfig";
+
+const { Text } = Typography;
+
+function AgentProposalCard({ proposal, onApprove, onReject, disabled = false }) {
+ const content = getProposalCardContent(proposal || {});
+
+ return (
+
+
+
+
+ {content.title}
+
+ {content.type}
+
+ {content.rationale}
+ {content.fields?.length > 0 && (
+
+ {content.fields.map((field) => (
+
+
+ {field.label}
+
+ {field.value}
+
+ ))}
+
+ )}
+
+ onApprove?.(proposal)}
+ disabled={disabled}
+ >
+ Approve
+
+ onReject?.(proposal)} disabled={disabled}>
+ Reject
+
+
+
+
+ );
+}
+
+export default AgentProposalCard;
diff --git a/client/src/configSchema.js b/client/src/configSchema.js
index 23e6ca86..f1473e0d 100644
--- a/client/src/configSchema.js
+++ b/client/src/configSchema.js
@@ -135,14 +135,26 @@ export function setTrainingOutputPath(configObj, outputPath) {
}
const checkpointsPath = joinPath(outputPath, "checkpoints");
if (hasPath(configObj, ["train", "monitor", "checkpoint", "dirpath"])) {
- setPathValue(configObj, ["train", "monitor", "checkpoint", "dirpath"], checkpointsPath);
+ setPathValue(
+ configObj,
+ ["train", "monitor", "checkpoint", "dirpath"],
+ checkpointsPath,
+ );
return;
}
if (hasPath(configObj, ["monitor", "checkpoint", "dirpath"])) {
- setPathValue(configObj, ["monitor", "checkpoint", "dirpath"], checkpointsPath);
+ setPathValue(
+ configObj,
+ ["monitor", "checkpoint", "dirpath"],
+ checkpointsPath,
+ );
return;
}
- setPathValue(configObj, ["monitor", "checkpoint", "dirpath"], checkpointsPath);
+ setPathValue(
+ configObj,
+ ["monitor", "checkpoint", "dirpath"],
+ checkpointsPath,
+ );
}
export function setInferenceOutputPath(configObj, outputPath) {
@@ -152,7 +164,11 @@ export function setInferenceOutputPath(configObj, outputPath) {
setPathValue(configObj, ["INFERENCE", "OUTPUT_PATH"], outputPath);
return;
}
- setPathValue(configObj, ["inference", "save_prediction", "output_path"], outputPath);
+ setPathValue(
+ configObj,
+ ["inference", "save_prediction", "output_path"],
+ outputPath,
+ );
}
export function setInferenceExecutionDefaults(configObj) {
@@ -212,16 +228,14 @@ export function applyInputPaths(
}
if (mode === "training") {
- const imagePath =
- pickFirstExistingPath(configObj, [
- ["train", "data", "train", "image"],
- ["data", "train", "image"],
- ]) || ["train", "data", "train", "image"];
- const labelPath =
- pickFirstExistingPath(configObj, [
- ["train", "data", "train", "label"],
- ["data", "train", "label"],
- ]) || ["train", "data", "train", "label"];
+ const imagePath = pickFirstExistingPath(configObj, [
+ ["train", "data", "train", "image"],
+ ["data", "train", "image"],
+ ]) || ["train", "data", "train", "image"];
+ const labelPath = pickFirstExistingPath(configObj, [
+ ["train", "data", "train", "label"],
+ ["data", "train", "label"],
+ ]) || ["train", "data", "train", "label"];
setPathValue(configObj, imagePath, inputImagePath);
setPathValue(configObj, labelPath, inputLabelPath);
if (outputPath) {
@@ -230,16 +244,14 @@ export function applyInputPaths(
return;
}
- const imagePath =
- pickFirstExistingPath(configObj, [
- ["test", "data", "test", "image"],
- ["data", "test", "image"],
- ]) || ["test", "data", "test", "image"];
- const labelPath =
- pickFirstExistingPath(configObj, [
- ["test", "data", "test", "label"],
- ["data", "test", "label"],
- ]) || ["test", "data", "test", "label"];
+ const imagePath = pickFirstExistingPath(configObj, [
+ ["test", "data", "test", "image"],
+ ["data", "test", "image"],
+ ]) || ["test", "data", "test", "image"];
+ const labelPath = pickFirstExistingPath(configObj, [
+ ["test", "data", "test", "label"],
+ ["data", "test", "label"],
+ ]) || ["test", "data", "test", "label"];
setPathValue(configObj, imagePath, inputImagePath);
if (hasLabelPath) {
setPathValue(configObj, labelPath, inputLabelPath);
diff --git a/client/src/contexts/ProjectManagerContext.js b/client/src/contexts/ProjectManagerContext.js
new file mode 100644
index 00000000..291ec723
--- /dev/null
+++ b/client/src/contexts/ProjectManagerContext.js
@@ -0,0 +1,287 @@
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useCallback,
+ useRef,
+} from "react";
+import { message, Spin } from "antd";
+import { getPMData, savePMData, resetPMData } from "../api";
+import { apiClient } from "../api";
+
+// ── Context ───────────────────────────────────────────────────────────────────
+
+const ProjectManagerContext = createContext(null);
+
+export function useProjectManager() {
+ const ctx = useContext(ProjectManagerContext);
+ if (!ctx)
+ throw new Error(
+ "useProjectManager must be used inside ",
+ );
+ return ctx;
+}
+
+// ── Provider ──────────────────────────────────────────────────────────────────
+
+const DEBOUNCE_MS = 800;
+
+/**
+ * ProjectManagerProvider
+ *
+ * Props:
+ * role "admin" | "worker" — current RBAC role
+ * activeWorker worker key string — e.g. "alex" (relevant when role=worker)
+ */
+export function ProjectManagerProvider({ children }) {
+ const [pmState, setPmState] = useState(null); // null = not yet loaded
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [user, setUser] = useState(null); // Authenticated user object
+ const debounceRef = useRef(null);
+
+ // ── Session Restoration ──────────────────────────────────────────────────
+ useEffect(() => {
+ const saved = localStorage.getItem("pm_user");
+ if (saved) {
+ try {
+ setUser(JSON.parse(saved));
+ } catch (e) {
+ localStorage.removeItem("pm_user");
+ }
+ }
+ }, []);
+
+ // ── Fetch on mount (always load PM config/seeds) ──────────────────────────
+ useEffect(() => {
+ let cancelled = false;
+ setLoading(true);
+ getPMData()
+ .then((data) => {
+ if (!cancelled) setPmState(data);
+ })
+ .catch((err) => {
+ if (!cancelled) {
+ console.error("[PM] Failed to load data:", err);
+ message.error("Failed to load Project Manager data from server.");
+ }
+ })
+ .finally(() => {
+ if (!cancelled) setLoading(false);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ // ── Auth Actions ──────────────────────────────────────────────────────────
+ const login = useCallback(async (username, password) => {
+ try {
+ const res = await apiClient.post("/api/pm/login", { username, password });
+ if (res.data.ok) {
+ const userData = res.data.user;
+ setUser(userData);
+ localStorage.setItem("pm_user", JSON.stringify(userData));
+ message.success(`Logged in as ${userData.name}`);
+ return true;
+ }
+ } catch (err) {
+ message.error(err.response?.data?.detail || "Login failed");
+ return false;
+ }
+ }, []);
+
+ const logout = useCallback(() => {
+ setUser(null);
+ localStorage.removeItem("pm_user");
+ message.info("Logged out.");
+ }, []);
+
+ // ── Debounced server save ─────────────────────────────────────────────────
+ const _scheduleSave = useCallback((nextState) => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ debounceRef.current = setTimeout(async () => {
+ setSaving(true);
+ try {
+ await savePMData(nextState);
+ message.success({
+ content: "Changes saved.",
+ key: "pm-save",
+ duration: 1.5,
+ });
+ } catch (err) {
+ console.error("[PM] Save failed:", err);
+ message.error({
+ content: "Failed to save changes to server.",
+ key: "pm-save",
+ });
+ } finally {
+ setSaving(false);
+ }
+ }, DEBOUNCE_MS);
+ }, []);
+
+ // ── Public state-mutators ─────────────────────────────────────────────────
+ const updateState = useCallback(
+ (patch) => {
+ setPmState((prev) => {
+ const next = { ...prev, ...patch };
+ _scheduleSave(next);
+ return next;
+ });
+ },
+ [_scheduleSave],
+ );
+
+ const resetData = useCallback(async () => {
+ setLoading(true);
+ try {
+ const seed = await resetPMData();
+ setPmState(seed);
+ message.success("Reset to default data.");
+ } catch (err) {
+ console.error("[PM] Reset failed:", err);
+ message.error("Failed to reset data on server.");
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ // ── Volume helpers ───────────────────────────────────────────────────────
+ const getVolumes = useCallback(async (params = {}) => {
+ try {
+ const res = await apiClient.get("/api/pm/volumes", { params });
+ return res.data;
+ } catch (err) {
+ message.error("Failed to load volumes from server.");
+ throw err;
+ }
+ }, []);
+
+ const updateVolumeStatus = useCallback(async (volumeId, status) => {
+ try {
+ const res = await apiClient.patch(`/api/pm/volumes/${volumeId}`, {
+ status,
+ });
+ if (res.data?.global_progress) {
+ setPmState((prev) =>
+ prev ? { ...prev, global_progress: res.data.global_progress } : prev,
+ );
+ }
+ return res.data;
+ } catch (err) {
+ message.error("Failed to update volume status.");
+ throw err;
+ }
+ }, []);
+
+ // ── Convenience setters ───────────────────────────────────────────────────
+ const setQuotaData = useCallback(
+ (v) => updateState({ quota_data: v }),
+ [updateState],
+ );
+ const setProofreaderData = useCallback(
+ (v) => updateState({ proofreader_data: v }),
+ [updateState],
+ );
+ const setThroughputData = useCallback(
+ (v) => updateState({ throughput_data: v }),
+ [updateState],
+ );
+ const setMsgPreview = useCallback(
+ (v) => updateState({ msg_preview: v }),
+ [updateState],
+ );
+
+ // ── Computed RBAC Values ──────────────────────────────────────────────────
+ const isAuthenticated = !!user;
+ const role = user?.role || "guest";
+ const isAdmin = role === "admin";
+ const isWorker = role === "worker";
+ const activeWorker = isWorker ? user?.key : null;
+
+ // ── Role-filtered convenience getters ─────────────────────────────────────
+ const allQuotaData = pmState?.quota_data ?? [];
+ const allProofreaderData = pmState?.proofreader_data ?? [];
+
+ const quotaData = isWorker
+ ? allQuotaData.filter((r) => r.worker_key === activeWorker)
+ : allQuotaData;
+ const proofreaderData = isWorker
+ ? allProofreaderData.filter((r) => r.worker_key === activeWorker)
+ : allProofreaderData;
+
+ // ── Loading gate ──────────────────────────────────────────────────────────
+ if (loading && pmState === null) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/client/src/contexts/WorkflowContext.js b/client/src/contexts/WorkflowContext.js
new file mode 100644
index 00000000..fc9f23d1
--- /dev/null
+++ b/client/src/contexts/WorkflowContext.js
@@ -0,0 +1,210 @@
+import React, {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from "react";
+import { message } from "antd";
+import {
+ appendWorkflowEvent,
+ approveAgentAction as approveAgentActionApi,
+ createAgentAction,
+ getCurrentWorkflow,
+ getWorkflowHotspots,
+ getWorkflowImpactPreview,
+ listWorkflowEvents,
+ queryWorkflowAgent,
+ rejectAgentAction as rejectAgentActionApi,
+ updateWorkflow as updateWorkflowApi,
+} from "../api";
+import { AppContext } from "./GlobalContext";
+
+export const WorkflowContext = createContext(null);
+
+export function useWorkflow() {
+ return useContext(WorkflowContext);
+}
+
+export function WorkflowProvider({ children }) {
+ const appContext = useContext(AppContext);
+ const [workflow, setWorkflow] = useState(null);
+ const [events, setEvents] = useState([]);
+ const [hotspots, setHotspots] = useState([]);
+ const [impactPreview, setImpactPreview] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [lastClientEffects, setLastClientEffects] = useState(null);
+
+ const refreshWorkflow = useCallback(async () => {
+ setLoading(true);
+ try {
+ const data = await getCurrentWorkflow();
+ setWorkflow(data?.workflow || null);
+ setEvents(data?.events || []);
+ return data;
+ } catch (error) {
+ message.error("Failed to load workflow state.");
+ return null;
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ const refreshEvents = useCallback(async () => {
+ if (!workflow?.id) return [];
+ const nextEvents = await listWorkflowEvents(workflow.id);
+ setEvents(nextEvents || []);
+ return nextEvents || [];
+ }, [workflow?.id]);
+
+ const refreshInsights = useCallback(async () => {
+ if (!workflow?.id) {
+ setHotspots([]);
+ setImpactPreview(null);
+ return null;
+ }
+ try {
+ const [hotspotData, impactData] = await Promise.all([
+ getWorkflowHotspots(workflow.id),
+ getWorkflowImpactPreview(workflow.id),
+ ]);
+ setHotspots(hotspotData?.hotspots || []);
+ setImpactPreview(impactData || null);
+ return {
+ hotspots: hotspotData?.hotspots || [],
+ impactPreview: impactData || null,
+ };
+ } catch (_error) {
+ return null;
+ }
+ }, [workflow?.id]);
+
+ useEffect(() => {
+ refreshWorkflow();
+ }, [refreshWorkflow]);
+
+ useEffect(() => {
+ if (!workflow?.id) {
+ setHotspots([]);
+ setImpactPreview(null);
+ return;
+ }
+ refreshInsights();
+ }, [
+ workflow?.id,
+ workflow?.stage,
+ workflow?.corrected_mask_path,
+ events.length,
+ refreshInsights,
+ ]);
+
+ const updateWorkflow = useCallback(
+ async (patch) => {
+ if (!workflow?.id) return null;
+ const nextWorkflow = await updateWorkflowApi(workflow.id, patch);
+ setWorkflow(nextWorkflow);
+ return nextWorkflow;
+ },
+ [workflow?.id],
+ );
+
+ const appendEvent = useCallback(
+ async (event) => {
+ if (!workflow?.id) return null;
+ const nextEvent = await appendWorkflowEvent(workflow.id, event);
+ setEvents((prev) => [...prev, nextEvent]);
+ return nextEvent;
+ },
+ [workflow?.id],
+ );
+
+ const proposeAgentAction = useCallback(
+ async (action) => {
+ if (!workflow?.id) return null;
+ const proposal = await createAgentAction(workflow.id, action);
+ await refreshEvents();
+ return proposal;
+ },
+ [workflow?.id, refreshEvents],
+ );
+
+ const applyClientEffects = useCallback(
+ (effects) => {
+ if (!effects) return;
+ if (effects.set_training_label_path && appContext?.trainingState) {
+ appContext.trainingState.setInputLabel(effects.set_training_label_path);
+ }
+ setLastClientEffects(effects);
+ },
+ [appContext],
+ );
+
+ const approveAgentAction = useCallback(
+ async (eventId) => {
+ if (!workflow?.id) return null;
+ const result = await approveAgentActionApi(workflow.id, eventId);
+ if (result?.workflow) {
+ setWorkflow(result.workflow);
+ }
+ applyClientEffects(result?.client_effects);
+ await refreshEvents();
+ message.success("Agent proposal approved.");
+ return result;
+ },
+ [workflow?.id, refreshEvents, applyClientEffects],
+ );
+
+ const rejectAgentAction = useCallback(
+ async (eventId) => {
+ if (!workflow?.id) return null;
+ const result = await rejectAgentActionApi(workflow.id, eventId);
+ await refreshEvents();
+ message.info("Agent proposal rejected.");
+ return result;
+ },
+ [workflow?.id, refreshEvents],
+ );
+
+ const queryAgent = useCallback(
+ async (query) => {
+ if (!workflow?.id) return null;
+ const result = await queryWorkflowAgent(workflow.id, query);
+ if (result?.proposals?.length) {
+ await refreshEvents();
+ }
+ return result;
+ },
+ [workflow?.id, refreshEvents],
+ );
+
+ const consumeClientEffects = useCallback(() => {
+ const effects = lastClientEffects;
+ setLastClientEffects(null);
+ return effects;
+ }, [lastClientEffects]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/client/src/contexts/WorkflowContext.test.js b/client/src/contexts/WorkflowContext.test.js
new file mode 100644
index 00000000..57549833
--- /dev/null
+++ b/client/src/contexts/WorkflowContext.test.js
@@ -0,0 +1,118 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { AppContext } from "./GlobalContext";
+import { WorkflowProvider, useWorkflow } from "./WorkflowContext";
+import {
+ approveAgentAction,
+ getCurrentWorkflow,
+ getWorkflowHotspots,
+ getWorkflowImpactPreview,
+ listWorkflowEvents,
+} from "../api";
+
+jest.mock("../api", () => ({
+ approveAgentAction: jest.fn(),
+ appendWorkflowEvent: jest.fn(),
+ createAgentAction: jest.fn(),
+ getCurrentWorkflow: jest.fn(),
+ getWorkflowHotspots: jest.fn(),
+ getWorkflowImpactPreview: jest.fn(),
+ listWorkflowEvents: jest.fn(),
+ queryWorkflowAgent: jest.fn(),
+ rejectAgentAction: jest.fn(),
+ updateWorkflow: jest.fn(),
+}));
+
+const baseWorkflow = {
+ id: 1,
+ title: "Segmentation Workflow",
+ stage: "setup",
+};
+
+function Probe() {
+ const workflowContext = useWorkflow();
+ return (
+
+
{workflowContext.workflow?.stage || "loading"}
+
{workflowContext.events.map((event) => event.event_type).join(",")}
+
{workflowContext.hotspots?.[0]?.summary || "no-hotspot"}
+
{workflowContext.impactPreview?.confidence || "no-impact"}
+
workflowContext.approveAgentAction(7)}
+ >
+ Approve proposal
+
+
+
+
+ ,
+ );
+}
+
+describe("WorkflowProvider", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ getCurrentWorkflow.mockResolvedValue({
+ workflow: baseWorkflow,
+ events: [{ id: 1, event_type: "workflow.created" }],
+ });
+ listWorkflowEvents.mockResolvedValue([]);
+ getWorkflowHotspots.mockResolvedValue({
+ workflow_id: 1,
+ hotspots: [{ region_key: "z:9", summary: "Top hotspot", severity: "high" }],
+ });
+ getWorkflowImpactPreview.mockResolvedValue({
+ workflow_id: 1,
+ confidence: "medium",
+ summary: "Impact summary",
+ });
+ });
+
+ it("loads the current workflow and events on startup", async () => {
+ renderProvider({ trainingState: { setInputLabel: jest.fn() } });
+
+ expect(await screen.findByText("setup")).toBeTruthy();
+ expect(screen.getByText("workflow.created")).toBeTruthy();
+ await waitFor(() => {
+ expect(getWorkflowHotspots).toHaveBeenCalledWith(1);
+ expect(getWorkflowImpactPreview).toHaveBeenCalledWith(1);
+ });
+ await waitFor(() => {
+ expect(screen.getByText("Top hotspot")).toBeTruthy();
+ expect(screen.getByText("medium")).toBeTruthy();
+ });
+ expect(getCurrentWorkflow).toHaveBeenCalledTimes(1);
+ });
+
+ it("applies client effects when an agent proposal is approved", async () => {
+ const setInputLabel = jest.fn();
+ approveAgentAction.mockResolvedValue({
+ workflow: { ...baseWorkflow, stage: "retraining_staged" },
+ client_effects: {
+ navigate_to: "training",
+ set_training_label_path: "/tmp/corrected.tif",
+ },
+ });
+
+ renderProvider({ trainingState: { setInputLabel } });
+ await screen.findByText("setup");
+
+ fireEvent.click(screen.getByText("Approve proposal"));
+
+ await waitFor(() => {
+ expect(setInputLabel).toHaveBeenCalledWith("/tmp/corrected.tif");
+ });
+ await waitFor(() => {
+ expect(screen.getByText("retraining_staged")).toBeTruthy();
+ });
+ });
+});
diff --git a/client/src/contexts/workflow/proposalCardConfig.js b/client/src/contexts/workflow/proposalCardConfig.js
new file mode 100644
index 00000000..febf263a
--- /dev/null
+++ b/client/src/contexts/workflow/proposalCardConfig.js
@@ -0,0 +1,92 @@
+const toDisplayValue = (value) => {
+ if (value === null || value === undefined || value === "") {
+ return "—";
+ }
+ if (Array.isArray(value)) {
+ return value.length ? value.join(", ") : "—";
+ }
+ if (typeof value === "object") {
+ return JSON.stringify(value);
+ }
+ return String(value);
+};
+
+const compactRationale = (rationale) => {
+ if (!rationale) return "No rationale provided.";
+ const trimmed = String(rationale).trim();
+ return trimmed.length > 160 ? `${trimmed.slice(0, 157)}…` : trimmed;
+};
+
+const pickEntries = (proposal, keys) =>
+ keys
+ .filter((key) => key in proposal)
+ .map((key) => ({
+ key,
+ label: key.replace(/_/g, " "),
+ value: toDisplayValue(proposal[key]),
+ }));
+
+export const getProposalCardContent = (proposal = {}) => {
+ const type = proposal.type || proposal.proposal_type || proposal.action || "proposal";
+
+ if (type === "prioritize_failure_hotspots") {
+ return {
+ type,
+ title: "Prioritize Failure Hotspots",
+ rationale: compactRationale(proposal.rationale || proposal.why),
+ fields: pickEntries(proposal, [
+ "target_dataset",
+ "hotspots",
+ "priority_metric",
+ "min_failure_rate",
+ ]),
+ };
+ }
+
+ if (type === "preview_correction_impact") {
+ return {
+ type,
+ title: "Preview Correction Impact",
+ rationale: compactRationale(proposal.rationale || proposal.why),
+ fields: pickEntries(proposal, [
+ "target_metric",
+ "expected_delta",
+ "sample_size",
+ "confidence",
+ ]),
+ };
+ }
+
+ if (type === "stage_retraining_from_corrections") {
+ return {
+ type,
+ title: "Stage Retraining From Corrections",
+ rationale: compactRationale(
+ proposal.rationale ||
+ proposal.why ||
+ "Stage corrected masks for the next model iteration.",
+ ),
+ fields: pickEntries(proposal, [
+ "corrected_mask_path",
+ "written_path",
+ "training_output_path",
+ ]),
+ };
+ }
+
+ const fallbackFields = Object.entries(proposal)
+ .filter(([key]) => !["type", "proposal_type", "rationale", "why"].includes(key))
+ .slice(0, 4)
+ .map(([key, value]) => ({
+ key,
+ label: key.replace(/_/g, " "),
+ value: toDisplayValue(value),
+ }));
+
+ return {
+ type,
+ title: "Agent Proposal",
+ rationale: compactRationale(proposal.rationale || proposal.why),
+ fields: fallbackFields,
+ };
+};
diff --git a/client/src/contexts/workflow/timelineFilters.js b/client/src/contexts/workflow/timelineFilters.js
new file mode 100644
index 00000000..5bfeee1a
--- /dev/null
+++ b/client/src/contexts/workflow/timelineFilters.js
@@ -0,0 +1,42 @@
+export const TIMELINE_ACTOR_OPTIONS = ["all", "user", "agent", "system"];
+
+export const DEFAULT_TIMELINE_FILTERS = {
+ actor: "all",
+ eventType: "",
+};
+
+export function normalizeTimelineFilters(filters = {}) {
+ const actor = TIMELINE_ACTOR_OPTIONS.includes(filters.actor)
+ ? filters.actor
+ : DEFAULT_TIMELINE_FILTERS.actor;
+ const eventType = (filters.eventType || "").trim();
+ return { actor, eventType };
+}
+
+export function eventMatchesTimelineFilters(
+ event,
+ filters = DEFAULT_TIMELINE_FILTERS,
+) {
+ const normalized = normalizeTimelineFilters(filters);
+ const actor = (event?.actor || "").toLowerCase();
+ const eventType = (event?.event_type || event?.eventType || "").toLowerCase();
+
+ if (normalized.actor !== "all" && actor !== normalized.actor) {
+ return false;
+ }
+ if (!normalized.eventType) {
+ return true;
+ }
+ return eventType.includes(normalized.eventType.toLowerCase());
+}
+
+export function filterTimelineEvents(events = [], filters = DEFAULT_TIMELINE_FILTERS) {
+ if (!Array.isArray(events) || events.length === 0) {
+ return [];
+ }
+ const normalized = normalizeTimelineFilters(filters);
+ if (normalized.actor === "all" && !normalized.eventType) {
+ return events;
+ }
+ return events.filter((event) => eventMatchesTimelineFilters(event, normalized));
+}
diff --git a/client/src/views/EHTool.js b/client/src/views/EHTool.js
index 5d546fd7..3cb38e32 100644
--- a/client/src/views/EHTool.js
+++ b/client/src/views/EHTool.js
@@ -13,6 +13,7 @@ function EHTool({
onSessionChange,
refreshTrigger,
savedSessionId,
+ workflowId,
}) {
// Initialize with saved session if available
const [sessionId, setSessionId] = useState(savedSessionId || null);
@@ -37,6 +38,7 @@ function EHTool({
setIsChatOpen(false)} />
-
+
);
}
diff --git a/client/src/views/Views.test.js b/client/src/views/Views.test.js
index 1f08242b..979bbde3 100644
--- a/client/src/views/Views.test.js
+++ b/client/src/views/Views.test.js
@@ -3,6 +3,10 @@ import { fireEvent, render, screen } from "@testing-library/react";
import Views from "./Views";
+jest.mock("../contexts/WorkflowContext", () => ({
+ useWorkflow: () => null,
+}));
+
jest.mock("antd", () => {
const React = require("react");
@@ -41,6 +45,7 @@ jest.mock("@ant-design/icons", () => {
DashboardOutlined: Icon,
BugOutlined: Icon,
MessageOutlined: Icon,
+ ProjectOutlined: Icon,
};
});
@@ -49,7 +54,12 @@ jest.mock("./Visualization", () => () => Visualization Content
);
jest.mock("./ModelTraining", () => () => Training Content
);
jest.mock("./ModelInference", () => () => Inference Content
);
jest.mock("./Monitoring", () => () => Monitoring Content
);
-jest.mock("./MaskProofreading", () => () => Mask Proofreading Content
);
+jest.mock("./mask-proofreading/MaskProofreading", () => () => (
+ Mask Proofreading Content
+));
+jest.mock("./project-manager/ProjectManager", () => () => (
+ Project Manager Content
+));
jest.mock("../components/Chatbot", () => () => Chatbot
);
describe("Views", () => {
diff --git a/client/src/views/Visualization.js b/client/src/views/Visualization.js
index ab2c58e7..4c2de865 100644
--- a/client/src/views/Visualization.js
+++ b/client/src/views/Visualization.js
@@ -7,11 +7,13 @@ import {
} from "@ant-design/icons";
import { getNeuroglancerViewer } from "../api";
import UnifiedFileInput from "../components/UnifiedFileInput";
+import { useWorkflow } from "../contexts/WorkflowContext";
const { Title } = Typography;
function Visualization(props) {
const { viewers, setViewers } = props;
+ const workflowContext = useWorkflow();
const [activeKey, setActiveKey] = useState(
viewers.length > 0 ? viewers[0].key : null,
);
@@ -77,6 +79,7 @@ function Visualization(props) {
imagePath,
labelPath,
scalesArray,
+ workflowContext?.workflow?.id,
);
console.log("Current Viewer at ", res);
diff --git a/client/src/views/ehtool/DetectionWorkflow.js b/client/src/views/ehtool/DetectionWorkflow.js
index 2207f60c..48ee921c 100644
--- a/client/src/views/ehtool/DetectionWorkflow.js
+++ b/client/src/views/ehtool/DetectionWorkflow.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
+import React, { useContext, useState, useEffect, useMemo, useRef } from "react";
import {
Layout,
message,
@@ -20,6 +20,8 @@ import InstanceNavigator from "./InstanceNavigator";
import ProofreadingEditor from "./ProofreadingEditor";
import SliceScheduler from "./SliceScheduler";
import { apiClient } from "../../api";
+import { AppContext } from "../../contexts/GlobalContext";
+import { useWorkflow } from "../../contexts/WorkflowContext";
const { Sider, Content } = Layout;
const { Title, Text } = Typography;
@@ -55,7 +57,14 @@ const SCRUB_IDLE_MS = parsePositiveInt(
120,
);
-function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
+function DetectionWorkflow({
+ sessionId,
+ setSessionId,
+ refreshTrigger,
+ workflowId,
+}) {
+ const appContext = useContext(AppContext);
+ const workflowContext = useWorkflow();
const [projectName, setProjectName] = useState("");
const [totalLayers, setTotalLayers] = useState(0);
const [instances, setInstances] = useState([]);
@@ -108,6 +117,7 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
const [persistence, setPersistence] = useState(null);
const [showExportModal, setShowExportModal] = useState(false);
const [exportPath, setExportPath] = useState("");
+ const [lastExportPath, setLastExportPath] = useState("");
const [exportingMasks, setExportingMasks] = useState(false);
const [overwritingSource, setOverwritingSource] = useState(false);
const lastPersistenceErrorRef = useRef(null);
@@ -448,6 +458,7 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
dataset_path: datasetPath,
mask_path: maskPath || null,
project_name: projectName,
+ workflow_id: workflowId || null,
});
setSessionId(response.data.session_id);
@@ -1767,6 +1778,7 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
create_backup: true,
});
setShowExportModal(false);
+ setLastExportPath(response.data.written_path);
message.success(`Exported masks to ${response.data.written_path}`);
if (response.data.backup_path) {
message.info(`Backup created at ${response.data.backup_path}`);
@@ -1805,6 +1817,7 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
if (response.data.backup_path) {
message.info(`Backup created at ${response.data.backup_path}`);
}
+ setLastExportPath(response.data.written_path);
refreshPersistenceStatus();
} catch (error) {
Modal.error({
@@ -1822,6 +1835,44 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
});
};
+ const handleStageForRetraining = async () => {
+ const correctedMaskPath = lastExportPath || persistence?.last_export_path;
+ if (!correctedMaskPath) {
+ message.warning("Export corrected masks before staging retraining.");
+ return;
+ }
+ if (!workflowContext?.workflow?.id) {
+ message.warning("Workflow state is not available yet.");
+ return;
+ }
+
+ try {
+ await workflowContext.updateWorkflow({
+ stage: "retraining_staged",
+ corrected_mask_path: correctedMaskPath,
+ });
+ await workflowContext.appendEvent({
+ actor: "user",
+ event_type: "retraining.staged",
+ stage: "retraining_staged",
+ summary: "Staged corrected masks for retraining.",
+ payload: {
+ corrected_mask_path: correctedMaskPath,
+ ehtool_session_id: sessionId,
+ source: "proofreading_export",
+ },
+ });
+ if (appContext?.trainingState?.setInputLabel) {
+ appContext.trainingState.setInputLabel(correctedMaskPath);
+ }
+ message.success("Corrected masks staged for retraining.");
+ } catch (error) {
+ message.error(
+ getErrorMessage(error, "Failed to stage corrected masks for retraining"),
+ );
+ }
+ };
+
if (!sessionId) {
return (
@@ -1834,6 +1885,7 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
sliderZ ?? viewState.zIndex,
axisTotal || totalLayers,
);
+ const exportedMaskPath = lastExportPath || persistence?.last_export_path || "";
const reviewControls =
activeInstance && instanceMode !== "none" ? (
@@ -1929,6 +1981,15 @@ function DetectionWorkflow({ sessionId, setSessionId, refreshTrigger }) {
Next unreviewed
+ {exportedMaskPath && (
+
+ Stage for retraining
+
+ )}
{
// This prop is now nominally used to trigger internal modal
diff --git a/client/src/views/mask-proofreading/MaskProofreading.test.js b/client/src/views/mask-proofreading/MaskProofreading.test.js
new file mode 100644
index 00000000..4fb7fa95
--- /dev/null
+++ b/client/src/views/mask-proofreading/MaskProofreading.test.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import MaskProofreading from "./MaskProofreading";
+
+jest.mock("../EHTool", () => (props) => (
+
+));
+
+jest.mock("../../contexts/WorkflowContext", () => ({
+ useWorkflow: () => ({ workflow: { id: 42 } }),
+}));
+
+describe("MaskProofreading", () => {
+ it("renders EHTool and passes the active workflow id", () => {
+ render(
+
+
+ {m.format("MMM")}
+
+
+ );
+ })}
+ {milestones.map((ms) => {
+ const x = PAD + dateToFrac(ms.date) * trackW;
+ return (
+
+
+
+ {ms.label}
+
+
+
+ );
+ })}
+
+ Today
+
+
+ );
+}
+
+/** Cumulative progress SVG line chart */
+function CumulativeChart({ cumulativeData, cumulativeTarget }) {
+ const W = 800;
+ const H = 180;
+ const PADL = 52;
+ const PADR = 16;
+ const PADT = 16;
+ const PADB = 32;
+ const chartW = W - PADL - PADR;
+ const chartH = H - PADT - PADB;
+ const maxVal = Math.max(...cumulativeData, ...cumulativeTarget) * 1.05;
+ const weeks = cumulativeData.length;
+ const toX = (i) => PADL + (i / (weeks - 1)) * chartW;
+ const toY = (v) => PADT + chartH - (v / maxVal) * chartH;
+ const pathD = (data) =>
+ data
+ .map(
+ (v, i) =>
+ `${i === 0 ? "M" : "L"} ${toX(i).toFixed(1)},${toY(v).toFixed(1)}`,
+ )
+ .join(" ");
+ const areaD = (data) =>
+ `${pathD(data)} L ${toX(weeks - 1).toFixed(1)},${(PADT + chartH).toFixed(1)} L ${PADL},${(PADT + chartH).toFixed(1)} Z`;
+ const yTicks = [0, 10000, 20000, 30000];
+ const xTicks = [0, 4, 8, 12, 16, 20, 24];
+ return (
+
+ {yTicks.map((v) => (
+
+
+ {v === 0 ? "0" : `${v / 1000}k`}
+
+
+ ))}
+ {xTicks.map((i) => (
+
+ Wk {i + 1}
+
+ ))}
+
+
+ Actual
+
+
+ Target
+
+
+
+ );
+}
+
+// ─── Column definitions ───────────────────────────────────────────────────────
+
+const DATASET_COLUMNS = [
+ {
+ title: "Dataset Name",
+ dataIndex: "name",
+ key: "name",
+ render: (name) => {name} ,
+ },
+ {
+ title: "Experiment",
+ dataIndex: "experiment",
+ key: "experiment",
+ render: (t) => {t} ,
+ },
+ {
+ title: "Total Samples",
+ dataIndex: "total",
+ key: "total",
+ align: "right",
+ render: (n) => n.toLocaleString(),
+ },
+ {
+ title: "% Proofread",
+ dataIndex: "proofread",
+ key: "proofread",
+ width: 180,
+ render: (pct) => (
+
+ = 80 ? "#52c41a" : pct >= 40 ? "#faad14" : "#ff4d4f"
+ }
+ showInfo={false}
+ />
+ {pct}%
+
+ ),
+ },
+ { title: "Status", dataIndex: "status", key: "status", render: statusTag },
+ {
+ title: "ETA",
+ dataIndex: "eta",
+ key: "eta",
+ render: (eta) => {eta} ,
+ },
+];
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+function AnnotationDashboard() {
+ const {
+ quotaData,
+ allQuotaData,
+ proofreaderData,
+ datasets,
+ milestones,
+ cumulativeData,
+ cumulativeTarget,
+ atRisk,
+ upcomingMilestones,
+ globalProgress,
+ isAdmin,
+ isWorker,
+ activeWorker,
+ } = useProjectManager();
+
+ const [filter, setFilter] = useState("all");
+
+ // ── KPI calculations ──────────────────────────────────────────────────────
+ // Weekly quota progress (uses role-filtered quotaData)
+ const totalActual = useMemo(
+ () =>
+ quotaData.reduce(
+ (sum, row) =>
+ sum +
+ row.actualMon +
+ row.actualTue +
+ row.actualWed +
+ row.actualThu +
+ row.actualFri +
+ row.actualSat +
+ row.actualSun,
+ 0,
+ ),
+ [quotaData],
+ );
+ const totalTarget = useMemo(
+ () =>
+ quotaData.reduce(
+ (sum, row) =>
+ sum +
+ row.mon +
+ row.tue +
+ row.wed +
+ row.thu +
+ row.fri +
+ row.sat +
+ row.sun,
+ 0,
+ ),
+ [quotaData],
+ );
+
+ const totalSamplesCount = useMemo(
+ () => datasets.reduce((s, d) => s + d.total, 0),
+ [datasets],
+ );
+ const overallPct =
+ totalTarget > 0 ? Math.round((totalActual / totalTarget) * 100) : 0;
+ const activeDatasetsCount = datasets.filter(
+ (d) => d.status === "in_progress",
+ ).length;
+ const activeProofreadersCount = proofreaderData.filter(
+ (p) => p.status === "online" || p.status === "away",
+ ).length;
+
+ // Volume progress — admin = global 1000, worker = their 250
+ const volProgress = isWorker
+ ? (globalProgress?.by_worker?.[activeWorker] ?? {
+ done: 0,
+ total: 250,
+ pct: 0,
+ })
+ : (globalProgress ?? { done: 0, total: 1000, pct: 0 });
+
+ // Filtered datasets
+ const filteredDatasets = useMemo(() => {
+ if (filter === "all") return datasets;
+ if (filter === "high") return datasets.filter((d) => d.priority === "high");
+ if (filter === "blocked")
+ return datasets.filter((d) => d.status === "blocked");
+ return datasets;
+ }, [filter, datasets]);
+
+ const filterBtns = [
+ { key: "all", label: "All" },
+ { key: "high", label: "High Priority" },
+ { key: "blocked", label: "Blocked" },
+ ];
+
+ return (
+
+ {/* ── Header ── */}
+
+
+ {isWorker ? "My Dashboard" : "Neural Dataset Proofreading – 6 Months"}
+
+
+ {PROJECT_START.format("MMM D, YYYY")} →{" "}
+ {PROJECT_END.format("MMM D, YYYY")} · Real-time Context Sync
+
+
+
+ {/* ── KPI Cards ── */}
+
+ {/* ① Volume Progress — derived from actual done status of 1000 volumes */}
+
+
+ {isWorker ? "My Volumes Done" : "Global Volume Progress"}
+
+ }
+ value={volProgress.done}
+ suffix={`/ ${volProgress.total}`}
+ prefix={
+
+
+ {volProgress.pct ?? 0}% of{" "}
+ {isWorker ? "250 assigned" : "1,000 total"} volumes done
+
+
+
+
+ {/* ② Weekly Points */}
+
+
+ Weekly Points
+
+ }
+ value={totalActual.toLocaleString()}
+ suffix={`/ ${totalTarget.toLocaleString()}`}
+ prefix={
+
+
+ {/* ③ Active Datasets (admin only, for worker show accuracy) */}
+
+
+ Active Datasets
+
+ }
+ value={activeDatasetsCount}
+ suffix={`/ ${datasets.length}`}
+ prefix={
+ {totalSamplesCount.toLocaleString()} total samples
+
+
+
+
+ {/* ④ Team status */}
+
+
+ {isWorker ? "My Weekly Points" : "Proofreaders Online"}
+
+ }
+ value={isWorker ? totalActual : activeProofreadersCount}
+ suffix={isWorker ? undefined : `/ ${allQuotaData.length}`}
+ prefix={
+ isWorker ? (
+
+ {isWorker ? "Points this week" : "Team-wide active status"}
+
+
+
+
+
+ {/* ── Timeline ── */}
+
6-Month Project Timeline}
+ style={{ marginBottom: 20, borderRadius: 8 }}
+ bodyStyle={{ paddingTop: 8 }}
+ >
+
+
+ {/* ── Main content: Table + Right Sidebar ── */}
+
+ {/* Datasets Table */}
+ Datasets}
+ extra={
+
+ {filterBtns.map((b) => (
+ setFilter(b.key)}
+ >
+ {b.label}
+
+ ))}
+
+ }
+ style={{ marginBottom: 20, borderRadius: 8 }}
+ >
+
+
+
+
+ {/* Right Sidebar */}
+
+ Weekly Progress
+
+ }
+ style={{ marginBottom: 12, borderRadius: 8 }}
+ >
+
+ Total items annotated vs. target
+
+
+
+ Completed
+
+ {totalActual.toLocaleString()}
+
+
+
+
+
+ Target: {totalTarget.toLocaleString()}
+
+
+ {overallPct}%
+
+
+
+
+ {/* At Risk */}
+
+ At Risk
+
+ }
+ style={{ marginBottom: 12, borderRadius: 8 }}
+ >
+ {atRisk.map((item, idx) => (
+
+ {idx > 0 &&
}
+
+ {item.icon === "clock" ? (
+
+ ) : item.icon === "blocked" ? (
+
+ ) : (
+
+ )}
+
+
+ {item.label}
+
+
+ {item.reason}
+
+
+
+
+
+ {/* Upcoming Milestones */}
+
+ Upcoming Milestones
+
+ }
+ style={{ borderRadius: 8 }}
+ >
+ {upcomingMilestones.map((ms, idx) => (
+
+ {idx > 0 &&
}
+
+ {ms.label}
+
+ {ms.date}
+
+
+
+
+
+
+ {/* ── Cumulative Progress Chart ── */}
+
Cumulative Items Proofread over 6 Months}
+ style={{ marginBottom: 8, borderRadius: 8 }}
+ bodyStyle={{ paddingTop: 8 }}
+ >
+
+
+ {/* Grid lines */}
+ {[80, 85, 90, 95, 100].map((v) => (
+
+
+ {v}%
+
+
+ ))}
+
+ {/* The Line */}
+
+ v{i + 1}
+
+ ),
+ )}
+
+ );
+}
+
+// ─── Column definitions ───────────────────────────────────────────────────────
+
+const BATCH_COLUMNS = [
+ {
+ title: "Batch",
+ dataIndex: "batch",
+ key: "batch",
+ render: (text) => {text} ,
+ },
+ {
+ title: "Dataset",
+ dataIndex: "dataset",
+ key: "dataset",
+ render: (text) => {text} ,
+ },
+ {
+ title: "IAA Score",
+ dataIndex: "agreement",
+ key: "agreement",
+ render: (val) => (
+
+ 85 ? "#52c41a" : "#faad14"}
+ />
+ {val}%
+
+ ),
+ },
+ {
+ title: "Flagged",
+ dataIndex: "flagged",
+ key: "flagged",
+ render: (val) => 20 ? "red" : "blue"}>{val} items ,
+ },
+ {
+ title: "Revision Rate",
+ dataIndex: "revisionNeeded",
+ key: "revisionNeeded",
+ render: (val) => (
+ 10 ? "danger" : "secondary"}>{val}%
+ ),
+ },
+ {
+ title: "Status",
+ dataIndex: "status",
+ key: "status",
+ render: (status) => (
+
+ {status.toUpperCase().replace("_", " ")}
+
+ ),
+ },
+];
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+function ModelQualityDashboard() {
+ const [modelVersion, setModelVersion] = useState("v3.2");
+
+ return (
+
+ {/* ── Header ── */}
+
+
+ Model Performance & Data Quality
+
+
+ Monitor model accuracy and annotation consistency
+
+
+
+ Model Version:
+
+ v3.2 (Latest)
+ v3.1
+ v2.8
+
+
+
+
+
+ {/* ── Main Metrics Gauges ── */}
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+ {/* Quality Trend */}
+
+ Model Performance Trend (Last 12 Iterations)
+
+ }
+ extra={
+
+ View Detailed Logs
+
+ }
+ style={{ marginBottom: 20 }}
+ >
+
+
+
+ {/* Confusion Matrix */}
+ Confusion Matrix (v3.2)}
+ style={{ marginBottom: 20 }}
+ >
+
+
+
+
+ Pred Syn
+
+
+ Pred Non
+
+
+
+ Act Syn
+
+
+
+
+
+ Act Non
+
+
+
+
+
+
+ *Based on evaluation dataset: 4,817 samples
+
+
+
+
+
+
+ {/* Batch Data Quality Table */}
+
+ Data Quality Log (Per Batch)
+
+ }
+ >
+
+
+
+
+ {/* ── Brand header ── */}
+
+
+ Project Manager
+
+
+ v2.0 · seg.bio
+
+
+
+ {/* ── User Profile & Role Tag ── */}
+
+
+
+
+ {user?.name}
+
+
+
+ {isAdmin ? "ADMIN" : "WORKER"}
+
+
+ Sign Out
+
+
+
+
+
setSelectedKey(e.key)}
+ items={menuItems}
+ style={{ borderRight: 0, flex: 1 }}
+ />
+
+
+
+ {renderSubView()}
+
+
+ );
+};
+
+const ProjectManager = () => (
+
+
+
+
+);
+
+export default ProjectManager;
diff --git a/client/src/views/project-manager/ProjectManagerLogin.js b/client/src/views/project-manager/ProjectManagerLogin.js
new file mode 100644
index 00000000..aa9229da
--- /dev/null
+++ b/client/src/views/project-manager/ProjectManagerLogin.js
@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { Card, Form, Input, Button, Typography, Space, Divider } from "antd";
+import { UserOutlined, LockOutlined, RocketOutlined } from "@ant-design/icons";
+import { useProjectManager } from "../../contexts/ProjectManagerContext";
+
+const { Title, Text } = Typography;
+
+export default function ProjectManagerLogin() {
+ const { login } = useProjectManager();
+ const [loading, setLoading] = useState(false);
+
+ const onFinish = async (values) => {
+ setLoading(true);
+ const success = await login(values.username, values.password);
+ setLoading(false);
+ };
+
+ return (
+
+
+
+
+
+
+ Project Manager
+
+
Sign in to manage EM connectomics tasks
+
+
+ Credentials Template
+
+
+
+
+
+
+ Admin: admin / admin123
+
+
+ Worker: alex / alex123
+
+
+
+
+
+ {children}
+
+);
+
+// ─── Sub-components ──────────────────────────────────────────────────────────
+
+function WeeklyThroughputChart({ throughput }) {
+ const W = 800;
+ const H = 150;
+ const PAD = 40;
+ const chartW = W - PAD * 2;
+ const chartH = H - PAD;
+
+ if (!throughput || throughput.length === 0) return null;
+ const maxVal = Math.max(...throughput.map((d) => d.count)) * 1.1;
+ const barWidth = (chartW / throughput.length) * 0.6;
+ const gap = (chartW / throughput.length) * 0.4;
+
+ return (
+
+ {[0, 0.5, 1].map((f) => (
+
+
+
+
+ {d.day}
+
+
+ {d.count.toLocaleString()}
+
+
+ );
+ })}
+
+ );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+function ProofreaderProgress() {
+ const {
+ quotaData,
+ proofreaderData,
+ throughputData,
+ saving,
+ resetData,
+ isWorker,
+ } = useProjectManager();
+
+ // Helper to get calculated stats for a proofreader from quotaData
+ const getStats = (key) => {
+ const quota = quotaData.find((q) => q.key === key);
+ if (!quota) return { target: 1500, actual: 0 };
+ const target =
+ quota.mon +
+ quota.tue +
+ quota.wed +
+ quota.thu +
+ quota.fri +
+ quota.sat +
+ quota.sun;
+ const actual =
+ (quota.actualMon || 0) +
+ (quota.actualTue || 0) +
+ (quota.actualWed || 0) +
+ (quota.actualThu || 0) +
+ (quota.actualFri || 0) +
+ (quota.actualSat || 0) +
+ (quota.actualSun || 0);
+ return { target, actual };
+ };
+
+ const topPerformers = useMemo(() => {
+ const withPoints = proofreaderData.map((p) => ({
+ ...p,
+ weeklyPoints: getStats(p.key).actual,
+ }));
+ return [...withPoints]
+ .sort((a, b) => b.weeklyPoints - a.weeklyPoints)
+ .slice(0, 3);
+ }, [proofreaderData, quotaData]);
+
+ const teamAccuracy =
+ proofreaderData.length > 0
+ ? (
+ proofreaderData.reduce((sum, p) => sum + p.accuracy, 0) /
+ proofreaderData.length
+ ).toFixed(1)
+ : 0;
+
+ const COLUMNS = [
+ {
+ title: "Proofreader",
+ dataIndex: "name",
+ key: "name",
+ render: (name, record) => (
+
+
+
+ {name}
+
+
+ {record.role}
+
+
+
+ ),
+ },
+ {
+ title: "Total Points",
+ dataIndex: "totalPoints",
+ key: "totalPoints",
+ align: "right",
+ render: (pts) => {pts.toLocaleString()} ,
+ },
+ {
+ title: "This Week",
+ key: "weeklyProgress",
+ align: "right",
+ render: (_, record) => {
+ const { target, actual } = getStats(record.key);
+ const pct = target > 0 ? Math.round((actual / target) * 100) : 0;
+ return (
+
+
+ {actual.toLocaleString()}{" "}
+
+ / {target.toLocaleString()}
+
+
+ = target ? "#52c41a" : "#1890ff"}
+ />
+
+ );
+ },
+ },
+ {
+ title: "Accuracy",
+ dataIndex: "accuracy",
+ key: "accuracy",
+ align: "center",
+ render: (pct) => (
+ = 95 ? "#52c41a" : pct >= 90 ? "#faad14" : "#f5222d"}
+ bg={pct >= 95 ? "#f6ffed" : pct >= 90 ? "#fffbe6" : "#fff2f0"}
+ >
+ {pct}%
+
+ ),
+ },
+ {
+ title: "Last Active",
+ dataIndex: "lastActive",
+ key: "lastActive",
+ render: (time, record) => (
+
+ {time}
+
+ ),
+ },
+ ];
+
+ return (
+
+ {/* ── Header ── */}
+
+
+
+ {isWorker ? "My Performance" : "Proofreader Performance"}
+
+
+ {isWorker
+ ? "Your personal throughput and accuracy · auto-saved to server"
+ : "Real-time throughput and accuracy tracking · auto-saved to server"}
+ {saving && (
+ <>
+ {" "}
+ ·
+
+
+
+
+
+ {/* ── Top Row: Individual Cards ── */}
+
+ {proofreaderData.map((pr) => {
+ const { target, actual } = getStats(pr.key);
+ const pct = target > 0 ? Math.round((actual / target) * 100) : 0;
+ return (
+
+
+
+
+
+ {pr.name}
+
+
+ {pr.role}
+
+
+
+
+
+ Weekly Goal
+
+
+ {pct}%
+
+
+
= target ? "#52c41a" : "#1890ff"}
+ />
+
+ {actual.toLocaleString()} / {target.toLocaleString()} pts
+
+
+
+
+ );
+ })}
+
+
+ {/* ── Main Section: Table + Insights ── */}
+
+
+
+
+
+
+
+ {topPerformers.map((pr, idx) => (
+
+
+ {idx + 1}
+
+
+
+ {pr.name}
+
+
+ {pr.weeklyPoints.toLocaleString()} pts this week
+
+
+
+ +{Math.round(pr.accuracy)}% acc
+
+
+
+
+
+
+
+
+
+
+ {/* ── Bottom Section: Team Throughput ── */}
+
+
+
+ {data.map((v, i) => {
+ const h = (v / 120) * H;
+ return (
+
+ );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+function QuotaManagement() {
+ const {
+ quotaData,
+ msgPreview,
+ setQuotaData,
+ setMsgPreview,
+ saving,
+ resetData,
+ isWorker,
+ activeWorker,
+ } = useProjectManager();
+
+ const [selectedWeek, setSelectedWeek] = useState(dayjs().startOf("week"));
+
+ const handleUpdateQuota = (key, day, val) => {
+ const updated = quotaData.map((item) =>
+ item.key === key ? { ...item, [day]: val } : item,
+ );
+ setQuotaData(updated);
+ };
+
+ const handleAutoAllocate = () => {
+ message.loading("Calculating optimal distribution...", 1.5).then(() => {
+ message.success(
+ "Quotas auto-allocated based on user capacity and dataset priority.",
+ );
+ });
+ };
+
+ const handleSendQuotas = () => {
+ message.success("Weekly quotas dispatched to proofreaders.");
+ };
+
+ // Day columns
+ const dayCols = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"].map(
+ (day) => ({
+ title: day.charAt(0).toUpperCase() + day.slice(1),
+ dataIndex: day,
+ key: day,
+ width: 100,
+ render: (val, record) => {
+ const actual =
+ record[`actual${day.charAt(0).toUpperCase() + day.slice(1)}`];
+ const attainment = val > 0 ? Math.round((actual / val) * 100) : 100;
+ return (
+
+
+
+ Target
+
+ handleUpdateQuota(record.key, day, v)}
+ style={{
+ width: "100%",
+ fontWeight: "bold",
+ background: "#e6f7ff",
+ borderRadius: 4,
+ border: "1px solid #91d5ff",
+ }}
+ controls={false}
+ />
+
+
+
+ Actual
+
+
+
+ {actual}
+
+
+
+
+
{text}
+
+ {record.datasets.join(", ")}
+
+
+
+ {actualTotal}
+ / {targetTotal}
+
+
+
+ {/* ── Header ── */}
+
+
+ {isWorker ? "My Weekly Quota" : "Weekly Quota Management"}
+
+
+ Plan targets and track capacity utilization · Real-time Sync
+ {saving && (
+ <>
+ {" "}
+ ·
+
+
+
+
+
+
+
+
+ {/* ── Quota Table ── */}
+
+ Targets vs Actuals
+
+ Week 10 (Current)
+
+
+ }
+ extra={
+
+ Input numbers in blue cells to update targets instantly.
+
+ }
+ style={{ marginBottom: 20, borderRadius: 8, overflow: "hidden" }}
+ >
+
+
+
+
+ {/* Capacity Summary */}
+ Capacity Summary}
+ style={{ borderRadius: 8 }}
+ >
+
+
+
+ Global Utilization
+
+
+
+
+ Total Weekly Target
+ {totals.target.toLocaleString()} points
+
+
+ Actual points so far
+ {totals.actual.toLocaleString()} points
+
+
+ Remaining to target
+ 0 ? "#faad14" : "#52c41a" }}
+ >
+ {remainingBuffer.toLocaleString()}
+
+
+
+
+
+ {/* Communication Preview */}
+
+