mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-08-28 11:05:31 +08:00
Merge pull request #13366 from Kilo-Org/improve-context-button-consistency
fix(agent-manager): unify toolbar control heights and spacing
This commit is contained in:
Marius
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"kilo-code": patch
|
||||
---
|
||||
|
||||
Even out the Agent Manager toolbar: every context button now shares one height and spacing, and the Run, terminal, and new-session split buttons use identical chevrons, so the row stays tidy no matter which optional actions are shown.
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d1c6647a2cb4da318b9ec60761c248345c2a6fdc6e95a0dc5e03c31a939ace4c
|
||||
size 38950
|
||||
oid sha256:00088eaafbe9b65c5baf0eb1ce185a95da3e8492bf3c77a940f20d329ff93046
|
||||
size 39409
|
||||
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:99d1d6d5800ef76702c66ce586a3b99814f1f36f6fe4b65a1e2fa032f58ca8c8
|
||||
size 3231
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:1370f2dcf5c50258971e0665ea151f2c522f566619745d58d6a10f3914949e6c
|
||||
size 2521
|
||||
oid sha256:068076200f679e056b7e46cfd654071712bb93cd95a744cb58d49e0df5d23fd3
|
||||
size 2260
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b8af37e0c169811092437b71110c63571ae43c4d35e12f6890be8295a3cb67da
|
||||
size 4569
|
||||
oid sha256:ea702aacdc69e7e226fc2fa793ea1156e20b7b20f6ee919eab13269e9aac92c2
|
||||
size 4443
|
||||
|
||||
@@ -176,7 +176,7 @@ export const TabBar: Component<TabBarProps> = (props) => (
|
||||
const title = () => (configured() ? (active() ? "Stop" : "Run") : "Configure run script")
|
||||
return (
|
||||
<span
|
||||
class={`am-run-group ${active() ? "am-run-active" : ""} ${!configured() ? "am-run-unconfigured" : ""}`}
|
||||
class={`am-split-button am-run-group ${active() ? "am-run-active" : ""} ${!configured() ? "am-run-unconfigured" : ""}`}
|
||||
>
|
||||
<TooltipKeybind title={title()} keybind={props.bindings().runScript ?? ""} placement="bottom">
|
||||
<Button
|
||||
@@ -197,18 +197,9 @@ export const TabBar: Component<TabBarProps> = (props) => (
|
||||
</Button>
|
||||
</TooltipKeybind>
|
||||
<DropdownMenu gutter={4} placement="bottom-end">
|
||||
<DropdownMenu.Trigger
|
||||
as={(p: Record<string, unknown>) => (
|
||||
<IconButton
|
||||
{...p}
|
||||
icon="chevron-down"
|
||||
size="small"
|
||||
variant="ghost"
|
||||
label={props.t("agentManager.run.options")}
|
||||
class="am-run-group-chevron"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<DropdownMenu.Trigger class="am-split-arrow" aria-label={props.t("agentManager.run.options")}>
|
||||
<Icon name="chevron-down" size="small" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content class="am-split-menu">
|
||||
<DropdownMenu.Item
|
||||
|
||||
@@ -863,22 +863,11 @@ html[data-theme="kilo-vscode"]
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar Run button group */
|
||||
.am-run-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.am-run-group-chevron {
|
||||
padding: 0 2px !important;
|
||||
min-width: 0 !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.am-run-group-chevron [data-component="icon"] {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
/* Toolbar Run button group — split layout comes from .am-split-button.
|
||||
The label button tightens its right edge so the chevron sits as close
|
||||
to the label as it does to the icon in the other split buttons. */
|
||||
.am-run-group [data-component="button"][data-size="small"] {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
/* Unconfigured — muted until hover */
|
||||
@@ -1685,17 +1674,28 @@ body.am-wt-dragging-active * {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Toolbar actions row. Spacing comes only from the container gap so the
|
||||
row stays even no matter which optional buttons (PR, documents,
|
||||
subagents, review) are rendered. */
|
||||
.am-tab-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
margin-left: auto;
|
||||
padding-left: 6px;
|
||||
padding-left: 8px;
|
||||
padding-right: 4px;
|
||||
border-left: 1px solid var(--border-weak-base);
|
||||
}
|
||||
|
||||
/* One control height for the row: text buttons (Run, Apply, Open) match
|
||||
the 20px icon buttons so hover fills align across every combination
|
||||
of visible actions. */
|
||||
.am-tab-actions [data-component="button"][data-size="small"] {
|
||||
height: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.am-sidebar-search-popover[data-component="popover-content"] {
|
||||
max-height: min(480px, calc(100vh - 64px));
|
||||
}
|
||||
@@ -1823,8 +1823,9 @@ body.am-wt-dragging-active * {
|
||||
background: transparent;
|
||||
color: var(--text-weak);
|
||||
cursor: pointer;
|
||||
padding: 3px 6px;
|
||||
border-radius: 5px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: var(--kilo-font-size-10);
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -1836,7 +1837,7 @@ body.am-wt-dragging-active * {
|
||||
}
|
||||
|
||||
.am-diff-toggle-btn:hover {
|
||||
background: var(--button-ghost-hover, var(--surface-base-hover));
|
||||
background: var(--surface-base-hover);
|
||||
color: var(--text-base);
|
||||
}
|
||||
|
||||
@@ -2768,7 +2769,7 @@ body.am-wt-dragging-active * {
|
||||
.am-split-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.am-split-arrow {
|
||||
@@ -2776,7 +2777,8 @@ body.am-wt-dragging-active * {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
@@ -972,6 +972,71 @@ export const TabBarSingleTab: Story = {
|
||||
),
|
||||
}
|
||||
|
||||
const MockFullContextActions = () => (
|
||||
<div class="am-tab-actions">
|
||||
<span class="am-split-button am-run-group">
|
||||
<TooltipKeybind title="Run" keybind="⌘R" placement="bottom">
|
||||
<Button size="small" variant="ghost" icon="play">
|
||||
Run
|
||||
</Button>
|
||||
</TooltipKeybind>
|
||||
<button class="am-split-arrow" aria-label="Run options">
|
||||
<Icon name="chevron-down" size="small" />
|
||||
</button>
|
||||
</span>
|
||||
<TooltipKeybind title="Pull request" keybind="" placement="bottom">
|
||||
<IconButton icon="pull-request" size="small" variant="ghost" label="Pull request" />
|
||||
</TooltipKeybind>
|
||||
<TooltipKeybind title="Documents" keybind="" placement="bottom">
|
||||
<IconButton icon="book-open-check" size="small" variant="ghost" label="Documents" />
|
||||
</TooltipKeybind>
|
||||
<TooltipKeybind title="Subagents" keybind="" placement="bottom">
|
||||
<IconButton icon="task" size="small" variant="ghost" label="Subagents" />
|
||||
</TooltipKeybind>
|
||||
<TooltipKeybind title="Toggle diff" keybind="" placement="bottom">
|
||||
<button class="am-diff-toggle-btn am-diff-toggle-has-changes" title="Toggle diff">
|
||||
<Icon name="layers" size="small" />
|
||||
<span class="am-diff-toggle-stats">
|
||||
<span class="am-stat-files">4f</span>
|
||||
<span class="am-stat-additions">+32</span>
|
||||
<span class="am-stat-deletions">−8</span>
|
||||
</span>
|
||||
</button>
|
||||
</TooltipKeybind>
|
||||
<TooltipKeybind title="Toggle review" keybind="" placement="bottom">
|
||||
<IconButton icon="expand" size="small" variant="ghost" label="Toggle review" />
|
||||
</TooltipKeybind>
|
||||
<div class="am-split-button">
|
||||
<TooltipKeybind title="Open Terminal" keybind="" placement="bottom">
|
||||
<IconButton icon="console" size="small" variant="ghost" label="Open Terminal" />
|
||||
</TooltipKeybind>
|
||||
<button class="am-split-arrow" aria-label="Choose terminal destination">
|
||||
<Icon name="chevron-down" size="small" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const TabBarFullContext: Story = {
|
||||
name: "TabBar — all optional context actions",
|
||||
render: () => (
|
||||
<StoryProviders noPadding>
|
||||
<div class="am-tab-bar">
|
||||
<MockTabLeading />
|
||||
<div class="am-tab-scroll-area">
|
||||
<div class="am-tab-list-wrap">
|
||||
<div class="am-tab-list" style={{ "--tab-count": "1" } as JSX.CSSProperties}>
|
||||
<MockTab title="Full context" active />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MockTabAdd />
|
||||
<MockFullContextActions />
|
||||
</div>
|
||||
</StoryProviders>
|
||||
),
|
||||
}
|
||||
|
||||
// Side terminal panel inside the real inspector host chain, empty state —
|
||||
// no live PTY, so the start affordance renders. The tab strip header keeps
|
||||
// the .am-diff-header height so the a11y/screenshot baseline also guards
|
||||
|
||||
Reference in New Issue
Block a user