From 359410fad2e8de3d9f2f5e91c4f550e8b8cd6ff6 Mon Sep 17 00:00:00 2001
From: Mark IJbema <mark@kilocode.ai>
Date: Wed, 8 Apr 2026 12:29:45 +0200
Subject: [PATCH] refactor(vscode): address code review feedback for agent
 permissions display

- Replace non-null assertion with SolidJS Show callback pattern
- Add 'unknown' color fallback for unrecognized permission actions
- Document wildcard pattern assumption in summary computation
- Move mapAgent helper to module scope for better code organization
---
 packages/kilo-vscode/src/KiloProvider.ts      | 26 ++++++++++---------
 .../src/components/settings/ModeEditView.tsx  | 11 +++++---
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/kilo-vscode/src/KiloProvider.ts b/packages/kilo-vscode/src/KiloProvider.ts
index 2a46f1d01f0..c6803658093 100644
--- a/packages/kilo-vscode/src/KiloProvider.ts
+++ b/packages/kilo-vscode/src/KiloProvider.ts
@@ -90,12 +90,26 @@ import {
   saveCustomProvider as saveCustomProviderAction,
 } from "./provider-actions"
 import { fetchOpenAIModels, FetchModelsError } from "./shared/fetch-models"
+import type { Agent } from "@kilocode/sdk/v2/client"
 
 type KiloProviderOptions = {
   projectDirectory?: string | null
   slimEditMetadata?: boolean
 }
 
+// Helper to map agent data to the subset of fields sent to the webview
+const mapAgent = (a: Agent) => ({
+  name: a.name,
+  displayName: a.displayName,
+  description: a.description,
+  mode: a.mode,
+  native: a.native,
+  hidden: a.hidden,
+  color: a.color,
+  deprecated: a.deprecated,
+  permission: a.permission,
+})
+
 export class KiloProvider implements vscode.WebviewViewProvider, TelemetryPropertiesProvider {
   public static readonly viewType = "kilo-code.SidebarProvider"
 
@@ -1623,18 +1637,6 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
 
       const { visible, defaultAgent } = filterVisibleAgents(agents)
 
-      const mapAgent = (a: (typeof agents)[number]) => ({
-        name: a.name,
-        displayName: a.displayName,
-        description: a.description,
-        mode: a.mode,
-        native: a.native,
-        hidden: a.hidden,
-        color: a.color,
-        deprecated: a.deprecated,
-        permission: a.permission,
-      })
-
       const message = {
         type: "agentsLoaded",
         agents: visible.map(mapAgent),
diff --git a/packages/kilo-vscode/webview-ui/src/components/settings/ModeEditView.tsx b/packages/kilo-vscode/webview-ui/src/components/settings/ModeEditView.tsx
index 6cc79a749b5..6e034a8f086 100644
--- a/packages/kilo-vscode/webview-ui/src/components/settings/ModeEditView.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/settings/ModeEditView.tsx
@@ -232,8 +232,8 @@ const ModeEditView: Component<Props> = (props) => {
       </Card>
 
       {/* Calculated permissions (read-only, collapsible) */}
-      <Show when={agent()?.permission}>
-        <PermissionRuleset rules={agent()!.permission!} expanded={expanded()} onToggle={() => setExpanded((v) => !v)} />
+      <Show when={agent()?.permission} keyed>
+        {(rules) => <PermissionRuleset rules={rules} expanded={expanded()} onToggle={() => setExpanded((v) => !v)} />}
       </Show>
 
       <div style={{ display: "flex", "justify-content": "flex-end" }}>
@@ -253,6 +253,7 @@ const ACTION_COLORS: Record<string, { bg: string; fg: string }> = {
   allow: { bg: "var(--vscode-terminal-ansiGreen, #3fb950)", fg: "var(--vscode-editor-background, #1e1e1e)" },
   ask: { bg: "var(--vscode-editorWarning-foreground, #cca700)", fg: "var(--vscode-editor-background, #1e1e1e)" },
   deny: { bg: "var(--vscode-errorForeground, #f85149)", fg: "var(--vscode-editor-background, #fff)" },
+  unknown: { bg: "var(--vscode-descriptionForeground, #8b949e)", fg: "var(--vscode-editor-background, #1e1e1e)" },
 }
 
 interface RulesetProps {
@@ -265,6 +266,8 @@ const PermissionRuleset: Component<RulesetProps> = (props) => {
   const language = useLanguage()
 
   // Compute effective action per unique tool by finding the last rule with pattern "*"
+  // NOTE: This assumes the CLI uses "*" as the wildcard pattern for catch-all rules.
+  // If the CLI convention changes (e.g. to "**" or another pattern), this will need updating.
   const summary = createMemo(() => {
     const tools = new Map<string, PermissionRuleItem["action"]>()
     for (const rule of props.rules) {
@@ -320,7 +323,7 @@ const PermissionRuleset: Component<RulesetProps> = (props) => {
             <div style={{ display: "flex", "flex-wrap": "wrap", gap: "4px" }}>
               <For each={summary()}>
                 {([tool, action]) => {
-                  const colors = ACTION_COLORS[action] ?? ACTION_COLORS.ask
+                  const colors = ACTION_COLORS[action] ?? ACTION_COLORS.unknown
                   return (
                     <span
                       style={{
@@ -376,7 +379,7 @@ const PermissionRuleset: Component<RulesetProps> = (props) => {
             <tbody>
               <For each={props.rules}>
                 {(rule, idx) => {
-                  const colors = ACTION_COLORS[rule.action] ?? ACTION_COLORS.ask
+                  const colors = ACTION_COLORS[rule.action] ?? ACTION_COLORS.unknown
                   return (
                     <tr
                       style={{