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

fix(FN-7344): keep planner chat context expanded

Browse Source
This commit is contained in:
gsxdsm
2026-06-30 23:44:14 -07:00
parent 6005f89979
commit e37260b30c
5 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/planner-chat-expanded-context.md Normal file
View File

@@ -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.

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

@@ -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);

3
packages/dashboard/app/components/TaskPlannerChatTab.tsx
View File

@@ -503,7 +503,6 @@ export function TaskPlannerChatTab({ task, projectId, active, expanded = false,
<div className="task-planner-chat-header">
<div>
<h4>{t("taskDetail.plannerChat.heading", "Planner Chat")}</h4>
<p>{t("taskDetail.plannerChat.description", "Ask planning questions about this task's current status, recent activity, blockers, next steps, or definition.")}</p>
</div>
<div className="task-planner-chat-header-actions">
{isUsableModel(planningModel) && (
@@ -543,7 +542,7 @@ export function TaskPlannerChatTab({ task, projectId, active, expanded = false,
<div className="task-planner-chat-empty" data-testid="task-planner-chat-empty">
<div className="task-planner-chat-empty-copy">
<h5>{t("taskDetail.plannerChat.emptyTitle", "Start a task-aware chat")}</h5>
<p>{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.")}</p>
<p>{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.")}</p>
</div>
{starterPrompts.length > 0 && (
<div className="task-planner-chat-starters" aria-label={t("taskDetail.plannerChat.startersLabel", "Planner chat starter prompts")}>

20
packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx
View File

@@ -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", () => {

2
packages/dashboard/app/components/__tests__/TaskPlannerChatTab.test.tsx
View File

@@ -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",