claude-auto-plan-mode-ui

A VSCode extension that adds an Auto plan mode entry to Claude Code's permission-mode picker.

It works by patching the Claude Code webview bundle in-place. Pair it with the claude-auto-plan-mode plugin, which supplies the hook and flag-file logic that actually auto-approves tool calls during plan mode.

Why

The mode picker in Claude Code is rendered by Anthropic's bundled webview. Plugins cannot add UI to the chat composer or the mode picker — that surface isn't exposed. The only way to add new entries is to patch the shipped bundle. This extension does that surgically: regex substitutions resilient to minifier renames, with a namespaced .autoplan.bak backup before any change so revert is a single command, and additive patching that coexists with other patcher-extensions like claude-worktree-manager.

Without this extension you still get the auto-approval behaviour by running the companion plugin's slash commands; the extension only adds the picker entry so it shows up where you'd expect to find it.

Installation

git clone https://github.com/PettHa/claude-auto-plan-mode-ui.git
cd claude-auto-plan-mode-ui
npm install
npm run rebuild

rebuild packages the extension into a .vsix and installs it into your VSCode. Reload the window afterwards so the patch can apply.

The patch re-applies automatically when the Anthropic Claude Code extension updates. Disable that behaviour by setting claudeAutoPlanMode.autoApplyPatchOnUpdate to false.

Usage

Open the permission-mode picker (Shift+Tab cycles through modes, or click the indicator in the chat composer) and choose Auto plan mode.

Claude stays in plan mode (read-only on Edit/Write/MultiEdit) but tool calls used during planning are auto-approved. The final "Accept this plan?" dialog still requires you to click — that's an intentional Anthropic design choice; see the companion plugin's README for context.

Picking any other mode (Default, Plan, Auto, Bypass) clears the auto-plan flag.

Architecture

src/
├── extension.ts   activation, command registration, bundle-overwrite watcher
├── patcher.ts     regex patch definitions + apply/revert/auto-apply logic
└── flagStore.ts   read/write ~/.claude/auto-plan-tools

patcher.ts mirrors the structure of claude-worktree-manager: a Patch interface with optional findRegex, find, and alreadyApplied; an applyInlinePatch entry point that targets both webview/index.js and extension.js; a watchForAnthropicUpdates listener that re-applies after upstream version bumps; and a watchBundleForOverwrites fs-watcher that re-applies when another patcher-extension wipes the bundle.

The patch list:

1. acquireVsCodeApi wrapper — prepended at file start. Caches the webview API on first call so subsequent callers (including our injected onClick) get the same instance instead of throwing the second-call exception.
2. Mode entry append — adds autoPlan to the picker's mode-definitions object.
3. Available-modes extend — wraps the render-loop input array so the new key shows up.
4. onClick handler — picks up clicks on the new entry, posts a message to the extension host.
5. Host message forwarder (in extension.js) — wraps every webview.onDidReceiveMessage callback so our custom postMessage type is routed into vscode.commands.executeCommand("claudeAutoPlanMode.activateTools"), which writes the flag file.

Patch resilience

Each patch uses one of two strategies:

• findRegex — captures minifier-renamed identifiers as backreferences so the patch survives bundle re-minifications across Anthropic releases.
• alreadyApplied — a short literal substring that, if present in the file, means the patch is already in place. This makes the apply step idempotent and lets activation re-run safely on every VSCode startup.

Before any change, both target files are copied to namespaced backups (webview/index.js.autoplan.bak and extension.js.autoplan.bak). The active baseline is the live file, not the backup, so we stack additively over patches from other extensions instead of overwriting them. The backup is used only when you run Revert In-Window Patch.

Companion plugin

The flag file this extension writes is read by claude-auto-plan-mode, a Claude Code plugin that registers a PreToolUse hook. Without the plugin installed, the picker entry still appears and switches you into plan mode, but the auto-approval behaviour won't fire.

Install it from the marketplace, or load it locally during development.

Manual commands

All command-palette commands are namespaced under Claude Auto Plan Mode:

Command	Description
Activate (tools only)	Writes ~/.claude/auto-plan-tools directly. Useful when the picker patch can't apply.
Clear All Flags	Deletes the flag file.
Re-apply In-Window Patch	Forces a re-apply against the current Claude Code bundle.
Revert In-Window Patch	Restores both target files from the .autoplan.bak backups and deletes them.

These exist mainly as fallbacks if the in-bundle picker entry can't be patched in (for instance after a major Anthropic refactor).

Troubleshooting

The new entry doesn't appear in the picker. Run Claude Auto Plan Mode: Re-apply In-Window Patch and reload the VSCode window. If the patch reports a missing pattern, Anthropic likely refactored the bundle — open an issue with the version number shown in the output channel.

Picking the entry switches mode but tool calls still ask for approval. The companion plugin isn't installed or its hook isn't running. Confirm ~/.claude/auto-plan-tools exists after you pick the entry, then check that claude-auto-plan-mode is loaded.

I want to undo the patch. Run Claude Auto Plan Mode: Revert In-Window Patch and reload.

License

MIT — see LICENSE.