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

FN-8029: compact task live-log thinking blocks

Browse Source 
Make task live-log thinking blocks more compact while retaining readable expanded reasoning.

- Reduce desktop and mobile thinking container padding.
- Tighten thinking summaries and bodies with tokenized spacing.
- Update CSS regression assertions for compact thinking blocks.

Files changed:
 packages/dashboard/app/components/TaskChatTab.css  | 34 ++++++++++++++++------
 .../app/components/__tests__/TaskChatTab.test.tsx  | 28 +++++++++---------
 2 files changed, 40 insertions(+), 22 deletions(-)

Fusion-Task-Id: FN-8029

Fusion-Task-Lineage: fd9a9443-3a01-48ce-b965-227104404a79

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-15 19:47:37 -07:00
parent 753b1bb710
commit d4553be678
2 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/dashboard/app/components/TaskChatTab.css
View File

@@ -254,28 +254,37 @@ FN-7207 makes the right-side dock and narrow desktop detail hosts use the same r
}
}
.task-chat-tool-group,
.task-chat-thinking {
.task-chat-tool-group {
box-sizing: border-box;
min-width: 0;
padding: var(--space-md);
border: var(--btn-border-width) solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface) 35%, transparent);
color: var(--text);
overflow-wrap: anywhere;
}
/*
FNXC:TaskChat 2026-07-15-11:00:
FN-8029 keeps collapsed thinking blocks compact like tool-call summaries by using smaller container and summary padding. Preserve tokenized inner-body padding so expanded reasoning remains comfortably readable.
*/
.task-chat-thinking {
box-sizing: border-box;
min-width: 0;
padding: var(--space-sm);
border: var(--btn-border-width) solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
color: var(--text);
overflow-wrap: anywhere;
}
.task-chat-tool-group {
background: color-mix(in srgb, var(--surface) 35%, transparent);
}
.task-chat-tool-group-summary,
.task-chat-thinking-summary {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
list-style: none;
}
@@ -348,7 +357,6 @@ FN-7240 raises the FN-7225 follow-up tool-call typography to the readable base s
.task-chat-thinking-body {
display: flex;
flex-direction: column;
padding: 0 var(--space-md) var(--space-md);
}
.task-chat-tool-group-entries {
@@ -356,6 +364,10 @@ FN-7240 raises the FN-7225 follow-up tool-call typography to the readable base s
padding: 0 var(--space-xs) var(--space-xs);
}
.task-chat-thinking-body {
padding: 0 var(--space-sm) var(--space-sm);
}
.task-chat-tool-entry {
box-sizing: border-box;
min-width: 0;
@@ -378,6 +390,7 @@ FN-7240 raises the FN-7225 follow-up tool-call typography to the readable base s
}
.task-chat-thinking-summary {
padding: var(--space-xs);
color: var(--color-warning);
font-weight: 600;
}
@@ -604,11 +617,14 @@ FN-6660 corrects the repeated mobile sizing misses from FN-6507, FN-6604, and FN
}
.task-chat-entry,
.task-chat-tool-group,
.task-chat-thinking {
.task-chat-tool-group {
padding: var(--space-sm);
}
.task-chat-thinking {
padding: var(--space-xs);
}
.task-chat-tool-group-summary {
align-items: center;
flex-direction: row;

28
packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx
View File

@@ -2775,14 +2775,15 @@ describe("TaskChatTab", () => {
const toolSummaryRule = getCssRuleBlock(getCssAfter(css, "FN-7215 aligns task-detail tool-call summaries"), ".task-chat-tool-group-summary");
const toolEntriesRule = getCssRuleBlock(getCssAfter(css, ".task-chat-tool-group-entries {\n gap"), ".task-chat-tool-group-entries");
const toolEntryRule = getCssRuleBlock(css, ".task-chat-tool-entry");
const thinkingRule = getCssRuleBlock(css, ".task-chat-thinking");
const thinkingBodyRule = getCssRuleBlock(css, ".task-chat-thinking-body");
const thinkingBaseRule = getCssRuleBlock(css, ".task-chat-thinking");
const compactThinkingCss = getCssAfter(css, "FN-8029 keeps collapsed thinking blocks compact");
const thinkingRule = getCssRuleBlock(compactThinkingCss, ".task-chat-thinking");
const thinkingSummaryRule = getCssRuleBlock(getCssAfter(css, ".task-chat-thinking {\n border-color"), ".task-chat-thinking-summary");
const thinkingBodyRule = getCssRuleBlock(getCssAfter(css, ".task-chat-tool-group-entries {\n gap: var(--space-xs);\n padding: 0 var(--space-xs) var(--space-xs);\n}"), ".task-chat-thinking-body");
const toolDetailRule = getCssRuleBlock(getCssAfter(css, ".task-chat-tool-detail {"), ".task-chat-tool-detail");
const mobileCss = getCssAfter(css, "@media (max-width: 768px)");
const mobileBlockPaddingCss = getCssAfter(mobileCss, ".task-chat-entry,\n .task-chat-tool-group,\n .task-chat-thinking");
const mobileEntryRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-entry");
const mobileToolGroupRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-tool-group");
const mobileThinkingRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-thinking");
const mobileStandardBlockRule = getCssRuleBlock(mobileCss, ".task-chat-entry,\n .task-chat-tool-group");
const mobileThinkingRule = getCssRuleBlock(getCssAfter(mobileCss, ".task-chat-thinking {\n padding"), ".task-chat-thinking");
const mobileToolEntryRule = getCssRuleBlock(mobileCss, ".task-chat-tool-entry");
expect(entryRule).toContain("box-sizing: border-box");
@@ -2790,20 +2791,21 @@ describe("TaskChatTab", () => {
expect(userRule).not.toContain("padding");
expect(toolGroupRule).toContain("box-sizing: border-box");
expect(toolGroupRule).toContain("padding: var(--space-md)");
expect(thinkingRule).toContain("box-sizing: border-box");
expect(thinkingRule).toContain("padding: var(--space-md)");
expect(thinkingBaseRule).toContain("box-sizing: border-box");
expect(thinkingRule).toContain("padding: var(--space-sm)");
expect(thinkingRule).not.toContain("padding: var(--space-md)");
expect(thinkingSummaryRule).toContain("padding: var(--space-xs)");
expect(toolSummaryRule).toContain("padding: var(--space-xs)");
expect(toolEntriesRule).toContain("padding: 0 var(--space-xs) var(--space-xs)");
expect(thinkingBodyRule).toContain("padding: 0 var(--space-md) var(--space-md)");
expect(thinkingBodyRule).toContain("padding: 0 var(--space-sm) var(--space-sm)");
expect(toolEntryRule).toContain("box-sizing: border-box");
expect(toolEntryRule).toContain("padding: var(--space-sm)");
expect(toolDetailRule).toContain("box-sizing: border-box");
expect(toolDetailRule).toContain("padding: var(--space-xs)");
expect(mobileEntryRule).toContain("padding: var(--space-sm)");
expect(mobileToolGroupRule).toContain("padding: var(--space-sm)");
expect(mobileThinkingRule).toContain("padding: var(--space-sm)");
expect(mobileStandardBlockRule).toContain("padding: var(--space-sm)");
expect(mobileThinkingRule).toContain("padding: var(--space-xs)");
expect(mobileToolEntryRule).toContain("padding: var(--space-xs)");
for (const rule of [entryRule, toolGroupRule, toolEntryRule, thinkingRule, toolDetailRule, mobileEntryRule]) {
for (const rule of [entryRule, toolGroupRule, toolEntryRule, thinkingBaseRule, thinkingRule, thinkingSummaryRule, toolDetailRule, mobileStandardBlockRule, mobileThinkingRule]) {
expect(rule).not.toContain("px");
expect(rule).not.toContain("#");
}