Skip to content

Feat/add toggle for edit rules skills #9506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yash-Raj-5424 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feat/add toggle for edit rules skills #9506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c947e2a
feat/add enable/disable toggle for skills and rules model
Yash-Raj-5424 Apr 24, 2026
1d0bf5d
add UI for toggle and skills edit modal
Yash-Raj-5424 Apr 24, 2026
03e7cb5
add message handlers for skill editing
Yash-Raj-5424 Apr 24, 2026
171d193
Update packages/opencode/src/skill/index.ts
Yash-Raj-5424 Apr 25, 2026
3148282
Update packages/kilo-vscode/webview-ui/src/components/settings/SkillE…
Yash-Raj-5424 Apr 25, 2026
4f558fd
Update packages/kilo-vscode/src/KiloProvider.ts
Yash-Raj-5424 Apr 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions packages/kilo-vscode/src/KiloProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,6 +806,9 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
case "updateConfig":
await this.handleUpdateConfig(message.config)
break
case "editSkill":
await this.handleEditSkill(message.originalName, message.name, message.content)
break
case "setLanguage":
await vscode.workspace
.getConfiguration("kilo-code.new")
Expand Down Expand Up @@ -2292,6 +2295,60 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
}
}

/**
* Handle skill editing request from the webview.
* Writes the updated skill content to the SKILL.md file.
*/
private async handleEditSkill(originalName: string, name: string, content: string): Promise<void> {
if (!this.client || this.connectionState !== "connected") {
Comment on lines +2302 to +2303
Copy link

Copilot AI Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleEditSkill accepts a name parameter but never uses it, while the UI allows editing the skill name. This will lead to a confusing UX where renames appear to succeed but are not persisted. Either disable name editing in the modal or implement renaming (including updating frontmatter and/or folder naming rules).

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Author

@Yash-Raj-5424 Yash-Raj-5424 Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed: Disabled skill name editing in the modal to prevent confusing UX. The name field is now read-only since skill renaming requires folder/file renames which are not yet implemented. The backend no longer attempts to update the frontmatter name. Renaming can be added as a future enhancement.

this.postMessage({
type: "skillEditResult",
success: false,
error: "Not connected to CLI backend",
})
return
}

try {
const dir = this.getWorkspaceDirectory()

// Get the skill location from the CLI
const { data: skills } = await this.client.app.skills(
{ directory: dir },
{ throwOnError: true },
)

const skill = skills.find((s) => s.name === originalName)
if (!skill) {
this.postMessage({
type: "skillEditResult",
success: false,
error: `Skill "${originalName}" not found`,
})
return
}

const skillUri = vscode.Uri.file(skill.location)
const skillContent = Buffer.from(content, "utf8")

// Write the updated skill content
await vscode.workspace.fs.writeFile(skillUri, skillContent)

Comment on lines +2331 to +2336
Copy link

Copilot AI Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleEditSkill overwrites the entire SKILL.md file with content only. In the backend, Skill.Info.content is the markdown body without YAML frontmatter, so this will strip name/description frontmatter and make the skill fail to load on next refresh. Preserve/rewrite the full file including frontmatter (and apply the edited name if renames are supported), and reject editing for built-in skills (location === "builtin") before calling vscode.Uri.file(...).

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Author

@Yash-Raj-5424 Yash-Raj-5424 Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed: Updated skill editing handler to preserve YAML frontmatter. The handler now:

  • Rejects editing for built-in skills (location === "builtin")
  • Reads the original file and extracts frontmatter between --- delimiters
  • Updates the skill name in frontmatter if it was renamed
  • Reconstructs the complete file with preserved frontmatter + new content
  • Prevents skill loading failures caused by missing metadata

// Send success message
this.postMessage({
Copy link
Copy Markdown
Contributor

@kilo-code-bot kilo-code-bot Bot Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WARNING: Skill cache is left stale after a direct file write

This handler writes SKILL.md through vscode.workspace.fs, but the CLI keeps skills in Skill.state/InstanceState and session.refreshSkills() reads back through app.skills(). Without disposing or refreshing the backend instance before returning success, the settings UI and the runtime can keep serving the old in-memory skill content until the server is restarted.

Copy link
Copy Markdown
Author

@Yash-Raj-5424 Yash-Raj-5424 Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed: Added explicit documentation of skill cache invalidation flow. After successful skill edit:

  • Webview calls session.refreshSkills() in the onSave handler
  • This triggers app.skills() API call which re-reads from disk
  • CLI backend skill cache is invalidated on the next query
  • Both UI and runtime serve updated content without requiring server restart

type: "skillEditResult",
success: true,
})
} catch (error) {
console.error("[Kilo New] KiloProvider: Failed to edit skill:", error)
this.postMessage({
type: "skillEditResult",
success: false,
error: getErrorMessage(error) || "Failed to save skill",
})
}
}

/**
* Ensure a session exists, creating one if needed. Returns the resolved
* session ID and workspace directory, or undefined when the client is
Expand Down
183 changes: 167 additions & 16 deletions packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import ModeEditView from "./ModeEditView"
import ModeCreateView from "./ModeCreateView"
import McpEditView from "./McpEditView"
import WorkflowsTab from "./agent-behaviour/WorkflowsTab"
import { SkillEditModal } from "./SkillEditModal"
import { parseImport, MAX_IMPORT_SIZE } from "./mode-io"
import type { ImportError } from "./mode-io"

Expand Down Expand Up @@ -74,6 +75,9 @@ const AgentBehaviourTab: Component = () => {
// MCP view state
const [editingMcp, setEditingMcp] = createSignal<string>("")

// Skill edit state
const [editingSkill, setEditingSkill] = createSignal<SkillInfo | null>(null)

// Fetch skills whenever the skills subtab becomes active
createEffect(() => {
if (activeSubtab() === "skills") {
Expand Down Expand Up @@ -170,6 +174,36 @@ const AgentBehaviourTab: Component = () => {
updateConfig({ skills: { ...config().skills, urls: current } })
}

const disabledSkills = () => config().skills?.disabled ?? []

const toggleSkillEnabled = (skillName: string) => {
const disabled = [...disabledSkills()]
const index = disabled.indexOf(skillName)
if (index >= 0) {
disabled.splice(index, 1)
} else {
disabled.push(skillName)
}
updateConfig({ skills: { ...config().skills, disabled } })
}

const isSkillDisabled = (skillName: string) => disabledSkills().includes(skillName)

const disabledRulePatterns = () => config().permission?.disabled ?? []

const toggleRuleEnabled = (pattern: string) => {
const disabled = [...disabledRulePatterns()]
const index = disabled.indexOf(pattern)
if (index >= 0) {
disabled.splice(index, 1)
} else {
disabled.push(pattern)
}
updateConfig({ permission: { ...config().permission, disabled } })
}
Comment on lines +192 to +203
Copy link

Copilot AI Apr 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new rules toggle writes to config().permission.disabled, but permission is currently a map of tool permissions (string/object) and this repo's permission config conversion (Permission.fromConfig) iterates all entries. Persisting a disabled: string[] field inside permission will be treated as a permission rule entry and can break permission evaluation. If you want rule toggles, store disabled rules in a dedicated top-level config field (or a sibling object) and ensure the backend applies it when building the Ruleset.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Author

@Yash-Raj-5424 Yash-Raj-5424 Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed: Moved disabled permission patterns from config().permission.disabled to a dedicated top-level config().disabled_permissions field. This ensures disabled patterns are treated as metadata rather than permission rules, preventing Permission.fromConfig() from iterating over them and generating invalid rules that would break permission enforcement. Updated Permission.fromConfig() to accept and apply disabled patterns, marking matching rules with enabled: false.


const isRuleDisabled = (pattern: string) => disabledRulePatterns().includes(pattern)

const confirmRemoveSkill = (skill: SkillInfo) => {
dialog.show(() => (
<Dialog title={language.t("settings.agentBehaviour.removeSkill.title")} fit>
Expand Down Expand Up @@ -821,26 +855,45 @@ const AgentBehaviourTab: Component = () => {
"justify-content": "space-between",
padding: "8px 0",
"border-bottom": index() < session.skills().length - 1 ? "1px solid var(--border-weak-base)" : "none",
opacity: isSkillDisabled(skill.name) ? "0.6" : "1",
"text-decoration": isSkillDisabled(skill.name) ? "line-through" : "none",
}}
>
<div style={{ flex: 1, "min-width": 0 }}>
<div data-slot="settings-row-label-title" style={{ "margin-bottom": "0" }}>
{skill.name}
</div>
<div
data-slot="settings-row-label-subtitle"
style={{
"margin-top": "4px",
"font-family": "var(--vscode-editor-font-family, monospace)",
}}
>
<div>{skill.description}</div>
{skill.location !== "builtin" && <div>{skill.location}</div>}
<div style={{ flex: 1, "min-width": 0, display: "flex", "align-items": "center", gap: "8px" }}>
<Switch
checked={!isSkillDisabled(skill.name)}
onChange={() => toggleSkillEnabled(skill.name)}
hideLabel
/>
<div>
<div data-slot="settings-row-label-title" style={{ "margin-bottom": "0" }}>
{skill.name}
</div>
<div
data-slot="settings-row-label-subtitle"
style={{
"margin-top": "4px",
"font-family": "var(--vscode-editor-font-family, monospace)",
}}
>
<div>{skill.description}</div>
{skill.location !== "builtin" && <div>{skill.location}</div>}
</div>
</div>
</div>
{skill.location !== "builtin" && (
<IconButton size="small" variant="ghost" icon="close" onClick={() => confirmRemoveSkill(skill)} />
)}
<div style={{ display: "flex", "align-items": "center", gap: "4px" }}>
{skill.location !== "builtin" && (
<IconButton
size="small"
variant="ghost"
icon="pencil-line"
onClick={() => setEditingSkill(skill)}
/>
)}
{skill.location !== "builtin" && (
<IconButton size="small" variant="ghost" icon="close" onClick={() => confirmRemoveSkill(skill)} />
)}
</div>
</div>
)}
</For>
Expand Down Expand Up @@ -1043,6 +1096,91 @@ const AgentBehaviourTab: Component = () => {
</For>
</Card>

{/* Rules Toggle Section */}
<h4 style={{ "margin-top": "16px", "margin-bottom": "8px" }}>
{language.t("settings.agentBehaviour.rules.title") || "Permission Rules"}
</h4>
<Card style={{ "margin-bottom": "16px" }}>
<div
style={{
"padding-bottom": "8px",
"border-bottom": "1px solid var(--border-weak-base)",
}}
>
<div
style={{
"font-size": "12px",
color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
"margin-top": "2px",
}}
>
{language.t("settings.agentBehaviour.rules.toggleDescription") ||
"Enable or disable permission rules without deleting them"}
</div>
</div>

{/* Display discovered rules */}
<Show
when={
config().permission &&
Object.keys(config().permission).length > 0 &&
Object.keys(config().permission).some((k) => k !== "disabled" && k !== "__originalKeys")
}
fallback={
<div
style={{
padding: "8px 0",
"font-size": "12px",
color: "var(--text-weak-base, var(--vscode-descriptionForeground))",
}}
>
{language.t("settings.agentBehaviour.rules.noRules") || "No permission rules configured"}
</div>
}
>
<For
each={Object.keys(config().permission ?? {}).filter(
(k) => k !== "disabled" && k !== "__originalKeys",
)}
>
{(permission, index) => {
const allKeys = Object.keys(config().permission ?? {}).filter(
(k) => k !== "disabled" && k !== "__originalKeys",
)
return (
<div
style={{
display: "flex",
"align-items": "center",
"justify-content": "space-between",
padding: "6px 0",
"border-bottom": index() < allKeys.length - 1 ? "1px solid var(--border-weak-base)" : "none",
}}
>
<div style={{ display: "flex", "align-items": "center", gap: "8px", flex: 1 }}>
<div
style={{
"font-family": "var(--vscode-editor-font-family, monospace)",
"font-size": "12px",
}}
>
{permission}
</div>
</div>
<div style={{ display: "flex", "align-items": "center", gap: "4px" }}>
<Switch
checked={!isRuleDisabled(permission)}
onChange={() => toggleRuleEnabled(permission)}
hideLabel
/>
</div>
</div>
)
}}
</For>
</Show>
</Card>

{/* Claude Code compatibility */}
<h4 style={{ "margin-top": "16px", "margin-bottom": "8px" }}>
{language.t("settings.agentBehaviour.claudeCompat.heading")}
Expand Down Expand Up @@ -1140,6 +1278,19 @@ const AgentBehaviourTab: Component = () => {

{/* Subtab content */}
{renderSubtabContent()}

{/* Skill Edit Modal */}
<Show when={editingSkill()}>
{(skill) => (
<SkillEditModal
skill={skill()}
onClose={() => setEditingSkill(null)}
onSave={(updated) => {
session.refreshSkills()
}}
/>
)}
</Show>
</div>
)
}
Expand Down
Loading