From 8ad9ccd6b731e7fa838f07bb0bb3b65e2743c335 Mon Sep 17 00:00:00 2001
From: Ralph Khreish <35776126+Crunchyman-ralph@users.noreply.github.com>
Date: Tue, 29 Jul 2025 19:55:38 +0300
Subject: [PATCH] chore: refactor and cleanup

- remove eslint
- refactor code into common design patterns where needed
- refactor taskMasterApi from 1.5k lines to smaller chunks and different files
- removed taskFileReader (not used anywhere)
- added support for tag selection (wip)
- added configuration page where a user can see his config.json more visually
---
 apps/extension/eslint.config.mjs              |   34 -
 apps/extension/package.json                   |    8 +-
 apps/extension/package.mjs                    |    2 +-
 apps/extension/src/components/ConfigView.tsx  |  291 +++
 .../TaskDetails/AIActionsSection.tsx          |  201 ++
 .../components/TaskDetails/DetailsSection.tsx |  178 ++
 .../components/TaskDetails/PriorityBadge.tsx  |   47 +
 .../TaskDetails/SubtasksSection.tsx           |  233 +++
 .../TaskDetails/TaskMetadataSidebar.tsx       |  288 +++
 .../components/TaskDetails/useTaskDetails.ts  |  133 ++
 .../components/TaskDetailsView.original.tsx   | 1304 +++++++++++++
 .../src/components/TaskDetailsView.tsx        | 1340 +------------
 .../src/components/ui/CollapsibleSection.tsx  |   61 +
 apps/extension/src/components/ui/badge.tsx    |    4 +-
 .../src/components/ui/breadcrumb.tsx          |    2 +-
 apps/extension/src/components/ui/button.tsx   |    4 +-
 apps/extension/src/components/ui/card.tsx     |    2 +-
 .../src/components/ui/dropdown-menu.tsx       |    2 +-
 apps/extension/src/components/ui/label.tsx    |    2 +-
 .../src/components/ui/scroll-area.tsx         |    6 +-
 .../extension/src/components/ui/separator.tsx |    2 +-
 .../components/ui/shadcn-io/kanban/index.tsx  |    2 +-
 apps/extension/src/components/ui/textarea.tsx |    2 +-
 apps/extension/src/extension.ts               | 1510 ++-------------
 apps/extension/src/services/config-service.ts |  141 ++
 apps/extension/src/services/error-handler.ts  |  167 ++
 .../src/services/notification-preferences.ts  |  129 ++
 .../extension/src/services/polling-service.ts |   92 +
 .../src/services/polling-strategies.ts        |   67 +
 .../extension/src/services/task-repository.ts |  138 ++
 .../extension/src/services/webview-manager.ts |  356 ++++
 apps/extension/src/utils/configManager.ts     |    2 +-
 apps/extension/src/utils/connectionManager.ts |   10 +-
 apps/extension/src/utils/errorHandler.ts      |   14 +-
 apps/extension/src/utils/event-emitter.ts     |   34 +
 apps/extension/src/utils/logger.ts            |   26 +-
 apps/extension/src/utils/mcpClient.ts         |    2 +-
 .../task-master-api/cache/cache-manager.ts    |  253 +++
 .../src/utils/task-master-api/index.ts        |  471 +++++
 .../src/utils/task-master-api/mcp-client.ts   |   98 +
 .../transformers/task-transformer.ts          |  477 +++++
 .../src/utils/task-master-api/types/index.ts  |  156 ++
 apps/extension/src/utils/taskFileReader.ts    |  215 ---
 apps/extension/src/utils/taskMasterApi.ts     | 1348 -------------
 apps/extension/src/webview/App.tsx            |  150 ++
 .../src/webview/components/ErrorBoundary.tsx  |  113 ++
 .../src/webview/components/PollingStatus.tsx  |   84 +
 .../src/webview/components/PriorityBadge.tsx  |   30 +
 .../src/webview/components/TagDropdown.tsx    |  141 ++
 .../src/webview/components/TaskCard.tsx       |   67 +
 .../src/webview/components/TaskEditModal.tsx  |  242 +++
 .../webview/components/TaskMasterKanban.tsx   |  363 ++++
 .../src/webview/components/ToastContainer.tsx |   31 +
 .../webview/components/ToastNotification.tsx  |  167 ++
 apps/extension/src/webview/constants/index.ts |   17 +
 .../src/webview/contexts/VSCodeContext.tsx    |   32 +
 .../src/webview/hooks/useVSCodeMessages.ts    |  259 +++
 .../src/webview/hooks/useWebviewHeight.ts     |   42 +
 apps/extension/src/webview/index.tsx          | 1712 +----------------
 .../src/webview/reducers/appReducer.ts        |  187 ++
 apps/extension/src/webview/types/index.ts     |  120 ++
 apps/extension/src/webview/utils/toast.ts     |   56 +
 biome.json                                    |    7 +-
 package-lock.json                             | 1522 +++------------
 package.json                                  |    4 +-
 65 files changed, 7969 insertions(+), 7231 deletions(-)
 delete mode 100644 apps/extension/eslint.config.mjs
 create mode 100644 apps/extension/src/components/ConfigView.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/AIActionsSection.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/DetailsSection.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/PriorityBadge.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/SubtasksSection.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx
 create mode 100644 apps/extension/src/components/TaskDetails/useTaskDetails.ts
 create mode 100644 apps/extension/src/components/TaskDetailsView.original.tsx
 create mode 100644 apps/extension/src/components/ui/CollapsibleSection.tsx
 create mode 100644 apps/extension/src/services/config-service.ts
 create mode 100644 apps/extension/src/services/error-handler.ts
 create mode 100644 apps/extension/src/services/notification-preferences.ts
 create mode 100644 apps/extension/src/services/polling-service.ts
 create mode 100644 apps/extension/src/services/polling-strategies.ts
 create mode 100644 apps/extension/src/services/task-repository.ts
 create mode 100644 apps/extension/src/services/webview-manager.ts
 create mode 100644 apps/extension/src/utils/event-emitter.ts
 create mode 100644 apps/extension/src/utils/task-master-api/cache/cache-manager.ts
 create mode 100644 apps/extension/src/utils/task-master-api/index.ts
 create mode 100644 apps/extension/src/utils/task-master-api/mcp-client.ts
 create mode 100644 apps/extension/src/utils/task-master-api/transformers/task-transformer.ts
 create mode 100644 apps/extension/src/utils/task-master-api/types/index.ts
 delete mode 100644 apps/extension/src/utils/taskFileReader.ts
 delete mode 100644 apps/extension/src/utils/taskMasterApi.ts
 create mode 100644 apps/extension/src/webview/App.tsx
 create mode 100644 apps/extension/src/webview/components/ErrorBoundary.tsx
 create mode 100644 apps/extension/src/webview/components/PollingStatus.tsx
 create mode 100644 apps/extension/src/webview/components/PriorityBadge.tsx
 create mode 100644 apps/extension/src/webview/components/TagDropdown.tsx
 create mode 100644 apps/extension/src/webview/components/TaskCard.tsx
 create mode 100644 apps/extension/src/webview/components/TaskEditModal.tsx
 create mode 100644 apps/extension/src/webview/components/TaskMasterKanban.tsx
 create mode 100644 apps/extension/src/webview/components/ToastContainer.tsx
 create mode 100644 apps/extension/src/webview/components/ToastNotification.tsx
 create mode 100644 apps/extension/src/webview/constants/index.ts
 create mode 100644 apps/extension/src/webview/contexts/VSCodeContext.tsx
 create mode 100644 apps/extension/src/webview/hooks/useVSCodeMessages.ts
 create mode 100644 apps/extension/src/webview/hooks/useWebviewHeight.ts
 create mode 100644 apps/extension/src/webview/reducers/appReducer.ts
 create mode 100644 apps/extension/src/webview/types/index.ts
 create mode 100644 apps/extension/src/webview/utils/toast.ts

diff --git a/apps/extension/eslint.config.mjs b/apps/extension/eslint.config.mjs
deleted file mode 100644
index d4c8915c..00000000
--- a/apps/extension/eslint.config.mjs
+++ /dev/null
@@ -1,34 +0,0 @@
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-
-export default [
-	{
-		files: ['**/*.ts']
-	},
-	{
-		plugins: {
-			'@typescript-eslint': typescriptEslint
-		},
-
-		languageOptions: {
-			parser: tsParser,
-			ecmaVersion: 2022,
-			sourceType: 'module'
-		},
-
-		rules: {
-			'@typescript-eslint/naming-convention': [
-				'warn',
-				{
-					selector: 'import',
-					format: ['camelCase', 'PascalCase']
-				}
-			],
-
-			curly: 'warn',
-			eqeqeq: 'warn',
-			'no-throw-literal': 'warn',
-			semi: 'warn'
-		}
-	}
-];
diff --git a/apps/extension/package.json b/apps/extension/package.json
index 14d6cf26..edfdc0ea 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -192,15 +192,14 @@
 		"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 -o ./dist/index.css --minify",
+		"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 -o ./dist/index.css --watch",
-		"lint": "eslint src --ext ts,tsx",
+		"watch:css": "npx @tailwindcss/cli -i ./src/webview/index.css -o ./dist/index.css --watch",
 		"test": "vscode-test",
 		"check-types": "tsc --noEmit"
 	},
@@ -221,8 +220,6 @@
 		"@types/react": "19.1.8",
 		"@types/react-dom": "19.1.6",
 		"@types/vscode": "^1.101.0",
-		"@typescript-eslint/eslint-plugin": "^8.31.1",
-		"@typescript-eslint/parser": "^8.31.1",
 		"@vscode/test-cli": "^0.0.11",
 		"@vscode/test-electron": "^2.5.2",
 		"@vscode/vsce": "^2.32.0",
@@ -231,7 +228,6 @@
 		"clsx": "^2.1.1",
 		"esbuild": "^0.25.3",
 		"esbuild-postcss": "^0.0.4",
-		"eslint": "^9.25.1",
 		"fs-extra": "^11.3.0",
 		"lucide-react": "^0.525.0",
 		"npm-run-all": "^4.1.5",
diff --git a/apps/extension/package.mjs b/apps/extension/package.mjs
index b2882747..2ffeab9b 100644
--- a/apps/extension/package.mjs
+++ b/apps/extension/package.mjs
@@ -1,7 +1,7 @@
 import { execSync } from 'child_process';
-import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
 
 // --- Configuration ---
 const __filename = fileURLToPath(import.meta.url);
diff --git a/apps/extension/src/components/ConfigView.tsx b/apps/extension/src/components/ConfigView.tsx
new file mode 100644
index 00000000..1b04b602
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/AIActionsSection.tsx b/apps/extension/src/components/TaskDetails/AIActionsSection.tsx
new file mode 100644
index 00000000..49bd03e5
--- /dev/null
+++ b/apps/extension/src/components/TaskDetails/AIActionsSection.tsx
@@ -0,0 +1,201 @@
+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 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 [isRegenerating, setIsRegenerating] = useState(false);
+	const [isAppending, setIsAppending] = useState(false);
+
+	const handleRegenerate = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setIsRegenerating(true);
+		try {
+			if (isSubtask && parentTask) {
+				await sendMessage({
+					type: 'updateSubtask',
+					data: {
+						taskId: `${parentTask.id}.${currentTask.id}`,
+						prompt: prompt,
+						options: { research: false }
+					}
+				});
+			} else {
+				await sendMessage({
+					type: 'updateTask',
+					data: {
+						taskId: currentTask.id,
+						updates: { description: prompt },
+						options: { append: false, research: false }
+					}
+				});
+			}
+
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to regenerate task:', error);
+		} finally {
+			setIsRegenerating(false);
+			setPrompt('');
+		}
+	};
+
+	const handleAppend = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setIsAppending(true);
+		try {
+			if (isSubtask && parentTask) {
+				await sendMessage({
+					type: 'updateSubtask',
+					data: {
+						taskId: `${parentTask.id}.${currentTask.id}`,
+						prompt: prompt,
+						options: { research: false }
+					}
+				});
+			} else {
+				await sendMessage({
+					type: 'updateTask',
+					data: {
+						taskId: currentTask.id,
+						updates: { description: prompt },
+						options: { append: true, research: false }
+					}
+				});
+			}
+
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to append to task:', error);
+		} finally {
+			setIsAppending(false);
+			setPrompt('');
+		}
+	};
+
+	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
+								description based on your prompt
+							</p>
+						</>
+					)}
+				</div>
+			</div>
+		</CollapsibleSection>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/DetailsSection.tsx b/apps/extension/src/components/TaskDetails/DetailsSection.tsx
new file mode 100644
index 00000000..bd6d9a6d
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/PriorityBadge.tsx b/apps/extension/src/components/TaskDetails/PriorityBadge.tsx
new file mode 100644
index 00000000..ae7e61e3
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/SubtasksSection.tsx b/apps/extension/src/components/TaskDetails/SubtasksSection.tsx
new file mode 100644
index 00000000..c3a664b5
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx b/apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx
new file mode 100644
index 00000000..93ee3779
--- /dev/null
+++ b/apps/extension/src/components/TaskDetails/TaskMetadataSidebar.tsx
@@ -0,0 +1,288 @@
+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) => {
+									const depTask = tasks.find((t) => t.id === 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>
+	);
+};
diff --git a/apps/extension/src/components/TaskDetails/useTaskDetails.ts b/apps/extension/src/components/TaskDetails/useTaskDetails.ts
new file mode 100644
index 00000000..71165ea9
--- /dev/null
+++ b/apps/extension/src/components/TaskDetails/useTaskDetails.ts
@@ -0,0 +1,133 @@
+import { useEffect, useState, useCallback } from 'react';
+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) => {
+	const [taskFileData, setTaskFileData] = useState<TaskFileData>({});
+	const [taskFileDataError, setTaskFileDataError] = useState<string | null>(
+		null
+	);
+	const [complexity, setComplexity] = useState<any>(null);
+	const [currentTask, setCurrentTask] = useState<TaskMasterTask | null>(null);
+	const [parentTask, setParentTask] = useState<TaskMasterTask | null>(null);
+
+	// Determine if this is a subtask
+	const isSubtask = taskId.includes('.');
+
+	// Parse task ID to determine if it's a subtask (e.g., "13.2")
+	const parseTaskId = (id: string) => {
+		const parts = id.split('.');
+		if (parts.length === 2) {
+			return {
+				isSubtask: true,
+				parentId: parts[0],
+				subtaskIndex: parseInt(parts[1]) - 1 // Convert to 0-based index
+			};
+		}
+		return {
+			isSubtask: false,
+			parentId: id,
+			subtaskIndex: -1
+		};
+	};
+
+	// Find the current task
+	useEffect(() => {
+		console.log('🔍 TaskDetailsView: Looking for task:', taskId);
+		console.log('🔍 TaskDetailsView: Available tasks:', tasks);
+
+		const { isSubtask: isSub, parentId, subtaskIndex } = parseTaskId(taskId);
+
+		if (isSub) {
+			const parent = tasks.find((t) => t.id === parentId);
+			if (parent && parent.subtasks && parent.subtasks[subtaskIndex]) {
+				const subtask = parent.subtasks[subtaskIndex];
+				console.log('✅ TaskDetailsView: Found subtask:', subtask);
+				setCurrentTask(subtask);
+				setParentTask(parent);
+				// Use subtask's own details and testStrategy
+				setTaskFileData({
+					details: subtask.details || '',
+					testStrategy: subtask.testStrategy || ''
+				});
+			} else {
+				console.error('❌ TaskDetailsView: Subtask not found');
+				setCurrentTask(null);
+				setParentTask(null);
+			}
+		} else {
+			const task = tasks.find((t) => t.id === taskId);
+			if (task) {
+				console.log('✅ TaskDetailsView: Found task:', task);
+				setCurrentTask(task);
+				setParentTask(null);
+				// Use task's own details and testStrategy
+				setTaskFileData({
+					details: task.details || '',
+					testStrategy: task.testStrategy || ''
+				});
+			} else {
+				console.error('❌ TaskDetailsView: Task not found');
+				setCurrentTask(null);
+				setParentTask(null);
+			}
+		}
+	}, [taskId, tasks]);
+
+	// Fetch complexity score
+	const fetchComplexity = useCallback(async () => {
+		if (!currentTask) return;
+
+		// First check if the task already has a complexity score
+		if (currentTask.complexityScore !== undefined) {
+			setComplexity({ score: currentTask.complexityScore });
+			return;
+		}
+
+		try {
+			const result = await sendMessage({
+				type: 'getComplexity',
+				data: { taskId: currentTask.id }
+			});
+			if (result) {
+				setComplexity(result);
+			}
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to fetch complexity:', error);
+		}
+	}, [currentTask, sendMessage]);
+
+	useEffect(() => {
+		fetchComplexity();
+	}, [fetchComplexity]);
+
+	const refreshComplexityAfterAI = () => {
+		setTimeout(() => {
+			fetchComplexity();
+		}, 2000);
+	};
+
+	return {
+		currentTask,
+		parentTask,
+		isSubtask,
+		taskFileData,
+		taskFileDataError,
+		complexity,
+		refreshComplexityAfterAI
+	};
+};
diff --git a/apps/extension/src/components/TaskDetailsView.original.tsx b/apps/extension/src/components/TaskDetailsView.original.tsx
new file mode 100644
index 00000000..bf84ce19
--- /dev/null
+++ b/apps/extension/src/components/TaskDetailsView.original.tsx
@@ -0,0 +1,1304 @@
+import { Badge } from '@/components/ui/badge';
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbSeparator
+} from '@/components/ui/breadcrumb';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger
+} from '@/components/ui/collapsible';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import {
+	ChevronDown,
+	ChevronRight,
+	Loader2,
+	Plus,
+	PlusCircle,
+	Wand2
+} from 'lucide-react';
+import type React from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { VSCodeContext } from '../webview/contexts/VSCodeContext';
+import type { TaskMasterTask } from '../webview/types';
+
+interface TaskDetailsViewProps {
+	taskId: string;
+	onNavigateBack: () => void;
+	onNavigateToTask: (taskId: string) => void;
+}
+
+// Markdown renderer component to handle code blocks
+const MarkdownRenderer: React.FC<{ content: string; className?: string }> = ({
+	content,
+	className = ''
+}) => {
+	// Parse content to separate code blocks from regular text
+	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) {
+					// End of code block
+					if (currentBlock.length > 0) {
+						parts.push({
+							type: 'code',
+							content: currentBlock.join('\n'),
+							language: codeLanguage
+						});
+						currentBlock = [];
+					}
+					inCodeBlock = false;
+					codeLanguage = '';
+				} else {
+					// Start of code block
+					if (currentBlock.length > 0) {
+						parts.push({
+							type: 'text',
+							content: currentBlock.join('\n')
+						});
+						currentBlock = [];
+					}
+					inCodeBlock = true;
+					codeLanguage = line.substring(3).trim(); // Get language after ```
+				}
+			} else {
+				currentBlock.push(line);
+			}
+		}
+
+		// Handle remaining content
+		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-code-snippet-background text-code-snippet-text font-[family-name:var(--font-editor-font)] text-[length:var(--font-editor-size)] p-3 rounded-md border border-widget-border my-2 overflow-x-auto"
+						>
+							{part.content}
+						</pre>
+					);
+				} else {
+					// Handle inline code (single backticks) in text blocks
+					const textWithInlineCode = part.content
+						.split(/(`[^`]+`)/g)
+						.map((segment, segIndex) => {
+							if (segment.startsWith('`') && segment.endsWith('`')) {
+								const codeContent = segment.slice(1, -1);
+								return (
+									<code
+										key={segIndex}
+										className="bg-code-snippet-background text-code-snippet-text font-[family-name:var(--font-editor-font)] text-[length:var(--font-editor-size)] px-1 py-0.5 rounded border border-widget-border"
+									>
+										{codeContent}
+									</code>
+								);
+							}
+							return segment;
+						});
+
+					return (
+						<div
+							key={index}
+							className="whitespace-pre-wrap text-sm text-vscode-foreground/80 my-1"
+						>
+							{textWithInlineCode}
+						</div>
+					);
+				}
+			})}
+		</div>
+	);
+};
+
+// Custom Priority Badge Component with theme-adaptive styling
+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 justify-center px-2 py-0.5 rounded text-xs font-medium border min-w-[50px]"
+			style={colors}
+			title={priority}
+		>
+			{priority}
+		</span>
+	);
+};
+
+// Custom Status Badge Component with theme-adaptive styling
+const StatusBadge: React.FC<{ status: TaskMasterTask['status'] }> = ({
+	status
+}) => {
+	const getStatusColors = (status: string) => {
+		// Use colors that work well in both light and dark themes
+		switch (status) {
+			case 'pending':
+				return {
+					backgroundColor: 'rgba(156, 163, 175, 0.2)', // gray-400 with opacity
+					color: 'var(--vscode-foreground)',
+					borderColor: 'rgba(156, 163, 175, 0.4)'
+				};
+			case 'in-progress':
+				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 'review':
+				return {
+					backgroundColor: 'rgba(59, 130, 246, 0.2)', // blue-500 with opacity
+					color: '#2563eb', // blue-600 - works in both themes
+					borderColor: 'rgba(59, 130, 246, 0.4)'
+				};
+			case 'done':
+				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)'
+				};
+			case 'deferred':
+				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)'
+				};
+			default:
+				return {
+					backgroundColor: 'rgba(156, 163, 175, 0.2)',
+					color: 'var(--vscode-foreground)',
+					borderColor: 'rgba(156, 163, 175, 0.4)'
+				};
+		}
+	};
+
+	const colors = getStatusColors(status);
+
+	return (
+		<span
+			className="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium border min-w-[60px]"
+			style={colors}
+			title={status}
+		>
+			{status === 'pending' ? 'todo' : status}
+		</span>
+	);
+};
+
+// Define the TaskFileData interface here since we're no longer importing it
+interface TaskFileData {
+	details?: string;
+	testStrategy?: string;
+}
+
+interface CombinedTaskData {
+	details?: string;
+	testStrategy?: string;
+	complexityScore?: number; // Only from MCP API
+}
+
+export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
+	taskId,
+	onNavigateBack,
+	onNavigateToTask
+}) => {
+	const context = useContext(VSCodeContext);
+	if (!context) {
+		throw new Error('TaskDetailsView must be used within VSCodeContext');
+	}
+
+	const { state, sendMessage } = context;
+	const { tasks } = state;
+
+	const [currentTask, setCurrentTask] = useState<TaskMasterTask | null>(null);
+	const [isSubtask, setIsSubtask] = useState(false);
+	const [parentTask, setParentTask] = useState<TaskMasterTask | null>(null);
+
+	// Collapsible section states
+	const [isAiActionsExpanded, setIsAiActionsExpanded] = useState(true);
+	const [isImplementationExpanded, setIsImplementationExpanded] =
+		useState(false);
+	const [isTestStrategyExpanded, setIsTestStrategyExpanded] = useState(false);
+	const [isSubtasksExpanded, setIsSubtasksExpanded] = useState(true);
+
+	// AI Actions states
+	const [prompt, setPrompt] = useState('');
+	const [isRegenerating, setIsRegenerating] = useState(false);
+	const [isAppending, setIsAppending] = useState(false);
+
+	// Add subtask states
+	const [isAddingSubtask, setIsAddingSubtask] = useState(false);
+	const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
+	const [newSubtaskDescription, setNewSubtaskDescription] = useState('');
+	const [isSubmittingSubtask, setIsSubmittingSubtask] = useState(false);
+
+	// Task file data states (for implementation details, test strategy, and complexity score)
+	const [taskFileData, setTaskFileData] = useState<CombinedTaskData>({
+		details: undefined,
+		testStrategy: undefined,
+		complexityScore: undefined
+	});
+	// Loading state removed as data comes directly from tasks
+	const [taskFileDataError] = useState<string | null>(null);
+
+	// Get complexity score from main task data immediately (no flash)
+	const currentComplexityScore = currentTask?.complexityScore;
+
+	// State for complexity data from MCP (only used for updates)
+	const [mcpComplexityScore, setMcpComplexityScore] = useState<
+		number | undefined
+	>(undefined);
+	const [isLoadingComplexity, setIsLoadingComplexity] = useState(false);
+
+	// Use MCP complexity if available, otherwise use main task data
+	const displayComplexityScore =
+		mcpComplexityScore !== undefined
+			? mcpComplexityScore
+			: currentComplexityScore;
+
+	// Fetch complexity from MCP when needed
+	const fetchComplexityFromMCP = useCallback(
+		async (force = false) => {
+			if (!currentTask || (!force && currentComplexityScore !== undefined)) {
+				return; // Don't fetch if we already have a score unless forced
+			}
+
+			setIsLoadingComplexity(true);
+			try {
+				const complexityResult = await sendMessage({
+					type: 'mcpRequest',
+					tool: 'complexity_report',
+					params: {}
+				});
+
+				if (complexityResult?.data?.report?.complexityAnalysis) {
+					const taskComplexity =
+						complexityResult.data.report.complexityAnalysis.find(
+							(analysis: any) => analysis.taskId === currentTask.id
+						);
+
+					if (taskComplexity?.complexityScore !== undefined) {
+						setMcpComplexityScore(taskComplexity.complexityScore);
+					}
+				}
+			} catch (error) {
+				console.error('Failed to fetch complexity from MCP:', error);
+			} finally {
+				setIsLoadingComplexity(false);
+			}
+		},
+		[currentTask, currentComplexityScore, sendMessage]
+	);
+
+	// Refresh complexity after AI operations or when task changes
+	useEffect(() => {
+		if (currentTask) {
+			// Reset MCP complexity when task changes
+			setMcpComplexityScore(undefined);
+
+			// Fetch from MCP if no complexity score in main data
+			if (currentComplexityScore === undefined) {
+				fetchComplexityFromMCP();
+			}
+		}
+	}, [currentTask?.id, currentComplexityScore, fetchComplexityFromMCP]);
+
+	// Refresh complexity after AI operations
+	const refreshComplexityAfterAI = useCallback(() => {
+		// Force refresh complexity after AI operations
+		setTimeout(() => {
+			fetchComplexityFromMCP(true);
+		}, 2000); // Wait for AI operation to complete
+	}, [fetchComplexityFromMCP]);
+
+	// Handle running complexity analysis for a task
+	const handleRunComplexityAnalysis = useCallback(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); // Wait for analysis to complete
+		} catch (error) {
+			console.error('Failed to run complexity analysis:', error);
+		} finally {
+			setIsLoadingComplexity(false);
+		}
+	}, [currentTask, sendMessage, fetchComplexityFromMCP]);
+
+	// Parse task ID to determine if it's a subtask (e.g., "13.2")
+	const parseTaskId = (id: string) => {
+		const parts = id.split('.');
+		if (parts.length === 2) {
+			return {
+				isSubtask: true,
+				parentId: parts[0],
+				subtaskIndex: parseInt(parts[1]) - 1 // Convert to 0-based index
+			};
+		}
+		return {
+			isSubtask: false,
+			parentId: id,
+			subtaskIndex: -1
+		};
+	};
+
+	// Note: Task file data is now loaded directly from currentTask
+	// The details, testStrategy, and complexityScore are already available in the task object
+
+	// Find task or subtask by ID
+	useEffect(() => {
+		const {
+			isSubtask: isSubtaskId,
+			parentId,
+			subtaskIndex
+		} = parseTaskId(taskId);
+		setIsSubtask(isSubtaskId);
+
+		if (isSubtaskId) {
+			// Find parent task
+			const parent = tasks.find((task) => task.id === parentId);
+			setParentTask(parent || null);
+
+			// Find subtask
+			if (
+				parent &&
+				parent.subtasks &&
+				subtaskIndex >= 0 &&
+				subtaskIndex < parent.subtasks.length
+			) {
+				const subtask = parent.subtasks[subtaskIndex];
+				setCurrentTask(subtask);
+				// Set task file data from the subtask itself
+				setTaskFileData({
+					details: subtask.details || '',
+					testStrategy: subtask.testStrategy || '',
+					complexityScore: subtask.complexityScore
+				});
+			} else {
+				setCurrentTask(null);
+			}
+		} else {
+			// Find main task
+			const task = tasks.find((task) => task.id === parentId);
+			setCurrentTask(task || null);
+			setParentTask(null);
+			// Set task file data from the task itself
+			if (task) {
+				setTaskFileData({
+					details: task.details || '',
+					testStrategy: task.testStrategy || '',
+					complexityScore: task.complexityScore
+				});
+			}
+		}
+	}, [taskId, tasks]);
+
+	// Enhanced refresh logic for task file data when tasks are updated from polling
+	useEffect(() => {
+		if (currentTask) {
+			// Update task file data from currentTask whenever it changes
+			setTaskFileData({
+				details: currentTask.details || '',
+				testStrategy: currentTask.testStrategy || '',
+				complexityScore: currentTask.complexityScore
+			});
+		}
+	}, [currentTask, tasks, taskId]); // More comprehensive dependencies
+
+	// Remove periodic refresh since we're using task data directly
+	// The data will update when tasks update through the context
+
+	// Handle AI Actions
+	const handleRegenerate = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setIsRegenerating(true);
+		try {
+			if (isSubtask && parentTask) {
+				await sendMessage({
+					type: 'updateSubtask',
+					data: {
+						taskId: `${parentTask.id}.${currentTask.id}`,
+						prompt: prompt,
+						options: { research: false }
+					}
+				});
+			} else {
+				await sendMessage({
+					type: 'updateTask',
+					data: {
+						taskId: currentTask.id,
+						updates: { description: prompt },
+						options: { append: false, research: false }
+					}
+				});
+			}
+
+			// Refresh both task file data and complexity after AI operation
+			// Data will be refreshed automatically when tasks update
+
+			// Refresh complexity after AI operation
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to regenerate task:', error);
+		} finally {
+			setIsRegenerating(false);
+			setPrompt('');
+		}
+	};
+
+	const handleAppend = async () => {
+		if (!currentTask || !prompt.trim()) {
+			return;
+		}
+
+		setIsAppending(true);
+		try {
+			if (isSubtask && parentTask) {
+				await sendMessage({
+					type: 'updateSubtask',
+					data: {
+						taskId: `${parentTask.id}.${currentTask.id}`,
+						prompt: prompt,
+						options: { research: false }
+					}
+				});
+			} else {
+				await sendMessage({
+					type: 'updateTask',
+					data: {
+						taskId: currentTask.id,
+						updates: { description: prompt },
+						options: { append: true, research: false }
+					}
+				});
+			}
+
+			// Refresh both task file data and complexity after AI operation
+			// Data will be refreshed automatically when tasks update
+
+			// Refresh complexity after AI operation
+			refreshComplexityAfterAI();
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to append to task:', error);
+		} finally {
+			setIsAppending(false);
+			setPrompt('');
+		}
+	};
+
+	// Handle adding a new subtask
+	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);
+
+			// Data will be refreshed automatically when tasks update
+		} catch (error) {
+			console.error('❌ TaskDetailsView: Failed to add subtask:', error);
+		} finally {
+			setIsSubmittingSubtask(false);
+		}
+	};
+
+	const handleCancelAddSubtask = () => {
+		setIsAddingSubtask(false);
+		setNewSubtaskTitle('');
+		setNewSubtaskDescription('');
+	};
+
+	// Handle dependency navigation
+	const handleDependencyClick = (depId: string) => {
+		onNavigateToTask(depId);
+	};
+
+	// Handle status change
+	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);
+		}
+	};
+
+	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">
+			{/* Main content area with two-column layout */}
+			<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 */}
+					<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>
+
+					{/* Task title */}
+					<h1 className="text-2xl font-bold tracking-tight text-vscode-foreground">
+						{currentTask.title}
+					</h1>
+
+					{/* Description (non-editable) */}
+					<div className="mb-8">
+						<p className="text-vscode-foreground/80 leading-relaxed">
+							{currentTask.description || 'No description available.'}
+						</p>
+					</div>
+
+					{/* AI Actions */}
+					<div className="mb-8">
+						<div className="flex items-center gap-2 mb-4">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="p-0 h-auto text-vscode-foreground/80 hover:text-vscode-foreground"
+								onClick={() => setIsAiActionsExpanded(!isAiActionsExpanded)}
+							>
+								{isAiActionsExpanded ? (
+									<ChevronDown className="w-4 h-4 mr-1" />
+								) : (
+									<ChevronRight className="w-4 h-4 mr-1" />
+								)}
+								<Wand2 className="w-4 h-4 mr-1" />
+								AI Actions
+							</Button>
+						</div>
+
+						{isAiActionsExpanded && (
+							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
+								<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">
+										{/* Show regenerate button only for main tasks, not subtasks */}
+										{!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 description based on your prompt
+												</p>
+											</>
+										)}
+									</div>
+								</div>
+							</div>
+						)}
+					</div>
+
+					{/* Implementation Details */}
+					<div className="mb-8">
+						<div className="flex items-center gap-2 mb-4">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
+								onClick={() =>
+									setIsImplementationExpanded(!isImplementationExpanded)
+								}
+							>
+								{isImplementationExpanded ? (
+									<ChevronDown className="w-4 h-4 mr-1" />
+								) : (
+									<ChevronRight className="w-4 h-4 mr-1" />
+								)}
+								Implementation Details
+							</Button>
+						</div>
+
+						{isImplementationExpanded && (
+							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
+								<div className="implementation-content">
+									{taskFileDataError ? (
+										<div className="text-sm text-red-400 py-2">
+											Error loading details: {taskFileDataError}
+										</div>
+									) : taskFileData.details !== undefined &&
+										taskFileData.details !== '' ? (
+										<MarkdownRenderer content={taskFileData.details} />
+									) : (
+										<div className="text-sm text-vscode-foreground/50 py-2">
+											No implementation details available
+										</div>
+									)}
+								</div>
+							</div>
+						)}
+					</div>
+
+					{console.log(taskFileData)}
+
+					{/* Test Strategy */}
+					<div className="mb-8">
+						<div className="flex items-center gap-2 mb-4">
+							<Button
+								variant="ghost"
+								size="sm"
+								className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
+								onClick={() =>
+									setIsTestStrategyExpanded(!isTestStrategyExpanded)
+								}
+							>
+								{isTestStrategyExpanded ? (
+									<ChevronDown className="w-4 h-4 mr-1" />
+								) : (
+									<ChevronRight className="w-4 h-4 mr-1" />
+								)}
+								Test Strategy
+							</Button>
+						</div>
+
+						{isTestStrategyExpanded && (
+							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
+								<div className="test-strategy-content">
+									{taskFileDataError ? (
+										<div className="text-sm text-red-400 py-2">
+											Error loading strategy: {taskFileDataError}
+										</div>
+									) : taskFileData.testStrategy !== undefined &&
+										taskFileData.testStrategy !== '' ? (
+										<MarkdownRenderer content={taskFileData.testStrategy} />
+									) : (
+										<div className="text-sm text-vscode-foreground/50 py-2">
+											No test strategy available
+										</div>
+									)}
+								</div>
+							</div>
+						)}
+					</div>
+
+					{/* Subtasks section */}
+					{((currentTask.subtasks && currentTask.subtasks.length > 0) ||
+						!isSubtask) && (
+						<div className="mb-8">
+							<div className="flex items-center gap-2 mb-4">
+								<Button
+									variant="ghost"
+									size="sm"
+									className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
+									onClick={() => setIsSubtasksExpanded(!isSubtasksExpanded)}
+								>
+									{isSubtasksExpanded ? (
+										<ChevronDown className="w-4 h-4 mr-1" />
+									) : (
+										<ChevronRight className="w-4 h-4 mr-1" />
+									)}
+									Sub-issues
+								</Button>
+								{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>
+								)}
+								{/* Only show add button for main tasks, not subtasks */}
+								{!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>
+								)}
+							</div>
+
+							{isSubtasksExpanded && (
+								<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...
+															</>
+														) : (
+															<>
+																<PlusCircle className="w-4 h-4 mr-2" />
+																Add Subtask
+															</>
+														)}
+													</Button>
+
+													<Button
+														onClick={handleCancelAddSubtask}
+														variant="outline"
+														disabled={isSubmittingSubtask}
+														className="bg-secondary text-secondary-foreground hover:bg-secondary/90 border-widget-border"
+													>
+														Cancel
+													</Button>
+												</div>
+											</div>
+										</div>
+									)}
+
+									{currentTask.subtasks?.map((subtask, index) => {
+										const subtaskId = `${currentTask.id}.${index + 1}`;
+										const getStatusDotColor = (status: string) => {
+											switch (status) {
+												case 'pending':
+													return '#9ca3af'; // gray-400
+												case 'in-progress':
+													return '#f59e0b'; // amber-500
+												case 'review':
+													return '#3b82f6'; // blue-500
+												case 'done':
+													return '#22c55e'; // green-500
+												case 'deferred':
+													return '#ef4444'; // red-500
+												default:
+													return '#9ca3af';
+											}
+										};
+										const getSubtaskStatusColors = (status: string) => {
+											switch (status) {
+												case 'pending':
+													return {
+														backgroundColor: 'rgba(156, 163, 175, 0.2)',
+														color: 'var(--vscode-foreground)',
+														borderColor: 'rgba(156, 163, 175, 0.4)'
+													};
+												case 'in-progress':
+													return {
+														backgroundColor: 'rgba(245, 158, 11, 0.2)',
+														color: '#d97706',
+														borderColor: 'rgba(245, 158, 11, 0.4)'
+													};
+												case 'review':
+													return {
+														backgroundColor: 'rgba(59, 130, 246, 0.2)',
+														color: '#2563eb',
+														borderColor: 'rgba(59, 130, 246, 0.4)'
+													};
+												case 'done':
+													return {
+														backgroundColor: 'rgba(34, 197, 94, 0.2)',
+														color: '#16a34a',
+														borderColor: 'rgba(34, 197, 94, 0.4)'
+													};
+												case 'deferred':
+													return {
+														backgroundColor: 'rgba(239, 68, 68, 0.2)',
+														color: '#dc2626',
+														borderColor: 'rgba(239, 68, 68, 0.4)'
+													};
+												default:
+													return {
+														backgroundColor: 'rgba(156, 163, 175, 0.2)',
+														color: 'var(--vscode-foreground)',
+														borderColor: 'rgba(156, 163, 175, 0.4)'
+													};
+											}
+										};
+
+										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="w-2 h-2 bg-white rounded-full" />
+												</div>
+												<span className="flex-1 text-vscode-foreground">
+													{subtask.title}
+												</span>
+												<Badge
+													variant="secondary"
+													className="border"
+													style={getSubtaskStatusColors(subtask.status)}
+												>
+													{subtask.status === 'pending'
+														? 'todo'
+														: subtask.status}
+												</Badge>
+											</div>
+										);
+									})}
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				{/* Right column - Properties sidebar (1/3 width) */}
+				<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) =>
+											handleStatusChange(
+												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) => {
+												const depTask = tasks.find((t) => t.id === 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={() => handleDependencyClick(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>
+			</div>
+		</div>
+	);
+};
+
+export default TaskDetailsView;
diff --git a/apps/extension/src/components/TaskDetailsView.tsx b/apps/extension/src/components/TaskDetailsView.tsx
index dc091620..c17a5b71 100644
--- a/apps/extension/src/components/TaskDetailsView.tsx
+++ b/apps/extension/src/components/TaskDetailsView.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { VSCodeContext, TaskMasterTask } from '../webview/index';
+import type React from 'react';
+import { useContext } from 'react';
+import { Button } from '@/components/ui/button';
 import {
 	Breadcrumb,
 	BreadcrumbItem,
@@ -7,25 +8,13 @@ import {
 	BreadcrumbList,
 	BreadcrumbSeparator
 } from '@/components/ui/breadcrumb';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { Button } from '@/components/ui/button';
-import {
-	Collapsible,
-	CollapsibleContent,
-	CollapsibleTrigger
-} from '@/components/ui/collapsible';
-import {
-	ChevronRight,
-	ChevronDown,
-	Plus,
-	Wand2,
-	PlusCircle,
-	Loader2
-} from 'lucide-react';
+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 type { TaskMasterTask } from '../webview/types';
 
 interface TaskDetailsViewProps {
 	taskId: string;
@@ -33,228 +22,6 @@ interface TaskDetailsViewProps {
 	onNavigateToTask: (taskId: string) => void;
 }
 
-// Markdown renderer component to handle code blocks
-const MarkdownRenderer: React.FC<{ content: string; className?: string }> = ({
-	content,
-	className = ''
-}) => {
-	// Parse content to separate code blocks from regular text
-	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) {
-					// End of code block
-					if (currentBlock.length > 0) {
-						parts.push({
-							type: 'code',
-							content: currentBlock.join('\n'),
-							language: codeLanguage
-						});
-						currentBlock = [];
-					}
-					inCodeBlock = false;
-					codeLanguage = '';
-				} else {
-					// Start of code block
-					if (currentBlock.length > 0) {
-						parts.push({
-							type: 'text',
-							content: currentBlock.join('\n')
-						});
-						currentBlock = [];
-					}
-					inCodeBlock = true;
-					codeLanguage = line.substring(3).trim(); // Get language after ```
-				}
-			} else {
-				currentBlock.push(line);
-			}
-		}
-
-		// Handle remaining content
-		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-code-snippet-background text-code-snippet-text font-[family-name:var(--font-editor-font)] text-[length:var(--font-editor-size)] p-3 rounded-md border border-widget-border my-2 overflow-x-auto"
-						>
-							{part.content}
-						</pre>
-					);
-				} else {
-					// Handle inline code (single backticks) in text blocks
-					const textWithInlineCode = part.content
-						.split(/(`[^`]+`)/g)
-						.map((segment, segIndex) => {
-							if (segment.startsWith('`') && segment.endsWith('`')) {
-								const codeContent = segment.slice(1, -1);
-								return (
-									<code
-										key={segIndex}
-										className="bg-code-snippet-background text-code-snippet-text font-[family-name:var(--font-editor-font)] text-[length:var(--font-editor-size)] px-1 py-0.5 rounded border border-widget-border"
-									>
-										{codeContent}
-									</code>
-								);
-							}
-							return segment;
-						});
-
-					return (
-						<div
-							key={index}
-							className="whitespace-pre-wrap text-sm text-vscode-foreground/80 my-1"
-						>
-							{textWithInlineCode}
-						</div>
-					);
-				}
-			})}
-		</div>
-	);
-};
-
-// Custom Priority Badge Component with theme-adaptive styling
-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 justify-center px-2 py-0.5 rounded text-xs font-medium border min-w-[50px]"
-			style={colors}
-			title={priority}
-		>
-			{priority}
-		</span>
-	);
-};
-
-// Custom Status Badge Component with theme-adaptive styling
-const StatusBadge: React.FC<{ status: TaskMasterTask['status'] }> = ({
-	status
-}) => {
-	const getStatusColors = (status: string) => {
-		// Use colors that work well in both light and dark themes
-		switch (status) {
-			case 'pending':
-				return {
-					backgroundColor: 'rgba(156, 163, 175, 0.2)', // gray-400 with opacity
-					color: 'var(--vscode-foreground)',
-					borderColor: 'rgba(156, 163, 175, 0.4)'
-				};
-			case 'in-progress':
-				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 'review':
-				return {
-					backgroundColor: 'rgba(59, 130, 246, 0.2)', // blue-500 with opacity
-					color: '#2563eb', // blue-600 - works in both themes
-					borderColor: 'rgba(59, 130, 246, 0.4)'
-				};
-			case 'done':
-				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)'
-				};
-			case 'deferred':
-				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)'
-				};
-			default:
-				return {
-					backgroundColor: 'rgba(156, 163, 175, 0.2)',
-					color: 'var(--vscode-foreground)',
-					borderColor: 'rgba(156, 163, 175, 0.4)'
-				};
-		}
-	};
-
-	const colors = getStatusColors(status);
-
-	return (
-		<span
-			className="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-medium border min-w-[60px]"
-			style={colors}
-			title={status}
-		>
-			{status === 'pending' ? 'todo' : status}
-		</span>
-	);
-};
-
-// Define the TaskFileData interface here since we're no longer importing it
-interface TaskFileData {
-	details?: string;
-	testStrategy?: string;
-}
-
-interface CombinedTaskData {
-	details?: string;
-	testStrategy?: string;
-	complexityScore?: number; // Only from MCP API
-}
-
 export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 	taskId,
 	onNavigateBack,
@@ -262,430 +29,24 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 }) => {
 	const context = useContext(VSCodeContext);
 	if (!context) {
-		throw new Error('TaskDetailsView must be used within VSCodeContext');
+		throw new Error('TaskDetailsView must be used within VSCodeProvider');
 	}
 
 	const { state, sendMessage } = context;
 	const { tasks } = state;
 
-	const [currentTask, setCurrentTask] = useState<TaskMasterTask | null>(null);
-	const [isSubtask, setIsSubtask] = useState(false);
-	const [parentTask, setParentTask] = useState<TaskMasterTask | null>(null);
+	const {
+		currentTask,
+		parentTask,
+		isSubtask,
+		taskFileData,
+		taskFileDataError,
+		complexity,
+		refreshComplexityAfterAI
+	} = useTaskDetails({ taskId, sendMessage, tasks });
 
-	// Collapsible section states
-	const [isAiActionsExpanded, setIsAiActionsExpanded] = useState(true);
-	const [isImplementationExpanded, setIsImplementationExpanded] =
-		useState(false);
-	const [isTestStrategyExpanded, setIsTestStrategyExpanded] = useState(false);
-	const [isSubtasksExpanded, setIsSubtasksExpanded] = useState(true);
-
-	// AI Actions states
-	const [prompt, setPrompt] = useState('');
-	const [isRegenerating, setIsRegenerating] = useState(false);
-	const [isAppending, setIsAppending] = useState(false);
-
-	// Add subtask states
-	const [isAddingSubtask, setIsAddingSubtask] = useState(false);
-	const [newSubtaskTitle, setNewSubtaskTitle] = useState('');
-	const [newSubtaskDescription, setNewSubtaskDescription] = useState('');
-	const [isSubmittingSubtask, setIsSubmittingSubtask] = useState(false);
-
-	// Task file data states (for implementation details, test strategy, and complexity score)
-	const [taskFileData, setTaskFileData] = useState<CombinedTaskData>({
-		details: undefined,
-		testStrategy: undefined,
-		complexityScore: undefined
-	});
-	const [isLoadingTaskFileData, setIsLoadingTaskFileData] = useState(false);
-	const [taskFileDataError, setTaskFileDataError] = useState<string | null>(
-		null
-	);
-
-	// Get complexity score from main task data immediately (no flash)
-	const currentComplexityScore = currentTask?.complexityScore;
-
-	// State for complexity data from MCP (only used for updates)
-	const [mcpComplexityScore, setMcpComplexityScore] = useState<
-		number | undefined
-	>(undefined);
-	const [isLoadingComplexity, setIsLoadingComplexity] = useState(false);
-
-	// Use MCP complexity if available, otherwise use main task data
-	const displayComplexityScore =
-		mcpComplexityScore !== undefined
-			? mcpComplexityScore
-			: currentComplexityScore;
-
-	// Fetch complexity from MCP when needed
-	const fetchComplexityFromMCP = useCallback(
-		async (force = false) => {
-			if (!currentTask || (!force && currentComplexityScore !== undefined)) {
-				return; // Don't fetch if we already have a score unless forced
-			}
-
-			setIsLoadingComplexity(true);
-			try {
-				const complexityResult = await sendMessage({
-					type: 'mcpRequest',
-					tool: 'complexity_report',
-					params: {}
-				});
-
-				if (complexityResult?.data?.report?.complexityAnalysis) {
-					const taskComplexity =
-						complexityResult.data.report.complexityAnalysis.find(
-							(analysis: any) => analysis.taskId === currentTask.id
-						);
-
-					if (taskComplexity?.complexityScore !== undefined) {
-						setMcpComplexityScore(taskComplexity.complexityScore);
-					}
-				}
-			} catch (error) {
-				console.error('Failed to fetch complexity from MCP:', error);
-			} finally {
-				setIsLoadingComplexity(false);
-			}
-		},
-		[currentTask, currentComplexityScore, sendMessage]
-	);
-
-	// Refresh complexity after AI operations or when task changes
-	useEffect(() => {
-		if (currentTask) {
-			// Reset MCP complexity when task changes
-			setMcpComplexityScore(undefined);
-
-			// Fetch from MCP if no complexity score in main data
-			if (currentComplexityScore === undefined) {
-				fetchComplexityFromMCP();
-			}
-		}
-	}, [currentTask?.id, currentComplexityScore, fetchComplexityFromMCP]);
-
-	// Refresh complexity after AI operations
-	const refreshComplexityAfterAI = useCallback(() => {
-		// Force refresh complexity after AI operations
-		setTimeout(() => {
-			fetchComplexityFromMCP(true);
-		}, 2000); // Wait for AI operation to complete
-	}, [fetchComplexityFromMCP]);
-
-	// Handle running complexity analysis for a task
-	const handleRunComplexityAnalysis = useCallback(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); // Wait for analysis to complete
-		} catch (error) {
-			console.error('Failed to run complexity analysis:', error);
-		} finally {
-			setIsLoadingComplexity(false);
-		}
-	}, [currentTask, sendMessage, fetchComplexityFromMCP]);
-
-	// Parse task ID to determine if it's a subtask (e.g., "13.2")
-	const parseTaskId = (id: string) => {
-		const parts = id.split('.');
-		if (parts.length === 2) {
-			return {
-				isSubtask: true,
-				parentId: parts[0],
-				subtaskIndex: parseInt(parts[1]) - 1 // Convert to 0-based index
-			};
-		}
-		return {
-			isSubtask: false,
-			parentId: id,
-			subtaskIndex: -1
-		};
-	};
-
-	// Function to fetch task file data (implementation details and test strategy only)
-	const fetchTaskFileData = async () => {
-		if (!currentTask?.id) {
-			return;
-		}
-
-		setIsLoadingTaskFileData(true);
-		setTaskFileDataError(null);
-
-		try {
-			// For subtasks, construct the full dotted ID (e.g., "1.2")
-			// For main tasks, use the task ID as-is
-			const fileTaskId =
-				isSubtask && parentTask
-					? `${parentTask.id}.${currentTask.id}`
-					: currentTask.id;
-
-			console.log('📄 Fetching task file data for task:', fileTaskId);
-
-			// Get implementation details and test strategy from file
-			const fileData = await sendMessage({
-				type: 'readTaskFileData',
-				data: {
-					taskId: fileTaskId,
-					tag: 'master' // TODO: Make this configurable
-				}
-			});
-
-			console.log('📄 Task file data response:', fileData);
-
-			// Combine file data with complexity score from task data (already loaded)
-			const combinedData = {
-				details: fileData.details,
-				testStrategy: fileData.testStrategy,
-				complexityScore: currentTask.complexityScore // Use complexity score from already-loaded task data
-			};
-
-			console.log('📊 Combined task data:', combinedData);
-			setTaskFileData(combinedData);
-		} catch (error) {
-			console.error('❌ Error fetching task file data:', error);
-			setTaskFileDataError(
-				error instanceof Error ? error.message : 'Failed to load task data'
-			);
-		} finally {
-			setIsLoadingTaskFileData(false);
-		}
-	};
-
-	// Find task or subtask by ID
-	useEffect(() => {
-		const {
-			isSubtask: isSubtaskId,
-			parentId,
-			subtaskIndex
-		} = parseTaskId(taskId);
-		setIsSubtask(isSubtaskId);
-
-		if (isSubtaskId) {
-			// Find parent task
-			const parent = tasks.find((task) => task.id === parentId);
-			setParentTask(parent || null);
-
-			// Find subtask
-			if (
-				parent &&
-				parent.subtasks &&
-				subtaskIndex >= 0 &&
-				subtaskIndex < parent.subtasks.length
-			) {
-				const subtask = parent.subtasks[subtaskIndex];
-				setCurrentTask(subtask);
-				// Fetch file data for subtask
-				fetchTaskFileData();
-			} else {
-				setCurrentTask(null);
-			}
-		} else {
-			// Find main task
-			const task = tasks.find((task) => task.id === parentId);
-			setCurrentTask(task || null);
-			setParentTask(null);
-			// Fetch file data for main task
-			if (task) {
-				fetchTaskFileData();
-			}
-		}
-	}, [taskId, tasks]);
-
-	// Enhanced refresh logic for task file data when tasks are updated from polling
-	useEffect(() => {
-		if (currentTask) {
-			// Create a comprehensive hash of task data to detect any changes
-			const taskHash = JSON.stringify({
-				id: currentTask.id,
-				title: currentTask.title,
-				description: currentTask.description,
-				status: currentTask.status,
-				priority: currentTask.priority,
-				dependencies: currentTask.dependencies,
-				subtasksCount: currentTask.subtasks?.length || 0,
-				subtasksStatus: currentTask.subtasks?.map((st) => st.status) || [],
-				lastUpdate: Date.now() // Include timestamp to ensure periodic refresh
-			});
-
-			// Small delay to ensure the tasks.json file has been updated
-			const timeoutId = setTimeout(() => {
-				console.log(
-					'🔄 TaskDetailsView: Refreshing task file data due to task changes'
-				);
-				fetchTaskFileData();
-			}, 500);
-
-			return () => clearTimeout(timeoutId);
-		}
-	}, [currentTask, tasks, taskId]); // More comprehensive dependencies
-
-	// Periodic refresh to ensure we have the latest data
-	useEffect(() => {
-		if (currentTask) {
-			const intervalId = setInterval(() => {
-				console.log('🔄 TaskDetailsView: Periodic refresh of task file data');
-				fetchTaskFileData();
-			}, 30000); // Refresh every 30 seconds
-
-			return () => clearInterval(intervalId);
-		}
-	}, [currentTask, taskId]);
-
-	// Handle AI Actions
-	const handleRegenerate = async () => {
-		if (!currentTask || !prompt.trim()) {
-			return;
-		}
-
-		setIsRegenerating(true);
-		try {
-			if (isSubtask && parentTask) {
-				await sendMessage({
-					type: 'updateSubtask',
-					data: {
-						taskId: `${parentTask.id}.${currentTask.id}`,
-						prompt: prompt,
-						options: { research: false }
-					}
-				});
-			} else {
-				await sendMessage({
-					type: 'updateTask',
-					data: {
-						taskId: currentTask.id,
-						updates: { description: prompt },
-						options: { append: false, research: false }
-					}
-				});
-			}
-
-			// Refresh both task file data and complexity after AI operation
-			setTimeout(() => {
-				console.log('🔄 TaskDetailsView: Refreshing after AI regeneration');
-				fetchTaskFileData();
-			}, 2000); // Wait 2 seconds for AI to finish processing
-
-			// Refresh complexity after AI operation
-			refreshComplexityAfterAI();
-		} catch (error) {
-			console.error('❌ TaskDetailsView: Failed to regenerate task:', error);
-		} finally {
-			setIsRegenerating(false);
-			setPrompt('');
-		}
-	};
-
-	const handleAppend = async () => {
-		if (!currentTask || !prompt.trim()) {
-			return;
-		}
-
-		setIsAppending(true);
-		try {
-			if (isSubtask && parentTask) {
-				await sendMessage({
-					type: 'updateSubtask',
-					data: {
-						taskId: `${parentTask.id}.${currentTask.id}`,
-						prompt: prompt,
-						options: { research: false }
-					}
-				});
-			} else {
-				await sendMessage({
-					type: 'updateTask',
-					data: {
-						taskId: currentTask.id,
-						updates: { description: prompt },
-						options: { append: true, research: false }
-					}
-				});
-			}
-
-			// Refresh both task file data and complexity after AI operation
-			setTimeout(() => {
-				console.log('🔄 TaskDetailsView: Refreshing after AI append');
-				fetchTaskFileData();
-			}, 2000); // Wait 2 seconds for AI to finish processing
-
-			// Refresh complexity after AI operation
-			refreshComplexityAfterAI();
-		} catch (error) {
-			console.error('❌ TaskDetailsView: Failed to append to task:', error);
-		} finally {
-			setIsAppending(false);
-			setPrompt('');
-		}
-	};
-
-	// Handle adding a new subtask
-	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);
-
-			// Refresh task data to show the new subtask
-			setTimeout(() => {
-				console.log('🔄 TaskDetailsView: Refreshing after adding subtask');
-				fetchTaskFileData();
-			}, 1000);
-		} catch (error) {
-			console.error('❌ TaskDetailsView: Failed to add subtask:', error);
-		} finally {
-			setIsSubmittingSubtask(false);
-		}
-	};
-
-	const handleCancelAddSubtask = () => {
-		setIsAddingSubtask(false);
-		setNewSubtaskTitle('');
-		setNewSubtaskDescription('');
-	};
-
-	// Handle dependency navigation
-	const handleDependencyClick = (depId: string) => {
-		onNavigateToTask(depId);
-	};
-
-	// Handle status change
 	const handleStatusChange = async (newStatus: TaskMasterTask['status']) => {
-		if (!currentTask) {
-			return;
-		}
+		if (!currentTask) return;
 
 		try {
 			await sendMessage({
@@ -703,6 +64,10 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 		}
 	};
 
+	const handleDependencyClick = (depId: string) => {
+		onNavigateToTask(depId);
+	};
+
 	if (!currentTask) {
 		return (
 			<div className="flex items-center justify-center h-full">
@@ -720,7 +85,6 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 
 	return (
 		<div className="h-full flex flex-col">
-			{/* Main content area with two-column layout */}
 			<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">
@@ -762,7 +126,7 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 						{currentTask.title}
 					</h1>
 
-					{/* Description (non-editable) */}
+					{/* Description */}
 					<div className="mb-8">
 						<p className="text-vscode-foreground/80 leading-relaxed">
 							{currentTask.description || 'No description available.'}
@@ -770,624 +134,56 @@ export const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({
 					</div>
 
 					{/* AI Actions */}
-					<div className="mb-8">
-						<div className="flex items-center gap-2 mb-4">
-							<Button
-								variant="ghost"
-								size="sm"
-								className="p-0 h-auto text-vscode-foreground/80 hover:text-vscode-foreground"
-								onClick={() => setIsAiActionsExpanded(!isAiActionsExpanded)}
-							>
-								{isAiActionsExpanded ? (
-									<ChevronDown className="w-4 h-4 mr-1" />
-								) : (
-									<ChevronRight className="w-4 h-4 mr-1" />
-								)}
-								<Wand2 className="w-4 h-4 mr-1" />
-								AI Actions
-							</Button>
-						</div>
-
-						{isAiActionsExpanded && (
-							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
-								<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">
-										{/* Show regenerate button only for main tasks, not subtasks */}
-										{!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 description based on your prompt
-												</p>
-											</>
-										)}
-									</div>
-								</div>
-							</div>
-						)}
-					</div>
+					<AIActionsSection
+						currentTask={currentTask}
+						isSubtask={isSubtask}
+						parentTask={parentTask}
+						sendMessage={sendMessage}
+						refreshComplexityAfterAI={refreshComplexityAfterAI}
+					/>
 
 					{/* Implementation Details */}
-					<div className="mb-8">
-						<div className="flex items-center gap-2 mb-4">
-							<Button
-								variant="ghost"
-								size="sm"
-								className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
-								onClick={() =>
-									setIsImplementationExpanded(!isImplementationExpanded)
-								}
-							>
-								{isImplementationExpanded ? (
-									<ChevronDown className="w-4 h-4 mr-1" />
-								) : (
-									<ChevronRight className="w-4 h-4 mr-1" />
-								)}
-								Implementation Details
-							</Button>
-							{isLoadingTaskFileData && (
-								<Loader2 className="w-4 h-4 animate-spin text-vscode-foreground/50" />
-							)}
-						</div>
+					<DetailsSection
+						title="Implementation Details"
+						content={taskFileData.details}
+						error={taskFileDataError}
+						emptyMessage="No implementation details available"
+						defaultExpanded={false}
+					/>
 
-						{isImplementationExpanded && (
-							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
-								<div className="implementation-content">
-									{isLoadingTaskFileData ? (
-										<div className="flex items-center justify-center py-4">
-											<Loader2 className="w-5 h-5 animate-spin text-vscode-foreground/50" />
-											<span className="ml-2 text-sm text-vscode-foreground/70">
-												Loading details...
-											</span>
-										</div>
-									) : taskFileDataError ? (
-										<div className="text-sm text-red-400 py-2">
-											Error loading details: {taskFileDataError}
-										</div>
-									) : taskFileData.details ? (
-										<MarkdownRenderer content={taskFileData.details} />
-									) : (
-										<div className="text-sm text-vscode-foreground/50 py-2">
-											No implementation details available
-										</div>
-									)}
-								</div>
-							</div>
-						)}
-					</div>
+					{(() => {
+						console.log(taskFileData);
+						return null;
+					})()}
 
 					{/* Test Strategy */}
-					<div className="mb-8">
-						<div className="flex items-center gap-2 mb-4">
-							<Button
-								variant="ghost"
-								size="sm"
-								className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
-								onClick={() =>
-									setIsTestStrategyExpanded(!isTestStrategyExpanded)
-								}
-							>
-								{isTestStrategyExpanded ? (
-									<ChevronDown className="w-4 h-4 mr-1" />
-								) : (
-									<ChevronRight className="w-4 h-4 mr-1" />
-								)}
-								Test Strategy
-							</Button>
-							{isLoadingTaskFileData && (
-								<Loader2 className="w-4 h-4 animate-spin text-vscode-foreground/50" />
-							)}
-						</div>
+					<DetailsSection
+						title="Test Strategy"
+						content={taskFileData.testStrategy}
+						error={taskFileDataError}
+						emptyMessage="No test strategy available"
+						defaultExpanded={false}
+					/>
 
-						{isTestStrategyExpanded && (
-							<div className="bg-widget-background rounded-lg p-4 border border-widget-border">
-								<div className="test-strategy-content">
-									{isLoadingTaskFileData ? (
-										<div className="flex items-center justify-center py-4">
-											<Loader2 className="w-5 h-5 animate-spin text-vscode-foreground/50" />
-											<span className="ml-2 text-sm text-vscode-foreground/70">
-												Loading strategy...
-											</span>
-										</div>
-									) : taskFileDataError ? (
-										<div className="text-sm text-red-400 py-2">
-											Error loading strategy: {taskFileDataError}
-										</div>
-									) : taskFileData.testStrategy ? (
-										<MarkdownRenderer content={taskFileData.testStrategy} />
-									) : (
-										<div className="text-sm text-vscode-foreground/50 py-2">
-											No test strategy available
-										</div>
-									)}
-								</div>
-							</div>
-						)}
-					</div>
-
-					{/* Subtasks section */}
-					{((currentTask.subtasks && currentTask.subtasks.length > 0) ||
-						!isSubtask) && (
-						<div className="mb-8">
-							<div className="flex items-center gap-2 mb-4">
-								<Button
-									variant="ghost"
-									size="sm"
-									className="p-0 h-auto text-vscode-foreground/70 hover:text-vscode-foreground"
-									onClick={() => setIsSubtasksExpanded(!isSubtasksExpanded)}
-								>
-									{isSubtasksExpanded ? (
-										<ChevronDown className="w-4 h-4 mr-1" />
-									) : (
-										<ChevronRight className="w-4 h-4 mr-1" />
-									)}
-									Sub-issues
-								</Button>
-								{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>
-								)}
-								{/* Only show add button for main tasks, not subtasks */}
-								{!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>
-								)}
-							</div>
-
-							{isSubtasksExpanded && (
-								<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}
-														autoFocus
-													/>
-												</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...
-															</>
-														) : (
-															<>
-																<PlusCircle className="w-4 h-4 mr-2" />
-																Add Subtask
-															</>
-														)}
-													</Button>
-
-													<Button
-														onClick={handleCancelAddSubtask}
-														variant="outline"
-														disabled={isSubmittingSubtask}
-														className="bg-secondary text-secondary-foreground hover:bg-secondary/90 border-widget-border"
-													>
-														Cancel
-													</Button>
-												</div>
-											</div>
-										</div>
-									)}
-
-									{currentTask.subtasks?.map((subtask, index) => {
-										const subtaskId = `${currentTask.id}.${index + 1}`;
-										const getStatusDotColor = (status: string) => {
-											switch (status) {
-												case 'pending':
-													return '#9ca3af'; // gray-400
-												case 'in-progress':
-													return '#f59e0b'; // amber-500
-												case 'review':
-													return '#3b82f6'; // blue-500
-												case 'done':
-													return '#22c55e'; // green-500
-												case 'deferred':
-													return '#ef4444'; // red-500
-												default:
-													return '#9ca3af';
-											}
-										};
-										const getSubtaskStatusColors = (status: string) => {
-											switch (status) {
-												case 'pending':
-													return {
-														backgroundColor: 'rgba(156, 163, 175, 0.2)',
-														color: 'var(--vscode-foreground)',
-														borderColor: 'rgba(156, 163, 175, 0.4)'
-													};
-												case 'in-progress':
-													return {
-														backgroundColor: 'rgba(245, 158, 11, 0.2)',
-														color: '#d97706',
-														borderColor: 'rgba(245, 158, 11, 0.4)'
-													};
-												case 'review':
-													return {
-														backgroundColor: 'rgba(59, 130, 246, 0.2)',
-														color: '#2563eb',
-														borderColor: 'rgba(59, 130, 246, 0.4)'
-													};
-												case 'done':
-													return {
-														backgroundColor: 'rgba(34, 197, 94, 0.2)',
-														color: '#16a34a',
-														borderColor: 'rgba(34, 197, 94, 0.4)'
-													};
-												case 'deferred':
-													return {
-														backgroundColor: 'rgba(239, 68, 68, 0.2)',
-														color: '#dc2626',
-														borderColor: 'rgba(239, 68, 68, 0.4)'
-													};
-												default:
-													return {
-														backgroundColor: 'rgba(156, 163, 175, 0.2)',
-														color: 'var(--vscode-foreground)',
-														borderColor: 'rgba(156, 163, 175, 0.4)'
-													};
-											}
-										};
-
-										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="w-2 h-2 bg-white rounded-full" />
-												</div>
-												<span className="flex-1 text-vscode-foreground">
-													{subtask.title}
-												</span>
-												<Badge
-													variant="secondary"
-													className="border"
-													style={getSubtaskStatusColors(subtask.status)}
-												>
-													{subtask.status === 'pending'
-														? 'todo'
-														: subtask.status}
-												</Badge>
-											</div>
-										);
-									})}
-								</div>
-							)}
-						</div>
-					)}
+					{/* Subtasks */}
+					<SubtasksSection
+						currentTask={currentTask}
+						isSubtask={isSubtask}
+						sendMessage={sendMessage}
+						onNavigateToTask={onNavigateToTask}
+					/>
 				</div>
 
-				{/* Right column - Properties sidebar (1/3 width) */}
-				<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) =>
-											handleStatusChange(
-												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"></div>
-
-							{/* 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) => {
-													const depTask = tasks.find((t) => t.id === 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={() => handleDependencyClick(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>
-				</div>
+				{/* Right column - Metadata (1/3 width) */}
+				<TaskMetadataSidebar
+					currentTask={currentTask}
+					tasks={tasks}
+					complexity={complexity}
+					isSubtask={isSubtask}
+					sendMessage={sendMessage}
+					onStatusChange={handleStatusChange}
+					onDependencyClick={handleDependencyClick}
+				/>
 			</div>
 		</div>
 	);
diff --git a/apps/extension/src/components/ui/CollapsibleSection.tsx b/apps/extension/src/components/ui/CollapsibleSection.tsx
new file mode 100644
index 00000000..5342abd5
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/components/ui/badge.tsx b/apps/extension/src/components/ui/badge.tsx
index ed514277..bdbddae7 100644
--- a/apps/extension/src/components/ui/badge.tsx
+++ b/apps/extension/src/components/ui/badge.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/components/ui/breadcrumb.tsx b/apps/extension/src/components/ui/breadcrumb.tsx
index bf29c79e..54df0cdc 100644
--- a/apps/extension/src/components/ui/breadcrumb.tsx
+++ b/apps/extension/src/components/ui/breadcrumb.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/components/ui/button.tsx b/apps/extension/src/components/ui/button.tsx
index 1cbff004..4aa191b4 100644
--- a/apps/extension/src/components/ui/button.tsx
+++ b/apps/extension/src/components/ui/button.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 
diff --git a/apps/extension/src/components/ui/card.tsx b/apps/extension/src/components/ui/card.tsx
index 3f6b135a..47f17b98 100644
--- a/apps/extension/src/components/ui/card.tsx
+++ b/apps/extension/src/components/ui/card.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/components/ui/dropdown-menu.tsx b/apps/extension/src/components/ui/dropdown-menu.tsx
index 5ec3b852..7b5f9f00 100644
--- a/apps/extension/src/components/ui/dropdown-menu.tsx
+++ b/apps/extension/src/components/ui/dropdown-menu.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 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';
 
diff --git a/apps/extension/src/components/ui/label.tsx b/apps/extension/src/components/ui/label.tsx
index 0e5eca60..218f9836 100644
--- a/apps/extension/src/components/ui/label.tsx
+++ b/apps/extension/src/components/ui/label.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/components/ui/scroll-area.tsx b/apps/extension/src/components/ui/scroll-area.tsx
index 9bd8295c..854dca9b 100644
--- a/apps/extension/src/components/ui/scroll-area.tsx
+++ b/apps/extension/src/components/ui/scroll-area.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -11,12 +11,12 @@ function ScrollArea({
 	return (
 		<ScrollAreaPrimitive.Root
 			data-slot="scroll-area"
-			className={cn('relative', className)}
+			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"
+				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>
diff --git a/apps/extension/src/components/ui/separator.tsx b/apps/extension/src/components/ui/separator.tsx
index 87b57392..e1a0aed7 100644
--- a/apps/extension/src/components/ui/separator.tsx
+++ b/apps/extension/src/components/ui/separator.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/components/ui/shadcn-io/kanban/index.tsx b/apps/extension/src/components/ui/shadcn-io/kanban/index.tsx
index fb46deb6..3bbb55aa 100644
--- a/apps/extension/src/components/ui/shadcn-io/kanban/index.tsx
+++ b/apps/extension/src/components/ui/shadcn-io/kanban/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import React from 'react';
 import { Card } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import {
@@ -15,6 +14,7 @@ import {
 	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';
diff --git a/apps/extension/src/components/ui/textarea.tsx b/apps/extension/src/components/ui/textarea.tsx
index 234446f2..db9b61b5 100644
--- a/apps/extension/src/components/ui/textarea.tsx
+++ b/apps/extension/src/components/ui/textarea.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
diff --git a/apps/extension/src/extension.ts b/apps/extension/src/extension.ts
index be857d3d..49cb70d5 100644
--- a/apps/extension/src/extension.ts
+++ b/apps/extension/src/extension.ts
@@ -1,1418 +1,198 @@
-// The module 'vscode' contains the VS Code extensibility API
-// Import the module and reference it with the alias vscode in your code below
-import * as vscode from 'vscode';
-import * as path from 'path';
-import * as fs from 'fs';
+/**
+ * Task Master Extension - Simplified Architecture
+ * Only using patterns where they add real value
+ */
 
-// Restore full imports for MCP and utilities
+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 { ConfigManager } from './utils/configManager';
-import { TaskMasterApi } from './utils/taskMasterApi';
-import {
-	ErrorHandler,
-	getErrorHandler,
-	MCPConnectionError,
-	TaskLoadingError,
-	NetworkError,
-	UIRenderingError,
-	ErrorCategory,
-	ErrorSeverity,
-	createErrorContext
-} from './utils/errorHandler';
-import { getToastDuration } from './utils/notificationPreferences';
-import { parseTaskFileData } from './utils/taskFileReader';
-import { TaskMasterTask } from './utils/taskMasterApi';
-import { logger } from './utils/logger';
+import { TaskMasterApi } from './utils/task-master-api';
 
-// Global MCP client manager instance
-let mcpClient: MCPClientManager | null = null;
-let configManager: ConfigManager | null = null;
-let taskMasterApi: TaskMasterApi | null = null;
-let activeWebviewPanels: vscode.WebviewPanel[] = [];
+let logger: ExtensionLogger;
+let mcpClient: MCPClientManager;
+let api: TaskMasterApi;
+let repository: TaskRepository;
+let pollingService: PollingService;
+let webviewManager: WebviewManager;
+let events: EventEmitter;
+let configService: ConfigService;
 
-// Global error handler instance
-let errorHandler: ErrorHandler;
-
-// Polling state management
-interface PollingState {
-	timer?: NodeJS.Timeout;
-	isPolling: boolean;
-	interval: number;
-	lastTaskData?: TaskMasterTask[];
-	errorCount: number;
-	maxErrors: number;
-	// Adaptive frequency properties
-	baseInterval: number;
-	minInterval: number;
-	maxInterval: number;
-	lastUpdateTime?: number;
-	consecutiveNoChanges: number;
-	changeDetectionWindow: number[];
-	// Network interruption handling
-	reconnectAttempts: number;
-	maxReconnectAttempts: number;
-	reconnectBackoffMultiplier: number;
-	lastSuccessfulConnection?: number;
-	isOfflineMode: boolean;
-	cachedTaskData?: TaskMasterTask[];
-}
-
-let pollingState: PollingState = {
-	isPolling: false,
-	interval: 5000, // 5 seconds default
-	errorCount: 0,
-	maxErrors: 5,
-	// Adaptive frequency settings
-	baseInterval: 5000, // 5 seconds base
-	minInterval: 2000, // 2 seconds minimum
-	maxInterval: 60000, // 1 minute maximum
-	consecutiveNoChanges: 0,
-	changeDetectionWindow: [], // Track recent change activity
-	// Network interruption handling
-	reconnectAttempts: 0,
-	maxReconnectAttempts: 3,
-	reconnectBackoffMultiplier: 1.5,
-	lastSuccessfulConnection: undefined,
-	isOfflineMode: false,
-	cachedTaskData: []
-};
-
-// Initialize MCP components
-async function initializeMCPComponents(context: vscode.ExtensionContext) {
+export async function activate(context: vscode.ExtensionContext) {
 	try {
-		logger.log('🔄 Initializing MCP components...');
-		logger.log(
-			'🔍 DEBUGGING: initializeMCPComponents started at',
-			new Date().toISOString()
-		);
+		// Initialize logger (needed to prevent MCP stdio issues)
+		logger = ExtensionLogger.getInstance();
+		logger.log('🎉 Task Master Extension activating...');
 
-		// Initialize ConfigManager singleton
-		configManager = ConfigManager.getInstance();
-
-		// Get MCP configuration from VS Code settings
-		const mcpConfig = createMCPConfigFromSettings();
+		// Simple event emitter for webview communication
+		events = new EventEmitter();
 
 		// Initialize MCP client
-		logger.log(
-			'🔍 DEBUGGING: About to create MCPClientManager with config:',
-			mcpConfig
+		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 Task Master config.json
+		configService = new ConfigService(logger);
+
+		// Polling service with strategy pattern (makes sense for different polling behaviors)
+		const strategy = createPollingStrategy(
+			vscode.workspace.getConfiguration('taskmaster')
 		);
-		mcpClient = new MCPClientManager(mcpConfig);
+		pollingService = new PollingService(repository, strategy, logger);
 
-		// Initialize TaskMaster API first (even without connection)
-		taskMasterApi = new TaskMasterApi(mcpClient, {
-			timeout: 30000,
-			retryAttempts: 3,
-			cacheDuration: 5 * 60 * 1000, // 5 minutes
-			projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
+		// Webview manager (cleaner than global panel array) - create before connection
+		webviewManager = new WebviewManager(context, repository, events, logger);
+		webviewManager.setConfigService(configService);
+
+		// Initialize connection
+		await initializeConnection();
+
+		// Set MCP client and API after connection
+		webviewManager.setMCPClient(mcpClient);
+		webviewManager.setApi(api);
+
+		// Register commands
+		registerCommands(context);
+
+		// Handle polling lifecycle
+		events.on('webview:opened', () => {
+			if (webviewManager.getPanelCount() === 1) {
+				pollingService.start();
+			}
 		});
 
-		// Try to connect to MCP server
-		logger.log('🔗 Connecting to Task Master MCP server...');
-		try {
-			await mcpClient.connect();
-
-			// Test connection
-			const connectionTest = await taskMasterApi.testConnection();
-			if (connectionTest.success && connectionTest.data) {
-				logger.log('✅ Task Master MCP connection established');
-				vscode.window.showInformationMessage(
-					'Task Master connected successfully!'
-				);
-			} else {
-				throw new Error(connectionTest.error || 'Connection test failed');
+		events.on('webview:closed', () => {
+			if (webviewManager.getPanelCount() === 0) {
+				pollingService.stop();
 			}
-		} catch (connectionError) {
-			logger.error('❌ Task Master MCP connection failed:', connectionError);
-			logger.error('Connection error details:', {
-				message:
-					connectionError instanceof Error
-						? connectionError.message
-						: 'Unknown error',
-				stack:
-					connectionError instanceof Error ? connectionError.stack : undefined,
-				code: (connectionError as any)?.code,
-				errno: (connectionError as any)?.errno,
-				syscall: (connectionError as any)?.syscall
-			});
-			const errorMessage =
-				connectionError instanceof Error
-					? connectionError.message
-					: 'Unknown connection error';
+		});
 
-			if (errorMessage.includes('ENOENT') && errorMessage.includes('npx')) {
-				vscode.window
-					.showWarningMessage(
-						'Task Master: npx not found. Please ensure Node.js is installed and accessible to VS Code. ' +
-							'You may need to restart VS Code after installing Node.js.',
-						'Open Settings'
-					)
-					.then((action) => {
-						if (action === 'Open Settings') {
-							vscode.commands.executeCommand(
-								'workbench.action.openSettings',
-								'@ext:taskr taskmaster'
-							);
-						}
-					});
-			} else {
-				vscode.window.showWarningMessage(
-					`Task Master connection failed: ${errorMessage}`
-				);
-			}
+		// Forward repository updates to webviews
+		repository.on('tasks:updated', (tasks) => {
+			webviewManager.broadcast('tasksUpdated', { tasks, source: 'polling' });
+		});
 
-			// Initialize in offline mode
-			pollingState.isOfflineMode = true;
-			logger.log(
-				'📴 Starting in offline mode - some features will be unavailable'
-			);
-		}
+		logger.log('✅ Task Master Extension activated');
 	} catch (error) {
-		// Use enhanced network error handling for polling
-		handleNetworkError(error);
+		logger?.error('Failed to activate', error);
+		vscode.window.showErrorMessage(
+			`Failed to activate Task Master: ${error instanceof Error ? error.message : 'Unknown error'}`
+		);
 	}
 }
 
-// Polling functions
-async function startPolling(): Promise<void> {
-	if (pollingState.isPolling || !taskMasterApi) {
-		return;
-	}
-
-	logger.log('🔄 Starting task polling with interval:', pollingState.interval);
-	pollingState.isPolling = true;
-	pollingState.errorCount = 0;
-
-	// Initial fetch
-	await pollForUpdates();
-
-	// Set up interval
-	pollingState.timer = setInterval(pollForUpdates, pollingState.interval);
-}
-
-function stopPolling(): void {
-	if (!pollingState.isPolling) {
-		return;
-	}
-
-	logger.log('⏹️ Stopping task polling');
-	pollingState.isPolling = false;
-
-	if (pollingState.timer) {
-		clearInterval(pollingState.timer);
-		pollingState.timer = undefined;
-	}
-}
-
-async function pollForUpdates(): Promise<void> {
-	if (!taskMasterApi || activeWebviewPanels.length === 0) {
-		return;
-	}
-
+async function initializeConnection() {
 	try {
-		logger.log('📡 Polling for task updates...');
+		logger.log('🔗 Connecting to Task Master...');
 
-		const tasksResult = await taskMasterApi.getTasks({
-			withSubtasks: true,
-			projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
-		});
+		// Notify webviews that we're connecting
+		if (webviewManager) {
+			webviewManager.broadcast('connectionStatus', {
+				isConnected: false,
+				status: 'Connecting...'
+			});
+		}
 
-		if (tasksResult.success && tasksResult.data) {
-			const hasChanges = detectTaskChanges(tasksResult.data);
+		await mcpClient.connect();
 
-			if (hasChanges) {
-				logger.log('📋 Task changes detected, notifying webviews');
+		const testResult = await api.testConnection();
 
-				// Track change for adaptive frequency
-				pollingState.changeDetectionWindow.push(Date.now());
-				pollingState.consecutiveNoChanges = 0;
-				pollingState.lastUpdateTime = Date.now();
+		if (testResult.success) {
+			logger.log('✅ Connected to Task Master');
+			vscode.window.showInformationMessage('Task Master connected!');
 
-				// Update cached data
-				pollingState.lastTaskData = tasksResult.data;
-
-				// Notify all active webviews
-				activeWebviewPanels.forEach((panel) => {
-					panel.webview.postMessage({
-						type: 'tasksUpdated',
-						data: tasksResult.data,
-						source: 'polling'
-					});
+			// Notify webviews that we're connected
+			if (webviewManager) {
+				webviewManager.broadcast('connectionStatus', {
+					isConnected: true,
+					status: 'Connected'
 				});
-			} else {
-				logger.log('📋 No task changes detected');
-				pollingState.consecutiveNoChanges++;
-			}
-
-			// Adjust polling frequency based on activity
-			adjustPollingFrequency();
-
-			// Reset error count on success
-			pollingState.errorCount = 0;
-
-			// Track successful connection
-			pollingState.lastSuccessfulConnection = Date.now();
-			pollingState.reconnectAttempts = 0;
-
-			// If we were in offline mode, notify that we're back online
-			if (pollingState.isOfflineMode) {
-				pollingState.isOfflineMode = false;
-				notifyConnectionStatus('online', 'Connected');
-				logger.log('✅ Reconnected successfully from offline mode');
 			}
 		} else {
-			throw new Error(tasksResult.error || 'Failed to fetch tasks');
+			throw new Error(testResult.error || 'Connection test failed');
 		}
 	} catch (error) {
-		// Use enhanced network error handling for polling
-		handleNetworkError(error);
-	}
-}
+		logger.error('Connection failed', error);
 
-function detectTaskChanges(newTasks: any[]): boolean {
-	if (!pollingState.lastTaskData) {
-		// First time, always consider as changed
-		pollingState.lastTaskData = newTasks;
-		return true;
-	}
-
-	// Quick check: different array lengths
-	if (newTasks.length !== pollingState.lastTaskData.length) {
-		return true;
-	}
-
-	// Deep comparison of task data
-	try {
-		const newTasksStr = JSON.stringify(sortTasksForComparison(newTasks));
-		const oldTasksStr = JSON.stringify(
-			sortTasksForComparison(pollingState.lastTaskData)
-		);
-		return newTasksStr !== oldTasksStr;
-	} catch (error) {
-		logger.warn('⚠️ Error comparing tasks, assuming changed:', error);
-		return true;
-	}
-}
-
-function sortTasksForComparison(tasks: any[]): any[] {
-	// Sort tasks by ID for consistent comparison
-	return tasks
-		.map((task) => ({
-			...task,
-			dependencies: task.dependencies ? [...task.dependencies].sort() : [],
-			subtasks: task.subtasks
-				? task.subtasks
-						.map((st: any) => ({
-							...st,
-							dependencies: st.dependencies ? [...st.dependencies].sort() : []
-						}))
-						.sort((a: any, b: any) => a.id - b.id)
-				: []
-		}))
-		.sort((a, b) => String(a.id).localeCompare(String(b.id)));
-}
-
-// Adaptive polling frequency management
-function adjustPollingFrequency(): void {
-	const now = Date.now();
-	const windowSize = 5; // Track last 5 polling intervals
-
-	// Clean old entries from detection window (keep last 5 minutes)
-	const fiveMinutesAgo = now - 5 * 60 * 1000;
-	pollingState.changeDetectionWindow =
-		pollingState.changeDetectionWindow.filter(
-			(timestamp) => timestamp > fiveMinutesAgo
-		);
-
-	// Calculate change frequency in the recent window
-	const recentChanges = pollingState.changeDetectionWindow.length;
-	const windowDuration = Math.min(
-		5 * 60 * 1000,
-		now - (pollingState.changeDetectionWindow[0] || now)
-	);
-	const changesPerMinute =
-		windowDuration > 0 ? (recentChanges / windowDuration) * 60 * 1000 : 0;
-
-	let newInterval = pollingState.baseInterval;
-
-	if (changesPerMinute > 2) {
-		// High activity: poll more frequently
-		newInterval = Math.max(
-			pollingState.minInterval,
-			pollingState.baseInterval * 0.5
-		);
-		logger.log('📈 High activity detected, increasing polling frequency');
-	} else if (changesPerMinute > 0.5) {
-		// Moderate activity: use base interval
-		newInterval = pollingState.baseInterval;
-		logger.log('📊 Moderate activity, using base polling interval');
-	} else if (pollingState.consecutiveNoChanges > 3) {
-		// Low activity: reduce polling frequency with exponential backoff
-		const backoffMultiplier = Math.min(
-			4,
-			1.5 ** (pollingState.consecutiveNoChanges - 3)
-		);
-		newInterval = Math.min(
-			pollingState.maxInterval,
-			pollingState.baseInterval * backoffMultiplier
-		);
-		logger.log(
-			`📉 Low activity detected (${pollingState.consecutiveNoChanges} no-change cycles), reducing polling frequency`
-		);
-	}
-
-	// Only restart polling if interval changed significantly (>500ms difference)
-	if (
-		Math.abs(newInterval - pollingState.interval) > 500 &&
-		pollingState.isPolling
-	) {
-		logger.log(
-			`🔄 Adjusting polling interval from ${pollingState.interval}ms to ${newInterval}ms`
-		);
-		pollingState.interval = newInterval;
-
-		// Restart polling with new interval
-		if (pollingState.timer) {
-			clearInterval(pollingState.timer);
-			pollingState.timer = setInterval(pollForUpdates, pollingState.interval);
+		// Notify webviews that connection failed
+		if (webviewManager) {
+			webviewManager.broadcast('connectionStatus', {
+				isConnected: false,
+				status: 'Disconnected'
+			});
 		}
+
+		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(
+				'Task Master: 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 {
-		pollingState.interval = newInterval;
-	}
-}
-
-// Network interruption handling
-function handleNetworkError(error: any): void {
-	pollingState.errorCount++;
-	pollingState.reconnectAttempts++;
-
-	logger.error(
-		`❌ Network error (attempt ${pollingState.reconnectAttempts}/${pollingState.maxReconnectAttempts}):`,
-		error
-	);
-
-	// Check if we should enter offline mode
-	if (pollingState.reconnectAttempts >= pollingState.maxReconnectAttempts) {
-		enterOfflineMode();
-		return;
-	}
-
-	// Calculate exponential backoff delay
-	const baseDelay = pollingState.interval;
-	const backoffDelay =
-		baseDelay *
-		Math.pow(
-			pollingState.reconnectBackoffMultiplier,
-			pollingState.reconnectAttempts
+		vscode.window.showWarningMessage(
+			`Task Master connection failed: ${message}`
 		);
-	const maxBackoffDelay = pollingState.maxInterval;
-	const finalDelay = Math.min(backoffDelay, maxBackoffDelay);
-
-	logger.log(
-		`🔄 Retrying connection in ${finalDelay}ms (attempt ${pollingState.reconnectAttempts})`
-	);
-
-	// Update UI with connection status
-	notifyConnectionStatus(
-		'reconnecting',
-		`Reconnecting... (${pollingState.reconnectAttempts}/${pollingState.maxReconnectAttempts})`
-	);
-
-	// Retry with exponential backoff
-	if (pollingState.timer) {
-		clearInterval(pollingState.timer);
 	}
-
-	pollingState.timer = setTimeout(() => {
-		// Try to resume normal polling
-		pollingState.timer = setInterval(pollForUpdates, pollingState.interval);
-	}, finalDelay);
 }
 
-function enterOfflineMode(): void {
-	logger.warn('⚠️ Entering offline mode due to persistent connection failures');
-
-	pollingState.isOfflineMode = true;
-	stopPolling();
-
-	// Cache current task data for offline viewing
-	if (pollingState.lastTaskData) {
-		pollingState.cachedTaskData = [...pollingState.lastTaskData];
-	}
-
-	// Notify webviews about offline mode
-	notifyConnectionStatus('offline', 'Offline - using cached data');
-
-	activeWebviewPanels.forEach((panel) => {
-		panel.webview.postMessage({
-			type: 'networkOffline',
-			data: {
-				cachedTasks: pollingState.cachedTaskData,
-				lastSuccessfulConnection: pollingState.lastSuccessfulConnection,
-				reconnectAttempts: pollingState.reconnectAttempts
-			}
-		});
-	});
-}
-
-function attemptReconnection(): void {
-	if (!pollingState.isOfflineMode) {
-		return;
-	}
-
-	logger.log('🔄 Attempting to reconnect from offline mode...');
-
-	// Reset connection state
-	pollingState.isOfflineMode = false;
-	pollingState.reconnectAttempts = 0;
-	pollingState.errorCount = 0;
-
-	// Notify UI about reconnection attempt
-	notifyConnectionStatus('reconnecting', 'Attempting to reconnect...');
-
-	// Try to restart polling
-	startPolling().catch((error) => {
-		logger.error('Failed to reconnect:', error);
-		enterOfflineMode();
-	});
-}
-
-function notifyConnectionStatus(
-	status: 'online' | 'offline' | 'reconnecting',
-	message: string
-): void {
-	activeWebviewPanels.forEach((panel) => {
-		panel.webview.postMessage({
-			type: 'connectionStatusUpdate',
-			data: {
-				status,
-				message,
-				timestamp: Date.now(),
-				isOfflineMode: pollingState.isOfflineMode,
-				reconnectAttempts: pollingState.reconnectAttempts,
-				maxReconnectAttempts: pollingState.maxReconnectAttempts
-			}
-		});
-	});
-}
-
-// Error handling wrapper functions
-async function handleExtensionError(
-	error: Error | unknown,
-	operation: string,
-	context?: Record<string, any>
-): Promise<void> {
-	const errorContext = createErrorContext(error, operation, {
-		category: ErrorCategory.EXTENSION_HOST,
-		...context
-	});
-
-	logger.error(`Extension Error [${operation}]:`, error);
-	await errorHandler.handleError(
-		error instanceof Error ? error : new Error(String(error)),
-		context
-	);
-}
-
-async function handleMCPError(
-	error: Error | unknown,
-	operation: string,
-	context?: Record<string, any>
-): Promise<void> {
-	const mcpError = new MCPConnectionError(
-		error instanceof Error ? error.message : String(error),
-		'MCP_OPERATION_FAILED',
-		context
+function registerCommands(context: vscode.ExtensionContext) {
+	// Main command
+	context.subscriptions.push(
+		vscode.commands.registerCommand('taskr.showKanbanBoard', async () => {
+			await webviewManager.createOrShowPanel();
+		})
 	);
 
-	logger.error(`MCP Error [${operation}]:`, error);
-	await errorHandler.handleError(mcpError, context);
-}
-
-async function handleTaskLoadingError(
-	error: Error | unknown,
-	operation: string,
-	context?: Record<string, any>
-): Promise<void> {
-	const taskError = new TaskLoadingError(
-		error instanceof Error ? error.message : String(error),
-		'TASK_OPERATION_FAILED',
-		context
+	// Utility commands
+	context.subscriptions.push(
+		vscode.commands.registerCommand('taskr.refreshTasks', async () => {
+			await repository.refresh();
+			vscode.window.showInformationMessage('Tasks refreshed!');
+		})
 	);
 
-	logger.error(`Task Loading Error [${operation}]:`, error);
-	await errorHandler.handleError(taskError, context);
-}
-
-async function handleNetworkConnectionError(
-	error: Error | unknown,
-	operation: string,
-	context?: Record<string, any>
-): Promise<void> {
-	const networkError = new NetworkError(
-		error instanceof Error ? error.message : String(error),
-		'NETWORK_OPERATION_FAILED',
-		context
-	);
-
-	logger.error(`Network Error [${operation}]:`, error);
-	await errorHandler.handleError(networkError, context);
-}
-
-async function handleUIError(
-	error: Error | unknown,
-	operation: string,
-	context?: Record<string, any>
-): Promise<void> {
-	const uiError = new UIRenderingError(
-		error instanceof Error ? error.message : String(error),
-		'UI_OPERATION_FAILED',
-		context
-	);
-
-	logger.error(`UI Error [${operation}]:`, error);
-	await errorHandler.handleError(uiError, context);
-}
-
-// This method is called when your extension is activated
-// Your extension is activated the very first time the command is executed
-export function activate(context: vscode.ExtensionContext) {
-	logger.log('🎉 Task Master Kanban extension is now active!');
-	logger.log('🎉 Extension context:', context);
-	logger.log(
-		'🔍 DEBUGGING: Extension activation started at',
-		new Date().toISOString()
-	);
-
-	// Initialize error handler
-	errorHandler = getErrorHandler();
-
-	// Set up error event listener for webview notifications
-	errorHandler.onError((errorDetails) => {
-		// Notify webviews about errors for toast notifications
-		activeWebviewPanels.forEach((panel) => {
-			panel.webview.postMessage({
-				type: 'errorNotification',
-				data: {
-					category: errorDetails.category,
-					severity: errorDetails.severity,
-					message: errorDetails.message,
-					timestamp: errorDetails.timestamp.getTime(),
-					userAction: errorDetails.userAction,
-					duration: getToastDuration(errorDetails.severity)
-				}
-			});
-		});
-	});
-
-	// Initialize MCP components
-	initializeMCPComponents(context);
-
-	// Register command to show Kanban board with webview
-	const showKanbanCommand = vscode.commands.registerCommand(
-		'taskr.showKanbanBoard',
-		async () => {
-			logger.log('🎯 Show Kanban command executed!');
-
-			// Check if panel already exists
-			const existingPanel = activeWebviewPanels.find(
-				(panel) => panel.title === 'Task Master Kanban'
-			);
-			if (existingPanel) {
-				existingPanel.reveal(vscode.ViewColumn.One);
-				return;
-			}
-
-			// Create webview panel
-			const panel = vscode.window.createWebviewPanel(
-				'taskrKanban',
-				'Task Master Kanban',
-				vscode.ViewColumn.One,
-				{
-					enableScripts: true,
-					retainContextWhenHidden: true,
-					localResourceRoots: [
-						vscode.Uri.joinPath(context.extensionUri, 'dist')
-					]
-				}
-			);
-
-			// Add to active panels
-			activeWebviewPanels.push(panel);
-
-			// Start polling if this is the first panel
-			if (activeWebviewPanels.length === 1) {
-				await startPolling();
-			}
-
-			// Handle panel disposal
-			panel.onDidDispose(() => {
-				const index = activeWebviewPanels.findIndex((p) => p === panel);
-				if (index !== -1) {
-					activeWebviewPanels.splice(index, 1);
-				}
-
-				// Stop polling if no panels are active
-				if (activeWebviewPanels.length === 0) {
-					stopPolling();
-				}
-			});
-
-			// Set webview HTML content
-			panel.webview.html = getWebviewContent(
-				panel.webview,
-				context.extensionUri
-			);
-
-			// Handle messages from webview
-			panel.webview.onDidReceiveMessage(async (message) => {
-				logger.log('📨 Received message from webview:', message);
-
-				switch (message.type) {
-					case 'ready':
-						logger.log('🚀 Webview is ready!');
-						// Send initial configuration or data
-						panel.webview.postMessage({
-							type: 'init',
-							data: { status: 'Extension connected!' }
-						});
-						break;
-
-					case 'getTasks':
-						logger.log('📋 Getting tasks...');
-						try {
-							if (!taskMasterApi) {
-								throw new Error(
-									'Task Master API not initialized - extension may be starting up'
-								);
-							}
-
-							// Check if we're in offline mode
-							if (pollingState.isOfflineMode) {
-								throw new Error(
-									'Task Master is in offline mode - MCP server connection failed'
-								);
-							}
-
-							const tasksResult = await taskMasterApi.getTasks({
-								withSubtasks: true,
-								projectRoot: vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
-							});
-
-							if (tasksResult.success) {
-								panel.webview.postMessage({
-									type: 'tasksData',
-									requestId: message.requestId,
-									data: tasksResult.data
-								});
-								logger.log(
-									`✅ Retrieved ${tasksResult.data?.length || 0} tasks from Task Master`
-								);
-							} else {
-								throw new Error(tasksResult.error || 'Failed to get tasks');
-							}
-						} catch (error) {
-							logger.error('❌ Error getting tasks:', error);
-
-							// Send error to webview instead of falling back to sample data
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: message.requestId,
-								error:
-									error instanceof Error
-										? error.message
-										: 'Failed to get tasks',
-								errorType: 'connection'
-							});
-
-							// Enter offline mode if this is a connection error
-							if (!pollingState.isOfflineMode) {
-								handleNetworkError(error);
-							}
-						}
-						break;
-
-					case 'updateTaskStatus':
-						logger.log('🔄 Updating task status:', message.data);
-						try {
-							if (
-								taskMasterApi &&
-								message.data?.taskId &&
-								message.data?.newStatus
-							) {
-								const updateResult = await taskMasterApi.updateTaskStatus(
-									message.data.taskId,
-									message.data.newStatus,
-									{
-										projectRoot:
-											vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
-									}
-								);
-
-								if (updateResult.success) {
-									panel.webview.postMessage({
-										type: 'taskStatusUpdated',
-										requestId: message.requestId,
-										success: true,
-										data: {
-											taskId: message.data.taskId,
-											newStatus: message.data.newStatus
-										}
-									});
-									logger.log(
-										`✅ Updated task ${message.data.taskId} status to ${message.data.newStatus}`
-									);
-								} else {
-									throw new Error(
-										updateResult.error || 'Failed to update task status'
-									);
-								}
-							} else {
-								throw new Error(
-									'Invalid task update data or Task Master API not initialized'
-								);
-							}
-						} catch (error) {
-							logger.error('❌ Error updating task status:', error);
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: message.requestId,
-								error:
-									error instanceof Error
-										? error.message
-										: 'Failed to update task status'
-							});
-						}
-						break;
-
-					case 'updateTask':
-						logger.log('📝 Updating task content:', message.data);
-						try {
-							if (
-								taskMasterApi &&
-								message.data?.taskId &&
-								message.data?.updates
-							) {
-								const updateResult = await taskMasterApi.updateTask(
-									message.data.taskId,
-									message.data.updates,
-									{
-										projectRoot:
-											vscode.workspace.workspaceFolders?.[0]?.uri.fsPath,
-										append: message.data.options?.append || false,
-										research: message.data.options?.research || false
-									}
-								);
-
-								if (updateResult.success) {
-									panel.webview.postMessage({
-										type: 'taskUpdated',
-										requestId: message.requestId,
-										success: true,
-										data: {
-											taskId: message.data.taskId,
-											updates: message.data.updates
-										}
-									});
-									logger.log(`✅ Updated task ${message.data.taskId} content`);
-								} else {
-									throw new Error(
-										updateResult.error || 'Failed to update task'
-									);
-								}
-							} else {
-								throw new Error(
-									'Invalid task update data or Task Master API not initialized'
-								);
-							}
-						} catch (error) {
-							logger.error('❌ Error updating task:', error);
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: message.requestId,
-								error:
-									error instanceof Error
-										? error.message
-										: 'Failed to update task'
-							});
-						}
-						break;
-
-					case 'updateSubtask':
-						logger.log('📝 Updating subtask content:', message.data);
-						try {
-							if (
-								taskMasterApi &&
-								message.data?.taskId &&
-								message.data?.prompt
-							) {
-								const updateResult = await taskMasterApi.updateSubtask(
-									message.data.taskId,
-									message.data.prompt,
-									{
-										projectRoot:
-											vscode.workspace.workspaceFolders?.[0]?.uri.fsPath,
-										research: message.data.options?.research || false
-									}
-								);
-
-								if (updateResult.success) {
-									panel.webview.postMessage({
-										type: 'subtaskUpdated',
-										requestId: message.requestId,
-										success: true,
-										data: {
-											taskId: message.data.taskId,
-											prompt: message.data.prompt
-										}
-									});
-									logger.log(
-										`✅ Updated subtask ${message.data.taskId} content`
-									);
-								} else {
-									throw new Error(
-										updateResult.error || 'Failed to update subtask'
-									);
-								}
-							} else {
-								throw new Error(
-									'Invalid subtask update data or Task Master API not initialized'
-								);
-							}
-						} catch (error) {
-							logger.error('❌ Error updating subtask:', error);
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: message.requestId,
-								error:
-									error instanceof Error
-										? error.message
-										: 'Failed to update subtask'
-							});
-						}
-						break;
-
-					case 'addSubtask':
-						logger.log('➕ Adding new subtask:', message.data);
-						try {
-							if (
-								taskMasterApi &&
-								message.data?.parentTaskId &&
-								message.data?.subtaskData
-							) {
-								const addResult = await taskMasterApi.addSubtask(
-									message.data.parentTaskId,
-									message.data.subtaskData,
-									{
-										projectRoot:
-											vscode.workspace.workspaceFolders?.[0]?.uri.fsPath
-									}
-								);
-
-								if (addResult.success) {
-									panel.webview.postMessage({
-										type: 'subtaskAdded',
-										requestId: message.requestId,
-										success: true,
-										data: {
-											parentTaskId: message.data.parentTaskId,
-											subtaskData: message.data.subtaskData
-										}
-									});
-									logger.log(
-										`✅ Added subtask to task ${message.data.parentTaskId}`
-									);
-								} else {
-									throw new Error(addResult.error || 'Failed to add subtask');
-								}
-							} else {
-								throw new Error(
-									'Invalid subtask add data or Task Master API not initialized'
-								);
-							}
-						} catch (error) {
-							logger.error('❌ Error adding subtask:', error);
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: message.requestId,
-								error:
-									error instanceof Error
-										? error.message
-										: 'Failed to add subtask'
-							});
-						}
-						break;
-
-					case 'startPolling':
-						logger.log('🔄 Manual start polling requested');
-						await startPolling();
-						panel.webview.postMessage({
-							type: 'pollingStarted',
-							requestId: message.requestId,
-							success: true
-						});
-						break;
-
-					case 'stopPolling':
-						logger.log('⏹️ Manual stop polling requested');
-						stopPolling();
-						panel.webview.postMessage({
-							type: 'pollingStopped',
-							requestId: message.requestId,
-							success: true
-						});
-						break;
-
-					case 'getPollingStatus':
-						logger.log('📊 Polling status requested');
-						panel.webview.postMessage({
-							type: 'pollingStatus',
-							requestId: message.requestId,
-							data: {
-								isPolling: pollingState.isPolling,
-								interval: pollingState.interval,
-								errorCount: pollingState.errorCount,
-								maxErrors: pollingState.maxErrors
-							}
-						});
-						break;
-
-					case 'attemptReconnection':
-						logger.log('🔄 Manual reconnection requested');
-						if (pollingState.isOfflineMode) {
-							attemptReconnection();
-							panel.webview.postMessage({
-								type: 'reconnectionAttempted',
-								requestId: message.requestId,
-								success: true
-							});
-						} else {
-							panel.webview.postMessage({
-								type: 'reconnectionAttempted',
-								requestId: message.requestId,
-								success: false,
-								error: 'Not in offline mode'
-							});
-						}
-						break;
-
-					case 'getNetworkStatus':
-						logger.log('📊 Network status requested');
-						panel.webview.postMessage({
-							type: 'networkStatus',
-							requestId: message.requestId,
-							data: {
-								isOfflineMode: pollingState.isOfflineMode,
-								lastSuccessfulConnection: pollingState.lastSuccessfulConnection,
-								reconnectAttempts: pollingState.reconnectAttempts,
-								maxReconnectAttempts: pollingState.maxReconnectAttempts,
-								cachedTaskCount: pollingState.cachedTaskData?.length || 0
-							}
-						});
-						break;
-
-					case 'reactError':
-						logger.log('🔥 React error reported from webview:', message.data);
-						try {
-							await handleUIError(
-								new Error(message.data.message),
-								'React Component Error',
-								{
-									stack: message.data.stack,
-									componentStack: message.data.componentStack,
-									timestamp: message.data.timestamp
-								}
-							);
-						} catch (error) {
-							logger.error('Failed to handle React error:', error);
-						}
-						break;
-
-					case 'readTaskFileData':
-						logger.log('📄 Reading task file data:', message.data);
-						{
-							const { requestId } = message;
-							try {
-								const { taskId, tag: tagName = 'master' } = message.data;
-
-								// Get workspace folder
-								const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
-								if (!workspaceFolder) {
-									throw new Error('No workspace folder found');
-								}
-
-								// Build path to tasks.json
-								const tasksJsonPath = path.join(
-									workspaceFolder.uri.fsPath,
-									'.taskmaster',
-									'tasks',
-									'tasks.json'
-								);
-								logger.log('🔍 Looking for tasks.json at:', tasksJsonPath);
-
-								// Check if file exists
-								if (!fs.existsSync(tasksJsonPath)) {
-									// Try legacy location
-									const legacyPath = path.join(
-										workspaceFolder.uri.fsPath,
-										'tasks',
-										'tasks.json'
-									);
-									logger.log('🔍 Trying legacy path:', legacyPath);
-									if (!fs.existsSync(legacyPath)) {
-										throw new Error(
-											'tasks.json not found in .taskmaster/tasks/ or tasks/ directory'
-										);
-									}
-									// Use legacy path
-									const content = fs.readFileSync(legacyPath, 'utf8');
-									logger.log(
-										'📖 Read legacy tasks.json, content length:',
-										content.length
-									);
-									const taskData = parseTaskFileData(
-										content,
-										taskId,
-										tagName,
-										workspaceFolder.uri.fsPath
-									);
-									logger.log('✅ Parsed task data for legacy path:', taskData);
-									panel.webview.postMessage({
-										type: 'response',
-										requestId,
-										data: taskData
-									});
-									return;
-								}
-
-								// Read and parse tasks.json
-								const content = fs.readFileSync(tasksJsonPath, 'utf8');
-								logger.log(
-									'📖 Read tasks.json, content length:',
-									content.length
-								);
-								const taskData = parseTaskFileData(
-									content,
-									taskId,
-									tagName,
-									workspaceFolder.uri.fsPath
-								);
-								logger.log('✅ Parsed task data:', taskData);
-
-								panel.webview.postMessage({
-									type: 'response',
-									requestId,
-									data: taskData
-								});
-
-								logger.log(`✅ Retrieved task file data for task ${taskId}`);
-							} catch (error) {
-								logger.error('❌ Error reading task file data:', error);
-								panel.webview.postMessage({
-									type: 'error',
-									requestId,
-									error:
-										error instanceof Error
-											? error.message
-											: 'Failed to read task file data'
-								});
-							}
-						}
-						break;
-
-					case 'mcpRequest':
-						logger.log('📊 MCP Request:', message);
-						const { requestId: mcpRequestId, tool, parameters } = message;
-						try {
-							if (!taskMasterApi) {
-								throw new Error('Task Master API not initialized');
-							}
-
-							if (pollingState.isOfflineMode) {
-								throw new Error(
-									'Task Master is in offline mode - MCP server connection unavailable'
-								);
-							}
-
-							let result;
-
-							switch (tool) {
-								case 'complexity_report':
-									logger.log('📊 Calling complexity_report MCP tool');
-									try {
-										// Use the private callMCPTool method via type assertion to access it
-										const mcpResult = await (taskMasterApi as any).callMCPTool(
-											'complexity_report',
-											{
-												projectRoot:
-													vscode.workspace.workspaceFolders?.[0]?.uri.fsPath,
-												...parameters
-											}
-										);
-										result = { success: true, data: mcpResult };
-									} catch (mcpError) {
-										result = {
-											success: false,
-											error:
-												mcpError instanceof Error
-													? mcpError.message
-													: 'Failed to get complexity report'
-										};
-									}
-									break;
-
-								case 'analyze_project_complexity':
-									logger.log('🧮 Calling analyze_project_complexity MCP tool');
-									try {
-										// Use the private callMCPTool method via type assertion to access it
-										const mcpResult = await (taskMasterApi as any).callMCPTool(
-											'analyze_project_complexity',
-											{
-												projectRoot:
-													vscode.workspace.workspaceFolders?.[0]?.uri.fsPath,
-												...parameters
-											}
-										);
-										result = { success: true, data: mcpResult };
-									} catch (mcpError) {
-										result = {
-											success: false,
-											error:
-												mcpError instanceof Error
-													? mcpError.message
-													: 'Failed to analyze project complexity'
-										};
-									}
-									break;
-
-								default:
-									throw new Error(`Unsupported MCP tool: ${tool}`);
-							}
-
-							if (result.success) {
-								panel.webview.postMessage({
-									type: 'response',
-									requestId: mcpRequestId,
-									data: result.data
-								});
-								logger.log(`✅ MCP tool ${tool} executed successfully`);
-							} else {
-								throw new Error(
-									result.error || `Failed to execute MCP tool: ${tool}`
-								);
-							}
-						} catch (error) {
-							logger.error(`❌ Error executing MCP tool ${tool}:`, error);
-							panel.webview.postMessage({
-								type: 'error',
-								requestId: mcpRequestId,
-								error:
-									error instanceof Error
-										? error.message
-										: `Failed to execute MCP tool: ${tool}`
-							});
-						}
-						break;
-
-					default:
-						logger.log('❓ Unknown message type:', message.type);
-				}
-			});
-
-			vscode.window.showInformationMessage('Task Master Kanban Board opened!');
-		}
-	);
-
-	const checkConnectionCommand = vscode.commands.registerCommand(
-		'taskr.checkConnection',
-		async () => {
-			logger.log('🔗 Check connection command executed!');
-			vscode.window.showInformationMessage('Check connection command works!');
-		}
-	);
-
-	const reconnectCommand = vscode.commands.registerCommand(
-		'taskr.reconnect',
-		async () => {
-			logger.log('🔄 Reconnect command executed!');
-			vscode.window.showInformationMessage('Reconnect command works!');
-		}
-	);
-
-	const openSettingsCommand = vscode.commands.registerCommand(
-		'taskr.openSettings',
-		() => {
-			logger.log('⚙️ Open settings command executed!');
+	context.subscriptions.push(
+		vscode.commands.registerCommand('taskr.openSettings', () => {
 			vscode.commands.executeCommand(
 				'workbench.action.openSettings',
 				'@ext:taskr taskmaster'
 			);
-		}
+		})
 	);
-
-	context.subscriptions.push(
-		showKanbanCommand,
-		checkConnectionCommand,
-		reconnectCommand,
-		openSettingsCommand
-	);
-
-	logger.log('✅ All commands registered successfully!');
 }
 
-// Generate webview HTML content
-function getWebviewContent(
-	webview: vscode.Webview,
-	extensionUri: vscode.Uri
-): string {
-	// Get the local path to main script run in the webview
-	const scriptUri = webview.asWebviewUri(
-		vscode.Uri.joinPath(extensionUri, 'dist', 'index.js')
-	);
-	const styleUri = webview.asWebviewUri(
-		vscode.Uri.joinPath(extensionUri, 'dist', 'index.css')
-	);
-
-	// Use a nonce to only allow specific scripts to be run
-	const nonce = 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>Task Master Kanban</title>
-</head>
-<body>
-	<div id="root"></div>
-	<script nonce="${nonce}" src="${scriptUri}"></script>
-</body>
-</html>`;
-}
-
-function getNonce() {
-	let text = '';
-	const possible =
-		'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	for (let i = 0; i < 32; i++) {
-		text += possible.charAt(Math.floor(Math.random() * possible.length));
-	}
-	return text;
-}
-
-// Sample data for testing
-function getSampleTasks() {
-	return [
-		{
-			id: '1',
-			title: 'Set up project structure',
-			description: 'Create the basic VS Code extension structure',
-			status: 'done',
-			priority: 'high',
-			details:
-				'Initialize package.json, create src folder, set up TypeScript configuration',
-			dependencies: []
-		},
-		{
-			id: '2',
-			title: 'Implement MCP Client',
-			description: 'Create MCP client to communicate with task-master-ai',
-			status: 'done',
-			priority: 'high',
-			details:
-				'Use @modelcontextprotocol/sdk to create a client that can connect to task-master-ai server',
-			dependencies: ['1']
-		},
-		{
-			id: '3',
-			title: 'Create configuration system',
-			description: 'Build configuration management for the extension',
-			status: 'done',
-			priority: 'medium',
-			details:
-				'Create ConfigManager class to handle VS Code settings and configuration updates',
-			dependencies: ['1']
-		},
-		{
-			id: '4',
-			title: 'Create basic Webview panel with React',
-			description: 'Set up the webview infrastructure with React',
-			status: 'done',
-			priority: 'high',
-			details:
-				'Create webview panel, integrate React, set up bundling with esbuild',
-			dependencies: ['1', '2', '3']
-		},
-		{
-			id: '5',
-			title: 'Integrate shadcn/ui Kanban component',
-			description: 'Add the Kanban board UI using shadcn/ui components',
-			status: 'done',
-			priority: 'medium',
-			details:
-				'Install and customize shadcn/ui Kanban component for VS Code theming',
-			dependencies: ['4']
-		},
-		{
-			id: '6',
-			title: 'Implement get_tasks MCP tool integration',
-			description:
-				'Use the MCP client to call the get_tasks tool and retrieve task data',
-			status: 'in-progress',
-			priority: 'high',
-			details:
-				'Connect to task-master-ai server and fetch real task data instead of using sample data',
-			dependencies: ['2']
-		},
-		{
-			id: '7',
-			title: 'Add task status updates via MCP',
-			description: 'Implement drag-and-drop task status updates through MCP',
-			status: 'pending',
-			priority: 'high',
-			details:
-				'When tasks are moved between columns, update status via set_task_status MCP tool',
-			dependencies: ['6']
-		},
-		{
-			id: '8',
-			title: 'Add real-time task synchronization',
-			description: 'Keep the Kanban board in sync with task file changes',
-			status: 'pending',
-			priority: 'medium',
-			details:
-				'Implement file watching and real-time updates when tasks.json changes',
-			dependencies: ['6', '7']
-		}
-	];
-}
-
-// This method is called when your extension is deactivated
 export function deactivate() {
-	logger.log('👋 Task Master Kanban extension deactivated');
-
-	// Stop polling
-	stopPolling();
-
-	// Close all active webview panels
-	activeWebviewPanels.forEach((panel) => panel.dispose());
-	activeWebviewPanels = [];
-
-	// Clean up MCP components
-	if (taskMasterApi) {
-		taskMasterApi.destroy();
-		taskMasterApi = null;
-	}
-
-	if (mcpClient) {
-		mcpClient.disconnect();
-		mcpClient = null;
-	}
-
-	configManager = null;
+	logger?.log('👋 Task Master Extension deactivating...');
+	pollingService?.stop();
+	webviewManager?.dispose();
+	api?.destroy();
+	mcpClient?.disconnect();
 }
diff --git a/apps/extension/src/services/config-service.ts b/apps/extension/src/services/config-service.ts
new file mode 100644
index 00000000..e6feffed
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/apps/extension/src/services/error-handler.ts b/apps/extension/src/services/error-handler.ts
new file mode 100644
index 00000000..ebaa72ac
--- /dev/null
+++ b/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(`Task Master: ${context.message}`, ...actions)
+					.then((action) => {
+						if (action) {
+							this.handleUserAction(action, context);
+						}
+					});
+				break;
+
+			case ErrorSeverity.HIGH:
+				if (context.category === ErrorCategory.MCP_CONNECTION) {
+					vscode.window
+						.showWarningMessage(
+							`Task Master: ${context.message}`,
+							'Retry',
+							'Settings'
+						)
+						.then((action) => {
+							if (action === 'Retry') {
+								vscode.commands.executeCommand('taskr.reconnect');
+							} else if (action === 'Settings') {
+								vscode.commands.executeCommand('taskr.openSettings');
+							}
+						});
+				} else {
+					vscode.window.showWarningMessage(`Task Master: ${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(
+						`Task Master: ${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));
+		}
+	}
+}
diff --git a/apps/extension/src/services/notification-preferences.ts b/apps/extension/src/services/notification-preferences.ts
new file mode 100644
index 00000000..d700dcf1
--- /dev/null
+++ b/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
+		}
+	}
+}
diff --git a/apps/extension/src/services/polling-service.ts b/apps/extension/src/services/polling-service.ts
new file mode 100644
index 00000000..96945f6c
--- /dev/null
+++ b/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`);
+	}
+}
diff --git a/apps/extension/src/services/polling-strategies.ts b/apps/extension/src/services/polling-strategies.ts
new file mode 100644
index 00000000..f9d74b12
--- /dev/null
+++ b/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();
+	}
+}
diff --git a/apps/extension/src/services/task-repository.ts b/apps/extension/src/services/task-repository.ts
new file mode 100644
index 00000000..f7115bcc
--- /dev/null
+++ b/apps/extension/src/services/task-repository.ts
@@ -0,0 +1,138 @@
+/**
+ * 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(): Promise<Task[]> {
+		// Return from cache if valid
+		if (this.cache && Date.now() - this.cacheTimestamp < this.CACHE_DURATION) {
+			return this.cache;
+		}
+
+		try {
+			const result = await this.api.getTasks({ withSubtasks: true });
+
+			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;
+	}
+}
diff --git a/apps/extension/src/services/webview-manager.ts b/apps/extension/src/services/webview-manager.ts
new file mode 100644
index 00000000..d3d0bf0f
--- /dev/null
+++ b/apps/extension/src/services/webview-manager.ts
@@ -0,0 +1,356 @@
+/**
+ * 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 === 'Task Master Kanban'
+		);
+		if (existing) {
+			existing.reveal();
+			return;
+		}
+
+		// Create new panel
+		const panel = vscode.window.createWebviewPanel(
+			'taskrKanban',
+			'Task Master Kanban',
+			vscode.ViewColumn.One,
+			{
+				enableScripts: true,
+				retainContextWhenHidden: true,
+				localResourceRoots: [
+					vscode.Uri.joinPath(this.context.extensionUri, 'dist')
+				]
+			}
+		);
+
+		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('Task Master 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':
+					response = await this.repository.getAll();
+					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
+					await this.repository.updateContent(data.taskId, data.updates);
+					response = { success: true };
+					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 refresh tasks for the new tag
+							await this.repository.refresh();
+							const tasks = await this.repository.getAll();
+							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;
+
+				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>Task Master 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;
+	}
+}
diff --git a/apps/extension/src/utils/configManager.ts b/apps/extension/src/utils/configManager.ts
index 204e27ae..15a5c58b 100644
--- a/apps/extension/src/utils/configManager.ts
+++ b/apps/extension/src/utils/configManager.ts
@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
-import { MCPConfig } from './mcpClient';
 import { logger } from './logger';
+import type { MCPConfig } from './mcpClient';
 
 export interface TaskMasterConfig {
 	mcp: MCPServerConfig;
diff --git a/apps/extension/src/utils/connectionManager.ts b/apps/extension/src/utils/connectionManager.ts
index 6048721e..172d8ce0 100644
--- a/apps/extension/src/utils/connectionManager.ts
+++ b/apps/extension/src/utils/connectionManager.ts
@@ -1,6 +1,10 @@
 import * as vscode from 'vscode';
-import { MCPClientManager, MCPConfig, MCPServerStatus } from './mcpClient';
 import { logger } from './logger';
+import {
+	MCPClientManager,
+	type MCPConfig,
+	type MCPServerStatus
+} from './mcpClient';
 
 export interface ConnectionEvent {
 	type: 'connected' | 'disconnected' | 'error' | 'reconnecting';
@@ -135,7 +139,7 @@ export class ConnectionManager {
 	/**
 	 * Get recent connection events
 	 */
-	getEvents(limit: number = 10): ConnectionEvent[] {
+	getEvents(limit = 10): ConnectionEvent[] {
 		return this.connectionEvents.slice(-limit);
 	}
 
@@ -300,7 +304,7 @@ export class ConnectionManager {
 		this.reconnectAttempts++;
 
 		const backoffMs = Math.min(
-			this.reconnectBackoffMs * Math.pow(2, this.reconnectAttempts - 1),
+			this.reconnectBackoffMs * 2 ** (this.reconnectAttempts - 1),
 			this.maxBackoffMs
 		);
 
diff --git a/apps/extension/src/utils/errorHandler.ts b/apps/extension/src/utils/errorHandler.ts
index 8df19932..5b9b5fe6 100644
--- a/apps/extension/src/utils/errorHandler.ts
+++ b/apps/extension/src/utils/errorHandler.ts
@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
 import { logger } from './logger';
 import {
-	shouldShowNotification,
 	getNotificationType,
-	getToastDuration
+	getToastDuration,
+	shouldShowNotification
 } from './notificationPreferences';
 
 export enum ErrorSeverity {
@@ -169,7 +169,7 @@ export abstract class TaskMasterError extends Error {
 export class MCPConnectionError extends TaskMasterError {
 	constructor(
 		message: string,
-		code: string = 'MCP_CONNECTION_FAILED',
+		code = 'MCP_CONNECTION_FAILED',
 		context?: Record<string, any>,
 		recovery?: {
 			automatic: boolean;
@@ -195,7 +195,7 @@ export class MCPConnectionError extends TaskMasterError {
 export class ConfigurationError extends TaskMasterError {
 	constructor(
 		message: string,
-		code: string = 'CONFIGURATION_INVALID',
+		code = 'CONFIGURATION_INVALID',
 		context?: Record<string, any>
 	) {
 		super(
@@ -215,7 +215,7 @@ export class ConfigurationError extends TaskMasterError {
 export class TaskLoadingError extends TaskMasterError {
 	constructor(
 		message: string,
-		code: string = 'TASK_LOADING_FAILED',
+		code = 'TASK_LOADING_FAILED',
 		context?: Record<string, any>,
 		recovery?: {
 			automatic: boolean;
@@ -241,7 +241,7 @@ export class TaskLoadingError extends TaskMasterError {
 export class UIRenderingError extends TaskMasterError {
 	constructor(
 		message: string,
-		code: string = 'UI_RENDERING_FAILED',
+		code = 'UI_RENDERING_FAILED',
 		context?: Record<string, any>
 	) {
 		super(
@@ -261,7 +261,7 @@ export class UIRenderingError extends TaskMasterError {
 export class NetworkError extends TaskMasterError {
 	constructor(
 		message: string,
-		code: string = 'NETWORK_ERROR',
+		code = 'NETWORK_ERROR',
 		context?: Record<string, any>,
 		recovery?: {
 			automatic: boolean;
diff --git a/apps/extension/src/utils/event-emitter.ts b/apps/extension/src/utils/event-emitter.ts
new file mode 100644
index 00000000..e5561bba
--- /dev/null
+++ b/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);
+			}
+		});
+	}
+}
diff --git a/apps/extension/src/utils/logger.ts b/apps/extension/src/utils/logger.ts
index 495d37b6..bf924d2f 100644
--- a/apps/extension/src/utils/logger.ts
+++ b/apps/extension/src/utils/logger.ts
@@ -1,10 +1,22 @@
 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 {
+export class ExtensionLogger implements ILogger {
 	private static instance: ExtensionLogger;
 	private outputChannel: vscode.OutputChannel;
 	private debugMode: boolean;
@@ -23,7 +35,9 @@ export class ExtensionLogger {
 	}
 
 	log(message: string, ...args: any[]): void {
-		if (!this.debugMode) return;
+		if (!this.debugMode) {
+			return;
+		}
 		const timestamp = new Date().toISOString();
 		const formattedMessage = this.formatMessage(message, args);
 		this.outputChannel.appendLine(`[${timestamp}] ${formattedMessage}`);
@@ -36,14 +50,18 @@ export class ExtensionLogger {
 	}
 
 	warn(message: string, ...args: any[]): void {
-		if (!this.debugMode) return;
+		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;
+		if (!this.debugMode) {
+			return;
+		}
 		const timestamp = new Date().toISOString();
 		const formattedMessage = this.formatMessage(message, args);
 		this.outputChannel.appendLine(`[${timestamp}] DEBUG: ${formattedMessage}`);
diff --git a/apps/extension/src/utils/mcpClient.ts b/apps/extension/src/utils/mcpClient.ts
index 55ec05da..a909c01f 100644
--- a/apps/extension/src/utils/mcpClient.ts
+++ b/apps/extension/src/utils/mcpClient.ts
@@ -1,5 +1,5 @@
-import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
 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';
 
diff --git a/apps/extension/src/utils/task-master-api/cache/cache-manager.ts b/apps/extension/src/utils/task-master-api/cache/cache-manager.ts
new file mode 100644
index 00000000..bbbc1008
--- /dev/null
+++ b/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;
+		}
+	}
+}
diff --git a/apps/extension/src/utils/task-master-api/index.ts b/apps/extension/src/utils/task-master-api/index.ts
new file mode 100644
index 00000000..992be567
--- /dev/null
+++ b/apps/extension/src/utils/task-master-api/index.ts
@@ -0,0 +1,471 @@
+/**
+ * Task Master 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 Task Master
+	 */
+	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: 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: 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: 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: 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();
+	}
+}
diff --git a/apps/extension/src/utils/task-master-api/mcp-client.ts b/apps/extension/src/utils/task-master-api/mcp-client.ts
new file mode 100644
index 00000000..0007e157
--- /dev/null
+++ b/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();
+	}
+}
diff --git a/apps/extension/src/utils/task-master-api/transformers/task-transformer.ts b/apps/extension/src/utils/task-master-api/transformers/task-transformer.ts
new file mode 100644
index 00000000..4cf1b7d9
--- /dev/null
+++ b/apps/extension/src/utils/task-master-api/transformers/task-transformer.ts
@@ -0,0 +1,477 @@
+/**
+ * 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}`
+					),
+					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;
+	}
+}
diff --git a/apps/extension/src/utils/task-master-api/types/index.ts b/apps/extension/src/utils/task-master-api/types/index.ts
new file mode 100644
index 00000000..f59ca75f
--- /dev/null
+++ b/apps/extension/src/utils/task-master-api/types/index.ts
@@ -0,0 +1,156 @@
+/**
+ * Task Master API Types
+ * All type definitions for the Task Master 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;
+		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;
+}
diff --git a/apps/extension/src/utils/taskFileReader.ts b/apps/extension/src/utils/taskFileReader.ts
deleted file mode 100644
index 326269e9..00000000
--- a/apps/extension/src/utils/taskFileReader.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { logger } from './logger';
-
-export interface TaskFileData {
-	details?: string;
-	testStrategy?: string;
-}
-
-export interface TasksJsonStructure {
-	[tagName: string]: {
-		tasks: TaskWithDetails[];
-		metadata: {
-			createdAt: string;
-			description?: string;
-		};
-	};
-}
-
-export interface TaskWithDetails {
-	id: string | number;
-	title: string;
-	description: string;
-	status: string;
-	priority: string;
-	dependencies?: (string | number)[];
-	details?: string;
-	testStrategy?: string;
-	subtasks?: TaskWithDetails[];
-}
-
-/**
- * Reads tasks.json file directly and extracts implementation details and test strategy
- * @param taskId - The ID of the task to read (e.g., "1" or "1.2" for subtasks)
- * @param tagName - The tag/context name (defaults to "master")
- * @returns TaskFileData with details and testStrategy fields
- */
-export async function readTaskFileData(
-	taskId: string,
-	tagName: string = 'master'
-): Promise<TaskFileData> {
-	try {
-		// Check if we're in a VS Code webview context
-		if (typeof window !== 'undefined' && (window as any).vscode) {
-			// Use VS Code API to read the file
-			const vscode = (window as any).vscode;
-
-			// Request file content from the extension
-			return new Promise((resolve, reject) => {
-				const messageId = Date.now().toString();
-
-				// Listen for response
-				const messageHandler = (event: MessageEvent) => {
-					const message = event.data;
-					if (
-						message.type === 'taskFileData' &&
-						message.messageId === messageId
-					) {
-						window.removeEventListener('message', messageHandler);
-						if (message.error) {
-							reject(new Error(message.error));
-						} else {
-							resolve(message.data);
-						}
-					}
-				};
-
-				window.addEventListener('message', messageHandler);
-
-				// Send request to extension
-				vscode.postMessage({
-					type: 'readTaskFileData',
-					messageId,
-					taskId,
-					tagName
-				});
-
-				// Timeout after 5 seconds
-				setTimeout(() => {
-					window.removeEventListener('message', messageHandler);
-					reject(new Error('Timeout reading task file data'));
-				}, 5000);
-			});
-		} else {
-			// Fallback for non-VS Code environments
-			return { details: undefined, testStrategy: undefined };
-		}
-	} catch (error) {
-		logger.error('Error reading task file data:', error);
-		return { details: undefined, testStrategy: undefined };
-	}
-}
-
-/**
- * Finds a task by ID within a tasks array, supporting subtask notation (e.g., "1.2")
- * @param tasks - Array of tasks to search
- * @param taskId - ID to search for
- * @returns The task object if found, undefined otherwise
- */
-export function findTaskById(
-	tasks: TaskWithDetails[],
-	taskId: string
-): TaskWithDetails | undefined {
-	// Check if this is a subtask ID with dotted notation (e.g., "1.2")
-	if (taskId.includes('.')) {
-		const [parentId, subtaskId] = taskId.split('.');
-		logger.log('🔍 Looking for subtask:', { parentId, subtaskId, taskId });
-
-		// Find the parent task first
-		const parentTask = tasks.find((task) => String(task.id) === parentId);
-		if (!parentTask || !parentTask.subtasks) {
-			logger.log('❌ Parent task not found or has no subtasks:', parentId);
-			return undefined;
-		}
-
-		logger.log(
-			'📋 Parent task found with',
-			parentTask.subtasks.length,
-			'subtasks'
-		);
-		logger.log(
-			'🔍 Subtask IDs in parent:',
-			parentTask.subtasks.map((st) => st.id)
-		);
-
-		// Find the subtask within the parent
-		const subtask = parentTask.subtasks.find(
-			(st) => String(st.id) === subtaskId
-		);
-		if (subtask) {
-			logger.log('✅ Subtask found:', subtask.id);
-		} else {
-			logger.log('❌ Subtask not found:', subtaskId);
-		}
-		return subtask;
-	}
-
-	// For regular task IDs (not dotted notation)
-	for (const task of tasks) {
-		// Convert both to strings for comparison to handle string vs number IDs
-		if (String(task.id) === String(taskId)) {
-			return task;
-		}
-	}
-
-	return undefined;
-}
-
-/**
- * Parses tasks.json content and extracts task file data (details and testStrategy only)
- * @param content - Raw tasks.json content
- * @param taskId - Task ID to find
- * @param tagName - Tag name to use
- * @param workspacePath - Path to workspace root (not used anymore but kept for compatibility)
- * @returns TaskFileData with details and testStrategy only
- */
-export function parseTaskFileData(
-	content: string,
-	taskId: string,
-	tagName: string,
-	workspacePath?: string
-): TaskFileData {
-	logger.log('🔍 parseTaskFileData called with:', {
-		taskId,
-		tagName,
-		contentLength: content.length
-	});
-
-	try {
-		const tasksJson: TasksJsonStructure = JSON.parse(content);
-		logger.log('📊 Available tags:', Object.keys(tasksJson));
-
-		// Get the tag data
-		const tagData = tasksJson[tagName];
-		if (!tagData || !tagData.tasks) {
-			logger.log('❌ Tag not found or no tasks in tag:', tagName);
-			return { details: undefined, testStrategy: undefined };
-		}
-
-		logger.log('📋 Tag found with', tagData.tasks.length, 'tasks');
-		logger.log(
-			'🔍 Available task IDs:',
-			tagData.tasks.map((t) => t.id)
-		);
-
-		// Find the task
-		const task = findTaskById(tagData.tasks, taskId);
-		if (!task) {
-			logger.log('❌ Task not found:', taskId);
-			return { details: undefined, testStrategy: undefined };
-		}
-
-		logger.log('✅ Task found:', task.id);
-		logger.log(
-			'📝 Task has details:',
-			!!task.details,
-			'length:',
-			task.details?.length
-		);
-		logger.log(
-			'🧪 Task has testStrategy:',
-			!!task.testStrategy,
-			'length:',
-			task.testStrategy?.length
-		);
-
-		return {
-			details: task.details,
-			testStrategy: task.testStrategy
-		};
-	} catch (error) {
-		logger.error('❌ Error parsing tasks.json:', error);
-		return { details: undefined, testStrategy: undefined };
-	}
-}
diff --git a/apps/extension/src/utils/taskMasterApi.ts b/apps/extension/src/utils/taskMasterApi.ts
deleted file mode 100644
index 1189d88f..00000000
--- a/apps/extension/src/utils/taskMasterApi.ts
+++ /dev/null
@@ -1,1348 +0,0 @@
-import * as vscode from 'vscode';
-import { MCPClientManager } from './mcpClient';
-import { logger } from './logger';
-
-// Task Master MCP API 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;
-}
-
-// Our internal Task interface (matches the webview expectations)
-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;
-		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;
-	// Enhanced caching configuration
-	cache?: {
-		maxSize: number; // Maximum number of cache entries
-		enableBackgroundRefresh: boolean; // Enable background cache refresh
-		refreshInterval: number; // Background refresh interval in ms
-		enableAnalytics: boolean; // Track cache hit/miss statistics
-		enablePrefetch: boolean; // Enable prefetching of related data
-		compressionEnabled: boolean; // Enable data compression for large datasets
-		persistToDisk: boolean; // Persist cache to disk (future enhancement)
-	};
-}
-
-// Enhanced cache entry interface
-interface CacheEntry {
-	data: any;
-	timestamp: number;
-	accessCount: number;
-	lastAccessed: number;
-	size: number;
-	ttl?: number;
-	tags: string[];
-}
-
-// Cache analytics interface
-interface CacheAnalytics {
-	hits: number;
-	misses: number;
-	evictions: number;
-	refreshes: number;
-	totalSize: number;
-	averageAccessTime: number;
-	hitRate: number;
-}
-
-/**
- * Task Master API client that wraps MCP tool calls
- */
-export class TaskMasterApi {
-	private mcpClient: MCPClientManager;
-	private config: TaskMasterApiConfig;
-	private cache = new Map<string, CacheEntry>();
-	private cacheAnalytics: CacheAnalytics = {
-		hits: 0,
-		misses: 0,
-		evictions: 0,
-		refreshes: 0,
-		totalSize: 0,
-		averageAccessTime: 0,
-		hitRate: 0
-	};
-	private backgroundRefreshTimer?: NodeJS.Timeout;
-	private readonly defaultCacheConfig = {
-		maxSize: 100,
-		enableBackgroundRefresh: true,
-		refreshInterval: 5 * 60 * 1000, // 5 minutes
-		enableAnalytics: true,
-		enablePrefetch: true,
-		compressionEnabled: false,
-		persistToDisk: false
-	};
-
-	constructor(
-		mcpClient: MCPClientManager,
-		config?: Partial<TaskMasterApiConfig>
-	) {
-		this.mcpClient = mcpClient;
-		this.config = {
-			timeout: 30000,
-			retryAttempts: 3,
-			cacheDuration: 5 * 60 * 1000, // 5 minutes
-			...config,
-			cache: { ...this.defaultCacheConfig, ...config?.cache }
-		};
-
-		// Initialize background refresh if enabled
-		if (this.config.cache?.enableBackgroundRefresh) {
-			this.initializeBackgroundRefresh();
-		}
-
-		logger.log('TaskMasterApi: Initialized with enhanced caching:', {
-			cacheDuration: this.config.cacheDuration,
-			maxSize: this.config.cache?.maxSize,
-			backgroundRefresh: this.config.cache?.enableBackgroundRefresh,
-			analytics: this.config.cache?.enableAnalytics
-		});
-	}
-
-	/**
-	 * Get tasks from Task Master using the get_tasks MCP tool
-	 */
-	async getTasks(options?: {
-		status?: string;
-		withSubtasks?: boolean;
-		tag?: string;
-		projectRoot?: string;
-	}): Promise<TaskMasterApiResponse<TaskMasterTask[]>> {
-		const startTime = Date.now();
-		const cacheKey = `get_tasks_${JSON.stringify(options || {})}`;
-
-		try {
-			// Check cache first
-			const cached = this.getFromCache(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
-			};
-
-			// Add optional parameters
-			if (options?.status) {
-				mcpArgs.status = options.status;
-			}
-			if (options?.tag) {
-				mcpArgs.tag = options.tag;
-			}
-
-			logger.log('TaskMasterApi: Calling get_tasks with args:', mcpArgs);
-
-			// Call the MCP tool
-			const mcpResponse = await this.callMCPTool('get_tasks', mcpArgs);
-
-			// Transform the response
-			const transformedTasks = this.transformMCPTasksResponse(mcpResponse);
-
-			// Cache the result
-			this.setCache(cacheKey, transformedTasks);
-
-			return {
-				success: true,
-				data: transformedTasks,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: Error getting tasks:', error);
-
-			return {
-				success: false,
-				error:
-					error instanceof Error ? error.message : 'Unknown error occurred',
-				requestDuration: Date.now() - startTime
-			};
-		}
-	}
-
-	/**
-	 * Update task status using the set_task_status MCP tool
-	 */
-	async updateTaskStatus(
-		taskId: string,
-		status: string,
-		options?: {
-			projectRoot?: string;
-		}
-	): Promise<TaskMasterApiResponse<boolean>> {
-		const startTime = Date.now();
-
-		try {
-			const mcpArgs: Record<string, unknown> = {
-				id: taskId,
-				status: status,
-				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
-			};
-
-			logger.log('TaskMasterApi: Calling set_task_status with args:', mcpArgs);
-
-			await this.callMCPTool('set_task_status', mcpArgs);
-
-			// Clear relevant caches
-			this.clearCachePattern('get_tasks');
-
-			return {
-				success: true,
-				data: true,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: Error updating task status:', error);
-
-			return {
-				success: false,
-				error:
-					error instanceof Error ? error.message : 'Unknown error occurred',
-				requestDuration: Date.now() - startTime
-			};
-		}
-	}
-
-	/**
-	 * Update task content using the update_task MCP tool
-	 */
-	async updateTask(
-		taskId: string,
-		updates: {
-			title?: string;
-			description?: string;
-			details?: string;
-			priority?: 'high' | 'medium' | 'low';
-			testStrategy?: string;
-			dependencies?: string[];
-		},
-		options?: {
-			projectRoot?: string;
-			append?: boolean;
-			research?: boolean;
-		}
-	): Promise<TaskMasterApiResponse<boolean>> {
-		const startTime = Date.now();
-
-		try {
-			// Build the prompt for the update_task MCP tool
-			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: taskId,
-				prompt: prompt,
-				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
-			};
-
-			// Add optional parameters
-			if (options?.append !== undefined) {
-				mcpArgs.append = options.append;
-			}
-			if (options?.research !== undefined) {
-				mcpArgs.research = options.research;
-			}
-
-			logger.log('TaskMasterApi: Calling update_task with args:', mcpArgs);
-
-			await this.callMCPTool('update_task', mcpArgs);
-
-			// Clear relevant caches
-			this.clearCachePattern('get_tasks');
-
-			return {
-				success: true,
-				data: true,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: Error updating task:', error);
-
-			return {
-				success: false,
-				error:
-					error instanceof Error ? error.message : 'Unknown error occurred',
-				requestDuration: Date.now() - startTime
-			};
-		}
-	}
-
-	/**
-	 * Update subtask content using the update_subtask MCP tool
-	 */
-	async updateSubtask(
-		taskId: string,
-		prompt: string,
-		options?: {
-			projectRoot?: string;
-			research?: boolean;
-		}
-	): Promise<TaskMasterApiResponse<boolean>> {
-		const startTime = Date.now();
-
-		try {
-			const mcpArgs: Record<string, unknown> = {
-				id: taskId,
-				prompt: prompt,
-				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
-			};
-
-			// Add optional parameters
-			if (options?.research !== undefined) {
-				mcpArgs.research = options.research;
-			}
-
-			logger.log('TaskMasterApi: Calling update_subtask with args:', mcpArgs);
-
-			await this.callMCPTool('update_subtask', mcpArgs);
-
-			// Clear relevant caches
-			this.clearCachePattern('get_tasks');
-
-			return {
-				success: true,
-				data: true,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: Error updating subtask:', error);
-
-			return {
-				success: false,
-				error:
-					error instanceof Error ? error.message : 'Unknown error occurred',
-				requestDuration: Date.now() - startTime
-			};
-		}
-	}
-
-	/**
-	 * Add a new subtask to an existing task using the add_subtask MCP tool
-	 */
-	async addSubtask(
-		parentTaskId: string,
-		subtaskData: {
-			title: string;
-			description?: string;
-			dependencies?: string[];
-			status?: string;
-		},
-		options?: {
-			projectRoot?: string;
-		}
-	): Promise<TaskMasterApiResponse<boolean>> {
-		const startTime = Date.now();
-
-		try {
-			const mcpArgs: Record<string, unknown> = {
-				id: parentTaskId,
-				title: subtaskData.title,
-				projectRoot: options?.projectRoot || this.getWorkspaceRoot()
-			};
-
-			// Add optional parameters
-			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;
-			}
-
-			logger.log('TaskMasterApi: Calling add_subtask with args:', mcpArgs);
-
-			await this.callMCPTool('add_subtask', mcpArgs);
-
-			// Clear relevant caches to force refresh
-			this.clearCachePattern('get_tasks');
-
-			return {
-				success: true,
-				data: true,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: Error adding subtask:', error);
-
-			return {
-				success: false,
-				error:
-					error instanceof Error ? error.message : 'Unknown error occurred',
-				requestDuration: Date.now() - startTime
-			};
-		}
-	}
-
-	/**
-	 * Get current Task Master connection status
-	 */
-	getConnectionStatus(): { isConnected: boolean; error?: string } {
-		const status = this.mcpClient.getStatus();
-		return {
-			isConnected: status.isRunning,
-			error: status.error
-		};
-	}
-
-	/**
-	 * Test the connection to Task Master
-	 */
-	async testConnection(): Promise<TaskMasterApiResponse<boolean>> {
-		const startTime = Date.now();
-
-		try {
-			const isConnected = await this.mcpClient.testConnection();
-
-			return {
-				success: true,
-				data: isConnected,
-				requestDuration: Date.now() - startTime
-			};
-		} catch (error) {
-			logger.error('TaskMasterApi: 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();
-		this.resetCacheAnalytics();
-	}
-
-	/**
-	 * Get cache analytics
-	 */
-	getCacheAnalytics(): CacheAnalytics {
-		this.updateAnalytics();
-		return { ...this.cacheAnalytics };
-	}
-
-	/**
-	 * Initialize background refresh timer
-	 */
-	private initializeBackgroundRefresh(): void {
-		if (this.backgroundRefreshTimer) {
-			clearInterval(this.backgroundRefreshTimer);
-		}
-
-		const interval = this.config.cache?.refreshInterval || 5 * 60 * 1000;
-		this.backgroundRefreshTimer = setInterval(() => {
-			this.performBackgroundRefresh();
-		}, interval);
-
-		logger.log(
-			`TaskMasterApi: Background refresh initialized with ${interval}ms interval`
-		);
-	}
-
-	/**
-	 * Perform background refresh of frequently accessed cache entries
-	 */
-	private async performBackgroundRefresh(): Promise<void> {
-		if (!this.config.cache?.enableBackgroundRefresh) {
-			return;
-		}
-
-		logger.log('TaskMasterApi: Starting background cache refresh');
-		const startTime = Date.now();
-
-		// Find frequently accessed entries that are close to expiration
-		const refreshCandidates = Array.from(this.cache.entries())
-			.filter(([key, entry]) => {
-				const age = Date.now() - entry.timestamp;
-				const isNearExpiration = age > this.config.cacheDuration * 0.7; // 70% of TTL
-				const isFrequentlyAccessed = entry.accessCount >= 3;
-				return (
-					isNearExpiration && isFrequentlyAccessed && key.includes('get_tasks')
-				);
-			})
-			.sort((a, b) => b[1].accessCount - a[1].accessCount) // Most accessed first
-			.slice(0, 5); // Limit to top 5 entries
-
-		let refreshedCount = 0;
-		for (const [key, entry] of refreshCandidates) {
-			try {
-				// Parse the cache key to extract options
-				const optionsMatch = key.match(/get_tasks_(.+)/);
-				if (optionsMatch) {
-					const options = JSON.parse(optionsMatch[1]);
-					logger.log(`TaskMasterApi: Background refreshing cache key: ${key}`);
-
-					// Perform the refresh (this will update the cache)
-					await this.getTasks(options);
-					refreshedCount++;
-					this.cacheAnalytics.refreshes++;
-				}
-			} catch (error) {
-				logger.warn(
-					`TaskMasterApi: Background refresh failed for key ${key}:`,
-					error
-				);
-			}
-		}
-
-		const duration = Date.now() - startTime;
-		logger.log(
-			`TaskMasterApi: Background refresh completed in ${duration}ms, refreshed ${refreshedCount} entries`
-		);
-	}
-
-	/**
-	 * Reset cache analytics
-	 */
-	private resetCacheAnalytics(): void {
-		this.cacheAnalytics = {
-			hits: 0,
-			misses: 0,
-			evictions: 0,
-			refreshes: 0,
-			totalSize: 0,
-			averageAccessTime: 0,
-			hitRate: 0
-		};
-	}
-
-	/**
-	 * Update cache analytics calculations
-	 */
-	private updateAnalytics(): void {
-		const total = this.cacheAnalytics.hits + this.cacheAnalytics.misses;
-		this.cacheAnalytics.hitRate =
-			total > 0 ? this.cacheAnalytics.hits / total : 0;
-		this.cacheAnalytics.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.cacheAnalytics.averageAccessTime = totalAccessTime / this.cache.size;
-		}
-	}
-
-	/**
-	 * Clear cache entries matching a pattern
-	 */
-	private clearCachePattern(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.cacheAnalytics.evictions += evictedCount;
-			logger.log(
-				`TaskMasterApi: Evicted ${evictedCount} cache entries matching pattern: ${pattern}`
-			);
-		}
-	}
-
-	/**
-	 * Get data from cache if not expired with analytics tracking
-	 */
-	private getFromCache(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.cache?.enableAnalytics) {
-					this.cacheAnalytics.hits++;
-				}
-
-				const accessTime = Date.now() - startTime;
-				logger.log(
-					`TaskMasterApi: Cache hit for ${key} (${accessTime}ms, ${cached.accessCount} accesses)`
-				);
-				return cached.data;
-			} else {
-				// Remove expired entry
-				this.cache.delete(key);
-				logger.log(`TaskMasterApi: Cache entry expired and removed: ${key}`);
-			}
-		}
-
-		if (this.config.cache?.enableAnalytics) {
-			this.cacheAnalytics.misses++;
-		}
-
-		logger.log(`TaskMasterApi: Cache miss for ${key}`);
-		return null;
-	}
-
-	/**
-	 * Set data in cache with enhanced metadata and LRU eviction
-	 */
-	private setCache(
-		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]] // Default tag based on key prefix
-		};
-
-		// Check if we need to evict entries (LRU strategy)
-		const maxSize = this.config.cache?.maxSize || 100;
-		if (this.cache.size >= maxSize) {
-			this.evictLRUEntries(Math.max(1, Math.floor(maxSize * 0.1))); // Evict 10% of max size
-		}
-
-		this.cache.set(key, entry);
-		logger.log(
-			`TaskMasterApi: Cached data for ${key} (size: ${dataSize} bytes, TTL: ${entry.ttl || this.config.cacheDuration}ms)`
-		);
-
-		// Trigger prefetch if enabled
-		if (this.config.cache?.enablePrefetch) {
-			this.scheduleRelatedDataPrefetch(key, data);
-		}
-	}
-
-	/**
-	 * Evict least recently used cache entries
-	 */
-	private evictLRUEntries(count: number): void {
-		const entries = Array.from(this.cache.entries())
-			.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed) // Oldest first
-			.slice(0, count);
-
-		for (const [key] of entries) {
-			this.cache.delete(key);
-			this.cacheAnalytics.evictions++;
-		}
-
-		if (entries.length > 0) {
-			logger.log(`TaskMasterApi: Evicted ${entries.length} LRU cache entries`);
-		}
-	}
-
-	/**
-	 * Estimate data size for cache analytics
-	 */
-	private estimateDataSize(data: any): number {
-		try {
-			return JSON.stringify(data).length * 2; // Rough estimate (2 bytes per character)
-		} catch {
-			return 1000; // Default fallback size
-		}
-	}
-
-	/**
-	 * Schedule prefetch of related data
-	 */
-	private scheduleRelatedDataPrefetch(key: string, data: any): void {
-		// This is a simple implementation - in a more sophisticated system,
-		// we might prefetch related tasks, subtasks, or dependency data
-		if (key.includes('get_tasks') && Array.isArray(data)) {
-			logger.log(
-				`TaskMasterApi: Scheduled prefetch for ${data.length} tasks related to ${key}`
-			);
-			// Future enhancement: prefetch individual task details, related dependencies, etc.
-		}
-	}
-
-	/**
-	 * Cleanup method to clear timers
-	 */
-	destroy(): void {
-		if (this.backgroundRefreshTimer) {
-			clearInterval(this.backgroundRefreshTimer);
-			this.backgroundRefreshTimer = undefined;
-		}
-		this.clearCache();
-		logger.log('TaskMasterApi: Destroyed and cleaned up resources');
-	}
-
-	/**
-	 * Call MCP tool with retry logic
-	 */
-	private async callMCPTool(
-		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);
-				logger.log(
-					`🔍 DEBUGGING: Raw MCP response for ${toolName}:`,
-					JSON.stringify(rawResponse, null, 2)
-				);
-
-				// Parse MCP response format: { content: [{ type: 'text', text: '{"data": {...}}' }] }
-				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);
-							logger.log(
-								`🔍 DEBUGGING: Parsed MCP data for ${toolName}:`,
-								parsedData
-							);
-							return parsedData;
-						} catch (parseError) {
-							logger.error(
-								`TaskMasterApi: Failed to parse MCP response text for ${toolName}:`,
-								parseError
-							);
-							logger.error(`TaskMasterApi: Raw text was:`, contentItem.text);
-							return rawResponse; // Fall back to original response
-						}
-					}
-				}
-
-				// If not in expected format, return as-is
-				logger.warn(
-					`TaskMasterApi: Unexpected MCP response format for ${toolName}, returning raw response`
-				);
-				return rawResponse;
-			} catch (error) {
-				lastError = error instanceof Error ? error : new Error('Unknown error');
-				logger.warn(
-					`TaskMasterApi: Attempt ${attempt}/${this.config.retryAttempts} failed for ${toolName}:`,
-					lastError.message
-				);
-
-				if (attempt < this.config.retryAttempts) {
-					// Exponential backoff
-					const delay = Math.min(1000 * Math.pow(2, attempt - 1), 5000);
-					await new Promise((resolve) => setTimeout(resolve, delay));
-				}
-			}
-		}
-
-		throw (
-			lastError ||
-			new Error(
-				`Failed to call ${toolName} after ${this.config.retryAttempts} attempts`
-			)
-		);
-	}
-
-	/**
-	 * Transform MCP tasks response to our internal format with comprehensive validation
-	 */
-	private transformMCPTasksResponse(mcpResponse: any): TaskMasterTask[] {
-		const transformStartTime = Date.now();
-
-		try {
-			// Validate response structure
-			const validationResult = this.validateMCPResponse(mcpResponse);
-			if (!validationResult.isValid) {
-				logger.warn(
-					'TaskMasterApi: MCP response validation failed:',
-					validationResult.errors
-				);
-				return [];
-			}
-
-			const tasks = mcpResponse.data.tasks || [];
-			logger.log(
-				`TaskMasterApi: Transforming ${tasks.length} tasks from MCP response`
-			);
-
-			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]
-					});
-					logger.error(
-						`TaskMasterApi: Failed to transform task at index ${i}:`,
-						errorMsg,
-						tasks[i]
-					);
-				}
-			}
-
-			// Log transformation summary
-			const transformDuration = Date.now() - transformStartTime;
-			logger.log(
-				`TaskMasterApi: 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) {
-			logger.error(
-				'TaskMasterApi: 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 };
-		}
-
-		if (typeof mcpResponse !== 'object') {
-			errors.push('Response is not an object');
-			return { isValid: false, errors };
-		}
-
-		if (mcpResponse.error) {
-			errors.push(`MCP error: ${mcpResponse.error}`);
-		}
-
-		if (!mcpResponse.data) {
-			errors.push('Response missing data property');
-		} else if (typeof mcpResponse.data !== 'object') {
-			errors.push('Response data is not an object');
-		}
-
-		if (mcpResponse.data && !Array.isArray(mcpResponse.data.tasks)) {
-			// Allow null/undefined tasks array, but not wrong type
-			if (
-				mcpResponse.data.tasks !== null &&
-				mcpResponse.data.tasks !== undefined
-			) {
-				errors.push('Response data.tasks is not an array');
-			}
-		}
-
-		return { isValid: errors.length === 0, errors };
-	}
-
-	/**
-	 * Transform a single task with comprehensive validation
-	 */
-	private transformSingleTask(task: any, index: number): TaskMasterTask | null {
-		if (!task || typeof task !== 'object') {
-			logger.warn(
-				`TaskMasterApi: 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.length > 0 ||
-				dependencies.length > 0 ||
-				complexityScore !== undefined
-			) {
-				logger.log(
-					`TaskMasterApi: Successfully transformed complex task ${taskId}:`,
-					{
-						subtaskCount: subtasks.length,
-						dependencyCount: dependencies.length,
-						status,
-						priority,
-						complexityScore
-					}
-				);
-			}
-
-			return transformedTask;
-		} catch (error) {
-			logger.error(
-				`TaskMasterApi: Error transforming task at index ${index}:`,
-				error,
-				task
-			);
-			return null;
-		}
-	}
-
-	/**
-	 * Validate and normalize task ID
-	 */
-	private validateAndNormalizeId(id: any, fallbackIndex: number): string {
-		if (id === null || id === undefined) {
-			const generatedId = `generated_${fallbackIndex}_${Date.now()}`;
-			logger.warn(`TaskMasterApi: Task missing ID, generated: ${generatedId}`);
-			return generatedId;
-		}
-
-		const stringId = String(id).trim();
-		if (stringId === '') {
-			const generatedId = `empty_${fallbackIndex}_${Date.now()}`;
-			logger.warn(
-				`TaskMasterApi: Task has empty ID, generated: ${generatedId}`
-			);
-			return generatedId;
-		}
-
-		return stringId;
-	}
-
-	/**
-	 * Validate and normalize string fields
-	 */
-	private validateAndNormalizeString(
-		value: any,
-		defaultValue: string | undefined,
-		fieldName: string
-	): string | undefined {
-		if (value === null || value === undefined) {
-			return defaultValue;
-		}
-
-		if (typeof value !== 'string') {
-			logger.warn(
-				`TaskMasterApi: ${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;
-	}
-
-	/**
-	 * Transform and validate dependencies
-	 */
-	private transformDependencies(dependencies: any, taskId: string): string[] {
-		if (!dependencies) {
-			return [];
-		}
-
-		if (!Array.isArray(dependencies)) {
-			logger.warn(
-				`TaskMasterApi: 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) {
-				logger.warn(
-					`TaskMasterApi: Null dependency at index ${i} for task ${taskId}`
-				);
-				continue;
-			}
-
-			const stringDep = String(dep).trim();
-			if (stringDep === '') {
-				logger.warn(
-					`TaskMasterApi: Empty dependency at index ${i} for task ${taskId}`
-				);
-				continue;
-			}
-
-			// Check for self-dependency
-			if (stringDep === taskId) {
-				logger.warn(
-					`TaskMasterApi: Self-dependency detected for task ${taskId}, skipping`
-				);
-				continue;
-			}
-
-			validDependencies.push(stringDep);
-		}
-
-		return validDependencies;
-	}
-
-	/**
-	 * Transform and validate subtasks
-	 */
-	private transformSubtasks(
-		subtasks: any,
-		parentTaskId: string
-	): Array<{
-		id: number;
-		title: string;
-		description?: string;
-		status: string;
-		details?: string;
-		dependencies?: Array<number | string>;
-	}> {
-		if (!subtasks) {
-			return [];
-		}
-
-		if (!Array.isArray(subtasks)) {
-			logger.warn(
-				`TaskMasterApi: 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') {
-					logger.warn(
-						`TaskMasterApi: 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}`
-					),
-					dependencies: subtask.dependencies || []
-				};
-
-				validSubtasks.push(transformedSubtask);
-			} catch (error) {
-				logger.error(
-					`TaskMasterApi: Error transforming subtask at index ${i} for task ${parentTaskId}:`,
-					error
-				);
-			}
-		}
-
-		return validSubtasks;
-	}
-
-	/**
-	 * Normalize task status to our expected values with detailed logging
-	 */
-	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) {
-			logger.log(
-				`TaskMasterApi: Normalized status '${original}' -> '${result}'`
-			);
-		}
-
-		return result;
-	}
-
-	/**
-	 * Normalize task priority to our expected values with detailed logging
-	 */
-	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) {
-			logger.log(
-				`TaskMasterApi: Normalized priority '${original}' -> '${result}'`
-			);
-		}
-
-		return result;
-	}
-
-	/**
-	 * Get workspace root path
-	 */
-	private getWorkspaceRoot(): string {
-		return vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || process.cwd();
-	}
-}
diff --git a/apps/extension/src/webview/App.tsx b/apps/extension/src/webview/App.tsx
new file mode 100644
index 00000000..b39459a1
--- /dev/null
+++ b/apps/extension/src/webview/App.tsx
@@ -0,0 +1,150 @@
+/**
+ * Main App Component
+ */
+
+import React, { useReducer, useState, useEffect, useRef } from 'react';
+import { VSCodeContext } from './contexts/VSCodeContext';
+import { TaskMasterKanban } from './components/TaskMasterKanban';
+import TaskDetailsView from '@/components/TaskDetailsView';
+import { ConfigView } from '@/components/ConfigView';
+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' });
+
+		// Request initial tasks data
+		sendMessage({ type: 'getTasks' })
+			.then((tasksData) => {
+				console.log('📋 Initial tasks loaded:', tasksData);
+				dispatch({ type: 'SET_TASKS', payload: tasksData });
+			})
+			.catch((error) => {
+				console.error('❌ Failed to load initial tasks:', error);
+				dispatch({
+					type: 'SET_ERROR',
+					payload: `Failed to load tasks: ${error.message}`
+				});
+			});
+
+		// Request 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 (
+		<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
+						)
+					});
+				}}
+			>
+				{/* Conditional rendering for different views */}
+				{(() => {
+					console.log(
+						'🎯 App 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 })
+								}
+							/>
+						);
+					}
+
+					return <TaskMasterKanban />;
+				})()}
+				<ToastContainer
+					notifications={state.toastNotifications}
+					onDismiss={(id) => dispatch({ type: 'REMOVE_TOAST', payload: id })}
+				/>
+			</ErrorBoundary>
+		</VSCodeContext.Provider>
+	);
+};
diff --git a/apps/extension/src/webview/components/ErrorBoundary.tsx b/apps/extension/src/webview/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..9f654b89
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/apps/extension/src/webview/components/PollingStatus.tsx b/apps/extension/src/webview/components/PollingStatus.tsx
new file mode 100644
index 00000000..7f8ee122
--- /dev/null
+++ b/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;
+};
diff --git a/apps/extension/src/webview/components/PriorityBadge.tsx b/apps/extension/src/webview/components/PriorityBadge.tsx
new file mode 100644
index 00000000..72a422b0
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/webview/components/TagDropdown.tsx b/apps/extension/src/webview/components/TagDropdown.tsx
new file mode 100644
index 00000000..65daee01
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/webview/components/TaskCard.tsx b/apps/extension/src/webview/components/TaskCard.tsx
new file mode 100644
index 00000000..befe8100
--- /dev/null
+++ b/apps/extension/src/webview/components/TaskCard.tsx
@@ -0,0 +1,67 @@
+/**
+ * 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}
+			feature={{
+				id: task.id,
+				title: task.title,
+				column: task.status
+			}}
+			dragging={dragging}
+			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 && (
+						<span className="text-vscode-foreground/50 flex-shrink-0 ml-2">
+							Deps: {task.dependencies.length}
+						</span>
+					)}
+				</div>
+			</div>
+		</KanbanCard>
+	);
+};
diff --git a/apps/extension/src/webview/components/TaskEditModal.tsx b/apps/extension/src/webview/components/TaskEditModal.tsx
new file mode 100644
index 00000000..33e57874
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/webview/components/TaskMasterKanban.tsx b/apps/extension/src/webview/components/TaskMasterKanban.tsx
new file mode 100644
index 00000000..a8eb4d22
--- /dev/null
+++ b/apps/extension/src/webview/components/TaskMasterKanban.tsx
@@ -0,0 +1,363 @@
+/**
+ * Main Kanban Board Component
+ */
+
+import React, { useState, useCallback } from '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 { useVSCodeContext } from '../contexts/VSCodeContext';
+import { kanbanStatuses, HEADER_HEIGHT } from '../constants';
+import type { TaskMasterTask, TaskUpdates } from '../types';
+
+export const TaskMasterKanban: React.FC = () => {
+	const { state, dispatch, sendMessage, availableHeight } = useVSCodeContext();
+	const {
+		tasks,
+		loading,
+		error,
+		editingTask,
+		polling,
+		currentTag,
+		availableTags
+	} = state;
+	const [activeTask, setActiveTask] = useState<TaskMasterTask | null>(null);
+
+	// 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);
+
+		// Optimistic update
+		dispatch({
+			type: 'UPDATE_TASK_CONTENT',
+			payload: { taskId, updates }
+		});
+
+		try {
+			// Send update to extension
+			await sendMessage({
+				type: 'updateTask',
+				data: {
+					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);
+
+			// Revert the optimistic update on error
+			const originalTask = editingTask?.editData;
+			if (originalTask) {
+				dispatch({
+					type: 'UPDATE_TASK_CONTENT',
+					payload: {
+						taskId,
+						updates: {
+							title: originalTask.title,
+							description: originalTask.description,
+							details: originalTask.details,
+							priority: originalTask.priority,
+							testStrategy: originalTask.testStrategy,
+							dependencies: originalTask.dependencies
+						}
+					}
+				});
+			}
+
+			dispatch({
+				type: 'SET_ERROR',
+				payload: `Failed to update task: ${error}`
+			});
+		}
+	};
+
+	// Handle drag start
+	const handleDragStart = useCallback(
+		(taskId: string) => {
+			const task = tasks.find((t) => t.id === taskId);
+			if (task) {
+				setActiveTask(task);
+				dispatch({ type: 'SET_USER_INTERACTING', payload: true });
+			}
+		},
+		[tasks, dispatch]
+	);
+
+	// Handle drag end
+	const handleDragEnd = useCallback(
+		async (event: DragEndEvent) => {
+			dispatch({ type: 'SET_USER_INTERACTING', payload: false });
+			setActiveTask(null);
+
+			const { active, over } = event;
+			if (!over || active.id === over.id) 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) return;
+
+			// Optimistic update
+			dispatch({
+				type: 'UPDATE_TASK_STATUS',
+				payload: { taskId, newStatus }
+			});
+
+			try {
+				// Send update to extension
+				await sendMessage({
+					type: 'updateTaskStatus',
+					data: { taskId, newStatus }
+				});
+			} catch (error) {
+				// Revert on error
+				dispatch({
+					type: 'UPDATE_TASK_STATUS',
+					payload: { taskId, newStatus: task.status }
+				});
+				dispatch({
+					type: 'SET_ERROR',
+					payload: `Failed to update task status: ${error}`
+				});
+			}
+		},
+		[tasks, sendMessage, dispatch]
+	);
+
+	// Handle retry connection
+	const handleRetry = useCallback(() => {
+		sendMessage({ type: 'retryConnection' });
+	}, [sendMessage]);
+
+	// Handle tag switching
+	const handleTagSwitch = useCallback(
+		async (tagName: string) => {
+			console.log('Switching to tag:', tagName);
+			await sendMessage({ type: 'switchTag', data: { tagName } });
+			// After switching tags, fetch the new tasks
+			const tasksData = await sendMessage({ type: 'getTasks' });
+			console.log('Received new tasks for tag', tagName, ':', {
+				tasksData,
+				isArray: Array.isArray(tasksData),
+				count: Array.isArray(tasksData) ? tasksData.length : 'not an array'
+			});
+			dispatch({ type: 'SET_TASKS', payload: tasksData });
+			console.log('Dispatched SET_TASKS');
+		},
+		[sendMessage, dispatch]
+	);
+
+	if (loading) {
+		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 (error) {
+		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: {error}</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">
+							Task Master Kanban
+						</h1>
+						<div className="flex items-center gap-4">
+							<TagDropdown
+								currentTag={currentTag}
+								availableTags={availableTags}
+								onTagSwitch={handleTagSwitch}
+								sendMessage={sendMessage}
+								dispatch={dispatch}
+							/>
+							<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="Task Master 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` }}
+				>
+					<KanbanProvider
+						onDragStart={handleDragStart}
+						onDragEnd={handleDragEnd}
+						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}
+										title={status.name}
+										className={`
+											w-80 flex flex-col
+											border border-vscode-border/30
+											rounded-lg
+											bg-vscode-sidebar-background/50
+										`}
+									>
+										<KanbanHeader
+											name={`${status.name} (${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 column={status.id}>
+												{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 }
+						});
+					}}
+				/>
+			)}
+		</>
+	);
+};
diff --git a/apps/extension/src/webview/components/ToastContainer.tsx b/apps/extension/src/webview/components/ToastContainer.tsx
new file mode 100644
index 00000000..1b654517
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/webview/components/ToastNotification.tsx b/apps/extension/src/webview/components/ToastNotification.tsx
new file mode 100644
index 00000000..7f5c89b4
--- /dev/null
+++ b/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>
+	);
+};
diff --git a/apps/extension/src/webview/constants/index.ts b/apps/extension/src/webview/constants/index.ts
new file mode 100644
index 00000000..7a5516c7
--- /dev/null
+++ b/apps/extension/src/webview/constants/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Application constants
+ */
+
+import type { Status } from '@/components/ui/shadcn-io/kanban';
+
+export const kanbanStatuses: Status[] = [
+	{ id: 'pending', name: 'Pending', color: 'yellow' },
+	{ id: 'in-progress', name: 'In Progress', color: 'blue' },
+	{ id: 'review', name: 'Review', color: 'purple' },
+	{ id: 'done', name: 'Done', color: 'green' },
+	{ id: 'deferred', name: 'Deferred', color: 'gray' }
+];
+
+export const CACHE_DURATION = 30000; // 30 seconds
+export const REQUEST_TIMEOUT = 30000; // 30 seconds
+export const HEADER_HEIGHT = 73; // Header with padding and border
diff --git a/apps/extension/src/webview/contexts/VSCodeContext.tsx b/apps/extension/src/webview/contexts/VSCodeContext.tsx
new file mode 100644
index 00000000..d9cb8a37
--- /dev/null
+++ b/apps/extension/src/webview/contexts/VSCodeContext.tsx
@@ -0,0 +1,32 @@
+/**
+ * VS Code API Context
+ * Provides access to VS Code API and webview state
+ */
+
+import React, { createContext, useContext } from 'react';
+import type { AppState, AppAction, ToastNotification } from '../types';
+
+export interface VSCodeContextValue {
+	vscode?: ReturnType<NonNullable<typeof window.acquireVsCodeApi>>;
+	state: AppState;
+	dispatch: React.Dispatch<AppAction>;
+	sendMessage: (message: any) => Promise<any>;
+	availableHeight: number;
+	// Toast notification functions
+	showSuccessToast: (title: string, message: string, duration?: number) => void;
+	showInfoToast: (title: string, message: string, duration?: number) => void;
+	showWarningToast: (title: string, message: string, duration?: number) => void;
+	showErrorToast: (title: string, message: string, duration?: number) => void;
+}
+
+export const VSCodeContext = createContext<VSCodeContextValue | undefined>(
+	undefined
+);
+
+export const useVSCodeContext = () => {
+	const context = useContext(VSCodeContext);
+	if (!context) {
+		throw new Error('useVSCodeContext must be used within VSCodeProvider');
+	}
+	return context;
+};
diff --git a/apps/extension/src/webview/hooks/useVSCodeMessages.ts b/apps/extension/src/webview/hooks/useVSCodeMessages.ts
new file mode 100644
index 00000000..77fd4db9
--- /dev/null
+++ b/apps/extension/src/webview/hooks/useVSCodeMessages.ts
@@ -0,0 +1,259 @@
+/**
+ * Hook for handling VS Code messages
+ */
+
+import { useEffect, useCallback, useRef } from 'react';
+import type { AppState, AppAction } from '../types';
+import { createToast } from '../utils/toast';
+import { REQUEST_TIMEOUT } from '../constants';
+
+interface PendingRequest {
+	resolve: Function;
+	reject: Function;
+	timeout: NodeJS.Timeout;
+}
+
+let requestCounter = 0;
+
+export const useVSCodeMessages = (
+	vscode: ReturnType<NonNullable<typeof window.acquireVsCodeApi>> | undefined,
+	state: AppState,
+	dispatch: React.Dispatch<AppAction>
+) => {
+	const pendingRequestsRef = useRef(new Map<string, PendingRequest>());
+
+	const sendMessage = useCallback(
+		(message: any): Promise<any> => {
+			if (!vscode) {
+				return Promise.reject(new Error('VS Code API not available'));
+			}
+
+			return new Promise((resolve, reject) => {
+				const requestId = `req_${++requestCounter}_${Date.now()}`;
+
+				const timeout = setTimeout(() => {
+					pendingRequestsRef.current.delete(requestId);
+					reject(new Error('Request timeout'));
+				}, REQUEST_TIMEOUT);
+
+				pendingRequestsRef.current.set(requestId, { resolve, reject, timeout });
+
+				vscode.postMessage({
+					...message,
+					requestId
+				});
+			});
+		},
+		[vscode]
+	);
+
+	useEffect(() => {
+		if (!vscode) return;
+
+		const handleMessage = (event: MessageEvent) => {
+			const message = event.data;
+			console.log('📥 Received message:', message.type, message);
+
+			// Handle request/response pattern
+			if (message.requestId) {
+				const pending = pendingRequestsRef.current.get(message.requestId);
+				if (pending) {
+					clearTimeout(pending.timeout);
+					pendingRequestsRef.current.delete(message.requestId);
+
+					if (message.type === 'response') {
+						// Check for explicit success field, default to true if data exists
+						const isSuccess =
+							message.success !== undefined
+								? message.success
+								: message.data !== undefined;
+						if (isSuccess) {
+							pending.resolve(message.data);
+						} else {
+							pending.reject(new Error(message.error || 'Request failed'));
+						}
+					} else if (message.type === 'error') {
+						pending.reject(new Error(message.error || 'Request failed'));
+					}
+				}
+				return;
+			}
+
+			// Handle other message types
+			switch (message.type) {
+				case 'connectionStatus':
+					dispatch({
+						type: 'SET_CONNECTION_STATUS',
+						payload: {
+							isConnected: message.data?.isConnected || false,
+							status: message.data?.status || 'Unknown'
+						}
+					});
+					break;
+
+				case 'tasksData':
+					console.log('📋 Received tasks data:', message.data);
+					dispatch({ type: 'SET_TASKS', payload: message.data });
+					break;
+
+				case 'tasksUpdated':
+					console.log('📋 Tasks updated:', message.data);
+					// Extract tasks from the data object
+					const tasks = message.data?.tasks || message.data;
+					if (Array.isArray(tasks)) {
+						dispatch({ type: 'SET_TASKS', payload: tasks });
+					}
+					break;
+
+				case 'taskStatusUpdated':
+					console.log('✅ Task status updated:', message);
+					break;
+
+				case 'taskUpdated':
+					console.log('✅ Task content updated:', message);
+					break;
+
+				case 'pollingStatus':
+					dispatch({
+						type: 'SET_POLLING_STATUS',
+						payload: {
+							isActive: message.isActive,
+							errorCount: message.errorCount || 0
+						}
+					});
+					break;
+
+				case 'pollingUpdate':
+					console.log('🔄 Polling update received:', {
+						tasksCount: message.data?.length,
+						userInteracting: state.polling.isUserInteracting,
+						offlineMode: state.polling.isOfflineMode
+					});
+
+					if (
+						!state.polling.isUserInteracting &&
+						!state.polling.isOfflineMode
+					) {
+						dispatch({
+							type: 'TASKS_UPDATED_FROM_POLLING',
+							payload: message.data
+						});
+					}
+					break;
+
+				case 'networkStatus':
+					dispatch({
+						type: 'SET_NETWORK_STATUS',
+						payload: message.data
+					});
+					break;
+
+				case 'cachedTasks':
+					console.log('📦 Received cached tasks:', message.data);
+					dispatch({
+						type: 'LOAD_CACHED_TASKS',
+						payload: message.data
+					});
+					break;
+
+				case 'errorNotification':
+					handleErrorNotification(message, dispatch);
+					break;
+
+				case 'error':
+					handleGeneralError(message, dispatch);
+					break;
+
+				case 'reactError':
+					console.log('🔥 React error reported to extension:', message);
+					dispatch({
+						type: 'ADD_TOAST',
+						payload: createToast(
+							'error',
+							'UI Error',
+							'A component error occurred. The extension may need to be reloaded.',
+							10000
+						)
+					});
+					break;
+
+				default:
+					console.log('❓ Unknown message type:', message.type);
+			}
+		};
+
+		window.addEventListener('message', handleMessage);
+		return () => window.removeEventListener('message', handleMessage);
+	}, [vscode, state.polling, dispatch]);
+
+	return { sendMessage };
+};
+
+function handleErrorNotification(
+	message: any,
+	dispatch: React.Dispatch<AppAction>
+) {
+	console.log('📨 Error notification received:', message);
+	const errorData = message.data;
+
+	// Map severity to toast type
+	let toastType: 'error' | 'warning' | 'info' = 'error';
+	if (errorData.severity === 'high' || errorData.severity === 'critical') {
+		toastType = 'error';
+	} else if (errorData.severity === 'medium') {
+		toastType = 'warning';
+	} else {
+		toastType = 'info';
+	}
+
+	// Create appropriate toast based on error category
+	const title =
+		errorData.category === 'network'
+			? 'Network Error'
+			: errorData.category === 'mcp_connection'
+				? 'Connection Error'
+				: errorData.category === 'task_loading'
+					? 'Task Loading Error'
+					: errorData.category === 'ui_rendering'
+						? 'UI Error'
+						: 'Error';
+
+	dispatch({
+		type: 'ADD_TOAST',
+		payload: createToast(
+			toastType,
+			title,
+			errorData.message,
+			errorData.duration || (toastType === 'error' ? 8000 : 5000)
+		)
+	});
+}
+
+function handleGeneralError(message: any, dispatch: React.Dispatch<AppAction>) {
+	console.log('❌ General error from extension:', message);
+	const errorTitle =
+		message.errorType === 'connection' ? 'Connection Error' : 'Error';
+	const errorMessage = message.error || 'An unknown error occurred';
+
+	dispatch({
+		type: 'SET_ERROR',
+		payload: errorMessage
+	});
+
+	dispatch({
+		type: 'ADD_TOAST',
+		payload: createToast('error', errorTitle, errorMessage, 8000)
+	});
+
+	// Set offline mode for connection errors
+	if (message.errorType === 'connection') {
+		dispatch({
+			type: 'SET_NETWORK_STATUS',
+			payload: {
+				isOfflineMode: true,
+				connectionStatus: 'offline',
+				reconnectAttempts: 0
+			}
+		});
+	}
+}
diff --git a/apps/extension/src/webview/hooks/useWebviewHeight.ts b/apps/extension/src/webview/hooks/useWebviewHeight.ts
new file mode 100644
index 00000000..7f317a16
--- /dev/null
+++ b/apps/extension/src/webview/hooks/useWebviewHeight.ts
@@ -0,0 +1,42 @@
+/**
+ * Hook for managing webview height
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+export const useWebviewHeight = () => {
+	const [availableHeight, setAvailableHeight] = useState<number>(
+		window.innerHeight
+	);
+
+	const updateAvailableHeight = useCallback(() => {
+		const height = window.innerHeight;
+		console.log('📏 Available height updated:', height);
+		setAvailableHeight(height);
+	}, []);
+
+	useEffect(() => {
+		updateAvailableHeight();
+
+		const handleResize = () => {
+			updateAvailableHeight();
+		};
+
+		window.addEventListener('resize', handleResize);
+
+		// Also listen for VS Code specific events if available
+		const handleVisibilityChange = () => {
+			// Small delay to ensure VS Code has finished resizing
+			setTimeout(updateAvailableHeight, 100);
+		};
+
+		document.addEventListener('visibilitychange', handleVisibilityChange);
+
+		return () => {
+			window.removeEventListener('resize', handleResize);
+			document.removeEventListener('visibilitychange', handleVisibilityChange);
+		};
+	}, [updateAvailableHeight]);
+
+	return availableHeight;
+};
diff --git a/apps/extension/src/webview/index.tsx b/apps/extension/src/webview/index.tsx
index 74de8b63..0a23182a 100644
--- a/apps/extension/src/webview/index.tsx
+++ b/apps/extension/src/webview/index.tsx
@@ -1,49 +1,11 @@
-import React, {
-	useState,
-	useEffect,
-	useReducer,
-	useContext,
-	createContext,
-	useCallback
-} from 'react';
+/**
+ * Webview Entry Point
+ */
+
+import React from 'react';
 import { createRoot } from 'react-dom/client';
-
-// Import shadcn Kanban components
-import {
-	KanbanProvider,
-	KanbanBoard,
-	KanbanHeader,
-	KanbanCards,
-	KanbanCard,
-	type DragEndEvent,
-	type Status,
-	type Feature
-} from '@/components/ui/shadcn-io/kanban';
-
-// Import TaskDetailsView component
-import TaskDetailsView from '../components/TaskDetailsView';
-
-// TypeScript interfaces for Task Master integration
-export interface TaskMasterTask {
-	id: string;
-	title: string;
-	description: string;
-	status: 'pending' | 'in-progress' | 'done' | 'deferred' | 'review';
-	priority: 'high' | 'medium' | 'low';
-	dependencies?: string[];
-	details?: string;
-	testStrategy?: string;
-	subtasks?: TaskMasterTask[];
-	complexityScore?: number;
-}
-
-interface WebviewMessage {
-	type: string;
-	requestId?: string;
-	data?: any;
-	success?: boolean;
-	[key: string]: any;
-}
+import { App } from './App';
+// CSS is built separately by Tailwind
 
 // VS Code API declaration
 declare global {
@@ -56,1666 +18,6 @@ declare global {
 	}
 }
 
-// State management types
-interface AppState {
-	tasks: TaskMasterTask[];
-	loading: boolean;
-	error?: string;
-	requestId: number;
-	isConnected: boolean;
-	connectionStatus: string;
-	editingTask?: { taskId: string | null; editData?: TaskMasterTask };
-	polling: {
-		isActive: boolean;
-		errorCount: number;
-		lastUpdate?: number;
-		isUserInteracting: boolean;
-		// Network status
-		isOfflineMode: boolean;
-		reconnectAttempts: number;
-		maxReconnectAttempts: number;
-		lastSuccessfulConnection?: number;
-		connectionStatus: 'online' | 'offline' | 'reconnecting';
-	};
-	// Toast notifications
-	toastNotifications: ToastNotification[];
-	// Navigation state
-	currentView: 'kanban' | 'task-details';
-	selectedTaskId?: string;
-}
-
-// Add interface for task updates
-export interface TaskUpdates {
-	title?: string;
-	description?: string;
-	details?: string;
-	priority?: TaskMasterTask['priority'];
-	testStrategy?: string;
-	dependencies?: string[];
-}
-
-// Add state for task editing
-type AppAction =
-	| { type: 'SET_TASKS'; payload: TaskMasterTask[] }
-	| { type: 'SET_LOADING'; payload: boolean }
-	| { type: 'SET_ERROR'; payload: string }
-	| { type: 'CLEAR_ERROR' }
-	| { type: 'INCREMENT_REQUEST_ID' }
-	| {
-			type: 'UPDATE_TASK_STATUS';
-			payload: { taskId: string; newStatus: TaskMasterTask['status'] };
-	  }
-	| {
-			type: 'UPDATE_TASK_CONTENT';
-			payload: { taskId: string; updates: TaskUpdates };
-	  }
-	| {
-			type: 'SET_CONNECTION_STATUS';
-			payload: { isConnected: boolean; status: string };
-	  }
-	| {
-			type: 'SET_EDITING_TASK';
-			payload: { taskId: string | null; editData?: TaskMasterTask };
-	  }
-	| {
-			type: 'SET_POLLING_STATUS';
-			payload: { isActive: boolean; errorCount?: number };
-	  }
-	| { type: 'SET_USER_INTERACTING'; payload: boolean }
-	| { type: 'TASKS_UPDATED_FROM_POLLING'; payload: TaskMasterTask[] }
-	| {
-			type: 'SET_NETWORK_STATUS';
-			payload: {
-				isOfflineMode: boolean;
-				connectionStatus: 'online' | 'offline' | 'reconnecting';
-				reconnectAttempts?: number;
-				maxReconnectAttempts?: number;
-				lastSuccessfulConnection?: number;
-			};
-	  }
-	| { type: 'LOAD_CACHED_TASKS'; payload: TaskMasterTask[] }
-	| { type: 'ADD_TOAST'; payload: ToastNotification }
-	| { type: 'REMOVE_TOAST'; payload: string }
-	| { type: 'CLEAR_ALL_TOASTS' }
-	| { type: 'NAVIGATE_TO_TASK'; payload: string }
-	| { type: 'NAVIGATE_TO_KANBAN' };
-
-// Toast notification interfaces
-interface ToastNotification {
-	id: string;
-	type: 'success' | 'info' | 'warning' | 'error';
-	title: string;
-	message: string;
-	duration?: number;
-	timestamp: number;
-}
-
-interface ErrorBoundaryState {
-	hasError: boolean;
-	error?: Error;
-	errorInfo?: React.ErrorInfo;
-}
-
-// Error Boundary Component
-class ErrorBoundary extends React.Component<
-	{
-		children: React.ReactNode;
-		onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-	},
-	ErrorBoundaryState
-> {
-	constructor(props: {
-		children: React.ReactNode;
-		onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
-	}) {
-		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 an error:', error, errorInfo);
-
-		this.setState({ error, errorInfo });
-
-		// Notify parent component of error
-		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;
-	}
-}
-
-// Toast Notification Component
-const ToastNotification: React.FC<{
-	notification: ToastNotification;
-	onDismiss: (id: string) => void;
-}> = ({ 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 '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-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L3.732 19c-.77.833.192 2.5 1.732 2.5z"
-						/>
-					</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="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				);
-			default:
-				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>
-				);
-		}
-	};
-
-	const getColorClasses = () => {
-		switch (notification.type) {
-			case 'success':
-				return 'bg-green-500/10 border-green-500/30 text-green-400';
-			case 'warning':
-				return 'bg-yellow-500/10 border-yellow-500/30 text-yellow-400';
-			case 'error':
-				return 'bg-red-500/10 border-red-500/30 text-red-400';
-			default:
-				return 'bg-blue-500/10 border-blue-500/30 text-blue-400';
-		}
-	};
-
-	return (
-		<div
-			className={`
-        transform transition-all duration-300 ease-in-out
-        ${isVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
-        max-w-sm w-full bg-vscode-background border rounded-lg shadow-lg p-4 relative overflow-hidden
-        ${getColorClasses()}
-      `}
-		>
-			<div className="flex items-start gap-3">
-				<div className="flex-shrink-0 mt-0.5">{getIcon()}</div>
-				<div className="flex-1 min-w-0">
-					<p className="text-sm font-medium text-vscode-foreground">
-						{notification.title}
-					</p>
-					<p className="mt-1 text-sm text-vscode-foreground/70">
-						{notification.message}
-					</p>
-				</div>
-				<button
-					onClick={() => onDismiss(notification.id)}
-					className="flex-shrink-0 ml-2 text-vscode-foreground/50 hover:text-vscode-foreground transition-colors"
-				>
-					<svg
-						className="w-4 h-4"
-						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>
-
-			{/* Progress bar */}
-			<div className="absolute bottom-0 left-0 right-0 h-1 bg-black/10">
-				<div
-					className="h-full bg-current transition-all ease-linear"
-					style={{ width: `${progress}%` }}
-				/>
-			</div>
-		</div>
-	);
-};
-
-// Toast Container Component
-const ToastContainer: React.FC<{
-	notifications: ToastNotification[];
-	onDismiss: (id: string) => void;
-}> = ({ notifications, onDismiss }) => {
-	return (
-		<div className="fixed top-4 right-4 z-50 space-y-3 pointer-events-none">
-			<div className="space-y-3">
-				{notifications.map((notification) => (
-					<div key={notification.id} className="pointer-events-auto">
-						<ToastNotification
-							notification={notification}
-							onDismiss={onDismiss}
-						/>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-};
-
-// Toast helper functions
-const createToast = (
-	type: ToastNotification['type'],
-	title: string,
-	message: string,
-	duration?: number
-): ToastNotification => {
-	return {
-		id: `toast_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-		type,
-		title,
-		message,
-		duration,
-		timestamp: Date.now()
-	};
-};
-
-const showSuccessToast =
-	(dispatch: React.Dispatch<AppAction>) =>
-	(title: string, message: string, duration?: number) => {
-		dispatch({
-			type: 'ADD_TOAST',
-			payload: createToast('success', title, message, duration)
-		});
-	};
-
-const showInfoToast =
-	(dispatch: React.Dispatch<AppAction>) =>
-	(title: string, message: string, duration?: number) => {
-		dispatch({
-			type: 'ADD_TOAST',
-			payload: createToast('info', title, message, duration)
-		});
-	};
-
-const showWarningToast =
-	(dispatch: React.Dispatch<AppAction>) =>
-	(title: string, message: string, duration?: number) => {
-		dispatch({
-			type: 'ADD_TOAST',
-			payload: createToast('warning', title, message, duration)
-		});
-	};
-
-const showErrorToast =
-	(dispatch: React.Dispatch<AppAction>) =>
-	(title: string, message: string, duration?: number) => {
-		dispatch({
-			type: 'ADD_TOAST',
-			payload: createToast('error', title, message, duration)
-		});
-	};
-
-// Kanban column configuration
-const kanbanStatuses: Status[] = [
-	{ id: 'pending', name: 'To Do', color: '#6B7280' },
-	{ id: 'in-progress', name: 'In Progress', color: '#F59E0B' },
-	{ id: 'review', name: 'Review', color: '#8B5CF6' },
-	{ id: 'done', name: 'Done', color: '#10B981' },
-	{ id: 'deferred', name: 'Deferred', color: '#EF4444' }
-];
-
-// State reducer
-const appReducer = (state: AppState, action: AppAction): AppState => {
-	switch (action.type) {
-		case 'SET_TASKS':
-			return {
-				...state,
-				tasks: action.payload,
-				loading: false,
-				error: undefined
-			};
-		case 'SET_LOADING':
-			return { ...state, loading: action.payload };
-		case 'SET_ERROR':
-			return { ...state, error: action.payload, loading: false };
-		case 'CLEAR_ERROR':
-			return { ...state, error: undefined };
-		case 'INCREMENT_REQUEST_ID':
-			return { ...state, requestId: state.requestId + 1 };
-		case 'UPDATE_TASK_STATUS':
-			const updatedTasks = state.tasks.map((task) =>
-				task.id === action.payload.taskId
-					? { ...task, status: action.payload.newStatus }
-					: task
-			);
-			return { ...state, tasks: updatedTasks };
-		case 'UPDATE_TASK_CONTENT':
-			const updatedTasksContent = state.tasks.map((task) =>
-				task.id === action.payload.taskId
-					? { ...task, ...action.payload.updates }
-					: task
-			);
-			return { ...state, tasks: updatedTasksContent };
-		case 'SET_CONNECTION_STATUS':
-			return {
-				...state,
-				isConnected: action.payload.isConnected,
-				connectionStatus: action.payload.status
-			};
-		case 'SET_EDITING_TASK':
-			return { ...state, editingTask: action.payload };
-		case 'SET_POLLING_STATUS':
-			return { ...state, polling: { ...state.polling, ...action.payload } };
-		case 'SET_USER_INTERACTING':
-			return {
-				...state,
-				polling: { ...state.polling, isUserInteracting: action.payload }
-			};
-		case 'TASKS_UPDATED_FROM_POLLING':
-			return { ...state, tasks: action.payload };
-		case 'SET_NETWORK_STATUS':
-			return { ...state, polling: { ...state.polling, ...action.payload } };
-		case 'LOAD_CACHED_TASKS':
-			return { ...state, tasks: action.payload };
-		case 'ADD_TOAST':
-			return {
-				...state,
-				toastNotifications: [...state.toastNotifications, action.payload]
-			};
-		case 'REMOVE_TOAST':
-			return {
-				...state,
-				toastNotifications: state.toastNotifications.filter(
-					(n) => n.id !== action.payload
-				)
-			};
-		case 'CLEAR_ALL_TOASTS':
-			return { ...state, toastNotifications: [] };
-		case 'NAVIGATE_TO_TASK':
-			console.log('📍 Reducer: Navigating to task', action.payload);
-			return {
-				...state,
-				currentView: 'task-details',
-				selectedTaskId: action.payload
-			};
-		case 'NAVIGATE_TO_KANBAN':
-			console.log('📍 Reducer: Navigating to kanban');
-			return { ...state, currentView: 'kanban', selectedTaskId: undefined };
-		default:
-			return state;
-	}
-};
-
-// Context for VS Code API
-export const VSCodeContext = createContext<{
-	vscode?: ReturnType<NonNullable<typeof window.acquireVsCodeApi>>;
-	state: AppState;
-	dispatch: React.Dispatch<AppAction>;
-	sendMessage: (message: WebviewMessage) => Promise<any>;
-	availableHeight: number;
-	// Toast notification functions
-	showSuccessToast: (title: string, message: string, duration?: number) => void;
-	showInfoToast: (title: string, message: string, duration?: number) => void;
-	showWarningToast: (title: string, message: string, duration?: number) => void;
-	showErrorToast: (title: string, message: string, duration?: number) => void;
-} | null>(null);
-
-// Priority Badge Component
-const PriorityBadge: React.FC<{ priority: TaskMasterTask['priority'] }> = ({
-	priority
-}) => {
-	const colorMap = {
-		high: 'bg-red-500/20 text-red-400 border-red-500/30',
-		medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
-		low: 'bg-green-500/20 text-green-400 border-green-500/30'
-	};
-
-	return (
-		<span
-			className={`
-        inline-flex items-center justify-center
-        px-2 py-0.5
-        rounded text-xs font-medium border 
-        min-w-[50px]
-        ${colorMap[priority]}
-      `}
-			title={priority}
-		>
-			{priority}
-		</span>
-	);
-};
-
-// Task Edit Modal Component
-const TaskEditModal: React.FC<{
-	task: TaskMasterTask;
-	onSave: (taskId: string, updates: TaskUpdates) => void;
-	onCancel: () => void;
-}> = ({ task, onSave, onCancel }) => {
-	const [formData, setFormData] = useState<TaskUpdates>({
-		title: task.title,
-		description: task.description,
-		details: task.details || '',
-		priority: task.priority,
-		testStrategy: task.testStrategy || '',
-		dependencies: task.dependencies || []
-	});
-
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-
-		// Only include changed fields
-		const updates: TaskUpdates = {};
-		if (formData.title !== task.title) {
-			updates.title = formData.title;
-		}
-		if (formData.description !== task.description) {
-			updates.description = formData.description;
-		}
-		if (formData.details !== task.details) {
-			updates.details = formData.details;
-		}
-		if (formData.priority !== task.priority) {
-			updates.priority = formData.priority;
-		}
-		if (formData.testStrategy !== task.testStrategy) {
-			updates.testStrategy = formData.testStrategy;
-		}
-		if (
-			JSON.stringify(formData.dependencies) !==
-			JSON.stringify(task.dependencies)
-		) {
-			updates.dependencies = formData.dependencies;
-		}
-
-		if (Object.keys(updates).length > 0) {
-			onSave(task.id, updates);
-		} else {
-			onCancel(); // No changes made
-		}
-	};
-
-	const handleDependenciesChange = (value: string) => {
-		const deps = value
-			.split(',')
-			.map((dep) => dep.trim())
-			.filter((dep) => dep.length > 0);
-		setFormData((prev) => ({ ...prev, dependencies: deps }));
-	};
-
-	return (
-		<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-			<div className="bg-vscode-input border border-vscode-border rounded-lg max-w-2xl w-full max-h-[80vh] overflow-y-auto">
-				<div className="p-4 border-b border-vscode-border">
-					<h2 className="text-lg font-semibold text-vscode-foreground">
-						Edit Task #{task.id}
-					</h2>
-				</div>
-
-				<form onSubmit={handleSubmit} className="p-4 space-y-4">
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Title
-						</label>
-						<input
-							type="text"
-							value={formData.title || ''}
-							onChange={(e) =>
-								setFormData((prev) => ({ ...prev, title: e.target.value }))
-							}
-							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-							required
-						/>
-					</div>
-
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Description
-						</label>
-						<textarea
-							value={formData.description || ''}
-							onChange={(e) =>
-								setFormData((prev) => ({
-									...prev,
-									description: e.target.value
-								}))
-							}
-							className="w-full px-3 py-2 bg-input-background border border-border rounded text-input-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-							rows={3}
-							required
-						/>
-					</div>
-
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Priority
-						</label>
-						<select
-							value={formData.priority || 'medium'}
-							onChange={(e) =>
-								setFormData((prev) => ({
-									...prev,
-									priority: e.target.value as TaskMasterTask['priority']
-								}))
-							}
-							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-						>
-							<option value="low">Low</option>
-							<option value="medium">Medium</option>
-							<option value="high">High</option>
-						</select>
-					</div>
-
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Implementation Details
-						</label>
-						<textarea
-							value={formData.details || ''}
-							onChange={(e) =>
-								setFormData((prev) => ({ ...prev, details: e.target.value }))
-							}
-							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-							rows={4}
-							placeholder="Implementation details and notes..."
-						/>
-					</div>
-
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Test Strategy
-						</label>
-						<textarea
-							value={formData.testStrategy || ''}
-							onChange={(e) =>
-								setFormData((prev) => ({
-									...prev,
-									testStrategy: e.target.value
-								}))
-							}
-							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded text-vscode-foreground focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-							rows={2}
-							placeholder="How to test this task..."
-						/>
-					</div>
-
-					<div>
-						<label className="block text-sm font-medium text-vscode-foreground mb-2">
-							Dependencies (comma-separated task IDs)
-						</label>
-						<input
-							type="text"
-							value={formData.dependencies?.join(', ') || ''}
-							onChange={(e) => handleDependenciesChange(e.target.value)}
-							className="w-full px-3 py-2 bg-vscode-input border border-vscode-border rounded text-link focus:outline-none focus:ring-2 focus:ring-vscode-focusBorder"
-							placeholder="1, 2, 3"
-						/>
-					</div>
-
-					<div className="flex justify-end gap-2 pt-4 border-t border-vscode-border">
-						<button
-							type="button"
-							onClick={onCancel}
-							className="px-4 py-2 text-vscode-foreground border border-vscode-border rounded hover:bg-vscode-input/50 transition-colors"
-						>
-							Cancel
-						</button>
-						<button
-							type="submit"
-							className="px-4 py-2 bg-vscode-button-background text-vscode-button-foreground rounded hover:bg-vscode-button-hoverBackground transition-colors"
-						>
-							Save Changes
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	);
-};
-
-// Task Card Component
-const TaskCard: React.FC<{
-	task: TaskMasterTask;
-	index: number;
-	status: string;
-	onEdit?: (task: TaskMasterTask) => void;
-	onViewDetails?: (taskId: string) => void;
-}> = ({ task, index, status, onEdit, onViewDetails }) => {
-	const handleClick = (e: React.MouseEvent) => {
-		onViewDetails?.(task.id);
-	};
-
-	const handleDoubleClick = (e: React.MouseEvent) => {
-		onViewDetails?.(task.id);
-	};
-
-	return (
-		<KanbanCard
-			id={task.id}
-			name={task.title}
-			index={index}
-			parent={status}
-			onClick={handleClick}
-			onDoubleClick={handleDoubleClick}
-			className="
-        w-full
-        min-h-[120px]
-        border border-vscode-border/50
-        bg-card
-        flex-shrink-0
-      "
-		>
-			<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 && (
-						<span className="text-vscode-foreground/50 flex-shrink-0 ml-2">
-							Deps: {task.dependencies.length}
-						</span>
-					)}
-				</div>
-			</div>
-		</KanbanCard>
-	);
-};
-
-// Main Kanban Board Component
-const TaskMasterKanban: React.FC = () => {
-	const context = useContext(VSCodeContext);
-	if (!context) {
-		throw new Error('TaskMasterKanban must be used within VSCodeContext');
-	}
-
-	const { state, dispatch, sendMessage, availableHeight } = context;
-	const {
-		tasks,
-		loading,
-		error,
-		editingTask,
-		polling,
-		currentView,
-		selectedTaskId
-	} = state;
-	const [activeTask, setActiveTask] = React.useState<TaskMasterTask | null>(
-		null
-	);
-
-	// Calculate header height for proper kanban board sizing
-	const headerHeight = 73; // Header with padding and border
-	const kanbanHeight = availableHeight - headerHeight;
-
-	// 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[]>
-	);
-
-	// Handle task update
-	const handleUpdateTask = async (taskId: string, updates: TaskUpdates) => {
-		console.log(`🔄 Updating task ${taskId} content:`, updates);
-
-		// Optimistic update
-		dispatch({
-			type: 'UPDATE_TASK_CONTENT',
-			payload: { taskId, updates }
-		});
-
-		try {
-			// Send update to extension
-			await sendMessage({
-				type: 'updateTask',
-				data: {
-					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);
-
-			// Revert the optimistic update on error
-			const originalTask = editingTask?.editData;
-			if (originalTask) {
-				dispatch({
-					type: 'UPDATE_TASK_CONTENT',
-					payload: {
-						taskId,
-						updates: {
-							title: originalTask.title,
-							description: originalTask.description,
-							details: originalTask.details,
-							priority: originalTask.priority,
-							testStrategy: originalTask.testStrategy,
-							dependencies: originalTask.dependencies
-						}
-					}
-				});
-			}
-
-			dispatch({
-				type: 'SET_ERROR',
-				payload: `Failed to update task: ${error}`
-			});
-		}
-	};
-
-	// Handle drag start - mark user as interacting and set active task
-	const handleDragStart = (event: DragEndEvent) => {
-		console.log('🖱️ User started dragging, pausing updates');
-		dispatch({ type: 'SET_USER_INTERACTING', payload: true });
-
-		const taskId = event.active.id as string;
-		const task = tasks.find((t) => t.id === taskId);
-		setActiveTask(task || null);
-	};
-
-	// Handle drag end - allow updates again after a delay
-	const handleDragEnd = async (event: DragEndEvent) => {
-		const { active, over } = event;
-
-		// Clear active task
-		setActiveTask(null);
-
-		// Re-enable updates after drag completes
-		setTimeout(() => {
-			console.log('✅ Drag completed, resuming updates');
-			dispatch({ type: 'SET_USER_INTERACTING', payload: false });
-		}, 1000); // 1 second delay to ensure smooth completion
-
-		if (!over) {
-			return;
-		}
-
-		const taskId = active.id as string;
-		const newStatus = over.id as TaskMasterTask['status'];
-
-		// Find the task that was moved
-		const task = tasks.find((t) => t.id === taskId);
-		if (!task || task.status === newStatus) {
-			return;
-		}
-
-		console.log(`🔄 Moving task ${taskId} from ${task.status} to ${newStatus}`);
-
-		// Update task status locally (optimistic update)
-		dispatch({
-			type: 'UPDATE_TASK_STATUS',
-			payload: { taskId, newStatus }
-		});
-
-		try {
-			// Send update to extension
-			await sendMessage({
-				type: 'updateTaskStatus',
-				data: { taskId, newStatus, oldStatus: task.status }
-			});
-
-			console.log(`✅ Task ${taskId} status updated successfully`);
-		} catch (error) {
-			console.error(`❌ Failed to update task ${taskId}:`, error);
-
-			// Revert the optimistic update on error
-			dispatch({
-				type: 'UPDATE_TASK_STATUS',
-				payload: { taskId, newStatus: task.status }
-			});
-
-			dispatch({
-				type: 'SET_ERROR',
-				payload: `Failed to update task status: ${error}`
-			});
-		}
-	};
-
-	// Get polling status indicator
-	const getPollingStatusIndicator = () => {
-		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"></div>
-						<span className="text-xs">Offline</span>
-					</div>
-					<button
-						onClick={async () => {
-							try {
-								await sendMessage({ type: 'attemptReconnection' });
-							} catch (error) {
-								console.error('Failed to request reconnection:', error);
-							}
-						}}
-						className="px-2 py-1 text-xs bg-blue-500/20 text-blue-400 border border-blue-500/30 rounded hover:bg-blue-500/30 transition-colors"
-						title="Attempt to reconnect"
-					>
-						Reconnect
-					</button>
-				</div>
-			);
-		} else 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"></div>
-					<span className="text-xs">Reconnecting...</span>
-				</div>
-			);
-		} else if (isActive) {
-			return (
-				<div
-					className="flex items-center gap-1 text-green-400"
-					title="Auto-refresh active"
-				>
-					<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
-					<span className="text-xs">Live</span>
-				</div>
-			);
-		} else if (errorCount > 0) {
-			return (
-				<div
-					className="flex items-center gap-1 text-yellow-400"
-					title="Auto-refresh paused due to errors"
-				>
-					<div className="w-2 h-2 rounded-full bg-yellow-400"></div>
-					<span className="text-xs">Paused</span>
-				</div>
-			);
-		} else {
-			return (
-				<div
-					className="flex items-center gap-1 text-gray-400"
-					title="Auto-refresh off"
-				>
-					<div className="w-2 h-2 rounded-full bg-gray-400"></div>
-					<span className="text-xs">Manual</span>
-				</div>
-			);
-		}
-	};
-
-	if (loading) {
-		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"></div>
-					<p className="text-sm text-vscode-foreground/70">Loading tasks...</p>
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		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: {error}</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">
-							Task Master Kanban
-						</h1>
-						<div className="flex items-center gap-4">
-							{getPollingStatusIndicator()}
-							<div className="flex items-center gap-2">
-								<div
-									className={`w-2 h-2 rounded-full ${state.isConnected ? 'bg-green-400' : 'bg-red-400'}`}
-								></div>
-								<span className="text-xs text-vscode-foreground/70">
-									{state.connectionStatus}
-								</span>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div
-					className="flex-1 px-4 py-4 overflow-hidden"
-					style={{ height: `${kanbanHeight}px` }}
-				>
-					<KanbanProvider
-						onDragStart={handleDragStart}
-						onDragEnd={handleDragEnd}
-						className="
-              kanban-container
-              w-full h-full
-              overflow-x-auto overflow-y-hidden
-            "
-						dragOverlay={
-							activeTask ? (
-								<TaskCard
-									task={activeTask}
-									index={0}
-									status={activeTask.status}
-									onEdit={() => {}}
-									onViewDetails={() => {}}
-								/>
-							) : null
-						}
-					>
-						<div
-							className="
-              flex gap-4 
-              min-w-max
-              h-full
-              pb-2
-            "
-						>
-							{kanbanStatuses.map((status) => {
-								const columnHeaderHeight = 49; // Header with padding and border
-								const columnPadding = 16; // p-2 = 8px top + 8px bottom
-								const availableColumnHeight =
-									kanbanHeight - columnHeaderHeight - columnPadding;
-
-								return (
-									<KanbanBoard
-										key={status.id}
-										id={status.id}
-										className="
-                      kanban-column
-                      flex-shrink-0
-                      min-w-[280px] max-w-[320px] w-[280px]
-                      h-full
-                      flex flex-col
-                      border border-vscode-border/30
-                      rounded-lg
-                      bg-vscode-sidebar-background/50
-                    "
-									>
-										<KanbanHeader
-											name={`${status.name} (${tasksByStatus[status.id]?.length || 0})`}
-											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
-                      "
-											style={{
-												height: `${availableColumnHeight}px`,
-												maxHeight: `${availableColumnHeight}px`
-											}}
-										>
-											<KanbanCards className="flex flex-col gap-2">
-												{tasksByStatus[status.id]?.map((task, index) => (
-													<TaskCard
-														key={task.id}
-														task={task}
-														index={index}
-														status={status.id}
-														onEdit={(task) => {
-															dispatch({
-																type: 'SET_EDITING_TASK',
-																payload: { taskId: task.id, editData: 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={async (taskId, updates) => {
-						await handleUpdateTask(taskId, updates);
-					}}
-					onCancel={() => {
-						dispatch({
-							type: 'SET_EDITING_TASK',
-							payload: { taskId: null }
-						});
-					}}
-				/>
-			)}
-		</>
-	);
-};
-
-// Main App Component
-const App: React.FC = () => {
-	const [state, dispatch] = useReducer(appReducer, {
-		tasks: [],
-		loading: true,
-		requestId: 0,
-		isConnected: false,
-		connectionStatus: 'Connecting...',
-		editingTask: { taskId: null },
-		polling: {
-			isActive: false,
-			errorCount: 0,
-			lastUpdate: undefined,
-			isUserInteracting: false,
-			// Network status
-			isOfflineMode: false,
-			reconnectAttempts: 0,
-			maxReconnectAttempts: 0,
-			lastSuccessfulConnection: undefined,
-			connectionStatus: 'online'
-		},
-		toastNotifications: [],
-		currentView: 'kanban',
-		selectedTaskId: undefined
-	});
-
-	const [vscode] = useState(() => {
-		return window.acquireVsCodeApi?.();
-	});
-
-	const [pendingRequests] = useState(
-		new Map<
-			string,
-			{ resolve: Function; reject: Function; timeout: NodeJS.Timeout }
-		>()
-	);
-
-	// Dynamic height calculation state
-	const [availableHeight, setAvailableHeight] = useState<number>(
-		window.innerHeight
-	);
-
-	// Calculate available height for kanban board
-	const updateAvailableHeight = useCallback(() => {
-		// Use window.innerHeight to get the actual available space
-		// This automatically accounts for VS Code panels like terminal, problems, etc.
-		const height = window.innerHeight;
-		console.log('📏 Available height updated:', height);
-		setAvailableHeight(height);
-	}, []);
-
-	// Listen to resize events to handle VS Code panel changes
-	useEffect(() => {
-		updateAvailableHeight();
-
-		const handleResize = () => {
-			updateAvailableHeight();
-		};
-
-		window.addEventListener('resize', handleResize);
-
-		// Also listen for VS Code specific events if available
-		const handleVisibilityChange = () => {
-			// Small delay to ensure VS Code has finished resizing
-			setTimeout(updateAvailableHeight, 100);
-		};
-
-		document.addEventListener('visibilitychange', handleVisibilityChange);
-
-		return () => {
-			window.removeEventListener('resize', handleResize);
-			document.removeEventListener('visibilitychange', handleVisibilityChange);
-		};
-	}, [updateAvailableHeight]);
-
-	// Send message to extension with promise-based response handling
-	const sendMessage = useCallback(
-		async (message: WebviewMessage): Promise<any> => {
-			if (!vscode) {
-				throw new Error('VS Code API not available');
-			}
-
-			return new Promise((resolve, reject) => {
-				const requestId = `${Date.now()}-${Math.random()}`;
-				const messageWithId = { ...message, requestId };
-
-				// Set up timeout
-				const timeout = setTimeout(() => {
-					pendingRequests.delete(requestId);
-					reject(new Error('Request timeout'));
-				}, 10000); // 10 second timeout
-
-				// Store the promise resolvers
-				pendingRequests.set(requestId, { resolve, reject, timeout });
-
-				// Send the message
-				vscode.postMessage(messageWithId);
-			});
-		},
-		[vscode, pendingRequests]
-	);
-
-	// Handle messages from extension
-	useEffect(() => {
-		if (!vscode) {
-			return;
-		}
-
-		const handleMessage = (event: MessageEvent) => {
-			const message: WebviewMessage = event.data;
-			console.log('📨 Received message from extension:', message);
-
-			// Handle response to a pending request
-			if (message.requestId && pendingRequests.has(message.requestId)) {
-				const { resolve, reject, timeout } = pendingRequests.get(
-					message.requestId
-				)!;
-				clearTimeout(timeout);
-				pendingRequests.delete(message.requestId);
-
-				if (message.type === 'error') {
-					reject(new Error(message.error || 'Unknown error'));
-				} else {
-					resolve(message.data || message);
-				}
-				return;
-			}
-
-			// Handle different message types
-			switch (message.type) {
-				case 'init':
-					console.log('🚀 Extension initialized:', message.data);
-					dispatch({
-						type: 'SET_CONNECTION_STATUS',
-						payload: { isConnected: true, status: 'Connected' }
-					});
-					break;
-
-				case 'tasksData':
-					console.log('📋 Received tasks data:', message.data);
-					dispatch({ type: 'SET_TASKS', payload: message.data });
-					break;
-
-				case 'taskStatusUpdated':
-					console.log('✅ Task status updated:', message);
-					// Status is already updated optimistically, no need to update again
-					break;
-
-				case 'taskUpdated':
-					console.log('✅ Task content updated:', message);
-					// Content is already updated optimistically, no need to update again
-					break;
-
-				case 'tasksUpdated':
-					console.log('📡 Tasks updated from polling:', message);
-					// Only update if user is not currently interacting
-					if (!state.polling.isUserInteracting) {
-						dispatch({
-							type: 'TASKS_UPDATED_FROM_POLLING',
-							payload: message.data
-						});
-						dispatch({
-							type: 'SET_POLLING_STATUS',
-							payload: { isActive: true, errorCount: 0 }
-						});
-					} else {
-						console.log('⏸️ Skipping update due to user interaction');
-					}
-					break;
-
-				case 'pollingError':
-					console.log('❌ Polling error:', message);
-					dispatch({
-						type: 'SET_POLLING_STATUS',
-						payload: {
-							isActive: false,
-							errorCount: (state.polling.errorCount || 0) + 1
-						}
-					});
-					dispatch({
-						type: 'SET_ERROR',
-						payload: `Auto-refresh stopped: ${message.error}`
-					});
-					break;
-
-				case 'pollingStarted':
-					console.log('🔄 Polling started');
-					dispatch({
-						type: 'SET_POLLING_STATUS',
-						payload: { isActive: true, errorCount: 0 }
-					});
-					break;
-
-				case 'pollingStopped':
-					console.log('⏹️ Polling stopped');
-					dispatch({
-						type: 'SET_POLLING_STATUS',
-						payload: { isActive: false }
-					});
-					break;
-
-				case 'connectionStatusUpdate':
-					console.log('📡 Connection status update:', message);
-					dispatch({
-						type: 'SET_NETWORK_STATUS',
-						payload: {
-							isOfflineMode: message.data.isOfflineMode,
-							connectionStatus: message.data.status,
-							reconnectAttempts: message.data.reconnectAttempts,
-							maxReconnectAttempts: message.data.maxReconnectAttempts
-						}
-					});
-					break;
-
-				case 'networkOffline':
-					console.log('🔌 Network offline, loading cached tasks:', message);
-					dispatch({
-						type: 'SET_NETWORK_STATUS',
-						payload: {
-							isOfflineMode: true,
-							connectionStatus: 'offline',
-							reconnectAttempts: message.data.reconnectAttempts,
-							lastSuccessfulConnection: message.data.lastSuccessfulConnection
-						}
-					});
-
-					// Load cached tasks if available
-					if (message.data.cachedTasks && message.data.cachedTasks.length > 0) {
-						dispatch({
-							type: 'LOAD_CACHED_TASKS',
-							payload: message.data.cachedTasks
-						});
-					}
-					break;
-
-				case 'reconnectionAttempted':
-					console.log('🔄 Reconnection attempted:', message);
-					if (message.success) {
-						dispatch({
-							type: 'CLEAR_ERROR'
-						});
-					}
-					break;
-
-				case 'errorNotification':
-					console.log('⚠️ Error notification from extension:', message);
-					const errorData = message.data;
-
-					// Map error severity to toast type
-					let toastType: ToastNotification['type'] = 'error';
-					if (errorData.severity === 'low') {
-						toastType = 'info';
-					} else if (errorData.severity === 'medium') {
-						toastType = 'warning';
-					} else if (
-						errorData.severity === 'high' ||
-						errorData.severity === 'critical'
-					) {
-						toastType = 'error';
-					}
-
-					// Create appropriate toast based on error category
-					const title =
-						errorData.category === 'network'
-							? 'Network Error'
-							: errorData.category === 'mcp_connection'
-								? 'Connection Error'
-								: errorData.category === 'task_loading'
-									? 'Task Loading Error'
-									: errorData.category === 'ui_rendering'
-										? 'UI Error'
-										: 'Error';
-
-					dispatch({
-						type: 'ADD_TOAST',
-						payload: createToast(
-							toastType,
-							title,
-							errorData.message,
-							errorData.duration || (toastType === 'error' ? 8000 : 5000) // Use preference duration or fallback
-						)
-					});
-					break;
-
-				case 'error':
-					console.log('❌ General error from extension:', message);
-					const errorTitle =
-						message.errorType === 'connection' ? 'Connection Error' : 'Error';
-					const errorMessage = message.error || 'An unknown error occurred';
-
-					dispatch({
-						type: 'SET_ERROR',
-						payload: errorMessage
-					});
-
-					dispatch({
-						type: 'ADD_TOAST',
-						payload: createToast('error', errorTitle, errorMessage, 8000)
-					});
-
-					// Set offline mode for connection errors
-					if (message.errorType === 'connection') {
-						dispatch({
-							type: 'SET_NETWORK_STATUS',
-							payload: {
-								isOfflineMode: true,
-								connectionStatus: 'offline',
-								reconnectAttempts: 0
-							}
-						});
-					}
-					break;
-
-				case 'reactError':
-					console.log('🔥 React error reported to extension:', message);
-					// Show a toast for React errors too
-					dispatch({
-						type: 'ADD_TOAST',
-						payload: createToast(
-							'error',
-							'UI Error',
-							'A component error occurred. The extension may need to be reloaded.',
-							10000
-						)
-					});
-					break;
-
-				default:
-					console.log('❓ Unknown message type:', message.type);
-			}
-		};
-
-		window.addEventListener('message', handleMessage);
-		return () => window.removeEventListener('message', handleMessage);
-	}, [vscode, pendingRequests, state.polling]);
-
-	// Initialize the webview
-	useEffect(() => {
-		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' });
-
-		// Request initial tasks data
-		sendMessage({ type: 'getTasks' })
-			.then((tasksData) => {
-				console.log('📋 Initial tasks loaded:', tasksData);
-				dispatch({ type: 'SET_TASKS', payload: tasksData });
-			})
-			.catch((error) => {
-				console.error('❌ Failed to load initial tasks:', error);
-				dispatch({
-					type: 'SET_ERROR',
-					payload: `Failed to load tasks: ${error.message}`
-				});
-			});
-	}, [vscode, sendMessage]);
-
-	const contextValue = {
-		vscode,
-		state,
-		dispatch,
-		sendMessage,
-		availableHeight,
-		// Toast notification functions
-		showSuccessToast: showSuccessToast(dispatch),
-		showInfoToast: showInfoToast(dispatch),
-		showWarningToast: showWarningToast(dispatch),
-		showErrorToast: showErrorToast(dispatch)
-	};
-
-	return (
-		<VSCodeContext.Provider value={contextValue}>
-			<ErrorBoundary
-				onError={(error, errorInfo) => {
-					// Handle React errors and show appropriate toast
-					dispatch({
-						type: 'ADD_TOAST',
-						payload: createToast(
-							'error',
-							'Component Error',
-							`A React component crashed: ${error.message}`,
-							10000
-						)
-					});
-				}}
-			>
-				{/* Conditional rendering for different views */}
-				{(() => {
-					console.log(
-						'🎯 App render - currentView:',
-						state.currentView,
-						'selectedTaskId:',
-						state.selectedTaskId
-					);
-					return state.currentView === 'task-details' &&
-						state.selectedTaskId ? (
-						<TaskDetailsView
-							taskId={state.selectedTaskId}
-							onNavigateBack={() => dispatch({ type: 'NAVIGATE_TO_KANBAN' })}
-							onNavigateToTask={(taskId: string) =>
-								dispatch({ type: 'NAVIGATE_TO_TASK', payload: taskId })
-							}
-						/>
-					) : (
-						<TaskMasterKanban />
-					);
-				})()}
-				<ToastContainer
-					notifications={state.toastNotifications}
-					onDismiss={(id) => dispatch({ type: 'REMOVE_TOAST', payload: id })}
-				/>
-			</ErrorBoundary>
-		</VSCodeContext.Provider>
-	);
-};
-
 // Initialize React app
 const container = document.getElementById('root');
 if (container) {
diff --git a/apps/extension/src/webview/reducers/appReducer.ts b/apps/extension/src/webview/reducers/appReducer.ts
new file mode 100644
index 00000000..ba6d28dd
--- /dev/null
+++ b/apps/extension/src/webview/reducers/appReducer.ts
@@ -0,0 +1,187 @@
+/**
+ * Main application state reducer
+ */
+
+import type { AppState, AppAction } from '../types';
+
+export const appReducer = (state: AppState, action: AppAction): AppState => {
+	console.log('Reducer action:', action.type, action.payload);
+	switch (action.type) {
+		case 'SET_TASKS':
+			const newTasks = Array.isArray(action.payload) ? action.payload : [];
+			console.log('SET_TASKS reducer - updating tasks:', {
+				oldCount: state.tasks.length,
+				newCount: newTasks.length,
+				newTasks
+			});
+			return {
+				...state,
+				tasks: newTasks,
+				loading: false,
+				error: undefined
+			};
+		case 'SET_LOADING':
+			return { ...state, loading: action.payload };
+		case 'SET_ERROR':
+			return { ...state, error: action.payload, loading: false };
+		case 'CLEAR_ERROR':
+			return { ...state, error: undefined };
+		case 'INCREMENT_REQUEST_ID':
+			return { ...state, requestId: state.requestId + 1 };
+		case 'UPDATE_TASK_STATUS': {
+			const { taskId, newStatus } = action.payload;
+			return {
+				...state,
+				tasks: state.tasks.map((task) =>
+					task.id === taskId ? { ...task, status: newStatus } : task
+				)
+			};
+		}
+		case 'UPDATE_TASK_CONTENT': {
+			const { taskId, updates } = action.payload;
+			return {
+				...state,
+				tasks: state.tasks.map((task) =>
+					task.id === taskId ? { ...task, ...updates } : task
+				)
+			};
+		}
+		case 'SET_CONNECTION_STATUS':
+			return {
+				...state,
+				isConnected: action.payload.isConnected,
+				connectionStatus: action.payload.status
+			};
+		case 'SET_EDITING_TASK':
+			return {
+				...state,
+				editingTask: action.payload
+			};
+		case 'SET_POLLING_STATUS':
+			return {
+				...state,
+				polling: {
+					...state.polling,
+					isActive: action.payload.isActive,
+					errorCount: action.payload.errorCount ?? state.polling.errorCount,
+					lastUpdate: action.payload.isActive
+						? Date.now()
+						: state.polling.lastUpdate
+				}
+			};
+		case 'SET_USER_INTERACTING':
+			return {
+				...state,
+				polling: {
+					...state.polling,
+					isUserInteracting: action.payload
+				}
+			};
+		case 'TASKS_UPDATED_FROM_POLLING':
+			return {
+				...state,
+				tasks: Array.isArray(action.payload) ? action.payload : [],
+				polling: {
+					...state.polling,
+					lastUpdate: Date.now()
+				}
+			};
+		case 'SET_NETWORK_STATUS':
+			return {
+				...state,
+				polling: {
+					...state.polling,
+					isOfflineMode: action.payload.isOfflineMode,
+					connectionStatus: action.payload.connectionStatus,
+					reconnectAttempts:
+						action.payload.reconnectAttempts !== undefined
+							? action.payload.reconnectAttempts
+							: state.polling.reconnectAttempts,
+					maxReconnectAttempts:
+						action.payload.maxReconnectAttempts !== undefined
+							? action.payload.maxReconnectAttempts
+							: state.polling.maxReconnectAttempts,
+					lastSuccessfulConnection:
+						action.payload.lastSuccessfulConnection !== undefined
+							? action.payload.lastSuccessfulConnection
+							: state.polling.lastSuccessfulConnection
+				}
+			};
+		case 'LOAD_CACHED_TASKS':
+			return {
+				...state,
+				tasks: Array.isArray(action.payload) ? action.payload : []
+			};
+		case 'ADD_TOAST':
+			return {
+				...state,
+				toastNotifications: [...state.toastNotifications, action.payload]
+			};
+		case 'REMOVE_TOAST':
+			return {
+				...state,
+				toastNotifications: state.toastNotifications.filter(
+					(notification) => notification.id !== action.payload
+				)
+			};
+		case 'CLEAR_ALL_TOASTS':
+			return { ...state, toastNotifications: [] };
+		case 'NAVIGATE_TO_TASK':
+			console.log('📍 Reducer: Navigating to task:', action.payload);
+			return {
+				...state,
+				currentView: 'task-details',
+				selectedTaskId: action.payload
+			};
+		case 'NAVIGATE_TO_KANBAN':
+			console.log('📍 Reducer: Navigating to kanban');
+			return { ...state, currentView: 'kanban', selectedTaskId: undefined };
+		case 'NAVIGATE_TO_CONFIG':
+			console.log('📍 Reducer: Navigating to config');
+			return { ...state, currentView: 'config', selectedTaskId: undefined };
+		case 'SET_CURRENT_TAG':
+			return {
+				...state,
+				currentTag: action.payload
+			};
+		case 'SET_AVAILABLE_TAGS':
+			return {
+				...state,
+				availableTags: action.payload
+			};
+		case 'SET_TAG_DATA':
+			return {
+				...state,
+				currentTag: action.payload.currentTag,
+				availableTags: action.payload.availableTags
+			};
+		default:
+			return state;
+	}
+};
+
+export const initialState: AppState = {
+	tasks: [],
+	loading: true,
+	requestId: 0,
+	isConnected: false,
+	connectionStatus: 'Connecting...',
+	editingTask: { taskId: null },
+	polling: {
+		isActive: false,
+		errorCount: 0,
+		lastUpdate: undefined,
+		isUserInteracting: false,
+		isOfflineMode: false,
+		reconnectAttempts: 0,
+		maxReconnectAttempts: 0,
+		lastSuccessfulConnection: undefined,
+		connectionStatus: 'online'
+	},
+	toastNotifications: [],
+	currentView: 'kanban',
+	selectedTaskId: undefined,
+	// Tag-related state
+	currentTag: 'master',
+	availableTags: ['master']
+};
diff --git a/apps/extension/src/webview/types/index.ts b/apps/extension/src/webview/types/index.ts
new file mode 100644
index 00000000..21765104
--- /dev/null
+++ b/apps/extension/src/webview/types/index.ts
@@ -0,0 +1,120 @@
+/**
+ * Shared types for the webview application
+ */
+
+export interface TaskMasterTask {
+	id: string;
+	title: string;
+	description: string;
+	status: 'pending' | 'in-progress' | 'done' | 'deferred' | 'review';
+	priority: 'high' | 'medium' | 'low';
+	dependencies?: string[];
+	details?: string;
+	testStrategy?: string;
+	subtasks?: TaskMasterTask[];
+	complexityScore?: number;
+}
+
+export interface TaskUpdates {
+	title?: string;
+	description?: string;
+	details?: string;
+	priority?: TaskMasterTask['priority'];
+	testStrategy?: string;
+	dependencies?: string[];
+}
+
+export interface WebviewMessage {
+	type: string;
+	requestId?: string;
+	data?: any;
+	success?: boolean;
+	[key: string]: any;
+}
+
+export interface ToastNotification {
+	id: string;
+	type: 'success' | 'info' | 'warning' | 'error';
+	title: string;
+	message: string;
+	duration?: number;
+}
+
+export interface AppState {
+	tasks: TaskMasterTask[];
+	loading: boolean;
+	error?: string;
+	requestId: number;
+	isConnected: boolean;
+	connectionStatus: string;
+	editingTask?: { taskId: string | null; editData?: TaskMasterTask };
+	polling: {
+		isActive: boolean;
+		errorCount: number;
+		lastUpdate?: number;
+		isUserInteracting: boolean;
+		isOfflineMode: boolean;
+		reconnectAttempts: number;
+		maxReconnectAttempts: number;
+		lastSuccessfulConnection?: number;
+		connectionStatus: 'online' | 'offline' | 'reconnecting';
+	};
+	toastNotifications: ToastNotification[];
+	currentView: 'kanban' | 'task-details' | 'config';
+	selectedTaskId?: string;
+	// Tag-related state
+	currentTag: string;
+	availableTags: string[];
+}
+
+export type AppAction =
+	| { type: 'SET_TASKS'; payload: TaskMasterTask[] }
+	| { type: 'SET_LOADING'; payload: boolean }
+	| { type: 'SET_ERROR'; payload: string }
+	| { type: 'CLEAR_ERROR' }
+	| { type: 'INCREMENT_REQUEST_ID' }
+	| {
+			type: 'UPDATE_TASK_STATUS';
+			payload: { taskId: string; newStatus: TaskMasterTask['status'] };
+	  }
+	| {
+			type: 'UPDATE_TASK_CONTENT';
+			payload: { taskId: string; updates: TaskUpdates };
+	  }
+	| {
+			type: 'SET_CONNECTION_STATUS';
+			payload: { isConnected: boolean; status: string };
+	  }
+	| {
+			type: 'SET_EDITING_TASK';
+			payload: { taskId: string | null; editData?: TaskMasterTask };
+	  }
+	| {
+			type: 'SET_POLLING_STATUS';
+			payload: { isActive: boolean; errorCount?: number };
+	  }
+	| { type: 'SET_USER_INTERACTING'; payload: boolean }
+	| { type: 'TASKS_UPDATED_FROM_POLLING'; payload: TaskMasterTask[] }
+	| {
+			type: 'SET_NETWORK_STATUS';
+			payload: {
+				isOfflineMode: boolean;
+				connectionStatus: 'online' | 'offline' | 'reconnecting';
+				reconnectAttempts?: number;
+				maxReconnectAttempts?: number;
+				lastSuccessfulConnection?: number;
+			};
+	  }
+	| { type: 'LOAD_CACHED_TASKS'; payload: TaskMasterTask[] }
+	| { type: 'ADD_TOAST'; payload: ToastNotification }
+	| { type: 'REMOVE_TOAST'; payload: string }
+	| { type: 'CLEAR_ALL_TOASTS' }
+	| { type: 'NAVIGATE_TO_TASK'; payload: string }
+	| { type: 'NAVIGATE_TO_KANBAN' }
+	| { type: 'NAVIGATE_TO_CONFIG' }
+	| { type: 'SET_CURRENT_TAG'; payload: string }
+	| { type: 'SET_AVAILABLE_TAGS'; payload: string[] }
+	| {
+			type: 'SET_TAG_DATA';
+			payload: { currentTag: string; availableTags: string[] };
+	  };
diff --git a/apps/extension/src/webview/utils/toast.ts b/apps/extension/src/webview/utils/toast.ts
new file mode 100644
index 00000000..d5979947
--- /dev/null
+++ b/apps/extension/src/webview/utils/toast.ts
@@ -0,0 +1,56 @@
+/**
+ * Toast notification utilities
+ */
+
+import type { ToastNotification, AppAction } from '../types';
+
+let toastIdCounter = 0;
+
+export const createToast = (
+	type: ToastNotification['type'],
+	title: string,
+	message: string,
+	duration?: number
+): ToastNotification => ({
+	id: `toast-${++toastIdCounter}`,
+	type,
+	title,
+	message,
+	duration
+});
+
+export const showSuccessToast =
+	(dispatch: React.Dispatch<AppAction>) =>
+	(title: string, message: string, duration?: number) => {
+		dispatch({
+			type: 'ADD_TOAST',
+			payload: createToast('success', title, message, duration)
+		});
+	};
+
+export const showInfoToast =
+	(dispatch: React.Dispatch<AppAction>) =>
+	(title: string, message: string, duration?: number) => {
+		dispatch({
+			type: 'ADD_TOAST',
+			payload: createToast('info', title, message, duration)
+		});
+	};
+
+export const showWarningToast =
+	(dispatch: React.Dispatch<AppAction>) =>
+	(title: string, message: string, duration?: number) => {
+		dispatch({
+			type: 'ADD_TOAST',
+			payload: createToast('warning', title, message, duration)
+		});
+	};
+
+export const showErrorToast =
+	(dispatch: React.Dispatch<AppAction>) =>
+	(title: string, message: string, duration?: number) => {
+		dispatch({
+			type: 'ADD_TOAST',
+			payload: createToast('error', title, message, duration)
+		});
+	};
diff --git a/biome.json b/biome.json
index 95635649..6495d3b5 100644
--- a/biome.json
+++ b/biome.json
@@ -24,7 +24,11 @@
 		}
 	},
 	"linter": {
+		"enabled": true,
+		"include": ["apps/extension/**/*.ts", "apps/extension/**/*.tsx"],
+		"ignore": ["**/*", "!apps/extension/**/*"],
 		"rules": {
+			"recommended": true,
 			"complexity": {
 				"noForEach": "off",
 				"useOptionalChain": "off",
@@ -44,7 +48,8 @@
 				"useNumberNamespace": "off",
 				"noParameterAssign": "off",
 				"useTemplate": "off",
-				"noUnusedTemplateLiteral": "off"
+				"noUnusedTemplateLiteral": "off",
+				"noNonNullAssertion": "warn"
 			}
 		}
 	}
diff --git a/package-lock.json b/package-lock.json
index 54f3c242..c41a3f50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -89,6 +89,7 @@
 			"name": "taskr",
 			"version": "1.1.0",
 			"devDependencies": {
+				"@biomejs/biome": "^2.1.2",
 				"@dnd-kit/core": "^6.3.1",
 				"@dnd-kit/modifiers": "^9.0.0",
 				"@modelcontextprotocol/sdk": "1.13.3",
@@ -105,8 +106,6 @@
 				"@types/react": "19.1.8",
 				"@types/react-dom": "19.1.6",
 				"@types/vscode": "^1.101.0",
-				"@typescript-eslint/eslint-plugin": "^8.31.1",
-				"@typescript-eslint/parser": "^8.31.1",
 				"@vscode/test-cli": "^0.0.11",
 				"@vscode/test-electron": "^2.5.2",
 				"@vscode/vsce": "^2.32.0",
@@ -115,7 +114,6 @@
 				"clsx": "^2.1.1",
 				"esbuild": "^0.25.3",
 				"esbuild-postcss": "^0.0.4",
-				"eslint": "^9.25.1",
 				"fs-extra": "^11.3.0",
 				"lucide-react": "^0.525.0",
 				"npm-run-all": "^4.1.5",
@@ -128,6 +126,67 @@
 				"vscode": "^1.93.0"
 			}
 		},
+		"apps/extension/node_modules/@biomejs/biome": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.1.2.tgz",
+			"integrity": "sha512-yq8ZZuKuBVDgAS76LWCfFKHSYIAgqkxVB3mGVVpOe2vSkUTs7xG46zXZeNPRNVjiJuw0SZ3+J2rXiYx0RUpfGg==",
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"bin": {
+				"biome": "bin/biome"
+			},
+			"engines": {
+				"node": ">=14.21.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/biome"
+			},
+			"optionalDependencies": {
+				"@biomejs/cli-darwin-arm64": "2.1.2",
+				"@biomejs/cli-darwin-x64": "2.1.2",
+				"@biomejs/cli-linux-arm64": "2.1.2",
+				"@biomejs/cli-linux-arm64-musl": "2.1.2",
+				"@biomejs/cli-linux-x64": "2.1.2",
+				"@biomejs/cli-linux-x64-musl": "2.1.2",
+				"@biomejs/cli-win32-arm64": "2.1.2",
+				"@biomejs/cli-win32-x64": "2.1.2"
+			}
+		},
+		"apps/extension/node_modules/@biomejs/cli-darwin-arm64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.1.2.tgz",
+			"integrity": "sha512-leFAks64PEIjc7MY/cLjE8u5OcfBKkcDB0szxsWUB4aDfemBep1WVKt0qrEyqZBOW8LPHzrFMyDl3FhuuA0E7g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"apps/extension/node_modules/@biomejs/cli-linux-x64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.1.2.tgz",
+			"integrity": "sha512-Km/UYeVowygTjpX6sGBzlizjakLoMQkxWbruVZSNE6osuSI63i4uCeIL+6q2AJlD3dxoiBJX70dn1enjQnQqwA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"apps/extension/node_modules/@dnd-kit/core": {
 			"version": "6.3.1",
 			"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
@@ -2808,6 +2867,108 @@
 				"@biomejs/cli-win32-x64": "1.9.4"
 			}
 		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-darwin-x64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.9.4.tgz",
+			"integrity": "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-linux-arm64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.9.4.tgz",
+			"integrity": "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-linux-arm64-musl": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.9.4.tgz",
+			"integrity": "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-linux-x64-musl": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.9.4.tgz",
+			"integrity": "sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-win32-arm64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.9.4.tgz",
+			"integrity": "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/biome/node_modules/@biomejs/cli-win32-x64": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.9.4.tgz",
+			"integrity": "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"node_modules/@biomejs/cli-darwin-arm64": {
 			"version": "1.9.4",
 			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.4.tgz",
@@ -2825,6 +2986,57 @@
 				"node": ">=14.21.3"
 			}
 		},
+		"node_modules/@biomejs/cli-darwin-x64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.1.2.tgz",
+			"integrity": "sha512-Nmmv7wRX5Nj7lGmz0FjnWdflJg4zii8Ivruas6PBKzw5SJX/q+Zh2RfnO+bBnuKLXpj8kiI2x2X12otpH6a32A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.1.2.tgz",
+			"integrity": "sha512-NWNy2Diocav61HZiv2enTQykbPP/KrA/baS7JsLSojC7Xxh2nl9IczuvE5UID7+ksRy2e7yH7klm/WkA72G1dw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-linux-arm64-musl": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.1.2.tgz",
+			"integrity": "sha512-qgHvafhjH7Oca114FdOScmIKf1DlXT1LqbOrrbR30kQDLFPEOpBG0uzx6MhmsrmhGiCFCr2obDamu+czk+X0HQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"node_modules/@biomejs/cli-linux-x64": {
 			"version": "1.9.4",
 			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.9.4.tgz",
@@ -2841,6 +3053,57 @@
 				"node": ">=14.21.3"
 			}
 		},
+		"node_modules/@biomejs/cli-linux-x64-musl": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.1.2.tgz",
+			"integrity": "sha512-xlB3mU14ZUa3wzLtXfmk2IMOGL+S0aHFhSix/nssWS/2XlD27q+S6f0dlQ8WOCbYoXcuz8BCM7rCn2lxdTrlQA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-win32-arm64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.1.2.tgz",
+			"integrity": "sha512-G8KWZli5ASOXA3yUQgx+M4pZRv3ND16h77UsdunUL17uYpcL/UC7RkWTdkfvMQvogVsAuz5JUcBDjgZHXxlKoA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
+		"node_modules/@biomejs/cli-win32-x64": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.1.2.tgz",
+			"integrity": "sha512-9zajnk59PMpjBkty3bK2IrjUsUHvqe9HWwyAWQBjGLE7MIBjbX2vwv1XPEhmO2RRuGoTkVx3WCanHrjAytICLA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT OR Apache-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=14.21.3"
+			}
+		},
 		"node_modules/@changesets/apply-release-plan": {
 			"version": "7.0.12",
 			"resolved": "https://registry.npmjs.org/@changesets/apply-release-plan/-/apply-release-plan-7.0.12.tgz",
@@ -3202,241 +3465,6 @@
 				"node": ">=18"
 			}
 		},
-		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.7.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-			"integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"eslint-visitor-keys": "^3.4.3"
-			},
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-			}
-		},
-		"node_modules/@eslint-community/regexpp": {
-			"version": "4.12.1",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-			"integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-			}
-		},
-		"node_modules/@eslint/config-array": {
-			"version": "0.21.0",
-			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-			"integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@eslint/object-schema": "^2.1.6",
-				"debug": "^4.3.1",
-				"minimatch": "^3.1.2"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/config-array/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@eslint/config-array/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@eslint/config-helpers": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
-			"integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/core": {
-			"version": "0.15.1",
-			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
-			"integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@types/json-schema": "^7.0.15"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/eslintrc": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
-			"integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ajv": "^6.12.4",
-				"debug": "^4.3.2",
-				"espree": "^10.0.1",
-				"globals": "^14.0.0",
-				"ignore": "^5.2.0",
-				"import-fresh": "^3.2.1",
-				"js-yaml": "^4.1.0",
-				"minimatch": "^3.1.2",
-				"strip-json-comments": "^3.1.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/ajv": {
-			"version": "6.12.6",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
-				"fast-json-stable-stringify": "^2.0.0",
-				"json-schema-traverse": "^0.4.1",
-				"uri-js": "^4.2.2"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/epoberezkin"
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/argparse": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"dev": true,
-			"license": "Python-2.0"
-		},
-		"node_modules/@eslint/eslintrc/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/globals": {
-			"version": "14.0.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-			"integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=18"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"argparse": "^2.0.1"
-			},
-			"bin": {
-				"js-yaml": "bin/js-yaml.js"
-			}
-		},
-		"node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@eslint/eslintrc/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@eslint/js": {
-			"version": "9.32.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.32.0.tgz",
-			"integrity": "sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://eslint.org/donate"
-			}
-		},
-		"node_modules/@eslint/object-schema": {
-			"version": "2.1.6",
-			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-			"integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
-		"node_modules/@eslint/plugin-kit": {
-			"version": "0.3.4",
-			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
-			"integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@eslint/core": "^0.15.1",
-				"levn": "^0.4.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			}
-		},
 		"node_modules/@floating-ui/core": {
 			"version": "1.7.2",
 			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
@@ -3787,72 +3815,6 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/@humanfs/core": {
-			"version": "0.19.1",
-			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
-			"integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=18.18.0"
-			}
-		},
-		"node_modules/@humanfs/node": {
-			"version": "0.16.6",
-			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
-			"integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@humanfs/core": "^0.19.1",
-				"@humanwhocodes/retry": "^0.3.0"
-			},
-			"engines": {
-				"node": ">=18.18.0"
-			}
-		},
-		"node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-			"integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=18.18"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
-		"node_modules/@humanwhocodes/module-importer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=12.22"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
-		"node_modules/@humanwhocodes/retry": {
-			"version": "0.4.3",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
-			"integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": ">=18.18"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/nzakas"
-			}
-		},
 		"node_modules/@img/sharp-darwin-arm64": {
 			"version": "0.33.5",
 			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -7239,13 +7201,6 @@
 			"integrity": "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==",
 			"license": "MIT"
 		},
-		"node_modules/@types/estree": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/@types/glob": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-8.1.0.tgz",
@@ -7312,13 +7267,6 @@
 				"pretty-format": "^29.0.0"
 			}
 		},
-		"node_modules/@types/json-schema": {
-			"version": "7.0.15",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/@types/minimatch": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -7416,377 +7364,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.38.0.tgz",
-			"integrity": "sha512-CPoznzpuAnIOl4nhj4tRr4gIPj5AfKgkiJmGQDaq+fQnRJTYlcBjbX3wbciGmpoPf8DREufuPRe1tNMZnGdanA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.38.0",
-				"@typescript-eslint/type-utils": "8.38.0",
-				"@typescript-eslint/utils": "8.38.0",
-				"@typescript-eslint/visitor-keys": "8.38.0",
-				"graphemer": "^1.4.0",
-				"ignore": "^7.0.0",
-				"natural-compare": "^1.4.0",
-				"ts-api-utils": "^2.1.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"@typescript-eslint/parser": "^8.38.0",
-				"eslint": "^8.57.0 || ^9.0.0",
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
-			"version": "7.0.5",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
-			"integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">= 4"
-			}
-		},
-		"node_modules/@typescript-eslint/parser": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.38.0.tgz",
-			"integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.38.0",
-				"@typescript-eslint/types": "8.38.0",
-				"@typescript-eslint/typescript-estree": "8.38.0",
-				"@typescript-eslint/visitor-keys": "8.38.0",
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.57.0 || ^9.0.0",
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/parser/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/parser/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@typescript-eslint/project-service": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.38.0.tgz",
-			"integrity": "sha512-dbK7Jvqcb8c9QfH01YB6pORpqX1mn5gDZc9n63Ak/+jD67oWXn3Gs0M6vddAN+eDXBCS5EmNWzbSxsn9SzFWWg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/tsconfig-utils": "^8.38.0",
-				"@typescript-eslint/types": "^8.38.0",
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/project-service/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/project-service/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.38.0.tgz",
-			"integrity": "sha512-WJw3AVlFFcdT9Ri1xs/lg8LwDqgekWXWhH3iAF+1ZM+QPd7oxQ6jvtW/JPwzAScxitILUIFs0/AnQ/UWHzbATQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/types": "8.38.0",
-				"@typescript-eslint/visitor-keys": "8.38.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/tsconfig-utils": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.38.0.tgz",
-			"integrity": "sha512-Lum9RtSE3EroKk/bYns+sPOodqb2Fv50XOl/gMviMKNvanETUuUcC9ObRbzrJ4VSd2JalPqgSAavwrPiPvnAiQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.38.0.tgz",
-			"integrity": "sha512-c7jAvGEZVf0ao2z+nnz8BUaHZD09Agbh+DY7qvBQqLiz8uJzRgVPj5YvOh8I8uEiH8oIUGIfHzMwUcGVco/SJg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/types": "8.38.0",
-				"@typescript-eslint/typescript-estree": "8.38.0",
-				"@typescript-eslint/utils": "8.38.0",
-				"debug": "^4.3.4",
-				"ts-api-utils": "^2.1.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.57.0 || ^9.0.0",
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/type-utils/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@typescript-eslint/types": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.38.0.tgz",
-			"integrity": "sha512-wzkUfX3plUqij4YwWaJyqhiPE5UCRVlFpKn1oCRn2O1bJ592XxWJj8ROQ3JD5MYXLORW84063z3tZTb/cs4Tyw==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.38.0.tgz",
-			"integrity": "sha512-fooELKcAKzxux6fA6pxOflpNS0jc+nOQEEOipXFNjSlBS6fqrJOVY/whSn70SScHrcJ2LDsxWrneFoWYSVfqhQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/project-service": "8.38.0",
-				"@typescript-eslint/tsconfig-utils": "8.38.0",
-				"@typescript-eslint/types": "8.38.0",
-				"@typescript-eslint/visitor-keys": "8.38.0",
-				"debug": "^4.3.4",
-				"fast-glob": "^3.3.2",
-				"is-glob": "^4.0.3",
-				"minimatch": "^9.0.4",
-				"semver": "^7.6.0",
-				"ts-api-utils": "^2.1.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-			"version": "9.0.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/@typescript-eslint/typescript-estree/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@typescript-eslint/utils": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.38.0.tgz",
-			"integrity": "sha512-hHcMA86Hgt+ijJlrD8fX0j1j8w4C92zue/8LOPAFioIno+W0+L7KqE8QZKCcPGc/92Vs9x36w/4MPTJhqXdyvg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.7.0",
-				"@typescript-eslint/scope-manager": "8.38.0",
-				"@typescript-eslint/types": "8.38.0",
-				"@typescript-eslint/typescript-estree": "8.38.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			},
-			"peerDependencies": {
-				"eslint": "^8.57.0 || ^9.0.0",
-				"typescript": ">=4.8.4 <5.9.0"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.38.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.38.0.tgz",
-			"integrity": "sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@typescript-eslint/types": "8.38.0",
-				"eslint-visitor-keys": "^4.2.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/typescript-eslint"
-			}
-		},
-		"node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
 		"node_modules/@typespec/ts-http-runtime": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.0.tgz",
@@ -8327,8 +7904,8 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"devOptional": true,
 			"license": "MIT",
+			"optional": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -8346,16 +7923,6 @@
 				"acorn": "^8"
 			}
 		},
-		"node_modules/acorn-jsx": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-			"dev": true,
-			"license": "MIT",
-			"peerDependencies": {
-				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-			}
-		},
 		"node_modules/agent-base": {
 			"version": "7.1.3",
 			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -10431,13 +9998,6 @@
 				"node": ">=4.0.0"
 			}
 		},
-		"node_modules/deep-is": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -11118,314 +10678,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/eslint": {
-			"version": "9.32.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.32.0.tgz",
-			"integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@eslint-community/eslint-utils": "^4.2.0",
-				"@eslint-community/regexpp": "^4.12.1",
-				"@eslint/config-array": "^0.21.0",
-				"@eslint/config-helpers": "^0.3.0",
-				"@eslint/core": "^0.15.0",
-				"@eslint/eslintrc": "^3.3.1",
-				"@eslint/js": "9.32.0",
-				"@eslint/plugin-kit": "^0.3.4",
-				"@humanfs/node": "^0.16.6",
-				"@humanwhocodes/module-importer": "^1.0.1",
-				"@humanwhocodes/retry": "^0.4.2",
-				"@types/estree": "^1.0.6",
-				"@types/json-schema": "^7.0.15",
-				"ajv": "^6.12.4",
-				"chalk": "^4.0.0",
-				"cross-spawn": "^7.0.6",
-				"debug": "^4.3.2",
-				"escape-string-regexp": "^4.0.0",
-				"eslint-scope": "^8.4.0",
-				"eslint-visitor-keys": "^4.2.1",
-				"espree": "^10.4.0",
-				"esquery": "^1.5.0",
-				"esutils": "^2.0.2",
-				"fast-deep-equal": "^3.1.3",
-				"file-entry-cache": "^8.0.0",
-				"find-up": "^5.0.0",
-				"glob-parent": "^6.0.2",
-				"ignore": "^5.2.0",
-				"imurmurhash": "^0.1.4",
-				"is-glob": "^4.0.0",
-				"json-stable-stringify-without-jsonify": "^1.0.1",
-				"lodash.merge": "^4.6.2",
-				"minimatch": "^3.1.2",
-				"natural-compare": "^1.4.0",
-				"optionator": "^0.9.3"
-			},
-			"bin": {
-				"eslint": "bin/eslint.js"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://eslint.org/donate"
-			},
-			"peerDependencies": {
-				"jiti": "*"
-			},
-			"peerDependenciesMeta": {
-				"jiti": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/eslint-scope": {
-			"version": "8.4.0",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-			"integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"esrecurse": "^4.3.0",
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint-visitor-keys": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint/node_modules/ajv": {
-			"version": "6.12.6",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"fast-deep-equal": "^3.1.1",
-				"fast-json-stable-stringify": "^2.0.0",
-				"json-schema-traverse": "^0.4.1",
-				"uri-js": "^4.2.2"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/epoberezkin"
-			}
-		},
-		"node_modules/eslint/node_modules/ansi-styles": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"color-convert": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
-			}
-		},
-		"node_modules/eslint/node_modules/chalk": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/chalk/chalk?sponsor=1"
-			}
-		},
-		"node_modules/eslint/node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"ms": "^2.1.3"
-			},
-			"engines": {
-				"node": ">=6.0"
-			},
-			"peerDependenciesMeta": {
-				"supports-color": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/eslint/node_modules/escape-string-regexp": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint/node_modules/eslint-visitor-keys": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/eslint/node_modules/find-up": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"locate-path": "^6.0.0",
-				"path-exists": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint/node_modules/glob-parent": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"is-glob": "^4.0.3"
-			},
-			"engines": {
-				"node": ">=10.13.0"
-			}
-		},
-		"node_modules/eslint/node_modules/json-schema-traverse": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/eslint/node_modules/locate-path": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"p-locate": "^5.0.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/eslint/node_modules/p-limit": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"yocto-queue": "^0.1.0"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/eslint/node_modules/p-locate": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"p-limit": "^3.0.2"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/espree": {
-			"version": "10.4.0",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
-			"integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"acorn": "^8.15.0",
-				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^4.2.1"
-			},
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
-		"node_modules/espree/node_modules/eslint-visitor-keys": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/eslint"
-			}
-		},
 		"node_modules/esprima": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -11440,52 +10692,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/esquery": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-			"integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"estraverse": "^5.1.0"
-			},
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
-		"node_modules/esrecurse": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"dependencies": {
-				"estraverse": "^5.2.0"
-			},
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/estraverse": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"engines": {
-				"node": ">=4.0"
-			}
-		},
-		"node_modules/esutils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-			"dev": true,
-			"license": "BSD-2-Clause",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/etag": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -11703,13 +10909,6 @@
 			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
 			"license": "MIT"
 		},
-		"node_modules/fast-levenshtein": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/fast-safe-stringify": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -12029,19 +11228,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/file-entry-cache": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
-			"integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"flat-cache": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=16.0.0"
-			}
-		},
 		"node_modules/file-type": {
 			"version": "21.0.0",
 			"resolved": "https://registry.npmjs.org/file-type/-/file-type-21.0.0.tgz",
@@ -12115,27 +11301,6 @@
 				"flat": "cli.js"
 			}
 		},
-		"node_modules/flat-cache": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
-			"integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"flatted": "^3.2.9",
-				"keyv": "^4.5.4"
-			},
-			"engines": {
-				"node": ">=16"
-			}
-		},
-		"node_modules/flatted": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-			"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-			"dev": true,
-			"license": "ISC"
-		},
 		"node_modules/for-each": {
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -12695,13 +11860,6 @@
 				"node": ">=14"
 			}
 		},
-		"node_modules/graphemer": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/gtoken": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
@@ -13079,33 +12237,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/import-fresh": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-			"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"parent-module": "^1.0.0",
-				"resolve-from": "^4.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
-		"node_modules/import-fresh/node_modules/resolve-from": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/import-in-the-middle": {
 			"version": "1.14.2",
 			"resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-1.14.2.tgz",
@@ -15456,13 +14587,6 @@
 				"bignumber.js": "^9.0.0"
 			}
 		},
-		"node_modules/json-buffer": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/json-parse-better-errors": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -15489,13 +14613,6 @@
 			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
 			"license": "MIT"
 		},
-		"node_modules/json-stable-stringify-without-jsonify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/json5": {
 			"version": "2.2.3",
 			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -15638,16 +14755,6 @@
 				"prebuild-install": "^7.0.1"
 			}
 		},
-		"node_modules/keyv": {
-			"version": "4.5.4",
-			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"json-buffer": "3.0.1"
-			}
-		},
 		"node_modules/kleur": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -15678,20 +14785,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/levn": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"prelude-ls": "^1.2.1",
-				"type-check": "~0.4.0"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/lie": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -16078,8 +15171,8 @@
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-			"devOptional": true,
-			"license": "MIT"
+			"license": "MIT",
+			"optional": true
 		},
 		"node_modules/lodash.once": {
 			"version": "4.1.1",
@@ -17602,24 +16695,6 @@
 				"js-tiktoken": "^1.0.7"
 			}
 		},
-		"node_modules/optionator": {
-			"version": "0.9.4",
-			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"deep-is": "^0.1.3",
-				"fast-levenshtein": "^2.0.6",
-				"levn": "^0.4.1",
-				"prelude-ls": "^1.2.1",
-				"type-check": "^0.4.0",
-				"word-wrap": "^1.2.5"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/ora": {
 			"version": "8.2.0",
 			"resolved": "https://registry.npmjs.org/ora/-/ora-8.2.0.tgz",
@@ -17836,19 +16911,6 @@
 			"dev": true,
 			"license": "(MIT AND Zlib)"
 		},
-		"node_modules/parent-module": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"callsites": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -18264,16 +17326,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/prelude-ls": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/prettier": {
 			"version": "3.6.1",
 			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.1.tgz",
@@ -20430,19 +19482,6 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/ts-api-utils": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
-			"integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=18.12"
-			},
-			"peerDependencies": {
-				"typescript": ">=4.8.4"
-			}
-		},
 		"node_modules/tslib": {
 			"version": "2.8.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -20493,19 +19532,6 @@
 				"node": "*"
 			}
 		},
-		"node_modules/type-check": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"prelude-ls": "^1.2.1"
-			},
-			"engines": {
-				"node": ">= 0.8.0"
-			}
-		},
 		"node_modules/type-detect": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -21110,16 +20136,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/word-wrap": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/workerpool": {
 			"version": "9.3.3",
 			"resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.3.tgz",
diff --git a/package.json b/package.json
index 2c593eee..1e88bfba 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
 		"inspector": "npx @modelcontextprotocol/inspector node mcp-server/server.js",
 		"mcp-server": "node mcp-server/server.js",
 		"format-check": "biome format .",
-		"format": "biome format . --write"
+		"format": "biome format . --write",
+		"lint": "biome check .",
+		"lint:fix": "biome check . --write"
 	},
 	"keywords": [
 		"claude",