AI Coding Panel

A panel extension that strengthens integration with AI coding tools.

Streamline your AI-assisted coding workflow by managing prompt files, running AI commands, and viewing results—all within a single panel. No more switching between file explorer, editor, and terminal. Focus on coding while AI does the heavy lifting.

Features

Feature Details

Plans

Display directories and files under a specified path in a flat list view.

Editor

Edit Markdown files directly in the panel.

Terminal

Embedded terminal in the panel using xterm.js with full PTY support.

Menu

Quick access to settings and common operations.

Usage

Keyboard Shortcuts

Basic actions

1. Click the "AI Coding Panel" icon in the activity bar (or press Cmd+Shift+A / Ctrl+Shift+A).
2. Use Plans to create the folder you use for AI coding.
3. Create Markdown files from the Plans view.
4. Click a timestamp-named Markdown file (e.g., 2025_1229_1430_25_PROMPT.md) in Plans to edit it in the Editor view below. Other Markdown files open in the standard editor.
5. Write instructions for the AI in the Editor and save with the Save button.
6. Right-click the Markdown file in Plans and choose "Copy Relative Path," then share it with your AI tool.

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

1. Click the gear icon in the Plans pane.
2. Choose "Workspace Settings" -> "Customize template."
3. 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)
4. 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

1. Workspace templates in .vscode/ai-coding-panel/templates/ (if present)
2. 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

Other Features

Create Files and Folders

Configure the Default Relative Path

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

Settings

Example configuration

Add the following to .vscode/settings.json:

{
  "aiCodingSidebar.plans.defaultRelativePath": ".claude/plans",
  "aiCodingSidebar.plans.sortBy": "created",
  "aiCodingSidebar.plans.sortOrder": "ascending",
  "aiCodingSidebar.editor.runCommand": "claude \"Review the file at ${filePath}\"",
  "aiCodingSidebar.editor.runCommandWithoutFile": "claude \"${editorContent}\"",
  "aiCodingSidebar.editor.planCommand": "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}.\"",
  "aiCodingSidebar.editor.specCommand": "claude \"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

1. Install dependencies: npm install
2. Compile TypeScript: npm run compile

Start debugging

From the Command Palette (recommended)

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
2. Type and select "Debug: Start Debugging."
3. 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

Method 1: Development mode (for testing)

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

Method 2: Install from a VSIX package

Recommended: Use the latest release from GitHub

1. Download the latest VSIX file from the GitHub Releases page.
2. Install via command line:

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

3. Restart VS Code.

Use a local build

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

Build the package yourself

1. Install the VSCE tool:

   npm install -g @vscode/vsce
   

2. Create a VSIX package:

   npm run package
   

3. Install the generated VSIX file:

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

4. 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

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

Requirements

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