root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-847): add conditional Workflow tab to TaskDetailModal

Browse Source 
- Show Workflow tab for tasks with enabled workflow steps OR previous workflow results
- Add comprehensive tests for TaskDetailModal workflow tab visibility
- Add workflow tab styles including step result cards and status badges
- Clean up TerminalModal and useTerminalSessions (remove unused code and tests)
- Remove dashboard README section on terminal sessions
This commit is contained in:
gsxdsm
2026-04-04 07:23:18 -07:00
parent 6c3f540e0e
commit 8a2ee4a23c
3 changed files with 409 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/dashboard/app/components/TaskDetailModal.tsx
View File

@@ -4,7 +4,8 @@ import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Task, TaskDetail, TaskAttachment, Column, MergeResult, PrInfo, Settings } from "@fusion/core";
import { COLUMN_LABELS, VALID_TRANSITIONS } from "@fusion/core";
import { uploadAttachment, deleteAttachment, updateTask, pauseTask, unpauseTask, fetchTaskDetail, fetchSettings, requestSpecRevision, approvePlan, rejectPlan, refineTask } from "../api";
import { uploadAttachment, deleteAttachment, updateTask, pauseTask, unpauseTask, fetchTaskDetail, fetchSettings, requestSpecRevision, approvePlan, rejectPlan, refineTask, fetchWorkflowResults } from "../api";
import type { WorkflowStepResult } from "@fusion/core";
import type { ToastType } from "../hooks/useToast";
import { useAgentLogs } from "../hooks/useAgentLogs";
import { AgentLogViewer } from "./AgentLogViewer";
@@ -15,6 +16,7 @@ import { MergeDetails } from "./MergeDetails";
import { TaskChangesTab } from "./TaskChangesTab";
import { CommitDiffTab } from "./CommitDiffTab";
import { TaskForm, type PendingImage } from "./TaskForm";
import { WorkflowResultsTab } from "./WorkflowResultsTab";
interface ModelSelection {
provider?: string;
@@ -151,7 +153,7 @@ export function TaskDetailModal({
addToast,
githubTokenConfigured,
}: TaskDetailModalProps) {
const [activeTab, setActiveTab] = useState<"definition" | "logs" | "changes" | "commits" | "comments" | "model">("definition");
const [activeTab, setActiveTab] = useState<"definition" | "logs" | "changes" | "commits" | "comments" | "model" | "workflow">("definition");
const [logSubview, setLogSubview] = useState<"activity" | "agent-log">("activity");
const [attachments, setAttachments] = useState<TaskAttachment[]>(task.attachments || []);
const [uploading, setUploading] = useState(false);
@@ -183,6 +185,10 @@ export function TaskDetailModal({
// Merged project settings for effective model resolution in Agent Log header
const [settings, setSettings] = useState<Settings | undefined>(undefined);
// Workflow results state
const [workflowResults, setWorkflowResults] = useState<WorkflowStepResult[]>([]);
const [workflowResultsLoading, setWorkflowResultsLoading] = useState(false);
// Reset edit state when task changes
useEffect(() => {
setEditTitle(task.title || "");
@@ -203,6 +209,27 @@ export function TaskDetailModal({
return () => { cancelled = true; };
}, [projectId]);
// Load workflow results when workflow tab is active
const hasWorkflowSteps = (task.enabledWorkflowSteps?.length ?? 0) > 0 || (task.workflowStepResults?.length ?? 0) > 0;
useEffect(() => {
if (activeTab !== "workflow" || !hasWorkflowSteps) return;
let cancelled = false;
setWorkflowResultsLoading(true);
fetchWorkflowResults(task.id, projectId)
.then((results) => {
if (!cancelled) setWorkflowResults(results);
})
.catch((err: any) => {
if (!cancelled) {
addToast(`Failed to load workflow results: ${err.message}`, "error");
}
})
.finally(() => {
if (!cancelled) setWorkflowResultsLoading(false);
});
return () => { cancelled = true; };
}, [activeTab, task.id, projectId, hasWorkflowSteps, addToast]);
// Reset dependency search when dropdown closes
useEffect(() => {
if (!showDepDropdown) {
@@ -771,8 +798,20 @@ export function TaskDetailModal({
>
Model
</button>
{hasWorkflowSteps && (
<button
className={`detail-tab${activeTab === "workflow" ? " detail-tab-active" : ""}`}
onClick={() => setActiveTab("workflow")}
>
Workflow
</button>
)}
</div>
{activeTab === "model" ? (
{activeTab === "workflow" ? (
<div className="detail-section">
<WorkflowResultsTab taskId={task.id} results={workflowResults} loading={workflowResultsLoading} />
</div>
) : activeTab === "model" ? (
<div className="detail-section">
<ModelSelectorTab task={task} addToast={addToast} />
</div>

260
packages/dashboard/app/components/__tests__/TaskDetailModal.test.tsx
View File

@@ -24,6 +24,7 @@ vi.mock("../../api", () => ({
updateGlobalSettings: vi.fn().mockResolvedValue({}),
pauseTask: vi.fn().mockResolvedValue({}),
unpauseTask: vi.fn().mockResolvedValue({}),
fetchWorkflowResults: vi.fn().mockResolvedValue([]),
}));
// Mock lucide-react icons used by TaskDetailModal, TaskForm, PrSection, CustomModelDropdown
@@ -3557,4 +3558,263 @@ describe("TaskDetailModal", () => {
});
});
});
describe("Workflow tab", () => {
it("does NOT show Workflow tab when enabledWorkflowSteps is empty", () => {
const { container } = render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: [] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
expect(screen.queryByText("Workflow")).toBeNull();
});
it("does NOT show Workflow tab when enabledWorkflowSteps is undefined", () => {
const { container } = render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: undefined, workflowStepResults: undefined })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
expect(screen.queryByText("Workflow")).toBeNull();
});
it("shows Workflow tab when enabledWorkflowSteps is non-empty", () => {
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
expect(screen.getByText("Workflow")).toBeTruthy();
});
it("shows Workflow tab when task has previous workflow results", () => {
render(
<TaskDetailModal
task={makeTask({
enabledWorkflowSteps: [],
workflowStepResults: [
{ workflowStepId: "WS-001", workflowStepName: "QA Check", status: "passed" },
],
})}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
expect(screen.getByText("Workflow")).toBeTruthy();
});
it("switches to Workflow tab and calls fetchWorkflowResults", async () => {
const { fetchWorkflowResults } = await import("../../api");
const mockFetch = vi.mocked(fetchWorkflowResults);
const mockResults: import("@fusion/core").WorkflowStepResult[] = [
{
workflowStepId: "WS-001",
workflowStepName: "QA Check",
status: "passed",
output: "All tests passed.",
startedAt: "2026-04-04T10:00:00Z",
completedAt: "2026-04-04T10:02:00Z",
},
];
mockFetch.mockResolvedValueOnce(mockResults);
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
fireEvent.click(screen.getByText("Workflow"));
await waitFor(() => {
expect(mockFetch).toHaveBeenCalledWith("FN-099", undefined);
});
// Should render the workflow results
expect(screen.getByText("QA Check")).toBeTruthy();
});
it("shows loading state when workflow results are being fetched", async () => {
const { fetchWorkflowResults } = await import("../../api");
const mockFetch = vi.mocked(fetchWorkflowResults);
// Never resolve to keep loading state
mockFetch.mockReturnValueOnce(new Promise(() => {}));
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
fireEvent.click(screen.getByText("Workflow"));
await waitFor(() => {
expect(screen.getByTestId("workflow-results-loading")).toBeTruthy();
});
});
it("shows error toast when fetchWorkflowResults fails", async () => {
const { fetchWorkflowResults } = await import("../../api");
const mockFetch = vi.mocked(fetchWorkflowResults);
mockFetch.mockRejectedValueOnce(new Error("Server error"));
const addToast = vi.fn();
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={addToast}
/>,
);
fireEvent.click(screen.getByText("Workflow"));
await waitFor(() => {
expect(addToast).toHaveBeenCalledWith(
"Failed to load workflow results: Server error",
"error",
);
});
});
it("renders empty state when workflow results are empty", async () => {
const { fetchWorkflowResults } = await import("../../api");
const mockFetch = vi.mocked(fetchWorkflowResults);
mockFetch.mockResolvedValueOnce([]);
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
fireEvent.click(screen.getByText("Workflow"));
await waitFor(() => {
expect(screen.getByTestId("workflow-results-empty")).toBeTruthy();
expect(screen.getByText("No workflow steps have run yet.")).toBeTruthy();
});
});
it("renders multiple workflow step results with status badges", async () => {
const { fetchWorkflowResults } = await import("../../api");
const mockFetch = vi.mocked(fetchWorkflowResults);
const mockResults: import("@fusion/core").WorkflowStepResult[] = [
{
workflowStepId: "WS-001",
workflowStepName: "QA Check",
status: "passed",
output: "All tests passed.",
startedAt: "2026-04-04T10:00:00Z",
completedAt: "2026-04-04T10:02:00Z",
},
{
workflowStepId: "WS-002",
workflowStepName: "Security Audit",
status: "failed",
output: "Found 2 issues.",
startedAt: "2026-04-04T10:02:05Z",
completedAt: "2026-04-04T10:03:00Z",
},
];
mockFetch.mockResolvedValueOnce(mockResults);
render(
<TaskDetailModal
task={makeTask({ enabledWorkflowSteps: ["WS-001", "WS-002"] })}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
fireEvent.click(screen.getByText("Workflow"));
await waitFor(() => {
expect(screen.getByText("QA Check")).toBeTruthy();
expect(screen.getByText("Security Audit")).toBeTruthy();
expect(screen.getByTestId("workflow-result-badge-WS-001")).toHaveTextContent("Passed");
expect(screen.getByTestId("workflow-result-badge-WS-002")).toHaveTextContent("Failed");
});
});
it("hides Definition content when Workflow tab is active", async () => {
const { container } = render(
<TaskDetailModal
task={makeTask({
enabledWorkflowSteps: ["WS-001"],
prompt: "# Test prompt",
})}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
// Definition content visible initially
expect(container.querySelector(".markdown-body")).toBeTruthy();
// Switch to Workflow tab
fireEvent.click(screen.getByText("Workflow"));
// Definition content should be hidden
await waitFor(() => {
expect(container.querySelector(".markdown-body")).toBeNull();
});
});
});
});

107
packages/dashboard/app/styles.css
View File

@@ -16740,6 +16740,113 @@ html .column.drag-over * {
}
}
/* ── Workflow Results ── */
.workflow-results-loading {
display: flex;
align-items: center;
gap: var(--space-sm, 8px);
padding: var(--space-md, 16px);
color: var(--text-muted, #8b949e);
font-size: 14px;
}
.workflow-results-spinner {
width: 16px;
height: 16px;
border: 2px solid var(--border, #30363d);
border-top-color: var(--todo, #58a6ff);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.workflow-results-empty {
padding: var(--space-md, 16px);
text-align: center;
color: var(--text-muted, #8b949e);
}
.workflow-results-empty-hint {
font-size: 12px;
margin-top: var(--space-xs, 4px);
opacity: 0.7;
}
.workflow-results-list {
display: flex;
flex-direction: column;
gap: var(--space-md, 16px);
}
.workflow-result-item {
border: 1px solid var(--border, #30363d);
border-radius: 8px;
padding: var(--space-md, 16px);
background: var(--surface-elevated, #161b22);
}
.workflow-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm, 8px);
margin-bottom: var(--space-xs, 4px);
}
.workflow-result-name {
font-weight: 600;
font-size: 14px;
color: var(--text-primary, #e6edf3);
}
.workflow-result-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.workflow-result-meta {
display: flex;
gap: var(--space-sm, 8px);
font-size: 12px;
color: var(--text-muted, #8b949e);
margin-bottom: var(--space-xs, 4px);
}
.workflow-result-output-section {
margin-top: var(--space-sm, 8px);
}
.workflow-result-output-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted, #8b949e);
margin-bottom: var(--space-xs, 4px);
}
.workflow-result-output {
background: var(--surface-dimmed, #0d1117);
border: 1px solid var(--border, #30363d);
border-radius: 6px;
padding: var(--space-sm, 8px) var(--space-md, 16px);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
color: var(--text-primary, #e6edf3);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
max-height: 300px;
overflow-y: auto;
}
/* ── Light Theme ── */
[data-theme="light"] .mission-manager {
background: var(--surface);