Merge pull request #11357 from Kilo-Org/even-conifer

fix(vscode): show line numbers in edit approval diffs

.changeset/show-edit-approval-line-numbers.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Show line numbers in edit approval diffs, including compact sidebar views.

packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/permission-dock-apply-patch-chromium-linux.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c1b7ab570623823e73afbbf2ab7d6b66ab16d948405ef9ced0a012441b70301
-size 25148
+oid sha256:e872bc8ad05ad2a7ad1dd6de8a2ff427957fd278cee46940db0b12d84fe42ecf
+size 25534

packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/permission-dock-edit-chromium-linux.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ce6ad833325a582ca6a2107c94f007c589816c149179fa9b317f060980e5e4fa
-size 20250
+oid sha256:ff33e800f4d2379bcc997228a1e4dd83433521b931ae85edb7c8f0c4c93405e7
+size 20540

packages/kilo-ui/src/components/diff.tsx

@@ -223,7 +223,7 @@ export function Diff<T>(props: DiffProps<T>) {
     }
 
     const perf = large() ? { ...base, ...largeOptions } : base
-    if (!mobile()) return perf
+    if (!mobile() || props.disableLineNumbers === false) return perf
 
     return {
       ...perf,

packages/kilo-vscode/tests/permission-diff.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "@playwright/test"
+
+const STORY_ID = "composite-webview--permission-dock-edit"
+const GLOBALS = "colorScheme:dark;theme:kilo-vscode;vscodeTheme:dark-modern"
+
+test("edit approval diff shows line numbers in compact viewer", async ({ page }) => {
+  await page.setViewportSize({ width: 420, height: 720 })
+  await page.goto(`/iframe.html?id=${STORY_ID}&viewMode=story&globals=${GLOBALS}`, { waitUntil: "load" })
+
+  const number = page.locator('[data-slot="permission-diff-content"] [data-column-number]').first()
+  await expect(number).toBeVisible()
+})

packages/kilo-vscode/webview-ui/src/components/chat/PermissionDiff.tsx

@@ -76,7 +76,9 @@ export const PermissionDiff: Component<PermissionDiffProps> = (props) => {
           when={view()}
           fallback={<div data-slot="permission-diff-empty">Diff preview unavailable for this file.</div>}
         >
-          {(v) => <Diff fileDiff={v().fileDiff} diffStyle="unified" hunkSeparators="simple" />}
+          {(v) => (
+            <Diff fileDiff={v().fileDiff} diffStyle="unified" hunkSeparators="simple" disableLineNumbers={false} />
+          )}
         </Show>
       </div>
     </div>