AI Coding Panel for Claude Code

A powerful VS Code panel extension designed to maximize your productivity with Claude Code.

Streamline your Claude Code workflow by managing prompt files, executing AI commands, and viewing results—all within a single integrated panel. No more context switching between file explorer, editor, and terminal.

Screenshot

Why This Extension for Claude Code?

This extension is purpose-built to enhance your Claude Code experience:

Seamless Terminal Integration: Auto-detects Claude Code sessions with process-based monitoring (no prompt pattern dependency)
Smart Context Management: Automatically syncs file context across Terminal, Editor, and Plans views when switching tabs
Intelligent Command Shortcuts: Context-aware buttons that adapt to whether Claude Code is running or idle
Dynamic Tab Names: Shows running processes (like iTerm2) with command type icons (▶️ Run, 📝 Plan, 📑 Spec)
Persistent Sessions: Terminal sessions survive view switches—no lost context or history

Features

Feature	Description
Plans	Browse and manage prompt files in a flat list view with directory navigation
Editor	Command center for executing Claude Code with Run/Plan/Spec buttons
Terminal	Claude Code-optimized terminal with auto-detection, context-aware shortcuts, and persistent sessions
Menu	Quick access to settings and common operations

Feature Details

Plans

Browse and manage files in a flat list view with directory navigation.

Feature	Description
Flat list display	Shows contents of the current directory only (not a tree structure)
Directory navigation	Click a directory to navigate into it. Use ".." to go back to the parent directory
Auto-file selection	Automatically selects and displays the oldest TASK.md, PROMPT.md, or SPEC.md file when navigating to a directory
Create directory with prompt	"Create directory" button automatically creates `.claude/plans` and an initial prompt file (`YYYY_MMDD_HHMM_SS_PROMPT.md`) with helpful guidance on using Run/Plan/Spec buttons. File opens automatically in Editor view
Path display	Current path shown as the first item in the list with inline action buttons (New PROMPT.md, New TASK.md, New SPEC.md, Copy, Rename, New Directory, Archive)
Date/time prefix	Root directory displays date or time before directory names: `[HH:MM]` for today, `[MM/DD]` for other dates (files are shown without prefix)
Editor target file icons	Files opened in Editor view (TASK.md, PROMPT.md, SPEC.md) display an `edit` icon to distinguish them from regular Markdown files
Sorting	Files are sorted by creation date (ascending) by default
Drag & Drop	Copy files by dragging them within the view or from external sources
Auto-refresh	Automatically updates when files are created, modified, or deleted (even when the view is hidden)
Settings icon	Quick access to default path and sort configuration

Editor (Claude Code Command Center)

Edit Markdown prompt files and execute Claude Code commands directly from the panel.

Feature	Description
Run/Plan/Spec Commands	Execute Claude Code with pre-configured commands: - Run (`Cmd+R` / `Ctrl+R`): `claude "Review the file at ${filePath}"` - Plan: `claude --permission-mode plan "Review ... create an implementation plan ..."` - Spec: `claude --permission-mode plan "Review ... create specification documents ..."` Auto-saves before execution and works even without a file open
Auto-Terminal Integration	Commands are sent to Terminal view with automatic file-tab association for seamless workflow
Auto-display	Automatically opens when selecting a timestamp-named Markdown file (format: `YYYY_MMDD_HHMM_SS_PROMPT.md`). Other Markdown files open in the standard editor
Save button	Displays in header with color change indicating unsaved changes. Creates new file if none is open (saves to current Plans directory)
New file buttons	Create PROMPT.md, TASK.md, or SPEC.md files from the header. Also available with `Cmd+M` / `Ctrl+M` for PROMPT.md
Customizable commands	Configure Run, Plan, and Spec commands in settings to match your workflow
Read-only mode	Automatically switches to read-only mode when the file is active in VSCode editor
Auto-save	Automatically saves when switching files, navigating directories, or closing the view
Restore editing	Restores the editing file when returning from another extension
Settings icon	Quick access to command configuration
Focus indicator	Shows a border around the view when focused

Terminal (Claude Code Optimized)

The embedded terminal is purpose-built for Claude Code with intelligent automation and context awareness.

Feature	Description
Claude Code Auto-Detection	Process-based detection (checks every 1.5s) reliably identifies Claude Code sessions independent of prompt changes. Automatically switches UI and shortcuts when Claude Code starts/exits
Context-Aware Shortcuts	Smart buttons that change based on state: - Not running: `claude`, `claude -c`, `claude -r`, `claude update` - Running: `/model sonnet`, `/model opus`, `/compact`, `/clear` Enables quick model switching and common commands during Claude Code sessions
Command Type Icons	Tab names display icons indicating command origin: ▶️ Run button 📝 Plan button 📑 Spec button
Dynamic Process Names	Like iTerm2, tab names update automatically to show the currently running process
Tab-File Association	Commands from Editor view link the file to the terminal tab. Switching tabs automatically: - Opens the associated file in Editor view - Navigates to the file's directory in Plans view
Session Persistence	Terminal sessions and output history survive view switches or extension changes—your work is never lost
Multiple tabs	Create up to 5 independent terminal tabs. Click the "+" button to add a new tab, click a tab to switch. Close button (× Close) is located at the right end of the shortcut area
Auto-scroll	Maintains scroll position at bottom when new output arrives or when view is resized (only if already at the bottom)
Clickable links	URLs open in browser, file paths (e.g., `./src/file.ts:123`) open in editor with line navigation
Unicode support	Full CJK character support with proper width calculation
Configurable	Customize shell path, font size, font family, cursor style, cursor blink, and scrollback lines
WebView header	Tab bar with shell names, shortcut buttons, plus Clear and Kill buttons for the active tab
Settings icon	Quick access to terminal settings in the title bar
Default visibility	Collapsed (expand when needed)
Focus indicator	Shows a border around the view when focused

Quick access to settings and common operations.

Feature	Description
Settings	Open user or global settings
Templates	Customize templates
Quick shortcuts	Open terminal, Checkout default branch, Git pull, Duplicate workspace in new window

Typical Claude Code Workflow

1. Create a Task

Click the rocket icon 🚀 in Plans title menu to create a new task directory
A timestamped TASK.md file opens in the Editor view
Write your task description or requirements

2. Execute with Claude Code

Press Cmd+R / Ctrl+R to run the task with Claude Code
The Terminal view automatically activates and sends the command
Claude Code starts processing your request

3. Monitor Progress

Watch Claude Code's output in the Terminal view
Tab name shows process status with icons (▶️, 📝, 📑)
Scroll position is preserved when switching views

4. Review Results

Claude Code creates implementation plans or spec documents
Files appear automatically in Plans view
Click files to review in Editor view
Terminal tab maintains association with your task file

5. Iterate

Switch between terminal tabs to work on multiple tasks
Each tab remembers its associated file and context
Plans/Editor views auto-sync when you switch tabs

Usage

Keyboard Shortcuts

Shortcut	Action
`Cmd+Shift+A` (macOS) `Ctrl+Shift+A` (Windows/Linux)	Focus AI Coding Panel
`Cmd+S` (macOS) `Ctrl+S` (Windows/Linux)	New Task (when panel is focused)
`Cmd+M` (macOS) `Ctrl+M` (Windows/Linux)	Create new Markdown file (when panel is focused)
`Cmd+R` (macOS) `Ctrl+R` (Windows/Linux)	Run task in Editor (auto-saves and sends command to terminal)

Basic actions

Click the "AI Coding Panel" icon in the activity bar (or press Cmd+Shift+A / Ctrl+Shift+A).
Click the rocket icon 🚀 in Plans to create a new task directory with a TASK.md file.
Write your task description or requirements in the Editor view.
Press Cmd+R / Ctrl+R to execute the task with Claude Code.
Monitor Claude Code's progress in the Terminal view.
Review the results in Plans and Editor views as Claude Code creates files.

Template Feature

When you create a file from Plans, you can automatically populate it with a template. This keeps Markdown files used for AI coding consistent and saves time.

Configure the template

Click the gear icon in the Plans pane.
Choose "Workspace Settings" -> "Customize template."
Template files are created in .vscode/ai-coding-panel/templates/:
- task.md - Template for Start Task
- spec.md - Template for New Spec
- prompt.md - Template for New File (PROMPT.md)
Edit the templates and save them.

Default template

The first template contains the following:

file: {{filename}}
created: {{datetime}}

---

# task

Available variables

Use the following variables inside a template:

{{datetime}}: Creation date and time (for example, 2025/11/3 12:27:13)
{{filename}}: Filename including extension (for example, 2025_1229_1430_25_PROMPT.md)
{{timestamp}}: Timestamp (for example, 2025_1229_1430_25)
{{filepath}}: File path relative to workspace root (for example, .claude/plans/2025_1229_1430_25_PROMPT.md)
{{dirpath}}: Directory path relative to workspace root (for example, .claude/plans)

Template priority

Workspace templates in .vscode/ai-coding-panel/templates/ (if present)
Built-in extension templates

Template examples

Capture prompts for AI assistants in the overview section.
Track to-dos in the tasks section.
Add project-specific sections.

File Operations

Feature	Description
Create files or folders	Quickly scaffold new files and folders.
Rename	Rename files and folders. After renaming a directory, automatically navigates to the renamed directory.
Delete	Delete files and folders (moved to trash).
Copy / Cut / Paste	Perform standard clipboard operations.
Drag & Drop	Copy files by dragging them within the Plans view or from external sources. Displays a success message after copying.
Archive	Archive task directories to keep your workspace organized. Click the archive icon (inline button) on a directory row, or right-click and select "Archive" to move it to the `archived` folder. When inside a non-root directory, an archive button also appears in the path display header - clicking it archives the current directory and returns to root. If a directory with the same name already exists, a timestamp is automatically added to avoid conflicts.
Checkout Branch	Right-click a directory to checkout a git branch using the directory name. Creates the branch if it doesn't exist, or switches to it if it already exists.
Insert Path to Editor	Insert relative path into the Editor view. Click the edit icon on file rows, or right-click and select "Insert Path to Editor". Supports multiple selection.
Insert Path to Terminal	Insert relative path into the Terminal view. Click the terminal icon on file rows, or right-click and select "Insert Path to Terminal". Supports multiple selection. Paths are separated by spaces.

Other Features

Create Files and Folders

Item	Steps
New Task	Click the rocket icon in Plans title menu. Creates a new directory under the currently opened directory in Plans View and automatically generates a timestamped Markdown file. The file is selected in Plans with "editing" label and opens in Editor View. If the current path cannot be retrieved, it falls back to the default path.
New Directory	Click the folder icon in the path display row. Creates a new directory under the currently opened directory (without creating a Markdown file).
Create PROMPT.md	Click the file icon in the path display row or Editor header. A timestamped Markdown file is created (for example, `2025_1229_1430_25_PROMPT.md`) and opens in Editor View.
Create TASK.md	Click the TASK.md icon in the path display row or Editor header. A timestamped TASK.md file is created and opens in Editor View.
Create SPEC.md	Click the SPEC.md icon in the path display row or Editor header. A timestamped SPEC.md file is created and opens in Editor View.

Configure the Default Relative Path

Method	Steps
Plans settings (recommended)	1. Click the gear icon in Plans. 2. The settings view opens with `aiCodingSidebar.plans.defaultRelativePath` pre-filtered. 3. Edit the default relative path (for example, `src`, `.claude/plans`, `docs/api`).
Workspace settings	1. Click the gear icon in Plans. 2. Select "Workspace Settings." 3. Choose one of the following: - Create/Edit settings.json: Generate or edit the workspace settings file. - Configure .claude folder: Create a `.claude/plans` folder and apply settings. - Customize template: Edit the template used when creating files.
Inline from the extension	1. Click the edit icon in Plans. 2. Enter a relative path (for example, `src`, `.claude/plans`, `docs/api`). 3. Choose whether to save it to settings.

Relative path examples

src -> <project>/src
docs/api -> <project>/docs/api
.claude/plans -> <project>/.claude/plans
empty string -> workspace root

When the configured path doesn't exist

If the default relative path doesn't exist, Plans displays a "Create directory" button. Click it to automatically create the directory and display its contents.

Other

Feature	Description
Copy relative path	Copy the workspace-relative path to the clipboard.
Plans settings	Open the settings view from Plans to edit the default relative path directly.
Search	Search files across the workspace.

Settings

Setting	Description	Type	Default	Options / Examples
`plans.defaultRelativePath`	Default relative path for Plans	string	`".claude/plans"`	`"src"`, `.claude/plans`, `"docs/api"`
`plans.sortBy`	Sort files and directories in Plans by	string	`"created"`	`"name"` (file name) `"created"` (creation date) `"modified"` (modified date)
`plans.sortOrder`	Sort order for files and directories in Plans	string	`"ascending"`	`"ascending"` (ascending) `"descending"` (descending)
`editor.runCommand`	Command template to execute when clicking the Run button in the Editor view	string	`claude "Review the file at ${filePath}"`	Use `${filePath}` as placeholder for the file path
`editor.runCommandWithoutFile`	Command template to execute when clicking the Run button without a file open	string	`claude "${editorContent}"`	Use `${editorContent}` as placeholder for the editor content
`editor.planCommand`	Command template to execute when clicking the Plan button	string	`claude --permission-mode plan "Review the file at ${filePath} and create an implementation plan. Save it as a timestamped file (format: YYYY_MMDD_HHMM_SS_plan.md) in the same directory as ${filePath}."`	Use `${filePath}` as placeholder for the file path
`editor.specCommand`	Command template to execute when clicking the Spec button	string	`claude --permission-mode plan "Review the file at ${filePath} and create specification documents. Save them as timestamped files (format: YYYY_MMDD_HHMM_SS_requirements.md, YYYY_MMDD_HHMM_SS_design.md, YYYY_MMDD_HHMM_SS_plans.md) in the same directory as ${filePath}."`	Use `${filePath}` as placeholder for the file path
`terminal.shell`	Shell executable path for Terminal view	string	`""`	Leave empty to use system default shell
`terminal.fontSize`	Font size for Terminal view	number	`12`	Any positive number
`terminal.fontFamily`	Font family for Terminal view	string	`"monospace"`	Any valid font family
`terminal.cursorStyle`	Cursor style for Terminal view	string	`"block"`	`"block"`, `"underline"`, `"bar"`
`terminal.cursorBlink`	Enable cursor blinking in Terminal view	boolean	`true`	`true` or `false`
`terminal.scrollback`	Number of scrollback lines in Terminal view	number	`1000`	Any positive number

Example configuration

Add the following to .vscode/settings.json:

{
  "aiCodingSidebar.plans.defaultRelativePath": ".claude/plans",
  "aiCodingSidebar.plans.sortBy": "created",
  "aiCodingSidebar.plans.sortOrder": "ascending",
  "aiCodingSidebar.editor.commandPrefix": "claude",
  "aiCodingSidebar.editor.runCommand": "${commandPrefix} \"Review the file at ${filePath}\"",
  "aiCodingSidebar.editor.runCommandWithoutFile": "${commandPrefix} \"${editorContent}\"",
  "aiCodingSidebar.editor.planCommand": "${commandPrefix} \"Review the file at ${filePath} and create an implementation plan. Save it as a timestamped file (format: YYYY_MMDD_HHMM_SS_plan.md) in the same directory as ${filePath}.\"",
  "aiCodingSidebar.editor.specCommand": "${commandPrefix} \"Review the file at ${filePath} and create specification documents. Save them as timestamped files (format: YYYY_MMDD_HHMM_SS_requirements.md, YYYY_MMDD_HHMM_SS_design.md, YYYY_MMDD_HHMM_SS_tasks.md) in the same directory as ${filePath}.\"",
  "aiCodingSidebar.terminal.fontSize": 12,
  "aiCodingSidebar.terminal.cursorStyle": "block"
}

Development & Build

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Recompile automatically during development
npm run watch

Debugging

Prepare

Install dependencies: npm install
Compile TypeScript: npm run compile

Start debugging

From the Command Palette (recommended)

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
Type and select "Debug: Start Debugging."
Press Enter to launch.

Other ways to launch

F5: Start debugging immediately.
Run and Debug view: Open the Run and Debug icon in the sidebar, choose "Run Extension," then click the green play button.
Menu bar: Select "Run" -> "Start Debugging."

While debugging

A new VS Code window (Extension Development Host) opens.
The activity bar now shows the "AI Coding Panel" icon.
Set breakpoints, inspect variables, and step through code.
Press Ctrl+R / Cmd+R to reload the extension.

Installation

Quick Start with Claude Code

Install this extension from the VS Marketplace
Install Claude Code CLI
Press Cmd+Shift+A / Ctrl+Shift+A to open AI Coding Panel
Create a task from Plans view (click the rocket icon 🚀)
Press Cmd+R / Ctrl+R to start Claude Code

Method 1: Development mode (for testing)

Clone or download this repository.
Open it in VS Code.
Press F5 to launch an Extension Development Host window.
Test the extension in the new VS Code instance.

Method 2: Install from a VSIX package

Recommended: Use the latest release from GitHub

Download the latest VSIX file from the GitHub Releases page.

Install via command line:

code --install-extension ai-coding-sidebar-1.0.11.vsix

Restart VS Code.

Use a local build

# Install directly from the releases directory
code --install-extension releases/ai-coding-sidebar-1.0.11.vsix

Build the package yourself

Install the VSCE tool:
```
npm install -g @vscode/vsce
```
Create a VSIX package:
```
npm run package
```

Install the generated VSIX file:

code --install-extension releases/ai-coding-sidebar-1.0.11.vsix

Restart VS Code.

Automated Build & Release

This project uses GitHub Actions to build and release the extension.

How the automated build works

Trigger: Push to the master branch.
Build steps:
1. Compile TypeScript.
2. Create the VSIX package automatically.
3. Upload the package to GitHub Releases.
4. Update the releases/ directory in the repository.

Versioning

Release tags are created based on the version field in package.json.

# Bump versions
npm run version:patch   # 0.0.1 -> 0.0.2
npm run version:minor   # 0.0.1 -> 0.1.0
npm run version:major   # 0.0.1 -> 1.0.0

Uninstall

Via command line

code --uninstall-extension ai-coding-sidebar

Inside VS Code

Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
Search for "AI Coding Panel."
Click "Uninstall."

Requirements

VS Code 1.74.0 or later
Node.js (development only)

Compatibility Note

While this extension is optimized for Claude Code, it also works with other AI coding assistants like Cursor and GitHub Copilot. However, some features (like Claude Code auto-detection and context-aware shortcuts) are specifically designed for Claude Code and may not function with other tools.

AI Coding Panel

nacn