diff --git a/.changeset/agent-manager-tab-add-button.md b/.changeset/agent-manager-tab-add-button.md new file mode 100644 index 00000000000..93098cacf85 --- /dev/null +++ b/.changeset/agent-manager-tab-add-button.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Keep the Agent Manager new-tab button visible at the end of the tab row, separated by a divider, and show all tab tooltips above the tabs. diff --git a/.changeset/agent-manager-tab-controls.md b/.changeset/agent-manager-tab-controls.md new file mode 100644 index 00000000000..8d9b184dd1e --- /dev/null +++ b/.changeset/agent-manager-tab-controls.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Move Agent Manager tab creation and search controls to the left side of the tab bar with clearer toolbar separators. diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-multiple-tabs-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-multiple-tabs-chromium-linux.png index d6b7e3dee6e..6ab79b4689a 100644 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-multiple-tabs-chromium-linux.png +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-multiple-tabs-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:483e73147bed34050ee35e60607c33c04d7e726b8f746921ad27e582cb5b19ee -size 2886 +oid sha256:b7ec87f1e046cf1a44688b952c0d994899119c6663bf627026688bf337b56127 +size 2411 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-single-tab-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-single-tab-chromium-linux.png index fe9ea053966..905e28d6b85 100644 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-single-tab-chromium-linux.png +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-single-tab-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3b4687ed34fe06adb7e72797798b1f3602c225e9a36223842ea1c66eebea4601 -size 4794 +oid sha256:7ee0856c65e445a230cf3e94bfe592c98306b7502e44a2602b5fac2f6d69937a +size 4601 diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-with-review-tab-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-with-review-tab-chromium-linux.png index e3f811c4397..83fda13fbb4 100644 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-with-review-tab-chromium-linux.png +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/tab-bar-with-review-tab-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:980c9baf0edafa113956157a34eb00495aff55293b10fb4cbb86a8cb5b28e8c0 -size 2865 +oid sha256:f1ee2d880a055b03664d594598a6e8764ab27d443a578572fd01b37451cb0193 +size 3193 diff --git a/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx b/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx index 105073bb565..71477796778 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx @@ -2646,6 +2646,16 @@ const AgentManagerContent: Component = () => {
+
+ +
@@ -2688,6 +2698,12 @@ const AgentManagerContent: Component = () => {
+
+
+
+ +
+
{renderNewTabButton({ contextSelected: () => selection() !== null, kb, @@ -2699,17 +2715,8 @@ const AgentManagerContent: Component = () => { onNewTerminal: () => termHandlers.requestNew(), })}
-
-
+
- {(() => { const sel = () => selection() const isWorktree = () => typeof sel() === "string" && sel() !== LOCAL diff --git a/packages/kilo-vscode/webview-ui/agent-manager/CurrentTabsMenu.tsx b/packages/kilo-vscode/webview-ui/agent-manager/CurrentTabsMenu.tsx index 7dd919fb367..cc09f7a5f1f 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/CurrentTabsMenu.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/CurrentTabsMenu.tsx @@ -231,13 +231,13 @@ export const CurrentTabsMenu: Component = (props) => { return ( + diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css index 0e967a37054..909688ed72d 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css +++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css @@ -1028,10 +1028,19 @@ button.am-section-toggle:hover .am-section-label { border-bottom: 1px solid var(--border-weak-base); background: var(--surface-base); height: 36px; - padding: 0 4px; flex-shrink: 0; } +.am-tab-leading { + display: flex; + align-items: center; + gap: 2px; + flex-shrink: 0; + align-self: stretch; + padding: 0 4px; + border-right: 1px solid var(--border-weak-base); +} + .am-tab-list { --am-tab-max-width: 240px; --am-tab-width: clamp(72px, calc(100% / var(--tab-count, 1)), var(--am-tab-max-width)); @@ -1050,7 +1059,6 @@ button.am-section-toggle:hover .am-section-label { .am-tab-list-wrap { display: flex; align-items: stretch; - gap: 4px; min-width: 0; flex: 0 1 auto; max-width: 100%; @@ -1066,12 +1074,29 @@ button.am-section-toggle:hover .am-section-label { position: relative; display: flex; min-width: 0; - flex: 1 1 auto; + flex: 0 1 auto; align-items: stretch; height: 100%; overflow: hidden; } +/* Fixed add-button area after the scrollable tab list */ +.am-tab-add-wrap { + display: flex; + align-items: center; + flex-shrink: 0; + align-self: stretch; + padding-right: 4px; +} + +.am-tab-add-separator { + width: 1px; + align-self: stretch; + margin-right: 4px; + background: var(--border-weak-base); + flex-shrink: 0; +} + /* Fade indicators for overflow */ .am-tab-fade { position: absolute; @@ -1109,18 +1134,21 @@ button.am-section-toggle:hover .am-section-label { font-size: var(--kilo-font-size-12); cursor: pointer; white-space: nowrap; - border: none; - border-bottom: 2px solid transparent; + border: 1px solid transparent; + border-bottom-width: 2px; + border-radius: 0; min-width: 0; width: 100%; height: 100%; transition: - background-color 120ms ease, + background 120ms ease, border-color 120ms ease, color 120ms ease; } -.am-tab:hover { +.am-tab:hover, +.am-tab:focus-visible { + background: var(--button-ghost-hover, var(--surface-base-hover, rgba(128, 128, 128, 0.2))); color: var(--text-base); } @@ -1151,6 +1179,24 @@ button.am-section-toggle:hover .am-section-label { white-space: nowrap; } +.am-tab-title { + display: flex; + align-items: center; + gap: 5px; + min-width: 0; + width: 100%; +} + +.am-tab-tooltip[data-component="tooltip-trigger"] { + display: flex; + align-items: center; + min-width: 0; + height: 100%; + flex: 1; + padding-right: 27px; + margin-right: -27px; +} + .am-tab-close-wrap { display: inline-flex; align-items: center; @@ -1160,6 +1206,8 @@ button.am-section-toggle:hover .am-section-label { flex-shrink: 0; opacity: 0; pointer-events: none; + position: relative; + z-index: 1; transition: opacity 100ms ease; } @@ -1211,6 +1259,11 @@ button.am-section-toggle:hover .am-section-label { width: 100%; } +.am-tab-sortable > .am-tab, +.am-tab-sortable > [data-slot="context-menu-trigger"] > .am-tab { + height: 100%; +} + .am-tab-dragging { opacity: 0.25; } @@ -1273,7 +1326,6 @@ body.am-wt-dragging-active * { .am-tab-add-split { flex-shrink: 0; align-self: center; - margin-right: 2px; } .am-tab-actions { @@ -1281,8 +1333,11 @@ body.am-wt-dragging-active * { align-items: center; gap: 2px; flex-shrink: 0; + align-self: stretch; margin-left: auto; + padding-left: 6px; padding-right: 4px; + border-left: 1px solid var(--border-weak-base); } .am-tabs-menu-trigger { diff --git a/packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts b/packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts index 6144f668548..082a29d9a91 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts +++ b/packages/kilo-vscode/webview-ui/agent-manager/i18n/en.ts @@ -53,7 +53,7 @@ export const dict = { "agentManager.tab.terminal": "Terminal", "agentManager.tab.openTerminal": "Open Terminal", "agentManager.tab.newOptions": "More new-tab options", - "agentManager.tabsMenu.label": "Search open tabs", + "agentManager.tabsMenu.label": "Search and switch tabs", "agentManager.tabsMenu.search": "Search tabs...", "agentManager.tabsMenu.empty": "No matching tabs", "agentManager.tabsMenu.status.waiting": "Wait", diff --git a/packages/kilo-vscode/webview-ui/agent-manager/sortable-tab.tsx b/packages/kilo-vscode/webview-ui/agent-manager/sortable-tab.tsx index a42ac1bead1..b091952f615 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/sortable-tab.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/sortable-tab.tsx @@ -66,45 +66,49 @@ export const SortableTab: Component<{ > - -
- - - - - - {props.tab.title || t("agentManager.session.untitled")} - - { - e.stopPropagation() - props.onClose() - }} - /> - -
-
+ + + + + + + {props.tab.title || t("agentManager.session.untitled")} + + + + { + e.stopPropagation() + props.onClose() + }} + /> + +
@@ -156,40 +160,44 @@ export const SortableReviewTab: Component<{ class={`am-tab-sortable ${sortable.isActiveDraggable ? "am-tab-dragging" : ""}`} data-tab-id={props.id} > - -
- - + + + + + {props.label} - {props.label} - - - -
-
+ + + + +
) } diff --git a/packages/kilo-vscode/webview-ui/agent-manager/tab-rendering.tsx b/packages/kilo-vscode/webview-ui/agent-manager/tab-rendering.tsx index 5c3cc24ecd3..9271a274d7c 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/tab-rendering.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/tab-rendering.tsx @@ -174,7 +174,13 @@ export function renderNewTabButton(deps: NewTabButtonDeps): JSX.Element { return (
- + - -
- - + + + + + {props.label} - {props.label} - - - -
-
+
+ + + +
diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index be7472ac342..e1f5d2dca22 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx @@ -563,11 +563,38 @@ const MockReviewTab = (props: { active?: boolean }) => (
) +const MockTabsSearchButton = () => ( + +) + +const MockTabLeading = () => ( +
+ +
+) + +const MockTabAdd = () => ( +
+
+
+ + + +
+
+) + export const TabBarMultipleTabs: Story = { name: "TabBar — multiple tabs with active", render: () => (
+
@@ -575,13 +602,9 @@ export const TabBarMultipleTabs: Story = {
-
- - - -
+