From f995fe092c89bee19e566a5e1c2bccbc4e5deb9a Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Tue, 14 Apr 2026 17:40:11 +0200 Subject: [PATCH 1/4] fix(vscode): add missing space between 'Modified' and file count in diff summary --- .../src/components/chat/VscodeSessionTurn.tsx | 2 +- .../src/stories/composite.stories.tsx | 71 +++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/VscodeSessionTurn.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/VscodeSessionTurn.tsx index 7c19bb7c91..517efcff34 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/VscodeSessionTurn.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/VscodeSessionTurn.tsx @@ -196,7 +196,7 @@ export const VscodeSessionTurn: Component = (props) => {
- {i18n.t("ui.sessionReview.change.modified")} + {i18n.t("ui.sessionReview.change.modified")}{" "} {diffs().length} {i18n.t(diffs().length === 1 ? "ui.common.file.one" : "ui.common.file.other")} diff --git a/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx index a9f897e6c3..334b9cbea9 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/composite.stories.tsx @@ -11,10 +11,12 @@ import type { Meta, StoryObj } from "storybook-solidjs-vite" import type { AssistantMessage as SDKAssistantMessage, TextPart, ToolPart } from "@kilocode/sdk/v2" import { StoryProviders, defaultMockData, mockSessionValue } from "./StoryProviders" import { AssistantMessage } from "../components/chat/AssistantMessage" +import { VscodeSessionTurn } from "../components/chat/VscodeSessionTurn" import { ChatView } from "../components/chat/ChatView" import { Part } from "@kilocode/kilo-ui/message-part" import { registerVscodeToolOverrides } from "../components/chat/VscodeToolOverrides" import { SessionContext } from "../context/session" +import { ServerContext } from "../context/server" import type { PermissionRequest, QuestionRequest } from "../types/messages" // Register VS Code tool overrides (bash expanded by default, etc.) @@ -977,3 +979,72 @@ export const McpToolExpanded: Story = { ) }, } + +// --------------------------------------------------------------------------- +// 19. Diff summary — "Modified N files" collapsed header +// --------------------------------------------------------------------------- + +const USER_MSG_ID = "user-msg-diff-001" + +const mockDiffs = [ + { file: "src/components/App.tsx", before: "", after: "", additions: 12, deletions: 3, status: "modified" as const }, + { file: "src/utils/helpers.ts", before: "", after: "", additions: 5, deletions: 8, status: "modified" as const }, + { file: "src/styles/main.css", before: "", after: "", additions: 20, deletions: 0, status: "added" as const }, +] + +export const DiffSummaryCollapsed: Story = { + name: "Diff Summary — Modified N files (collapsed)", + render: () => { + const data = { + ...defaultMockData, + message: { + [SESSION_ID]: [ + { + id: USER_MSG_ID, + sessionID: SESSION_ID, + role: "user", + time: { created: now - 10000 }, + summary: { diffs: mockDiffs }, + }, + { ...baseAssistantMessage, parentID: USER_MSG_ID }, + ], + }, + part: { + [USER_MSG_ID]: [ + { id: "part-user-text", sessionID: SESSION_ID, messageID: USER_MSG_ID, type: "text", text: "Fix the bug" }, + ], + [ASST_MSG_ID]: [textPart], + }, + } + const session = { + ...mockSessionValue({ id: SESSION_ID, status: "idle" }), + messages: () => data.message[SESSION_ID], + } + const server = { + connectionState: () => "connected" as const, + serverInfo: () => undefined, + extensionVersion: () => "1.0.0", + errorMessage: () => undefined, + errorDetails: () => undefined, + isConnected: () => true, + profileData: () => null, + deviceAuth: () => ({ status: "idle" as const }), + startLogin: () => {}, + vscodeLanguage: () => "en", + languageOverride: () => undefined, + workspaceDirectory: () => "/project", + gitInstalled: () => true, + } + return ( + + + +
+ +
+ + + + ) + }, +} From 749337f75df589c715765f2159cbc20fbb601c86 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 14 Apr 2026 15:44:03 +0000 Subject: [PATCH 2/4] chore: update kilo-vscode visual regression baselines --- .../diff-summary-collapsed-chromium-linux.png | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png 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 new file mode 100644 index 0000000000..e65ee41980 --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/diff-summary-collapsed-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b57a543bd799f92b35d2c6037a4ffc932a37f59790213006a021bebef9e94b38 +size 6897 From 4b66a9ccadb41d7ef4edc7ab6276b23300a87a68 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Tue, 14 Apr 2026 17:45:21 +0200 Subject: [PATCH 3/4] fix(vscode): make diff summary title inline with flexbox so bars render on same line --- packages/kilo-vscode/webview-ui/src/styles/chat-layout.css | 6 ++++++ 1 file changed, 6 insertions(+) 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 cf74d06fef..e8dba566ed 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css +++ b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css @@ -176,3 +176,9 @@ .vscode-session-turn-diffs { width: 100%; } + +.vscode-session-turn-diffs [data-slot="session-turn-diffs-title"] { + display: flex; + align-items: center; + gap: 6px; +} From 37c1ff2d6552a91922fbf82933f0e4ef0896e873 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Tue, 14 Apr 2026 17:55:44 +0200 Subject: [PATCH 4/4] fix(vscode): align diff bars to text baseline in diff summary header --- packages/kilo-vscode/webview-ui/src/styles/chat-layout.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e8dba566ed..ba6545819a 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css +++ b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css @@ -179,6 +179,6 @@ .vscode-session-turn-diffs [data-slot="session-turn-diffs-title"] { display: flex; - align-items: center; + align-items: baseline; gap: 6px; }