b8f7f9e75c
Standardize expandable tool-call payloads across dashboard chat and log surfaces. - Add a shared formatter and detail renderer that preserves complete browser-available arguments and results. - Use compact previews with wrapped, scrollable expanded payloads in chat, activity, and agent logs. - Cover formatting and rendering behavior with dashboard tests and document the display contract. Files changed: .changeset/fn-8701-tool-call-display.md | 7 ++ docs/dashboard-guide.md | 4 +- .../dashboard/app/components/AgentLogViewer.tsx | 12 +++- packages/dashboard/app/components/ChatView.css | 37 ++--------- .../app/components/StandardChatSurface.tsx | 56 +++++++--------- packages/dashboard/app/components/TaskChatTab.css | 17 ----- packages/dashboard/app/components/TaskChatTab.tsx | 31 +++++---- .../dashboard/app/components/ToolCallDetails.css | 52 +++++++++++++++ .../dashboard/app/components/ToolCallDetails.tsx | 77 ++++++++++++++++++++++ .../__tests__/AgentLogViewer.rendering.test.tsx | 8 +++ .../components/__tests__/ChatView.core.test.tsx | 24 +++++++ .../app/components/__tests__/TaskChatTab.test.tsx | 33 +++++++--- .../__tests__/TaskPlannerChatTab.test.tsx | 19 ++++++ 13 files changed, 275 insertions(+), 102 deletions(-) Fusion-Task-Id: FN-8701 Fusion-Task-Lineage: 86513f9a-31d4-45fb-97fe-1f0c73d0e5b3 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
53 lines
1.2 KiB
CSS
53 lines
1.2 KiB
CSS
/*
|
|
FNXC:ToolCallDisplay 2026-08-01-15:39:
|
|
FN-8701 requires one responsive presentation for complete available tool payloads. Preserve
|
|
newlines, wrap normal paths and prose, and contain unavoidable long tokens without widening chat
|
|
or log surfaces beyond the viewport.
|
|
*/
|
|
.tool-call-details {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.tool-call-details-row {
|
|
display: grid;
|
|
min-width: 0;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--space-xs);
|
|
align-items: start;
|
|
}
|
|
|
|
.tool-call-details-label {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tool-call-details-value {
|
|
min-width: 0;
|
|
max-inline-size: 100%;
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-family: var(--font-mono, monospace);
|
|
font-size: var(--font-size-xs);
|
|
overflow-wrap: anywhere;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.tool-call-details-row--error {
|
|
padding: var(--space-xs);
|
|
border-radius: var(--radius-sm);
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.tool-call-details-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|