salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): toggle tool call input YAML (#182)

Browse Source 
* feat(ui): toggle tool call input yaml

* ui: rename tool input toggle and add IO headers

* ui: add input/output accordions in tool calls

* ui: refine tool IO accordion styling

* ui: remove extra padding around IO sections

* ui: remove semibold from IO headers

* feat(ui): add tool input visibility preference

* fix(ui): scope tool input toggle to current tool call

* ui: left-align tool IO header text

* fix(ui): let palette tool input visibility override per-call

* ui: default tool input visibility to collapsed

* fix(ui): expand read tool calls on error

---------

Co-authored-by: Shantur Rathore <i@shantur.com>
This commit is contained in:
codenomadbot[bot]
2026-02-19 22:08:41 +00:00
committed by GitHub
parent e84adebe61
commit 9800afb785
19 changed files with 364 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -87,6 +87,7 @@
@apply flex items-stretch w-full;
background-color: transparent;
color: var(--text-primary);
border-bottom: 1px solid var(--tool-call-border-color);
}
.tool-call-header:hover {
@@ -127,11 +128,30 @@
cursor: pointer;
}
.tool-call-header-input {
@apply inline-flex items-center justify-center;
background-color: transparent;
border: none;
color: var(--text-secondary);
padding: 0 0.5rem;
border-radius: 0;
cursor: pointer;
}
.tool-call-header-copy:hover {
background-color: transparent;
color: var(--text-primary);
}
.tool-call-header-input:hover {
background-color: transparent;
color: var(--text-primary);
}
.tool-call-header-input[aria-pressed="true"] {
color: var(--text-primary);
}
.tool-call-header-status {
@apply inline-flex items-center justify-center;
font-size: 0.95rem;
@@ -213,6 +233,63 @@
font-size: var(--font-size-xs);
}
.tool-call-io-sections {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: 0;
}
.tool-call-io-section {
border: 1px solid var(--tool-call-border-color);
overflow: hidden;
background-color: transparent;
border-radius: 0;
}
.tool-call-io-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
padding: 0.5rem;
background-color: var(--surface-secondary);
border: none;
border-bottom: 1px solid var(--tool-call-border-color);
width: 100%;
text-align: left;
font-size: 0.875rem;
font-weight: normal;
color: var(--text-primary);
cursor: pointer;
}
.tool-call-io-toggle::before {
content: "▶";
font-size: 11px;
margin-right: 0.35rem;
color: var(--text-secondary);
}
.tool-call-io-toggle[aria-expanded="true"]::before {
content: "▼";
}
.tool-call-io-title {
font-weight: inherit;
color: inherit;
}
.tool-call-io-body {
background-color: var(--surface-code);
}
/* IO sections provide the outer frame; avoid double borders on markdown frames. */
.tool-call-io-body .tool-call-markdown {
border: none;
}
.tool-call-markdown {
background-color: var(--surface-code);
/* Keep a visible frame around the scroll viewport (not the content). */