From 72a2963f1de8458259d1a72b5566c5f99974fb09 Mon Sep 17 00:00:00 2001 From: Imanol Maiztegui Date: Sat, 14 Mar 2026 20:48:47 +0100 Subject: [PATCH] Permission prompt style improvements (#7050) * feat(kilo-vscode): Removed check-all icon * fix(kilo-vscode): reorder permission buttons and left-align actions * fix(kilo-vscode): simplify permission text display * style(kilo-vscode): move permission rules chevron next to label * fix(kilo-vscode): wrap permission action buttons on narrow viewports * style(kilo-vscode): match permission warning icon size to tool icons * style(kilo-vscode): left-align permission session hint text * style(kilo-vscode): move pattern toggle buttons to left of text * fix(kilo-vscode): remove permission session hint text and unused styles * style(kilo-vscode): align pattern toggle icons with permission rules chevron * chore(kilo-vscode): typecheck * chore: update kilo-vscode visual regression baselines * chore(kilo-vscode): Formatting --------- Co-authored-by: github-actions[bot] --- .../bash-with-permission-chromium-linux.png | 4 +- .../glob-with-permission-chromium-linux.png | 4 +- .../permission-dock-todo-chromium-linux.png | 4 +- .../permission-dock-write-chromium-linux.png | 4 +- ...o-write-with-permission-chromium-linux.png | 4 +- .../src/components/chat/PermissionDock.tsx | 37 ++++++------------- .../webview-ui/src/styles/chat.css | 27 +++++++------- packages/ui/src/components/icon.tsx | 1 - 8 files changed, 36 insertions(+), 49 deletions(-) diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/bash-with-permission-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/bash-with-permission-chromium-linux.png index c58b9de5f59..9a067ead3ed 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/bash-with-permission-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/bash-with-permission-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:08273729805339b0158064fda21528b752558f4122be7aabfb5e4667a74910d8 -size 16459 +oid sha256:b3656d23c630a2d7f412d2fc3eee231f45cbe47e6d1e4e7ca44ae4cca3c3160b +size 15323 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/glob-with-permission-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/glob-with-permission-chromium-linux.png index 308442cea88..9d67d03d5db 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/glob-with-permission-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/glob-with-permission-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:21dcfb222007a720472dfd5c143658329e05d9d7b4fe2a69ba38196b1caa2a61 -size 18037 +oid sha256:c95ebadbd707aab03b0b14858cd9e25c4e7b06e8976abf76e377b9eaa5bd2144 +size 16900 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-todo-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-todo-chromium-linux.png index 3e11b428aa8..ec79a3cc440 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-todo-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-todo-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:57dc13142e9f81c81e2e761857b3c07570d0a41f33b97e18a215412a48293470 -size 17632 +oid sha256:168eacdc6523223587bad5f72f3828e03211733b4dc1fa39f152409089e03ff3 +size 16468 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-write-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-write-chromium-linux.png index af32768ae9b..f29c67bf06c 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-write-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/permission-dock-write-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f069da1581318f3effea2b7b16270dd26bb47e678a4bce8b0fcb7af706e641ec -size 18613 +oid sha256:bb5a77e875e168813dcd0d23ea4743b67e7f39b4fe154e19e0ef426e5679f030 +size 17436 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/todo-write-with-permission-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/todo-write-with-permission-chromium-linux.png index 040dc242b75..67b032c28b2 100644 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/todo-write-with-permission-chromium-linux.png +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/composite-webview/todo-write-with-permission-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6b4b92b238e4cce51c60887ce1a96546446690e2c484306d87e2aa9743843166 -size 20446 +oid sha256:1ccccd5ac104eaf39b4954e905c15e5c0f5fc7df5c71898569f490ee09608dc6 +size 19291 diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDock.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDock.tsx index 5aff2267eab..5f18c78b3cf 100644 --- a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDock.tsx +++ b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDock.tsx @@ -101,7 +101,7 @@ export const PermissionDock: Component<{ header={
- +
{language.t("notification.permission.title")} @@ -119,13 +119,10 @@ export const PermissionDock: Component<{ onClick={togglePatternsExpanded} aria-expanded={patternsExpanded()} > -
- - {language.t("ui.permission.permissionRules")} -
+ {language.t("ui.permission.permissionRules")}
@@ -134,8 +131,6 @@ export const PermissionDock: Component<{ {(pattern, index) => (
- {props.request.toolName} - {pattern}
+ {props.request.toolName} + {pattern}
)} @@ -172,34 +169,24 @@ export const PermissionDock: Component<{ } > - - {(cmd) => ( -
-
- )} - + {(cmd) => {cmd()}} -
-
+
{toolDescription()}

{language.t("ui.permission.sessionHint")}

diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat.css b/packages/kilo-vscode/webview-ui/src/styles/chat.css index 5f04abf6ed6..ced6fc64523 100644 --- a/packages/kilo-vscode/webview-ui/src/styles/chat.css +++ b/packages/kilo-vscode/webview-ui/src/styles/chat.css @@ -1184,6 +1184,10 @@ margin-top: 0; } + [data-slot="permission-row"] { + grid-template-columns: 16px 1fr; + } + [data-slot="permission-body"] { padding: 10px 16px 0; gap: 8px; @@ -1207,6 +1211,7 @@ font-family: var(--vscode-editor-font-family, monospace); color: var(--text-weak, var(--vscode-descriptionForeground)); word-break: break-word; + margin-bottom: 4px; } [data-slot="permission-hint"] { @@ -1215,7 +1220,6 @@ [data-slot="permission-patterns"] { margin: 0; - padding: 0 16px; max-height: 160px; overflow-y: auto; gap: 2px; @@ -1237,8 +1241,8 @@ all: unset; display: flex; align-items: center; - justify-content: space-between; - gap: 8px; + justify-content: flex-start; + gap: 6px; padding: 6px 8px; border-radius: 4px; cursor: pointer; @@ -1250,13 +1254,6 @@ } } - [data-slot="permission-patterns-header-main"] { - display: inline-flex; - align-items: center; - gap: 6px; - min-width: 0; - } - [data-slot="permission-patterns-header-title"] { font-size: 12px; font-weight: 500; @@ -1298,7 +1295,7 @@ display: flex; align-items: center; gap: 6px; - padding: 3px 0; + padding: 3px 0 3px 8px; min-width: 0; &[data-decision="approved"] [data-slot="permission-pattern"] { @@ -1334,6 +1331,9 @@ align-items: center; gap: 2px; flex-shrink: 0; + /* Pull 3px left to align the 16px icon inside the 22px toggle button + with the chevron icon in the "Permission rules" header above. */ + margin-left: -3px; } [data-slot="permission-pattern-toggle"] { @@ -1382,14 +1382,15 @@ color: var(--text-weak, var(--vscode-descriptionForeground)); margin: 0; padding: 4px 0 0; - text-align: center; + text-align: left; } [data-slot="permission-actions"] { display: flex; align-items: center; + flex-wrap: wrap; gap: 8px; - justify-content: center; + justify-content: flex-start; padding: 4px 0 8px; } diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 17168224616..7f0fb571e08 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -64,7 +64,6 @@ const icons = { "circle-check": ``, copy: ``, check: ``, - "check-all": ``, photo: ``, share: ``, download: ``,