{!isEditingSpec && (
- {/*
- FNXC:TaskDetailPlan 2026-06-30-00:00:
- The Plan tab keeps the internal definition route for stable links, while exposing a direct PROMPT.md editor action so operators can comment on the executable task plan file without replacing the inline AI revision flow.
- */}
+ {/**
+ * FNXC:TaskDetailPlan 2026-06-30-00:00:
+ * The Plan tab keeps the internal definition route for stable links, while exposing a direct PROMPT.md editor action so operators can comment on the executable task plan file without replacing the inline AI revision flow.
+ *
+ * FNXC:TaskDetailPlan 2026-06-30-00:00:
+ * The Plan prompt surfaces must span the task-detail card body in modal and embedded renderings. Keep the scoped wrapper around markdown, no-prompt fallback, inline edit, and AI revision controls so width fixes do not alter unrelated detail sections.
+ */}
{fileBrowser && (
{
/>,
);
+ const planSection = container.querySelector(".detail-section--plan-prompt");
+ expect(planSection).toBeTruthy();
// Initially showing markdown view
- expect(container.querySelector(".markdown-body")).toBeTruthy();
+ const markdown = container.querySelector(".markdown-body");
+ expect(markdown).toBeTruthy();
+ expect(planSection?.contains(markdown)).toBe(true);
// Click Edit button
fireEvent.click(screen.getByText("Edit"));
// Should show spec edit textarea (query by class for specificity)
+ const editMode = container.querySelector(".spec-editor-edit-mode");
const textarea = container.querySelector(".spec-editor-textarea") as HTMLTextAreaElement;
+ const feedback = container.querySelector(".spec-editor-feedback");
+ expect(editMode).toBeTruthy();
expect(textarea).toBeTruthy();
+ expect(feedback).toBeTruthy();
+ expect(planSection?.contains(editMode)).toBe(true);
+ expect(planSection?.contains(textarea)).toBe(true);
+ expect(planSection?.contains(feedback)).toBe(true);
expect(textarea.value).toBe("# Test\n\nSpec content.");
});
+ it("keeps the no-prompt fallback inside the scoped full-width Plan wrapper", () => {
+ const { container } = render(
+ {
);
// In-progress tasks show exactly 11 tabs:
- // Activity, Plan, Logs, Changes, Review, Comments, Artifacts, Model, Workflow, Stats, Routing
+ // Activity, Chat, Plan, Changes, Review, Comments, Artifacts, Model, Workflow, Stats, Routing
const tabs = container.querySelectorAll(".detail-tab");
- expect(tabs.length).toBe(11);
- expect(tabs[0].textContent).toBe("Activity");
- expect(tabs[1].textContent).toBe("Plan");
- expect(tabs[2].textContent).toBe("Logs");
- expect(tabs[3].textContent).toBe("Changes");
- expect(tabs[4].textContent).toBe("Review");
- expect(tabs[5].textContent).toBe("Comments");
- expect(tabs[6].textContent).toBe("Artifacts");
- expect(tabs[7].textContent).toBe("Model");
- expect(tabs[8].textContent).toBe("Workflow");
- expect(tabs[9].textContent).toBe("Stats");
- expect(tabs[10].textContent).toBe("Routing");
+ expect(Array.from(tabs).map(t => t.textContent)).toEqual([
+ "Activity", "Chat", "Plan", "Changes", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ ]);
// Commits tab should NOT be present for non-done tasks
expect(screen.queryByText("Commits")).toBeNull();
});
@@ -256,18 +307,9 @@ describe("TaskDetailModal", () => {
// In-progress task with workflow steps: 11 tabs (Review after Changes, Workflow after Model)
const tabs = container.querySelectorAll(".detail-tab");
- expect(tabs.length).toBe(11);
- expect(tabs[0].textContent).toBe("Activity");
- expect(tabs[1].textContent).toBe("Plan");
- expect(tabs[2].textContent).toBe("Logs");
- expect(tabs[3].textContent).toBe("Changes");
- expect(tabs[4].textContent).toBe("Review");
- expect(tabs[5].textContent).toBe("Comments");
- expect(tabs[6].textContent).toBe("Artifacts");
- expect(tabs[7].textContent).toBe("Model");
- expect(tabs[8].textContent).toBe("Workflow");
- expect(tabs[9].textContent).toBe("Stats");
- expect(tabs[10].textContent).toBe("Routing");
+ expect(Array.from(tabs).map(t => t.textContent)).toEqual([
+ "Activity", "Chat", "Plan", "Changes", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ ]);
});
it("does NOT show Commits tab for done task with mergeDetails.commitSha (changes merged into Changes tab)", () => {
@@ -287,21 +329,11 @@ describe("TaskDetailModal", () => {
/>,
);
- // Done task with commit SHA: Activity, Summary, Plan, Logs, Changes, Review, Comments, Artifacts, Model, Workflow, Stats, Routing (12 tabs, no Commits)
+ // Done task with commit SHA: Activity, Chat, Summary, Plan, Changes, Review, Comments, Artifacts, Model, Workflow, Stats, Routing (12 tabs, no Commits)
const tabs = container.querySelectorAll(".detail-tab");
- expect(tabs.length).toBe(12);
- expect(tabs[0].textContent).toBe("Activity");
- expect(tabs[1].textContent).toBe("Summary");
- expect(tabs[2].textContent).toBe("Plan");
- expect(tabs[3].textContent).toBe("Logs");
- expect(tabs[4].textContent).toBe("Changes");
- expect(tabs[5].textContent).toBe("Review");
- expect(tabs[6].textContent).toBe("Comments");
- expect(tabs[7].textContent).toBe("Artifacts");
- expect(tabs[8].textContent).toBe("Model");
- expect(tabs[9].textContent).toBe("Workflow");
- expect(tabs[10].textContent).toBe("Stats");
- expect(tabs[11].textContent).toBe("Routing");
+ expect(Array.from(tabs).map(t => t.textContent)).toEqual([
+ "Activity", "Chat", "Summary", "Plan", "Changes", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ ]);
// Commits tab should NOT be present
expect(screen.queryByText("Commits")).toBeNull();
});
@@ -326,19 +358,9 @@ describe("TaskDetailModal", () => {
// Done task with workflow steps and commit SHA: 12 tabs including Summary and Review (no Commits)
const tabs = container.querySelectorAll(".detail-tab");
- expect(tabs.length).toBe(12);
- expect(tabs[0].textContent).toBe("Activity");
- expect(tabs[1].textContent).toBe("Summary");
- expect(tabs[2].textContent).toBe("Plan");
- expect(tabs[3].textContent).toBe("Logs");
- expect(tabs[4].textContent).toBe("Changes");
- expect(tabs[5].textContent).toBe("Review");
- expect(tabs[6].textContent).toBe("Comments");
- expect(tabs[7].textContent).toBe("Artifacts");
- expect(tabs[8].textContent).toBe("Model");
- expect(tabs[9].textContent).toBe("Workflow");
- expect(tabs[10].textContent).toBe("Stats");
- expect(tabs[11].textContent).toBe("Routing");
+ expect(Array.from(tabs).map(t => t.textContent)).toEqual([
+ "Activity", "Chat", "Summary", "Plan", "Changes", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ ]);
// Commits tab should NOT be present
expect(screen.queryByText("Commits")).toBeNull();
});
@@ -358,9 +380,8 @@ describe("TaskDetailModal", () => {
);
const triageTabs = triageContainer.querySelectorAll(".detail-tab");
- expect(triageTabs.length).toBe(10); // Activity, Plan, Logs, Review, Comments, Artifacts, Model, Workflow, Stats, Routing
expect(Array.from(triageTabs).map(t => t.textContent)).toEqual([
- "Activity", "Plan", "Logs", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ "Activity", "Chat", "Plan", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
]);
const { container: todoContainer } = render(
@@ -377,9 +398,8 @@ describe("TaskDetailModal", () => {
);
const todoTabs = todoContainer.querySelectorAll(".detail-tab");
- expect(todoTabs.length).toBe(10); // Activity, Plan, Logs, Review, Comments, Artifacts, Model, Workflow, Stats, Routing
expect(Array.from(todoTabs).map(t => t.textContent)).toEqual([
- "Activity", "Plan", "Logs", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
+ "Activity", "Chat", "Plan", "Review", "Comments", "Artifacts", "Model", "Workflow", "Stats", "Routing",
]);
});
diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx
index e196c5046f..e6c4ef8e7d 100644
--- a/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx
+++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx
@@ -283,6 +283,50 @@ describe("TaskDetailModal", () => {
expect(tabletModalBlock).not.toContain("16px");
});
+ it("keeps Plan prompt surfaces full-width across modal, embedded, and mobile task-detail layouts", () => {
+ const css = readDashboardStylesSource();
+ const planBlock = getExactCssRuleBlock(css, ".detail-section--plan-prompt");
+ const planSurfaceBlock = getExactCssRuleBlock(css, ".detail-section--plan-prompt .markdown-body,\n.detail-section--plan-prompt .detail-prompt,\n.detail-section--plan-prompt .spec-loading,\n.detail-section--plan-prompt .spec-editor-edit-mode,\n.detail-section--plan-prompt .spec-editor-revision,\n.detail-section--plan-prompt .spec-editor-textarea,\n.detail-section--plan-prompt .spec-editor-feedback");
+ const embeddedPlanBlock = getExactCssRuleBlock(css, ".task-detail-content--embedded .detail-section--plan-prompt");
+ const editModeBlock = getExactCssRuleBlock(css, ".spec-editor-edit-mode");
+ const textareaBlock = getExactCssRuleBlock(css, ".spec-editor-textarea");
+ const feedbackBlock = getExactCssRuleBlock(css, ".spec-editor-feedback");
+ const actionsBlock = getExactCssRuleBlock(css, ".spec-editor-actions-row");
+ const revisionActionsBlock = getExactCssRuleBlock(css, ".spec-editor-revision-actions");
+ const mobileBlock = getCssAtRuleBlockContaining(css, "@media (max-width: 768px)", ".detail-section--plan-prompt .spec-editor-actions-row");
+
+ for (const [surface, block] of [
+ ["Plan wrapper", planBlock],
+ ["Plan prompt descendants", planSurfaceBlock],
+ ["embedded Plan wrapper", embeddedPlanBlock],
+ ["edit mode", editModeBlock],
+ ["textarea", textareaBlock],
+ ["feedback", feedbackBlock],
+ ["save/cancel actions", actionsBlock],
+ ["AI revision actions", revisionActionsBlock],
+ ] as const) {
+ expect(block, `${surface} width`).toContain("width: 100%;");
+ expect(block, `${surface} min-width`).toContain("min-width: 0;");
+ expect(block, `${surface} max-width`).toContain("max-width: 100%;");
+ }
+
+ expect(planBlock).toContain("display: flex;");
+ expect(planBlock).toContain("flex-direction: column;");
+ expect(planSurfaceBlock).toContain("box-sizing: border-box;");
+ expect(textareaBlock).toContain("box-sizing: border-box;");
+ expect(feedbackBlock).toContain("box-sizing: border-box;");
+ expect(actionsBlock).toContain("flex-wrap: wrap;");
+ expect(revisionActionsBlock).toContain("flex-wrap: wrap;");
+ expect(mobileBlock).toContain(".detail-section--plan-prompt .spec-editor-actions-row,");
+ expect(mobileBlock).toContain(".detail-section--plan-prompt .spec-editor-revision-actions");
+ expect(mobileBlock).toContain("align-items: stretch;");
+ expect(mobileBlock).toContain("flex-wrap: wrap;");
+ expect(mobileBlock).toContain(".detail-section--plan-prompt .spec-editor-actions-row .btn,");
+ expect(mobileBlock).toContain(".detail-section--plan-prompt .spec-editor-revision-actions .btn");
+ expect(mobileBlock).toContain("flex: 1 1 auto;");
+ expect(css).not.toMatch(/\.detail-section\s*\{[^}]*width:\s*100%;/);
+ });
+
it("keeps task-detail tabs as horizontal scrollers across modal, embedded, mobile, and tablet surfaces", () => {
const css = readDashboardStylesSource();
const baseTabsBlock = getExactCssRuleBlock(css, ".detail-tabs");