diff --git a/.changeset/vscode-subagent-spacing.md b/.changeset/vscode-subagent-spacing.md new file mode 100644 index 00000000000..7fe964ed86b --- /dev/null +++ b/.changeset/vscode-subagent-spacing.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Restore spacing between sub-agent output and the following user message in the VS Code chat. diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/chat/message-list-subagent-to-queued-user-spacing-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/chat/message-list-subagent-to-queued-user-spacing-chromium-linux.png new file mode 100644 index 00000000000..1353b857b46 --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/chat/message-list-subagent-to-queued-user-spacing-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:54c85aa9565b91d2a1f848e02d2b21883dc05cb57df92fd359df83c207995455 +size 10247 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png index e65ee419805..f1a5b97df59 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b57a543bd799f92b35d2c6037a4ffc932a37f59790213006a021bebef9e94b38 -size 6897 +oid sha256:4cb00b7e8e69e0e8d8c975b4ae119ebfcdea955247d0223dead873356044d1a2 +size 6940 diff --git a/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx index 0bc276128ed..ab948622393 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/chat.stories.tsx @@ -325,6 +325,110 @@ export const MessageListToolToQueuedUserSpacing: Story = { }, } +// --------------------------------------------------------------------------- +// MessageList — sub-agent (task tool) to queued user spacing +// Verifies the same vertical gap applies when the last assistant part is a +// sub-agent's expanded task tool, not just a regular tool like bash. +// --------------------------------------------------------------------------- + +const subUserID = "user-msg-subagent-spacing-001" +const subAssistantID = "asst-msg-subagent-spacing-001" +const subQueuedUserID = "user-msg-subagent-spacing-002" +const subChildSessionID = "story-session-child-subagent-001" +const subNow = 1_700_000_100_000 +const subagentSpacingMessages = [ + { + id: subUserID, + sessionID: SESSION_ID, + role: "user", + time: { created: subNow - 9000 }, + }, + { + id: subAssistantID, + sessionID: SESSION_ID, + role: "assistant", + parentID: subUserID, + time: { created: subNow - 8000 }, + modelID: "claude-sonnet-4-20250514", + providerID: "anthropic", + mode: "default", + agent: "default", + path: { cwd: "/project", root: "/project" }, + }, + { + id: subQueuedUserID, + sessionID: SESSION_ID, + role: "user", + time: { created: subNow - 1000 }, + }, +] +const subagentSpacingParts = { + [subUserID]: [ + { + id: "part-user-subagent-spacing-001", + sessionID: SESSION_ID, + messageID: subUserID, + type: "text", + text: "Delegate a search to a sub-agent so I can test the spacing.", + }, + ], + [subAssistantID]: [ + { + id: "part-task-subagent-spacing-001", + sessionID: SESSION_ID, + messageID: subAssistantID, + type: "tool", + callID: "call-task-subagent-spacing-001", + tool: "task", + state: { + status: "completed", + input: { description: "Find auth usage", subagent_type: "explore" }, + output: "done", + title: "Find auth usage", + metadata: { sessionId: subChildSessionID }, + time: { start: subNow - 7000, end: subNow - 6500 }, + }, + }, + ], + [subQueuedUserID]: [ + { + id: "part-user-subagent-spacing-002", + sessionID: SESSION_ID, + messageID: subQueuedUserID, + type: "text", + text: "continue", + }, + ], +} +const subagentSpacingData = { + ...defaultMockData, + message: { + [SESSION_ID]: subagentSpacingMessages, + [subChildSessionID]: [], + }, + part: subagentSpacingParts, +} + +export const MessageListSubagentToQueuedUserSpacing: Story = { + name: "MessageList — sub-agent to queued user spacing", + render: () => { + const session = { + ...mockSessionValue({ id: SESSION_ID, status: "idle" }), + messages: () => subagentSpacingMessages, + userMessages: () => subagentSpacingMessages.filter((msg) => msg.role === "user"), + } + return ( + + +
+ +
+
+
+ ) + }, +} + // --------------------------------------------------------------------------- // TaskHeader with todos // --------------------------------------------------------------------------- diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css index ffe3fdc35c0..c603bf80e97 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css +++ b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css @@ -178,13 +178,18 @@ VscodeSessionTurn layout ============================================ */ +/* Virtua positions turns absolutely based on measured box size, so flex `gap` + on `.message-list-content` can't add spacing between turns. Bake the gap + into the turn's own padding — it's included in the measured height and so + shows up as spacing between turns (e.g. tool output to queued user message, + including sub-agent task tools which expand inline). */ .vscode-session-turn { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; - padding: 0 4px; + padding: 0 4px 12px; } .vscode-session-turn-user {