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

FN-6517: keep expanded chat title visible

Browse Source 
Expanded agent chat now keeps the modal title context while hiding the rest of the chrome.

- Preserve the task title row when chat expands and keep header spacing balanced.
- Continue hiding tabs and modal actions while expanded chat occupies the modal body.
- Extend desktop, mobile, and embedded chat coverage for the expanded title-row behavior.

Files changed:
 .../dashboard/app/components/TaskDetailModal.css   | 10 ++--
 .../TaskDetailModal.attachments-and-tabs.test.tsx  | 58 ++++++++++++++++++++--
 2 files changed, 59 insertions(+), 9 deletions(-)

Fusion-Task-Id: FN-6517

Fusion-Task-Lineage: 77a82f16-5711-4e8d-9560-fd6e0fdfa655
This commit is contained in:
gsxdsm
2026-06-16 22:39:06 -07:00
parent d35f93e1ef
commit aadc0a0817
2 changed files with 59 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard/app/components/TaskDetailModal.css
View File

@@ -754,10 +754,10 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P
margin-top: 0;
}
.task-detail-content--chat-expanded .detail-title-row {
display: none;
}
/*
FNXC:TaskDetailChat 2026-06-16-22:13:
Expanded chat should take over the modal except for the task title row, so users keep task ID and column context while tabs and modal actions stay hidden.
*/
.task-detail-content--chat-expanded .detail-tabs {
display: none;
}
@@ -768,7 +768,7 @@ The task-detail modal metadata must keep priority, execution mode, provenance, P
.task-detail-content--chat-expanded .modal-header {
flex: 0 0 auto;
justify-content: flex-end;
justify-content: space-between;
padding-block: var(--space-sm);
}

58
packages/dashboard/app/components/__tests__/TaskDetailModal.attachments-and-tabs.test.tsx
View File

@@ -787,22 +787,34 @@ describe("TaskDetailModal", () => {
expect(mobileSectionRule).toContain("min-height: 0");
});
it("FN-6370 defines expanded chat chrome-hiding CSS for desktop and mobile", () => {
it("FN-6370/FN-6517 defines expanded chat chrome CSS for desktop and mobile", () => {
const css = readDashboardStylesSource();
const expandedChromeRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .detail-title-row");
const titleRule = getCssRuleBlock(css, ".detail-title-row");
const expandedTitleRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .detail-title-row");
const expandedTabsRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .detail-tabs");
const expandedActionsRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .modal-actions");
const expandedHeaderRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .modal-header");
const expandedBodyRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .detail-body--chat");
const expandedSectionRule = getCssRuleBlock(css, ".task-detail-content--chat-expanded .detail-section--chat");
const mobileCss = css.slice(css.indexOf("@media (max-width: 768px)"));
const mobileTitleRule = getCssRuleBlock(mobileCss, ".task-detail-content--chat-expanded .detail-title-row");
const mobileTabsRule = getCssRuleBlock(mobileCss, ".task-detail-content--chat-expanded .detail-tabs");
const mobileActionsRule = getCssRuleBlock(mobileCss, ".task-detail-content--chat-expanded .modal-actions");
expect(expandedChromeRule).toContain("display: none");
expect(titleRule).toContain("display: flex");
expect(expandedTitleRule).not.toContain("display: none");
expect(expandedTabsRule).toContain("display: none");
expect(expandedActionsRule).toContain("display: none");
expect(expandedHeaderRule).toContain("justify-content: space-between");
expect(expandedBodyRule).toContain("flex: 1");
expect(expandedBodyRule).toContain("min-height: 0");
expect(expandedSectionRule).toContain("margin-top: 0");
expect(mobileTitleRule).not.toContain("display: none");
expect(mobileTabsRule).toContain("display: none");
expect(mobileActionsRule).toContain("display: none");
});
it("FN-6370 expands and collapses chat without leaving chrome hidden", () => {
it("FN-6370/FN-6517 expands and collapses chat without leaving chrome hidden", () => {
const { container } = render(
<TaskDetailModal
task={makeTask({ prompt: "# Hello\n\nContent" })}
@@ -817,21 +829,59 @@ describe("TaskDetailModal", () => {
fireEvent.click(screen.getByRole("button", { name: "Chat" }));
const content = container.querySelector(".task-detail-content");
const titleRow = container.querySelector(".detail-title-row");
expect(content).not.toHaveClass("task-detail-content--chat-expanded");
expect(titleRow).toHaveTextContent("FN-099");
expect(container.querySelector(".detail-tabs")).toBeTruthy();
expect(container.querySelector(".modal-actions")).toBeTruthy();
fireEvent.click(screen.getByTestId("task-chat-expand-toggle"));
expect(content).toHaveClass("task-detail-content--chat-expanded");
expect(titleRow).toHaveTextContent("FN-099");
expect(titleRow).toHaveTextContent("In Progress");
expect(container.querySelector(".detail-tabs")).toBeTruthy();
expect(container.querySelector(".modal-actions")).toBeTruthy();
expect(screen.getByTestId("task-chat-expand-toggle")).toHaveAttribute("aria-label", "Collapse chat");
expect(screen.getByTestId("task-chat-expand-toggle")).toHaveAttribute("aria-pressed", "true");
fireEvent.click(screen.getByTestId("task-chat-expand-toggle"));
expect(content).not.toHaveClass("task-detail-content--chat-expanded");
expect(titleRow).toHaveTextContent("FN-099");
expect(container.querySelector(".detail-tabs")).toBeTruthy();
expect(container.querySelector(".modal-actions")).toBeTruthy();
expect(screen.getByTestId("task-chat-expand-toggle")).toHaveAttribute("aria-label", "Expand chat to full modal");
expect(screen.getByTestId("task-chat-expand-toggle")).toHaveAttribute("aria-pressed", "false");
});
it("FN-6517 keeps the title row visible when embedded chat expands", () => {
const { container } = render(
<TaskDetailContent
task={makeTask({ prompt: "# Hello\n\nContent" })}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
embedded
initialTab="chat"
/>,
);
const content = container.querySelector(".task-detail-content");
const titleRow = container.querySelector(".detail-title-row");
expect(content).toHaveClass("task-detail-content--embedded");
expect(content).not.toHaveClass("task-detail-content--chat-expanded");
expect(titleRow).toHaveTextContent("FN-099");
fireEvent.click(screen.getByTestId("task-chat-expand-toggle"));
expect(content).toHaveClass("task-detail-content--embedded");
expect(content).toHaveClass("task-detail-content--chat-expanded");
expect(titleRow).toHaveTextContent("FN-099");
expect(titleRow).toHaveTextContent("In Progress");
expect(container.querySelector(".detail-tabs")).toBeTruthy();
expect(container.querySelector(".modal-actions")).toBeTruthy();
});
it("FN-6370 resets expanded chat when the active tab changes", () => {
const { container, rerender } = render(
<TaskDetailContent