From e37260b30c29275448a2adda90e5b9bf167d1456 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Tue, 30 Jun 2026 23:44:14 -0700 Subject: [PATCH] fix(FN-7344): keep planner chat context expanded --- .changeset/planner-chat-expanded-context.md | 7 +++++++ .../app/components/TaskDetailModal.css | 12 ++++++++--- .../app/components/TaskPlannerChatTab.tsx | 3 +-- ...Modal.responsive-and-dependencies.test.tsx | 20 ++++++++++++------- .../__tests__/TaskPlannerChatTab.test.tsx | 2 ++ 5 files changed, 32 insertions(+), 12 deletions(-) create mode 100644 .changeset/planner-chat-expanded-context.md diff --git a/.changeset/planner-chat-expanded-context.md b/.changeset/planner-chat-expanded-context.md new file mode 100644 index 0000000000..40d07c6c8a --- /dev/null +++ b/.changeset/planner-chat-expanded-context.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Keep Planner Chat expanded context visible while removing repeated header guidance. +category: fix +dev: Planner Chat hides the header subtext, keeps that guidance in the empty state, and preserves title/workflow context when expanded on mobile. diff --git a/packages/dashboard/app/components/TaskDetailModal.css b/packages/dashboard/app/components/TaskDetailModal.css index 263e38987b..f3a6991d62 100644 --- a/packages/dashboard/app/components/TaskDetailModal.css +++ b/packages/dashboard/app/components/TaskDetailModal.css @@ -880,6 +880,9 @@ Planner Chat defaults to a focused state, but operator steering says large scree FNXC:TaskDetailPlannerChat 2026-06-30-20:06: Expanded Planner Chat must still expose task Priority, Execution Mode, and the tab bar on mobile. Hide only lower-priority metadata in the metadata row so inline handlers and tab navigation remain reachable without overlapping the transcript/composer. + +FNXC:TaskDetailPlannerChat 2026-07-02-00:04: +Expanded Planner Chat must keep the task title and workflow badge visible on mobile. The title preserves task identity, and the workflow badge is owned by the timestamps row, so this mode hides lower-priority metadata but not `.detail-heading-row` or `.detail-timestamps`; timestamp labels inside that row can hide so the workflow badge remains compact. */ .detail-section--planner-chat { display: flex; @@ -1176,14 +1179,12 @@ FN-6500 fixes a tablet regression from FN-5599: the task-detail overlay offset a display: none; } - .task-detail-content--planner-chat-expanded .detail-heading-row, .task-detail-content--planner-chat-expanded .detail-description-toggle, .task-detail-content--planner-chat-expanded .detail-near-duplicate-banner, .task-detail-content--planner-chat-expanded .branch-group-card, .task-detail-content--planner-chat-expanded .workspace-worktrees-summary, .task-detail-content--planner-chat-expanded .modal-actions, - .task-detail-content--planner-chat-expanded .detail-provenance, - .task-detail-content--planner-chat-expanded .detail-timestamps { + .task-detail-content--planner-chat-expanded .detail-provenance { display: none; } @@ -1198,6 +1199,11 @@ FN-6500 fixes a tablet regression from FN-5599: the task-detail overlay offset a margin-bottom: var(--space-sm); } + .task-detail-content--planner-chat-expanded .detail-timestamps .detail-timestamp-item, + .task-detail-content--planner-chat-expanded .detail-timestamps .detail-timestamp-separator { + display: none; + } + .task-detail-content--planner-chat-expanded .detail-tabs { flex: 0 0 auto; margin-bottom: var(--space-sm); diff --git a/packages/dashboard/app/components/TaskPlannerChatTab.tsx b/packages/dashboard/app/components/TaskPlannerChatTab.tsx index 4ba42defb9..4403899cd9 100644 --- a/packages/dashboard/app/components/TaskPlannerChatTab.tsx +++ b/packages/dashboard/app/components/TaskPlannerChatTab.tsx @@ -503,7 +503,6 @@ export function TaskPlannerChatTab({ task, projectId, active, expanded = false,

{t("taskDetail.plannerChat.heading", "Planner Chat")}

-

{t("taskDetail.plannerChat.description", "Ask planning questions about this task's current status, recent activity, blockers, next steps, or definition.")}

{isUsableModel(planningModel) && ( @@ -543,7 +542,7 @@ export function TaskPlannerChatTab({ task, projectId, active, expanded = false,
{t("taskDetail.plannerChat.emptyTitle", "Start a task-aware chat")}
-

{t("taskDetail.plannerChat.emptyBody", "Ask the planner about current status, recent activity, next actions, or the task definition. Starter prompts send as normal chat messages.")}

+

{t("taskDetail.plannerChat.emptyBody", "Ask planning questions about this task's current status, recent activity, blockers, next steps, or definition. Starter prompts send as normal chat messages.")}

{starterPrompts.length > 0 && (
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 975e97978b..573e726fb6 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 @@ -121,7 +121,9 @@ describe("TaskDetailModal", () => { expect(headerBlock).toContain("justify-content: space-between;"); expect(headerActionsBlock).toContain("justify-content: flex-end;"); expect(headerActionsBlock).not.toContain("flex-wrap: wrap;"); - expect(modelBlock).toContain("text-overflow: ellipsis;"); + expect(modelBlock).toContain("display: inline-flex;"); + expect(modelBlock).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm));"); + expect(modelBlock).not.toContain("text-overflow: ellipsis;"); expect(composerBlock).toContain("display: flex;"); expect(composerBlock).toContain("flex-wrap: wrap;"); expect(composerBlock).toContain("align-items: stretch;"); @@ -130,12 +132,15 @@ describe("TaskDetailModal", () => { expect(inputBlock).toContain("height: calc(var(--space-2xl) + var(--space-sm));"); expect(inputBlock).toContain("min-height: calc(var(--space-2xl) + var(--space-sm));"); expect(inputBlock).not.toContain("min-height: 5rem;"); - expect(mobileComposerBlock).toContain("flex-direction: column;"); - expect(mobileComposerBlock).toContain("align-items: stretch;"); + expect(mobileComposerBlock).toContain("flex-direction: row;"); + expect(mobileComposerBlock).toContain("flex-wrap: nowrap;"); + expect(mobileComposerBlock).toContain("align-items: flex-end;"); expect(mobileInputBlock).toContain("height: calc(var(--space-2xl) + var(--space-lg));"); expect(mobileInputBlock).toContain("min-height: calc(var(--space-2xl) + var(--space-lg));"); + expect(mobileInputBlock).toContain("max-height: calc(var(--space-2xl) + var(--space-lg));"); + expect(mobileInputBlock).toContain("resize: none;"); expect(mobileSendBlock).toContain("justify-content: center;"); - expect(mobileSendBlock).toContain("width: 100%;"); + expect(mobileSendBlock).toContain("inline-size: calc(var(--space-2xl) + var(--space-lg));"); expect(mobileSendBlock).toContain("min-block-size: calc(var(--space-2xl) + var(--space-lg));"); expectBaseRule(css, ".task-planner-chat-starters", "grid-template-columns: repeat(2, minmax(0, 1fr));"); expectBaseRule(css, ".task-planner-chat-message .chat-question-response", "overflow-wrap: anywhere;"); @@ -150,11 +155,12 @@ describe("TaskDetailModal", () => { const plannerExpandedMetaBlock = getCssRuleBlock(plannerMobileBlock, ".task-detail-content--planner-chat-expanded .detail-meta"); expectBaseRule(detailCss, ".detail-body--planner-chat", "overflow-y: hidden;"); expectBaseRule(detailCss, ".detail-section--planner-chat", "min-height: 0;"); - expect(plannerMobileBlock).toContain(".task-detail-content--planner-chat-expanded .detail-heading-row"); expect(plannerMobileBlock).toContain(".task-detail-content--planner-chat-expanded .detail-provenance"); - expect(plannerMobileBlock).toContain(".task-detail-content--planner-chat-expanded .detail-timestamps"); expect(plannerMobileBlock).toContain(".task-detail-content--planner-chat-expanded .modal-actions"); expect(plannerMobileBlock).toContain("display: none;"); + expect(plannerMobileBlock).not.toContain(".task-detail-content--planner-chat-expanded .detail-heading-row"); + expect(plannerMobileBlock).not.toMatch(/\.task-detail-content--planner-chat-expanded \.detail-timestamps\s*\{/); + expect(plannerMobileBlock).toContain(".task-detail-content--planner-chat-expanded .detail-timestamps .detail-timestamp-item"); expect(plannerMobileBlock).not.toMatch(/\.task-detail-content--planner-chat-expanded \.detail-meta,\s*\.task-detail-content--planner-chat-expanded \.detail-near-duplicate-banner/); expect(plannerMobileBlock).not.toMatch(/\.task-detail-content--planner-chat-expanded \.detail-tabs,\s*\.task-detail-content--planner-chat-expanded \.branch-group-card/); expect(plannerExpandedMetaBlock).toContain("flex: 0 0 auto;"); @@ -221,7 +227,7 @@ describe("TaskDetailModal", () => { expect(css).toMatch(/@media \(max-width: 768px\)[\s\S]*?\.detail-timestamps\s*\{[^}]*align-items:\s*center;[^}]*flex-wrap:\s*nowrap;/); expect(css).not.toMatch(/@media[^{]*\(max-width: 768px\)[^{]*\{[\s\S]*?\.detail-timestamps\s*\{[^}]*flex-direction:\s*column;/); - expect(css).not.toMatch(/@media[^{]*\(max-width: 768px\)[^{]*\{[\s\S]*?\.detail-timestamp-separator\s*\{[^}]*display:\s*none;/); + expect(css).toContain(".task-detail-content--planner-chat-expanded .detail-timestamps .detail-timestamp-separator"); }); it("keeps the canonical workflow badge owned by the timestamp group across breakpoints", () => { diff --git a/packages/dashboard/app/components/__tests__/TaskPlannerChatTab.test.tsx b/packages/dashboard/app/components/__tests__/TaskPlannerChatTab.test.tsx index e6391e4146..3c22153aab 100644 --- a/packages/dashboard/app/components/__tests__/TaskPlannerChatTab.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskPlannerChatTab.test.tsx @@ -110,6 +110,8 @@ describe("TaskPlannerChatTab", () => { const emptyState = await screen.findByTestId("task-planner-chat-empty"); expect(emptyState).toHaveTextContent("Start a task-aware chat"); + expect(document.querySelector(".task-planner-chat-header p")).toBeNull(); + expect(emptyState).toHaveTextContent("Ask planning questions about this task's current status, recent activity, blockers, next steps, or definition."); expect(emptyState).toHaveTextContent("Starter prompts send as normal chat messages."); expect(mockFetchTaskPlannerChatSession).toHaveBeenCalledWith( "FN-7310",