chore: prepare package and manually publish on vscode markeplace

todo: publish on ovsx

.changeset/fix-gemini-cli-dependency.md

@@ -1,5 +0,0 @@
----
-"task-master-ai": patch
----
-
-Fix compatibility with @google/gemini-cli-core v0.1.12+ by updating ai-sdk-provider-gemini-cli to v0.1.1.

.changeset/fix-show-command-complexity.md

@@ -0,0 +1,7 @@
+---
+"task-master-ai": patch
+---
+
+Fix: show command no longer requires complexity report file to exist
+
+The `tm show` command was incorrectly requiring the complexity report file to exist even when not needed. Now it only validates the complexity report path when a custom report file is explicitly provided via the -r/--report option.

.changeset/fix-tag-complexity-detection.md

@@ -0,0 +1,7 @@
+---
+"task-master-ai": patch
+---
+
+Fix tag-specific complexity report detection in expand command
+
+The expand command now correctly finds and uses tag-specific complexity reports (e.g., `task-complexity-report_feature-xyz.json`) when operating in a tag context. Previously, it would always look for the generic `task-complexity-report.json` file due to a default value in the CLI option definition.

.changeset/fresh-bugs-squashed.md

@@ -1,5 +0,0 @@
----
-"task-master-ai": patch
----
-
-Fix 'expand --all' and 'show' commands to correctly handle tag contexts for complexity reports and task display.

.changeset/groq-kimi-k2-support.md

@@ -0,0 +1,10 @@
+---
+"task-master-ai": minor
+---
+
+Complete Groq provider integration and add MoonshotAI Kimi K2 model support
+
+- Fixed Groq provider registration
+- Added Groq API key validation
+- Added GROQ_API_KEY to .env.example
+- Added moonshotai/kimi-k2-instruct model with $1/$3 per 1M token pricing and 16k max output

.changeset/happy-sites-stay.md

@@ -1,5 +0,0 @@
----
-"task-master-ai": patch
----
-
-Clean up remaining automatic task file generation calls

.changeset/metal-papers-stay.md

@@ -0,0 +1,7 @@
+---
+"task-master-ai": minor
+---
+
+feat: Add Zed editor rule profile with agent rules and MCP config
+
+- Resolves #637

.changeset/orange-pots-add.md

@@ -1,24 +0,0 @@
----
-"task-master-ai": minor
----
-
-Add comprehensive Kiro IDE integration with autonomous task management hooks
-
-- **Kiro Profile**: Added full support for Kiro IDE with automatic installation of 7 Taskmaster agent hooks
-- **Hook-Driven Workflow**: Introduced natural language automation hooks that eliminate manual task status updates
-- **Automatic Hook Installation**: Hooks are now automatically copied to `.kiro/hooks/` when running `task-master rules add kiro`
-- **Language-Agnostic Support**: All hooks support multiple programming languages (JS, Python, Go, Rust, Java, etc.)
-- **Frontmatter Transformation**: Kiro rules use simplified `inclusion: always` format instead of Cursor's complex frontmatter
-- **Special Rule**: Added `taskmaster_hooks_workflow.md` that guides AI assistants to prefer hook-driven completion
-
-Key hooks included:
-
-- Task Dependency Auto-Progression: Automatically starts tasks when dependencies complete
-- Code Change Task Tracker: Updates task progress as you save files
-- Test Success Task Completer: Marks tasks done when tests pass
-- Daily Standup Assistant: Provides personalized task status summaries
-- PR Readiness Checker: Validates task completion before creating pull requests
-- Complexity Analyzer: Auto-expands complex tasks into manageable subtasks
-- Git Commit Task Linker: Links commits to tasks for better traceability
-
-This creates a truly autonomous development workflow where task management happens naturally as you code!

.changeset/pre.json

@@ -1,16 +0,0 @@
-{
-  "mode": "pre",
-  "tag": "rc",
-  "initialVersions": {
-    "task-master-ai": "0.21.0",
-    "extension": "0.20.0"
-  },
-  "changesets": [
-    "fix-gemini-cli-dependency",
-    "fresh-bugs-squashed",
-    "happy-sites-stay",
-    "orange-pots-add",
-    "quiet-rabbits-bathe",
-    "swift-otters-argue"
-  ]
-}

.changeset/public-crabs-ask.md

@@ -0,0 +1,5 @@
+---
+"task-master-ai": minor
+---
+
+Add Amp rule profile with AGENT.md and MCP config

.changeset/quiet-rabbits-bathe.md

@@ -1,10 +0,0 @@
----
-"task-master-ai": patch
----
-
-Fix max_tokens limits for OpenRouter and Groq models
-
-- Add special handling in config-manager.js for custom OpenRouter models to use a conservative default of 32,768 max_tokens
-- Update qwen/qwen-turbo model max_tokens from 1,000,000 to 32,768 to match OpenRouter's actual limits
-- Fix moonshotai/kimi-k2-instruct max_tokens to 16,384 to match Groq's actual limit (fixes #1028)
-- This prevents "maximum context length exceeded" errors when using OpenRouter models not in our supported models list

.changeset/swift-otters-argue.md

@@ -1,5 +0,0 @@
----
-"task-master-ai": patch
----
-
-Fix VSCode profile generation to use correct rule file names (using `.instructions.md` extension instead of `.md`) and front-matter properties (removing the unsupported `alwaysApply` property from instructions files' front-matter).

.changeset/swift-turtles-sit.md

@@ -0,0 +1,5 @@
+---
+"task-master-ai": patch
+---
+
+Add MCP configuration support to Claude Code rules

.changeset/yellow-showers-heal.md

@@ -0,0 +1,7 @@
+---
+"task-master-ai": minor
+---
+
+Add OpenCode profile with AGENTS.md and MCP config
+
+- Resolves #965

.changeset/yummy-walls-eat.md

@@ -0,0 +1,5 @@
+---
+"task-master-ai": patch
+---
+
+Add missing API keys to .env.example and README.md

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,45 @@
+# What type of PR is this?
+<!-- Check one -->
+
+ - [ ] 🐛 Bug fix
+ - [ ] ✨ Feature
+ - [ ] 🔌 Integration
+ - [ ] 📝 Docs
+ - [ ] 🧹 Refactor
+ - [ ] Other:
+## Description
+<!-- What does this PR do? -->
+
+## Related Issues
+<!-- Link issues: Fixes #123 -->
+
+## How to Test This
+<!-- Quick steps to verify the changes work -->
+```bash
+# Example commands or steps
+```
+
+**Expected result:**
+<!-- What should happen? -->
+
+## Contributor Checklist
+
+- [ ] Created changeset: `npm run changeset`
+- [ ] Tests pass: `npm test`
+- [ ] Format check passes: `npm run format-check` (or `npm run format` to fix)
+- [ ] Addressed CodeRabbit comments (if any)
+- [ ] Linked related issues (if any)
+- [ ] Manually tested the changes
+
+## Changelog Entry
+<!-- One line describing the change for users -->
+<!-- Example: "Added Kiro IDE integration with automatic task status updates" -->
+
+---
+
+### For Maintainers
+
+- [ ] PR title follows conventional commits
+- [ ] Target branch correct
+- [ ] Labels added
+- [ ] Milestone assigned (if applicable)

.github/PULL_REQUEST_TEMPLATE/bugfix.md

@@ -0,0 +1,39 @@
+## 🐛 Bug Fix
+
+### 🔍 Bug Description
+<!-- Describe the bug -->
+
+### 🔗 Related Issues
+<!-- Fixes #123 -->
+
+### ✨ Solution
+<!-- How does this PR fix the bug? -->
+
+## How to Test
+
+### Steps that caused the bug:
+1. 
+2. 
+
+**Before fix:** 
+**After fix:** 
+
+### Quick verification:
+```bash
+# Commands to verify the fix
+```
+
+## Contributor Checklist
+- [ ] Created changeset: `npm run changeset`
+- [ ] Tests pass: `npm test`
+- [ ] Format check passes: `npm run format-check`
+- [ ] Addressed CodeRabbit comments
+- [ ] Added unit tests (if applicable)
+- [ ] Manually verified the fix works
+
+---
+
+### For Maintainers
+- [ ] Root cause identified
+- [ ] Fix doesn't introduce new issues
+- [ ] CI passes

.github/PULL_REQUEST_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 🐛 Bug Fix
+    url: https://github.com/eyaltoledano/claude-task-master/compare/next...HEAD?template=bugfix.md
+    about: Fix a bug in Task Master
+  - name: ✨ New Feature
+    url: https://github.com/eyaltoledano/claude-task-master/compare/next...HEAD?template=feature.md
+    about: Add a new feature to Task Master
+  - name: 🔌 New Integration
+    url: https://github.com/eyaltoledano/claude-task-master/compare/next...HEAD?template=integration.md
+    about: Add support for a new tool, IDE, or platform

.github/PULL_REQUEST_TEMPLATE/feature.md

@@ -0,0 +1,49 @@
+## ✨ New Feature
+
+### 📋 Feature Description
+<!-- Brief description -->
+
+### 🎯 Problem Statement
+<!-- What problem does this feature solve? Why is it needed? -->
+
+### 💡 Solution
+<!-- How does this feature solve the problem? What's the approach? -->
+
+### 🔗 Related Issues
+<!-- Link related issues: Fixes #123, Part of #456 -->
+
+## How to Use It
+
+### Quick Start
+```bash
+# Basic usage example
+```
+
+### Example
+<!-- Show a real use case -->
+```bash
+# Practical example
+```
+
+**What you should see:**
+<!-- Expected behavior -->
+
+## Contributor Checklist
+- [ ] Created changeset: `npm run changeset`
+- [ ] Tests pass: `npm test`
+- [ ] Format check passes: `npm run format-check`
+- [ ] Addressed CodeRabbit comments
+- [ ] Added tests for new functionality
+- [ ] Manually tested in CLI mode
+- [ ] Manually tested in MCP mode (if applicable)
+
+## Changelog Entry
+<!-- One-liner for release notes -->
+
+---
+
+### For Maintainers
+
+- [ ] Feature aligns with project vision
+- [ ] CIs pass
+- [ ] Changeset file exists

.github/PULL_REQUEST_TEMPLATE/integration.md

@@ -0,0 +1,53 @@
+# 🔌 New Integration
+
+## What tool/IDE is being integrated?
+
+<!-- Name and brief description -->
+
+## What can users do with it?
+
+<!-- Key benefits -->
+
+## How to Enable
+
+### Setup
+
+```bash
+task-master rules add [name]
+# Any other setup steps
+```
+
+### Example Usage
+
+<!-- Show it in action -->
+
+```bash
+# Real example
+```
+
+### Natural Language Hooks (if applicable)
+
+```
+"When tests pass, mark task as done"
+# Other examples
+```
+
+## Contributor Checklist
+
+- [ ] Created changeset: `npm run changeset`
+- [ ] Tests pass: `npm test`
+- [ ] Format check passes: `npm run format-check`
+- [ ] Addressed CodeRabbit comments
+- [ ] Integration fully tested with target tool/IDE
+- [ ] Error scenarios tested
+- [ ] Added integration tests
+- [ ] Documentation includes setup guide
+- [ ] Examples are working and clear
+
+---
+
+## For Maintainers
+
+- [ ] Integration stability verified
+- [ ] Documentation comprehensive
+- [ ] Examples working

.github/workflows/extension-ci.yml

@@ -0,0 +1,203 @@
+name: Extension CI
+
+on:
+  push:
+    branches:
+      - main
+      - next
+    paths:
+      - 'apps/extension/**'
+      - '.github/workflows/extension-ci.yml'
+  pull_request:
+    branches:
+      - main
+      - next
+    paths:
+      - 'apps/extension/**'
+      - '.github/workflows/extension-ci.yml'
+
+permissions:
+  contents: read
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=${{ runner.os }}-extension-pnpm-${{ hashFiles('apps/extension/pnpm-lock.yaml') }}" >> $GITHUB_OUTPUT
+
+      - name: Cache pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            apps/extension/node_modules
+          key: ${{ steps.cache-key.outputs.key }}
+          restore-keys: |
+            ${{ runner.os }}-extension-pnpm-
+
+      - name: Install Extension Dependencies
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile
+        timeout-minutes: 5
+
+  lint-and-typecheck:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Restore pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            apps/extension/node_modules
+          key: ${{ needs.setup.outputs.cache-key }}
+
+      - name: Install if cache miss
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile --prefer-offline
+        timeout-minutes: 3
+
+      - name: Lint Extension
+        working-directory: apps/extension
+        run: pnpm run lint
+        env:
+          FORCE_COLOR: 1
+
+      - name: Type Check Extension
+        working-directory: apps/extension
+        run: pnpm run check-types
+        env:
+          FORCE_COLOR: 1
+
+  build:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Restore pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            apps/extension/node_modules
+          key: ${{ needs.setup.outputs.cache-key }}
+
+      - name: Install if cache miss
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile --prefer-offline
+        timeout-minutes: 3
+
+      - name: Build Extension
+        working-directory: apps/extension
+        run: pnpm run build
+        env:
+          FORCE_COLOR: 1
+
+      - name: Package Extension
+        working-directory: apps/extension
+        run: pnpm run package
+        env:
+          FORCE_COLOR: 1
+
+      - name: Verify Package Contents
+        working-directory: apps/extension
+        run: |
+          echo "Checking vsix-build contents..."
+          ls -la vsix-build/
+          echo "Checking dist contents..."
+          ls -la vsix-build/dist/
+          echo "Checking package.json exists..."
+          test -f vsix-build/package.json
+
+      - name: Create VSIX Package (Test)
+        working-directory: apps/extension/vsix-build
+        run: pnpm exec vsce package --no-dependencies
+        env:
+          FORCE_COLOR: 1
+
+      - name: Upload Extension Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-package
+          path: |
+            apps/extension/vsix-build/*.vsix
+            apps/extension/dist/
+          retention-days: 30
+
+  test:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Restore pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            apps/extension/node_modules
+          key: ${{ needs.setup.outputs.cache-key }}
+
+      - name: Install if cache miss
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile --prefer-offline
+        timeout-minutes: 3
+
+      - name: Run Extension Tests
+        working-directory: apps/extension
+        run: xvfb-run -a pnpm run test
+        env:
+          CI: true
+          FORCE_COLOR: 1
+        timeout-minutes: 10
+
+      - name: Upload Test Results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-test-results
+          path: apps/extension/test-results
+          retention-days: 30

.github/workflows/extension-release.yml

@@ -0,0 +1,240 @@
+name: Extension Release
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'apps/extension/**'
+  workflow_dispatch:
+    inputs:
+      force_publish:
+        description: 'Force publish even without version changes'
+        required: false
+        default: false
+        type: boolean
+
+permissions:
+  contents: read
+
+concurrency: extension-release-${{ github.ref }}
+
+jobs:
+  check-version:
+    runs-on: ubuntu-latest
+    outputs:
+      should-publish: ${{ steps.version-check.outputs.should-publish }}
+      current-version: ${{ steps.version-check.outputs.current-version }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check version changes
+        id: version-check
+        run: |
+          # Get current version from package.json
+          CURRENT_VERSION=$(jq -r '.version' apps/extension/package.json)
+          echo "current-version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+          
+          # Check if this is a force publish
+          if [ "${{ github.event.inputs.force_publish }}" = "true" ]; then
+            echo "should-publish=true" >> $GITHUB_OUTPUT
+            echo "Force publish requested"
+            exit 0
+          fi
+          
+          # Check if version changed in the last commit
+          if git diff HEAD~1 HEAD --name-only | grep -q "apps/extension/package.json\|apps/extension/package.publish.json"; then
+            # Check if version field actually changed
+            PREV_VERSION=$(git show HEAD~1:apps/extension/package.json | jq -r '.version')
+            if [ "$CURRENT_VERSION" != "$PREV_VERSION" ]; then
+              echo "should-publish=true" >> $GITHUB_OUTPUT
+              echo "Version changed from $PREV_VERSION to $CURRENT_VERSION"
+            else
+              echo "should-publish=false" >> $GITHUB_OUTPUT
+              echo "No version change detected"
+            fi
+          else
+            echo "should-publish=false" >> $GITHUB_OUTPUT
+            echo "No package.json changes detected"
+          fi
+
+  build-and-publish:
+    needs: check-version
+    if: needs.check-version.outputs.should-publish == 'true'
+    runs-on: ubuntu-latest
+    environment: extension-release
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Cache pnpm dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.pnpm-store
+            apps/extension/node_modules
+          key: ${{ runner.os }}-extension-pnpm-${{ hashFiles('apps/extension/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-extension-pnpm-
+
+      - name: Install Extension Dependencies
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile
+        timeout-minutes: 5
+
+      - name: Run Tests
+        working-directory: apps/extension
+        run: xvfb-run -a pnpm run test
+        env:
+          CI: true
+          FORCE_COLOR: 1
+        timeout-minutes: 10
+
+      - name: Lint Extension
+        working-directory: apps/extension
+        run: pnpm run lint
+        env:
+          FORCE_COLOR: 1
+
+      - name: Type Check Extension
+        working-directory: apps/extension
+        run: pnpm run check-types
+        env:
+          FORCE_COLOR: 1
+
+      - name: Build Extension
+        working-directory: apps/extension
+        run: pnpm run build
+        env:
+          FORCE_COLOR: 1
+
+      - name: Package Extension
+        working-directory: apps/extension
+        run: pnpm run package
+        env:
+          FORCE_COLOR: 1
+
+      - name: Verify Package Structure
+        working-directory: apps/extension
+        run: |
+          echo "=== Checking vsix-build structure ==="
+          ls -la vsix-build/
+          echo "=== Checking dist contents ==="
+          ls -la vsix-build/dist/
+          echo "=== Verifying required files ==="
+          test -f vsix-build/package.json || (echo "Missing package.json" && exit 1)
+          test -f vsix-build/dist/extension.js || (echo "Missing extension.js" && exit 1)
+          echo "=== Checking package.json content ==="
+          cat vsix-build/package.json | jq '.name, .version, .publisher'
+
+      - name: Create VSIX Package
+        working-directory: apps/extension/vsix-build
+        run: pnpm exec vsce package --no-dependencies
+        env:
+          FORCE_COLOR: 1
+
+      - name: Get VSIX filename
+        id: vsix-info
+        working-directory: apps/extension/vsix-build
+        run: |
+          VSIX_FILE=$(ls *.vsix)
+          echo "vsix-filename=$VSIX_FILE" >> $GITHUB_OUTPUT
+          echo "Found VSIX: $VSIX_FILE"
+
+      - name: Validate VSIX Package
+        working-directory: apps/extension/vsix-build
+        run: |
+          echo "=== VSIX Package Contents ==="
+          unzip -l "${{ steps.vsix-info.outputs.vsix-filename }}"
+
+      - name: Publish to VS Code Marketplace
+        working-directory: apps/extension/vsix-build
+        run: pnpm exec vsce publish --packagePath "${{ steps.vsix-info.outputs.vsix-filename }}"
+        env:
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}
+          FORCE_COLOR: 1
+
+      - name: Install Open VSX CLI
+        run: npm install -g ovsx
+
+      - name: Publish to Open VSX Registry
+        working-directory: apps/extension/vsix-build
+        run: ovsx publish "${{ steps.vsix-info.outputs.vsix-filename }}"
+        env:
+          OVSX_PAT: ${{ secrets.OVSX_PAT }}
+          FORCE_COLOR: 1
+
+      - name: Create GitHub Release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: extension-v${{ needs.check-version.outputs.current-version }}
+          release_name: Extension v${{ needs.check-version.outputs.current-version }}
+          body: |
+            VS Code Extension Release v${{ needs.check-version.outputs.current-version }}
+            
+            **Changes in this release:**
+            - Published to VS Code Marketplace
+            - Published to Open VSX Registry
+            - Extension package: `${{ steps.vsix-info.outputs.vsix-filename }}`
+            
+            **Installation:**
+            - Install from VS Code Marketplace: [Task Master Kanban](https://marketplace.visualstudio.com/items?itemName=[TBD])
+            - Install from Open VSX Registry: [Task Master Kanban](https://open-vsx.org/extension/[TBD])
+            - Or download the VSIX file below and install manually
+          draft: false
+          prerelease: false
+
+      - name: Upload VSIX to Release
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: apps/extension/vsix-build/${{ steps.vsix-info.outputs.vsix-filename }}
+          asset_name: ${{ steps.vsix-info.outputs.vsix-filename }}
+          asset_content_type: application/zip
+
+      - name: Upload Build Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: extension-release-v${{ needs.check-version.outputs.current-version }}
+          path: |
+            apps/extension/vsix-build/*.vsix
+            apps/extension/dist/
+          retention-days: 90
+
+  notify-success:
+    needs: [check-version, build-and-publish]
+    if: success() && needs.check-version.outputs.should-publish == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Success Notification
+        run: |
+          echo "🎉 Extension v${{ needs.check-version.outputs.current-version }} successfully published!"
+          echo "📦 Available on VS Code Marketplace"
+          echo "🌍 Available on Open VSX Registry"
+          echo "🏷️ GitHub release created: extension-v${{ needs.check-version.outputs.current-version }}"
+
+  notify-skipped:
+    needs: check-version
+    if: needs.check-version.outputs.should-publish == 'false'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skip Notification
+        run: |
+          echo "ℹ️ Extension publish skipped - no version changes detected"
+          echo "Current version: ${{ needs.check-version.outputs.current-version }}"
+          echo "To force publish, use workflow_dispatch with force_publish=true" 

.github/workflows/version.yml

@@ -0,0 +1,69 @@
+name: Version & Publish
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  version:
+    name: Version & Publish Extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install root dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install extension dependencies
+        working-directory: apps/extension
+        run: pnpm install --frozen-lockfile
+
+      - name: Install vsce and ovsx globally
+        run: pnpm add -g @vscode/vsce ovsx
+
+      - name: Make release script executable
+        run: chmod +x scripts/release.sh
+
+      - name: Create Release Pull Request or Publish
+        uses: changesets/action@v1
+        with:
+          publish: ./scripts/release.sh
+          title: "Release: Extension Version Packages"
+          commit: "chore: release extension packages"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}
+          OVSX_PAT: ${{ secrets.OVSX_PAT }} 

.gitignore

@@ -87,3 +87,6 @@ dev-debug.log
 *.njsproj
 *.sln
 *.sw?
+
+# apps/extension
+apps/extension/vsix-build/

CHANGELOG.md

@@ -1,5 +1,52 @@
 # task-master-ai
 
+## 0.22.0
+
+### Minor Changes
+
+- [#1043](https://github.com/eyaltoledano/claude-task-master/pull/1043) [`dc44ed9`](https://github.com/eyaltoledano/claude-task-master/commit/dc44ed9de8a57aca5d39d3a87565568bd0a82068) Thanks [@Crunchyman-ralph](https://github.com/Crunchyman-ralph)! - Prompt to generate a complexity report when it is missing
+
+- [#1032](https://github.com/eyaltoledano/claude-task-master/pull/1032) [`4423119`](https://github.com/eyaltoledano/claude-task-master/commit/4423119a5ec53958c9dffa8bf564da8be7a2827d) Thanks [@Crunchyman-ralph](https://github.com/Crunchyman-ralph)! - Add comprehensive Kiro IDE integration with autonomous task management hooks
+  - **Kiro Profile**: Added full support for Kiro IDE with automatic installation of 7 Taskmaster agent hooks
+  - **Hook-Driven Workflow**: Introduced natural language automation hooks that eliminate manual task status updates
+  - **Automatic Hook Installation**: Hooks are now automatically copied to `.kiro/hooks/` when running `task-master rules add kiro`
+  - **Language-Agnostic Support**: All hooks support multiple programming languages (JS, Python, Go, Rust, Java, etc.)
+  - **Frontmatter Transformation**: Kiro rules use simplified `inclusion: always` format instead of Cursor's complex frontmatter
+  - **Special Rule**: Added `taskmaster_hooks_workflow.md` that guides AI assistants to prefer hook-driven completion
+
+  Key hooks included:
+  - Task Dependency Auto-Progression: Automatically starts tasks when dependencies complete
+  - Code Change Task Tracker: Updates task progress as you save files
+  - Test Success Task Completer: Marks tasks done when tests pass
+  - Daily Standup Assistant: Provides personalized task status summaries
+  - PR Readiness Checker: Validates task completion before creating pull requests
+  - Complexity Analyzer: Auto-expands complex tasks into manageable subtasks
+  - Git Commit Task Linker: Links commits to tasks for better traceability
+
+  This creates a truly autonomous development workflow where task management happens naturally as you code!
+
+### Patch Changes
+
+- [#1033](https://github.com/eyaltoledano/claude-task-master/pull/1033) [`7b90568`](https://github.com/eyaltoledano/claude-task-master/commit/7b9056832653464f934c91c22997077065d738c4) Thanks [@ben-vargas](https://github.com/ben-vargas)! - Fix compatibility with @google/gemini-cli-core v0.1.12+ by updating ai-sdk-provider-gemini-cli to v0.1.1.
+
+- [#1038](https://github.com/eyaltoledano/claude-task-master/pull/1038) [`77cc5e4`](https://github.com/eyaltoledano/claude-task-master/commit/77cc5e4537397642f2664f61940a101433ee6fb4) Thanks [@Crunchyman-ralph](https://github.com/Crunchyman-ralph)! - Fix 'expand --all' and 'show' commands to correctly handle tag contexts for complexity reports and task display.
+
+- [#1025](https://github.com/eyaltoledano/claude-task-master/pull/1025) [`8781794`](https://github.com/eyaltoledano/claude-task-master/commit/8781794c56d454697fc92c88a3925982d6b81205) Thanks [@joedanz](https://github.com/joedanz)! - Clean up remaining automatic task file generation calls
+
+- [#1035](https://github.com/eyaltoledano/claude-task-master/pull/1035) [`fb7d588`](https://github.com/eyaltoledano/claude-task-master/commit/fb7d588137e8c53b0d0f54bd1dd8d387648583ee) Thanks [@Crunchyman-ralph](https://github.com/Crunchyman-ralph)! - Fix max_tokens limits for OpenRouter and Groq models
+  - Add special handling in config-manager.js for custom OpenRouter models to use a conservative default of 32,768 max_tokens
+  - Update qwen/qwen-turbo model max_tokens from 1,000,000 to 32,768 to match OpenRouter's actual limits
+  - Fix moonshotai/kimi-k2-instruct max_tokens to 16,384 to match Groq's actual limit (fixes #1028)
+  - This prevents "maximum context length exceeded" errors when using OpenRouter models not in our supported models list
+
+- [#1027](https://github.com/eyaltoledano/claude-task-master/pull/1027) [`6ae66b2`](https://github.com/eyaltoledano/claude-task-master/commit/6ae66b2afbfe911340fa25e0236c3db83deaa7eb) Thanks [@andreswebs](https://github.com/andreswebs)! - Fix VSCode profile generation to use correct rule file names (using `.instructions.md` extension instead of `.md`) and front-matter properties (removing the unsupported `alwaysApply` property from instructions files' front-matter).
+
+## 0.22.0-rc.1
+
+### Minor Changes
+
+- [#1043](https://github.com/eyaltoledano/claude-task-master/pull/1043) [`dc44ed9`](https://github.com/eyaltoledano/claude-task-master/commit/dc44ed9de8a57aca5d39d3a87565568bd0a82068) Thanks [@Crunchyman-ralph](https://github.com/Crunchyman-ralph)! - Prompt to generate a complexity report when it is missing
+
 ## 0.22.0-rc.0
 
 ### Minor Changes

apps/extension/.vscodeignore

@@ -0,0 +1,25 @@
+# Ignore everything by default
+*
+
+# Only include specific essential files
+!package.json
+!README.md
+!CHANGELOG.md
+!LICENSE
+!icon.png
+!assets/**
+
+# Include only the built files we need (not source maps)
+!dist/extension.js
+!dist/index.js
+!dist/index.css
+
+# Exclude development documentation
+docs/extension-CI-setup.md
+docs/extension-DEV-guide.md
+
+# Exclude 
+assets/.DS_Store
+assets/banner.png
+
+

apps/extension/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Change Log
+
+## 1.0.0
+
+### Minor Changes
+
+- Add automated CI/CD pipeline for VS Code extension
+  - Add automated version management and publishing via changesets
+  - Create tag-extension script to manage extension-specific git tags
+  - Add automated publishing to VS Code Marketplace and Open VSX Registry
+  - Set up release script with proper build process integration
+  - Add version.yml workflow for automated releases on main branch pushes
+
+### Patch Changes
+
+- Test extension version automation
+  - Verify that extension versions are properly managed by changesets
+  - Ensure proper integration with the 3-file packaging system
+
+All notable changes to the vscode extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

apps/extension/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 David Maliglowka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/extension/README.md

@@ -0,0 +1,199 @@
+# Official TaskMaster AI Extension
+
+Transform your [TaskMaster AI](https://github.com/TaskMasterEYJ/task-master-ai) projects into a beautiful, interactive Kanban board directly in VS Code. Drag, drop, and manage your tasks with ease while maintaining real-time synchronization with your TaskMaster project files.
+
+![TaskMaster AI Kanban](https://img.shields.io/badge/VS%20Code-Extension-blue)
+![Free](https://img.shields.io/badge/Price-Free-brightgreen)
+![Version](https://img.shields.io/badge/Version-1.0.0-blue)
+
+## ✨ Features
+
+### 🎯 **Visual Task Management**
+- **Drag & Drop Kanban Board** - Intuitive task management with visual columns
+- **Real-time Synchronization** - Changes sync instantly with your TaskMaster project files
+- **Status Columns** - To Do, In Progress, Review, Done, and Deferred
+- **Task Details View** - View and edit implementation details, test strategies, and notes
+
+![Kanban Board](assets/screenshots/kanban-board.png)
+
+### 🤖 **AI-Powered Features**
+- **Task Content Generation** - Regenerate task descriptions using AI
+- **Smart Task Updates** - Append findings and progress notes automatically
+- **MCP Integration** - Seamless connection to TaskMaster AI via Model Context Protocol
+- **Intelligent Caching** - Smart performance optimization with background refresh
+
+![Task Details](assets/screenshots/task-details.png)
+
+### 🚀 **Performance & Usability**
+- **Offline Support** - Continue working even when disconnected
+- **Auto-refresh** - Automatic polling for task changes with smart frequency
+- **VS Code Native** - Perfectly integrated with VS Code themes and UI
+- **Modern Interface** - Built with ShadCN UI components and Tailwind CSS
+
+## 🛠️ Installation
+
+### Prerequisites
+
+1. **VS Code** 1.90.0 or higher
+2. **Node.js** 18.0 or higher (for TaskMaster MCP server)
+
+### Install the Extension
+
+1. **From VS Code Marketplace:**
+   - Click the **Install** button above
+   - The extension will be automatically added to your VS Code instance
+
+## 🚀 Quick Start
+
+### 1. **Initialize TaskMaster Project**
+If you don't have a TaskMaster project yet:
+```bash
+cd your-project
+   npx task-master-ai init
+   ```
+
+### 2. **Open Kanban Board**
+- **Command Palette** (Ctrl+Shift+P): `TaskMaster Kanban: Show Board`
+- **Or** the extension automatically activates when you have a `.taskmaster` folder in your workspace
+
+### 3. **MCP Server Setup**
+The extension automatically handles the TaskMaster MCP server connection:
+- **No manual installation required** - The extension spawns the MCP server automatically
+- **Uses npx by default** - Automatically downloads TaskMaster AI when needed
+- **Configurable** - You can customize the MCP server command in settings if needed
+
+### 4. **Start Managing Tasks**
+- **Drag tasks** between columns to change status
+- **Click tasks** to view detailed information
+- **Use AI features** to enhance task content
+- **Add subtasks** with the + button on parent tasks
+
+## 📋 Usage Guide
+
+### **Managing Tasks**
+
+| Action | How To |
+|--------|--------|
+| **Change Task Status** | Drag task to different column |
+| **View Details** | Click on any task |
+| **Edit Task** | Click task, then use edit controls |
+| **Add Subtask** | Click + button on parent task |
+| **Use AI Features** | Open task details and use AI panel |
+
+### **Kanban Columns**
+
+- **📝 To Do** - Tasks ready to be worked on
+- **⚡ In Progress** - Currently active tasks  
+- **👀 Review** - Tasks pending review or approval
+- **✅ Done** - Completed tasks
+- **⏸️ Deferred** - Postponed or blocked tasks
+
+### **AI-Powered Task Management**
+
+The extension integrates seamlessly with TaskMaster AI via MCP to provide:
+- **Smart Task Generation** - AI creates detailed implementation plans
+- **Progress Tracking** - Append timestamped notes and findings
+- **Content Enhancement** - Regenerate task descriptions for clarity
+- **Research Integration** - Get up-to-date information for your tasks
+
+## ⚙️ Configuration
+
+Access settings via **File → Preferences → Settings** and search for "TaskMaster":
+
+### **MCP Connection Settings**
+- **MCP Server Command** - Path to task-master-ai executable (default: `npx`)
+- **MCP Server Args** - Arguments for the server command (default: `-y`, `--package=task-master-ai`, `task-master-ai`)
+- **Connection Timeout** - Server response timeout (default: 30s)
+- **Auto Refresh** - Enable automatic task updates (default: enabled)
+
+### **UI Preferences**
+- **Theme** - Auto, Light, or Dark mode
+- **Show Completed Tasks** - Display done tasks in board (default: enabled)
+- **Task Display Limit** - Maximum tasks to show (default: 100)
+
+### **Performance Options**
+- **Cache Duration** - How long to cache task data (default: 5s)
+- **Concurrent Requests** - Max simultaneous API calls (default: 5)
+
+## 🔧 Troubleshooting
+
+### **Extension Not Loading**
+1. Ensure Node.js 18+ is installed
+2. Check workspace contains `.taskmaster` folder
+3. Restart VS Code
+4. Check Output panel (View → Output → TaskMaster Kanban)
+
+### **MCP Connection Issues**
+1. **Command not found**: Ensure Node.js and npx are in your PATH
+2. **Timeout errors**: Increase timeout in settings
+3. **Permission errors**: Check Node.js permissions
+4. **Network issues**: Verify internet connection for npx downloads
+
+### **Tasks Not Updating**
+1. Check MCP connection status in status bar
+2. Verify `.taskmaster/tasks/tasks.json` exists
+3. Try manual refresh: `TaskMaster Kanban: Check Connection`
+4. Review error logs in Output panel
+
+### **Performance Issues**
+1. Reduce task display limit in settings
+2. Increase cache duration
+3. Disable auto-refresh if needed
+4. Close other VS Code extensions temporarily
+
+## 🆘 Support & Resources
+
+### **Getting Help**
+- 📖 **Documentation**: [TaskMaster AI Docs](https://github.com/eyaltoledano/claude-task-master)
+- 🐛 **Report Issues**: [GitHub Issues](https://github.com/eyaltoledano/claude-task-master/issues)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/eyaltoledano/claude-task-master/discussions)
+
+### **Related Projects**
+- 📡 **MCP Protocol**: [Model Context Protocol](https://modelcontextprotocol.io/)
+
+## 🎯 Tips for Best Results
+
+### **Project Organization**
+- Use descriptive task titles
+- Add detailed implementation notes
+- Set appropriate task dependencies
+- Leverage AI features for complex tasks
+
+### **Workflow Optimization**
+- Review task details before starting work
+- Use subtasks for complex features
+- Update task status as you progress
+- Add findings and learnings to task notes
+
+### **Collaboration**
+- Keep task descriptions updated
+- Use consistent status conventions
+- Document decisions in task details
+- Share knowledge through task notes
+
+---
+
+## 🏆 Why TaskMaster Kanban?
+
+✅ **Visual workflow management** for your TaskMaster projects  
+✅ **AI-powered task enhancement** built right in  
+✅ **Real-time synchronization** keeps everything in sync  
+✅ **Native VS Code integration** feels like part of the editor  
+✅ **Free and open source** with active development  
+
+**Transform your development workflow today!** 🚀
+
+---
+
+*Originally Made with ❤️ by [David Maliglowka](https://x.com/DavidMaliglowka)*
+
+## Support
+
+This is an open-source project maintained in my spare time. While I strive to fix bugs and improve the extension, support is provided on a best-effort basis. Feel free to:
+- Report issues on [GitHub](https://github.com/eyaltoledano/claude-task-master/issues)
+- Submit pull requests with improvements
+- Fork the project if you need specific modifications
+
+## Disclaimer
+
+This extension is provided "as is" without any warranties. Use at your own risk. The author is not responsible for any issues, data loss, or damages that may occur from using this extension. Please backup your work regularly and test thoroughly before using in important projects.

apps/extension/assets/icon-dark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 224 291" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M101.635 286.568L71.4839 256.414C65.6092 250.539 65.6092 241.03 71.4839 235.155L142.52 164.11C144.474 162.156 147.643 162.156 149.61 164.11L176.216 190.719C178.17 192.673 181.339 192.673 183.305 190.719L189.719 184.305C191.673 182.35 191.673 179.181 189.719 177.214L163.113 150.605C161.159 148.651 161.159 145.481 163.113 143.514L191.26 115.365C193.214 113.41 193.214 110.241 191.26 108.274L182.316 99.3291C180.362 97.3748 177.193 97.3748 175.226 99.3291L55.8638 218.706C49.989 224.581 40.4816 224.581 34.6068 218.706L4.4061 188.501C-1.4687 182.626 -1.4687 173.117 4.4061 167.242L23.8342 147.811C25.7883 145.857 25.7883 142.688 23.8342 140.721L4.78187 121.666C-1.09293 115.791 -1.09293 106.282 4.78187 100.406L34.7195 70.4527C40.5943 64.5772 50.1017 64.5772 55.9765 70.4527L75.555 90.0335C77.5091 91.9879 80.6782 91.9879 82.6448 90.0335L124.144 48.5292C126.098 46.5749 126.098 43.4054 124.144 41.4385L115.463 32.7568C113.509 30.8025 110.34 30.8025 108.374 32.7568L99.8683 41.2632C97.9143 43.2175 94.7451 43.2175 92.7785 41.2632L82.1438 30.6271C80.1897 28.6728 80.1897 25.5033 82.1438 23.5364L101.271 4.40662C107.146 -1.46887 116.653 -1.46887 122.528 4.40662L152.478 34.3604C158.353 40.2359 158.353 49.7444 152.478 55.6199L82.6323 125.474C80.6782 127.429 77.5091 127.429 75.5425 125.474L48.8741 98.8029C46.9201 96.8486 43.7509 96.8486 41.7843 98.8029L33.1036 107.485C31.1496 109.439 31.1496 112.608 33.1036 114.575L59.2458 140.721C61.1999 142.675 61.1999 145.844 59.2458 147.811L32.7404 174.32C30.7863 176.274 30.7863 179.444 32.7404 181.411L41.6841 190.355C43.6382 192.31 46.8073 192.31 48.7739 190.355L168.136 70.9789C174.011 65.1034 183.518 65.1034 189.393 70.9789L219.594 101.183C225.469 107.059 225.469 116.567 219.594 122.443L198.537 143.502C196.583 145.456 196.583 148.626 198.537 150.592L218.053 170.111C223.928 175.986 223.928 185.495 218.053 191.37L190.37 219.056C184.495 224.932 174.988 224.932 169.113 219.056L149.597 199.538C147.643 197.584 144.474 197.584 142.508 199.538L99.8057 242.245C97.8516 244.2 97.8516 247.369 99.8057 249.336L108.699 258.231C110.653 260.185 113.823 260.185 115.789 258.231L122.954 251.065C124.908 249.11 128.077 249.11 130.044 251.065L140.679 261.701C142.633 263.655 142.633 266.825 140.679 268.791L122.879 286.593C117.004 292.469 107.497 292.469 101.622 286.593L101.635 286.568Z" fill="#CCCCCC"/>
+</svg>

apps/extension/assets/icon-light.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 224 291" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M101.635 286.568L71.4839 256.414C65.6092 250.539 65.6092 241.03 71.4839 235.155L142.52 164.11C144.474 162.156 147.643 162.156 149.61 164.11L176.216 190.719C178.17 192.673 181.339 192.673 183.305 190.719L189.719 184.305C191.673 182.35 191.673 179.181 189.719 177.214L163.113 150.605C161.159 148.651 161.159 145.481 163.113 143.514L191.26 115.365C193.214 113.41 193.214 110.241 191.26 108.274L182.316 99.3291C180.362 97.3748 177.193 97.3748 175.226 99.3291L55.8638 218.706C49.989 224.581 40.4816 224.581 34.6068 218.706L4.4061 188.501C-1.4687 182.626 -1.4687 173.117 4.4061 167.242L23.8342 147.811C25.7883 145.857 25.7883 142.688 23.8342 140.721L4.78187 121.666C-1.09293 115.791 -1.09293 106.282 4.78187 100.406L34.7195 70.4527C40.5943 64.5772 50.1017 64.5772 55.9765 70.4527L75.555 90.0335C77.5091 91.9879 80.6782 91.9879 82.6448 90.0335L124.144 48.5292C126.098 46.5749 126.098 43.4054 124.144 41.4385L115.463 32.7568C113.509 30.8025 110.34 30.8025 108.374 32.7568L99.8683 41.2632C97.9143 43.2175 94.7451 43.2175 92.7785 41.2632L82.1438 30.6271C80.1897 28.6728 80.1897 25.5033 82.1438 23.5364L101.271 4.40662C107.146 -1.46887 116.653 -1.46887 122.528 4.40662L152.478 34.3604C158.353 40.2359 158.353 49.7444 152.478 55.6199L82.6323 125.474C80.6782 127.429 77.5091 127.429 75.5425 125.474L48.8741 98.8029C46.9201 96.8486 43.7509 96.8486 41.7843 98.8029L33.1036 107.485C31.1496 109.439 31.1496 112.608 33.1036 114.575L59.2458 140.721C61.1999 142.675 61.1999 145.844 59.2458 147.811L32.7404 174.32C30.7863 176.274 30.7863 179.444 32.7404 181.411L41.6841 190.355C43.6382 192.31 46.8073 192.31 48.7739 190.355L168.136 70.9789C174.011 65.1034 183.518 65.1034 189.393 70.9789L219.594 101.183C225.469 107.059 225.469 116.567 219.594 122.443L198.537 143.502C196.583 145.456 196.583 148.626 198.537 150.592L218.053 170.111C223.928 175.986 223.928 185.495 218.053 191.37L190.37 219.056C184.495 224.932 174.988 224.932 169.113 219.056L149.597 199.538C147.643 197.584 144.474 197.584 142.508 199.538L99.8057 242.245C97.8516 244.2 97.8516 247.369 99.8057 249.336L108.699 258.231C110.653 260.185 113.823 260.185 115.789 258.231L122.954 251.065C124.908 249.11 128.077 249.11 130.044 251.065L140.679 261.701C142.633 263.655 142.633 266.825 140.679 268.791L122.879 286.593C117.004 292.469 107.497 292.469 101.622 286.593L101.635 286.568Z" fill="#424242"/>
+</svg>

apps/extension/assets/sidebar-icon.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 224 291" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M101.635 286.568L71.4839 256.414C65.6092 250.539 65.6092 241.03 71.4839 235.155L142.52 164.11C144.474 162.156 147.643 162.156 149.61 164.11L176.216 190.719C178.17 192.673 181.339 192.673 183.305 190.719L189.719 184.305C191.673 182.35 191.673 179.181 189.719 177.214L163.113 150.605C161.159 148.651 161.159 145.481 163.113 143.514L191.26 115.365C193.214 113.41 193.214 110.241 191.26 108.274L182.316 99.3291C180.362 97.3748 177.193 97.3748 175.226 99.3291L55.8638 218.706C49.989 224.581 40.4816 224.581 34.6068 218.706L4.4061 188.501C-1.4687 182.626 -1.4687 173.117 4.4061 167.242L23.8342 147.811C25.7883 145.857 25.7883 142.688 23.8342 140.721L4.78187 121.666C-1.09293 115.791 -1.09293 106.282 4.78187 100.406L34.7195 70.4527C40.5943 64.5772 50.1017 64.5772 55.9765 70.4527L75.555 90.0335C77.5091 91.9879 80.6782 91.9879 82.6448 90.0335L124.144 48.5292C126.098 46.5749 126.098 43.4054 124.144 41.4385L115.463 32.7568C113.509 30.8025 110.34 30.8025 108.374 32.7568L99.8683 41.2632C97.9143 43.2175 94.7451 43.2175 92.7785 41.2632L82.1438 30.6271C80.1897 28.6728 80.1897 25.5033 82.1438 23.5364L101.271 4.40662C107.146 -1.46887 116.653 -1.46887 122.528 4.40662L152.478 34.3604C158.353 40.2359 158.353 49.7444 152.478 55.6199L82.6323 125.474C80.6782 127.429 77.5091 127.429 75.5425 125.474L48.8741 98.8029C46.9201 96.8486 43.7509 96.8486 41.7843 98.8029L33.1036 107.485C31.1496 109.439 31.1496 112.608 33.1036 114.575L59.2458 140.721C61.1999 142.675 61.1999 145.844 59.2458 147.811L32.7404 174.32C30.7863 176.274 30.7863 179.444 32.7404 181.411L41.6841 190.355C43.6382 192.31 46.8073 192.31 48.7739 190.355L168.136 70.9789C174.011 65.1034 183.518 65.1034 189.393 70.9789L219.594 101.183C225.469 107.059 225.469 116.567 219.594 122.443L198.537 143.502C196.583 145.456 196.583 148.626 198.537 150.592L218.053 170.111C223.928 175.986 223.928 185.495 218.053 191.37L190.37 219.056C184.495 224.932 174.988 224.932 169.113 219.056L149.597 199.538C147.643 197.584 144.474 197.584 142.508 199.538L99.8057 242.245C97.8516 244.2 97.8516 247.369 99.8057 249.336L108.699 258.231C110.653 260.185 113.823 260.185 115.789 258.231L122.954 251.065C124.908 249.11 128.077 249.11 130.044 251.065L140.679 261.701C142.633 263.655 142.633 266.825 140.679 268.791L122.879 286.593C117.004 292.469 107.497 292.469 101.622 286.593L101.635 286.568Z" fill="currentColor"/>
+</svg>

apps/extension/components.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/webview/index.css",
+		"baseColor": "slate",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib"
+	},
+	"iconLibrary": "lucide-react"
+}

apps/extension/docs/extension-CI-setup.md

@@ -0,0 +1,210 @@
+# VS Code Extension CI/CD Setup
+
+This document explains the CI/CD setup for the Task Master VS Code extension using automated changesets.
+
+## 🔄 Workflows Overview
+
+### 1. Extension CI (`extension-ci.yml`)
+
+#### Triggers
+
+- Push to `main` or `next` branches (only when extension files change)
+- Pull requests to `main` or `next` (only when extension files change)
+
+#### What it does
+
+- ✅ Lints and type-checks the extension code
+- 🔨 Builds the extension (`pnpm run build`)
+- 📦 Creates a clean package (`pnpm run package`)
+- 🧪 Runs tests with VS Code test framework
+- 📋 Creates a test VSIX package to verify packaging works
+- 💾 Uploads build artifacts for inspection
+
+### 2. Version & Publish (`version.yml`)
+
+**Triggers:**
+- Push to `main` branch
+
+**What it does:**
+- 🔍 Detects changeset files for pending releases
+- 📝 Creates "Version Packages" PR with updated versions and CHANGELOG
+- 🤖 When Version PR is merged, automatically:
+  - 🔨 Builds and packages the extension
+  - 🏷️ Creates git tags with changeset automation
+  - 📤 Publishes to VS Code Marketplace
+  - 🌍 Publishes to Open VSX Registry
+  - 📊 Updates package versions and CHANGELOG
+
+## 🚀 Changeset Workflow
+
+### Creating Changes
+When making changes to the extension:
+
+1. **Make your code changes**
+2. **Create a changeset**:
+   ```bash
+   # From project root
+   npx changeset add
+   ```
+3. **Select the extension package**: Choose `taskr-kanban` when prompted
+4. **Select version bump type**:
+   - `patch`: Bug fixes, minor updates
+   - `minor`: New features, backwards compatible
+   - `major`: Breaking changes
+5. **Write a summary**: Describe what changed for users
+6. **Commit changeset file** along with your code changes
+7. **Push to feature branch** and create PR
+
+### Automated Publishing Process
+1. **PR with changeset** gets merged to `main`
+2. **Version workflow** detects changesets and creates "Version Packages" PR
+3. **Review and merge** the Version PR
+4. **Automated publishing** happens immediately:
+   - Extension is built using 3-file packaging system
+   - VSIX package is created and tested
+   - Published to VS Code Marketplace (if `VSCE_PAT` is set)
+   - Published to Open VSX Registry (if `OVSX_PAT` is set)
+   - Git tags are created: `taskr-kanban@1.0.1`
+   - CHANGELOG is updated automatically
+
+## 🔑 Required Secrets
+
+To use the automated publishing, you need to set up these GitHub repository secrets:
+
+### `VSCE_PAT` (VS Code Marketplace Personal Access Token)
+1. Go to [Azure DevOps](https://dev.azure.com/)
+2. Sign in with your Microsoft account
+3. Create a Personal Access Token:
+   - **Name**: VS Code Extension Publishing
+   - **Organization**: All accessible organizations
+   - **Expiration**: Custom (recommend 1 year)
+   - **Scopes**: Custom defined → **Marketplace** → **Manage**
+4. Copy the token and add it to GitHub Secrets as `VSCE_PAT`
+
+### `OVSX_PAT` (Open VSX Registry Personal Access Token)
+1. Go to [Open VSX Registry](https://open-vsx.org/)
+2. Sign in with your GitHub account
+3. Go to your [User Settings](https://open-vsx.org/user-settings/tokens)
+4. Create a new Access Token:
+   - **Description**: VS Code Extension Publishing
+   - **Scopes**: Leave default (full access)
+5. Copy the token and add it to GitHub Secrets as `OVSX_PAT`
+
+### `GITHUB_TOKEN` (automatically provided)
+This is automatically available in GitHub Actions - no setup required.
+
+## 📋 Version Management
+
+### Changeset-Based Versioning
+Versions are automatically managed by changesets:
+
+- **No manual version updates needed** - changesets handle this automatically
+- **Semantic versioning** is enforced based on changeset types
+- **Changelog generation** happens automatically
+- **Git tagging** is handled by the automation
+
+### Critical Fields Sync
+The automation ensures these fields stay in sync between `package.json` and `package.publish.json`:
+
+```json
+{
+  "version": "1.0.2",                    // ✅ AUTO-SYNCED
+  "publisher": "Hamster",        // ⚠️ MUST MATCH MANUALLY
+  "displayName": "taskr: Task Master Kanban", // ⚠️ MUST MATCH MANUALLY
+  "description": "...",                  // ⚠️ MUST MATCH MANUALLY
+  "engines": { "vscode": "^1.93.0" },   // ⚠️ MUST MATCH MANUALLY
+  "categories": [...],                   // ⚠️ MUST MATCH MANUALLY
+  "contributes": { ... }                 // ⚠️ MUST MATCH MANUALLY
+}
+```
+
+**Note**: Only `version` is automatically synced. Other fields must be manually kept in sync.
+
+## 🔍 Monitoring Builds
+
+### CI Status
+- **Green ✅**: Extension builds and tests successfully
+- **Red ❌**: Build/test failures - check logs for details
+- **Yellow 🟡**: Partial success - some jobs may have warnings
+
+### Version PR Status
+- **Version PR Created**: Changesets detected, review and merge to publish
+- **No Version PR**: No changesets found, no releases pending
+- **Version PR Merged**: Automated publishing triggered
+
+### Release Status
+- **Published 🎉**: Extension live on VS Code Marketplace and Open VSX
+- **Skipped ℹ️**: No changesets found, no release needed
+- **Failed ❌**: Check logs - often missing secrets or build issues
+
+### Artifacts
+Workflows upload artifacts that you can download:
+- **CI**: Test results, built files, and VSIX package
+- **Version**: Final VSIX package and published extension
+
+## 🛠️ Troubleshooting
+
+### Common Issues
+
+#### No Version PR Created
+- **Check**: Changeset files exist in `.changeset/` directory
+- **Check**: Changeset refers to `taskr-kanban` package name
+- **Check**: Changes were pushed to `main` branch
+- **Solution**: Create changeset with `npx changeset add`
+
+#### Version PR Not Publishing
+- **Check**: Version PR was actually merged (not just closed)
+- **Check**: Required secrets (`VSCE_PAT`, `OVSX_PAT`) are set
+- **Check**: No build failures in workflow logs
+- **Solution**: Re-run workflow or check secret configuration
+
+#### `VSCE_PAT` is not set Error
+- Ensure `VSCE_PAT` secret is added to repository
+- Check token hasn't expired
+- Verify token has Marketplace → Manage permissions
+
+#### `OVSX_PAT` is not set Error
+- Ensure `OVSX_PAT` secret is added to repository
+- Check token hasn't expired
+- Verify you're signed in to Open VSX Registry with GitHub
+
+#### Build Failures
+- Check extension code compiles locally: `cd apps/extension && pnpm run build`
+- Verify tests pass locally: `pnpm run test`
+- Check for TypeScript errors: `pnpm run check-types`
+
+#### Packaging Failures
+- Ensure clean package builds: `pnpm run package`
+- Check vsix-build structure is correct
+- Verify `package.publish.json` has correct `repository` field
+
+#### Changeset Issues
+- **Wrong package name**: Ensure changeset refers to `taskr-kanban`
+- **Invalid format**: Check changeset markdown format is correct
+- **Merge conflicts**: Resolve any conflicts in changeset files
+
+## 📁 File Structure Impact
+
+The CI workflows respect the 3-file packaging system:
+- **Development**: Uses `package.json` for dependencies and scripts
+- **Release**: Uses `package.publish.json` for clean marketplace package
+- **Build**: Uses `package.mjs` to create `vsix-build/` for final packaging
+- **Changesets**: Automatically manage versions across the system
+
+## 🌍 Dual Registry Publishing
+
+Your extension will be automatically published to both:
+- **VS Code Marketplace** - For official VS Code users
+- **Open VSX Registry** - For Cursor, Windsurf, VSCodium, Gitpod, Eclipse Theia, and other compatible editors
+
+## 🎯 Benefits of Changeset Automation
+
+- ✅ **Automated versioning**: No manual version bumps needed
+- ✅ **Generated changelogs**: Automatic, accurate release notes
+- ✅ **Semantic versioning**: Enforced through changeset types
+- ✅ **Git tagging**: Proper tags for extension releases
+- ✅ **Conflict prevention**: Clear separation of extension vs. main package versions
+- ✅ **Review process**: Version changes are reviewable via PR
+- ✅ **Rollback capability**: Easy to revert if issues arise
+
+This ensures clean, predictable, and fully automated publishing to both registries! 🚀

apps/extension/docs/extension-development-guide.md

@@ -0,0 +1,256 @@
+# VS Code Extension Development Guide
+
+## 📁 File Structure Overview
+
+This VS Code extension uses a **3-file packaging system** to avoid dependency conflicts during publishing:
+
+```
+apps/extension/
+├── package.json           # Development configuration
+├── package.publish.json   # Clean publishing configuration  
+├── package.mjs           # Build script for packaging
+├── .vscodeignore         # Files to exclude from extension package
+└── vsix-build/           # Generated clean package directory
+```
+
+## 📋 File Purposes
+
+### `package.json` (Development)
+- **Purpose**: Development environment with all build tools
+- **Contains**: 
+  - All `devDependencies` needed for building
+  - Development scripts (`build`, `watch`, `lint`, etc.)
+  - Development package name: `"taskr"`
+- **Used for**: Local development, building, testing
+
+### `package.publish.json` (Publishing)
+- **Purpose**: Clean distribution version for VS Code Marketplace
+- **Contains**:
+  - **No devDependencies** (avoids dependency conflicts)
+  - Publishing metadata (`keywords`, `repository`, `categories`)
+  - Marketplace package name: `"taskr-kanban"`
+  - VS Code extension configuration
+- **Used for**: Final extension packaging
+
+### `package.mjs` (Build Script)
+- **Purpose**: Creates clean package for distribution
+- **Process**:
+  1. Builds the extension (`build:js` + `build:css`)
+  2. Creates clean `vsix-build/` directory
+  3. Copies only essential files (no source code)
+  4. Renames `package.publish.json` → `package.json`
+  5. Ready for `vsce package`
+
+## 🚀 Development Workflow
+
+### Local Development
+```bash
+# Install dependencies
+pnpm install
+
+# Start development with hot reload
+pnpm run watch
+
+# Run just JavaScript build
+pnpm run build:js
+
+# Run just CSS build  
+pnpm run build:css
+
+# Full production build
+pnpm run build
+
+# Type checking
+pnpm run check-types
+
+# Linting
+pnpm run lint
+```
+
+### Testing in VS Code
+1. Press `F5` in VS Code to launch Extension Development Host
+2. Test your extension functionality in the new window
+3. Use `Developer: Reload Window` to reload after changes
+
+## 📦 Production Packaging
+
+### Step 1: Build Clean Package
+```bash
+pnpm run package
+```
+This creates `vsix-build/` with clean distribution files.
+
+### Step 2: Create VSIX
+```bash
+cd vsix-build
+pnpm exec vsce package --no-dependencies
+```
+Creates: `taskr-kanban-1.0.1.vsix`
+
+### Alternative: One Command
+```bash
+pnpm run package && cd vsix-build && pnpm exec vsce package --no-dependencies
+```
+
+## 🔄 Keeping Files in Sync
+
+### Critical Fields to Sync Between Files
+
+When updating extension metadata, ensure these fields match between `package.json` and `package.publish.json`:
+
+#### Version & Identity
+```json
+{
+  "version": "1.0.1",                    // ⚠️ MUST MATCH
+  "publisher": "Hamster",        // ⚠️ MUST MATCH  
+  "displayName": "taskr: Task Master Kanban", // ⚠️ MUST MATCH
+  "description": "A visual Kanban board...",  // ⚠️ MUST MATCH
+}
+```
+
+#### VS Code Configuration
+```json
+{
+  "engines": { "vscode": "^1.101.0" },   // ⚠️ MUST MATCH
+  "categories": [...],                    // ⚠️ MUST MATCH
+  "activationEvents": [...],              // ⚠️ MUST MATCH
+  "main": "./dist/extension.js",          // ⚠️ MUST MATCH
+  "contributes": { ... }                  // ⚠️ MUST MATCH EXACTLY
+}
+```
+
+### Key Differences (Should NOT Match)
+```json
+// package.json (dev)
+{
+  "name": "taskr",                       // ✅ Short dev name
+  "devDependencies": { ... },            // ✅ Only in dev file
+  "scripts": { ... }                     // ✅ Build scripts
+}
+
+// package.publish.json (publishing)
+{
+  "name": "taskr-kanban",               // ✅ Marketplace name
+  "keywords": [...],                     // ✅ Only in publish file
+  "repository": "https://github.com/...", // ✅ Only in publish file
+  // NO devDependencies                  // ✅ Clean for publishing
+  // NO build scripts                    // ✅ Not needed in package
+}
+```
+
+## 🤖 Automated Release Process
+
+### Changesets Workflow
+This extension uses [Changesets](https://github.com/changesets/changesets) for automated version management and publishing.
+
+#### Adding Changes
+When making changes to the extension:
+
+1. **Make your code changes**
+2. **Create a changeset**:
+   ```bash
+   # From project root
+   npx changeset add
+   ```
+3. **Select the extension package**: Choose `taskr-kanban` when prompted
+4. **Select version bump type**:
+   - `patch`: Bug fixes, minor updates
+   - `minor`: New features, backwards compatible
+   - `major`: Breaking changes
+5. **Write a summary**: Describe what changed for users
+
+#### Automated Publishing
+The automation workflow runs on pushes to `main`:
+
+1. **Version Workflow** (`.github/workflows/version.yml`):
+   - Detects when changesets exist
+   - Creates a "Version Packages" PR with updated versions and CHANGELOG
+   - When the PR is merged, automatically publishes the extension
+
+2. **Release Process** (`scripts/release.sh`):
+   - Builds the extension using the 3-file packaging system
+   - Creates VSIX package
+   - Publishes to VS Code Marketplace (if `VSCE_PAT` is set)
+   - Publishes to Open VSX Registry (if `OVSX_PAT` is set)
+   - Creates git tags for the extension version
+
+#### Required Secrets
+For automated publishing, these secrets must be set in the repository:
+
+- `VSCE_PAT`: Personal Access Token for VS Code Marketplace
+- `OVSX_PAT`: Personal Access Token for Open VSX Registry
+- `GITHUB_TOKEN`: Automatically provided by GitHub Actions
+
+#### Manual Release
+If needed, you can manually trigger a release:
+
+```bash
+# From project root
+./scripts/release.sh
+```
+
+### Extension Tagging
+The extension uses a separate tagging strategy from the main package:
+
+- **Extension tags**: `taskr-kanban@1.0.1`
+- **Main package tags**: `task-master-ai@2.1.0`
+
+This allows independent versioning and prevents conflicts in the monorepo.
+
+## 🔍 Troubleshooting
+
+### Dependency Conflicts
+**Problem**: `vsce package` fails with missing dependencies
+**Solution**: Use the 3-file system - never run `vsce package` from root
+
+### Build Failures
+**Problem**: Extension not working after build
+**Check**:
+1. All files copied to `vsix-build/dist/`
+2. `package.publish.json` has correct `main` field
+3. VS Code engine version compatibility
+
+### Sync Issues
+**Problem**: Extension works locally but fails when packaged
+**Check**: Ensure critical fields are synced between package files
+
+### Changeset Issues
+**Problem**: Version workflow not triggering
+**Check**: 
+1. Changeset files exist in `.changeset/`
+2. Package name in changeset matches `package.publish.json`
+3. Changes are pushed to `main` branch
+
+**Problem**: Publishing fails
+**Check**:
+1. Required secrets are set in repository settings
+2. `package.publish.json` has correct repository URL
+3. Build process completes successfully
+
+## 📝 Version Release Checklist
+
+### Manual Releases
+1. **Create changeset**: `npx changeset add`
+2. **Update critical fields** in both `package.json` and `package.publish.json`
+3. **Test locally** with `F5` in VS Code
+4. **Commit and push** to trigger automated workflow
+
+### Automated Releases (Recommended)
+1. **Create changeset**: `npx changeset add`
+2. **Push to feature branch** and create PR
+3. **Merge PR** - this triggers version PR creation
+4. **Review and merge version PR** - this triggers automated publishing
+
+## 🎯 Why This System?
+
+- **Avoids dependency conflicts**: VS Code doesn't see dev dependencies
+- **Clean distribution**: Only essential files in final package
+- **Faster packaging**: No dependency resolution during `vsce package`
+- **Maintainable**: Clear separation of dev vs. production configs
+- **Reliable**: Consistent, conflict-free packaging process
+- **Automated**: Changesets handle versioning and publishing automatically
+- **Traceable**: Clear changelog and git tags for every release
+
+---
+
+**Remember**: Always use `npx changeset add` for changes, then push to trigger automated releases! 🚀 

apps/extension/esbuild.js

@@ -0,0 +1,173 @@
+const esbuild = require('esbuild');
+const path = require('path');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+	name: 'esbuild-problem-matcher',
+
+	setup(build) {
+		build.onStart(() => {
+			console.log('[watch] build started');
+		});
+		build.onEnd((result) => {
+			result.errors.forEach(({ text, location }) => {
+				console.error(`✘ [ERROR] ${text}`);
+				console.error(
+					`    ${location.file}:${location.line}:${location.column}:`
+				);
+			});
+			console.log('[watch] build finished');
+		});
+	}
+};
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const aliasPlugin = {
+	name: 'alias',
+	setup(build) {
+		// Handle @/ aliases for shadcn/ui
+		build.onResolve({ filter: /^@\// }, (args) => {
+			const resolvedPath = path.resolve(__dirname, 'src', args.path.slice(2));
+
+			// Try to resolve with common TypeScript extensions
+			const fs = require('fs');
+			const extensions = ['.tsx', '.ts', '.jsx', '.js'];
+
+			// Check if it's a file first
+			for (const ext of extensions) {
+				const fullPath = resolvedPath + ext;
+				if (fs.existsSync(fullPath)) {
+					return { path: fullPath };
+				}
+			}
+
+			// Check if it's a directory with index file
+			for (const ext of extensions) {
+				const indexPath = path.join(resolvedPath, 'index' + ext);
+				if (fs.existsSync(indexPath)) {
+					return { path: indexPath };
+				}
+			}
+
+			// Fallback to original behavior
+			return { path: resolvedPath };
+		});
+	}
+};
+
+async function main() {
+	// Build configuration for the VS Code extension
+	const extensionCtx = await esbuild.context({
+		entryPoints: ['src/extension.ts'],
+		bundle: true,
+		format: 'cjs',
+		minify: production,
+		sourcemap: !production ? 'inline' : false,
+		sourcesContent: !production,
+		platform: 'node',
+		outdir: 'dist',
+		external: ['vscode'],
+		logLevel: 'silent',
+		// Add production optimizations
+		...(production && {
+			drop: ['debugger'],
+			pure: ['console.log', 'console.debug', 'console.trace']
+		}),
+		plugins: [esbuildProblemMatcherPlugin, aliasPlugin]
+	});
+
+	// Build configuration for the React webview
+	const webviewCtx = await esbuild.context({
+		entryPoints: ['src/webview/index.tsx'],
+		bundle: true,
+		format: 'iife',
+		globalName: 'App',
+		minify: production,
+		sourcemap: !production ? 'inline' : false,
+		sourcesContent: !production,
+		platform: 'browser',
+		outdir: 'dist',
+		logLevel: 'silent',
+		target: ['es2020'],
+		jsx: 'automatic',
+		jsxImportSource: 'react',
+		external: ['*.css'],
+		// Bundle React with webview since it's not available in the runtime
+		// This prevents the multiple React instances issue
+		// Ensure React is resolved from the workspace root to avoid duplicates
+		alias: {
+			react: path.resolve(__dirname, '../../node_modules/react'),
+			'react-dom': path.resolve(__dirname, '../../node_modules/react-dom')
+		},
+		define: {
+			'process.env.NODE_ENV': production ? '"production"' : '"development"',
+			global: 'globalThis'
+		},
+		// Add production optimizations for webview too
+		...(production && {
+			drop: ['debugger'],
+			pure: ['console.log', 'console.debug', 'console.trace']
+		}),
+		plugins: [esbuildProblemMatcherPlugin, aliasPlugin]
+	});
+
+	// Build configuration for the React sidebar
+	const sidebarCtx = await esbuild.context({
+		entryPoints: ['src/webview/sidebar.tsx'],
+		bundle: true,
+		format: 'iife',
+		globalName: 'SidebarApp',
+		minify: production,
+		sourcemap: !production ? 'inline' : false,
+		sourcesContent: !production,
+		platform: 'browser',
+		outdir: 'dist',
+		logLevel: 'silent',
+		target: ['es2020'],
+		jsx: 'automatic',
+		jsxImportSource: 'react',
+		external: ['*.css'],
+		alias: {
+			react: path.resolve(__dirname, '../../node_modules/react'),
+			'react-dom': path.resolve(__dirname, '../../node_modules/react-dom')
+		},
+		define: {
+			'process.env.NODE_ENV': production ? '"production"' : '"development"',
+			global: 'globalThis'
+		},
+		...(production && {
+			drop: ['debugger'],
+			pure: ['console.log', 'console.debug', 'console.trace']
+		}),
+		plugins: [esbuildProblemMatcherPlugin, aliasPlugin]
+	});
+
+	if (watch) {
+		await Promise.all([
+			extensionCtx.watch(),
+			webviewCtx.watch(),
+			sidebarCtx.watch()
+		]);
+	} else {
+		await Promise.all([
+			extensionCtx.rebuild(),
+			webviewCtx.rebuild(),
+			sidebarCtx.rebuild()
+		]);
+		await extensionCtx.dispose();
+		await webviewCtx.dispose();
+		await sidebarCtx.dispose();
+	}
+}
+
+main().catch((e) => {
+	console.error(e);
+	process.exit(1);
+});

apps/extension/package.json

@@ -1,16 +1,281 @@
 {
 	"name": "extension",
 	"private": true,
-	"version": "0.20.0",
-	"main": "index.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
+	"displayName": "TaskMaster",
+	"description": "A visual Kanban board interface for TaskMaster projects in VS Code",
+	"version": "0.22.0",
+	"publisher": "Hamster",
+	"icon": "assets/icon.png",
+	"engines": {
+		"vscode": "^1.93.0"
+	},
+	"categories": ["AI", "Visualization", "Education", "Other"],
+	"main": "./dist/extension.js",
+	"contributes": {
+		"viewsContainers": {
+			"activitybar": [
+				{
+					"id": "taskmaster",
+					"title": "TaskMaster",
+					"icon": "assets/sidebar-icon.svg"
+				}
+			]
+		},
+		"views": {
+			"taskmaster": [
+				{
+					"id": "taskmaster.welcome",
+					"name": "TaskMaster",
+					"type": "webview"
+				}
+			]
+		},
+		"commands": [
+			{
+				"command": "tm.showKanbanBoard",
+				"title": "TaskMaster: Show Board",
+				"icon": "$(checklist)"
+			},
+			{
+				"command": "tm.checkConnection",
+				"title": "TaskMaster: Check Connection"
+			},
+			{
+				"command": "tm.reconnect",
+				"title": "TaskMaster: Reconnect"
+			},
+			{
+				"command": "tm.openSettings",
+				"title": "TaskMaster: Open Settings"
+			}
+		],
+		"menus": {
+			"view/title": [
+				{
+					"command": "tm.showKanbanBoard",
+					"when": "view == taskmaster.welcome",
+					"group": "navigation"
+				}
+			]
+		},
+		"configuration": {
+			"title": "TaskMaster Kanban",
+			"properties": {
+				"taskmaster.mcp.command": {
+					"type": "string",
+					"default": "npx",
+					"description": "The command or absolute path to execute for the MCP server (e.g., 'npx' or '/usr/local/bin/task-master-ai')."
+				},
+				"taskmaster.mcp.args": {
+					"type": "array",
+					"items": {
+						"type": "string"
+					},
+					"default": ["task-master-ai"],
+					"description": "An array of arguments to pass to the MCP server command."
+				},
+				"taskmaster.mcp.cwd": {
+					"type": "string",
+					"description": "Working directory for the TaskMaster MCP server (defaults to workspace root)"
+				},
+				"taskmaster.mcp.env": {
+					"type": "object",
+					"description": "Environment variables for the TaskMaster MCP server"
+				},
+				"taskmaster.mcp.timeout": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Connection timeout in milliseconds"
+				},
+				"taskmaster.mcp.maxReconnectAttempts": {
+					"type": "number",
+					"default": 5,
+					"minimum": 1,
+					"maximum": 20,
+					"description": "Maximum number of reconnection attempts"
+				},
+				"taskmaster.mcp.reconnectBackoffMs": {
+					"type": "number",
+					"default": 1000,
+					"minimum": 100,
+					"maximum": 10000,
+					"description": "Initial reconnection backoff delay in milliseconds"
+				},
+				"taskmaster.mcp.maxBackoffMs": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Maximum reconnection backoff delay in milliseconds"
+				},
+				"taskmaster.mcp.healthCheckIntervalMs": {
+					"type": "number",
+					"default": 15000,
+					"minimum": 5000,
+					"maximum": 60000,
+					"description": "Health check interval in milliseconds"
+				},
+				"taskmaster.mcp.requestTimeoutMs": {
+					"type": "number",
+					"default": 300000,
+					"minimum": 30000,
+					"maximum": 600000,
+					"description": "MCP request timeout in milliseconds (default: 5 minutes)"
+				},
+				"taskmaster.ui.autoRefresh": {
+					"type": "boolean",
+					"default": true,
+					"description": "Automatically refresh tasks from the server"
+				},
+				"taskmaster.ui.refreshIntervalMs": {
+					"type": "number",
+					"default": 10000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Auto-refresh interval in milliseconds"
+				},
+				"taskmaster.ui.theme": {
+					"type": "string",
+					"enum": ["auto", "light", "dark"],
+					"default": "auto",
+					"description": "UI theme preference"
+				},
+				"taskmaster.ui.showCompletedTasks": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show completed tasks in the Kanban board"
+				},
+				"taskmaster.ui.taskDisplayLimit": {
+					"type": "number",
+					"default": 100,
+					"minimum": 1,
+					"maximum": 1000,
+					"description": "Maximum number of tasks to display"
+				},
+				"taskmaster.ui.showPriority": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show task priority indicators"
+				},
+				"taskmaster.ui.showTaskIds": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show task IDs in the interface"
+				},
+				"taskmaster.performance.maxConcurrentRequests": {
+					"type": "number",
+					"default": 5,
+					"minimum": 1,
+					"maximum": 20,
+					"description": "Maximum number of concurrent MCP requests"
+				},
+				"taskmaster.performance.requestTimeoutMs": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Request timeout in milliseconds"
+				},
+				"taskmaster.performance.cacheTasksMs": {
+					"type": "number",
+					"default": 5000,
+					"minimum": 0,
+					"maximum": 60000,
+					"description": "Task cache duration in milliseconds"
+				},
+				"taskmaster.performance.lazyLoadThreshold": {
+					"type": "number",
+					"default": 50,
+					"minimum": 10,
+					"maximum": 500,
+					"description": "Number of tasks before enabling lazy loading"
+				},
+				"taskmaster.debug.enableLogging": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enable debug logging"
+				},
+				"taskmaster.debug.logLevel": {
+					"type": "string",
+					"enum": ["error", "warn", "info", "debug"],
+					"default": "info",
+					"description": "Logging level"
+				},
+				"taskmaster.debug.enableConnectionMetrics": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enable connection performance metrics"
+				},
+				"taskmaster.debug.saveEventLogs": {
+					"type": "boolean",
+					"default": false,
+					"description": "Save event logs to files"
+				},
+				"taskmaster.debug.maxEventLogSize": {
+					"type": "number",
+					"default": 1000,
+					"minimum": 10,
+					"maximum": 10000,
+					"description": "Maximum number of events to keep in memory"
+				}
+			}
+		}
+	},
+	"scripts": {
+		"vscode:prepublish": "npm run build",
+		"build": "npm run build:js && npm run build:css",
+		"build:js": "node ./esbuild.js --production",
+		"build:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --minify",
+		"package": "npm exec node ./package.mjs",
+		"package:direct": "node ./package.mjs",
+		"debug:env": "node ./debug-env.mjs",
+		"compile": "node ./esbuild.js",
+		"watch": "npm run watch:js & npm run watch:css",
+		"watch:js": "node ./esbuild.js --watch",
+		"watch:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --watch",
+		"test": "vscode-test",
+		"check-types": "tsc --noEmit"
 	},
-	"keywords": [],
-	"author": "",
-	"license": "ISC",
-	"description": "",
 	"devDependencies": {
-		"typescript": "^5.8.3"
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/modifiers": "^9.0.0",
+		"@modelcontextprotocol/sdk": "1.13.3",
+		"@radix-ui/react-collapsible": "^1.1.11",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-portal": "^1.1.9",
+		"@radix-ui/react-scroll-area": "^1.2.9",
+		"@radix-ui/react-separator": "^1.1.7",
+		"@radix-ui/react-slot": "^1.2.3",
+		"@tailwindcss/postcss": "^4.1.11",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "20.x",
+		"@types/react": "19.1.8",
+		"@types/react-dom": "19.1.6",
+		"@types/vscode": "^1.101.0",
+		"@vscode/test-cli": "^0.0.11",
+		"@vscode/test-electron": "^2.5.2",
+		"@vscode/vsce": "^2.32.0",
+		"autoprefixer": "10.4.21",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"esbuild": "^0.25.3",
+		"esbuild-postcss": "^0.0.4",
+		"fs-extra": "^11.3.0",
+		"lucide-react": "^0.525.0",
+		"npm-run-all": "^4.1.5",
+		"postcss": "8.5.6",
+		"tailwind-merge": "^3.3.1",
+		"tailwindcss": "4.1.11",
+		"typescript": "^5.8.3",
+		"@tanstack/react-query": "^5.83.0"
+	},
+	"pnpm": {
+		"overrides": {
+			"glob@<8": "^10.4.5",
+			"inflight": "npm:@tootallnate/once@2"
+		}
 	}
 }

apps/extension/package.mjs

@@ -0,0 +1,136 @@
+import { execSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
+
+// --- Configuration ---
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const packageDir = path.resolve(__dirname, 'vsix-build');
+// --- End Configuration ---
+
+try {
+	console.log('🚀 Starting packaging process...');
+
+	// 1. Build Project
+	console.log('\nBuilding JavaScript...');
+	execSync('pnpm run build:js', { stdio: 'inherit' });
+	console.log('\nBuilding CSS...');
+	execSync('pnpm run build:css', { stdio: 'inherit' });
+
+	// 2. Prepare Clean Directory
+	console.log(`\nPreparing clean directory at: ${packageDir}`);
+	fs.emptyDirSync(packageDir);
+
+	// 3. Copy Build Artifacts (excluding source maps)
+	console.log('Copying build artifacts...');
+	const distDir = path.resolve(__dirname, 'dist');
+	const targetDistDir = path.resolve(packageDir, 'dist');
+	fs.ensureDirSync(targetDistDir);
+
+	// Only copy the files we need (exclude .map files)
+	const filesToCopy = ['extension.js', 'index.js', 'index.css', 'sidebar.js'];
+	for (const file of filesToCopy) {
+		const srcFile = path.resolve(distDir, file);
+		const destFile = path.resolve(targetDistDir, file);
+		if (fs.existsSync(srcFile)) {
+			fs.copySync(srcFile, destFile);
+			console.log(`  - Copied dist/${file}`);
+		}
+	}
+
+	// 4. Copy additional files
+	const additionalFiles = ['README.md', 'CHANGELOG.md', 'AGENTS.md'];
+	for (const file of additionalFiles) {
+		if (fs.existsSync(path.resolve(__dirname, file))) {
+			fs.copySync(
+				path.resolve(__dirname, file),
+				path.resolve(packageDir, file)
+			);
+			console.log(`  - Copied ${file}`);
+		}
+	}
+
+	// 5. Sync versions and prepare the final package.json
+	console.log('Syncing versions and preparing the final package.json...');
+
+	// Read current versions
+	const devPackagePath = path.resolve(__dirname, 'package.json');
+	const publishPackagePath = path.resolve(__dirname, 'package.publish.json');
+
+	const devPackage = JSON.parse(fs.readFileSync(devPackagePath, 'utf8'));
+	const publishPackage = JSON.parse(
+		fs.readFileSync(publishPackagePath, 'utf8')
+	);
+
+	// Check if versions are in sync
+	if (devPackage.version !== publishPackage.version) {
+		console.log(
+			`  - Version sync needed: ${publishPackage.version} → ${devPackage.version}`
+		);
+		publishPackage.version = devPackage.version;
+
+		// Update the source package.publish.json file
+		fs.writeFileSync(
+			publishPackagePath,
+			JSON.stringify(publishPackage, null, '\t') + '\n'
+		);
+		console.log(
+			`  - Updated package.publish.json version to ${devPackage.version}`
+		);
+	} else {
+		console.log(`  - Versions already in sync: ${devPackage.version}`);
+	}
+
+	// Copy the (now synced) package.publish.json as package.json
+	fs.copySync(publishPackagePath, path.resolve(packageDir, 'package.json'));
+	console.log('  - Copied package.publish.json as package.json');
+
+	// 6. Copy .vscodeignore if it exists
+	if (fs.existsSync(path.resolve(__dirname, '.vscodeignore'))) {
+		fs.copySync(
+			path.resolve(__dirname, '.vscodeignore'),
+			path.resolve(packageDir, '.vscodeignore')
+		);
+		console.log('  - Copied .vscodeignore');
+	}
+
+	// 7. Copy LICENSE if it exists
+	if (fs.existsSync(path.resolve(__dirname, 'LICENSE'))) {
+		fs.copySync(
+			path.resolve(__dirname, 'LICENSE'),
+			path.resolve(packageDir, 'LICENSE')
+		);
+		console.log('  - Copied LICENSE');
+	}
+
+	// 7a. Copy assets directory if it exists
+	const assetsDir = path.resolve(__dirname, 'assets');
+	if (fs.existsSync(assetsDir)) {
+		const targetAssetsDir = path.resolve(packageDir, 'assets');
+		fs.copySync(assetsDir, targetAssetsDir);
+		console.log('  - Copied assets directory');
+	}
+
+	// Small delay to ensure file system operations complete
+	await new Promise((resolve) => setTimeout(resolve, 100));
+
+	// 8. Final step - manual packaging
+	console.log('\n✅ Build preparation complete!');
+	console.log('\nTo create the VSIX package, run:');
+	console.log(
+		'\x1b[36m%s\x1b[0m',
+		`cd vsix-build && pnpm exec vsce package --no-dependencies`
+	);
+
+	// Use the synced version for output
+	const finalVersion = devPackage.version;
+	console.log(
+		`\nYour extension will be packaged to: vsix-build/task-master-${finalVersion}.vsix`
+	);
+} catch (error) {
+	console.error('\n❌ Packaging failed!');
+	console.error(error.message);
+	process.exit(1);
+}

apps/extension/package.publish.json

@@ -0,0 +1,237 @@
+{
+	"name": "task-master-hamster",
+	"displayName": "TaskMaster AI",
+	"description": "A visual Kanban board interface for TaskMaster projects in VS Code",
+	"version": "0.22.0",
+	"publisher": "Hamster",
+	"icon": "assets/icon.png",
+	"engines": {
+		"vscode": "^1.93.0"
+	},
+	"categories": ["AI", "Visualization", "Education", "Other"],
+	"keywords": [
+		"kanban",
+		"kanban board",
+		"productivity",
+		"todo",
+		"task tracking",
+		"project management",
+		"task-master",
+		"task management",
+		"agile",
+		"scrum",
+		"ai",
+		"mcp",
+		"model context protocol",
+		"dashboard",
+		"chatgpt",
+		"claude",
+		"openai",
+		"anthropic",
+		"task",
+		"npm",
+		"intellicode",
+		"react",
+		"typescript",
+		"php",
+		"python",
+		"node",
+		"planner",
+		"organizer",
+		"workflow",
+		"boards",
+		"cards"
+	],
+	"repository": "https://github.com/eyaltoledano/claude-task-master",
+	"activationEvents": [
+		"onCommand:tm.showKanbanBoard",
+		"onCommand:tm.checkConnection",
+		"onCommand:tm.reconnect",
+		"onCommand:tm.openSettings"
+	],
+	"main": "./dist/extension.js",
+	"contributes": {
+		"commands": [
+			{
+				"command": "tm.showKanbanBoard",
+				"title": "TaskMaster: Show Board"
+			},
+			{
+				"command": "tm.checkConnection",
+				"title": "TaskMaster: Check Connection"
+			},
+			{
+				"command": "tm.reconnect",
+				"title": "TaskMaster: Reconnect"
+			},
+			{
+				"command": "tm.openSettings",
+				"title": "TaskMaster: Open Settings"
+			}
+		],
+		"configuration": {
+			"title": "TaskMaster Kanban",
+			"properties": {
+				"taskmaster.mcp.command": {
+					"type": "string",
+					"default": "npx",
+					"description": "The command or absolute path to execute for the MCP server (e.g., 'npx' or '/usr/local/bin/task-master-ai')."
+				},
+				"taskmaster.mcp.args": {
+					"type": "array",
+					"items": {
+						"type": "string"
+					},
+					"default": ["-y", "--package=task-master-ai", "task-master-ai"],
+					"description": "An array of arguments to pass to the MCP server command."
+				},
+				"taskmaster.mcp.cwd": {
+					"type": "string",
+					"description": "Working directory for the Task Master MCP server (defaults to workspace root)"
+				},
+				"taskmaster.mcp.env": {
+					"type": "object",
+					"description": "Environment variables for the Task Master MCP server"
+				},
+				"taskmaster.mcp.timeout": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Connection timeout in milliseconds"
+				},
+				"taskmaster.mcp.maxReconnectAttempts": {
+					"type": "number",
+					"default": 5,
+					"minimum": 1,
+					"maximum": 20,
+					"description": "Maximum number of reconnection attempts"
+				},
+				"taskmaster.mcp.reconnectBackoffMs": {
+					"type": "number",
+					"default": 1000,
+					"minimum": 100,
+					"maximum": 10000,
+					"description": "Initial reconnection backoff delay in milliseconds"
+				},
+				"taskmaster.mcp.maxBackoffMs": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Maximum reconnection backoff delay in milliseconds"
+				},
+				"taskmaster.mcp.healthCheckIntervalMs": {
+					"type": "number",
+					"default": 15000,
+					"minimum": 5000,
+					"maximum": 60000,
+					"description": "Health check interval in milliseconds"
+				},
+				"taskmaster.mcp.requestTimeoutMs": {
+					"type": "number",
+					"default": 300000,
+					"minimum": 30000,
+					"maximum": 600000,
+					"description": "MCP request timeout in milliseconds (default: 5 minutes)"
+				},
+				"taskmaster.ui.autoRefresh": {
+					"type": "boolean",
+					"default": true,
+					"description": "Automatically refresh tasks from the server"
+				},
+				"taskmaster.ui.refreshIntervalMs": {
+					"type": "number",
+					"default": 10000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Auto-refresh interval in milliseconds"
+				},
+				"taskmaster.ui.theme": {
+					"type": "string",
+					"enum": ["auto", "light", "dark"],
+					"default": "auto",
+					"description": "UI theme preference"
+				},
+				"taskmaster.ui.showCompletedTasks": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show completed tasks in the Kanban board"
+				},
+				"taskmaster.ui.taskDisplayLimit": {
+					"type": "number",
+					"default": 100,
+					"minimum": 1,
+					"maximum": 1000,
+					"description": "Maximum number of tasks to display"
+				},
+				"taskmaster.ui.showPriority": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show task priority indicators"
+				},
+				"taskmaster.ui.showTaskIds": {
+					"type": "boolean",
+					"default": true,
+					"description": "Show task IDs in the interface"
+				},
+				"taskmaster.performance.maxConcurrentRequests": {
+					"type": "number",
+					"default": 5,
+					"minimum": 1,
+					"maximum": 20,
+					"description": "Maximum number of concurrent MCP requests"
+				},
+				"taskmaster.performance.requestTimeoutMs": {
+					"type": "number",
+					"default": 30000,
+					"minimum": 1000,
+					"maximum": 300000,
+					"description": "Request timeout in milliseconds"
+				},
+				"taskmaster.performance.cacheTasksMs": {
+					"type": "number",
+					"default": 5000,
+					"minimum": 0,
+					"maximum": 60000,
+					"description": "Task cache duration in milliseconds"
+				},
+				"taskmaster.performance.lazyLoadThreshold": {
+					"type": "number",
+					"default": 50,
+					"minimum": 10,
+					"maximum": 500,
+					"description": "Number of tasks before enabling lazy loading"
+				},
+				"taskmaster.debug.enableLogging": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enable debug logging"
+				},
+				"taskmaster.debug.logLevel": {
+					"type": "string",
+					"enum": ["error", "warn", "info", "debug"],
+					"default": "info",
+					"description": "Logging level"
+				},
+				"taskmaster.debug.enableConnectionMetrics": {
+					"type": "boolean",
+					"default": true,
+					"description": "Enable connection performance metrics"
+				},
+				"taskmaster.debug.saveEventLogs": {
+					"type": "boolean",
+					"default": false,
+					"description": "Save event logs to files"
+				},
+				"taskmaster.debug.maxEventLogSize": {
+					"type": "number",
+					"default": 1000,
+					"minimum": 10,
+					"maximum": 10000,
+					"description": "Maximum number of events to keep in memory"
+				}
+			}
+		}
+	}
+}

apps/extension/src/components/ConfigView.tsx

@@ -0,0 +1,291 @@
+import { ArrowLeft, RefreshCw, Settings } from 'lucide-react';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle
+} from './ui/card';
+import { ScrollArea } from './ui/scroll-area';
+import { Separator } from './ui/separator';
+
+interface ModelConfig {
+	provider: string;
+	modelId: string;
+	maxTokens: number;
+	temperature: number;
+}
+
+interface ConfigData {
+	models?: {
+		main?: ModelConfig;
+		research?: ModelConfig;
+		fallback?: ModelConfig;
+	};
+	global?: {
+		defaultNumTasks?: number;
+		defaultSubtasks?: number;
+		defaultPriority?: string;
+		projectName?: string;
+		responseLanguage?: string;
+	};
+}
+
+interface ConfigViewProps {
+	sendMessage: (message: any) => Promise<any>;
+	onNavigateBack: () => void;
+}
+
+export const ConfigView: React.FC<ConfigViewProps> = ({
+	sendMessage,
+	onNavigateBack
+}) => {
+	const [config, setConfig] = useState<ConfigData | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	const loadConfig = async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const response = await sendMessage({ type: 'getConfig' });
+			setConfig(response);
+		} catch (err) {
+			setError('Failed to load configuration');
+			console.error('Error loading config:', err);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		loadConfig();
+	}, []);
+
+	const modelLabels = {
+		main: {
+			label: 'Main Model',
+			icon: '🤖',
+			description: 'Primary model for task generation'
+		},
+		research: {
+			label: 'Research Model',
+			icon: '🔍',
+			description: 'Model for research-backed operations'
+		},
+		fallback: {
+			label: 'Fallback Model',
+			icon: '🔄',
+			description: 'Backup model if primary fails'
+		}
+	};
+
+	return (
+		<div className="flex flex-col h-full bg-vscode-editor-background">
+			{/* Header */}
+			<div className="flex items-center justify-between px-4 py-3 border-b border-vscode-border">
+				<div className="flex items-center gap-3">
+					<Button
+						variant="ghost"
+						size="icon"
+						onClick={onNavigateBack}
+						className="h-8 w-8"
+					>
+						<ArrowLeft className="h-4 w-4" />
+					</Button>
+					<div className="flex items-center gap-2">
+						<Settings className="w-5 h-5" />
+						<h1 className="text-lg font-semibold">Task Master Configuration</h1>
+					</div>
+				</div>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={loadConfig}
+					className="h-8 w-8"
+				>
+					<RefreshCw className="h-4 w-4" />
+				</Button>
+			</div>
+
+			{/* Content */}
+			<ScrollArea className="flex-1 overflow-hidden">
+				<div className="p-6 pb-12">
+					{loading ? (
+						<div className="flex items-center justify-center py-8">
+							<RefreshCw className="w-6 h-6 animate-spin text-vscode-foreground/50" />
+						</div>
+					) : error ? (
+						<div className="text-red-500 text-center py-8">{error}</div>
+					) : config ? (
+						<div className="space-y-6 max-w-4xl mx-auto">
+							{/* Models Section */}
+							<Card>
+								<CardHeader>
+									<CardTitle>AI Models</CardTitle>
+									<CardDescription>
+										Models configured for different Task Master operations
+									</CardDescription>
+								</CardHeader>
+								<CardContent className="space-y-4">
+									{config.models &&
+										Object.entries(config.models).map(([key, modelConfig]) => {
+											const label =
+												modelLabels[key as keyof typeof modelLabels];
+											if (!label || !modelConfig) return null;
+
+											return (
+												<div key={key} className="space-y-2">
+													<div className="flex items-center gap-2">
+														<span className="text-lg">{label.icon}</span>
+														<div>
+															<h4 className="font-medium">{label.label}</h4>
+															<p className="text-xs text-vscode-foreground/60">
+																{label.description}
+															</p>
+														</div>
+													</div>
+													<div className="bg-vscode-input/20 rounded-md p-3 space-y-1">
+														<div className="flex justify-between">
+															<span className="text-sm text-vscode-foreground/80">
+																Provider:
+															</span>
+															<Badge variant="secondary">
+																{modelConfig.provider}
+															</Badge>
+														</div>
+														<div className="flex justify-between">
+															<span className="text-sm text-vscode-foreground/80">
+																Model:
+															</span>
+															<code className="text-xs font-mono bg-vscode-input/30 px-2 py-1 rounded">
+																{modelConfig.modelId}
+															</code>
+														</div>
+														<div className="flex justify-between">
+															<span className="text-sm text-vscode-foreground/80">
+																Max Tokens:
+															</span>
+															<span className="text-sm">
+																{modelConfig.maxTokens.toLocaleString()}
+															</span>
+														</div>
+														<div className="flex justify-between">
+															<span className="text-sm text-vscode-foreground/80">
+																Temperature:
+															</span>
+															<span className="text-sm">
+																{modelConfig.temperature}
+															</span>
+														</div>
+													</div>
+												</div>
+											);
+										})}
+								</CardContent>
+							</Card>
+
+							{/* Task Defaults Section */}
+							{config.global && (
+								<Card>
+									<CardHeader>
+										<CardTitle>Task Defaults</CardTitle>
+										<CardDescription>
+											Default values for new tasks and subtasks
+										</CardDescription>
+									</CardHeader>
+									<CardContent>
+										<div className="space-y-3">
+											<div className="flex justify-between items-center">
+												<span className="text-sm font-medium">
+													Default Number of Tasks
+												</span>
+												<Badge variant="outline">
+													{config.global.defaultNumTasks || 10}
+												</Badge>
+											</div>
+											<Separator />
+											<div className="flex justify-between items-center">
+												<span className="text-sm font-medium">
+													Default Number of Subtasks
+												</span>
+												<Badge variant="outline">
+													{config.global.defaultSubtasks || 5}
+												</Badge>
+											</div>
+											<Separator />
+											<div className="flex justify-between items-center">
+												<span className="text-sm font-medium">
+													Default Priority
+												</span>
+												<Badge
+													variant={
+														config.global.defaultPriority === 'high'
+															? 'destructive'
+															: config.global.defaultPriority === 'low'
+																? 'secondary'
+																: 'default'
+													}
+												>
+													{config.global.defaultPriority || 'medium'}
+												</Badge>
+											</div>
+											{config.global.projectName && (
+												<>
+													<Separator />
+													<div className="flex justify-between items-center">
+														<span className="text-sm font-medium">
+															Project Name
+														</span>
+														<span className="text-sm text-vscode-foreground/80">
+															{config.global.projectName}
+														</span>
+													</div>
+												</>
+											)}
+											{config.global.responseLanguage && (
+												<>
+													<Separator />
+													<div className="flex justify-between items-center">
+														<span className="text-sm font-medium">
+															Response Language
+														</span>
+														<span className="text-sm text-vscode-foreground/80">
+															{config.global.responseLanguage}
+														</span>
+													</div>
+												</>
+											)}
+										</div>
+									</CardContent>
+								</Card>
+							)}
+
+							{/* Info Card */}
+							<Card>
+								<CardContent className="pt-6">
+									<p className="text-sm text-vscode-foreground/60">
+										To modify these settings, go to{' '}
+										<code className="bg-vscode-input/30 px-1 py-0.5 rounded">
+											.taskmaster/config.json
+										</code>{' '}
+										and modify them, or use the MCP.
+									</p>
+								</CardContent>
+							</Card>
+						</div>
+					) : (
+						<div className="text-center py-8 text-vscode-foreground/50">
+							No configuration found. Please run `task-master init` in your
+							project.
+						</div>
+					)}
+				</div>
+			</ScrollArea>
+		</div>
+	);
+};

apps/extension/src/components/TaskDetails/AIActionsSection.tsx

@@ -0,0 +1,207 @@
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import { Wand2, Loader2, PlusCircle } from 'lucide-react';
+import {
+	useUpdateTask,
+	useUpdateSubtask
+} from '../../webview/hooks/useTaskQueries';
+import type { TaskMasterTask } from '../../webview/types';
+
+interface AIActionsSectionProps {
+	currentTask: TaskMasterTask;
+	isSubtask: boolean;
+	parentTask?: TaskMasterTask | null;
+	sendMessage: (message: any) => Promise<any>;
+	refreshComplexityAfterAI: () => void;
+	onRegeneratingChange?: (isRegenerating: boolean) => void;
+	onAppendingChange?: (isAppending: boolean) => void;
+}
+
+export const AIActionsSection: React.FC<AIActionsSectionProps> = ({
+	currentTask,
+	isSubtask,
+	parentTask,
+	sendMessage,
+	refreshComplexityAfterAI,
+	onRegeneratingChange,
+	onAppendingChange
+}) => {
+	const [prompt, setPrompt] = useState('');
+	const [lastAction, setLastAction] = useState<'regenerate' | 'append' | null>(
+		null
+	);
+	const updateTask = useUpdateTask();
+	const updateSubtask = useUpdateSubtask();
+
+	const handleRegenerate = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setLastAction('regenerate');
+		onRegeneratingChange?.(true);
+
+		try {
+			if (isSubtask && parentTask) {
+				await updateSubtask.mutateAsync({
+					taskId: `${parentTask.id}.${currentTask.id}`,
+					prompt: prompt,
+					options: { research: false }
+				});
+			} else {
+				await updateTask.mutateAsync({
+					taskId: currentTask.id,
+					updates: { description: prompt },
+					options: { append: false, research: false }
+				});
+			}
+
+			setPrompt('');
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to regenerate task:', error);
+		} finally {
+			setLastAction(null);
+			onRegeneratingChange?.(false);
+		}
+	};
+
+	const handleAppend = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setLastAction('append');
+		onAppendingChange?.(true);
+
+		try {
+			if (isSubtask && parentTask) {
+				await updateSubtask.mutateAsync({
+					taskId: `${parentTask.id}.${currentTask.id}`,
+					prompt: prompt,
+					options: { research: false }
+				});
+			} else {
+				await updateTask.mutateAsync({
+					taskId: currentTask.id,
+					updates: { description: prompt },
+					options: { append: true, research: false }
+				});
+			}
+
+			setPrompt('');
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to append to task:', error);
+		} finally {
+			setLastAction(null);
+			onAppendingChange?.(false);
+		}
+	};
+
+	// Track loading states based on the last action
+	const isLoading = updateTask.isPending || updateSubtask.isPending;
+	const isRegenerating = isLoading && lastAction === 'regenerate';
+	const isAppending = isLoading && lastAction === 'append';
+
+	return (
+		<CollapsibleSection
+			title="AI Actions"
+			icon={Wand2}
+			defaultExpanded={true}
+			buttonClassName="text-vscode-foreground/80 hover:text-vscode-foreground"
+		>
+			<div className="space-y-4">
+				<div>
+					<Label
+						htmlFor="ai-prompt"
+						className="block text-sm font-medium text-vscode-foreground/80 mb-2"
+					>
+						Enter your prompt
+					</Label>
+					<Textarea
+						id="ai-prompt"
+						placeholder={
+							isSubtask
+								? 'Describe implementation notes, progress updates, or findings to add to this subtask...'
+								: 'Describe what you want to change or add to this task...'
+						}
+						value={prompt}
+						onChange={(e) => setPrompt(e.target.value)}
+						className="min-h-[100px] bg-vscode-input-background border-vscode-input-border text-vscode-input-foreground placeholder-vscode-input-foreground/50 focus:border-vscode-focusBorder focus:ring-vscode-focusBorder"
+						disabled={isRegenerating || isAppending}
+					/>
+				</div>
+
+				<div className="flex gap-3">
+					{!isSubtask && (
+						<Button
+							onClick={handleRegenerate}
+							disabled={!prompt.trim() || isRegenerating || isAppending}
+							className="bg-primary text-primary-foreground hover:bg-primary/90"
+						>
+							{isRegenerating ? (
+								<>
+									<Loader2 className="w-4 h-4 mr-2 animate-spin" />
+									Regenerating...
+								</>
+							) : (
+								<>
+									<Wand2 className="w-4 h-4 mr-2" />
+									Regenerate Task
+								</>
+							)}
+						</Button>
+					)}
+
+					<Button
+						onClick={handleAppend}
+						disabled={!prompt.trim() || isRegenerating || isAppending}
+						variant={isSubtask ? 'default' : 'outline'}
+						className={
+							isSubtask
+								? 'bg-primary text-primary-foreground hover:bg-primary/90'
+								: 'bg-secondary text-secondary-foreground hover:bg-secondary/90 border-widget-border'
+						}
+					>
+						{isAppending ? (
+							<>
+								<Loader2 className="w-4 h-4 mr-2 animate-spin" />
+								{isSubtask ? 'Updating...' : 'Appending...'}
+							</>
+						) : (
+							<>
+								<PlusCircle className="w-4 h-4 mr-2" />
+								{isSubtask ? 'Add Notes to Subtask' : 'Append to Task'}
+							</>
+						)}
+					</Button>
+				</div>
+
+				<div className="text-xs text-vscode-foreground/60 space-y-1">
+					{isSubtask ? (
+						<p>
+							<strong>Add Notes:</strong> Appends timestamped implementation
+							notes, progress updates, or findings to this subtask's details
+						</p>
+					) : (
+						<>
+							<p>
+								<strong>Regenerate:</strong> Completely rewrites the task
+								description and subtasks based on your prompt
+							</p>
+							<p>
+								<strong>Append:</strong> Adds new content to the existing task
+								implementation details based on your prompt
+							</p>
+						</>
+					)}
+				</div>
+			</div>
+		</CollapsibleSection>
+	);
+};

apps/extension/src/components/TaskDetails/DetailsSection.tsx

@@ -0,0 +1,178 @@
+import type React from 'react';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+
+interface MarkdownRendererProps {
+	content: string;
+	className?: string;
+}
+
+const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+	content,
+	className = ''
+}) => {
+	const parseMarkdown = (text: string) => {
+		const parts = [];
+		const lines = text.split('\n');
+		let currentBlock = [];
+		let inCodeBlock = false;
+		let codeLanguage = '';
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+
+			if (line.startsWith('```')) {
+				if (inCodeBlock) {
+					if (currentBlock.length > 0) {
+						parts.push({
+							type: 'code',
+							content: currentBlock.join('\n'),
+							language: codeLanguage
+						});
+						currentBlock = [];
+					}
+					inCodeBlock = false;
+					codeLanguage = '';
+				} else {
+					if (currentBlock.length > 0) {
+						parts.push({
+							type: 'text',
+							content: currentBlock.join('\n')
+						});
+						currentBlock = [];
+					}
+					inCodeBlock = true;
+					codeLanguage = line.substring(3).trim();
+				}
+			} else {
+				currentBlock.push(line);
+			}
+		}
+
+		if (currentBlock.length > 0) {
+			parts.push({
+				type: inCodeBlock ? 'code' : 'text',
+				content: currentBlock.join('\n'),
+				language: codeLanguage
+			});
+		}
+
+		return parts;
+	};
+
+	const parts = parseMarkdown(content);
+
+	return (
+		<div className={className}>
+			{parts.map((part, index) => {
+				if (part.type === 'code') {
+					return (
+						<pre
+							key={index}
+							className="bg-vscode-editor-background rounded-md p-4 overflow-x-auto mb-4 border border-vscode-editor-lineHighlightBorder"
+						>
+							<code className="text-sm text-vscode-editor-foreground font-mono">
+								{part.content}
+							</code>
+						</pre>
+					);
+				}
+				return (
+					<div key={index} className="whitespace-pre-wrap mb-4 last:mb-0">
+						{part.content.split('\n').map((line, lineIndex) => {
+							const bulletMatch = line.match(/^(\s*)([-*])\s(.+)$/);
+							if (bulletMatch) {
+								const indent = bulletMatch[1].length;
+								return (
+									<div
+										key={lineIndex}
+										className="flex gap-2 mb-1"
+										style={{ paddingLeft: `${indent * 16}px` }}
+									>
+										<span className="text-vscode-foreground/60">•</span>
+										<span className="flex-1">{bulletMatch[3]}</span>
+									</div>
+								);
+							}
+
+							const numberedMatch = line.match(/^(\s*)(\d+\.)\s(.+)$/);
+							if (numberedMatch) {
+								const indent = numberedMatch[1].length;
+								return (
+									<div
+										key={lineIndex}
+										className="flex gap-2 mb-1"
+										style={{ paddingLeft: `${indent * 16}px` }}
+									>
+										<span className="text-vscode-foreground/60 font-mono">
+											{numberedMatch[2]}
+										</span>
+										<span className="flex-1">{numberedMatch[3]}</span>
+									</div>
+								);
+							}
+
+							const headingMatch = line.match(/^(#{1,6})\s(.+)$/);
+							if (headingMatch) {
+								const level = headingMatch[1].length;
+								const HeadingTag =
+									`h${Math.min(level + 2, 6)}` as keyof JSX.IntrinsicElements;
+								return (
+									<HeadingTag
+										key={lineIndex}
+										className="font-semibold text-vscode-foreground mb-2 mt-4 first:mt-0"
+									>
+										{headingMatch[2]}
+									</HeadingTag>
+								);
+							}
+
+							if (line.trim() === '') {
+								return <div key={lineIndex} className="h-2" />;
+							}
+
+							return (
+								<div key={lineIndex} className="mb-2 last:mb-0">
+									{line}
+								</div>
+							);
+						})}
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+interface DetailsSectionProps {
+	title: string;
+	content?: string;
+	error?: string | null;
+	emptyMessage?: string;
+	defaultExpanded?: boolean;
+}
+
+export const DetailsSection: React.FC<DetailsSectionProps> = ({
+	title,
+	content,
+	error,
+	emptyMessage = 'No details available',
+	defaultExpanded = false
+}) => {
+	return (
+		<CollapsibleSection title={title} defaultExpanded={defaultExpanded}>
+			<div className={title.toLowerCase().replace(/\s+/g, '-') + '-content'}>
+				{error ? (
+					<div className="text-sm text-red-400 py-2">
+						Error loading {title.toLowerCase()}: {error}
+					</div>
+				) : content !== undefined && content !== '' ? (
+					<MarkdownRenderer content={content} />
+				) : (
+					<div className="text-sm text-vscode-foreground/50 py-2">
+						{emptyMessage}
+					</div>
+				)}
+			</div>
+		</CollapsibleSection>
+	);
+};

apps/extension/src/components/TaskDetails/PriorityBadge.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+import type { TaskMasterTask } from '../../webview/types';
+
+// Custom Priority Badge Component with theme-adaptive styling
+export const PriorityBadge: React.FC<{
+	priority: TaskMasterTask['priority'];
+}> = ({ priority }) => {
+	const getPriorityColors = (priority: string) => {
+		switch (priority) {
+			case 'high':
+				return {
+					backgroundColor: 'rgba(239, 68, 68, 0.2)', // red-500 with opacity
+					color: '#dc2626', // red-600 - works in both themes
+					borderColor: 'rgba(239, 68, 68, 0.4)'
+				};
+			case 'medium':
+				return {
+					backgroundColor: 'rgba(245, 158, 11, 0.2)', // amber-500 with opacity
+					color: '#d97706', // amber-600 - works in both themes
+					borderColor: 'rgba(245, 158, 11, 0.4)'
+				};
+			case 'low':
+				return {
+					backgroundColor: 'rgba(34, 197, 94, 0.2)', // green-500 with opacity
+					color: '#16a34a', // green-600 - works in both themes
+					borderColor: 'rgba(34, 197, 94, 0.4)'
+				};
+			default:
+				return {
+					backgroundColor: 'rgba(156, 163, 175, 0.2)',
+					color: 'var(--vscode-foreground)',
+					borderColor: 'rgba(156, 163, 175, 0.4)'
+				};
+		}
+	};
+
+	const colors = getPriorityColors(priority || '');
+
+	return (
+		<span
+			className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-md border"
+			style={colors}
+		>
+			{priority || 'None'}
+		</span>
+	);
+};

apps/extension/src/components/TaskDetails/SubtasksSection.tsx

@@ -0,0 +1,233 @@
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { CollapsibleSection } from '@/components/ui/CollapsibleSection';
+import { Plus, Loader2, ChevronRight } from 'lucide-react';
+import type { TaskMasterTask } from '../../webview/types';
+
+interface SubtasksSectionProps {
+	currentTask: TaskMasterTask;
+	isSubtask: boolean;
+	sendMessage: (message: any) => Promise<any>;
+	onNavigateToTask: (taskId: string) => void;
+}
+
+export const SubtasksSection: React.FC<SubtasksSectionProps> = ({
+	currentTask,
+	isSubtask,
+	sendMessage,
+	onNavigateToTask
+}) => {
+	const [isAddingSubtask, setIsAddingSubtask] = useState(false);
+	const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
+	const [newSubtaskDescription, setNewSubtaskDescription] = useState('');
+	const [isSubmittingSubtask, setIsSubmittingSubtask] = useState(false);
+
+	const handleAddSubtask = async () => {
+		if (!currentTask || !newSubtaskTitle.trim() || isSubtask) {
+			return;
+		}
+
+		setIsSubmittingSubtask(true);
+		try {
+			await sendMessage({
+				type: 'addSubtask',
+				data: {
+					parentTaskId: currentTask.id,
+					subtaskData: {
+						title: newSubtaskTitle.trim(),
+						description: newSubtaskDescription.trim() || undefined,
+						status: 'pending'
+					}
+				}
+			});
+
+			// Reset form and close
+			setNewSubtaskTitle('');
+			setNewSubtaskDescription('');
+			setIsAddingSubtask(false);
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to add subtask:', error);
+		} finally {
+			setIsSubmittingSubtask(false);
+		}
+	};
+
+	const handleCancelAddSubtask = () => {
+		setIsAddingSubtask(false);
+		setNewSubtaskTitle('');
+		setNewSubtaskDescription('');
+	};
+
+	if (
+		!((currentTask.subtasks && currentTask.subtasks.length > 0) || !isSubtask)
+	) {
+		return null;
+	}
+
+	const rightElement = (
+		<>
+			{currentTask.subtasks && currentTask.subtasks.length > 0 && (
+				<span className="text-sm text-vscode-foreground/50">
+					{currentTask.subtasks?.filter((st) => st.status === 'done').length}/
+					{currentTask.subtasks?.length}
+				</span>
+			)}
+			{!isSubtask && (
+				<Button
+					variant="ghost"
+					size="sm"
+					className="ml-auto p-1 h-6 w-6 hover:bg-vscode-button-hoverBackground"
+					onClick={() => setIsAddingSubtask(true)}
+					title="Add subtask"
+				>
+					<Plus className="w-4 h-4" />
+				</Button>
+			)}
+		</>
+	);
+
+	return (
+		<CollapsibleSection
+			title="Sub-issues"
+			defaultExpanded={true}
+			rightElement={rightElement}
+		>
+			<div className="space-y-3">
+				{/* Add Subtask Form */}
+				{isAddingSubtask && (
+					<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
+						<h4 className="text-sm font-medium text-vscode-foreground mb-3">
+							Add New Subtask
+						</h4>
+						<div className="space-y-3">
+							<div>
+								<Label
+									htmlFor="subtask-title"
+									className="block text-sm text-vscode-foreground/80 mb-1"
+								>
+									Title*
+								</Label>
+								<input
+									id="subtask-title"
+									type="text"
+									placeholder="Enter subtask title..."
+									value={newSubtaskTitle}
+									onChange={(e) => setNewSubtaskTitle(e.target.value)}
+									className="w-full px-3 py-2 text-sm bg-vscode-input-background border border-vscode-input-border text-vscode-input-foreground placeholder-vscode-input-foreground/50 rounded focus:border-vscode-focusBorder focus:ring-1 focus:ring-vscode-focusBorder"
+									disabled={isSubmittingSubtask}
+								/>
+							</div>
+
+							<div>
+								<Label
+									htmlFor="subtask-description"
+									className="block text-sm text-vscode-foreground/80 mb-1"
+								>
+									Description (Optional)
+								</Label>
+								<Textarea
+									id="subtask-description"
+									placeholder="Enter subtask description..."
+									value={newSubtaskDescription}
+									onChange={(e) => setNewSubtaskDescription(e.target.value)}
+									className="min-h-[80px] bg-vscode-input-background border-vscode-input-border text-vscode-input-foreground placeholder-vscode-input-foreground/50 focus:border-vscode-focusBorder focus:ring-vscode-focusBorder"
+									disabled={isSubmittingSubtask}
+								/>
+							</div>
+
+							<div className="flex gap-3 pt-2">
+								<Button
+									onClick={handleAddSubtask}
+									disabled={!newSubtaskTitle.trim() || isSubmittingSubtask}
+									className="bg-primary text-primary-foreground hover:bg-primary/90"
+								>
+									{isSubmittingSubtask ? (
+										<>
+											<Loader2 className="w-4 h-4 mr-2 animate-spin" />
+											Adding...
+										</>
+									) : (
+										<>
+											<Plus className="w-4 h-4 mr-2" />
+											Add Subtask
+										</>
+									)}
+								</Button>
+								<Button
+									onClick={handleCancelAddSubtask}
+									variant="outline"
+									disabled={isSubmittingSubtask}
+									className="border-widget-border"
+								>
+									Cancel
+								</Button>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{/* Subtasks List */}
+				{currentTask.subtasks && currentTask.subtasks.length > 0 && (
+					<div className="space-y-2">
+						{currentTask.subtasks.map((subtask, index) => {
+							const subtaskId = `${currentTask.id}.${index + 1}`;
+							const getStatusDotColor = (status: string) => {
+								switch (status) {
+									case 'done':
+										return '#22c55e';
+									case 'in-progress':
+										return '#3b82f6';
+									case 'review':
+										return '#a855f7';
+									case 'deferred':
+										return '#ef4444';
+									case 'cancelled':
+										return '#6b7280';
+									default:
+										return '#eab308';
+								}
+							};
+
+							return (
+								<div
+									key={subtask.id}
+									className="flex items-center gap-3 p-3 rounded-md border border-textSeparator-foreground hover:border-vscode-border/70 transition-colors cursor-pointer"
+									onClick={() => onNavigateToTask(subtaskId)}
+								>
+									<div
+										className="w-4 h-4 rounded-full flex items-center justify-center"
+										style={{
+											backgroundColor: getStatusDotColor(subtask.status)
+										}}
+									/>
+									<div className="flex-1 min-w-0">
+										<p className="text-sm text-vscode-foreground truncate">
+											{subtask.title}
+										</p>
+										{subtask.description && (
+											<p className="text-xs text-vscode-foreground/60 truncate mt-0.5">
+												{subtask.description}
+											</p>
+										)}
+									</div>
+									<div className="flex items-center gap-2 flex-shrink-0">
+										<Badge
+											variant="secondary"
+											className="text-xs bg-secondary/20 border-secondary/30 text-secondary-foreground px-2 py-0.5"
+										>
+											{subtask.status === 'pending' ? 'todo' : subtask.status}
+										</Badge>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</CollapsibleSection>
+	);
+};

apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx

@@ -0,0 +1,291 @@
+import type React from 'react';
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { PriorityBadge } from './PriorityBadge';
+import type { TaskMasterTask } from '../../webview/types';
+
+interface TaskMetadataSidebarProps {
+	currentTask: TaskMasterTask;
+	tasks: TaskMasterTask[];
+	complexity: any;
+	isSubtask: boolean;
+	sendMessage: (message: any) => Promise<any>;
+	onStatusChange: (status: TaskMasterTask['status']) => void;
+	onDependencyClick: (depId: string) => void;
+	isRegenerating?: boolean;
+	isAppending?: boolean;
+}
+
+export const TaskMetadataSidebar: React.FC<TaskMetadataSidebarProps> = ({
+	currentTask,
+	tasks,
+	complexity,
+	isSubtask,
+	sendMessage,
+	onStatusChange,
+	onDependencyClick,
+	isRegenerating = false,
+	isAppending = false
+}) => {
+	const [isLoadingComplexity, setIsLoadingComplexity] = useState(false);
+	const [mcpComplexityScore, setMcpComplexityScore] = useState<
+		number | undefined
+	>(undefined);
+
+	// Get complexity score from task
+	const currentComplexityScore = complexity?.score;
+
+	// Display logic - use MCP score if available, otherwise use current score
+	const displayComplexityScore =
+		mcpComplexityScore !== undefined
+			? mcpComplexityScore
+			: currentComplexityScore;
+
+	// Fetch complexity from MCP when needed
+	const fetchComplexityFromMCP = async (force = false) => {
+		if (!currentTask || (!force && currentComplexityScore !== undefined)) {
+			return;
+		}
+		setIsLoadingComplexity(true);
+		try {
+			const complexityResult = await sendMessage({
+				type: 'mcpRequest',
+				tool: 'complexity_report',
+				params: {}
+			});
+			if (complexityResult?.data?.report?.complexityAnalysis) {
+				const taskComplexity =
+					complexityResult.data.report.complexityAnalysis.tasks?.find(
+						(t: any) => t.id === currentTask.id
+					);
+				if (taskComplexity) {
+					setMcpComplexityScore(taskComplexity.complexityScore);
+				}
+			}
+		} catch (error) {
+			console.error('Failed to fetch complexity from MCP:', error);
+		} finally {
+			setIsLoadingComplexity(false);
+		}
+	};
+
+	// Handle running complexity analysis for a task
+	const handleRunComplexityAnalysis = async () => {
+		if (!currentTask) {
+			return;
+		}
+		setIsLoadingComplexity(true);
+		try {
+			// Run complexity analysis on this specific task
+			await sendMessage({
+				type: 'mcpRequest',
+				tool: 'analyze_project_complexity',
+				params: {
+					ids: currentTask.id.toString(),
+					research: false
+				}
+			});
+			// After analysis, fetch the updated complexity report
+			setTimeout(() => {
+				fetchComplexityFromMCP(true);
+			}, 1000);
+		} catch (error) {
+			console.error('Failed to run complexity analysis:', error);
+		} finally {
+			setIsLoadingComplexity(false);
+		}
+	};
+
+	// Effect to handle complexity on task change
+	useEffect(() => {
+		if (currentTask?.id) {
+			setMcpComplexityScore(undefined);
+			if (currentComplexityScore === undefined) {
+				fetchComplexityFromMCP();
+			}
+		}
+	}, [currentTask?.id, currentComplexityScore]);
+
+	return (
+		<div className="md:col-span-1 border-l border-textSeparator-foreground">
+			<div className="p-6">
+				<div className="space-y-6">
+					<div>
+						<h3 className="text-sm font-medium text-vscode-foreground/70 mb-3">
+							Properties
+						</h3>
+					</div>
+
+					<div className="space-y-4">
+						{/* Status */}
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-vscode-foreground/70">Status</span>
+							<select
+								value={currentTask.status}
+								onChange={(e) =>
+									onStatusChange(e.target.value as TaskMasterTask['status'])
+								}
+								className="border rounded-md px-3 py-1 text-sm font-medium focus:ring-1 focus:border-vscode-focusBorder focus:ring-vscode-focusBorder"
+								style={{
+									backgroundColor:
+										currentTask.status === 'pending'
+											? 'rgba(156, 163, 175, 0.2)'
+											: currentTask.status === 'in-progress'
+												? 'rgba(245, 158, 11, 0.2)'
+												: currentTask.status === 'review'
+													? 'rgba(59, 130, 246, 0.2)'
+													: currentTask.status === 'done'
+														? 'rgba(34, 197, 94, 0.2)'
+														: currentTask.status === 'deferred'
+															? 'rgba(239, 68, 68, 0.2)'
+															: 'var(--vscode-input-background)',
+									color:
+										currentTask.status === 'pending'
+											? 'var(--vscode-foreground)'
+											: currentTask.status === 'in-progress'
+												? '#d97706'
+												: currentTask.status === 'review'
+													? '#2563eb'
+													: currentTask.status === 'done'
+														? '#16a34a'
+														: currentTask.status === 'deferred'
+															? '#dc2626'
+															: 'var(--vscode-foreground)',
+									borderColor:
+										currentTask.status === 'pending'
+											? 'rgba(156, 163, 175, 0.4)'
+											: currentTask.status === 'in-progress'
+												? 'rgba(245, 158, 11, 0.4)'
+												: currentTask.status === 'review'
+													? 'rgba(59, 130, 246, 0.4)'
+													: currentTask.status === 'done'
+														? 'rgba(34, 197, 94, 0.4)'
+														: currentTask.status === 'deferred'
+															? 'rgba(239, 68, 68, 0.4)'
+															: 'var(--vscode-input-border)'
+								}}
+							>
+								<option value="pending">To do</option>
+								<option value="in-progress">In Progress</option>
+								<option value="review">Review</option>
+								<option value="done">Done</option>
+								<option value="deferred">Deferred</option>
+							</select>
+						</div>
+
+						{/* Priority */}
+						<div className="flex items-center justify-between">
+							<span className="text-sm text-muted-foreground">Priority</span>
+							<PriorityBadge priority={currentTask.priority} />
+						</div>
+
+						{/* Complexity Score */}
+						<div className="space-y-2">
+							<label className="text-sm font-medium text-[var(--vscode-foreground)]">
+								Complexity Score
+							</label>
+							{isLoadingComplexity ? (
+								<div className="flex items-center gap-2">
+									<Loader2 className="w-4 h-4 animate-spin text-[var(--vscode-descriptionForeground)]" />
+									<span className="text-sm text-[var(--vscode-descriptionForeground)]">
+										Loading...
+									</span>
+								</div>
+							) : displayComplexityScore !== undefined ? (
+								<div className="flex items-center gap-2">
+									<span className="text-sm font-medium text-[var(--vscode-foreground)]">
+										{displayComplexityScore}/10
+									</span>
+									<div
+										className={`flex-1 rounded-full h-2 ${
+											displayComplexityScore >= 7
+												? 'bg-red-500/20'
+												: displayComplexityScore >= 4
+													? 'bg-yellow-500/20'
+													: 'bg-green-500/20'
+										}`}
+									>
+										<div
+											className={`h-2 rounded-full transition-all duration-300 ${
+												displayComplexityScore >= 7
+													? 'bg-red-500'
+													: displayComplexityScore >= 4
+														? 'bg-yellow-500'
+														: 'bg-green-500'
+											}`}
+											style={{
+												width: `${(displayComplexityScore || 0) * 10}%`
+											}}
+										/>
+									</div>
+								</div>
+							) : currentTask?.status === 'done' ||
+								currentTask?.status === 'deferred' ||
+								currentTask?.status === 'review' ? (
+								<div className="text-sm text-[var(--vscode-descriptionForeground)]">
+									N/A
+								</div>
+							) : (
+								<>
+									<div className="text-sm text-[var(--vscode-descriptionForeground)]">
+										No complexity score available
+									</div>
+									<div className="mt-3">
+										<Button
+											onClick={() => handleRunComplexityAnalysis()}
+											variant="outline"
+											size="sm"
+											className="text-xs"
+											disabled={isRegenerating || isAppending}
+										>
+											Run Complexity Analysis
+										</Button>
+									</div>
+								</>
+							)}
+						</div>
+					</div>
+					<div className="border-b border-textSeparator-foreground" />
+
+					{/* Dependencies */}
+					{currentTask.dependencies && currentTask.dependencies.length > 0 && (
+						<div>
+							<h4 className="text-sm font-medium text-vscode-foreground/70 mb-3">
+								Dependencies
+							</h4>
+							<div className="space-y-2">
+								{currentTask.dependencies.map((depId) => {
+									// Convert both to string for comparison since depId might be string or number
+									const depTask = tasks.find(
+										(t) => String(t.id) === String(depId)
+									);
+									const fullTitle = `Task ${depId}: ${depTask?.title || 'Unknown Task'}`;
+									const truncatedTitle =
+										fullTitle.length > 40
+											? fullTitle.substring(0, 37) + '...'
+											: fullTitle;
+									return (
+										<div
+											key={depId}
+											className="text-sm text-link cursor-pointer hover:text-link-hover"
+											onClick={() => onDependencyClick(depId)}
+											title={fullTitle}
+										>
+											{truncatedTitle}
+										</div>
+									);
+								})}
+							</div>
+						</div>
+					)}
+
+					{/* Divider after Dependencies */}
+					{currentTask.dependencies && currentTask.dependencies.length > 0 && (
+						<div className="border-b border-textSeparator-foreground" />
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

apps/extension/src/components/TaskDetails/useTaskDetails.ts

@@ -0,0 +1,116 @@
+import { useMemo } from 'react';
+import { useTaskDetails as useTaskDetailsQuery } from '../../webview/hooks/useTaskQueries';
+import type { TaskMasterTask } from '../../webview/types';
+
+interface TaskFileData {
+	details?: string;
+	testStrategy?: string;
+}
+
+interface UseTaskDetailsProps {
+	taskId: string;
+	sendMessage: (message: any) => Promise<any>;
+	tasks: TaskMasterTask[];
+}
+
+export const useTaskDetails = ({
+	taskId,
+	sendMessage,
+	tasks
+}: UseTaskDetailsProps) => {
+	// Parse task ID to determine if it's a subtask (e.g., "13.2")
+	const { isSubtask, parentId, subtaskIndex, taskIdForFetch } = useMemo(() => {
+		// Ensure taskId is a string
+		const taskIdStr = String(taskId);
+		const parts = taskIdStr.split('.');
+		if (parts.length === 2) {
+			return {
+				isSubtask: true,
+				parentId: parts[0],
+				subtaskIndex: parseInt(parts[1]) - 1, // Convert to 0-based index
+				taskIdForFetch: parts[0] // Always fetch parent task for subtasks
+			};
+		}
+		return {
+			isSubtask: false,
+			parentId: taskIdStr,
+			subtaskIndex: -1,
+			taskIdForFetch: taskIdStr
+		};
+	}, [taskId]);
+
+	// Use React Query to fetch full task details
+	const { data: fullTaskData, error: taskDetailsError } =
+		useTaskDetailsQuery(taskIdForFetch);
+
+	// Find current task from local state for immediate display
+	const { currentTask, parentTask } = useMemo(() => {
+		if (isSubtask) {
+			const parent = tasks.find((t) => t.id === parentId);
+			if (parent && parent.subtasks && parent.subtasks[subtaskIndex]) {
+				const subtask = parent.subtasks[subtaskIndex];
+				return { currentTask: subtask, parentTask: parent };
+			}
+		} else {
+			const task = tasks.find((t) => t.id === String(taskId));
+			if (task) {
+				return { currentTask: task, parentTask: null };
+			}
+		}
+		return { currentTask: null, parentTask: null };
+	}, [taskId, tasks, isSubtask, parentId, subtaskIndex]);
+
+	// Merge full task data from React Query with local state
+	const mergedCurrentTask = useMemo(() => {
+		if (!currentTask || !fullTaskData) return currentTask;
+
+		if (isSubtask && fullTaskData.subtasks) {
+			// Find the specific subtask in the full data
+			const subtaskData = fullTaskData.subtasks.find(
+				(st: any) =>
+					st.id === currentTask.id || st.id === parseInt(currentTask.id as any)
+			);
+			if (subtaskData) {
+				return { ...currentTask, ...subtaskData };
+			}
+		} else if (!isSubtask) {
+			// Merge parent task data
+			return { ...currentTask, ...fullTaskData };
+		}
+
+		return currentTask;
+	}, [currentTask, fullTaskData, isSubtask]);
+
+	// Extract task file data
+	const taskFileData: TaskFileData = useMemo(() => {
+		if (!mergedCurrentTask) return {};
+		return {
+			details: mergedCurrentTask.details || '',
+			testStrategy: mergedCurrentTask.testStrategy || ''
+		};
+	}, [mergedCurrentTask]);
+
+	// Get complexity score
+	const complexity = useMemo(() => {
+		if (mergedCurrentTask?.complexityScore !== undefined) {
+			return { score: mergedCurrentTask.complexityScore };
+		}
+		return null;
+	}, [mergedCurrentTask]);
+
+	// Function to refresh data after AI operations
+	const refreshComplexityAfterAI = () => {
+		// React Query will automatically refetch when mutations invalidate the query
+		// No need for manual refresh
+	};
+
+	return {
+		currentTask: mergedCurrentTask,
+		parentTask,
+		isSubtask,
+		taskFileData,
+		taskFileDataError: taskDetailsError ? 'Failed to load task details' : null,
+		complexity,
+		refreshComplexityAfterAI
+	};
+};

apps/extension/src/components/TaskDetailsView.tsx

@@ -0,0 +1,218 @@
+import type React from 'react';
+import { useContext, useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { useQueryClient } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbSeparator
+} from '@/components/ui/breadcrumb';
+import { VSCodeContext } from '../webview/contexts/VSCodeContext';
+import { AIActionsSection } from './TaskDetails/AIActionsSection';
+import { SubtasksSection } from './TaskDetails/SubtasksSection';
+import { TaskMetadataSidebar } from './TaskDetails/TaskMetadataSidebar';
+import { DetailsSection } from './TaskDetails/DetailsSection';
+import { useTaskDetails } from './TaskDetails/useTaskDetails';
+import { useTasks, taskKeys } from '../webview/hooks/useTaskQueries';
+import type { TaskMasterTask } from '../webview/types';
+
+interface TaskDetailsViewProps {
+	taskId: string;
+	onNavigateBack: () => void;
+	onNavigateToTask: (taskId: string) => void;
+}
+
+export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
+	taskId,
+	onNavigateBack,
+	onNavigateToTask
+}) => {
+	const context = useContext(VSCodeContext);
+	if (!context) {
+		throw new Error('TaskDetailsView must be used within VSCodeProvider');
+	}
+
+	const { state, sendMessage } = context;
+	const { currentTag } = state;
+	const queryClient = useQueryClient();
+	const [isRefreshing, setIsRefreshing] = useState(false);
+
+	// Use React Query to fetch all tasks
+	const { data: allTasks = [] } = useTasks({ tag: currentTag });
+
+	const {
+		currentTask,
+		parentTask,
+		isSubtask,
+		taskFileData,
+		taskFileDataError,
+		complexity,
+		refreshComplexityAfterAI
+	} = useTaskDetails({ taskId, sendMessage, tasks: allTasks });
+
+	const handleStatusChange = async (newStatus: TaskMasterTask['status']) => {
+		if (!currentTask) return;
+
+		try {
+			await sendMessage({
+				type: 'updateTaskStatus',
+				data: {
+					taskId:
+						isSubtask && parentTask
+							? `${parentTask.id}.${currentTask.id}`
+							: currentTask.id,
+					newStatus: newStatus
+				}
+			});
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to update task status:', error);
+		}
+	};
+
+	const handleDependencyClick = (depId: string) => {
+		onNavigateToTask(depId);
+	};
+
+	const handleRefresh = useCallback(async () => {
+		setIsRefreshing(true);
+		try {
+			// Invalidate all task queries
+			await queryClient.invalidateQueries({ queryKey: taskKeys.all });
+		} finally {
+			// Reset after a short delay to show the animation
+			setTimeout(() => setIsRefreshing(false), 500);
+		}
+	}, [queryClient]);
+
+	if (!currentTask) {
+		return (
+			<div className="flex items-center justify-center h-full">
+				<div className="text-center">
+					<p className="text-lg text-vscode-foreground/70 mb-4">
+						Task not found
+					</p>
+					<Button onClick={onNavigateBack} variant="outline">
+						Back to Kanban Board
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="h-full flex flex-col">
+			<div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-6 p-6 overflow-auto">
+				{/* Left column - Main content (2/3 width) */}
+				<div className="md:col-span-2 space-y-6">
+					{/* Breadcrumb navigation */}
+					<div className="flex items-center justify-between">
+						<Breadcrumb>
+							<BreadcrumbList>
+								<BreadcrumbItem>
+									<BreadcrumbLink
+										onClick={onNavigateBack}
+										className="cursor-pointer hover:text-vscode-foreground text-link"
+									>
+										Kanban Board
+									</BreadcrumbLink>
+								</BreadcrumbItem>
+								{isSubtask && parentTask && (
+									<>
+										<BreadcrumbSeparator />
+										<BreadcrumbItem>
+											<BreadcrumbLink
+												onClick={() => onNavigateToTask(parentTask.id)}
+												className="cursor-pointer hover:text-vscode-foreground"
+											>
+												{parentTask.title}
+											</BreadcrumbLink>
+										</BreadcrumbItem>
+									</>
+								)}
+								<BreadcrumbSeparator />
+								<BreadcrumbItem>
+									<span className="text-vscode-foreground">
+										{currentTask.title}
+									</span>
+								</BreadcrumbItem>
+							</BreadcrumbList>
+						</Breadcrumb>
+						<button
+							onClick={handleRefresh}
+							disabled={isRefreshing}
+							className="p-1.5 rounded hover:bg-vscode-button-hoverBackground transition-colors"
+							title="Refresh task details"
+						>
+							<RefreshCw
+								className={`w-4 h-4 text-vscode-foreground/70 ${isRefreshing ? 'animate-spin' : ''}`}
+							/>
+						</button>
+					</div>
+
+					{/* Task title */}
+					<h1 className="text-2xl font-bold tracking-tight text-vscode-foreground">
+						{currentTask.title}
+					</h1>
+
+					{/* Description */}
+					<div className="mb-8">
+						<p className="text-vscode-foreground/80 leading-relaxed">
+							{currentTask.description || 'No description available.'}
+						</p>
+					</div>
+
+					{/* AI Actions */}
+					<AIActionsSection
+						currentTask={currentTask}
+						isSubtask={isSubtask}
+						parentTask={parentTask}
+						sendMessage={sendMessage}
+						refreshComplexityAfterAI={refreshComplexityAfterAI}
+					/>
+
+					{/* Implementation Details */}
+					<DetailsSection
+						title="Implementation Details"
+						content={taskFileData.details}
+						error={taskFileDataError}
+						emptyMessage="No implementation details available"
+						defaultExpanded={false}
+					/>
+
+					{/* Test Strategy */}
+					<DetailsSection
+						title="Test Strategy"
+						content={taskFileData.testStrategy}
+						error={taskFileDataError}
+						emptyMessage="No test strategy available"
+						defaultExpanded={false}
+					/>
+
+					{/* Subtasks */}
+					<SubtasksSection
+						currentTask={currentTask}
+						isSubtask={isSubtask}
+						sendMessage={sendMessage}
+						onNavigateToTask={onNavigateToTask}
+					/>
+				</div>
+
+				{/* Right column - Metadata (1/3 width) */}
+				<TaskMetadataSidebar
+					currentTask={currentTask}
+					tasks={allTasks}
+					complexity={complexity}
+					isSubtask={isSubtask}
+					sendMessage={sendMessage}
+					onStatusChange={handleStatusChange}
+					onDependencyClick={handleDependencyClick}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default TaskDetailsView;

apps/extension/src/components/TaskMasterLogo.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface TaskMasterLogoProps {
+	className?: string;
+}
+
+export const TaskMasterLogo: React.FC<TaskMasterLogoProps> = ({
+	className = ''
+}) => {
+	return (
+		<svg
+			className={className}
+			viewBox="0 0 224 291"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M101.635 286.568L71.4839 256.414C65.6092 250.539 65.6092 241.03 71.4839 235.155L142.52 164.11C144.474 162.156 147.643 162.156 149.61 164.11L176.216 190.719C178.17 192.673 181.339 192.673 183.305 190.719L189.719 184.305C191.673 182.35 191.673 179.181 189.719 177.214L163.113 150.605C161.159 148.651 161.159 145.481 163.113 143.514L191.26 115.365C193.214 113.41 193.214 110.241 191.26 108.274L182.316 99.3291C180.362 97.3748 177.193 97.3748 175.226 99.3291L55.8638 218.706C49.989 224.581 40.4816 224.581 34.6068 218.706L4.4061 188.501C-1.4687 182.626 -1.4687 173.117 4.4061 167.242L23.8342 147.811C25.7883 145.857 25.7883 142.688 23.8342 140.721L4.78187 121.666C-1.09293 115.791 -1.09293 106.282 4.78187 100.406L34.7195 70.4527C40.5943 64.5772 50.1017 64.5772 55.9765 70.4527L75.555 90.0335C77.5091 91.9879 80.6782 91.9879 82.6448 90.0335L124.144 48.5292C126.098 46.5749 126.098 43.4054 124.144 41.4385L115.463 32.7568C113.509 30.8025 110.34 30.8025 108.374 32.7568L99.8683 41.2632C97.9143 43.2175 94.7451 43.2175 92.7785 41.2632L82.1438 30.6271C80.1897 28.6728 80.1897 25.5033 82.1438 23.5364L101.271 4.40662C107.146 -1.46887 116.653 -1.46887 122.528 4.40662L152.478 34.3604C158.353 40.2359 158.353 49.7444 152.478 55.6199L82.6323 125.474C80.6782 127.429 77.5091 127.429 75.5425 125.474L48.8741 98.8029C46.9201 96.8486 43.7509 96.8486 41.7843 98.8029L33.1036 107.485C31.1496 109.439 31.1496 112.608 33.1036 114.575L59.2458 140.721C61.1999 142.675 61.1999 145.844 59.2458 147.811L32.7404 174.32C30.7863 176.274 30.7863 179.444 32.7404 181.411L41.6841 190.355C43.6382 192.31 46.8073 192.31 48.7739 190.355L168.136 70.9789C174.011 65.1034 183.518 65.1034 189.393 70.9789L219.594 101.183C225.469 107.059 225.469 116.567 219.594 122.443L198.537 143.502C196.583 145.456 196.583 148.626 198.537 150.592L218.053 170.111C223.928 175.986 223.928 185.495 218.053 191.37L190.37 219.056C184.495 224.932 174.988 224.932 169.113 219.056L149.597 199.538C147.643 197.584 144.474 197.584 142.508 199.538L99.8057 242.245C97.8516 244.2 97.8516 247.369 99.8057 249.336L108.699 258.231C110.653 260.185 113.823 260.185 115.789 258.231L122.954 251.065C124.908 249.11 128.077 249.11 130.044 251.065L140.679 261.701C142.633 263.655 142.633 266.825 140.679 268.791L122.879 286.593C117.004 292.469 107.497 292.469 101.622 286.593L101.635 286.568Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

apps/extension/src/components/ui/CollapsibleSection.tsx

@@ -0,0 +1,61 @@
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from './button';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+interface CollapsibleSectionProps {
+	title: string;
+	icon?: LucideIcon;
+	defaultExpanded?: boolean;
+	className?: string;
+	headerClassName?: string;
+	contentClassName?: string;
+	buttonClassName?: string;
+	children: React.ReactNode;
+	rightElement?: React.ReactNode;
+}
+
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+	title,
+	icon: Icon,
+	defaultExpanded = false,
+	className = '',
+	headerClassName = '',
+	contentClassName = '',
+	buttonClassName = 'text-vscode-foreground/70 hover:text-vscode-foreground',
+	children,
+	rightElement
+}) => {
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+	return (
+		<div className={`mb-8 ${className}`}>
+			<div className={`flex items-center gap-2 mb-4 ${headerClassName}`}>
+				<Button
+					variant="ghost"
+					size="sm"
+					className={`p-0 h-auto ${buttonClassName}`}
+					onClick={() => setIsExpanded(!isExpanded)}
+				>
+					{isExpanded ? (
+						<ChevronDown className="w-4 h-4 mr-1" />
+					) : (
+						<ChevronRight className="w-4 h-4 mr-1" />
+					)}
+					{Icon && <Icon className="w-4 h-4 mr-1" />}
+					{title}
+				</Button>
+				{rightElement}
+			</div>
+
+			{isExpanded && (
+				<div
+					className={`bg-widget-background rounded-lg p-4 border border-widget-border ${contentClassName}`}
+				>
+					{children}
+				</div>
+			)}
+		</div>
+	);
+};

apps/extension/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default:
+					'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary:
+					'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	}
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'span';
+
+	return (
+		<Comp
+			data-slot="badge"
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Badge, badgeVariants };

apps/extension/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn('inline-flex items-center gap-1.5', className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<'a'> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : 'a';
+
+	return (
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn('hover:text-foreground transition-colors', className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn('text-foreground font-normal', className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<'li'>) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('[&>svg]:size-3.5', className)}
+			{...props}
+		>
+			{children ?? <ChevronRight />}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({
+	className,
+	...props
+}: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn('flex size-9 items-center justify-center', className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis
+};

apps/extension/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary:
+					'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost:
+					'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	}
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot : 'button';
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

apps/extension/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('leading-none font-semibold', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn('px-6', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardAction,
+	CardDescription,
+	CardContent
+};

apps/extension/src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
+}
+
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

apps/extension/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+					className
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = 'default',
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn('bg-border -mx-1 my-1 h-px', className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<'span'>) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				'text-muted-foreground ml-auto text-xs tracking-widest',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent
+};

apps/extension/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
+		<LabelPrimitive.Root
+			data-slot="label"
+			className={cn(
+				'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Label };

apps/extension/src/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function ScrollArea({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
+		<ScrollAreaPrimitive.Root
+			data-slot="scroll-area"
+			className={cn('relative overflow-hidden', className)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 overflow-y-auto"
+			>
+				{children}
+			</ScrollAreaPrimitive.Viewport>
+			<ScrollBar />
+			<ScrollAreaPrimitive.Corner />
+		</ScrollAreaPrimitive.Root>
+	);
+}
+
+function ScrollBar({
+	className,
+	orientation = 'vertical',
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
+		<ScrollAreaPrimitive.ScrollAreaScrollbar
+			data-slot="scroll-area-scrollbar"
+			orientation={orientation}
+			className={cn(
+				'flex touch-none p-px transition-colors select-none',
+				orientation === 'vertical' &&
+					'h-full w-2.5 border-l border-l-transparent',
+				orientation === 'horizontal' &&
+					'h-2.5 flex-col border-t border-t-transparent',
+				className
+			)}
+			{...props}
+		>
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
+		</ScrollAreaPrimitive.ScrollAreaScrollbar>
+	);
+}
+
+export { ScrollArea, ScrollBar };

apps/extension/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Separator({
+	className,
+	orientation = 'horizontal',
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };

apps/extension/src/components/ui/shadcn-io/kanban/index.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import {
+	DndContext,
+	DragOverlay,
+	MouseSensor,
+	TouchSensor,
+	rectIntersection,
+	useDraggable,
+	useDroppable,
+	useSensor,
+	useSensors
+} from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import type React from 'react';
+import type { ReactNode } from 'react';
+
+export type { DragEndEvent } from '@dnd-kit/core';
+
+export type Status = {
+	id: string;
+	name: string;
+	color: string;
+};
+
+export type Feature = {
+	id: string;
+	name: string;
+	startAt: Date;
+	endAt: Date;
+	status: Status;
+};
+
+export type KanbanBoardProps = {
+	id: Status['id'];
+	children: ReactNode;
+	className?: string;
+};
+
+export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
+	const { isOver, setNodeRef } = useDroppable({ id });
+
+	return (
+		<div
+			className={cn(
+				'flex h-full min-h-40 flex-col gap-2 rounded-md border bg-secondary p-2 text-xs shadow-sm outline transition-all',
+				isOver ? 'outline-primary' : 'outline-transparent',
+				className
+			)}
+			ref={setNodeRef}
+		>
+			{children}
+		</div>
+	);
+};
+
+export type KanbanCardProps = Pick<Feature, 'id' | 'name'> & {
+	index: number;
+	parent: string;
+	children?: ReactNode;
+	className?: string;
+	onClick?: (event: React.MouseEvent) => void;
+	onDoubleClick?: (event: React.MouseEvent) => void;
+};
+
+export const KanbanCard = ({
+	id,
+	name,
+	index,
+	parent,
+	children,
+	className,
+	onClick,
+	onDoubleClick
+}: KanbanCardProps) => {
+	const { attributes, listeners, setNodeRef, transform, isDragging } =
+		useDraggable({
+			id,
+			data: { index, parent }
+		});
+
+	return (
+		<Card
+			className={cn(
+				'rounded-md p-3 shadow-sm',
+				isDragging && 'cursor-grabbing opacity-0',
+				!isDragging && 'cursor-pointer',
+				className
+			)}
+			style={{
+				transform: transform
+					? `translateX(${transform.x}px) translateY(${transform.y}px)`
+					: 'none'
+			}}
+			{...attributes}
+			{...listeners}
+			onClick={(e) => !isDragging && onClick?.(e)}
+			onDoubleClick={onDoubleClick}
+			ref={setNodeRef}
+		>
+			{children ?? <p className="m-0 font-medium text-sm">{name}</p>}
+		</Card>
+	);
+};
+
+export type KanbanCardsProps = {
+	children: ReactNode;
+	className?: string;
+};
+
+export const KanbanCards = ({ children, className }: KanbanCardsProps) => (
+	<div className={cn('flex flex-1 flex-col gap-2', className)}>{children}</div>
+);
+
+export type KanbanHeaderProps =
+	| {
+			children: ReactNode;
+	  }
+	| {
+			name: Status['name'];
+			color: Status['color'];
+			className?: string;
+	  };
+
+export const KanbanHeader = (props: KanbanHeaderProps) =>
+	'children' in props ? (
+		props.children
+	) : (
+		<div className={cn('flex shrink-0 items-center gap-2', props.className)}>
+			<div
+				className="h-2 w-2 rounded-full"
+				style={{ backgroundColor: props.color }}
+			/>
+			<p className="m-0 font-semibold text-sm">{props.name}</p>
+		</div>
+	);
+
+export type KanbanProviderProps = {
+	children: ReactNode;
+	onDragEnd: (event: DragEndEvent) => void;
+	onDragStart?: (event: DragEndEvent) => void;
+	onDragCancel?: () => void;
+	className?: string;
+	dragOverlay?: ReactNode;
+};
+
+export const KanbanProvider = ({
+	children,
+	onDragEnd,
+	onDragStart,
+	onDragCancel,
+	className,
+	dragOverlay
+}: KanbanProviderProps) => {
+	// Configure sensors with activation constraints to prevent accidental drags
+	const sensors = useSensors(
+		// Only start a drag if you've moved more than 8px
+		useSensor(MouseSensor, {
+			activationConstraint: { distance: 8 }
+		}),
+		// On touch devices, require a short press + small move
+		useSensor(TouchSensor, {
+			activationConstraint: { delay: 150, tolerance: 5 }
+		})
+	);
+
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={rectIntersection}
+			onDragEnd={onDragEnd}
+			onDragStart={onDragStart}
+			onDragCancel={onDragCancel}
+		>
+			<div
+				className={cn(
+					'grid w-full auto-cols-fr grid-flow-col gap-4',
+					className
+				)}
+			>
+				{children}
+			</div>
+			<DragOverlay>{dragOverlay}</DragOverlay>
+		</DndContext>
+	);
+};

apps/extension/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

apps/extension/src/extension.ts

@@ -0,0 +1,219 @@
+/**
+ * TaskMaster Extension - Simplified Architecture
+ * Only using patterns where they add real value
+ */
+
+import * as vscode from 'vscode';
+import { ConfigService } from './services/config-service';
+import { PollingService } from './services/polling-service';
+import { createPollingStrategy } from './services/polling-strategies';
+import { TaskRepository } from './services/task-repository';
+import { WebviewManager } from './services/webview-manager';
+import { EventEmitter } from './utils/event-emitter';
+import { ExtensionLogger } from './utils/logger';
+import {
+	MCPClientManager,
+	createMCPConfigFromSettings
+} from './utils/mcpClient';
+import { TaskMasterApi } from './utils/task-master-api';
+import { SidebarWebviewManager } from './services/sidebar-webview-manager';
+
+let logger: ExtensionLogger;
+let mcpClient: MCPClientManager;
+let api: TaskMasterApi;
+let repository: TaskRepository;
+let pollingService: PollingService;
+let webviewManager: WebviewManager;
+let events: EventEmitter;
+let configService: ConfigService;
+let sidebarManager: SidebarWebviewManager;
+
+export async function activate(context: vscode.ExtensionContext) {
+	try {
+		// Initialize logger (needed to prevent MCP stdio issues)
+		logger = ExtensionLogger.getInstance();
+		logger.log('🎉 TaskMaster Extension activating...');
+
+		// Simple event emitter for webview communication
+		events = new EventEmitter();
+
+		// Initialize MCP client
+		mcpClient = new MCPClientManager(createMCPConfigFromSettings());
+
+		// Initialize API
+		api = new TaskMasterApi(mcpClient);
+
+		// Repository with caching (actually useful for performance)
+		repository = new TaskRepository(api, logger);
+
+		// Config service for TaskMaster config.json
+		configService = new ConfigService(logger);
+
+		// Polling service with strategy pattern (makes sense for different polling behaviors)
+		const strategy = createPollingStrategy(
+			vscode.workspace.getConfiguration('taskmaster')
+		);
+		pollingService = new PollingService(repository, strategy, logger);
+
+		// Webview manager (cleaner than global panel array) - create before connection
+		webviewManager = new WebviewManager(context, repository, events, logger);
+		webviewManager.setConfigService(configService);
+
+		// Sidebar webview manager
+		sidebarManager = new SidebarWebviewManager(context.extensionUri);
+
+		// Initialize connection
+		await initializeConnection();
+
+		// Set MCP client and API after connection
+		webviewManager.setMCPClient(mcpClient);
+		webviewManager.setApi(api);
+		sidebarManager.setApi(api);
+
+		// Register commands
+		registerCommands(context);
+
+		// Handle polling lifecycle
+		events.on('webview:opened', () => {
+			if (webviewManager.getPanelCount() === 1) {
+				pollingService.start();
+			}
+		});
+
+		events.on('webview:closed', () => {
+			if (webviewManager.getPanelCount() === 0) {
+				pollingService.stop();
+			}
+		});
+
+		// Forward repository updates to webviews
+		repository.on('tasks:updated', (tasks) => {
+			webviewManager.broadcast('tasksUpdated', { tasks, source: 'polling' });
+		});
+
+		logger.log('✅ TaskMaster Extension activated');
+	} catch (error) {
+		logger?.error('Failed to activate', error);
+		vscode.window.showErrorMessage(
+			`Failed to activate TaskMaster: ${error instanceof Error ? error.message : 'Unknown error'}`
+		);
+	}
+}
+
+async function initializeConnection() {
+	try {
+		logger.log('🔗 Connecting to TaskMaster...');
+
+		// Notify webviews that we're connecting
+		if (webviewManager) {
+			webviewManager.broadcast('connectionStatus', {
+				isConnected: false,
+				status: 'Connecting...'
+			});
+		}
+
+		await mcpClient.connect();
+
+		const testResult = await api.testConnection();
+
+		if (testResult.success) {
+			logger.log('✅ Connected to TaskMaster');
+			vscode.window.showInformationMessage('TaskMaster connected!');
+
+			// Notify webviews that we're connected
+			if (webviewManager) {
+				webviewManager.broadcast('connectionStatus', {
+					isConnected: true,
+					status: 'Connected'
+				});
+			}
+			if (sidebarManager) {
+				sidebarManager.updateConnectionStatus();
+			}
+		} else {
+			throw new Error(testResult.error || 'Connection test failed');
+		}
+	} catch (error) {
+		logger.error('Connection failed', error);
+
+		// Notify webviews that connection failed
+		if (webviewManager) {
+			webviewManager.broadcast('connectionStatus', {
+				isConnected: false,
+				status: 'Disconnected'
+			});
+		}
+		if (sidebarManager) {
+			sidebarManager.updateConnectionStatus();
+		}
+
+		handleConnectionError(error);
+	}
+}
+
+function handleConnectionError(error: any) {
+	const message = error instanceof Error ? error.message : 'Unknown error';
+
+	if (message.includes('ENOENT') && message.includes('npx')) {
+		vscode.window
+			.showWarningMessage(
+				'TaskMaster: npx not found. Please ensure Node.js is installed.',
+				'Open Settings'
+			)
+			.then((action) => {
+				if (action === 'Open Settings') {
+					vscode.commands.executeCommand(
+						'workbench.action.openSettings',
+						'@ext:taskr taskmaster'
+					);
+				}
+			});
+	} else {
+		vscode.window.showWarningMessage(
+			`TaskMaster connection failed: ${message}`
+		);
+	}
+}
+
+function registerCommands(context: vscode.ExtensionContext) {
+	// Main command
+	context.subscriptions.push(
+		vscode.commands.registerCommand('tm.showKanbanBoard', async () => {
+			await webviewManager.createOrShowPanel();
+		})
+	);
+
+	// Utility commands
+	context.subscriptions.push(
+		vscode.commands.registerCommand('tm.refreshTasks', async () => {
+			await repository.refresh();
+			vscode.window.showInformationMessage('Tasks refreshed!');
+		})
+	);
+
+	context.subscriptions.push(
+		vscode.commands.registerCommand('tm.openSettings', () => {
+			vscode.commands.executeCommand(
+				'workbench.action.openSettings',
+				'@ext:taskr taskmaster'
+			);
+		})
+	);
+
+	// Register sidebar view provider
+
+	context.subscriptions.push(
+		vscode.window.registerWebviewViewProvider(
+			'taskmaster.welcome',
+			sidebarManager
+		)
+	);
+}
+
+export function deactivate() {
+	logger?.log('👋 TaskMaster Extension deactivating...');
+	pollingService?.stop();
+	webviewManager?.dispose();
+	api?.destroy();
+	mcpClient?.disconnect();
+}

apps/extension/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

apps/extension/src/services/config-service.ts

@@ -0,0 +1,141 @@
+/**
+ * Config Service
+ * Manages Task Master config.json file operations
+ */
+
+import * as path from 'path';
+import * as fs from 'fs/promises';
+import * as vscode from 'vscode';
+import type { ExtensionLogger } from '../utils/logger';
+
+export interface TaskMasterConfigJson {
+	anthropicApiKey?: string;
+	perplexityApiKey?: string;
+	openaiApiKey?: string;
+	googleApiKey?: string;
+	xaiApiKey?: string;
+	openrouterApiKey?: string;
+	mistralApiKey?: string;
+	debug?: boolean;
+	models?: {
+		main?: string;
+		research?: string;
+		fallback?: string;
+	};
+}
+
+export class ConfigService {
+	private configCache: TaskMasterConfigJson | null = null;
+	private lastReadTime = 0;
+	private readonly CACHE_DURATION = 5000; // 5 seconds
+
+	constructor(private logger: ExtensionLogger) {}
+
+	/**
+	 * Read Task Master config.json from the workspace
+	 */
+	async readConfig(): Promise<TaskMasterConfigJson | null> {
+		// Check cache first
+		if (
+			this.configCache &&
+			Date.now() - this.lastReadTime < this.CACHE_DURATION
+		) {
+			return this.configCache;
+		}
+
+		try {
+			const workspaceRoot = this.getWorkspaceRoot();
+			if (!workspaceRoot) {
+				this.logger.warn('No workspace folder found');
+				return null;
+			}
+
+			const configPath = path.join(workspaceRoot, '.taskmaster', 'config.json');
+
+			try {
+				const configContent = await fs.readFile(configPath, 'utf-8');
+				const config = JSON.parse(configContent) as TaskMasterConfigJson;
+
+				// Cache the result
+				this.configCache = config;
+				this.lastReadTime = Date.now();
+
+				this.logger.debug('Successfully read Task Master config', {
+					hasModels: !!config.models,
+					debug: config.debug
+				});
+
+				return config;
+			} catch (error) {
+				if ((error as any).code === 'ENOENT') {
+					this.logger.debug('Task Master config.json not found');
+				} else {
+					this.logger.error('Failed to read Task Master config', error);
+				}
+				return null;
+			}
+		} catch (error) {
+			this.logger.error('Error accessing Task Master config', error);
+			return null;
+		}
+	}
+
+	/**
+	 * Get safe config for display (with sensitive data masked)
+	 */
+	async getSafeConfig(): Promise<Record<string, any> | null> {
+		const config = await this.readConfig();
+		if (!config) {
+			return null;
+		}
+
+		// Create a safe copy with masked API keys
+		const safeConfig: Record<string, any> = {
+			...config
+		};
+
+		// Mask all API keys
+		const apiKeyFields = [
+			'anthropicApiKey',
+			'perplexityApiKey',
+			'openaiApiKey',
+			'googleApiKey',
+			'xaiApiKey',
+			'openrouterApiKey',
+			'mistralApiKey'
+		];
+
+		for (const field of apiKeyFields) {
+			if (safeConfig[field]) {
+				safeConfig[field] = this.maskApiKey(safeConfig[field]);
+			}
+		}
+
+		return safeConfig;
+	}
+
+	/**
+	 * Mask API key for display
+	 */
+	private maskApiKey(key: string): string {
+		if (key.length <= 8) {
+			return '****';
+		}
+		return key.substring(0, 4) + '****' + key.substring(key.length - 4);
+	}
+
+	/**
+	 * Clear cache
+	 */
+	clearCache(): void {
+		this.configCache = null;
+		this.lastReadTime = 0;
+	}
+
+	/**
+	 * Get workspace root path
+	 */
+	private getWorkspaceRoot(): string | undefined {
+		return vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
+	}
+}

apps/extension/src/services/error-handler.ts

@@ -0,0 +1,167 @@
+/**
+ * Error Handler Service
+ * Centralized error handling with categorization and recovery strategies
+ */
+
+import * as vscode from 'vscode';
+import type { ExtensionLogger } from '../utils/logger';
+
+export enum ErrorSeverity {
+	LOW = 'low',
+	MEDIUM = 'medium',
+	HIGH = 'high',
+	CRITICAL = 'critical'
+}
+
+export enum ErrorCategory {
+	MCP_CONNECTION = 'mcp_connection',
+	CONFIGURATION = 'configuration',
+	TASK_LOADING = 'task_loading',
+	NETWORK = 'network',
+	INTERNAL = 'internal'
+}
+
+export interface ErrorContext {
+	category: ErrorCategory;
+	severity: ErrorSeverity;
+	message: string;
+	originalError?: Error | unknown;
+	operation?: string;
+	taskId?: string;
+	isRecoverable?: boolean;
+	suggestedActions?: string[];
+}
+
+export class ErrorHandler {
+	private errorLog: Map<string, ErrorContext> = new Map();
+	private errorId = 0;
+
+	constructor(private logger: ExtensionLogger) {}
+
+	/**
+	 * Handle an error with appropriate logging and user notification
+	 */
+	handleError(context: ErrorContext): string {
+		const errorId = `error_${++this.errorId}`;
+		this.errorLog.set(errorId, context);
+
+		// Log to extension logger
+		this.logError(context);
+
+		// Show user notification if appropriate
+		this.notifyUser(context);
+
+		return errorId;
+	}
+
+	/**
+	 * Log error based on severity
+	 */
+	private logError(context: ErrorContext): void {
+		const logMessage = `[${context.category}] ${context.message}`;
+		const details = {
+			operation: context.operation,
+			taskId: context.taskId,
+			error: context.originalError
+		};
+
+		switch (context.severity) {
+			case ErrorSeverity.CRITICAL:
+			case ErrorSeverity.HIGH:
+				this.logger.error(logMessage, details);
+				break;
+			case ErrorSeverity.MEDIUM:
+				this.logger.warn(logMessage, details);
+				break;
+			case ErrorSeverity.LOW:
+				this.logger.debug(logMessage, details);
+				break;
+		}
+	}
+
+	/**
+	 * Show user notification based on severity and category
+	 */
+	private notifyUser(context: ErrorContext): void {
+		// Don't show low severity errors to users
+		if (context.severity === ErrorSeverity.LOW) {
+			return;
+		}
+
+		// Determine notification type
+		const actions = context.suggestedActions || [];
+
+		switch (context.severity) {
+			case ErrorSeverity.CRITICAL:
+				vscode.window
+					.showErrorMessage(`TaskMaster: ${context.message}`, ...actions)
+					.then((action) => {
+						if (action) {
+							this.handleUserAction(action, context);
+						}
+					});
+				break;
+
+			case ErrorSeverity.HIGH:
+				if (context.category === ErrorCategory.MCP_CONNECTION) {
+					vscode.window
+						.showWarningMessage(
+							`TaskMaster: ${context.message}`,
+							'Retry',
+							'Settings'
+						)
+						.then((action) => {
+							if (action === 'Retry') {
+								vscode.commands.executeCommand('tm.reconnect');
+							} else if (action === 'Settings') {
+								vscode.commands.executeCommand('tm.openSettings');
+							}
+						});
+				} else {
+					vscode.window.showWarningMessage(`TaskMaster: ${context.message}`);
+				}
+				break;
+
+			case ErrorSeverity.MEDIUM:
+				// Only show medium errors for important categories
+				if (
+					[ErrorCategory.CONFIGURATION, ErrorCategory.TASK_LOADING].includes(
+						context.category
+					)
+				) {
+					vscode.window.showInformationMessage(
+						`TaskMaster: ${context.message}`
+					);
+				}
+				break;
+		}
+	}
+
+	/**
+	 * Handle user action from notification
+	 */
+	private handleUserAction(action: string, context: ErrorContext): void {
+		this.logger.debug(`User selected action: ${action}`, {
+			errorContext: context
+		});
+		// Action handling would be implemented based on specific needs
+	}
+
+	/**
+	 * Get error by ID
+	 */
+	getError(errorId: string): ErrorContext | undefined {
+		return this.errorLog.get(errorId);
+	}
+
+	/**
+	 * Clear old errors (keep last 100)
+	 */
+	clearOldErrors(): void {
+		if (this.errorLog.size > 100) {
+			const entriesToKeep = Array.from(this.errorLog.entries()).slice(-100);
+			this.errorLog.clear();
+			entriesToKeep.forEach(([id, error]) => this.errorLog.set(id, error));
+		}
+	}
+}

apps/extension/src/services/notification-preferences.ts

@@ -0,0 +1,129 @@
+/**
+ * Notification Preferences Service
+ * Manages user preferences for notifications
+ */
+
+import * as vscode from 'vscode';
+import { ErrorCategory, ErrorSeverity } from './error-handler';
+
+export enum NotificationLevel {
+	ALL = 'all',
+	ERRORS_ONLY = 'errors_only',
+	CRITICAL_ONLY = 'critical_only',
+	NONE = 'none'
+}
+
+interface NotificationRule {
+	category: ErrorCategory;
+	minSeverity: ErrorSeverity;
+	enabled: boolean;
+}
+
+export class NotificationPreferences {
+	private defaultRules: NotificationRule[] = [
+		{
+			category: ErrorCategory.MCP_CONNECTION,
+			minSeverity: ErrorSeverity.HIGH,
+			enabled: true
+		},
+		{
+			category: ErrorCategory.CONFIGURATION,
+			minSeverity: ErrorSeverity.MEDIUM,
+			enabled: true
+		},
+		{
+			category: ErrorCategory.TASK_LOADING,
+			minSeverity: ErrorSeverity.HIGH,
+			enabled: true
+		},
+		{
+			category: ErrorCategory.NETWORK,
+			minSeverity: ErrorSeverity.HIGH,
+			enabled: true
+		},
+		{
+			category: ErrorCategory.INTERNAL,
+			minSeverity: ErrorSeverity.CRITICAL,
+			enabled: true
+		}
+	];
+
+	/**
+	 * Check if a notification should be shown
+	 */
+	shouldShowNotification(
+		category: ErrorCategory,
+		severity: ErrorSeverity
+	): boolean {
+		// Get user's notification level preference
+		const level = this.getNotificationLevel();
+
+		if (level === NotificationLevel.NONE) {
+			return false;
+		}
+
+		if (
+			level === NotificationLevel.CRITICAL_ONLY &&
+			severity !== ErrorSeverity.CRITICAL
+		) {
+			return false;
+		}
+
+		if (
+			level === NotificationLevel.ERRORS_ONLY &&
+			severity !== ErrorSeverity.CRITICAL &&
+			severity !== ErrorSeverity.HIGH
+		) {
+			return false;
+		}
+
+		// Check category-specific rules
+		const rule = this.defaultRules.find((r) => r.category === category);
+		if (!rule || !rule.enabled) {
+			return false;
+		}
+
+		// Check if severity meets minimum threshold
+		return this.compareSeverity(severity, rule.minSeverity) >= 0;
+	}
+
+	/**
+	 * Get user's notification level preference
+	 */
+	private getNotificationLevel(): NotificationLevel {
+		const config = vscode.workspace.getConfiguration('taskmaster');
+		return config.get<NotificationLevel>(
+			'notifications.level',
+			NotificationLevel.ERRORS_ONLY
+		);
+	}
+
+	/**
+	 * Compare severity levels
+	 */
+	private compareSeverity(a: ErrorSeverity, b: ErrorSeverity): number {
+		const severityOrder = {
+			[ErrorSeverity.LOW]: 0,
+			[ErrorSeverity.MEDIUM]: 1,
+			[ErrorSeverity.HIGH]: 2,
+			[ErrorSeverity.CRITICAL]: 3
+		};
+		return severityOrder[a] - severityOrder[b];
+	}
+
+	/**
+	 * Get toast notification duration based on severity
+	 */
+	getToastDuration(severity: ErrorSeverity): number {
+		switch (severity) {
+			case ErrorSeverity.CRITICAL:
+				return 10000; // 10 seconds
+			case ErrorSeverity.HIGH:
+				return 7000; // 7 seconds
+			case ErrorSeverity.MEDIUM:
+				return 5000; // 5 seconds
+			case ErrorSeverity.LOW:
+				return 3000; // 3 seconds
+		}
+	}
+}

apps/extension/src/services/polling-service.ts

@@ -0,0 +1,92 @@
+/**
+ * Polling Service - Simplified version
+ * Uses strategy pattern for different polling behaviors
+ */
+
+import type { ExtensionLogger } from '../utils/logger';
+import type { TaskRepository } from './task-repository';
+
+export interface PollingStrategy {
+	calculateNextInterval(
+		consecutiveNoChanges: number,
+		lastChangeTime?: number
+	): number;
+	getName(): string;
+}
+
+export class PollingService {
+	private timer?: NodeJS.Timeout;
+	private consecutiveNoChanges = 0;
+	private lastChangeTime?: number;
+	private lastTasksJson?: string;
+
+	constructor(
+		private repository: TaskRepository,
+		private strategy: PollingStrategy,
+		private logger: ExtensionLogger
+	) {}
+
+	start(): void {
+		if (this.timer) {
+			return;
+		}
+
+		this.logger.log(
+			`Starting polling with ${this.strategy.getName()} strategy`
+		);
+		this.scheduleNextPoll();
+	}
+
+	stop(): void {
+		if (this.timer) {
+			clearTimeout(this.timer);
+			this.timer = undefined;
+			this.logger.log('Polling stopped');
+		}
+	}
+
+	setStrategy(strategy: PollingStrategy): void {
+		this.strategy = strategy;
+		this.logger.log(`Changed to ${strategy.getName()} polling strategy`);
+
+		// Restart with new strategy if running
+		if (this.timer) {
+			this.stop();
+			this.start();
+		}
+	}
+
+	private async poll(): Promise<void> {
+		try {
+			const tasks = await this.repository.getAll();
+			const tasksJson = JSON.stringify(tasks);
+
+			// Check for changes
+			if (tasksJson !== this.lastTasksJson) {
+				this.consecutiveNoChanges = 0;
+				this.lastChangeTime = Date.now();
+				this.logger.debug('Tasks changed');
+			} else {
+				this.consecutiveNoChanges++;
+			}
+
+			this.lastTasksJson = tasksJson;
+		} catch (error) {
+			this.logger.error('Polling error', error);
+		}
+	}
+
+	private scheduleNextPoll(): void {
+		const interval = this.strategy.calculateNextInterval(
+			this.consecutiveNoChanges,
+			this.lastChangeTime
+		);
+
+		this.timer = setTimeout(async () => {
+			await this.poll();
+			this.scheduleNextPoll();
+		}, interval);
+
+		this.logger.debug(`Next poll in ${interval}ms`);
+	}
+}

apps/extension/src/services/polling-strategies.ts

@@ -0,0 +1,67 @@
+/**
+ * Polling Strategies - Simplified
+ * Different algorithms for polling intervals
+ */
+
+import type { PollingStrategy } from './polling-service';
+
+/**
+ * Fixed interval polling
+ */
+export class FixedIntervalStrategy implements PollingStrategy {
+	constructor(private interval = 10000) {}
+
+	calculateNextInterval(): number {
+		return this.interval;
+	}
+
+	getName(): string {
+		return 'fixed';
+	}
+}
+
+/**
+ * Adaptive polling based on activity
+ */
+export class AdaptivePollingStrategy implements PollingStrategy {
+	private readonly MIN_INTERVAL = 5000; // 5 seconds
+	private readonly MAX_INTERVAL = 60000; // 1 minute
+	private readonly BASE_INTERVAL = 10000; // 10 seconds
+
+	calculateNextInterval(consecutiveNoChanges: number): number {
+		// Start with base interval
+		let interval = this.BASE_INTERVAL;
+
+		// If no changes for a while, slow down
+		if (consecutiveNoChanges > 5) {
+			interval = Math.min(
+				this.MAX_INTERVAL,
+				this.BASE_INTERVAL * 1.5 ** (consecutiveNoChanges - 5)
+			);
+		} else if (consecutiveNoChanges === 0) {
+			// Recent change, poll more frequently
+			interval = this.MIN_INTERVAL;
+		}
+
+		return Math.round(interval);
+	}
+
+	getName(): string {
+		return 'adaptive';
+	}
+}
+
+/**
+ * Create polling strategy from configuration
+ */
+export function createPollingStrategy(config: any): PollingStrategy {
+	const type = config.get('polling.strategy', 'adaptive');
+	const interval = config.get('polling.interval', 10000);
+
+	switch (type) {
+		case 'fixed':
+			return new FixedIntervalStrategy(interval);
+		default:
+			return new AdaptivePollingStrategy();
+	}
+}

apps/extension/src/services/sidebar-webview-manager.ts

@@ -0,0 +1,90 @@
+import * as vscode from 'vscode';
+import type { TaskMasterApi } from '../utils/task-master-api';
+
+export class SidebarWebviewManager implements vscode.WebviewViewProvider {
+	private webviewView?: vscode.WebviewView;
+	private api?: TaskMasterApi;
+
+	constructor(private readonly extensionUri: vscode.Uri) {}
+
+	setApi(api: TaskMasterApi): void {
+		this.api = api;
+		// Update connection status if webview exists
+		if (this.webviewView) {
+			this.updateConnectionStatus();
+		}
+	}
+
+	resolveWebviewView(
+		webviewView: vscode.WebviewView,
+		context: vscode.WebviewViewResolveContext,
+		token: vscode.CancellationToken
+	): void {
+		this.webviewView = webviewView;
+
+		webviewView.webview.options = {
+			enableScripts: true,
+			localResourceRoots: [
+				vscode.Uri.joinPath(this.extensionUri, 'dist'),
+				vscode.Uri.joinPath(this.extensionUri, 'assets')
+			]
+		};
+
+		webviewView.webview.html = this.getHtmlContent(webviewView.webview);
+
+		// Handle messages from the webview
+		webviewView.webview.onDidReceiveMessage((message) => {
+			if (message.command === 'openBoard') {
+				vscode.commands.executeCommand('tm.showKanbanBoard');
+			}
+		});
+
+		// Update connection status on load
+		this.updateConnectionStatus();
+	}
+
+	updateConnectionStatus(): void {
+		if (!this.webviewView || !this.api) return;
+
+		const status = this.api.getConnectionStatus();
+		this.webviewView.webview.postMessage({
+			type: 'connectionStatus',
+			data: status
+		});
+	}
+
+	private getHtmlContent(webview: vscode.Webview): string {
+		const scriptUri = webview.asWebviewUri(
+			vscode.Uri.joinPath(this.extensionUri, 'dist', 'sidebar.js')
+		);
+		const styleUri = webview.asWebviewUri(
+			vscode.Uri.joinPath(this.extensionUri, 'dist', 'index.css')
+		);
+		const nonce = this.getNonce();
+
+		return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}'; style-src ${webview.cspSource} 'unsafe-inline';">
+  <link href="${styleUri}" rel="stylesheet">
+  <title>TaskMaster</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script nonce="${nonce}" src="${scriptUri}"></script>
+</body>
+</html>`;
+	}
+
+	private getNonce(): string {
+		let text = '';
+		const possible =
+			'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		for (let i = 0; i < 32; i++) {
+			text += possible.charAt(Math.floor(Math.random() * possible.length));
+		}
+		return text;
+	}
+}

apps/extension/src/services/task-repository.ts

@@ -0,0 +1,149 @@
+/**
+ * Task Repository - Simplified version
+ * Handles data access with caching
+ */
+
+import { EventEmitter } from '../utils/event-emitter';
+import type { ExtensionLogger } from '../utils/logger';
+import type { TaskMasterApi, TaskMasterTask } from '../utils/task-master-api';
+
+// Use the TaskMasterTask type directly to ensure compatibility
+export type Task = TaskMasterTask;
+
+export class TaskRepository extends EventEmitter {
+	private cache: Task[] | null = null;
+	private cacheTimestamp = 0;
+	private readonly CACHE_DURATION = 30000; // 30 seconds
+
+	constructor(
+		private api: TaskMasterApi,
+		private logger: ExtensionLogger
+	) {
+		super();
+	}
+
+	async getAll(options?: {
+		tag?: string;
+		withSubtasks?: boolean;
+	}): Promise<Task[]> {
+		// If a tag is specified, always fetch fresh data
+		const shouldUseCache =
+			!options?.tag &&
+			this.cache &&
+			Date.now() - this.cacheTimestamp < this.CACHE_DURATION;
+
+		if (shouldUseCache) {
+			return this.cache || [];
+		}
+
+		try {
+			const result = await this.api.getTasks({
+				withSubtasks: options?.withSubtasks ?? true,
+				tag: options?.tag
+			});
+
+			if (result.success && result.data) {
+				this.cache = result.data;
+				this.cacheTimestamp = Date.now();
+				this.emit('tasks:updated', result.data);
+				return result.data;
+			}
+
+			throw new Error(result.error || 'Failed to fetch tasks');
+		} catch (error) {
+			this.logger.error('Failed to get tasks', error);
+			throw error;
+		}
+	}
+
+	async getById(taskId: string): Promise<Task | null> {
+		// First check cache
+		if (this.cache) {
+			// Handle both main tasks and subtasks
+			for (const task of this.cache) {
+				if (task.id === taskId) {
+					return task;
+				}
+				// Check subtasks
+				if (task.subtasks) {
+					for (const subtask of task.subtasks) {
+						if (
+							subtask.id === taskId ||
+							`${task.id}.${subtask.id}` === taskId
+						) {
+							return subtask;
+						}
+					}
+				}
+			}
+		}
+
+		// If not in cache, fetch all and search
+		const tasks = await this.getAll();
+		for (const task of tasks) {
+			if (task.id === taskId) {
+				return task;
+			}
+			// Check subtasks
+			if (task.subtasks) {
+				for (const subtask of task.subtasks) {
+					if (subtask.id === taskId || `${task.id}.${subtask.id}` === taskId) {
+						return subtask;
+					}
+				}
+			}
+		}
+
+		return null;
+	}
+
+	async updateStatus(taskId: string, status: Task['status']): Promise<void> {
+		try {
+			const result = await this.api.updateTaskStatus(taskId, status);
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to update status');
+			}
+
+			// Invalidate cache
+			this.cache = null;
+
+			// Fetch updated tasks
+			await this.getAll();
+		} catch (error) {
+			this.logger.error('Failed to update task status', error);
+			throw error;
+		}
+	}
+
+	async updateContent(taskId: string, updates: any): Promise<void> {
+		try {
+			const result = await this.api.updateTask(taskId, updates, {
+				append: false,
+				research: false
+			});
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to update task');
+			}
+
+			// Invalidate cache
+			this.cache = null;
+
+			// Fetch updated tasks
+			await this.getAll();
+		} catch (error) {
+			this.logger.error('Failed to update task content', error);
+			throw error;
+		}
+	}
+
+	async refresh(): Promise<void> {
+		this.cache = null;
+		await this.getAll();
+	}
+
+	isConnected(): boolean {
+		return this.api.getConnectionStatus().isConnected;
+	}
+}

apps/extension/src/services/webview-manager.ts

@@ -0,0 +1,424 @@
+/**
+ * Webview Manager - Simplified
+ * Manages webview panels and message handling
+ */
+
+import * as vscode from 'vscode';
+import type { EventEmitter } from '../utils/event-emitter';
+import type { ExtensionLogger } from '../utils/logger';
+import type { ConfigService } from './config-service';
+import type { TaskRepository } from './task-repository';
+
+export class WebviewManager {
+	private panels = new Set<vscode.WebviewPanel>();
+	private configService?: ConfigService;
+	private mcpClient?: any;
+	private api?: any;
+
+	constructor(
+		private context: vscode.ExtensionContext,
+		private repository: TaskRepository,
+		private events: EventEmitter,
+		private logger: ExtensionLogger
+	) {}
+
+	setConfigService(configService: ConfigService): void {
+		this.configService = configService;
+	}
+
+	setMCPClient(mcpClient: any): void {
+		this.mcpClient = mcpClient;
+	}
+
+	setApi(api: any): void {
+		this.api = api;
+	}
+
+	async createOrShowPanel(): Promise<void> {
+		// Find existing panel
+		const existing = Array.from(this.panels).find(
+			(p) => p.title === 'TaskMaster Kanban'
+		);
+		if (existing) {
+			existing.reveal();
+			return;
+		}
+
+		// Create new panel
+		const panel = vscode.window.createWebviewPanel(
+			'taskrKanban',
+			'TaskMaster Kanban',
+			vscode.ViewColumn.One,
+			{
+				enableScripts: true,
+				retainContextWhenHidden: true,
+				localResourceRoots: [
+					vscode.Uri.joinPath(this.context.extensionUri, 'dist')
+				]
+			}
+		);
+
+		// Set the icon for the webview tab
+		panel.iconPath = {
+			light: vscode.Uri.joinPath(
+				this.context.extensionUri,
+				'assets',
+				'icon-light.svg'
+			),
+			dark: vscode.Uri.joinPath(
+				this.context.extensionUri,
+				'assets',
+				'icon-dark.svg'
+			)
+		};
+
+		this.panels.add(panel);
+		panel.webview.html = this.getWebviewContent(panel.webview);
+
+		// Handle messages
+		panel.webview.onDidReceiveMessage(async (message) => {
+			await this.handleMessage(panel, message);
+		});
+
+		// Handle disposal
+		panel.onDidDispose(() => {
+			this.panels.delete(panel);
+			this.events.emit('webview:closed');
+		});
+
+		this.events.emit('webview:opened');
+		vscode.window.showInformationMessage('TaskMaster Kanban opened!');
+	}
+
+	broadcast(type: string, data: any): void {
+		this.panels.forEach((panel) => {
+			panel.webview.postMessage({ type, data });
+		});
+	}
+
+	getPanelCount(): number {
+		return this.panels.size;
+	}
+
+	dispose(): void {
+		this.panels.forEach((panel) => panel.dispose());
+		this.panels.clear();
+	}
+
+	private async handleMessage(
+		panel: vscode.WebviewPanel,
+		message: any
+	): Promise<void> {
+		// Validate message structure
+		if (!message || typeof message !== 'object') {
+			this.logger.error('Invalid message received:', message);
+			return;
+		}
+
+		const { type, data, requestId } = message;
+		this.logger.debug(`Webview message: ${type}`, message);
+
+		try {
+			let response: any;
+
+			switch (type) {
+				case 'ready':
+					// Webview is ready, send current connection status
+					const isConnected = this.mcpClient?.getStatus()?.isRunning || false;
+					panel.webview.postMessage({
+						type: 'connectionStatus',
+						data: {
+							isConnected: isConnected,
+							status: isConnected ? 'Connected' : 'Disconnected'
+						}
+					});
+					// No response needed for ready message
+					return;
+
+				case 'getTasks':
+					// Pass options to getAll including tag if specified
+					response = await this.repository.getAll({
+						tag: data?.tag,
+						withSubtasks: data?.withSubtasks ?? true
+					});
+					break;
+
+				case 'updateTaskStatus':
+					await this.repository.updateStatus(data.taskId, data.newStatus);
+					response = { success: true };
+					break;
+
+				case 'getConfig':
+					if (this.configService) {
+						response = await this.configService.getSafeConfig();
+					} else {
+						response = null;
+					}
+					break;
+
+				case 'readTaskFileData':
+					// For now, return the task data from repository
+					// In the future, this could read from actual task files
+					const task = await this.repository.getById(data.taskId);
+					if (task) {
+						response = {
+							details: task.details || '',
+							testStrategy: task.testStrategy || ''
+						};
+					} else {
+						response = {
+							details: '',
+							testStrategy: ''
+						};
+					}
+					break;
+
+				case 'updateTask':
+					// Handle task content updates with MCP
+					if (this.mcpClient) {
+						try {
+							const { taskId, updates, options = {} } = data;
+
+							// Use the update_task MCP tool
+							await this.mcpClient.callTool('update_task', {
+								id: String(taskId),
+								prompt: updates.description || '',
+								append: options.append || false,
+								research: options.research || false,
+								projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
+							});
+
+							response = { success: true };
+						} catch (error) {
+							this.logger.error('Failed to update task via MCP:', error);
+							throw error;
+						}
+					} else {
+						throw new Error('MCP client not initialized');
+					}
+					break;
+
+				case 'updateSubtask':
+					// Handle subtask content updates with MCP
+					if (this.mcpClient) {
+						try {
+							const { taskId, prompt, options = {} } = data;
+
+							// Use the update_subtask MCP tool
+							await this.mcpClient.callTool('update_subtask', {
+								id: String(taskId),
+								prompt: prompt,
+								research: options.research || false,
+								projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
+							});
+
+							response = { success: true };
+						} catch (error) {
+							this.logger.error('Failed to update subtask via MCP:', error);
+							throw error;
+						}
+					} else {
+						throw new Error('MCP client not initialized');
+					}
+					break;
+
+				case 'getComplexity':
+					// For backward compatibility - redirect to mcpRequest
+					this.logger.debug(
+						`getComplexity request for task ${data.taskId}, mcpClient available: ${!!this.mcpClient}`
+					);
+					if (this.mcpClient && data.taskId) {
+						try {
+							const complexityResult = await this.mcpClient.callTool(
+								'complexity_report',
+								{
+									projectRoot:
+										vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
+								}
+							);
+
+							if (complexityResult?.report?.complexityAnalysis?.tasks) {
+								const task =
+									complexityResult.report.complexityAnalysis.tasks.find(
+										(t: any) => t.id === data.taskId
+									);
+								response = task ? { score: task.complexityScore } : {};
+							} else {
+								response = {};
+							}
+						} catch (error) {
+							this.logger.error('Failed to get complexity', error);
+							response = {};
+						}
+					} else {
+						this.logger.warn(
+							`Cannot get complexity: mcpClient=${!!this.mcpClient}, taskId=${data.taskId}`
+						);
+						response = {};
+					}
+					break;
+
+				case 'mcpRequest':
+					// Handle MCP tool calls
+					try {
+						// The tool and params come directly in the message
+						const tool = message.tool;
+						const params = message.params || {};
+
+						if (!this.mcpClient) {
+							throw new Error('MCP client not initialized');
+						}
+
+						if (!tool) {
+							throw new Error('Tool name not specified in mcpRequest');
+						}
+
+						// Add projectRoot if not provided
+						if (!params.projectRoot) {
+							params.projectRoot =
+								vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
+						}
+
+						const result = await this.mcpClient.callTool(tool, params);
+						response = { data: result };
+					} catch (error) {
+						this.logger.error('MCP request failed:', error);
+						// Re-throw with cleaner error message
+						throw new Error(
+							error instanceof Error ? error.message : 'Unknown error'
+						);
+					}
+					break;
+
+				case 'getTags':
+					// Get available tags
+					if (this.mcpClient) {
+						try {
+							const result = await this.mcpClient.callTool('list_tags', {
+								projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath,
+								showMetadata: false
+							});
+							// The MCP response has a specific structure
+							// Based on the MCP SDK, the response is in result.content[0].text
+							let parsedData;
+							if (
+								result?.content &&
+								Array.isArray(result.content) &&
+								result.content[0]?.text
+							) {
+								try {
+									parsedData = JSON.parse(result.content[0].text);
+								} catch (e) {
+									this.logger.error('Failed to parse MCP response text:', e);
+								}
+							}
+
+							// Extract tags data from the parsed response
+							if (parsedData?.data) {
+								response = parsedData.data;
+							} else if (parsedData) {
+								response = parsedData;
+							} else if (result?.data) {
+								response = result.data;
+							} else {
+								response = { tags: [], currentTag: 'master' };
+							}
+						} catch (error) {
+							this.logger.error('Failed to get tags:', error);
+							response = { tags: [], currentTag: 'master' };
+						}
+					} else {
+						response = { tags: [], currentTag: 'master' };
+					}
+					break;
+
+				case 'switchTag':
+					// Switch to a different tag
+					if (this.mcpClient && data.tagName) {
+						try {
+							await this.mcpClient.callTool('use_tag', {
+								name: data.tagName,
+								projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
+							});
+							// Clear cache and fetch tasks for the new tag
+							await this.repository.refresh();
+							const tasks = await this.repository.getAll({ tag: data.tagName });
+							this.broadcast('tasksUpdated', { tasks, source: 'tag-switch' });
+							response = { success: true };
+						} catch (error) {
+							this.logger.error('Failed to switch tag:', error);
+							throw error;
+						}
+					} else {
+						throw new Error('Tag name not provided');
+					}
+					break;
+
+				case 'openExternal':
+					// Open external URL
+					if (message.url) {
+						vscode.env.openExternal(vscode.Uri.parse(message.url));
+					}
+					return;
+
+				default:
+					throw new Error(`Unknown message type: ${type}`);
+			}
+
+			// Send response
+			if (requestId) {
+				panel.webview.postMessage({
+					type: 'response',
+					requestId,
+					success: true,
+					data: response
+				});
+			}
+		} catch (error) {
+			this.logger.error(`Error handling message ${type}`, error);
+
+			if (requestId) {
+				panel.webview.postMessage({
+					type: 'error',
+					requestId,
+					error: error instanceof Error ? error.message : 'Unknown error'
+				});
+			}
+		}
+	}
+
+	private getWebviewContent(webview: vscode.Webview): string {
+		const scriptUri = webview.asWebviewUri(
+			vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'index.js')
+		);
+		const styleUri = webview.asWebviewUri(
+			vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'index.css')
+		);
+		const nonce = this.getNonce();
+
+		return `<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}'; style-src ${webview.cspSource} 'unsafe-inline';">
+	<link href="${styleUri}" rel="stylesheet">
+	<title>TaskMaster Kanban</title>
+</head>
+<body>
+	<div id="root"></div>
+	<script nonce="${nonce}" src="${scriptUri}"></script>
+</body>
+</html>`;
+	}
+
+	private getNonce(): string {
+		let text = '';
+		const possible =
+			'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+		for (let i = 0; i < 32; i++) {
+			text += possible.charAt(Math.floor(Math.random() * possible.length));
+		}
+		return text;
+	}
+}

apps/extension/src/test/extension.test.ts

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});

apps/extension/src/utils/configManager.ts

@@ -0,0 +1,514 @@
+import * as vscode from 'vscode';
+import { logger } from './logger';
+import type { MCPConfig } from './mcpClient';
+
+export interface TaskMasterConfig {
+	mcp: MCPServerConfig;
+	ui: UIConfig;
+	performance: PerformanceConfig;
+	debug: DebugConfig;
+}
+
+export interface MCPServerConfig {
+	command: string;
+	args: string[];
+	cwd?: string;
+	env?: Record<string, string>;
+	timeout: number;
+	maxReconnectAttempts: number;
+	reconnectBackoffMs: number;
+	maxBackoffMs: number;
+	healthCheckIntervalMs: number;
+}
+
+export interface UIConfig {
+	autoRefresh: boolean;
+	refreshIntervalMs: number;
+	theme: 'auto' | 'light' | 'dark';
+	showCompletedTasks: boolean;
+	taskDisplayLimit: number;
+	showPriority: boolean;
+	showTaskIds: boolean;
+}
+
+export interface PerformanceConfig {
+	maxConcurrentRequests: number;
+	requestTimeoutMs: number;
+	cacheTasksMs: number;
+	lazyLoadThreshold: number;
+}
+
+export interface DebugConfig {
+	enableLogging: boolean;
+	logLevel: 'error' | 'warn' | 'info' | 'debug';
+	enableConnectionMetrics: boolean;
+	saveEventLogs: boolean;
+	maxEventLogSize: number;
+}
+
+export interface ConfigValidationResult {
+	isValid: boolean;
+	errors: string[];
+	warnings: string[];
+}
+
+export class ConfigManager {
+	private static instance: ConfigManager | null = null;
+	private config: TaskMasterConfig;
+	private configListeners: ((config: TaskMasterConfig) => void)[] = [];
+
+	private constructor() {
+		this.config = this.loadConfig();
+		this.setupConfigWatcher();
+	}
+
+	/**
+	 * Get singleton instance
+	 */
+	static getInstance(): ConfigManager {
+		if (!ConfigManager.instance) {
+			ConfigManager.instance = new ConfigManager();
+		}
+		return ConfigManager.instance;
+	}
+
+	/**
+	 * Get current configuration
+	 */
+	getConfig(): TaskMasterConfig {
+		return { ...this.config };
+	}
+
+	/**
+	 * Get MCP configuration for the client
+	 */
+	getMCPConfig(): MCPConfig {
+		const mcpConfig = this.config.mcp;
+		return {
+			command: mcpConfig.command,
+			args: mcpConfig.args,
+			cwd: mcpConfig.cwd,
+			env: mcpConfig.env
+		};
+	}
+
+	/**
+	 * Update configuration (programmatically)
+	 */
+	async updateConfig(updates: Partial<TaskMasterConfig>): Promise<void> {
+		const newConfig = this.mergeConfig(this.config, updates);
+		const validation = this.validateConfig(newConfig);
+
+		if (!validation.isValid) {
+			throw new Error(
+				`Configuration validation failed: ${validation.errors.join(', ')}`
+			);
+		}
+
+		// Update VS Code settings
+		const vsConfig = vscode.workspace.getConfiguration('taskmaster');
+
+		if (updates.mcp) {
+			if (updates.mcp.command !== undefined) {
+				await vsConfig.update(
+					'mcp.command',
+					updates.mcp.command,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+			if (updates.mcp.args !== undefined) {
+				await vsConfig.update(
+					'mcp.args',
+					updates.mcp.args,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+			if (updates.mcp.cwd !== undefined) {
+				await vsConfig.update(
+					'mcp.cwd',
+					updates.mcp.cwd,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+			if (updates.mcp.timeout !== undefined) {
+				await vsConfig.update(
+					'mcp.timeout',
+					updates.mcp.timeout,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+		}
+
+		if (updates.ui) {
+			if (updates.ui.autoRefresh !== undefined) {
+				await vsConfig.update(
+					'ui.autoRefresh',
+					updates.ui.autoRefresh,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+			if (updates.ui.theme !== undefined) {
+				await vsConfig.update(
+					'ui.theme',
+					updates.ui.theme,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+		}
+
+		if (updates.debug) {
+			if (updates.debug.enableLogging !== undefined) {
+				await vsConfig.update(
+					'debug.enableLogging',
+					updates.debug.enableLogging,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+			if (updates.debug.logLevel !== undefined) {
+				await vsConfig.update(
+					'debug.logLevel',
+					updates.debug.logLevel,
+					vscode.ConfigurationTarget.Workspace
+				);
+			}
+		}
+
+		this.config = newConfig;
+		this.notifyConfigChange();
+	}
+
+	/**
+	 * Validate configuration
+	 */
+	validateConfig(config: TaskMasterConfig): ConfigValidationResult {
+		const errors: string[] = [];
+		const warnings: string[] = [];
+
+		// Validate MCP configuration
+		if (!config.mcp.command || config.mcp.command.trim() === '') {
+			errors.push('MCP command cannot be empty');
+		}
+
+		if (config.mcp.timeout < 1000) {
+			warnings.push(
+				'MCP timeout is very low (< 1s), this may cause connection issues'
+			);
+		} else if (config.mcp.timeout > 60000) {
+			warnings.push(
+				'MCP timeout is very high (> 60s), this may cause slow responses'
+			);
+		}
+
+		if (config.mcp.maxReconnectAttempts < 1) {
+			errors.push('Max reconnect attempts must be at least 1');
+		} else if (config.mcp.maxReconnectAttempts > 10) {
+			warnings.push(
+				'Max reconnect attempts is very high, this may cause long delays'
+			);
+		}
+
+		// Validate UI configuration
+		if (config.ui.refreshIntervalMs < 1000) {
+			warnings.push(
+				'UI refresh interval is very low (< 1s), this may impact performance'
+			);
+		}
+
+		if (config.ui.taskDisplayLimit < 1) {
+			errors.push('Task display limit must be at least 1');
+		} else if (config.ui.taskDisplayLimit > 1000) {
+			warnings.push(
+				'Task display limit is very high, this may impact performance'
+			);
+		}
+
+		// Validate performance configuration
+		if (config.performance.maxConcurrentRequests < 1) {
+			errors.push('Max concurrent requests must be at least 1');
+		} else if (config.performance.maxConcurrentRequests > 20) {
+			warnings.push(
+				'Max concurrent requests is very high, this may overwhelm the server'
+			);
+		}
+
+		if (config.performance.requestTimeoutMs < 1000) {
+			warnings.push(
+				'Request timeout is very low (< 1s), this may cause premature timeouts'
+			);
+		}
+
+		// Validate debug configuration
+		if (config.debug.maxEventLogSize < 10) {
+			errors.push('Max event log size must be at least 10');
+		} else if (config.debug.maxEventLogSize > 10000) {
+			warnings.push(
+				'Max event log size is very high, this may consume significant memory'
+			);
+		}
+
+		return {
+			isValid: errors.length === 0,
+			errors,
+			warnings
+		};
+	}
+
+	/**
+	 * Reset configuration to defaults
+	 */
+	async resetToDefaults(): Promise<void> {
+		const defaultConfig = this.getDefaultConfig();
+		await this.updateConfig(defaultConfig);
+	}
+
+	/**
+	 * Export configuration to JSON
+	 */
+	exportConfig(): string {
+		return JSON.stringify(this.config, null, 2);
+	}
+
+	/**
+	 * Import configuration from JSON
+	 */
+	async importConfig(jsonConfig: string): Promise<void> {
+		try {
+			const importedConfig = JSON.parse(jsonConfig) as TaskMasterConfig;
+			const validation = this.validateConfig(importedConfig);
+
+			if (!validation.isValid) {
+				throw new Error(
+					`Invalid configuration: ${validation.errors.join(', ')}`
+				);
+			}
+
+			if (validation.warnings.length > 0) {
+				const proceed = await vscode.window.showWarningMessage(
+					`Configuration has warnings: ${validation.warnings.join(', ')}. Import anyway?`,
+					'Yes',
+					'No'
+				);
+
+				if (proceed !== 'Yes') {
+					return;
+				}
+			}
+
+			await this.updateConfig(importedConfig);
+			vscode.window.showInformationMessage(
+				'Configuration imported successfully'
+			);
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : 'Unknown error';
+			vscode.window.showErrorMessage(
+				`Failed to import configuration: ${errorMessage}`
+			);
+			throw error;
+		}
+	}
+
+	/**
+	 * Add configuration change listener
+	 */
+	onConfigChange(listener: (config: TaskMasterConfig) => void): void {
+		this.configListeners.push(listener);
+	}
+
+	/**
+	 * Remove configuration change listener
+	 */
+	removeConfigListener(listener: (config: TaskMasterConfig) => void): void {
+		const index = this.configListeners.indexOf(listener);
+		if (index !== -1) {
+			this.configListeners.splice(index, 1);
+		}
+	}
+
+	/**
+	 * Load configuration from VS Code settings
+	 */
+	private loadConfig(): TaskMasterConfig {
+		const vsConfig = vscode.workspace.getConfiguration('taskmaster');
+		const defaultConfig = this.getDefaultConfig();
+
+		return {
+			mcp: {
+				command: vsConfig.get('mcp.command', defaultConfig.mcp.command),
+				args: vsConfig.get('mcp.args', defaultConfig.mcp.args),
+				cwd: vsConfig.get('mcp.cwd', defaultConfig.mcp.cwd),
+				env: vsConfig.get('mcp.env', defaultConfig.mcp.env),
+				timeout: vsConfig.get('mcp.timeout', defaultConfig.mcp.timeout),
+				maxReconnectAttempts: vsConfig.get(
+					'mcp.maxReconnectAttempts',
+					defaultConfig.mcp.maxReconnectAttempts
+				),
+				reconnectBackoffMs: vsConfig.get(
+					'mcp.reconnectBackoffMs',
+					defaultConfig.mcp.reconnectBackoffMs
+				),
+				maxBackoffMs: vsConfig.get(
+					'mcp.maxBackoffMs',
+					defaultConfig.mcp.maxBackoffMs
+				),
+				healthCheckIntervalMs: vsConfig.get(
+					'mcp.healthCheckIntervalMs',
+					defaultConfig.mcp.healthCheckIntervalMs
+				)
+			},
+			ui: {
+				autoRefresh: vsConfig.get(
+					'ui.autoRefresh',
+					defaultConfig.ui.autoRefresh
+				),
+				refreshIntervalMs: vsConfig.get(
+					'ui.refreshIntervalMs',
+					defaultConfig.ui.refreshIntervalMs
+				),
+				theme: vsConfig.get('ui.theme', defaultConfig.ui.theme),
+				showCompletedTasks: vsConfig.get(
+					'ui.showCompletedTasks',
+					defaultConfig.ui.showCompletedTasks
+				),
+				taskDisplayLimit: vsConfig.get(
+					'ui.taskDisplayLimit',
+					defaultConfig.ui.taskDisplayLimit
+				),
+				showPriority: vsConfig.get(
+					'ui.showPriority',
+					defaultConfig.ui.showPriority
+				),
+				showTaskIds: vsConfig.get(
+					'ui.showTaskIds',
+					defaultConfig.ui.showTaskIds
+				)
+			},
+			performance: {
+				maxConcurrentRequests: vsConfig.get(
+					'performance.maxConcurrentRequests',
+					defaultConfig.performance.maxConcurrentRequests
+				),
+				requestTimeoutMs: vsConfig.get(
+					'performance.requestTimeoutMs',
+					defaultConfig.performance.requestTimeoutMs
+				),
+				cacheTasksMs: vsConfig.get(
+					'performance.cacheTasksMs',
+					defaultConfig.performance.cacheTasksMs
+				),
+				lazyLoadThreshold: vsConfig.get(
+					'performance.lazyLoadThreshold',
+					defaultConfig.performance.lazyLoadThreshold
+				)
+			},
+			debug: {
+				enableLogging: vsConfig.get(
+					'debug.enableLogging',
+					defaultConfig.debug.enableLogging
+				),
+				logLevel: vsConfig.get('debug.logLevel', defaultConfig.debug.logLevel),
+				enableConnectionMetrics: vsConfig.get(
+					'debug.enableConnectionMetrics',
+					defaultConfig.debug.enableConnectionMetrics
+				),
+				saveEventLogs: vsConfig.get(
+					'debug.saveEventLogs',
+					defaultConfig.debug.saveEventLogs
+				),
+				maxEventLogSize: vsConfig.get(
+					'debug.maxEventLogSize',
+					defaultConfig.debug.maxEventLogSize
+				)
+			}
+		};
+	}
+
+	/**
+	 * Get default configuration
+	 */
+	private getDefaultConfig(): TaskMasterConfig {
+		return {
+			mcp: {
+				command: 'npx',
+				args: ['task-master-ai'],
+				cwd: vscode.workspace.rootPath || '',
+				env: undefined,
+				timeout: 30000,
+				maxReconnectAttempts: 5,
+				reconnectBackoffMs: 1000,
+				maxBackoffMs: 30000,
+				healthCheckIntervalMs: 15000
+			},
+			ui: {
+				autoRefresh: true,
+				refreshIntervalMs: 10000,
+				theme: 'auto',
+				showCompletedTasks: true,
+				taskDisplayLimit: 100,
+				showPriority: true,
+				showTaskIds: true
+			},
+			performance: {
+				maxConcurrentRequests: 5,
+				requestTimeoutMs: 30000,
+				cacheTasksMs: 5000,
+				lazyLoadThreshold: 50
+			},
+			debug: {
+				enableLogging: true,
+				logLevel: 'info',
+				enableConnectionMetrics: true,
+				saveEventLogs: false,
+				maxEventLogSize: 1000
+			}
+		};
+	}
+
+	/**
+	 * Setup configuration watcher
+	 */
+	private setupConfigWatcher(): void {
+		vscode.workspace.onDidChangeConfiguration((event) => {
+			if (event.affectsConfiguration('taskmaster')) {
+				logger.log('Task Master configuration changed, reloading...');
+				this.config = this.loadConfig();
+				this.notifyConfigChange();
+			}
+		});
+	}
+
+	/**
+	 * Merge configurations
+	 */
+	private mergeConfig(
+		baseConfig: TaskMasterConfig,
+		updates: Partial<TaskMasterConfig>
+	): TaskMasterConfig {
+		return {
+			mcp: { ...baseConfig.mcp, ...updates.mcp },
+			ui: { ...baseConfig.ui, ...updates.ui },
+			performance: { ...baseConfig.performance, ...updates.performance },
+			debug: { ...baseConfig.debug, ...updates.debug }
+		};
+	}
+
+	/**
+	 * Notify configuration change listeners
+	 */
+	private notifyConfigChange(): void {
+		this.configListeners.forEach((listener) => {
+			try {
+				listener(this.config);
+			} catch (error) {
+				logger.error('Error in configuration change listener:', error);
+			}
+		});
+	}
+}
+
+/**
+ * Utility function to get configuration manager instance
+ */
+export function getConfigManager(): ConfigManager {
+	return ConfigManager.getInstance();
+}

apps/extension/src/utils/connectionManager.ts

@@ -0,0 +1,387 @@
+import * as vscode from 'vscode';
+import { logger } from './logger';
+import {
+	MCPClientManager,
+	type MCPConfig,
+	type MCPServerStatus
+} from './mcpClient';
+
+export interface ConnectionEvent {
+	type: 'connected' | 'disconnected' | 'error' | 'reconnecting';
+	timestamp: Date;
+	data?: any;
+}
+
+export interface ConnectionHealth {
+	isHealthy: boolean;
+	lastSuccessfulCall?: Date;
+	consecutiveFailures: number;
+	averageResponseTime: number;
+	uptime: number;
+}
+
+export class ConnectionManager {
+	private mcpClient: MCPClientManager | null = null;
+	private config: MCPConfig;
+	private connectionEvents: ConnectionEvent[] = [];
+	private health: ConnectionHealth = {
+		isHealthy: false,
+		consecutiveFailures: 0,
+		averageResponseTime: 0,
+		uptime: 0
+	};
+	private startTime: Date | null = null;
+	private healthCheckInterval: NodeJS.Timeout | null = null;
+	private reconnectAttempts = 0;
+	private maxReconnectAttempts = 5;
+	private reconnectBackoffMs = 1000; // Start with 1 second
+	private maxBackoffMs = 30000; // Max 30 seconds
+	private isReconnecting = false;
+
+	// Event handlers
+	private onConnectionChange?: (
+		status: MCPServerStatus,
+		health: ConnectionHealth
+	) => void;
+	private onConnectionEvent?: (event: ConnectionEvent) => void;
+
+	constructor(config: MCPConfig) {
+		this.config = config;
+		this.mcpClient = new MCPClientManager(config);
+	}
+
+	/**
+	 * Set event handlers
+	 */
+	setEventHandlers(handlers: {
+		onConnectionChange?: (
+			status: MCPServerStatus,
+			health: ConnectionHealth
+		) => void;
+		onConnectionEvent?: (event: ConnectionEvent) => void;
+	}) {
+		this.onConnectionChange = handlers.onConnectionChange;
+		this.onConnectionEvent = handlers.onConnectionEvent;
+	}
+
+	/**
+	 * Connect with automatic retry and health monitoring
+	 */
+	async connect(): Promise<void> {
+		try {
+			if (!this.mcpClient) {
+				throw new Error('MCP client not initialized');
+			}
+
+			this.logEvent({ type: 'reconnecting', timestamp: new Date() });
+
+			await this.mcpClient.connect();
+
+			this.reconnectAttempts = 0;
+			this.reconnectBackoffMs = 1000;
+			this.isReconnecting = false;
+			this.startTime = new Date();
+
+			this.updateHealth();
+			this.startHealthMonitoring();
+
+			this.logEvent({ type: 'connected', timestamp: new Date() });
+
+			logger.log('Connection manager: Successfully connected');
+		} catch (error) {
+			this.logEvent({
+				type: 'error',
+				timestamp: new Date(),
+				data: {
+					error: error instanceof Error ? error.message : 'Unknown error'
+				}
+			});
+
+			await this.handleConnectionFailure(error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Disconnect and stop health monitoring
+	 */
+	async disconnect(): Promise<void> {
+		this.stopHealthMonitoring();
+		this.isReconnecting = false;
+
+		if (this.mcpClient) {
+			await this.mcpClient.disconnect();
+		}
+
+		this.health.isHealthy = false;
+		this.startTime = null;
+
+		this.logEvent({ type: 'disconnected', timestamp: new Date() });
+
+		this.notifyConnectionChange();
+	}
+
+	/**
+	 * Get current connection status
+	 */
+	getStatus(): MCPServerStatus {
+		return this.mcpClient?.getStatus() || { isRunning: false };
+	}
+
+	/**
+	 * Get connection health metrics
+	 */
+	getHealth(): ConnectionHealth {
+		this.updateHealth();
+		return { ...this.health };
+	}
+
+	/**
+	 * Get recent connection events
+	 */
+	getEvents(limit = 10): ConnectionEvent[] {
+		return this.connectionEvents.slice(-limit);
+	}
+
+	/**
+	 * Test connection with performance monitoring
+	 */
+	async testConnection(): Promise<{
+		success: boolean;
+		responseTime: number;
+		error?: string;
+	}> {
+		if (!this.mcpClient) {
+			return {
+				success: false,
+				responseTime: 0,
+				error: 'Client not initialized'
+			};
+		}
+
+		const startTime = Date.now();
+
+		try {
+			const success = await this.mcpClient.testConnection();
+			const responseTime = Date.now() - startTime;
+
+			if (success) {
+				this.health.lastSuccessfulCall = new Date();
+				this.health.consecutiveFailures = 0;
+				this.updateAverageResponseTime(responseTime);
+			} else {
+				this.health.consecutiveFailures++;
+			}
+
+			this.updateHealth();
+			this.notifyConnectionChange();
+
+			return { success, responseTime };
+		} catch (error) {
+			const responseTime = Date.now() - startTime;
+			this.health.consecutiveFailures++;
+			this.updateHealth();
+			this.notifyConnectionChange();
+
+			return {
+				success: false,
+				responseTime,
+				error: error instanceof Error ? error.message : 'Unknown error'
+			};
+		}
+	}
+
+	/**
+	 * Call MCP tool with automatic retry and health monitoring
+	 */
+	async callTool(
+		toolName: string,
+		arguments_: Record<string, unknown>
+	): Promise<any> {
+		if (!this.mcpClient) {
+			throw new Error('MCP client not initialized');
+		}
+
+		const startTime = Date.now();
+
+		try {
+			const result = await this.mcpClient.callTool(toolName, arguments_);
+			const responseTime = Date.now() - startTime;
+
+			this.health.lastSuccessfulCall = new Date();
+			this.health.consecutiveFailures = 0;
+			this.updateAverageResponseTime(responseTime);
+			this.updateHealth();
+			this.notifyConnectionChange();
+
+			return result;
+		} catch (error) {
+			this.health.consecutiveFailures++;
+			this.updateHealth();
+
+			// Attempt reconnection if connection seems lost
+			if (this.health.consecutiveFailures >= 3 && !this.isReconnecting) {
+				logger.log(
+					'Multiple consecutive failures detected, attempting reconnection...'
+				);
+				this.reconnectWithBackoff().catch((err) => {
+					logger.error('Reconnection failed:', err);
+				});
+			}
+
+			this.notifyConnectionChange();
+			throw error;
+		}
+	}
+
+	/**
+	 * Update configuration and reconnect
+	 */
+	async updateConfig(newConfig: MCPConfig): Promise<void> {
+		this.config = newConfig;
+
+		await this.disconnect();
+		this.mcpClient = new MCPClientManager(newConfig);
+
+		// Attempt to reconnect with new config
+		try {
+			await this.connect();
+		} catch (error) {
+			logger.error('Failed to connect with new configuration:', error);
+		}
+	}
+
+	/**
+	 * Start health monitoring
+	 */
+	private startHealthMonitoring(): void {
+		this.stopHealthMonitoring();
+
+		this.healthCheckInterval = setInterval(async () => {
+			try {
+				await this.testConnection();
+			} catch (error) {
+				logger.error('Health check failed:', error);
+			}
+		}, 15000); // Check every 15 seconds
+	}
+
+	/**
+	 * Stop health monitoring
+	 */
+	private stopHealthMonitoring(): void {
+		if (this.healthCheckInterval) {
+			clearInterval(this.healthCheckInterval);
+			this.healthCheckInterval = null;
+		}
+	}
+
+	/**
+	 * Handle connection failure with exponential backoff
+	 */
+	private async handleConnectionFailure(error: any): Promise<void> {
+		this.health.consecutiveFailures++;
+		this.updateHealth();
+		this.notifyConnectionChange();
+
+		if (
+			this.reconnectAttempts < this.maxReconnectAttempts &&
+			!this.isReconnecting
+		) {
+			await this.reconnectWithBackoff();
+		}
+	}
+
+	/**
+	 * Reconnect with exponential backoff
+	 */
+	private async reconnectWithBackoff(): Promise<void> {
+		if (this.isReconnecting) {
+			return;
+		}
+
+		this.isReconnecting = true;
+		this.reconnectAttempts++;
+
+		const backoffMs = Math.min(
+			this.reconnectBackoffMs * 2 ** (this.reconnectAttempts - 1),
+			this.maxBackoffMs
+		);
+
+		logger.log(
+			`Attempting reconnection ${this.reconnectAttempts}/${this.maxReconnectAttempts} in ${backoffMs}ms...`
+		);
+
+		await new Promise((resolve) => setTimeout(resolve, backoffMs));
+
+		try {
+			await this.connect();
+		} catch (error) {
+			logger.error(
+				`Reconnection attempt ${this.reconnectAttempts} failed:`,
+				error
+			);
+
+			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+				this.isReconnecting = false;
+				vscode.window.showErrorMessage(
+					`Failed to reconnect to Task Master after ${this.maxReconnectAttempts} attempts. Please check your configuration and try manually reconnecting.`
+				);
+			} else {
+				// Try again
+				await this.reconnectWithBackoff();
+			}
+		}
+	}
+
+	/**
+	 * Update health metrics
+	 */
+	private updateHealth(): void {
+		const status = this.getStatus();
+		this.health.isHealthy =
+			status.isRunning && this.health.consecutiveFailures < 3;
+
+		if (this.startTime) {
+			this.health.uptime = Date.now() - this.startTime.getTime();
+		}
+	}
+
+	/**
+	 * Update average response time
+	 */
+	private updateAverageResponseTime(responseTime: number): void {
+		// Simple moving average calculation
+		if (this.health.averageResponseTime === 0) {
+			this.health.averageResponseTime = responseTime;
+		} else {
+			this.health.averageResponseTime =
+				this.health.averageResponseTime * 0.8 + responseTime * 0.2;
+		}
+	}
+
+	/**
+	 * Log connection event
+	 */
+	private logEvent(event: ConnectionEvent): void {
+		this.connectionEvents.push(event);
+
+		// Keep only last 100 events
+		if (this.connectionEvents.length > 100) {
+			this.connectionEvents = this.connectionEvents.slice(-100);
+		}
+
+		if (this.onConnectionEvent) {
+			this.onConnectionEvent(event);
+		}
+	}
+
+	/**
+	 * Notify connection change
+	 */
+	private notifyConnectionChange(): void {
+		if (this.onConnectionChange) {
+			this.onConnectionChange(this.getStatus(), this.getHealth());
+		}
+	}
+}

apps/extension/src/utils/errorHandler.ts

@@ -0,0 +1,858 @@
+import * as vscode from 'vscode';
+import { logger } from './logger';
+import {
+	getNotificationType,
+	getToastDuration,
+	shouldShowNotification
+} from './notificationPreferences';
+
+export enum ErrorSeverity {
+	LOW = 'low',
+	MEDIUM = 'medium',
+	HIGH = 'high',
+	CRITICAL = 'critical'
+}
+
+export enum ErrorCategory {
+	MCP_CONNECTION = 'mcp_connection',
+	CONFIGURATION = 'configuration',
+	TASK_LOADING = 'task_loading',
+	UI_RENDERING = 'ui_rendering',
+	VALIDATION = 'validation',
+	NETWORK = 'network',
+	INTERNAL = 'internal',
+	TASK_MASTER_API = 'TASK_MASTER_API',
+	DATA_VALIDATION = 'DATA_VALIDATION',
+	DATA_PARSING = 'DATA_PARSING',
+	TASK_DATA_CORRUPTION = 'TASK_DATA_CORRUPTION',
+	VSCODE_API = 'VSCODE_API',
+	WEBVIEW = 'WEBVIEW',
+	EXTENSION_HOST = 'EXTENSION_HOST',
+	USER_INTERACTION = 'USER_INTERACTION',
+	DRAG_DROP = 'DRAG_DROP',
+	COMPONENT_RENDER = 'COMPONENT_RENDER',
+	PERMISSION = 'PERMISSION',
+	FILE_SYSTEM = 'FILE_SYSTEM',
+	UNKNOWN = 'UNKNOWN'
+}
+
+export enum NotificationType {
+	VSCODE_INFO = 'VSCODE_INFO',
+	VSCODE_WARNING = 'VSCODE_WARNING',
+	VSCODE_ERROR = 'VSCODE_ERROR',
+	TOAST_SUCCESS = 'TOAST_SUCCESS',
+	TOAST_INFO = 'TOAST_INFO',
+	TOAST_WARNING = 'TOAST_WARNING',
+	TOAST_ERROR = 'TOAST_ERROR',
+	CONSOLE_ONLY = 'CONSOLE_ONLY',
+	SILENT = 'SILENT'
+}
+
+export interface ErrorContext {
+	// Core error information
+	category: ErrorCategory;
+	severity: ErrorSeverity;
+	message: string;
+	originalError?: Error | unknown;
+
+	// Contextual information
+	operation?: string; // What operation was being performed
+	taskId?: string; // Related task ID if applicable
+	userId?: string; // User context if applicable
+	sessionId?: string; // Session context
+
+	// Technical details
+	stackTrace?: string;
+	userAgent?: string;
+	timestamp?: number;
+
+	// Recovery information
+	isRecoverable?: boolean;
+	suggestedActions?: string[];
+	documentationLink?: string;
+
+	// Notification preferences
+	notificationType?: NotificationType;
+	showToUser?: boolean;
+	logToConsole?: boolean;
+	logToFile?: boolean;
+}
+
+export interface ErrorDetails {
+	code: string;
+	message: string;
+	category: ErrorCategory;
+	severity: ErrorSeverity;
+	timestamp: Date;
+	context?: Record<string, any>;
+	stack?: string;
+	userAction?: string;
+	recovery?: {
+		automatic: boolean;
+		action?: () => Promise<void>;
+		description?: string;
+	};
+}
+
+export interface ErrorLogEntry {
+	id: string;
+	error: ErrorDetails;
+	resolved: boolean;
+	resolvedAt?: Date;
+	attempts: number;
+	lastAttempt?: Date;
+}
+
+/**
+ * Base class for all Task Master errors
+ */
+export abstract class TaskMasterError extends Error {
+	public readonly code: string;
+	public readonly category: ErrorCategory;
+	public readonly severity: ErrorSeverity;
+	public readonly timestamp: Date;
+	public readonly context?: Record<string, any>;
+	public readonly userAction?: string;
+	public readonly recovery?: {
+		automatic: boolean;
+		action?: () => Promise<void>;
+		description?: string;
+	};
+
+	constructor(
+		message: string,
+		code: string,
+		category: ErrorCategory,
+		severity: ErrorSeverity = ErrorSeverity.MEDIUM,
+		context?: Record<string, any>,
+		userAction?: string,
+		recovery?: {
+			automatic: boolean;
+			action?: () => Promise<void>;
+			description?: string;
+		}
+	) {
+		super(message);
+		this.name = this.constructor.name;
+		this.code = code;
+		this.category = category;
+		this.severity = severity;
+		this.timestamp = new Date();
+		this.context = context;
+		this.userAction = userAction;
+		this.recovery = recovery;
+
+		// Capture stack trace
+		if (Error.captureStackTrace) {
+			Error.captureStackTrace(this, this.constructor);
+		}
+	}
+
+	public toErrorDetails(): ErrorDetails {
+		return {
+			code: this.code,
+			message: this.message,
+			category: this.category,
+			severity: this.severity,
+			timestamp: this.timestamp,
+			context: this.context,
+			stack: this.stack,
+			userAction: this.userAction,
+			recovery: this.recovery
+		};
+	}
+}
+
+/**
+ * MCP Connection related errors
+ */
+export class MCPConnectionError extends TaskMasterError {
+	constructor(
+		message: string,
+		code = 'MCP_CONNECTION_FAILED',
+		context?: Record<string, any>,
+		recovery?: {
+			automatic: boolean;
+			action?: () => Promise<void>;
+			description?: string;
+		}
+	) {
+		super(
+			message,
+			code,
+			ErrorCategory.MCP_CONNECTION,
+			ErrorSeverity.HIGH,
+			context,
+			'Check your Task Master configuration and ensure the MCP server is accessible.',
+			recovery
+		);
+	}
+}
+
+/**
+ * Configuration related errors
+ */
+export class ConfigurationError extends TaskMasterError {
+	constructor(
+		message: string,
+		code = 'CONFIGURATION_INVALID',
+		context?: Record<string, any>
+	) {
+		super(
+			message,
+			code,
+			ErrorCategory.CONFIGURATION,
+			ErrorSeverity.MEDIUM,
+			context,
+			'Check your Task Master configuration in VS Code settings.'
+		);
+	}
+}
+
+/**
+ * Task loading related errors
+ */
+export class TaskLoadingError extends TaskMasterError {
+	constructor(
+		message: string,
+		code = 'TASK_LOADING_FAILED',
+		context?: Record<string, any>,
+		recovery?: {
+			automatic: boolean;
+			action?: () => Promise<void>;
+			description?: string;
+		}
+	) {
+		super(
+			message,
+			code,
+			ErrorCategory.TASK_LOADING,
+			ErrorSeverity.MEDIUM,
+			context,
+			'Try refreshing the task list or check your project configuration.',
+			recovery
+		);
+	}
+}
+
+/**
+ * UI rendering related errors
+ */
+export class UIRenderingError extends TaskMasterError {
+	constructor(
+		message: string,
+		code = 'UI_RENDERING_FAILED',
+		context?: Record<string, any>
+	) {
+		super(
+			message,
+			code,
+			ErrorCategory.UI_RENDERING,
+			ErrorSeverity.LOW,
+			context,
+			'Try closing and reopening the Kanban board.'
+		);
+	}
+}
+
+/**
+ * Network related errors
+ */
+export class NetworkError extends TaskMasterError {
+	constructor(
+		message: string,
+		code = 'NETWORK_ERROR',
+		context?: Record<string, any>,
+		recovery?: {
+			automatic: boolean;
+			action?: () => Promise<void>;
+			description?: string;
+		}
+	) {
+		super(
+			message,
+			code,
+			ErrorCategory.NETWORK,
+			ErrorSeverity.MEDIUM,
+			context,
+			'Check your network connection and firewall settings.',
+			recovery
+		);
+	}
+}
+
+/**
+ * Centralized error handler
+ */
+export class ErrorHandler {
+	private static instance: ErrorHandler | null = null;
+	private errorLog: ErrorLogEntry[] = [];
+	private maxLogSize = 1000;
+	private errorListeners: ((error: ErrorDetails) => void)[] = [];
+
+	private constructor() {
+		this.setupGlobalErrorHandlers();
+	}
+
+	static getInstance(): ErrorHandler {
+		if (!ErrorHandler.instance) {
+			ErrorHandler.instance = new ErrorHandler();
+		}
+		return ErrorHandler.instance;
+	}
+
+	/**
+	 * Handle an error with comprehensive logging and recovery
+	 */
+	async handleError(
+		error: Error | TaskMasterError,
+		context?: Record<string, any>
+	): Promise<void> {
+		const errorDetails = this.createErrorDetails(error, context);
+		const logEntry = this.logError(errorDetails);
+
+		// Notify listeners
+		this.notifyErrorListeners(errorDetails);
+
+		// Show user notification based on severity
+		await this.showUserNotification(errorDetails);
+
+		// Attempt recovery if available
+		if (errorDetails.recovery?.automatic && errorDetails.recovery.action) {
+			try {
+				await errorDetails.recovery.action();
+				this.markErrorResolved(logEntry.id);
+			} catch (recoveryError) {
+				logger.error('Error recovery failed:', recoveryError);
+				logEntry.attempts++;
+				logEntry.lastAttempt = new Date();
+			}
+		}
+
+		// Log to console with appropriate level
+		this.logToConsole(errorDetails);
+	}
+
+	/**
+	 * Handle critical errors that should stop execution
+	 */
+	async handleCriticalError(
+		error: Error | TaskMasterError,
+		context?: Record<string, any>
+	): Promise<void> {
+		const errorDetails = this.createErrorDetails(error, context);
+		errorDetails.severity = ErrorSeverity.CRITICAL;
+
+		await this.handleError(error, context);
+
+		// Show critical error dialog
+		const action = await vscode.window.showErrorMessage(
+			`Critical Error in Task Master: ${errorDetails.message}`,
+			'View Details',
+			'Report Issue',
+			'Restart Extension'
+		);
+
+		switch (action) {
+			case 'View Details':
+				await this.showErrorDetails(errorDetails);
+				break;
+			case 'Report Issue':
+				await this.openIssueReport(errorDetails);
+				break;
+			case 'Restart Extension':
+				await vscode.commands.executeCommand('workbench.action.reloadWindow');
+				break;
+		}
+	}
+
+	/**
+	 * Add error event listener
+	 */
+	onError(listener: (error: ErrorDetails) => void): void {
+		this.errorListeners.push(listener);
+	}
+
+	/**
+	 * Remove error event listener
+	 */
+	removeErrorListener(listener: (error: ErrorDetails) => void): void {
+		const index = this.errorListeners.indexOf(listener);
+		if (index !== -1) {
+			this.errorListeners.splice(index, 1);
+		}
+	}
+
+	/**
+	 * Get error log
+	 */
+	getErrorLog(
+		category?: ErrorCategory,
+		severity?: ErrorSeverity
+	): ErrorLogEntry[] {
+		let filteredLog = this.errorLog;
+
+		if (category) {
+			filteredLog = filteredLog.filter(
+				(entry) => entry.error.category === category
+			);
+		}
+
+		if (severity) {
+			filteredLog = filteredLog.filter(
+				(entry) => entry.error.severity === severity
+			);
+		}
+
+		return filteredLog.slice().reverse(); // Most recent first
+	}
+
+	/**
+	 * Clear error log
+	 */
+	clearErrorLog(): void {
+		this.errorLog = [];
+	}
+
+	/**
+	 * Export error log for debugging
+	 */
+	exportErrorLog(): string {
+		return JSON.stringify(this.errorLog, null, 2);
+	}
+
+	/**
+	 * Create error details from error instance
+	 */
+	private createErrorDetails(
+		error: Error | TaskMasterError,
+		context?: Record<string, any>
+	): ErrorDetails {
+		if (error instanceof TaskMasterError) {
+			const details = error.toErrorDetails();
+			if (context) {
+				details.context = { ...details.context, ...context };
+			}
+			return details;
+		}
+
+		// Handle standard Error objects
+		return {
+			code: 'UNKNOWN_ERROR',
+			message: error.message || 'An unknown error occurred',
+			category: ErrorCategory.INTERNAL,
+			severity: ErrorSeverity.MEDIUM,
+			timestamp: new Date(),
+			context: { ...context, errorName: error.name },
+			stack: error.stack
+		};
+	}
+
+	/**
+	 * Log error to internal log
+	 */
+	private logError(errorDetails: ErrorDetails): ErrorLogEntry {
+		const logEntry: ErrorLogEntry = {
+			id: `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+			error: errorDetails,
+			resolved: false,
+			attempts: 0
+		};
+
+		this.errorLog.push(logEntry);
+
+		// Maintain log size limit
+		if (this.errorLog.length > this.maxLogSize) {
+			this.errorLog = this.errorLog.slice(-this.maxLogSize);
+		}
+
+		return logEntry;
+	}
+
+	/**
+	 * Mark error as resolved
+	 */
+	private markErrorResolved(errorId: string): void {
+		const entry = this.errorLog.find((e) => e.id === errorId);
+		if (entry) {
+			entry.resolved = true;
+			entry.resolvedAt = new Date();
+		}
+	}
+
+	/**
+	 * Show user notification based on error severity and user preferences
+	 */
+	private async showUserNotification(
+		errorDetails: ErrorDetails
+	): Promise<void> {
+		// Check if user wants to see this notification
+		if (!shouldShowNotification(errorDetails.category, errorDetails.severity)) {
+			return;
+		}
+
+		const notificationType = getNotificationType(
+			errorDetails.category,
+			errorDetails.severity
+		);
+		const message = errorDetails.userAction
+			? `${errorDetails.message} ${errorDetails.userAction}`
+			: errorDetails.message;
+
+		// Handle different notification types based on user preferences
+		switch (notificationType) {
+			case 'VSCODE_ERROR':
+				await vscode.window.showErrorMessage(message);
+				break;
+			case 'VSCODE_WARNING':
+				await vscode.window.showWarningMessage(message);
+				break;
+			case 'VSCODE_INFO':
+				await vscode.window.showInformationMessage(message);
+				break;
+			case 'TOAST_SUCCESS':
+			case 'TOAST_INFO':
+			case 'TOAST_WARNING':
+			case 'TOAST_ERROR':
+				// These will be handled by the webview toast system
+				// The error listener in extension.ts will send these to webview
+				break;
+			case 'CONSOLE_ONLY':
+			case 'SILENT':
+				// No user notification, just console logging
+				break;
+			default:
+				// Fallback to severity-based notifications
+				switch (errorDetails.severity) {
+					case ErrorSeverity.CRITICAL:
+						await vscode.window.showErrorMessage(message);
+						break;
+					case ErrorSeverity.HIGH:
+						await vscode.window.showErrorMessage(message);
+						break;
+					case ErrorSeverity.MEDIUM:
+						await vscode.window.showWarningMessage(message);
+						break;
+					case ErrorSeverity.LOW:
+						await vscode.window.showInformationMessage(message);
+						break;
+				}
+		}
+	}
+
+	/**
+	 * Log to console with appropriate level
+	 */
+	private logToConsole(errorDetails: ErrorDetails): void {
+		const logMessage = `[${errorDetails.category}] ${errorDetails.code}: ${errorDetails.message}`;
+
+		switch (errorDetails.severity) {
+			case ErrorSeverity.CRITICAL:
+			case ErrorSeverity.HIGH:
+				logger.error(logMessage, errorDetails);
+				break;
+			case ErrorSeverity.MEDIUM:
+				logger.warn(logMessage, errorDetails);
+				break;
+			case ErrorSeverity.LOW:
+				console.info(logMessage, errorDetails);
+				break;
+		}
+	}
+
+	/**
+	 * Show detailed error information
+	 */
+	private async showErrorDetails(errorDetails: ErrorDetails): Promise<void> {
+		const details = [
+			`Error Code: ${errorDetails.code}`,
+			`Category: ${errorDetails.category}`,
+			`Severity: ${errorDetails.severity}`,
+			`Time: ${errorDetails.timestamp.toISOString()}`,
+			`Message: ${errorDetails.message}`
+		];
+
+		if (errorDetails.context) {
+			details.push(`Context: ${JSON.stringify(errorDetails.context, null, 2)}`);
+		}
+
+		if (errorDetails.stack) {
+			details.push(`Stack Trace: ${errorDetails.stack}`);
+		}
+
+		const content = details.join('\n\n');
+
+		// Create temporary document to show error details
+		const doc = await vscode.workspace.openTextDocument({
+			content,
+			language: 'plaintext'
+		});
+
+		await vscode.window.showTextDocument(doc);
+	}
+
+	/**
+	 * Open GitHub issue report
+	 */
+	private async openIssueReport(errorDetails: ErrorDetails): Promise<void> {
+		const issueTitle = encodeURIComponent(
+			`Error: ${errorDetails.code} - ${errorDetails.message}`
+		);
+		const issueBody = encodeURIComponent(`
+**Error Details:**
+- Code: ${errorDetails.code}
+- Category: ${errorDetails.category}
+- Severity: ${errorDetails.severity}
+- Time: ${errorDetails.timestamp.toISOString()}
+
+**Message:**
+${errorDetails.message}
+
+**Context:**
+${errorDetails.context ? JSON.stringify(errorDetails.context, null, 2) : 'None'}
+
+**Steps to Reproduce:**
+1. 
+2. 
+3. 
+
+**Expected Behavior:**
+
+
+**Additional Notes:**
+
+    `);
+
+		const issueUrl = `https://github.com/eyaltoledano/claude-task-master/issues/new?title=${issueTitle}&body=${issueBody}`;
+		await vscode.env.openExternal(vscode.Uri.parse(issueUrl));
+	}
+
+	/**
+	 * Notify error listeners
+	 */
+	private notifyErrorListeners(errorDetails: ErrorDetails): void {
+		this.errorListeners.forEach((listener) => {
+			try {
+				listener(errorDetails);
+			} catch (error) {
+				logger.error('Error in error listener:', error);
+			}
+		});
+	}
+
+	/**
+	 * Setup global error handlers
+	 */
+	private setupGlobalErrorHandlers(): void {
+		// Handle unhandled promise rejections
+		process.on('unhandledRejection', (reason, promise) => {
+			// Create a concrete error class for internal errors
+			class InternalError extends TaskMasterError {
+				constructor(
+					message: string,
+					code: string,
+					severity: ErrorSeverity,
+					context?: Record<string, any>
+				) {
+					super(message, code, ErrorCategory.INTERNAL, severity, context);
+				}
+			}
+
+			const error = new InternalError(
+				'Unhandled Promise Rejection',
+				'UNHANDLED_REJECTION',
+				ErrorSeverity.HIGH,
+				{ reason: String(reason), promise: String(promise) }
+			);
+			this.handleError(error);
+		});
+
+		// Handle uncaught exceptions
+		process.on('uncaughtException', (error) => {
+			// Create a concrete error class for internal errors
+			class InternalError extends TaskMasterError {
+				constructor(
+					message: string,
+					code: string,
+					severity: ErrorSeverity,
+					context?: Record<string, any>
+				) {
+					super(message, code, ErrorCategory.INTERNAL, severity, context);
+				}
+			}
+
+			const taskMasterError = new InternalError(
+				'Uncaught Exception',
+				'UNCAUGHT_EXCEPTION',
+				ErrorSeverity.CRITICAL,
+				{ originalError: error.message, stack: error.stack }
+			);
+			this.handleCriticalError(taskMasterError);
+		});
+	}
+}
+
+/**
+ * Utility functions for error handling
+ */
+export function getErrorHandler(): ErrorHandler {
+	return ErrorHandler.getInstance();
+}
+
+export function createRecoveryAction(
+	action: () => Promise<void>,
+	description: string
+) {
+	return {
+		automatic: false,
+		action,
+		description
+	};
+}
+
+export function createAutoRecoveryAction(
+	action: () => Promise<void>,
+	description: string
+) {
+	return {
+		automatic: true,
+		action,
+		description
+	};
+}
+
+// Default error categorization rules
+export const ERROR_CATEGORIZATION_RULES: Record<string, ErrorCategory> = {
+	// Network patterns
+	ECONNREFUSED: ErrorCategory.NETWORK,
+	ENOTFOUND: ErrorCategory.NETWORK,
+	ETIMEDOUT: ErrorCategory.NETWORK,
+	'Network request failed': ErrorCategory.NETWORK,
+	'fetch failed': ErrorCategory.NETWORK,
+
+	// MCP patterns
+	MCP: ErrorCategory.MCP_CONNECTION,
+	'Task Master': ErrorCategory.TASK_MASTER_API,
+	polling: ErrorCategory.TASK_MASTER_API,
+
+	// VS Code patterns
+	vscode: ErrorCategory.VSCODE_API,
+	webview: ErrorCategory.WEBVIEW,
+	extension: ErrorCategory.EXTENSION_HOST,
+
+	// Data patterns
+	JSON: ErrorCategory.DATA_PARSING,
+	parse: ErrorCategory.DATA_PARSING,
+	validation: ErrorCategory.DATA_VALIDATION,
+	invalid: ErrorCategory.DATA_VALIDATION,
+
+	// Permission patterns
+	EACCES: ErrorCategory.PERMISSION,
+	EPERM: ErrorCategory.PERMISSION,
+	permission: ErrorCategory.PERMISSION,
+
+	// File system patterns
+	ENOENT: ErrorCategory.FILE_SYSTEM,
+	EISDIR: ErrorCategory.FILE_SYSTEM,
+	file: ErrorCategory.FILE_SYSTEM
+};
+
+// Severity mapping based on error categories
+export const CATEGORY_SEVERITY_MAPPING: Record<ErrorCategory, ErrorSeverity> = {
+	[ErrorCategory.NETWORK]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.MCP_CONNECTION]: ErrorSeverity.HIGH,
+	[ErrorCategory.TASK_MASTER_API]: ErrorSeverity.HIGH,
+	[ErrorCategory.DATA_VALIDATION]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.DATA_PARSING]: ErrorSeverity.HIGH,
+	[ErrorCategory.TASK_DATA_CORRUPTION]: ErrorSeverity.CRITICAL,
+	[ErrorCategory.VSCODE_API]: ErrorSeverity.HIGH,
+	[ErrorCategory.WEBVIEW]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.EXTENSION_HOST]: ErrorSeverity.CRITICAL,
+	[ErrorCategory.USER_INTERACTION]: ErrorSeverity.LOW,
+	[ErrorCategory.DRAG_DROP]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.COMPONENT_RENDER]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.PERMISSION]: ErrorSeverity.CRITICAL,
+	[ErrorCategory.FILE_SYSTEM]: ErrorSeverity.HIGH,
+	[ErrorCategory.CONFIGURATION]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.UNKNOWN]: ErrorSeverity.HIGH,
+	// Legacy mappings for existing categories
+	[ErrorCategory.TASK_LOADING]: ErrorSeverity.HIGH,
+	[ErrorCategory.UI_RENDERING]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.VALIDATION]: ErrorSeverity.MEDIUM,
+	[ErrorCategory.INTERNAL]: ErrorSeverity.HIGH
+};
+
+// Notification type mapping based on severity
+export const SEVERITY_NOTIFICATION_MAPPING: Record<
+	ErrorSeverity,
+	NotificationType
+> = {
+	[ErrorSeverity.LOW]: NotificationType.TOAST_INFO,
+	[ErrorSeverity.MEDIUM]: NotificationType.TOAST_WARNING,
+	[ErrorSeverity.HIGH]: NotificationType.VSCODE_WARNING,
+	[ErrorSeverity.CRITICAL]: NotificationType.VSCODE_ERROR
+};
+
+/**
+ * Automatically categorize an error based on its message and type
+ */
+export function categorizeError(
+	error: Error | unknown,
+	operation?: string
+): ErrorCategory {
+	const errorMessage = error instanceof Error ? error.message : String(error);
+	const errorStack = error instanceof Error ? error.stack : undefined;
+	const searchText =
+		`${errorMessage} ${errorStack || ''} ${operation || ''}`.toLowerCase();
+
+	for (const [pattern, category] of Object.entries(
+		ERROR_CATEGORIZATION_RULES
+	)) {
+		if (searchText.includes(pattern.toLowerCase())) {
+			return category;
+		}
+	}
+
+	return ErrorCategory.UNKNOWN;
+}
+
+export function getSuggestedSeverity(category: ErrorCategory): ErrorSeverity {
+	return CATEGORY_SEVERITY_MAPPING[category] || ErrorSeverity.HIGH;
+}
+
+export function getSuggestedNotificationType(
+	severity: ErrorSeverity
+): NotificationType {
+	return (
+		SEVERITY_NOTIFICATION_MAPPING[severity] || NotificationType.CONSOLE_ONLY
+	);
+}
+
+export function createErrorContext(
+	error: Error | unknown,
+	operation?: string,
+	overrides?: Partial<ErrorContext>
+): ErrorContext {
+	const category = categorizeError(error, operation);
+	const severity = getSuggestedSeverity(category);
+	const notificationType = getSuggestedNotificationType(severity);
+
+	const baseContext: ErrorContext = {
+		category,
+		severity,
+		message: error instanceof Error ? error.message : String(error),
+		originalError: error,
+		operation,
+		timestamp: Date.now(),
+		stackTrace: error instanceof Error ? error.stack : undefined,
+		isRecoverable: severity !== ErrorSeverity.CRITICAL,
+		notificationType,
+		showToUser:
+			severity === ErrorSeverity.HIGH || severity === ErrorSeverity.CRITICAL,
+		logToConsole: true,
+		logToFile:
+			severity === ErrorSeverity.HIGH || severity === ErrorSeverity.CRITICAL
+	};
+
+	return { ...baseContext, ...overrides };
+}

apps/extension/src/utils/event-emitter.ts

@@ -0,0 +1,34 @@
+/**
+ * Simple Event Emitter
+ * Lightweight alternative to complex event bus
+ */
+
+export type EventHandler = (...args: any[]) => void | Promise<void>;
+
+export class EventEmitter {
+	private handlers = new Map<string, Set<EventHandler>>();
+
+	on(event: string, handler: EventHandler): () => void {
+		if (!this.handlers.has(event)) {
+			this.handlers.set(event, new Set());
+		}
+		this.handlers.get(event)?.add(handler);
+
+		// Return unsubscribe function
+		return () => this.off(event, handler);
+	}
+
+	off(event: string, handler: EventHandler): void {
+		this.handlers.get(event)?.delete(handler);
+	}
+
+	emit(event: string, ...args: any[]): void {
+		this.handlers.get(event)?.forEach((handler) => {
+			try {
+				handler(...args);
+			} catch (error) {
+				console.error(`Error in event handler for ${event}:`, error);
+			}
+		});
+	}
+}

apps/extension/src/utils/logger.ts

@@ -0,0 +1,104 @@
+import * as vscode from 'vscode';
+
+/**
+ * Logger interface for dependency injection
+ */
+export interface ILogger {
+	log(message: string, ...args: any[]): void;
+	error(message: string, ...args: any[]): void;
+	warn(message: string, ...args: any[]): void;
+	debug(message: string, ...args: any[]): void;
+	show(): void;
+	dispose(): void;
+}
+
+/**
+ * Logger that outputs to VS Code's output channel instead of console
+ * This prevents interference with MCP stdio communication
+ */
+export class ExtensionLogger implements ILogger {
+	private static instance: ExtensionLogger;
+	private outputChannel: vscode.OutputChannel;
+	private debugMode: boolean;
+
+	private constructor() {
+		this.outputChannel = vscode.window.createOutputChannel('TaskMaster');
+		const config = vscode.workspace.getConfiguration('taskmaster');
+		this.debugMode = config.get<boolean>('debug.enableLogging', true);
+	}
+
+	static getInstance(): ExtensionLogger {
+		if (!ExtensionLogger.instance) {
+			ExtensionLogger.instance = new ExtensionLogger();
+		}
+		return ExtensionLogger.instance;
+	}
+
+	log(message: string, ...args: any[]): void {
+		if (!this.debugMode) {
+			return;
+		}
+		const timestamp = new Date().toISOString();
+		const formattedMessage = this.formatMessage(message, args);
+		this.outputChannel.appendLine(`[${timestamp}] ${formattedMessage}`);
+	}
+
+	error(message: string, ...args: any[]): void {
+		const timestamp = new Date().toISOString();
+		const formattedMessage = this.formatMessage(message, args);
+		this.outputChannel.appendLine(`[${timestamp}] ERROR: ${formattedMessage}`);
+	}
+
+	warn(message: string, ...args: any[]): void {
+		if (!this.debugMode) {
+			return;
+		}
+		const timestamp = new Date().toISOString();
+		const formattedMessage = this.formatMessage(message, args);
+		this.outputChannel.appendLine(`[${timestamp}] WARN: ${formattedMessage}`);
+	}
+
+	debug(message: string, ...args: any[]): void {
+		if (!this.debugMode) {
+			return;
+		}
+		const timestamp = new Date().toISOString();
+		const formattedMessage = this.formatMessage(message, args);
+		this.outputChannel.appendLine(`[${timestamp}] DEBUG: ${formattedMessage}`);
+	}
+
+	private formatMessage(message: string, args: any[]): string {
+		if (args.length === 0) {
+			return message;
+		}
+
+		// Convert objects to JSON for better readability
+		const formattedArgs = args.map((arg) => {
+			if (typeof arg === 'object' && arg !== null) {
+				try {
+					return JSON.stringify(arg, null, 2);
+				} catch {
+					return String(arg);
+				}
+			}
+			return String(arg);
+		});
+
+		return `${message} ${formattedArgs.join(' ')}`;
+	}
+
+	show(): void {
+		this.outputChannel.show();
+	}
+
+	dispose(): void {
+		this.outputChannel.dispose();
+	}
+
+	setDebugMode(enabled: boolean): void {
+		this.debugMode = enabled;
+	}
+}
+
+// Export a singleton instance for convenience
+export const logger = ExtensionLogger.getInstance();

apps/extension/src/utils/mcpClient.ts

@@ -0,0 +1,390 @@
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import * as vscode from 'vscode';
+import { logger } from './logger';
+
+export interface MCPConfig {
+	command: string;
+	args: string[];
+	cwd?: string;
+	env?: Record<string, string>;
+	timeout?: number;
+}
+
+export interface MCPServerStatus {
+	isRunning: boolean;
+	pid?: number;
+	error?: string;
+}
+
+export class MCPClientManager {
+	private client: Client | null = null;
+	private transport: StdioClientTransport | null = null;
+	private config: MCPConfig;
+	private status: MCPServerStatus = { isRunning: false };
+	private connectionPromise: Promise<void> | null = null;
+
+	constructor(config: MCPConfig) {
+		logger.log(
+			'🔍 DEBUGGING: MCPClientManager constructor called with config:',
+			config
+		);
+		this.config = config;
+	}
+
+	/**
+	 * Get the current server status
+	 */
+	getStatus(): MCPServerStatus {
+		return { ...this.status };
+	}
+
+	/**
+	 * Start the MCP server process and establish client connection
+	 */
+	async connect(): Promise<void> {
+		if (this.connectionPromise) {
+			return this.connectionPromise;
+		}
+
+		this.connectionPromise = this._doConnect();
+		return this.connectionPromise;
+	}
+
+	private async _doConnect(): Promise<void> {
+		try {
+			// Clean up any existing connections
+			await this.disconnect();
+
+			// Create the transport - it will handle spawning the server process internally
+			logger.log(
+				`Starting MCP server: ${this.config.command} ${this.config.args?.join(' ') || ''}`
+			);
+			logger.log('🔍 DEBUGGING: Transport config cwd:', this.config.cwd);
+			logger.log('🔍 DEBUGGING: Process cwd before spawn:', process.cwd());
+
+			// Test if the target directory and .taskmaster exist
+			const fs = require('fs');
+			const path = require('path');
+			try {
+				const targetDir = this.config.cwd;
+				const taskmasterDir = path.join(targetDir, '.taskmaster');
+				const tasksFile = path.join(taskmasterDir, 'tasks', 'tasks.json');
+
+				logger.log(
+					'🔍 DEBUGGING: Checking target directory:',
+					targetDir,
+					'exists:',
+					fs.existsSync(targetDir)
+				);
+				logger.log(
+					'🔍 DEBUGGING: Checking .taskmaster dir:',
+					taskmasterDir,
+					'exists:',
+					fs.existsSync(taskmasterDir)
+				);
+				logger.log(
+					'🔍 DEBUGGING: Checking tasks.json:',
+					tasksFile,
+					'exists:',
+					fs.existsSync(tasksFile)
+				);
+
+				if (fs.existsSync(tasksFile)) {
+					const stats = fs.statSync(tasksFile);
+					logger.log('🔍 DEBUGGING: tasks.json size:', stats.size, 'bytes');
+				}
+			} catch (error) {
+				logger.log('🔍 DEBUGGING: Error checking filesystem:', error);
+			}
+
+			this.transport = new StdioClientTransport({
+				command: this.config.command,
+				args: this.config.args || [],
+				cwd: this.config.cwd,
+				env: {
+					...(Object.fromEntries(
+						Object.entries(process.env).filter(([, v]) => v !== undefined)
+					) as Record<string, string>),
+					...this.config.env
+				}
+			});
+
+			logger.log('🔍 DEBUGGING: Transport created, checking process...');
+
+			// Set up transport event handlers
+			this.transport.onerror = (error: Error) => {
+				logger.error('❌ MCP transport error:', error);
+				logger.error('Transport error details:', {
+					message: error.message,
+					stack: error.stack,
+					code: (error as any).code,
+					errno: (error as any).errno,
+					syscall: (error as any).syscall
+				});
+				this.status = { isRunning: false, error: error.message };
+				vscode.window.showErrorMessage(
+					`TaskMaster MCP transport error: ${error.message}`
+				);
+			};
+
+			this.transport.onclose = () => {
+				logger.log('🔌 MCP transport closed');
+				this.status = { isRunning: false };
+				this.client = null;
+				this.transport = null;
+			};
+
+			// Add message handler like the working debug script
+			this.transport.onmessage = (message: any) => {
+				logger.log('📤 MCP server message:', message);
+			};
+
+			// Create the client
+			this.client = new Client(
+				{
+					name: 'taskr-vscode-extension',
+					version: '1.0.0'
+				},
+				{
+					capabilities: {
+						tools: {}
+					}
+				}
+			);
+
+			// Connect the client to the transport (this automatically starts the transport)
+			logger.log('🔄 Attempting MCP client connection...');
+			logger.log('MCP config:', {
+				command: this.config.command,
+				args: this.config.args,
+				cwd: this.config.cwd
+			});
+			logger.log('Current working directory:', process.cwd());
+			logger.log(
+				'VS Code workspace folders:',
+				vscode.workspace.workspaceFolders?.map((f) => f.uri.fsPath)
+			);
+
+			// Check if process was created before connecting
+			if (this.transport && (this.transport as any).process) {
+				const proc = (this.transport as any).process;
+				logger.log('📝 MCP server process PID:', proc.pid);
+				logger.log('📝 Process working directory will be:', this.config.cwd);
+
+				proc.on('exit', (code: number, signal: string) => {
+					logger.log(
+						`🔚 MCP server process exited with code ${code}, signal ${signal}`
+					);
+					if (code !== 0) {
+						logger.log('❌ Non-zero exit code indicates server failure');
+					}
+				});
+
+				proc.on('error', (error: Error) => {
+					logger.log('❌ MCP server process error:', error);
+				});
+
+				// Listen to stderr to see server-side errors
+				if (proc.stderr) {
+					proc.stderr.on('data', (data: Buffer) => {
+						logger.log('📥 MCP server stderr:', data.toString());
+					});
+				}
+
+				// Listen to stdout for server messages
+				if (proc.stdout) {
+					proc.stdout.on('data', (data: Buffer) => {
+						logger.log('📤 MCP server stdout:', data.toString());
+					});
+				}
+			} else {
+				logger.log('⚠️ No process found in transport before connection');
+			}
+
+			await this.client.connect(this.transport);
+
+			// Update status
+			this.status = {
+				isRunning: true,
+				pid: this.transport.pid || undefined
+			};
+
+			logger.log('MCP client connected successfully');
+		} catch (error) {
+			logger.error('Failed to connect to MCP server:', error);
+			this.status = {
+				isRunning: false,
+				error: error instanceof Error ? error.message : 'Unknown error'
+			};
+
+			// Clean up on error
+			await this.disconnect();
+
+			throw error;
+		} finally {
+			this.connectionPromise = null;
+		}
+	}
+
+	/**
+	 * Disconnect from the MCP server and clean up resources
+	 */
+	async disconnect(): Promise<void> {
+		logger.log('Disconnecting from MCP server');
+
+		if (this.client) {
+			try {
+				await this.client.close();
+			} catch (error) {
+				logger.error('Error closing MCP client:', error);
+			}
+			this.client = null;
+		}
+
+		if (this.transport) {
+			try {
+				await this.transport.close();
+			} catch (error) {
+				logger.error('Error closing MCP transport:', error);
+			}
+			this.transport = null;
+		}
+
+		this.status = { isRunning: false };
+	}
+
+	/**
+	 * Get the MCP client instance (if connected)
+	 */
+	getClient(): Client | null {
+		return this.client;
+	}
+
+	/**
+	 * Call an MCP tool
+	 */
+	async callTool(
+		toolName: string,
+		arguments_: Record<string, unknown>
+	): Promise<any> {
+		if (!this.client) {
+			throw new Error('MCP client is not connected');
+		}
+
+		try {
+			// Use the configured timeout or default to 5 minutes
+			const timeout = this.config.timeout || 300000; // 5 minutes default
+
+			logger.log(`Calling MCP tool "${toolName}" with timeout: ${timeout}ms`);
+
+			const result = await this.client.callTool(
+				{
+					name: toolName,
+					arguments: arguments_
+				},
+				undefined,
+				{
+					timeout: timeout
+				}
+			);
+
+			return result;
+		} catch (error) {
+			logger.error(`Error calling MCP tool "${toolName}":`, error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Test the connection by calling a simple MCP tool
+	 */
+	async testConnection(): Promise<boolean> {
+		try {
+			// Try to list available tools as a connection test
+			if (!this.client) {
+				return false;
+			}
+
+			// listTools is a simple metadata request, no need for extended timeout
+			const result = await this.client.listTools();
+			logger.log(
+				'Available MCP tools:',
+				result.tools?.map((t) => t.name) || []
+			);
+			return true;
+		} catch (error) {
+			logger.error('Connection test failed:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Get stderr stream from the transport (if available)
+	 */
+	getStderr(): NodeJS.ReadableStream | null {
+		const stderr = this.transport?.stderr;
+		return stderr ? (stderr as unknown as NodeJS.ReadableStream) : null;
+	}
+
+	/**
+	 * Get the process ID of the spawned server
+	 */
+	getPid(): number | null {
+		return this.transport?.pid || null;
+	}
+}
+
+/**
+ * Create MCP configuration from VS Code settings
+ */
+export function createMCPConfigFromSettings(): MCPConfig {
+	logger.log(
+		'🔍 DEBUGGING: createMCPConfigFromSettings called at',
+		new Date().toISOString()
+	);
+	const config = vscode.workspace.getConfiguration('taskmaster');
+
+	let command = config.get<string>('mcp.command', 'npx');
+	const args = config.get<string[]>('mcp.args', ['task-master-ai']);
+
+	// Use proper VS Code workspace detection
+	const defaultCwd =
+		vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
+	const cwd = config.get<string>('mcp.cwd', defaultCwd);
+	const env = config.get<Record<string, string>>('mcp.env');
+	const timeout = config.get<number>('mcp.requestTimeoutMs', 300000);
+
+	logger.log('✅ Using workspace directory:', defaultCwd);
+
+	// If using default 'npx', try to find the full path on macOS/Linux
+	if (command === 'npx') {
+		const fs = require('fs');
+		const npxPaths = [
+			'/opt/homebrew/bin/npx', // Homebrew on Apple Silicon
+			'/usr/local/bin/npx', // Homebrew on Intel
+			'/usr/bin/npx', // System npm
+			'npx' // Final fallback to PATH
+		];
+
+		for (const path of npxPaths) {
+			try {
+				if (path === 'npx' || fs.existsSync(path)) {
+					command = path;
+					logger.log(`✅ Using npx at: ${path}`);
+					break;
+				}
+			} catch (error) {
+				// Continue to next path
+			}
+		}
+	}
+
+	return {
+		command,
+		args,
+		cwd: cwd || defaultCwd,
+		env,
+		timeout
+	};
+}

apps/extension/src/utils/notificationPreferences.ts

@@ -0,0 +1,463 @@
+import * as vscode from 'vscode';
+import { ErrorCategory, ErrorSeverity, NotificationType } from './errorHandler';
+import { logger } from './logger';
+
+export interface NotificationPreferences {
+	// Global notification toggles
+	enableToastNotifications: boolean;
+	enableVSCodeNotifications: boolean;
+	enableConsoleLogging: boolean;
+
+	// Toast notification settings
+	toastDuration: {
+		info: number;
+		warning: number;
+		error: number;
+	};
+
+	// Category-based preferences
+	categoryPreferences: Record<
+		ErrorCategory,
+		{
+			showToUser: boolean;
+			notificationType: NotificationType;
+			logToConsole: boolean;
+		}
+	>;
+
+	// Severity-based preferences
+	severityPreferences: Record<
+		ErrorSeverity,
+		{
+			showToUser: boolean;
+			notificationType: NotificationType;
+			minToastDuration: number;
+		}
+	>;
+
+	// Advanced settings
+	maxToastCount: number;
+	enableErrorTracking: boolean;
+	enableDetailedErrorInfo: boolean;
+}
+
+export class NotificationPreferencesManager {
+	private static instance: NotificationPreferencesManager | null = null;
+	private readonly configSection = 'taskMasterKanban';
+
+	private constructor() {}
+
+	static getInstance(): NotificationPreferencesManager {
+		if (!NotificationPreferencesManager.instance) {
+			NotificationPreferencesManager.instance =
+				new NotificationPreferencesManager();
+		}
+		return NotificationPreferencesManager.instance;
+	}
+
+	/**
+	 * Get current notification preferences from VS Code settings
+	 */
+	getPreferences(): NotificationPreferences {
+		const config = vscode.workspace.getConfiguration(this.configSection);
+
+		return {
+			enableToastNotifications: config.get('notifications.enableToast', true),
+			enableVSCodeNotifications: config.get('notifications.enableVSCode', true),
+			enableConsoleLogging: config.get('notifications.enableConsole', true),
+
+			toastDuration: {
+				info: config.get('notifications.toastDuration.info', 5000),
+				warning: config.get('notifications.toastDuration.warning', 7000),
+				error: config.get('notifications.toastDuration.error', 10000)
+			},
+
+			categoryPreferences: this.getCategoryPreferences(config),
+			severityPreferences: this.getSeverityPreferences(config),
+
+			maxToastCount: config.get('notifications.maxToastCount', 5),
+			enableErrorTracking: config.get(
+				'notifications.enableErrorTracking',
+				true
+			),
+			enableDetailedErrorInfo: config.get(
+				'notifications.enableDetailedErrorInfo',
+				false
+			)
+		};
+	}
+
+	/**
+	 * Update notification preferences in VS Code settings
+	 */
+	async updatePreferences(
+		preferences: Partial<NotificationPreferences>
+	): Promise<void> {
+		const config = vscode.workspace.getConfiguration(this.configSection);
+
+		if (preferences.enableToastNotifications !== undefined) {
+			await config.update(
+				'notifications.enableToast',
+				preferences.enableToastNotifications,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.enableVSCodeNotifications !== undefined) {
+			await config.update(
+				'notifications.enableVSCode',
+				preferences.enableVSCodeNotifications,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.enableConsoleLogging !== undefined) {
+			await config.update(
+				'notifications.enableConsole',
+				preferences.enableConsoleLogging,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.toastDuration) {
+			await config.update(
+				'notifications.toastDuration',
+				preferences.toastDuration,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.maxToastCount !== undefined) {
+			await config.update(
+				'notifications.maxToastCount',
+				preferences.maxToastCount,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.enableErrorTracking !== undefined) {
+			await config.update(
+				'notifications.enableErrorTracking',
+				preferences.enableErrorTracking,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+
+		if (preferences.enableDetailedErrorInfo !== undefined) {
+			await config.update(
+				'notifications.enableDetailedErrorInfo',
+				preferences.enableDetailedErrorInfo,
+				vscode.ConfigurationTarget.Global
+			);
+		}
+	}
+
+	/**
+	 * Check if notifications should be shown for a specific error category and severity
+	 */
+	shouldShowNotification(
+		category: ErrorCategory,
+		severity: ErrorSeverity
+	): boolean {
+		const preferences = this.getPreferences();
+
+		// Check global toggles first
+		if (
+			!preferences.enableToastNotifications &&
+			!preferences.enableVSCodeNotifications
+		) {
+			return false;
+		}
+
+		// Check category preferences
+		const categoryPref = preferences.categoryPreferences[category];
+		if (categoryPref && !categoryPref.showToUser) {
+			return false;
+		}
+
+		// Check severity preferences
+		const severityPref = preferences.severityPreferences[severity];
+		if (severityPref && !severityPref.showToUser) {
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Get the appropriate notification type for an error
+	 */
+	getNotificationType(
+		category: ErrorCategory,
+		severity: ErrorSeverity
+	): NotificationType {
+		const preferences = this.getPreferences();
+
+		// Check category preference first
+		const categoryPref = preferences.categoryPreferences[category];
+		if (categoryPref) {
+			return categoryPref.notificationType;
+		}
+
+		// Fall back to severity preference
+		const severityPref = preferences.severityPreferences[severity];
+		if (severityPref) {
+			return severityPref.notificationType;
+		}
+
+		// Default fallback
+		return this.getDefaultNotificationType(severity);
+	}
+
+	/**
+	 * Get toast duration for a specific severity
+	 */
+	getToastDuration(severity: ErrorSeverity): number {
+		const preferences = this.getPreferences();
+
+		switch (severity) {
+			case ErrorSeverity.LOW:
+				return preferences.toastDuration.info;
+			case ErrorSeverity.MEDIUM:
+				return preferences.toastDuration.warning;
+			case ErrorSeverity.HIGH:
+			case ErrorSeverity.CRITICAL:
+				return preferences.toastDuration.error;
+			default:
+				return preferences.toastDuration.warning;
+		}
+	}
+
+	/**
+	 * Reset preferences to defaults
+	 */
+	async resetToDefaults(): Promise<void> {
+		const config = vscode.workspace.getConfiguration(this.configSection);
+
+		// Reset all notification settings
+		await config.update(
+			'notifications',
+			undefined,
+			vscode.ConfigurationTarget.Global
+		);
+
+		logger.log('Task Master Kanban notification preferences reset to defaults');
+	}
+
+	/**
+	 * Get category-based preferences with defaults
+	 */
+	private getCategoryPreferences(config: vscode.WorkspaceConfiguration): Record<
+		ErrorCategory,
+		{
+			showToUser: boolean;
+			notificationType: NotificationType;
+			logToConsole: boolean;
+		}
+	> {
+		const defaults = {
+			[ErrorCategory.MCP_CONNECTION]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.CONFIGURATION]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.TASK_LOADING]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.UI_RENDERING]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_INFO,
+				logToConsole: false
+			},
+			[ErrorCategory.VALIDATION]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.NETWORK]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.INTERNAL]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.TASK_MASTER_API]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.DATA_VALIDATION]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.DATA_PARSING]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.TASK_DATA_CORRUPTION]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.VSCODE_API]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.WEBVIEW]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.EXTENSION_HOST]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.USER_INTERACTION]: {
+				showToUser: false,
+				notificationType: NotificationType.CONSOLE_ONLY,
+				logToConsole: true
+			},
+			[ErrorCategory.DRAG_DROP]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_INFO,
+				logToConsole: false
+			},
+			[ErrorCategory.COMPONENT_RENDER]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				logToConsole: true
+			},
+			[ErrorCategory.PERMISSION]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.FILE_SYSTEM]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				logToConsole: true
+			},
+			[ErrorCategory.UNKNOWN]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_WARNING,
+				logToConsole: true
+			}
+		};
+
+		// Allow user overrides from settings
+		const userPreferences = config.get('notifications.categoryPreferences', {});
+		return { ...defaults, ...userPreferences };
+	}
+
+	/**
+	 * Get severity-based preferences with defaults
+	 */
+	private getSeverityPreferences(config: vscode.WorkspaceConfiguration): Record<
+		ErrorSeverity,
+		{
+			showToUser: boolean;
+			notificationType: NotificationType;
+			minToastDuration: number;
+		}
+	> {
+		const defaults = {
+			[ErrorSeverity.LOW]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_INFO,
+				minToastDuration: 3000
+			},
+			[ErrorSeverity.MEDIUM]: {
+				showToUser: true,
+				notificationType: NotificationType.TOAST_WARNING,
+				minToastDuration: 5000
+			},
+			[ErrorSeverity.HIGH]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_WARNING,
+				minToastDuration: 7000
+			},
+			[ErrorSeverity.CRITICAL]: {
+				showToUser: true,
+				notificationType: NotificationType.VSCODE_ERROR,
+				minToastDuration: 10000
+			}
+		};
+
+		// Allow user overrides from settings
+		const userPreferences = config.get('notifications.severityPreferences', {});
+		return { ...defaults, ...userPreferences };
+	}
+
+	/**
+	 * Get default notification type for severity
+	 */
+	private getDefaultNotificationType(
+		severity: ErrorSeverity
+	): NotificationType {
+		switch (severity) {
+			case ErrorSeverity.LOW:
+				return NotificationType.TOAST_INFO;
+			case ErrorSeverity.MEDIUM:
+				return NotificationType.TOAST_WARNING;
+			case ErrorSeverity.HIGH:
+				return NotificationType.VSCODE_WARNING;
+			case ErrorSeverity.CRITICAL:
+				return NotificationType.VSCODE_ERROR;
+			default:
+				return NotificationType.CONSOLE_ONLY;
+		}
+	}
+}
+
+// Export convenience functions
+export function getNotificationPreferences(): NotificationPreferences {
+	return NotificationPreferencesManager.getInstance().getPreferences();
+}
+
+export function updateNotificationPreferences(
+	preferences: Partial<NotificationPreferences>
+): Promise<void> {
+	return NotificationPreferencesManager.getInstance().updatePreferences(
+		preferences
+	);
+}
+
+export function shouldShowNotification(
+	category: ErrorCategory,
+	severity: ErrorSeverity
+): boolean {
+	return NotificationPreferencesManager.getInstance().shouldShowNotification(
+		category,
+		severity
+	);
+}
+
+export function getNotificationType(
+	category: ErrorCategory,
+	severity: ErrorSeverity
+): NotificationType {
+	return NotificationPreferencesManager.getInstance().getNotificationType(
+		category,
+		severity
+	);
+}
+
+export function getToastDuration(severity: ErrorSeverity): number {
+	return NotificationPreferencesManager.getInstance().getToastDuration(
+		severity
+	);
+}

apps/extension/src/utils/task-master-api/cache/cache-manager.ts

@@ -0,0 +1,253 @@
+/**
+ * Cache Manager
+ * Handles all caching logic with LRU eviction and analytics
+ */
+
+import type { ExtensionLogger } from '../../logger';
+import type { CacheAnalytics, CacheConfig, CacheEntry } from '../types';
+
+export class CacheManager {
+	private cache = new Map<string, CacheEntry>();
+	private analytics: CacheAnalytics = {
+		hits: 0,
+		misses: 0,
+		evictions: 0,
+		refreshes: 0,
+		totalSize: 0,
+		averageAccessTime: 0,
+		hitRate: 0
+	};
+	private backgroundRefreshTimer?: NodeJS.Timeout;
+
+	constructor(
+		private config: CacheConfig & { cacheDuration: number },
+		private logger: ExtensionLogger
+	) {
+		if (config.enableBackgroundRefresh) {
+			this.initializeBackgroundRefresh();
+		}
+	}
+
+	/**
+	 * Get data from cache if not expired
+	 */
+	get(key: string): any {
+		const startTime = Date.now();
+		const cached = this.cache.get(key);
+
+		if (cached) {
+			const isExpired =
+				Date.now() - cached.timestamp >=
+				(cached.ttl || this.config.cacheDuration);
+
+			if (!isExpired) {
+				// Update access statistics
+				cached.accessCount++;
+				cached.lastAccessed = Date.now();
+
+				if (this.config.enableAnalytics) {
+					this.analytics.hits++;
+				}
+
+				const accessTime = Date.now() - startTime;
+				this.logger.debug(
+					`Cache hit for ${key} (${accessTime}ms, ${cached.accessCount} accesses)`
+				);
+				return cached.data;
+			} else {
+				// Remove expired entry
+				this.cache.delete(key);
+				this.logger.debug(`Cache entry expired and removed: ${key}`);
+			}
+		}
+
+		if (this.config.enableAnalytics) {
+			this.analytics.misses++;
+		}
+
+		this.logger.debug(`Cache miss for ${key}`);
+		return null;
+	}
+
+	/**
+	 * Set data in cache with LRU eviction
+	 */
+	set(
+		key: string,
+		data: any,
+		options?: { ttl?: number; tags?: string[] }
+	): void {
+		const now = Date.now();
+		const dataSize = this.estimateDataSize(data);
+
+		// Create cache entry
+		const entry: CacheEntry = {
+			data,
+			timestamp: now,
+			accessCount: 1,
+			lastAccessed: now,
+			size: dataSize,
+			ttl: options?.ttl,
+			tags: options?.tags || [key.split('_')[0]]
+		};
+
+		// Check if we need to evict entries (LRU strategy)
+		if (this.cache.size >= this.config.maxSize) {
+			this.evictLRUEntries(Math.max(1, Math.floor(this.config.maxSize * 0.1)));
+		}
+
+		this.cache.set(key, entry);
+		this.logger.debug(
+			`Cached data for ${key} (size: ${dataSize} bytes, TTL: ${entry.ttl || this.config.cacheDuration}ms)`
+		);
+
+		// Trigger prefetch if enabled
+		if (this.config.enablePrefetch) {
+			this.scheduleRelatedDataPrefetch(key, data);
+		}
+	}
+
+	/**
+	 * Clear cache entries matching a pattern
+	 */
+	clearPattern(pattern: string): void {
+		let evictedCount = 0;
+		for (const key of this.cache.keys()) {
+			if (key.includes(pattern)) {
+				this.cache.delete(key);
+				evictedCount++;
+			}
+		}
+
+		if (evictedCount > 0) {
+			this.analytics.evictions += evictedCount;
+			this.logger.debug(
+				`Evicted ${evictedCount} cache entries matching pattern: ${pattern}`
+			);
+		}
+	}
+
+	/**
+	 * Clear all cached data
+	 */
+	clear(): void {
+		this.cache.clear();
+		this.resetAnalytics();
+	}
+
+	/**
+	 * Get cache analytics
+	 */
+	getAnalytics(): CacheAnalytics {
+		this.updateAnalytics();
+		return { ...this.analytics };
+	}
+
+	/**
+	 * Get frequently accessed entries for background refresh
+	 */
+	getRefreshCandidates(): Array<[string, CacheEntry]> {
+		return Array.from(this.cache.entries())
+			.filter(([key, entry]) => {
+				const age = Date.now() - entry.timestamp;
+				const isNearExpiration = age > this.config.cacheDuration * 0.7;
+				const isFrequentlyAccessed = entry.accessCount >= 3;
+				return (
+					isNearExpiration && isFrequentlyAccessed && key.includes('get_tasks')
+				);
+			})
+			.sort((a, b) => b[1].accessCount - a[1].accessCount)
+			.slice(0, 5);
+	}
+
+	/**
+	 * Update refresh count for analytics
+	 */
+	incrementRefreshes(): void {
+		this.analytics.refreshes++;
+	}
+
+	/**
+	 * Cleanup resources
+	 */
+	destroy(): void {
+		if (this.backgroundRefreshTimer) {
+			clearInterval(this.backgroundRefreshTimer);
+			this.backgroundRefreshTimer = undefined;
+		}
+		this.clear();
+	}
+
+	private initializeBackgroundRefresh(): void {
+		if (this.backgroundRefreshTimer) {
+			clearInterval(this.backgroundRefreshTimer);
+		}
+
+		const interval = this.config.refreshInterval;
+		this.backgroundRefreshTimer = setInterval(() => {
+			// Background refresh is handled by the main API class
+			// This just maintains the timer
+		}, interval);
+
+		this.logger.debug(
+			`Cache background refresh initialized with ${interval}ms interval`
+		);
+	}
+
+	private evictLRUEntries(count: number): void {
+		const entries = Array.from(this.cache.entries())
+			.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed)
+			.slice(0, count);
+
+		for (const [key] of entries) {
+			this.cache.delete(key);
+			this.analytics.evictions++;
+		}
+
+		if (entries.length > 0) {
+			this.logger.debug(`Evicted ${entries.length} LRU cache entries`);
+		}
+	}
+
+	private estimateDataSize(data: any): number {
+		try {
+			return JSON.stringify(data).length * 2; // Rough estimate
+		} catch {
+			return 1000; // Default fallback
+		}
+	}
+
+	private scheduleRelatedDataPrefetch(key: string, data: any): void {
+		if (key.includes('get_tasks') && Array.isArray(data)) {
+			this.logger.debug(
+				`Scheduled prefetch for ${data.length} tasks related to ${key}`
+			);
+		}
+	}
+
+	private resetAnalytics(): void {
+		this.analytics = {
+			hits: 0,
+			misses: 0,
+			evictions: 0,
+			refreshes: 0,
+			totalSize: 0,
+			averageAccessTime: 0,
+			hitRate: 0
+		};
+	}
+
+	private updateAnalytics(): void {
+		const total = this.analytics.hits + this.analytics.misses;
+		this.analytics.hitRate = total > 0 ? this.analytics.hits / total : 0;
+		this.analytics.totalSize = this.cache.size;
+
+		if (this.cache.size > 0) {
+			const totalAccessTime = Array.from(this.cache.values()).reduce(
+				(sum, entry) => sum + (entry.lastAccessed - entry.timestamp),
+				0
+			);
+			this.analytics.averageAccessTime = totalAccessTime / this.cache.size;
+		}
+	}
+}

apps/extension/src/utils/task-master-api/index.ts

@@ -0,0 +1,471 @@
+/**
+ * TaskMaster API
+ * Main API class that coordinates all modules
+ */
+
+import * as vscode from 'vscode';
+import { ExtensionLogger } from '../logger';
+import type { MCPClientManager } from '../mcpClient';
+import { CacheManager } from './cache/cache-manager';
+import { MCPClient } from './mcp-client';
+import { TaskTransformer } from './transformers/task-transformer';
+import type {
+	AddSubtaskOptions,
+	CacheConfig,
+	GetTasksOptions,
+	SubtaskData,
+	TaskMasterApiConfig,
+	TaskMasterApiResponse,
+	TaskMasterTask,
+	TaskUpdate,
+	UpdateSubtaskOptions,
+	UpdateTaskOptions,
+	UpdateTaskStatusOptions
+} from './types';
+
+// Re-export types for backward compatibility
+export * from './types';
+
+export class TaskMasterApi {
+	private mcpWrapper: MCPClient;
+	private cache: CacheManager;
+	private transformer: TaskTransformer;
+	private config: TaskMasterApiConfig;
+	private logger: ExtensionLogger;
+
+	private readonly defaultCacheConfig: CacheConfig = {
+		maxSize: 100,
+		enableBackgroundRefresh: true,
+		refreshInterval: 5 * 60 * 1000, // 5 minutes
+		enableAnalytics: true,
+		enablePrefetch: true,
+		compressionEnabled: false,
+		persistToDisk: false
+	};
+
+	private readonly defaultConfig: TaskMasterApiConfig = {
+		timeout: 30000,
+		retryAttempts: 3,
+		cacheDuration: 5 * 60 * 1000, // 5 minutes
+		cache: this.defaultCacheConfig
+	};
+
+	constructor(
+		mcpClient: MCPClientManager,
+		config?: Partial<TaskMasterApiConfig>
+	) {
+		this.logger = ExtensionLogger.getInstance();
+
+		// Merge config - ensure cache is always fully defined
+		const mergedCache: CacheConfig = {
+			maxSize: config?.cache?.maxSize ?? this.defaultCacheConfig.maxSize,
+			enableBackgroundRefresh:
+				config?.cache?.enableBackgroundRefresh ??
+				this.defaultCacheConfig.enableBackgroundRefresh,
+			refreshInterval:
+				config?.cache?.refreshInterval ??
+				this.defaultCacheConfig.refreshInterval,
+			enableAnalytics:
+				config?.cache?.enableAnalytics ??
+				this.defaultCacheConfig.enableAnalytics,
+			enablePrefetch:
+				config?.cache?.enablePrefetch ?? this.defaultCacheConfig.enablePrefetch,
+			compressionEnabled:
+				config?.cache?.compressionEnabled ??
+				this.defaultCacheConfig.compressionEnabled,
+			persistToDisk:
+				config?.cache?.persistToDisk ?? this.defaultCacheConfig.persistToDisk
+		};
+
+		this.config = {
+			...this.defaultConfig,
+			...config,
+			cache: mergedCache
+		};
+
+		// Initialize modules
+		this.mcpWrapper = new MCPClient(mcpClient, this.logger, {
+			timeout: this.config.timeout,
+			retryAttempts: this.config.retryAttempts
+		});
+
+		this.cache = new CacheManager(
+			{ ...mergedCache, cacheDuration: this.config.cacheDuration },
+			this.logger
+		);
+
+		this.transformer = new TaskTransformer(this.logger);
+
+		// Start background refresh if enabled
+		if (this.config.cache?.enableBackgroundRefresh) {
+			this.startBackgroundRefresh();
+		}
+
+		this.logger.log('TaskMasterApi: Initialized with modular architecture');
+	}
+
+	/**
+	 * Get tasks from TaskMaster
+	 */
+	async getTasks(
+		options?: GetTasksOptions
+	): Promise<TaskMasterApiResponse<TaskMasterTask[]>> {
+		const startTime = Date.now();
+		const cacheKey = `get_tasks_${JSON.stringify(options || {})}`;
+
+		try {
+			// Check cache first
+			const cached = this.cache.get(cacheKey);
+			if (cached) {
+				return {
+					success: true,
+					data: cached,
+					requestDuration: Date.now() - startTime
+				};
+			}
+
+			// Prepare MCP tool arguments
+			const mcpArgs: Record<string, unknown> = {
+				projectRoot: options?.projectRoot || this.getWorkspaceRoot(),
+				withSubtasks: options?.withSubtasks ?? true
+			};
+
+			if (options?.status) {
+				mcpArgs.status = options.status;
+			}
+			if (options?.tag) {
+				mcpArgs.tag = options.tag;
+			}
+
+			this.logger.log('Calling get_tasks with args:', mcpArgs);
+
+			// Call MCP tool
+			const mcpResponse = await this.mcpWrapper.callTool('get_tasks', mcpArgs);
+
+			// Transform response
+			const transformedTasks =
+				this.transformer.transformMCPTasksResponse(mcpResponse);
+
+			// Cache the result
+			this.cache.set(cacheKey, transformedTasks);
+
+			return {
+				success: true,
+				data: transformedTasks,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Error getting tasks:', error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Update task status
+	 */
+	async updateTaskStatus(
+		taskId: string,
+		status: string,
+		options?: UpdateTaskStatusOptions
+	): Promise<TaskMasterApiResponse<boolean>> {
+		const startTime = Date.now();
+
+		try {
+			const mcpArgs: Record<string, unknown> = {
+				id: String(taskId),
+				status: status,
+				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
+			};
+
+			this.logger.log('Calling set_task_status with args:', mcpArgs);
+
+			await this.mcpWrapper.callTool('set_task_status', mcpArgs);
+
+			// Clear relevant caches
+			this.cache.clearPattern('get_tasks');
+
+			return {
+				success: true,
+				data: true,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Error updating task status:', error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Update task content
+	 */
+	async updateTask(
+		taskId: string,
+		updates: TaskUpdate,
+		options?: UpdateTaskOptions
+	): Promise<TaskMasterApiResponse<boolean>> {
+		const startTime = Date.now();
+
+		try {
+			// Build update prompt
+			const updateFields: string[] = [];
+			if (updates.title !== undefined) {
+				updateFields.push(`Title: ${updates.title}`);
+			}
+			if (updates.description !== undefined) {
+				updateFields.push(`Description: ${updates.description}`);
+			}
+			if (updates.details !== undefined) {
+				updateFields.push(`Details: ${updates.details}`);
+			}
+			if (updates.priority !== undefined) {
+				updateFields.push(`Priority: ${updates.priority}`);
+			}
+			if (updates.testStrategy !== undefined) {
+				updateFields.push(`Test Strategy: ${updates.testStrategy}`);
+			}
+			if (updates.dependencies !== undefined) {
+				updateFields.push(`Dependencies: ${updates.dependencies.join(', ')}`);
+			}
+
+			const prompt = `Update task with the following changes:\n${updateFields.join('\n')}`;
+
+			const mcpArgs: Record<string, unknown> = {
+				id: String(taskId),
+				prompt: prompt,
+				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
+			};
+
+			if (options?.append !== undefined) {
+				mcpArgs.append = options.append;
+			}
+			if (options?.research !== undefined) {
+				mcpArgs.research = options.research;
+			}
+
+			this.logger.log('Calling update_task with args:', mcpArgs);
+
+			await this.mcpWrapper.callTool('update_task', mcpArgs);
+
+			// Clear relevant caches
+			this.cache.clearPattern('get_tasks');
+
+			return {
+				success: true,
+				data: true,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Error updating task:', error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Update subtask content
+	 */
+	async updateSubtask(
+		taskId: string,
+		prompt: string,
+		options?: UpdateSubtaskOptions
+	): Promise<TaskMasterApiResponse<boolean>> {
+		const startTime = Date.now();
+
+		try {
+			const mcpArgs: Record<string, unknown> = {
+				id: String(taskId),
+				prompt: prompt,
+				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
+			};
+
+			if (options?.research !== undefined) {
+				mcpArgs.research = options.research;
+			}
+
+			this.logger.log('Calling update_subtask with args:', mcpArgs);
+
+			await this.mcpWrapper.callTool('update_subtask', mcpArgs);
+
+			// Clear relevant caches
+			this.cache.clearPattern('get_tasks');
+
+			return {
+				success: true,
+				data: true,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Error updating subtask:', error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Add a new subtask
+	 */
+	async addSubtask(
+		parentTaskId: string,
+		subtaskData: SubtaskData,
+		options?: AddSubtaskOptions
+	): Promise<TaskMasterApiResponse<boolean>> {
+		const startTime = Date.now();
+
+		try {
+			const mcpArgs: Record<string, unknown> = {
+				id: String(parentTaskId),
+				title: subtaskData.title,
+				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
+			};
+
+			if (subtaskData.description) {
+				mcpArgs.description = subtaskData.description;
+			}
+			if (subtaskData.dependencies && subtaskData.dependencies.length > 0) {
+				mcpArgs.dependencies = subtaskData.dependencies.join(',');
+			}
+			if (subtaskData.status) {
+				mcpArgs.status = subtaskData.status;
+			}
+
+			this.logger.log('Calling add_subtask with args:', mcpArgs);
+
+			await this.mcpWrapper.callTool('add_subtask', mcpArgs);
+
+			// Clear relevant caches
+			this.cache.clearPattern('get_tasks');
+
+			return {
+				success: true,
+				data: true,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Error adding subtask:', error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : 'Unknown error',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Get connection status
+	 */
+	getConnectionStatus(): { isConnected: boolean; error?: string } {
+		const status = this.mcpWrapper.getStatus();
+		return {
+			isConnected: status.isRunning,
+			error: status.error
+		};
+	}
+
+	/**
+	 * Test connection
+	 */
+	async testConnection(): Promise<TaskMasterApiResponse<boolean>> {
+		const startTime = Date.now();
+
+		try {
+			const isConnected = await this.mcpWrapper.testConnection();
+			return {
+				success: true,
+				data: isConnected,
+				requestDuration: Date.now() - startTime
+			};
+		} catch (error) {
+			this.logger.error('Connection test failed:', error);
+			return {
+				success: false,
+				error:
+					error instanceof Error ? error.message : 'Connection test failed',
+				requestDuration: Date.now() - startTime
+			};
+		}
+	}
+
+	/**
+	 * Clear all cached data
+	 */
+	clearCache(): void {
+		this.cache.clear();
+	}
+
+	/**
+	 * Get cache analytics
+	 */
+	getCacheAnalytics() {
+		return this.cache.getAnalytics();
+	}
+
+	/**
+	 * Cleanup resources
+	 */
+	destroy(): void {
+		this.cache.destroy();
+		this.logger.log('TaskMasterApi: Destroyed and cleaned up resources');
+	}
+
+	/**
+	 * Start background refresh
+	 */
+	private startBackgroundRefresh(): void {
+		const interval = this.config.cache?.refreshInterval || 5 * 60 * 1000;
+		setInterval(() => {
+			this.performBackgroundRefresh();
+		}, interval);
+	}
+
+	/**
+	 * Perform background refresh of frequently accessed cache entries
+	 */
+	private async performBackgroundRefresh(): Promise<void> {
+		if (!this.config.cache?.enableBackgroundRefresh) {
+			return;
+		}
+
+		this.logger.log('Starting background cache refresh');
+		const candidates = this.cache.getRefreshCandidates();
+
+		let refreshedCount = 0;
+		for (const [key, entry] of candidates) {
+			try {
+				const optionsMatch = key.match(/get_tasks_(.+)/);
+				if (optionsMatch) {
+					const options = JSON.parse(optionsMatch[1]);
+					await this.getTasks(options);
+					refreshedCount++;
+					this.cache.incrementRefreshes();
+				}
+			} catch (error) {
+				this.logger.warn(`Background refresh failed for key ${key}:`, error);
+			}
+		}
+
+		this.logger.log(
+			`Background refresh completed, refreshed ${refreshedCount} entries`
+		);
+	}
+
+	/**
+	 * Get workspace root path
+	 */
+	private getWorkspaceRoot(): string {
+		return vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
+	}
+}

apps/extension/src/utils/task-master-api/mcp-client.ts

@@ -0,0 +1,98 @@
+/**
+ * MCP Client Wrapper
+ * Handles MCP tool calls with retry logic
+ */
+
+import type { ExtensionLogger } from '../logger';
+import type { MCPClientManager } from '../mcpClient';
+
+export class MCPClient {
+	constructor(
+		private mcpClient: MCPClientManager,
+		private logger: ExtensionLogger,
+		private config: { timeout: number; retryAttempts: number }
+	) {}
+
+	/**
+	 * Call MCP tool with retry logic
+	 */
+	async callTool(
+		toolName: string,
+		args: Record<string, unknown>
+	): Promise<any> {
+		let lastError: Error | null = null;
+
+		for (let attempt = 1; attempt <= this.config.retryAttempts; attempt++) {
+			try {
+				const rawResponse = await this.mcpClient.callTool(toolName, args);
+				this.logger.debug(
+					`Raw MCP response for ${toolName}:`,
+					JSON.stringify(rawResponse, null, 2)
+				);
+
+				// Parse MCP response format
+				if (
+					rawResponse &&
+					rawResponse.content &&
+					Array.isArray(rawResponse.content) &&
+					rawResponse.content[0]
+				) {
+					const contentItem = rawResponse.content[0];
+					if (contentItem.type === 'text' && contentItem.text) {
+						try {
+							const parsedData = JSON.parse(contentItem.text);
+							this.logger.debug(`Parsed MCP data for ${toolName}:`, parsedData);
+							return parsedData;
+						} catch (parseError) {
+							this.logger.error(
+								`Failed to parse MCP response text for ${toolName}:`,
+								parseError
+							);
+							this.logger.error(`Raw text was:`, contentItem.text);
+							return rawResponse; // Fall back to original response
+						}
+					}
+				}
+
+				// If not in expected format, return as-is
+				this.logger.warn(
+					`Unexpected MCP response format for ${toolName}, returning raw response`
+				);
+				return rawResponse;
+			} catch (error) {
+				lastError = error instanceof Error ? error : new Error('Unknown error');
+				this.logger.warn(
+					`Attempt ${attempt}/${this.config.retryAttempts} failed for ${toolName}:`,
+					lastError.message
+				);
+
+				if (attempt < this.config.retryAttempts) {
+					// Exponential backoff
+					const delay = Math.min(1000 * 2 ** (attempt - 1), 5000);
+					await new Promise((resolve) => setTimeout(resolve, delay));
+				}
+			}
+		}
+
+		throw (
+			lastError ||
+			new Error(
+				`Failed to call ${toolName} after ${this.config.retryAttempts} attempts`
+			)
+		);
+	}
+
+	/**
+	 * Get connection status
+	 */
+	getStatus(): { isRunning: boolean; error?: string } {
+		return this.mcpClient.getStatus();
+	}
+
+	/**
+	 * Test connection
+	 */
+	async testConnection(): Promise<boolean> {
+		return this.mcpClient.testConnection();
+	}
+}

apps/extension/src/utils/task-master-api/transformers/task-transformer.ts

@@ -0,0 +1,482 @@
+/**
+ * Task Transformer
+ * Handles transformation and validation of MCP responses to internal format
+ */
+
+import type { ExtensionLogger } from '../../logger';
+import { MCPTaskResponse, type TaskMasterTask } from '../types';
+
+export class TaskTransformer {
+	constructor(private logger: ExtensionLogger) {}
+
+	/**
+	 * Transform MCP tasks response to internal format
+	 */
+	transformMCPTasksResponse(mcpResponse: any): TaskMasterTask[] {
+		const transformStartTime = Date.now();
+
+		try {
+			// Validate response structure
+			const validationResult = this.validateMCPResponse(mcpResponse);
+			if (!validationResult.isValid) {
+				this.logger.warn(
+					'MCP response validation failed:',
+					validationResult.errors
+				);
+				return [];
+			}
+
+			// Handle different response structures
+			let tasks = [];
+			if (Array.isArray(mcpResponse)) {
+				tasks = mcpResponse;
+			} else if (mcpResponse.data) {
+				if (Array.isArray(mcpResponse.data)) {
+					tasks = mcpResponse.data;
+				} else if (
+					mcpResponse.data.tasks &&
+					Array.isArray(mcpResponse.data.tasks)
+				) {
+					tasks = mcpResponse.data.tasks;
+				}
+			} else if (mcpResponse.tasks && Array.isArray(mcpResponse.tasks)) {
+				tasks = mcpResponse.tasks;
+			}
+
+			this.logger.log(`Transforming ${tasks.length} tasks from MCP response`, {
+				responseStructure: {
+					isArray: Array.isArray(mcpResponse),
+					hasData: !!mcpResponse.data,
+					dataIsArray: Array.isArray(mcpResponse.data),
+					hasDataTasks: !!mcpResponse.data?.tasks,
+					hasTasks: !!mcpResponse.tasks
+				}
+			});
+
+			const transformedTasks: TaskMasterTask[] = [];
+			const transformationErrors: Array<{
+				taskId: any;
+				error: string;
+				task: any;
+			}> = [];
+
+			for (let i = 0; i < tasks.length; i++) {
+				try {
+					const task = tasks[i];
+					const transformedTask = this.transformSingleTask(task, i);
+					if (transformedTask) {
+						transformedTasks.push(transformedTask);
+					}
+				} catch (error) {
+					const errorMsg =
+						error instanceof Error
+							? error.message
+							: 'Unknown transformation error';
+					transformationErrors.push({
+						taskId: tasks[i]?.id || `unknown_${i}`,
+						error: errorMsg,
+						task: tasks[i]
+					});
+					this.logger.error(
+						`Failed to transform task at index ${i}:`,
+						errorMsg,
+						tasks[i]
+					);
+				}
+			}
+
+			// Log transformation summary
+			const transformDuration = Date.now() - transformStartTime;
+			this.logger.log(`Transformation completed in ${transformDuration}ms`, {
+				totalTasks: tasks.length,
+				successfulTransformations: transformedTasks.length,
+				errors: transformationErrors.length,
+				errorSummary: transformationErrors.map((e) => ({
+					id: e.taskId,
+					error: e.error
+				}))
+			});
+
+			return transformedTasks;
+		} catch (error) {
+			this.logger.error(
+				'Critical error during response transformation:',
+				error
+			);
+			return [];
+		}
+	}
+
+	/**
+	 * Validate MCP response structure
+	 */
+	private validateMCPResponse(mcpResponse: any): {
+		isValid: boolean;
+		errors: string[];
+	} {
+		const errors: string[] = [];
+
+		if (!mcpResponse) {
+			errors.push('Response is null or undefined');
+			return { isValid: false, errors };
+		}
+
+		// Arrays are valid responses
+		if (Array.isArray(mcpResponse)) {
+			return { isValid: true, errors };
+		}
+
+		if (typeof mcpResponse !== 'object') {
+			errors.push('Response is not an object or array');
+			return { isValid: false, errors };
+		}
+
+		if (mcpResponse.error) {
+			errors.push(`MCP error: ${mcpResponse.error}`);
+		}
+
+		// Check for valid task structure
+		const hasValidTasksStructure =
+			(mcpResponse.data && Array.isArray(mcpResponse.data)) ||
+			(mcpResponse.data?.tasks && Array.isArray(mcpResponse.data.tasks)) ||
+			(mcpResponse.tasks && Array.isArray(mcpResponse.tasks));
+
+		if (!hasValidTasksStructure && !mcpResponse.error) {
+			errors.push('Response does not contain a valid tasks array structure');
+		}
+
+		return { isValid: errors.length === 0, errors };
+	}
+
+	/**
+	 * Transform a single task with validation
+	 */
+	private transformSingleTask(task: any, index: number): TaskMasterTask | null {
+		if (!task || typeof task !== 'object') {
+			this.logger.warn(`Task at index ${index} is not a valid object:`, task);
+			return null;
+		}
+
+		try {
+			// Validate required fields
+			const taskId = this.validateAndNormalizeId(task.id, index);
+			const title =
+				this.validateAndNormalizeString(
+					task.title,
+					'Untitled Task',
+					`title for task ${taskId}`
+				) || 'Untitled Task';
+			const description =
+				this.validateAndNormalizeString(
+					task.description,
+					'',
+					`description for task ${taskId}`
+				) || '';
+
+			// Normalize and validate status/priority
+			const status = this.normalizeStatus(task.status);
+			const priority = this.normalizePriority(task.priority);
+
+			// Handle optional fields
+			const details = this.validateAndNormalizeString(
+				task.details,
+				undefined,
+				`details for task ${taskId}`
+			);
+			const testStrategy = this.validateAndNormalizeString(
+				task.testStrategy,
+				undefined,
+				`testStrategy for task ${taskId}`
+			);
+
+			// Handle complexity score
+			const complexityScore =
+				typeof task.complexityScore === 'number'
+					? task.complexityScore
+					: undefined;
+
+			// Transform dependencies
+			const dependencies = this.transformDependencies(
+				task.dependencies,
+				taskId
+			);
+
+			// Transform subtasks
+			const subtasks = this.transformSubtasks(task.subtasks, taskId);
+
+			const transformedTask: TaskMasterTask = {
+				id: taskId,
+				title,
+				description,
+				status,
+				priority,
+				details,
+				testStrategy,
+				complexityScore,
+				dependencies,
+				subtasks
+			};
+
+			// Log successful transformation for complex tasks
+			if (
+				(subtasks && subtasks.length > 0) ||
+				dependencies.length > 0 ||
+				complexityScore !== undefined
+			) {
+				this.logger.debug(`Successfully transformed complex task ${taskId}:`, {
+					subtaskCount: subtasks?.length ?? 0,
+					dependencyCount: dependencies.length,
+					status,
+					priority,
+					complexityScore
+				});
+			}
+
+			return transformedTask;
+		} catch (error) {
+			this.logger.error(
+				`Error transforming task at index ${index}:`,
+				error,
+				task
+			);
+			return null;
+		}
+	}
+
+	private validateAndNormalizeId(id: any, fallbackIndex: number): string {
+		if (id === null || id === undefined) {
+			const generatedId = `generated_${fallbackIndex}_${Date.now()}`;
+			this.logger.warn(`Task missing ID, generated: ${generatedId}`);
+			return generatedId;
+		}
+
+		const stringId = String(id).trim();
+		if (stringId === '') {
+			const generatedId = `empty_${fallbackIndex}_${Date.now()}`;
+			this.logger.warn(`Task has empty ID, generated: ${generatedId}`);
+			return generatedId;
+		}
+
+		return stringId;
+	}
+
+	private validateAndNormalizeString(
+		value: any,
+		defaultValue: string | undefined,
+		fieldName: string
+	): string | undefined {
+		if (value === null || value === undefined) {
+			return defaultValue;
+		}
+
+		if (typeof value !== 'string') {
+			this.logger.warn(`${fieldName} is not a string, converting:`, value);
+			return String(value).trim() || defaultValue;
+		}
+
+		const trimmed = value.trim();
+		if (trimmed === '' && defaultValue !== undefined) {
+			return defaultValue;
+		}
+
+		return trimmed || defaultValue;
+	}
+
+	private transformDependencies(dependencies: any, taskId: string): string[] {
+		if (!dependencies) {
+			return [];
+		}
+
+		if (!Array.isArray(dependencies)) {
+			this.logger.warn(
+				`Dependencies for task ${taskId} is not an array:`,
+				dependencies
+			);
+			return [];
+		}
+
+		const validDependencies: string[] = [];
+		for (let i = 0; i < dependencies.length; i++) {
+			const dep = dependencies[i];
+			if (dep === null || dep === undefined) {
+				this.logger.warn(`Null dependency at index ${i} for task ${taskId}`);
+				continue;
+			}
+
+			const stringDep = String(dep).trim();
+			if (stringDep === '') {
+				this.logger.warn(`Empty dependency at index ${i} for task ${taskId}`);
+				continue;
+			}
+
+			// Check for self-dependency
+			if (stringDep === taskId) {
+				this.logger.warn(
+					`Self-dependency detected for task ${taskId}, skipping`
+				);
+				continue;
+			}
+
+			validDependencies.push(stringDep);
+		}
+
+		return validDependencies;
+	}
+
+	private transformSubtasks(
+		subtasks: any,
+		parentTaskId: string
+	): TaskMasterTask['subtasks'] {
+		if (!subtasks) {
+			return [];
+		}
+
+		if (!Array.isArray(subtasks)) {
+			this.logger.warn(
+				`Subtasks for task ${parentTaskId} is not an array:`,
+				subtasks
+			);
+			return [];
+		}
+
+		const validSubtasks = [];
+		for (let i = 0; i < subtasks.length; i++) {
+			try {
+				const subtask = subtasks[i];
+				if (!subtask || typeof subtask !== 'object') {
+					this.logger.warn(
+						`Invalid subtask at index ${i} for task ${parentTaskId}:`,
+						subtask
+					);
+					continue;
+				}
+
+				const transformedSubtask = {
+					id: typeof subtask.id === 'number' ? subtask.id : i + 1,
+					title:
+						this.validateAndNormalizeString(
+							subtask.title,
+							`Subtask ${i + 1}`,
+							`subtask title for parent ${parentTaskId}`
+						) || `Subtask ${i + 1}`,
+					description: this.validateAndNormalizeString(
+						subtask.description,
+						undefined,
+						`subtask description for parent ${parentTaskId}`
+					),
+					status:
+						this.validateAndNormalizeString(
+							subtask.status,
+							'pending',
+							`subtask status for parent ${parentTaskId}`
+						) || 'pending',
+					details: this.validateAndNormalizeString(
+						subtask.details,
+						undefined,
+						`subtask details for parent ${parentTaskId}`
+					),
+					testStrategy: this.validateAndNormalizeString(
+						subtask.testStrategy,
+						undefined,
+						`subtask testStrategy for parent ${parentTaskId}`
+					),
+					dependencies: subtask.dependencies || []
+				};
+
+				validSubtasks.push(transformedSubtask);
+			} catch (error) {
+				this.logger.error(
+					`Error transforming subtask at index ${i} for task ${parentTaskId}:`,
+					error
+				);
+			}
+		}
+
+		return validSubtasks;
+	}
+
+	private normalizeStatus(status: string): TaskMasterTask['status'] {
+		const original = status;
+		const normalized = status?.toLowerCase()?.trim() || 'pending';
+
+		const statusMap: Record<string, TaskMasterTask['status']> = {
+			pending: 'pending',
+			'in-progress': 'in-progress',
+			in_progress: 'in-progress',
+			inprogress: 'in-progress',
+			progress: 'in-progress',
+			working: 'in-progress',
+			active: 'in-progress',
+			review: 'review',
+			reviewing: 'review',
+			'in-review': 'review',
+			in_review: 'review',
+			done: 'done',
+			completed: 'done',
+			complete: 'done',
+			finished: 'done',
+			closed: 'done',
+			resolved: 'done',
+			blocked: 'deferred',
+			block: 'deferred',
+			stuck: 'deferred',
+			waiting: 'deferred',
+			cancelled: 'cancelled',
+			canceled: 'cancelled',
+			cancel: 'cancelled',
+			abandoned: 'cancelled',
+			deferred: 'deferred',
+			defer: 'deferred',
+			postponed: 'deferred',
+			later: 'deferred'
+		};
+
+		const result = statusMap[normalized] || 'pending';
+
+		if (original && original !== result) {
+			this.logger.debug(`Normalized status '${original}' -> '${result}'`);
+		}
+
+		return result;
+	}
+
+	private normalizePriority(priority: string): TaskMasterTask['priority'] {
+		const original = priority;
+		const normalized = priority?.toLowerCase()?.trim() || 'medium';
+
+		let result: TaskMasterTask['priority'] = 'medium';
+
+		if (
+			normalized.includes('high') ||
+			normalized.includes('urgent') ||
+			normalized.includes('critical') ||
+			normalized.includes('important') ||
+			normalized === 'h' ||
+			normalized === '3'
+		) {
+			result = 'high';
+		} else if (
+			normalized.includes('low') ||
+			normalized.includes('minor') ||
+			normalized.includes('trivial') ||
+			normalized === 'l' ||
+			normalized === '1'
+		) {
+			result = 'low';
+		} else if (
+			normalized.includes('medium') ||
+			normalized.includes('normal') ||
+			normalized.includes('standard') ||
+			normalized === 'm' ||
+			normalized === '2'
+		) {
+			result = 'medium';
+		}
+
+		if (original && original !== result) {
+			this.logger.debug(`Normalized priority '${original}' -> '${result}'`);
+		}
+
+		return result;
+	}
+}

apps/extension/src/utils/task-master-api/types/index.ts

@@ -0,0 +1,157 @@
+/**
+ * TaskMaster API Types
+ * All type definitions for the TaskMaster API
+ */
+
+// MCP Response Types
+export interface MCPTaskResponse {
+	data?: {
+		tasks?: Array<{
+			id: number | string;
+			title: string;
+			description: string;
+			status: string;
+			priority: string;
+			details?: string;
+			testStrategy?: string;
+			dependencies?: Array<number | string>;
+			complexityScore?: number;
+			subtasks?: Array<{
+				id: number;
+				title: string;
+				description?: string;
+				status: string;
+				details?: string;
+				dependencies?: Array<number | string>;
+			}>;
+		}>;
+		tag?: {
+			currentTag: string;
+			availableTags: string[];
+		};
+	};
+	version?: {
+		version: string;
+		name: string;
+	};
+	error?: string;
+}
+
+// Internal Task Interface
+export interface TaskMasterTask {
+	id: string;
+	title: string;
+	description: string;
+	status:
+		| 'pending'
+		| 'in-progress'
+		| 'review'
+		| 'done'
+		| 'deferred'
+		| 'cancelled';
+	priority: 'high' | 'medium' | 'low';
+	details?: string;
+	testStrategy?: string;
+	dependencies?: string[];
+	complexityScore?: number;
+	subtasks?: Array<{
+		id: number;
+		title: string;
+		description?: string;
+		status: string;
+		details?: string;
+		testStrategy?: string;
+		dependencies?: Array<number | string>;
+	}>;
+}
+
+// API Response Wrapper
+export interface TaskMasterApiResponse<T = any> {
+	success: boolean;
+	data?: T;
+	error?: string;
+	requestDuration?: number;
+}
+
+// API Configuration
+export interface TaskMasterApiConfig {
+	timeout: number;
+	retryAttempts: number;
+	cacheDuration: number;
+	projectRoot?: string;
+	cache?: CacheConfig;
+}
+
+export interface CacheConfig {
+	maxSize: number;
+	enableBackgroundRefresh: boolean;
+	refreshInterval: number;
+	enableAnalytics: boolean;
+	enablePrefetch: boolean;
+	compressionEnabled: boolean;
+	persistToDisk: boolean;
+}
+
+// Cache Types
+export interface CacheEntry {
+	data: any;
+	timestamp: number;
+	accessCount: number;
+	lastAccessed: number;
+	size: number;
+	ttl?: number;
+	tags: string[];
+}
+
+export interface CacheAnalytics {
+	hits: number;
+	misses: number;
+	evictions: number;
+	refreshes: number;
+	totalSize: number;
+	averageAccessTime: number;
+	hitRate: number;
+}
+
+// Method Options
+export interface GetTasksOptions {
+	status?: string;
+	withSubtasks?: boolean;
+	tag?: string;
+	projectRoot?: string;
+}
+
+export interface UpdateTaskStatusOptions {
+	projectRoot?: string;
+}
+
+export interface UpdateTaskOptions {
+	projectRoot?: string;
+	append?: boolean;
+	research?: boolean;
+}
+
+export interface UpdateSubtaskOptions {
+	projectRoot?: string;
+	research?: boolean;
+}
+
+export interface AddSubtaskOptions {
+	projectRoot?: string;
+}
+
+export interface TaskUpdate {
+	title?: string;
+	description?: string;
+	details?: string;
+	priority?: 'high' | 'medium' | 'low';
+	testStrategy?: string;
+	dependencies?: string[];
+}
+
+export interface SubtaskData {
+	title: string;
+	description?: string;
+	dependencies?: string[];
+	status?: string;
+}

apps/extension/src/webview/App.tsx

@@ -0,0 +1,106 @@
+/**
+ * Main App Component
+ */
+
+import React, { useReducer, useState, useEffect, useRef } from 'react';
+import { VSCodeContext } from './contexts/VSCodeContext';
+import { QueryProvider } from './providers/QueryProvider';
+import { AppContent } from './components/AppContent';
+import { ToastContainer } from './components/ToastContainer';
+import { ErrorBoundary } from './components/ErrorBoundary';
+import { appReducer, initialState } from './reducers/appReducer';
+import { useWebviewHeight } from './hooks/useWebviewHeight';
+import { useVSCodeMessages } from './hooks/useVSCodeMessages';
+import {
+	showSuccessToast,
+	showInfoToast,
+	showWarningToast,
+	showErrorToast,
+	createToast
+} from './utils/toast';
+
+export const App: React.FC = () => {
+	const [state, dispatch] = useReducer(appReducer, initialState);
+	const [vscode] = useState(() => window.acquireVsCodeApi?.());
+	const availableHeight = useWebviewHeight();
+	const { sendMessage } = useVSCodeMessages(vscode, state, dispatch);
+	const hasInitialized = useRef(false);
+
+	// Initialize the webview
+	useEffect(() => {
+		if (hasInitialized.current) return;
+		hasInitialized.current = true;
+
+		if (!vscode) {
+			console.warn('⚠️ VS Code API not available - running in standalone mode');
+			dispatch({
+				type: 'SET_CONNECTION_STATUS',
+				payload: { isConnected: false, status: 'Standalone Mode' }
+			});
+			return;
+		}
+
+		console.log('🔄 Initializing webview...');
+
+		// Notify extension that webview is ready
+		vscode.postMessage({ type: 'ready' });
+
+		// React Query will handle task fetching, so we only need to load tags data
+		sendMessage({ type: 'getTags' })
+			.then((tagsData) => {
+				if (tagsData?.tags && tagsData?.currentTag) {
+					const tagNames = tagsData.tags.map((tag: any) => tag.name || tag);
+					dispatch({
+						type: 'SET_TAG_DATA',
+						payload: {
+							currentTag: tagsData.currentTag,
+							availableTags: tagNames
+						}
+					});
+				}
+			})
+			.catch((error) => {
+				console.error('❌ Failed to load tags:', error);
+			});
+	}, [vscode, sendMessage, dispatch]);
+
+	const contextValue = {
+		vscode,
+		state,
+		dispatch,
+		sendMessage,
+		availableHeight,
+		// Toast notification functions
+		showSuccessToast: showSuccessToast(dispatch),
+		showInfoToast: showInfoToast(dispatch),
+		showWarningToast: showWarningToast(dispatch),
+		showErrorToast: showErrorToast(dispatch)
+	};
+
+	return (
+		<QueryProvider>
+			<VSCodeContext.Provider value={contextValue}>
+				<ErrorBoundary
+					onError={(error) => {
+						// Handle React errors and show appropriate toast
+						dispatch({
+							type: 'ADD_TOAST',
+							payload: createToast(
+								'error',
+								'Component Error',
+								`A React component crashed: ${error.message}`,
+								10000
+							)
+						});
+					}}
+				>
+					<AppContent />
+					<ToastContainer
+						notifications={state.toastNotifications}
+						onDismiss={(id) => dispatch({ type: 'REMOVE_TOAST', payload: id })}
+					/>
+				</ErrorBoundary>
+			</VSCodeContext.Provider>
+		</QueryProvider>
+	);
+};

apps/extension/src/webview/components/AppContent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TaskMasterKanban } from './TaskMasterKanban';
+import TaskDetailsView from '@/components/TaskDetailsView';
+import { ConfigView } from '@/components/ConfigView';
+import { useVSCodeContext } from '../contexts/VSCodeContext';
+
+export const AppContent: React.FC = () => {
+	const { state, dispatch, sendMessage } = useVSCodeContext();
+
+	console.log(
+		'🎯 AppContent render - currentView:',
+		state.currentView,
+		'selectedTaskId:',
+		state.selectedTaskId
+	);
+
+	if (state.currentView === 'config') {
+		return (
+			<ConfigView
+				sendMessage={sendMessage}
+				onNavigateBack={() => dispatch({ type: 'NAVIGATE_TO_KANBAN' })}
+			/>
+		);
+	}
+
+	if (state.currentView === 'task-details' && state.selectedTaskId) {
+		return (
+			<TaskDetailsView
+				taskId={state.selectedTaskId}
+				onNavigateBack={() => dispatch({ type: 'NAVIGATE_TO_KANBAN' })}
+				onNavigateToTask={(taskId: string) =>
+					dispatch({ type: 'NAVIGATE_TO_TASK', payload: taskId })
+				}
+			/>
+		);
+	}
+
+	// Default to Kanban view
+	return <TaskMasterKanban />;
+};

apps/extension/src/webview/components/EmptyState.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { ExternalLink, Terminal, MessageSquare, Plus } from 'lucide-react';
+import { TaskMasterLogo } from '../../components/TaskMasterLogo';
+
+interface EmptyStateProps {
+	currentTag: string;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({ currentTag }) => {
+	return (
+		<div className="flex items-center justify-center h-full overflow-auto">
+			<div className="max-w-2xl mx-auto text-center p-8">
+				{/* Empty state illustration */}
+				<div className="mb-8 max-w-96 mx-auto">
+					<TaskMasterLogo className="w-32 h-32 mx-auto text-vscode-foreground/20" />
+				</div>
+
+				<h2 className="text-2xl font-semibold mb-2 text-vscode-foreground">
+					No tasks in "{currentTag}" tag
+				</h2>
+				<p className="text-vscode-foreground/70 mb-8">
+					Get started by adding tasks to this tag using the commands below
+				</p>
+
+				{/* Command suggestions */}
+				<div className="space-y-4 text-left">
+					<div className="bg-vscode-editor-background/50 border border-vscode-panel-border rounded-lg p-4">
+						<div className="flex items-center gap-2 mb-2">
+							<Terminal className="w-4 h-4 text-vscode-terminal-ansiGreen" />
+							<h3 className="font-medium">CLI Commands</h3>
+						</div>
+						<div className="space-y-2">
+							<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
+								<span className="text-vscode-terminal-ansiYellow">
+									task-master
+								</span>{' '}
+								<span className="text-vscode-terminal-ansiCyan">parse-prd</span>{' '}
+								<span className="text-vscode-foreground/70">
+									&lt;path-to-prd&gt;
+								</span>{' '}
+								<span className="text-vscode-terminal-ansiMagenta">
+									--append
+								</span>
+								<div className="text-xs text-vscode-foreground/50 mt-1">
+									Parse a PRD and append tasks to current tag
+								</div>
+							</div>
+							<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
+								<span className="text-vscode-terminal-ansiYellow">
+									task-master
+								</span>{' '}
+								<span className="text-vscode-terminal-ansiCyan">add-task</span>{' '}
+								<span className="text-vscode-terminal-ansiMagenta">
+									--prompt
+								</span>{' '}
+								<span className="text-vscode-foreground/70">
+									"Your task description"
+								</span>
+								<div className="text-xs text-vscode-foreground/50 mt-1">
+									Add a single task with AI assistance
+								</div>
+							</div>
+							<div className="bg-vscode-editor-background rounded p-2 font-mono text-sm">
+								<span className="text-vscode-terminal-ansiYellow">
+									task-master
+								</span>{' '}
+								<span className="text-vscode-terminal-ansiCyan">add-task</span>{' '}
+								<span className="text-vscode-terminal-ansiMagenta">--help</span>
+								<div className="text-xs text-vscode-foreground/50 mt-1">
+									View all options for adding tasks
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="bg-vscode-editor-background/50 border border-vscode-panel-border rounded-lg p-4">
+						<div className="flex items-center gap-2 mb-2">
+							<MessageSquare className="w-4 h-4 text-vscode-textLink-foreground" />
+							<h3 className="font-medium">MCP Examples</h3>
+						</div>
+						<div className="space-y-2 text-sm">
+							<div className="flex items-start gap-2">
+								<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
+								<div>
+									<div className="text-vscode-foreground">
+										"Add a task to tag {currentTag}: Implement user
+										authentication"
+									</div>
+								</div>
+							</div>
+							<div className="flex items-start gap-2">
+								<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
+								<div>
+									<div className="text-vscode-foreground">
+										"Parse this PRD and add tasks to {currentTag}: [paste PRD
+										content]"
+									</div>
+								</div>
+							</div>
+							<div className="flex items-start gap-2">
+								<Plus className="w-4 h-4 mt-0.5 text-vscode-foreground/50" />
+								<div>
+									<div className="text-vscode-foreground">
+										"Create 5 tasks for building a REST API in tag {currentTag}"
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					{/* Documentation link */}
+					<div className="flex justify-center pt-4">
+						<a
+							href="https://docs.task-master.dev"
+							className="inline-flex items-center gap-2 text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground transition-colors"
+							onClick={(e) => {
+								e.preventDefault();
+								// Use VS Code API to open external link
+								if (window.acquireVsCodeApi) {
+									const vscode = window.acquireVsCodeApi();
+									vscode.postMessage({
+										type: 'openExternal',
+										url: 'https://docs.task-master.dev'
+									});
+								}
+							}}
+						>
+							<ExternalLink className="w-4 h-4" />
+							<span className="text-sm font-medium">
+								View TaskMaster Documentation
+							</span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/extension/src/webview/components/ErrorBoundary.tsx

@@ -0,0 +1,113 @@
+/**
+ * Error Boundary Component
+ */
+
+import React from 'react';
+
+interface ErrorBoundaryState {
+	hasError: boolean;
+	error?: Error;
+	errorInfo?: React.ErrorInfo;
+}
+
+interface ErrorBoundaryProps {
+	children: React.ReactNode;
+	onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+export class ErrorBoundary extends React.Component<
+	ErrorBoundaryProps,
+	ErrorBoundaryState
+> {
+	constructor(props: ErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+		return { hasError: true, error };
+	}
+
+	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+		console.error('React Error Boundary caught:', error, errorInfo);
+
+		// Log to extension
+		if (this.props.onError) {
+			this.props.onError(error, errorInfo);
+		}
+
+		// Send error to extension for centralized handling
+		if (window.acquireVsCodeApi) {
+			const vscode = window.acquireVsCodeApi();
+			vscode.postMessage({
+				type: 'reactError',
+				data: {
+					message: error.message,
+					stack: error.stack,
+					componentStack: errorInfo.componentStack,
+					timestamp: Date.now()
+				}
+			});
+		}
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return (
+				<div className="min-h-screen flex items-center justify-center bg-vscode-background">
+					<div className="max-w-md mx-auto text-center p-6">
+						<div className="w-16 h-16 mx-auto mb-4 text-red-400">
+							<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									strokeWidth={2}
+									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.732 19c-.77.833.192 2.5 1.732 2.5z"
+								/>
+							</svg>
+						</div>
+						<h2 className="text-xl font-semibold text-vscode-foreground mb-2">
+							Something went wrong
+						</h2>
+						<p className="text-vscode-foreground/70 mb-4">
+							The Task Master Kanban board encountered an unexpected error.
+						</p>
+						<div className="space-y-2">
+							<button
+								onClick={() =>
+									this.setState({
+										hasError: false,
+										error: undefined,
+										errorInfo: undefined
+									})
+								}
+								className="w-full px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors"
+							>
+								Try Again
+							</button>
+							<button
+								onClick={() => window.location.reload()}
+								className="w-full px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-md transition-colors"
+							>
+								Reload Extension
+							</button>
+						</div>
+						{this.state.error && (
+							<details className="mt-4 text-left">
+								<summary className="text-sm text-vscode-foreground/50 cursor-pointer">
+									Error Details
+								</summary>
+								<pre className="mt-2 text-xs text-vscode-foreground/70 bg-vscode-input/30 p-2 rounded overflow-auto max-h-32">
+									{this.state.error.message}
+									{this.state.error.stack && `\n\n${this.state.error.stack}`}
+								</pre>
+							</details>
+						)}
+					</div>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

apps/extension/src/webview/components/PollingStatus.tsx

@@ -0,0 +1,84 @@
+/**
+ * Polling Status Indicator Component
+ */
+
+import React from 'react';
+import type { AppState } from '../types';
+
+interface PollingStatusProps {
+	polling: AppState['polling'];
+	onRetry?: () => void;
+}
+
+export const PollingStatus: React.FC<PollingStatusProps> = ({
+	polling,
+	onRetry
+}) => {
+	const {
+		isActive,
+		errorCount,
+		isOfflineMode,
+		connectionStatus,
+		reconnectAttempts,
+		maxReconnectAttempts
+	} = polling;
+
+	if (isOfflineMode || connectionStatus === 'offline') {
+		return (
+			<div className="flex items-center gap-2">
+				<div
+					className="flex items-center gap-1 text-red-400"
+					title="Offline mode - using cached data"
+				>
+					<div className="w-2 h-2 rounded-full bg-red-400" />
+					<span className="text-xs">Offline</span>
+				</div>
+				<button
+					onClick={onRetry}
+					className="text-xs text-blue-400 hover:underline"
+					title="Attempt to reconnect"
+				>
+					Retry
+				</button>
+			</div>
+		);
+	}
+
+	if (connectionStatus === 'reconnecting') {
+		return (
+			<div
+				className="flex items-center gap-1 text-yellow-400"
+				title={`Reconnecting... (${reconnectAttempts}/${maxReconnectAttempts})`}
+			>
+				<div className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
+				<span className="text-xs">Reconnecting</span>
+			</div>
+		);
+	}
+
+	if (errorCount > 0) {
+		return (
+			<div
+				className="flex items-center gap-1 text-yellow-400"
+				title={`${errorCount} polling error${errorCount > 1 ? 's' : ''}`}
+			>
+				<div className="w-2 h-2 rounded-full bg-yellow-400" />
+				<span className="text-xs">Live (errors)</span>
+			</div>
+		);
+	}
+
+	if (isActive) {
+		return (
+			<div
+				className="flex items-center gap-1 text-green-400"
+				title="Live updates active"
+			>
+				<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+				<span className="text-xs">Live</span>
+			</div>
+		);
+	}
+
+	return null;
+};

apps/extension/src/webview/components/PriorityBadge.tsx

@@ -0,0 +1,30 @@
+/**
+ * Priority Badge Component
+ */
+
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import type { TaskMasterTask } from '../types';
+
+interface PriorityBadgeProps {
+	priority: TaskMasterTask['priority'];
+}
+
+export const PriorityBadge: React.FC<PriorityBadgeProps> = ({ priority }) => {
+	if (!priority) return null;
+
+	const variants = {
+		high: 'destructive' as const,
+		medium: 'warning' as const,
+		low: 'secondary' as const
+	};
+
+	return (
+		<Badge
+			variant={variants[priority] || 'secondary'}
+			className="text-xs font-normal px-2 py-0.5"
+		>
+			{priority}
+		</Badge>
+	);
+};

apps/extension/src/webview/components/SidebarView.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import { TaskMasterLogo } from '../../components/TaskMasterLogo';
+
+interface SidebarViewProps {
+	initialConnectionStatus?: boolean;
+}
+
+// Acquire VS Code API only once globally to avoid "already acquired" error
+const vscode = window.acquireVsCodeApi ? window.acquireVsCodeApi() : null;
+
+export const SidebarView: React.FC<SidebarViewProps> = ({
+	initialConnectionStatus = false
+}) => {
+	const [isConnected, setIsConnected] = useState(initialConnectionStatus);
+
+	useEffect(() => {
+		const handleMessage = (event: MessageEvent) => {
+			const message = event.data;
+			if (message.type === 'connectionStatus') {
+				setIsConnected(message.data.isConnected);
+			}
+		};
+
+		window.addEventListener('message', handleMessage);
+		return () => {
+			window.removeEventListener('message', handleMessage);
+		};
+	}, []);
+
+	const handleOpenBoard = () => {
+		vscode?.postMessage({ command: 'openBoard' });
+	};
+
+	return (
+		<div className="h-full flex items-center justify-center p-6">
+			<div className="text-center">
+				<TaskMasterLogo className="w-20 h-20 mx-auto mb-5 opacity-80 text-vscode-foreground" />
+
+				<h2 className="text-xl font-semibold mb-6 text-vscode-foreground">
+					TaskMaster
+				</h2>
+
+				<button
+					onClick={handleOpenBoard}
+					className="w-full px-4 py-2 bg-vscode-button-background text-vscode-button-foreground rounded hover:bg-vscode-button-hoverBackground transition-colors text-sm font-medium"
+				>
+					Open Kanban Board
+				</button>
+			</div>
+		</div>
+	);
+};

apps/extension/src/webview/components/TagDropdown.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface TagDropdownProps {
+	currentTag: string;
+	availableTags: string[];
+	onTagSwitch: (tagName: string) => Promise<void>;
+	sendMessage: (message: any) => Promise<any>;
+	dispatch: React.Dispatch<any>;
+}
+
+export const TagDropdown: React.FC<TagDropdownProps> = ({
+	currentTag,
+	availableTags,
+	onTagSwitch,
+	sendMessage,
+	dispatch
+}) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const dropdownRef = useRef<HTMLDivElement>(null);
+
+	// Fetch tags when component mounts
+	useEffect(() => {
+		fetchTags();
+	}, []);
+
+	// Handle click outside to close dropdown
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				dropdownRef.current &&
+				!dropdownRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		};
+
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+			return () => {
+				document.removeEventListener('mousedown', handleClickOutside);
+			};
+		}
+	}, [isOpen]);
+
+	const fetchTags = async () => {
+		try {
+			const result = await sendMessage({ type: 'getTags' });
+
+			if (result?.tags && result?.currentTag) {
+				const tagNames = result.tags.map((tag: any) => tag.name || tag);
+				dispatch({
+					type: 'SET_TAG_DATA',
+					payload: {
+						currentTag: result.currentTag,
+						availableTags: tagNames
+					}
+				});
+			}
+		} catch (error) {
+			console.error('Failed to fetch tags:', error);
+		}
+	};
+
+	const handleTagSwitch = async (tagName: string) => {
+		if (tagName === currentTag) {
+			setIsOpen(false);
+			return;
+		}
+
+		setIsLoading(true);
+		try {
+			await onTagSwitch(tagName);
+			dispatch({ type: 'SET_CURRENT_TAG', payload: tagName });
+			setIsOpen(false);
+		} catch (error) {
+			console.error('Failed to switch tag:', error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<div className="relative" ref={dropdownRef}>
+			<button
+				onClick={() => setIsOpen(!isOpen)}
+				disabled={isLoading}
+				className="flex items-center gap-2 px-3 py-1.5 text-sm bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border rounded hover:bg-vscode-list-hoverBackground transition-colors"
+			>
+				<span className="font-medium">{currentTag}</span>
+				<svg
+					className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						d="M19 9l-7 7-7-7"
+					/>
+				</svg>
+			</button>
+
+			{isOpen && (
+				<div className="absolute top-full mt-1 right-0 bg-background border border-vscode-dropdown-border rounded shadow-lg z-50 min-w-[200px] py-1">
+					{availableTags.map((tag) => (
+						<button
+							key={tag}
+							onClick={() => handleTagSwitch(tag)}
+							className={`w-full text-left px-3 py-2 text-sm transition-colors flex items-center justify-between group
+								${
+									tag === currentTag
+										? 'bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground'
+										: 'hover:bg-vscode-list-hoverBackground text-vscode-dropdown-foreground'
+								}`}
+						>
+							<span className="truncate pr-2">{tag}</span>
+							{tag === currentTag && (
+								<svg
+									className="w-4 h-4 flex-shrink-0 text-vscode-textLink-foreground"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+							)}
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	);
+};

apps/extension/src/webview/components/TaskCard.tsx

@@ -0,0 +1,80 @@
+/**
+ * Task Card Component for Kanban Board
+ */
+
+import React from 'react';
+import { KanbanCard } from '@/components/ui/shadcn-io/kanban';
+import { PriorityBadge } from './PriorityBadge';
+import type { TaskMasterTask } from '../types';
+
+interface TaskCardProps {
+	task: TaskMasterTask;
+	dragging?: boolean;
+	onViewDetails?: (taskId: string) => void;
+}
+
+export const TaskCard: React.FC<TaskCardProps> = ({
+	task,
+	dragging,
+	onViewDetails
+}) => {
+	const handleCardClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		onViewDetails?.(task.id);
+	};
+
+	return (
+		<KanbanCard
+			id={task.id}
+			name={task.title}
+			index={0} // Index is not used in our implementation
+			parent={task.status}
+			className="cursor-pointer p-3 transition-shadow hover:shadow-md bg-vscode-editor-background border-vscode-border group"
+			onClick={handleCardClick}
+		>
+			<div className="space-y-3 h-full flex flex-col">
+				<div className="flex items-start justify-between gap-2 flex-shrink-0">
+					<h3 className="font-medium text-sm leading-tight flex-1 min-w-0 text-vscode-foreground">
+						{task.title}
+					</h3>
+					<div className="flex items-center gap-1 flex-shrink-0">
+						<PriorityBadge priority={task.priority} />
+					</div>
+				</div>
+
+				{task.description && (
+					<p className="text-xs text-vscode-foreground/70 line-clamp-3 leading-relaxed flex-1 min-h-0">
+						{task.description}
+					</p>
+				)}
+
+				<div className="flex items-center justify-between text-xs mt-auto pt-2 flex-shrink-0 border-t border-vscode-border/20">
+					<span className="font-mono text-vscode-foreground/50 flex-shrink-0">
+						#{task.id}
+					</span>
+					{task.dependencies && task.dependencies.length > 0 && (
+						<div className="flex items-center gap-1 text-vscode-foreground/50 flex-shrink-0 ml-2">
+							<span>Deps:</span>
+							<div className="flex items-center gap-1">
+								{task.dependencies.map((depId, index) => (
+									<React.Fragment key={depId}>
+										<button
+											className="font-mono hover:text-vscode-link-activeForeground hover:underline transition-colors"
+											onClick={(e) => {
+												e.stopPropagation();
+												onViewDetails?.(depId);
+											}}
+										>
+											#{depId}
+										</button>
+										{index < task.dependencies!.length - 1 && <span>,</span>}
+									</React.Fragment>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</KanbanCard>
+	);
+};

apps/extension/src/webview/components/TaskEditModal.tsx

@@ -0,0 +1,242 @@
+/**
+ * Task Edit Modal Component
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import type { TaskMasterTask, TaskUpdates } from '../types';
+
+interface TaskEditModalProps {
+	task: TaskMasterTask;
+	onSave: (taskId: string, updates: TaskUpdates) => Promise<void>;
+	onCancel: () => void;
+}
+
+export const TaskEditModal: React.FC<TaskEditModalProps> = ({
+	task,
+	onSave,
+	onCancel
+}) => {
+	const [updates, setUpdates] = useState<TaskUpdates>({
+		title: task.title,
+		description: task.description || '',
+		details: task.details || '',
+		testStrategy: task.testStrategy || '',
+		priority: task.priority,
+		dependencies: task.dependencies || []
+	});
+	const [isSaving, setIsSaving] = useState(false);
+	const formRef = useRef<HTMLFormElement>(null);
+	const titleInputRef = useRef<HTMLInputElement>(null);
+
+	// Focus title input on mount
+	useEffect(() => {
+		titleInputRef.current?.focus();
+		titleInputRef.current?.select();
+	}, []);
+
+	const handleSubmit = async (e?: React.FormEvent) => {
+		e?.preventDefault();
+		setIsSaving(true);
+
+		try {
+			await onSave(task.id, updates);
+		} catch (error) {
+			console.error('Failed to save task:', error);
+		} finally {
+			setIsSaving(false);
+		}
+	};
+
+	const hasChanges = () => {
+		return (
+			updates.title !== task.title ||
+			updates.description !== (task.description || '') ||
+			updates.details !== (task.details || '') ||
+			updates.testStrategy !== (task.testStrategy || '') ||
+			updates.priority !== task.priority ||
+			JSON.stringify(updates.dependencies) !==
+				JSON.stringify(task.dependencies || [])
+		);
+	};
+
+	return (
+		<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+			<div className="bg-vscode-editor-background border border-vscode-border rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+				{/* Header */}
+				<div className="flex items-center justify-between p-4 border-b border-vscode-border">
+					<h2 className="text-lg font-semibold">Edit Task #{task.id}</h2>
+					<button
+						onClick={onCancel}
+						className="text-vscode-foreground/50 hover:text-vscode-foreground transition-colors"
+					>
+						<svg
+							className="w-5 h-5"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				{/* Form */}
+				<form
+					ref={formRef}
+					onSubmit={handleSubmit}
+					className="flex-1 overflow-y-auto p-4 space-y-4"
+				>
+					{/* Title */}
+					<div className="space-y-2">
+						<Label htmlFor="title">Title</Label>
+						<input
+							ref={titleInputRef}
+							id="title"
+							type="text"
+							value={updates.title || ''}
+							onChange={(e) =>
+								setUpdates({ ...updates, title: e.target.value })
+							}
+							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded-md text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
+							placeholder="Task title"
+						/>
+					</div>
+
+					{/* Priority */}
+					<div className="space-y-2">
+						<Label htmlFor="priority">Priority</Label>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="outline" className="w-full justify-between">
+									<span className="capitalize">{updates.priority}</span>
+									<svg
+										className="w-4 h-4"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M19 9l-7 7-7-7"
+										/>
+									</svg>
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent className="w-full">
+								<DropdownMenuItem
+									onClick={() => setUpdates({ ...updates, priority: 'high' })}
+								>
+									High
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => setUpdates({ ...updates, priority: 'medium' })}
+								>
+									Medium
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={() => setUpdates({ ...updates, priority: 'low' })}
+								>
+									Low
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+
+					{/* Description */}
+					<div className="space-y-2">
+						<Label htmlFor="description">Description</Label>
+						<Textarea
+							id="description"
+							value={updates.description || ''}
+							onChange={(e) =>
+								setUpdates({ ...updates, description: e.target.value })
+							}
+							className="min-h-[80px]"
+							placeholder="Brief description of the task"
+						/>
+					</div>
+
+					{/* Details */}
+					<div className="space-y-2">
+						<Label htmlFor="details">Implementation Details</Label>
+						<Textarea
+							id="details"
+							value={updates.details || ''}
+							onChange={(e) =>
+								setUpdates({ ...updates, details: e.target.value })
+							}
+							className="min-h-[120px]"
+							placeholder="Technical details and implementation notes"
+						/>
+					</div>
+
+					{/* Test Strategy */}
+					<div className="space-y-2">
+						<Label htmlFor="testStrategy">Test Strategy</Label>
+						<Textarea
+							id="testStrategy"
+							value={updates.testStrategy || ''}
+							onChange={(e) =>
+								setUpdates({ ...updates, testStrategy: e.target.value })
+							}
+							className="min-h-[80px]"
+							placeholder="How to test this task"
+						/>
+					</div>
+
+					{/* Dependencies */}
+					<div className="space-y-2">
+						<Label htmlFor="dependencies">
+							Dependencies (comma-separated task IDs)
+						</Label>
+						<input
+							id="dependencies"
+							type="text"
+							value={updates.dependencies?.join(', ') || ''}
+							onChange={(e) =>
+								setUpdates({
+									...updates,
+									dependencies: e.target.value
+										.split(',')
+										.map((d) => d.trim())
+										.filter(Boolean)
+								})
+							}
+							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded-md text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
+							placeholder="e.g., 1, 2.1, 3"
+						/>
+					</div>
+				</form>
+
+				{/* Footer */}
+				<div className="flex items-center justify-end gap-2 p-4 border-t border-vscode-border">
+					<Button variant="outline" onClick={onCancel} disabled={isSaving}>
+						Cancel
+					</Button>
+					<Button
+						onClick={() => handleSubmit()}
+						disabled={isSaving || !hasChanges()}
+					>
+						{isSaving ? 'Saving...' : 'Save Changes'}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/extension/src/webview/components/TaskMasterKanban.tsx

@@ -0,0 +1,412 @@
+/**
+ * Main Kanban Board Component
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
+import {
+	type DragEndEvent,
+	KanbanBoard,
+	KanbanCards,
+	KanbanHeader,
+	KanbanProvider
+} from '@/components/ui/shadcn-io/kanban';
+import { TaskCard } from './TaskCard';
+import { TaskEditModal } from './TaskEditModal';
+import { PollingStatus } from './PollingStatus';
+import { TagDropdown } from './TagDropdown';
+import { EmptyState } from './EmptyState';
+import { useVSCodeContext } from '../contexts/VSCodeContext';
+import {
+	useTasks,
+	useUpdateTaskStatus,
+	useUpdateTask,
+	taskKeys
+} from '../hooks/useTaskQueries';
+import { kanbanStatuses, HEADER_HEIGHT } from '../constants';
+import type { TaskMasterTask, TaskUpdates } from '../types';
+
+export const TaskMasterKanban: React.FC = () => {
+	const { state, dispatch, sendMessage, availableHeight } = useVSCodeContext();
+	const queryClient = useQueryClient();
+	const {
+		error: legacyError,
+		editingTask,
+		polling,
+		currentTag,
+		availableTags
+	} = state;
+	const [activeTask, setActiveTask] = useState<TaskMasterTask | null>(null);
+	const [isRefreshing, setIsRefreshing] = useState(false);
+
+	// Use React Query to fetch tasks
+	const {
+		data: serverTasks = [],
+		isLoading,
+		error,
+		isFetching,
+		isSuccess
+	} = useTasks({ tag: currentTag });
+	const updateTaskStatus = useUpdateTaskStatus();
+	const updateTask = useUpdateTask();
+
+	// Debug logging
+	console.log('🔍 TaskMasterKanban Query State:', {
+		isLoading,
+		isFetching,
+		isSuccess,
+		tasksCount: serverTasks?.length,
+		error
+	});
+
+	// Temporary state only for active drag operations
+	const [tempReorderedTasks, setTempReorderedTasks] = useState<
+		TaskMasterTask[] | null
+	>(null);
+
+	// Use temp tasks only if actively set, otherwise use server tasks
+	const tasks = tempReorderedTasks ?? serverTasks;
+
+	// Calculate header height for proper kanban board sizing
+	const kanbanHeight = availableHeight - HEADER_HEIGHT;
+
+	// Group tasks by status
+	const tasksByStatus = kanbanStatuses.reduce(
+		(acc, status) => {
+			acc[status.id] = tasks.filter((task) => task.status === status.id);
+			return acc;
+		},
+		{} as Record<string, TaskMasterTask[]>
+	);
+
+	// Debug logging
+	console.log('TaskMasterKanban render:', {
+		tasksCount: tasks.length,
+		currentTag,
+		tasksByStatus: Object.entries(tasksByStatus).map(([status, tasks]) => ({
+			status,
+			count: tasks.length,
+			taskIds: tasks.map((t) => t.id)
+		})),
+		allTaskIds: tasks.map((t) => ({ id: t.id, title: t.title }))
+	});
+
+	// Handle task update
+	const handleUpdateTask = async (taskId: string, updates: TaskUpdates) => {
+		console.log(`🔄 Updating task ${taskId} content:`, updates);
+
+		try {
+			await updateTask.mutateAsync({
+				taskId,
+				updates,
+				options: { append: false, research: false }
+			});
+
+			console.log(`✅ Task ${taskId} content updated successfully`);
+
+			// Close the edit modal
+			dispatch({
+				type: 'SET_EDITING_TASK',
+				payload: { taskId: null }
+			});
+		} catch (error) {
+			console.error(`❌ Failed to update task ${taskId}:`, error);
+			dispatch({
+				type: 'SET_ERROR',
+				payload: `Failed to update task: ${error}`
+			});
+		}
+	};
+
+	// Handle drag start
+	const handleDragStart = useCallback(
+		(event: DragEndEvent) => {
+			const taskId = event.active.id as string;
+			const task = tasks.find((t) => t.id === taskId);
+			if (task) {
+				setActiveTask(task);
+			}
+		},
+		[tasks]
+	);
+
+	// Handle drag cancel
+	const handleDragCancel = useCallback(() => {
+		setActiveTask(null);
+		// Clear any temporary state
+		setTempReorderedTasks(null);
+	}, []);
+
+	// Handle drag end
+	const handleDragEnd = useCallback(
+		async (event: DragEndEvent) => {
+			const { active, over } = event;
+
+			// Reset active task
+			setActiveTask(null);
+
+			if (!over || active.id === over.id) {
+				// Clear any temp state if drag was cancelled
+				setTempReorderedTasks(null);
+				return;
+			}
+
+			const taskId = active.id as string;
+			const newStatus = over.id as TaskMasterTask['status'];
+
+			// Find the task
+			const task = tasks.find((t) => t.id === taskId);
+			if (!task || task.status === newStatus) {
+				// Clear temp state if no change needed
+				setTempReorderedTasks(null);
+				return;
+			}
+
+			// Create the optimistically reordered tasks
+			const reorderedTasks = tasks.map((t) =>
+				t.id === taskId ? { ...t, status: newStatus } : t
+			);
+
+			// Set temporary state to show immediate visual feedback
+			setTempReorderedTasks(reorderedTasks);
+
+			try {
+				// Update on server - React Query will handle optimistic updates
+				await updateTaskStatus.mutateAsync({ taskId, newStatus });
+				// Clear temp state after mutation starts successfully
+				setTempReorderedTasks(null);
+			} catch (error) {
+				// On error, clear temp state - React Query will revert optimistic update
+				setTempReorderedTasks(null);
+				dispatch({
+					type: 'SET_ERROR',
+					payload: `Failed to update task status: ${error}`
+				});
+			}
+		},
+		[tasks, updateTaskStatus, dispatch]
+	);
+
+	// Handle retry connection
+	const handleRetry = useCallback(() => {
+		sendMessage({ type: 'retryConnection' });
+	}, [sendMessage]);
+
+	// Handle refresh
+	const handleRefresh = useCallback(async () => {
+		setIsRefreshing(true);
+		try {
+			// Invalidate all task queries
+			await queryClient.invalidateQueries({ queryKey: taskKeys.all });
+		} finally {
+			// Reset after a short delay to show the animation
+			setTimeout(() => setIsRefreshing(false), 500);
+		}
+	}, [queryClient]);
+
+	// Handle tag switching
+	const handleTagSwitch = useCallback(
+		async (tagName: string) => {
+			console.log('Switching to tag:', tagName);
+			await sendMessage({ type: 'switchTag', data: { tagName } });
+			dispatch({
+				type: 'SET_TAG_DATA',
+				payload: { currentTag: tagName, availableTags }
+			});
+		},
+		[sendMessage, dispatch, availableTags]
+	);
+
+	// Use React Query loading state
+	const displayError = error
+		? error instanceof Error
+			? error.message
+			: String(error)
+		: legacyError;
+
+	if (isLoading) {
+		return (
+			<div
+				className="flex items-center justify-center"
+				style={{ height: `${kanbanHeight}px` }}
+			>
+				<div className="text-center">
+					<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-vscode-foreground mx-auto mb-4" />
+					<p className="text-sm text-vscode-foreground/70">Loading tasks...</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (displayError) {
+		return (
+			<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 m-4">
+				<p className="text-red-400 text-sm">Error: {displayError}</p>
+				<button
+					onClick={() => dispatch({ type: 'CLEAR_ERROR' })}
+					className="mt-2 text-sm text-red-400 hover:text-red-300 underline"
+				>
+					Dismiss
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<div className="flex flex-col" style={{ height: `${availableHeight}px` }}>
+				<div className="flex-shrink-0 p-4 bg-vscode-sidebar-background border-b border-vscode-border">
+					<div className="flex items-center justify-between">
+						<h1 className="text-lg font-semibold text-vscode-foreground">
+							TaskMaster Kanban
+						</h1>
+						<div className="flex items-center gap-4">
+							<TagDropdown
+								currentTag={currentTag}
+								availableTags={availableTags}
+								onTagSwitch={handleTagSwitch}
+								sendMessage={sendMessage}
+								dispatch={dispatch}
+							/>
+							<button
+								onClick={handleRefresh}
+								disabled={isRefreshing}
+								className="p-1.5 rounded hover:bg-vscode-button-hoverBackground transition-colors"
+								title="Refresh tasks"
+							>
+								<RefreshCw
+									className={`w-4 h-4 text-vscode-foreground/70 ${isRefreshing ? 'animate-spin' : ''}`}
+								/>
+							</button>
+							<PollingStatus polling={polling} onRetry={handleRetry} />
+							<div className="flex items-center gap-2">
+								<div
+									className={`w-2 h-2 rounded-full ${state.isConnected ? 'bg-green-400' : 'bg-red-400'}`}
+								/>
+								<span className="text-xs text-vscode-foreground/70">
+									{state.connectionStatus}
+								</span>
+							</div>
+							<button
+								onClick={() => dispatch({ type: 'NAVIGATE_TO_CONFIG' })}
+								className="p-1.5 rounded hover:bg-vscode-button-hoverBackground transition-colors"
+								title="TaskMaster Configuration"
+							>
+								<svg
+									className="w-4 h-4 text-vscode-foreground/70"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+									/>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+								</svg>
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<div
+					className="flex-1 px-4 py-4 overflow-hidden"
+					style={{ height: `${kanbanHeight}px` }}
+				>
+					{tasks.length === 0 ? (
+						<EmptyState currentTag={currentTag} />
+					) : (
+						<KanbanProvider
+							onDragStart={handleDragStart}
+							onDragEnd={handleDragEnd}
+							onDragCancel={handleDragCancel}
+							className="kanban-container w-full h-full overflow-x-auto overflow-y-hidden"
+							dragOverlay={
+								activeTask ? <TaskCard task={activeTask} dragging /> : null
+							}
+						>
+							<div className="flex gap-4 h-full min-w-fit">
+								{kanbanStatuses.map((status) => {
+									const statusTasks = tasksByStatus[status.id] || [];
+									const hasScrollbar = statusTasks.length > 4;
+
+									return (
+										<KanbanBoard
+											key={status.id}
+											id={status.id}
+											className={`
+												w-80 flex flex-col
+												border border-vscode-border/30
+												rounded-lg
+												bg-vscode-sidebar-background/50
+											`}
+										>
+											<KanbanHeader
+												name={`${status.title} (${statusTasks.length})`}
+												color={status.color}
+												className="px-3 py-3 text-sm font-medium flex-shrink-0 border-b border-vscode-border/30"
+											/>
+											<div
+												className={`
+													flex flex-col gap-2 
+													overflow-y-auto overflow-x-hidden
+													p-2
+													scrollbar-thin scrollbar-track-transparent
+													${hasScrollbar ? 'pr-1' : ''}
+												`}
+												style={{
+													maxHeight: `${kanbanHeight - 80}px`
+												}}
+											>
+												<KanbanCards>
+													{statusTasks.map((task) => (
+														<TaskCard
+															key={task.id}
+															task={task}
+															onViewDetails={(taskId) => {
+																console.log(
+																	'🔍 Navigating to task details:',
+																	taskId
+																);
+																dispatch({
+																	type: 'NAVIGATE_TO_TASK',
+																	payload: taskId
+																});
+															}}
+														/>
+													))}
+												</KanbanCards>
+											</div>
+										</KanbanBoard>
+									);
+								})}
+							</div>
+						</KanbanProvider>
+					)}
+				</div>
+			</div>
+
+			{/* Task Edit Modal */}
+			{editingTask?.taskId && editingTask.editData && (
+				<TaskEditModal
+					task={editingTask.editData}
+					onSave={handleUpdateTask}
+					onCancel={() => {
+						dispatch({
+							type: 'SET_EDITING_TASK',
+							payload: { taskId: null }
+						});
+					}}
+				/>
+			)}
+		</>
+	);
+};

apps/extension/src/webview/components/ToastContainer.tsx

@@ -0,0 +1,31 @@
+/**
+ * Toast Container Component
+ */
+
+import React from 'react';
+import { ToastNotification } from './ToastNotification';
+import type { ToastNotification as ToastType } from '../types';
+
+interface ToastContainerProps {
+	notifications: ToastType[];
+	onDismiss: (id: string) => void;
+}
+
+export const ToastContainer: React.FC<ToastContainerProps> = ({
+	notifications,
+	onDismiss
+}) => {
+	return (
+		<div className="fixed top-4 right-4 z-50 pointer-events-none">
+			<div className="flex flex-col items-end pointer-events-auto">
+				{notifications.map((notification) => (
+					<ToastNotification
+						key={notification.id}
+						notification={notification}
+						onDismiss={onDismiss}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};

apps/extension/src/webview/components/ToastNotification.tsx

@@ -0,0 +1,167 @@
+/**
+ * Toast Notification Component
+ */
+
+import React, { useState, useEffect } from 'react';
+import type { ToastNotification as ToastType } from '../types';
+
+interface ToastNotificationProps {
+	notification: ToastType;
+	onDismiss: (id: string) => void;
+}
+
+export const ToastNotification: React.FC<ToastNotificationProps> = ({
+	notification,
+	onDismiss
+}) => {
+	const [isVisible, setIsVisible] = useState(true);
+	const [progress, setProgress] = useState(100);
+	const duration = notification.duration || 5000; // 5 seconds default
+
+	useEffect(() => {
+		const progressInterval = setInterval(() => {
+			setProgress((prev) => {
+				const decrease = (100 / duration) * 100; // Update every 100ms
+				return Math.max(0, prev - decrease);
+			});
+		}, 100);
+
+		const timeoutId = setTimeout(() => {
+			setIsVisible(false);
+			setTimeout(() => onDismiss(notification.id), 300); // Wait for animation
+		}, duration);
+
+		return () => {
+			clearInterval(progressInterval);
+			clearTimeout(timeoutId);
+		};
+	}, [notification.id, duration, onDismiss]);
+
+	const getIcon = () => {
+		switch (notification.type) {
+			case 'success':
+				return (
+					<svg
+						className="w-5 h-5 text-green-400"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+				);
+			case 'info':
+				return (
+					<svg
+						className="w-5 h-5 text-blue-400"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				);
+			case 'warning':
+				return (
+					<svg
+						className="w-5 h-5 text-yellow-400"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.667-2.308-1.667-3.08 0L3.34 19c-.77 1.333.192 3 1.732 3z"
+						/>
+					</svg>
+				);
+			case 'error':
+				return (
+					<svg
+						className="w-5 h-5 text-red-400"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				);
+		}
+	};
+
+	const bgColor = {
+		success: 'bg-green-900/90',
+		info: 'bg-blue-900/90',
+		warning: 'bg-yellow-900/90',
+		error: 'bg-red-900/90'
+	}[notification.type];
+
+	const borderColor = {
+		success: 'border-green-600',
+		info: 'border-blue-600',
+		warning: 'border-yellow-600',
+		error: 'border-red-600'
+	}[notification.type];
+
+	const progressColor = {
+		success: 'bg-green-400',
+		info: 'bg-blue-400',
+		warning: 'bg-yellow-400',
+		error: 'bg-red-400'
+	}[notification.type];
+
+	return (
+		<div
+			className={`${bgColor} ${borderColor} border rounded-lg shadow-lg p-4 mb-2 transition-all duration-300 ${
+				isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'
+			} max-w-sm w-full relative overflow-hidden`}
+		>
+			<div className="flex items-start">
+				<div className="flex-shrink-0">{getIcon()}</div>
+				<div className="ml-3 flex-1">
+					<h3 className="text-sm font-medium text-white">
+						{notification.title}
+					</h3>
+					<p className="mt-1 text-sm text-gray-300">{notification.message}</p>
+				</div>
+				<button
+					onClick={() => onDismiss(notification.id)}
+					className="ml-4 flex-shrink-0 inline-flex text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+				>
+					<span className="sr-only">Close</span>
+					<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+						<path
+							fillRule="evenodd"
+							d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+							clipRule="evenodd"
+						/>
+					</svg>
+				</button>
+			</div>
+			{/* Progress bar */}
+			<div className="absolute bottom-0 left-0 w-full h-1 bg-gray-700">
+				<div
+					className={`h-full ${progressColor} transition-all duration-100 ease-linear`}
+					style={{ width: `${progress}%` }}
+				/>
+			</div>
+		</div>
+	);
+};