opensource/kilocode
3
0
Fork 0
mirror of https://github.com/Kilo-Org/kilocode.git synced 2026-09-19 10:02:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): unify tool card arrow direction and header consistency (#7177)

Browse Source 
* fix(ui): unify tool card arrow direction and header consistency

* chore: update visual regression baselines

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Marius
2026-03-17 13:55:57 +01:00
committed by GitHub
co-authored by github-actions[bot]
parent f1d10f892f
commit d7aaee5e88
6 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/kilo-ui/src/components/basic-tool.css
+9
View File
@@ -73,12 +73,21 @@ html[data-theme="kilo-vscode"] [data-component="tool-part-wrapper"][data-part-ty
padding: 0 8px;
height: 36px;
background-color: var(--surface-inset-base, var(--vscode-sideBar-background));
&:hover {
background-color: var(--surface-inset-base-hover, var(--vscode-list-hoverBackground));
}
}
[data-slot="collapsible-trigger"][aria-expanded="true"] {
border-bottom: 1px solid var(--border-weak-base, var(--vscode-panel-border));
}
/* Arrow always visible (no fade-on-hover) */
[data-slot="collapsible-arrow"] {
opacity: 1;
}
/* Arrow: DOWN when collapsed, UP when expanded (matches question-dock toggle) */
[data-slot="collapsible-arrow-icon"] {
transform: translateZ(0) rotate(0deg);
packages/kilo-ui/src/components/collapsible.css
+11
View File
@@ -5,3 +5,14 @@
cursor: pointer;
}
}
/* VS Code theme: tool-collapsible arrows point DOWN (collapsed) and UP (expanded), never right */
html[data-theme="kilo-vscode"] [data-component="collapsible"].tool-collapsible {
[data-slot="collapsible-arrow-icon"] {
transform: translateZ(0) rotate(0deg);
}
[data-slot="collapsible-trigger"][aria-expanded="true"] [data-slot="collapsible-arrow-icon"] {
transform: translateZ(0) rotate(180deg);
}
}
packages/kilo-ui/src/components/message-part.css
+5 -1
View File
@@ -139,12 +139,16 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] {
}
[data-slot="collapsible-trigger"] {
height: 28px;
height: 36px;
padding: 0 8px;
gap: 6px;
background: var(--surface-inset-base);
border-radius: 0;
cursor: pointer;
&:hover {
background-color: var(--surface-inset-base-hover, var(--vscode-list-hoverBackground));
}
}
[data-slot="reasoning-header"] {
packages/kilo-ui/src/components/message-part.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props: MessagePartProp
return (
<Show when={text()}>
<div data-component="reasoning-part">
<Collapsible open={open()} onOpenChange={setOpen}>
<Collapsible open={open()} onOpenChange={setOpen} class="tool-collapsible">
<Collapsible.Trigger>
<div data-slot="reasoning-header">
<Icon name="brain" size="small" />
packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/with-reasoning-collapsed-chromium-linux.png
+2 -2
View File
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:cf93ca79d15deab7dc52473f68305b521c62d10e968a9258e09609ad9c04fde6
size 15837
oid sha256:67cb95242834a2ac3633b70a68a8ff9a9f343938092f06926a44639ba5c01121
size 15968
packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/with-reasoning-expanded-chromium-linux.png
+2 -2
View File
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:14bf991adcbc6fcbf53f4cff2275dcec255943b5545c624231aeb73529ca2d6e
size 32478
oid sha256:6d93bf6465c33895aa54bc2479315ea2fba38d06488f3d7cdf868b60caaefd9e
size 32623